/* Maritime trust view. Colours, type and radii come from tokens.css; layout from app.css and
   studio.css. Band colours are never the only cue: line weight, labels and the readout say it too. */
:root{--b-cal:#8A93A8;--b-nom:var(--itg-card);--b-deg:var(--nav-card);--b-unt:var(--int-card);--truth:var(--ink-3);--hl:var(--spf)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--b-cal:#8A93A8;--b-nom:var(--itg);--b-deg:var(--nav);--b-unt:var(--int);--hl:#B7A2FF}}
:root[data-theme="dark"]{--b-cal:#8A93A8;--b-nom:var(--itg);--b-deg:var(--nav);--b-unt:var(--int);--hl:#B7A2FF}

.mt{padding-bottom:56px}
.mt h1{font:700 clamp(28px,4.4vw,46px)/1.05 var(--f-display);letter-spacing:-.02em;margin:10px 0 8px}
.mt .lede{max-width:78ch;margin:0 0 14px;color:var(--ink-2);font-size:16px;line-height:1.5}
.mt .h3{font:650 17px/1.2 var(--f-display)}
.mt-advice{margin:0 0 16px;padding:12px 14px;border-radius:14px;border:1px solid var(--line-2);border-left:4px solid var(--nav-card);background:var(--surface);font-size:13.5px;line-height:1.5;color:var(--ink-2);max-width:96ch}
.mt-advice b{color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.mt-load{margin-bottom:16px}
.mt-drop{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px;border:1.5px dashed var(--line-2);border-radius:16px;background:var(--surface-2)}
.mt-drop.over{border-color:var(--tim);background:color-mix(in srgb,var(--tim) 8%,var(--surface-2))}
.mt-drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.mt-file{cursor:pointer;position:relative}
.mt-file:focus-within{outline:2px solid var(--tim);outline-offset:2px}
.mt-or{color:var(--ink-3);font-size:13px}
.mt-demo{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);font-weight:600;font-size:14px}
.mt-demo:hover{background:var(--line)}
.mt-status{margin:10px 0 0;font-size:13.5px;color:var(--ink-2)}
.mt-status.err{color:var(--int);font-weight:600}
.mt-notes{margin:6px 0 0;padding-left:18px;font-size:12.5px;color:var(--ink-3)}

/* controls */
.mt-bar{display:grid;grid-template-columns:auto auto 1fr auto;gap:10px 14px;align-items:center;margin-bottom:14px;position:sticky;top:64px;z-index:20}
.mt-play{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center}
.mt-play svg{width:16px;height:16px}
.mt-speed{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2)}
.mt-speed select{min-height:44px;min-width:56px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface);padding:0 8px}
.mt-slider{width:100%;min-width:120px;height:44px;accent-color:var(--tim)}
.mt-readout{font:500 12.5px/1.3 var(--f-mono);color:var(--ink);min-width:15ch;text-align:right;white-space:nowrap}
.mt-tools{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px}
.mt-chip{min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);font-size:13px;font-weight:550;color:var(--ink-2)}
button.mt-chip:hover,.mt-chip.chk:hover{background:var(--line)}
.mt-chip input{width:18px;height:18px;accent-color:var(--tim)}
.mt-live{grid-column:1/-1;margin:0;font-size:13px;color:var(--ink-2);min-height:1.5em}

.mt-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:14px;align-items:start}
.mt-track{grid-row:span 2}
.mt-svgbox{width:100%;min-width:0}
.mt-svgbox svg{display:block;width:100%;height:auto;overflow:visible}
.mt-track svg{aspect-ratio:1/1;background:var(--surface-2);border-radius:14px;touch-action:none}
.mt-time svg{touch-action:pan-y;cursor:crosshair}
.mt-time svg:focus-visible{outline:2px solid var(--tim);outline-offset:3px}
.mt-h4{margin:14px 0 6px;font:600 13px/1.2 var(--f-text);color:var(--ink-2)}
.mt-h4 small{color:var(--ink-3);font-weight:400}
.mt svg text{font:11px var(--f-mono);fill:var(--ink-3)}
.mt svg .ax{stroke:var(--line-2);stroke-width:1;fill:none}
.mt svg .edge{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:5 4;fill:none}
.mt svg .score{fill:none;stroke:var(--ink);stroke-width:1.6;vector-effect:non-scaling-stroke}
.mt svg .cur{stroke:var(--tim);stroke-width:1.5;vector-effect:non-scaling-stroke}
.mt svg .truth-l{fill:none;stroke:var(--truth);stroke-width:1.2;opacity:.9}
.mt svg .hl-dot{fill:var(--hl);stroke:var(--bg);stroke-width:1}
.mt svg .hl-bar{fill:var(--hl);opacity:.85}
.mt svg .rowlbl{fill:var(--ink-2);font-size:10.5px;cursor:help}
.mt svg .alarm1{stroke:var(--b-unt);stroke-width:1;stroke-dasharray:3 3;opacity:.7;vector-effect:non-scaling-stroke}
.mt svg .ratio{fill:none;stroke:var(--ink-2);stroke-width:1.2;vector-effect:non-scaling-stroke}
.mt svg .ratio.over{stroke:var(--b-unt)}
.mt svg .dim{opacity:.18}
.mt svg .evt{stroke:var(--spf);stroke-width:1.5;stroke-dasharray:2 2}
.mt-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 0;padding:0;list-style:none;font-size:12.5px;color:var(--ink-2)}
.mt-legend li{display:flex;align-items:center;gap:6px}
.mt-legend i{display:inline-block;width:22px;height:0;border-top:4px solid var(--c);border-radius:2px;forced-color-adjust:none}
.mt-legend i.thin{border-top-width:1.5px}
.mt-offset{margin:8px 0 0;font:500 13px/1.4 var(--f-mono);color:var(--ink)}

/* reasons */
.mt-rrow{min-height:44px;display:grid;grid-template-columns:minmax(0,13ch) 1fr auto;gap:4px 10px;align-items:center;width:100%;padding:2px 4px;border-radius:8px;text-align:left}
button.mt-rrow:hover{background:var(--line)}
.mt-rrow[aria-pressed=true]{background:color-mix(in srgb,var(--hl) 16%,transparent);outline:1px solid var(--hl)}
.mt-rname{font:550 12.5px/1.2 var(--f-mono);overflow-wrap:anywhere}
.mt-rtrack{height:14px;border-radius:7px;background:var(--surface-2);position:relative;overflow:hidden}
.mt-rtrack i{position:absolute;left:0;top:0;bottom:0;background:var(--b-unt);border-radius:7px}
.mt-rtrack b{position:absolute;top:0;bottom:0;width:2px;background:var(--ink-3);opacity:.7}
.mt-rnum{font:500 12px/1.2 var(--f-mono);color:var(--ink-2);white-space:nowrap}
.mt-rrow.faint{opacity:.55}
.mt-rsub{margin:10px 0 2px;font:600 12px/1.2 var(--f-text);color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.mt-rlist{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:4px 12px;font:12px/1.4 var(--f-mono);color:var(--ink-3)}
.mt-rlist li{cursor:help}
.mt-none{margin:0;font-size:13.5px;color:var(--ink-2)}

.mt-gate-now{margin:0 0 8px;font:600 15px/1.3 var(--f-display)}
.mt-pksht{display:flex;flex-direction:column;gap:3px;margin:0;font-size:12px;color:var(--ink-3)}
.mt-pksht code{font-size:12px;color:var(--ink);overflow-wrap:anywhere}

.mt-setgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px 18px;margin:0}
.mt-setgrid div{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;border-bottom:1px solid var(--line);padding:3px 0}
.mt-setgrid dt{font-family:var(--f-mono);color:var(--ink-2);cursor:help}
.mt-setgrid dd{margin:0;font-family:var(--f-mono);color:var(--ink)}
.mt-set h4{margin:12px 0 6px;font:600 12px/1.2 var(--f-text);color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}

.mt-fine{margin-top:22px;max-width:96ch}
.mt-fine ul{margin:8px 0 0;padding-left:20px;color:var(--ink-2);font-size:13.5px;line-height:1.55}

@media (max-width:900px){
  .mt-grid{grid-template-columns:minmax(0,1fr)}
  .mt-track{grid-row:auto}
  .mt-bar{grid-template-columns:auto 1fr;position:static}
  .mt-slider{grid-column:1/-1;order:5}
  .mt-readout{grid-column:1/-1;text-align:left;order:6}
}
@media (max-width:520px){
  .wrap.mt{padding-left:16px;padding-right:16px}
  .mt-rrow{grid-template-columns:minmax(0,11ch) 1fr auto}
}
@media (prefers-reduced-motion:reduce){.mt *{transition:none!important;animation:none!important}}
@media (forced-colors:active){.mt-legend i,.mt-rtrack i{forced-color-adjust:none}}

.mt-slider{display:block;min-height:44px;box-sizing:border-box;padding:0}
.mt-gloss{margin-top:12px}
.mt-gloss summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:600;font-size:13px}
.mt-gloss dl{margin:0 0 8px;display:grid;gap:6px;font-size:12.5px}
.mt-gloss dt{font:550 12px/1.3 var(--f-mono);color:var(--ink)}
.mt-gloss dd{margin:0 0 4px;color:var(--ink-2)}

.mt-track svg text{font-size:15px}
.mt-time svg text{font-size:10.5px}

.mt-adv{margin:0 0 12px;padding:10px 14px;border-radius:12px;border:1px solid var(--line-2);border-left:4px solid var(--nav-card);background:var(--surface);font-size:13px;line-height:1.45;color:var(--ink-2)}
.mt-adv b{color:var(--ink)}

.mt-toml{width:100%;box-sizing:border-box;font:12.5px/1.45 var(--f-mono);border-radius:10px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);padding:10px;resize:vertical}
.mt-notes-line{margin:6px 0 0;font-size:12.5px;color:var(--ink-3)}

/* geometry lane (0.36): the sky beside the score. "geometry" is a neutral blue that no band uses, so a masked
   sky never shares a colour with an attack (red, or amber with a poor sky). Unknown is grey hatched, never green. */
:root{--g-sky:#3D6FD9;--g-env:#7A4FD0}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--g-sky:#7FA4FF;--g-env:#B79BFF}}
:root[data-theme="dark"]{--g-sky:#7FA4FF;--g-env:#B79BFF}
.mt-hatch-bg{fill:color-mix(in srgb,var(--b-cal) 25%,transparent)}
.mt-hatch-line{stroke:var(--b-cal);stroke-width:1.6}
.mt-legend i.hatch{border-top:none;height:8px;background:repeating-linear-gradient(45deg,var(--b-cal) 0 2px,transparent 2px 5px);border:1px solid var(--b-cal)}
.mt-legend .mt-lg-head{font-weight:600;color:var(--ink);margin-left:6px}
.mt-class{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;border:1px solid var(--c,var(--ink-3));color:var(--c,var(--ink-3));font:600 10.5px/1.4 var(--f-text);white-space:nowrap}
.mt-class.geometry{--c:var(--g-sky)}.mt-class.environment{--c:var(--g-env)}.mt-class.inconsistency{--c:var(--b-unt)}
.mt-geo-flags{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:4px}
.mt-geo-flags li{padding:6px 10px;border-radius:10px;font-size:12.5px;line-height:1.4;border-left:4px solid var(--b-unt);background:var(--surface-2)}
.mt-geo-flags li.signal-loss{border-left-color:var(--g-env)}
.mt-geo-now.fair{border-left-color:var(--b-deg)}
.mt-geo-now.poor{border-left-color:var(--b-unt)}
.mt-rname{display:flex;flex-wrap:wrap;align-items:center;gap:2px}
.mt-geo-now{margin:0 0 8px;font:600 15px/1.3 var(--f-display);padding-left:10px;border-left:4px solid var(--b-cal)}
.mt-geo-now.good{border-left-color:var(--b-nom)}
.mt-geo-now.unknown{border-left-style:dashed}
.mt-geo-rows div{font-size:12.5px}
@media (forced-colors:active){.mt-class,.mt-clsdot{forced-color-adjust:none}}
.mt-geo-rows .wide{grid-column:1/-1}
.mt-geo-rows .wide dd{text-align:right}

/* the vessel glyph, error ring and sky (A2, A4) */
.mt svg .mt-glyph{fill:var(--ink);stroke:var(--bg);stroke-width:1.2}
.mt svg .mt-hdg{stroke:var(--ink);stroke-width:1.6}
.mt svg .mt-ring{fill:color-mix(in srgb,var(--tim) 8%,transparent);stroke:var(--ink);stroke-width:1.4;stroke-dasharray:4 3}
.mt-skybox{width:100%;max-width:300px;margin:0 auto}
.mt-skybox svg{display:block;width:100%;height:auto}

/* the receiver's own flag (0.38): a thin outline marks "only the receiver" besides its colour */
.mt svg .mt-recv-only{stroke:var(--ink);stroke-width:1}

/* Generic run: format picker, IMU fields, the receiver's own flags */
.mt-field { display: grid; gap: .25rem; font-size: .85rem; color: var(--muted, #5b6472); }
.mt-field select, .mt-field input[type="text"] { font: inherit; padding: .4rem .5rem; max-width: 100%; }
.mt-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .5rem 1rem; margin: .75rem 0; }
.mt-kv > div { min-width: 0; }
.mt-kv dt { font-size: .8rem; color: var(--muted, #5b6472); }
.mt-kv dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }