/* ── MDT layout — all sizing in em so ResizeObserver font-size cascade works */
#screen-mdt {
  display: none;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  font-size: 13px; /* base — overridden by ResizeObserver */
}
#screen-mdt.active { display: flex; }

.mdt-topbar {
  background: var(--bg0);
  border-bottom: 2px solid var(--red);
  display: flex;
  align-items: center;
  gap: .5em;
  padding: .38em .7em;
  flex-shrink: 0;
}
.mdt-dot   { width: .6em; height: .6em; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.mdt-cs    { font-weight: 700; color: var(--amber); font-size: 1.2em; letter-spacing: .05em; }
.mdt-name  { color: var(--text3); font-size: .85em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdt-inc   { color: var(--red); font-weight: 700; font-size: .85em; }
.mdt-clock { margin-left: auto; color: var(--text4); font-size: .78em; font-variant-numeric: tabular-nums; white-space: nowrap; }

.mdt-alert {
  background: #2a0000;
  border-bottom: 2px solid var(--red);
  display: flex;
  align-items: flex-start;
  gap: .5em;
  padding: .38em .7em;
  flex-shrink: 0;
}
.mdt-alert-icon {
  background: var(--red);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  flex-shrink: 0;
  width: 1.4em;
  height: 1.4em;
  font-size: .9em;
}
.mdt-alert-msg { color: #f99; font-weight: 700; font-size: .8em; line-height: 1.35; flex: 1; }
.mdt-alert-t   { color: var(--red); font-size: .72em; flex-shrink: 0; }

.mdt-asgn {
  background: #0d1a0d;
  border-bottom: 1px solid #1a3a1a;
  padding: .5em .7em;
  flex-shrink: 0;
}
.mdt-asgn-lbl   { font-size: .62em; color: var(--green); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .2em; }
.mdt-asgn-title { color: var(--text0); font-weight: 700; font-size: .95em; margin-bottom: .3em; }
.mdt-asgn-meta  { display: flex; gap: .35em; flex-wrap: wrap; align-items: center; margin-bottom: .25em; }
.mdt-sv         { font-size: .72em; color: var(--text4); display: flex; align-items: center; gap: .4em; flex-wrap: wrap; }
.mdt-sv-v       { color: var(--amber); font-weight: 700; }

.mdt-body { flex: 1; display: flex; overflow: hidden; }
.mdt-left { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.mdt-right {
  border-left: 1px solid var(--border1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
  width: 0;
  transition: width .15s;
}
.mdt-right.open { width: var(--right-w, 260px); }
.mdt-right-head {
  font-size: .62em;
  color: var(--text4);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .5em .8em .3em;
  border-bottom: 1px solid var(--border1);
  flex-shrink: 0;
}
.mdt-right-feed { flex: 1; overflow-y: auto; }

.mdt-tabs {
  display: flex;
  border-bottom: 1px solid var(--border1);
  flex-shrink: 0;
  background: var(--bg0);
  overflow-x: auto;
}
.mdt-tab {
  flex: 1;
  text-align: center;
  color: var(--text4);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  white-space: nowrap;
  font-size: .75em;
  padding: .6em .3em;
  transition: color .1s, background .1s;
}
.mdt-tab.on  { color: var(--amber); border-bottom-color: var(--amber); background: var(--bg1); }
.mdt-tab:hover:not(.on) { color: var(--text2); background: var(--bg3); }
.mdt-tbadge {
  display: inline-block;
  background: var(--red);
  color: #fff;
  border-radius: 2px;
  font-size: .8em;
  padding: 0 3px;
  margin-left: 2px;
  vertical-align: top;
}

.mdt-tc { flex: 1; overflow-y: auto; display: none; flex-direction: column; }
.mdt-tc.on { display: flex; }

/* Notes */
.mdt-nr { border-bottom: 1px solid var(--border0); cursor: pointer; padding: .5em .7em; }
.mdt-nr:hover  { background: var(--bg3); }
.mdt-nr.pin    { background: var(--amber-bg); }
.mdt-nr-meta   { display: flex; gap: .4em; align-items: center; flex-wrap: wrap; margin-bottom: .2em; }
.mdt-nr-auth   { color: var(--amber); font-weight: 700; font-size: .72em; }
.mdt-nr-time   { color: var(--text5); font-size: .65em; margin-left: auto; }
.mdt-nr-pin    { color: var(--amber); font-size: .65em; }
.mdt-nr-body   { color: var(--text2); font-size: .75em; line-height: 1.45; }

/* Compose */
.mdt-compose { border-top: 1px solid var(--border1); background: var(--bg0); padding: .5em .7em; flex-shrink: 0; }
.mdt-cta {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border3);
  border-radius: var(--radius-sm);
  color: var(--text1);
  font-family: inherit;
  resize: none;
  font-size: .75em;
  padding: .35em .5em;
  height: 2.8em;
}
.mdt-cta:focus { outline: none; border-color: var(--amber); }
.mdt-crow { display: flex; gap: .35em; margin-top: .4em; flex-wrap: wrap; }

/* Status tab */
.mdt-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--bg0); flex-shrink: 0; }
.mdt-sc { background: var(--bg2); padding: .65em .8em; }
.mdt-sc-l { font-size: .6em; color: var(--text4); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .2em; }
.mdt-sc-v { font-family: inherit; font-weight: 700; font-size: 1.4em; line-height: 1; }
.mdt-sc-s { color: var(--text4); font-size: .65em; margin-top: .2em; }

.mdt-sb-wrap { flex: 1; overflow-y: auto; }
.mdt-sb-sec  { padding: .65em .8em; }
.mdt-sb-lbl  { font-size: .6em; color: var(--text4); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .5em; }
.mdt-sb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.mdt-sb-btn {
  border-radius: 5px;
  border: 2px solid;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  font-size: .78em;
  padding: .9em .4em;
  transition: background .1s, color .1s, border-color .1s;
}
.mdt-sb-on  { border-color: var(--red); background: var(--red-bg); color: var(--red); }
.mdt-sb-off { border-color: var(--border2); background: var(--bg3); color: var(--text4); }
.mdt-sb-off:hover { border-color: var(--amber); background: var(--amber-bg); color: var(--amber); }

/* Unit list */
.mdt-ul-row { display: flex; align-items: center; gap: .55em; border-bottom: 1px solid var(--border0); padding: .6em .7em; cursor: pointer; }
.mdt-ul-row:hover { background: var(--bg3); }
.mdt-ul-dot  { border-radius: 50%; flex-shrink: 0; width: .65em; height: .65em; }
.mdt-ul-unit { font-weight: 700; font-size: .82em; min-width: 3.2em; }
.mdt-ul-info { flex: 1; min-width: 0; }
.mdt-ul-name { color: var(--text3); font-size: .75em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdt-ul-loc  { color: var(--text5); font-size: .68em; }
.mdt-ul-st   { font-size: .68em; padding: .15em .45em; border-radius: 2px; border: 1px solid; white-space: nowrap; flex-shrink: 0; }

/* Spotter form */
.mdt-sf-wrap { padding: .65em .8em; overflow-y: auto; flex: 1; }
.mdt-sf-lbl  { color: var(--text3); font-size: .7em; margin-top: .7em; margin-bottom: .3em; }
.mdt-sf-lbl:first-child { margin-top: 0; }
.mdt-sf-chips { display: flex; gap: .35em; flex-wrap: wrap; }
.mdt-sf-chip {
  border-radius: 3px;
  border: 1px solid var(--border3);
  background: var(--bg3);
  color: var(--text4);
  cursor: pointer;
  font-size: .72em;
  padding: .4em .7em;
  font-family: inherit;
  transition: background .1s, color .1s, border-color .1s;
}
.mdt-sf-chip.sr { background: var(--red-bg);   border-color: var(--red);   color: var(--red); }
.mdt-sf-chip.sa { background: var(--amber-bg); border-color: var(--amber); color: var(--amber); }
.mdt-sf-chip.sg { background: var(--green-bg); border-color: var(--green); color: var(--green); }
.mdt-sf-sub {
  width: 100%;
  background: var(--green-bg);
  border: 2px solid var(--green);
  border-radius: var(--radius-sm);
  color: var(--green);
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  font-size: .82em;
  padding: .75em;
  margin-top: .7em;
}
.mdt-sf-sub:hover { background: #002a00; }
.mdt-nws-row { display: flex; align-items: center; gap: .4em; color: var(--blue); font-size: .72em; margin-top: .5em; }
.mdt-nws-row input { accent-color: var(--blue); }

/* Bottom bar */
.mdt-bot {
  background: var(--bg0);
  border-top: 1px solid var(--border1);
  display: flex;
  gap: .35em;
  padding: .4em .5em;
  flex-shrink: 0;
}
.mdt-bb {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  color: var(--text4);
  font-family: inherit;
  cursor: pointer;
  font-size: .75em;
  height: 2.8em;
  transition: background .1s, color .1s;
}
.mdt-bb:hover  { background: var(--bg5); color: var(--text1); }
.mdt-bb-emg { background: var(--red-bg); border-color: var(--red); color: var(--red); font-weight: 700; }
.mdt-bb-emg:hover { background: #2a0000; }