:root {
  --sea: #0f1b24;
  --sea-2: #162632;
  --rule: #263a48;
  --ink: #dde7ee;
  --mute: #8299a8;
  --cable: #2fbfcc;
  --power: #e0a526;
  --gas: #e2763a;
  --normal: #9fb8c8;
  --low: #e8cf5a;
  --moderate: #f2933c;
  --high: #ef4b4f;
  --panel-w: 380px;
  --sans: "Barlow", system-ui, sans-serif;
  --cond: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--sea);
  color: var(--ink);
  font: 15px/1.45 var(--sans);
  overflow: hidden;
}
.mono { font-family: var(--mono); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--cable); outline-offset: 2px; }

[data-level="normal"] { --c: var(--normal); }
[data-level="low"] { --c: var(--low); }
[data-level="moderate"] { --c: var(--moderate); }
[data-level="high"] { --c: var(--high); }

.app { display: grid; grid-template-columns: 1fr var(--panel-w); height: 100vh; }

/* ---------- stage: map + overlays ---------- */
.stage { position: relative; min-width: 0; overflow: hidden; }
#map { position: absolute; inset: 0; background: #0b1218; }

.masthead {
  position: absolute; top: 16px; left: 16px; z-index: 525;
  display: flex; align-items: center; gap: 10px;
  pointer-events: none;
}
.masthead h1 {
  margin: 0; font: 600 26px/1 var(--cond); letter-spacing: .01em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
}
/* The honesty badge: a hazard-taped placard, deliberately unlike any danger colour. */
.sim-badge {
  margin: 0; pointer-events: auto;
  padding: 6px 12px;
  font: 600 15px/1 var(--cond); letter-spacing: .04em;
  color: #fff; background: var(--sea);
  border: 3px solid transparent;
  border-image: repeating-linear-gradient(-45deg, #fff 0 6px, var(--sea) 6px 12px) 3;
}

/* ---------- ship card ---------- */
.card {
  position: absolute; left: 16px; top: 64px; z-index: 520;
  width: 300px; padding: 10px 12px 12px;
  background: rgba(15, 27, 36, .96); color: var(--ink);
  border: 1px solid var(--rule); border-left: 4px solid var(--c);
  border-radius: 6px; box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
  font-size: 14px; line-height: 1.4;
}
.card[hidden] { display: none; }
.card-top { display: flex; align-items: center; gap: 8px; }
.card-name { flex: 1; font: 600 19px/1.1 var(--cond); }
.card-fold {
  display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
  background: none; border: 1px solid var(--rule); border-radius: 4px; color: var(--mute);
}
.card-fold:hover { color: var(--ink); border-color: var(--mute); }
.card.collapsed .card-body { display: none; }
.card.collapsed .card-fold svg { transform: rotate(180deg); }
.card-sub { display: flex; gap: 10px; color: var(--mute); font-size: 13px; margin: 3px 0 8px; white-space: nowrap; }
.card-sub .cs-flag { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.card-reason { margin: 0 0 6px; font-size: 15px; line-height: 1.4; height: calc(3 * 1.4em); }
.card-action { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.35; height: calc(2 * 1.35em); }
.badge {
  flex: none; padding: 2px 6px; border-radius: 3px; min-width: 76px; text-align: center;
  font: 600 14px/1.3 var(--cond); letter-spacing: .03em;
  background: var(--c); color: var(--sea);
}

.leader { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 510; pointer-events: none; overflow: visible; }
.leader line { stroke: var(--c, var(--normal)); stroke-width: 1.5; stroke-dasharray: 2 4; opacity: .85; }
.leader circle { fill: var(--c, var(--normal)); }

/* ---------- controls + timeline ---------- */
.controls {
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 530;
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px 12px 12px;
  background: rgba(15, 27, 36, .95);
  border: 1px solid var(--rule); border-radius: 6px;
}
.controls-row { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; }
.controls button {
  background: var(--sea-2); border: 1px solid var(--rule); border-radius: 4px;
  padding: 7px 11px; font-size: 15px;
}
.controls button:hover { border-color: var(--mute); }
.controls button[aria-pressed="true"] { background: var(--ink); color: var(--sea); border-color: var(--ink); }
.controls button:disabled { opacity: .4; cursor: not-allowed; }
.scenarios, .transport { display: flex; align-items: center; gap: 5px; }
.transport { margin-left: auto; gap: 8px; }
.seg { display: flex; }
.seg button { border-radius: 0; padding: 7px 9px; }
.seg button + button { border-left: 0; }
.seg button:first-child { border-radius: 4px 0 0 4px; }
.seg button:last-child { border-radius: 0 4px 4px 0; }
.controls button.icon { display: grid; place-items: center; width: 38px; height: 36px; padding: 0; }
kbd { font: 500 12px/1 var(--mono); color: var(--mute); margin-right: 6px; }
button[aria-pressed="true"] kbd { color: inherit; opacity: .6; }

.timeline-row { flex-wrap: nowrap; }
.clock { flex: none; width: 132px; white-space: nowrap; display: flex; flex-direction: column; font-family: var(--mono); line-height: 1.15; }
#clock { font-size: 16px; }
.elapsed { font-size: 12px; color: var(--mute); }

.timeline {
  position: relative; flex: 1; height: 34px; cursor: pointer; touch-action: none;
  border-radius: 4px;
}
.timeline::before { /* the rail */
  content: ""; position: absolute; left: 0; right: 0; top: 20px; height: 6px;
  background: var(--rule); border-radius: 3px;
}
.tl-band { position: absolute; left: 0; right: 0; top: 20px; height: 6px; border-radius: 3px; overflow: hidden; }
.tl-band i { position: absolute; top: 0; bottom: 0; background: var(--c); }
.tl-markers { position: absolute; inset: 0; pointer-events: none; }
.tl-marker {
  position: absolute; top: 2px; width: 14px; height: 14px; margin-left: -7px; padding: 0 !important;
  background: var(--c) !important; border: 2px solid var(--sea) !important; border-radius: 2px !important;
  transform: rotate(45deg); pointer-events: auto;
}
.tl-marker:hover, .tl-marker:focus-visible { box-shadow: 0 0 0 2px var(--ink); }
.tl-tip {
  display: none; position: absolute; bottom: 22px; width: 280px;
  transform: rotate(-45deg); transform-origin: 0 100%;
  padding: 8px 10px; border-radius: 5px; border-left: 4px solid var(--c);
  background: var(--sea); border-top: 1px solid var(--rule); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  font: 13px/1.35 var(--sans); color: var(--ink); text-align: left; pointer-events: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5);
}
.tl-tip b { display: block; font-weight: 600; margin-bottom: 2px; }
.tl-tip.left { left: 0; }
.tl-tip.right { left: 0; translate: -100% 0; }
.tl-marker:hover .tl-tip, .tl-marker:focus-visible .tl-tip { display: block; }
.tl-head {
  position: absolute; top: 14px; width: 4px; height: 18px; margin-left: -2px;
  background: #fff; border-radius: 2px; box-shadow: 0 0 0 2px var(--sea); pointer-events: none;
}

/* ---------- map elements ---------- */
.ship { width: 28px; height: 28px; position: relative; }
.ship svg { width: 28px; height: 28px; filter: drop-shadow(0 0 3px rgba(0, 0, 0, .8)); }
.ship .ring { position: absolute; inset: -10px; border-radius: 50%; border: 2px solid var(--high); opacity: 0; }
.ship[data-level="high"] .ring { animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.4); opacity: 0; } }

.cable-label {
  background: none; border: 0; box-shadow: none; padding: 0;
  color: var(--cable); font: 600 15px/1 var(--cond); letter-spacing: .03em;
  text-shadow: 0 0 4px #000, 0 0 8px #000;
}
.cable-label::before { display: none; }
.plan-label { color: var(--ink); opacity: .75; }
.leaflet-tooltip.map-tip {
  background: var(--sea); color: var(--ink); border: 1px solid var(--rule); border-radius: 4px;
  font: 13px/1.4 var(--sans); box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
}
.leaflet-tooltip.map-tip::before { display: none; }

.leaflet-container { font-family: var(--sans); }
.leaflet-control-attribution { background: rgba(15, 27, 36, .8) !important; color: var(--mute) !important; font-size: 11px; }
.leaflet-control-attribution a { color: var(--normal) !important; }
.leaflet-bar a { background: var(--sea-2); color: var(--ink); border-color: var(--rule); }
.leaflet-bar a:hover { background: var(--rule); color: var(--ink); }

/* ---------- side panel ---------- */
.panel {
  display: flex; flex-direction: column; min-height: 0;
  border-left: 1px solid var(--rule); background: var(--sea);
}
.panel > section { padding: 14px 18px; border-bottom: 1px solid var(--rule); }

.vessel-name { font: 600 28px/1.05 var(--cond); }
.vessel-meta { display: flex; gap: 18px; margin: 8px 0 0; }
.vessel-meta dt { color: var(--mute); font-size: 13px; }
.vessel-meta dd { margin: 0; }
.infra { display: flex; gap: 8px; margin: 8px 0 0; font-size: 14px; color: var(--mute); white-space: nowrap; }
.infra-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.infra b { color: var(--ink); font-weight: 500; }
.infra .num { color: var(--ink); font-family: var(--mono); }

.assessment { box-shadow: inset 4px 0 0 var(--c); }
.meter-bands { display: grid; grid-template-columns: 20fr 20fr 30fr 30fr; font: 500 13px/1 var(--cond); color: var(--mute); }
.meter-bands span { padding-bottom: 5px; }
.meter-track {
  position: relative; height: 8px; border-radius: 4px;
  background: linear-gradient(90deg,
    var(--normal) 0 20%, var(--low) 20% 40%, var(--moderate) 40% 70%, var(--high) 70% 100%);
  opacity: .9;
}
.meter-needle {
  position: absolute; top: -5px; left: 0; width: 4px; height: 18px; margin-left: -2px;
  background: #fff; border-radius: 2px; box-shadow: 0 0 0 2px var(--sea);
}
.verdict { display: flex; align-items: baseline; justify-content: space-between; margin-top: 12px; }
.level { display: inline-block; min-width: 160px; font: 700 40px/1 var(--cond); color: var(--c); }
.score { min-width: 4ch; text-align: right; font-size: 18px; color: var(--mute); }
.reason { margin: 8px 0 10px; font-size: 17px; line-height: 1.4; height: calc(3 * 1.4em); }
.action { margin: 0 0 12px; }
.action span { display: block; color: var(--mute); font-size: 13px; }
.action strong { display: block; font-weight: 500; line-height: 1.35; height: calc(2 * 1.35em); }

/* ---------- steady numbers: tabular digits in fixed, right-aligned slots ---------- */
.panel, .card, .controls, .summary { font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; text-align: right; display: inline-block; white-space: nowrap; }
.w-kn { min-width: 7ch; }   /* "12.5 kn" */
.w-deg { min-width: 4ch; }  /* "270°" */
.w-m { min-width: 7ch; }    /* "1,275 m" */
.w-km { min-width: 8ch; }   /* "123.4 km" */
/* Long text keeps its box: clamp with an ellipsis; the full text is in the title tooltip. */
.reason, .card-reason, .action strong, .card-action {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.reason, .card-reason { -webkit-line-clamp: 3; }
.action strong, .card-action { -webkit-line-clamp: 2; }

.factors { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.factors li { display: grid; grid-template-columns: 108px 1fr 70px; align-items: center; gap: 10px; font-size: 14px; }
.factors .f-label { color: var(--mute); }
.factors .f-bar { height: 4px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.factors .f-bar i { display: block; height: 100%; background: var(--ink); }
.factors .f-val { font-family: var(--mono); font-size: 13px; text-align: right; white-space: nowrap; }

.stream { flex: 1; display: flex; flex-direction: column; min-height: 0; padding-bottom: 0 !important; border-bottom: 0 !important; }
.stream h2 { margin: 0 0 8px; font: 600 18px/1 var(--cond); display: flex; justify-content: space-between; }
.stream h2 span { color: var(--mute); font: 400 14px var(--mono); min-width: 6ch; }
.stream-head, .msg-main { display: grid; grid-template-columns: 60px 1fr 34px 86px; gap: 6px; }
.stream-head { color: var(--mute); font-size: 12px; padding: 0 0 6px 8px; border-bottom: 1px solid var(--rule); }
.stream-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; scrollbar-width: thin; }
.msg { border-bottom: 1px solid rgba(38, 58, 72, .6); padding: 6px 0 6px 8px; box-shadow: inset 3px 0 0 var(--c); cursor: pointer; }
.msg:hover { background: var(--sea-2); }
.msg-main { font: 12.5px/1.3 var(--mono); white-space: nowrap; }
.msg-main .off { color: var(--moderate); }
.msg-sub { display: flex; align-items: center; gap: 0; font-size: 12px; color: var(--mute); margin-top: 2px; white-space: nowrap; }
.msg-sub .num { margin-left: 8px; }
.msg .json {
  margin-left: auto; margin-right: 6px; padding: 0 6px; font: 11px/1.6 var(--mono);
  background: none; border: 1px solid var(--rule); border-radius: 3px; color: var(--mute);
}
.msg .json:hover { color: var(--ink); border-color: var(--mute); }
.msg.note { font-size: 13px; box-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg.gap { color: var(--mute); font-style: italic; }
.msg.level { color: var(--c); box-shadow: inset 3px 0 0 var(--c); }
.msg pre {
  margin: 6px 8px 2px 0; padding: 8px; overflow-x: auto; cursor: text;
  background: #0a141b; border-radius: 4px; font: 11px/1.4 var(--mono); color: var(--normal);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 900px) {
  body { overflow: auto; }
  .app { grid-template-columns: 1fr; grid-template-rows: 75vh auto; height: auto; }
  .panel { border-left: 0; border-top: 1px solid var(--rule); }
  .stream-list { max-height: 50vh; }
  .transport { margin-left: 0; }
  .card { width: 240px; }
}

/* ---------- case study ---------- */
.head-btn {
  pointer-events: auto; padding: 6px 12px; border-radius: 4px;
  background: var(--sea-2); border: 1px solid var(--rule); font: 500 14px/1 var(--sans);
}
.head-btn:hover { border-color: var(--mute); }
.head-btn[aria-expanded="true"] { background: var(--ink); color: var(--sea); }
.head-btn[hidden] { display: none; }
.case-pop {
  position: absolute; top: 60px; left: 16px; z-index: 540; width: min(460px, calc(100% - 32px));
  max-height: calc(100% - 200px); overflow-y: auto;
  padding: 14px 16px; border-radius: 6px; background: var(--sea); border: 1px solid var(--mute);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .6); font-size: 14px;
}
.case-pop[hidden] { display: none; }
.case-pop h2 { margin: 0 0 6px; font: 600 22px/1.1 var(--cond); }
.case-pop h3 { margin: 12px 0 4px; font: 600 16px/1.1 var(--cond); }
.case-pop p { margin: 0 0 8px; color: var(--mute); }
.case-pop ul { margin: 0; padding-left: 18px; }
.case-pop li { margin-bottom: 4px; }
.case-pop a { color: var(--cable); }

.summary {
  position: absolute; left: 50%; bottom: 140px; z-index: 535; translate: -50% 0;
  width: min(520px, calc(100% - 32px)); padding: 16px 20px 14px;
  background: var(--sea); border: 1px solid var(--rule); border-top: 4px solid var(--high);
  border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, .7); font-size: 15px;
}
.summary[hidden] { display: none; }
.summary p { margin: 0 0 6px; }
.summary .sum-lead { font: 600 24px/1.2 var(--cond); margin-bottom: 8px; }
.summary .sum-lead b { color: var(--high); font-weight: 700; }
.summary .sum-act { font-weight: 600; margin: 8px 0 0; }
.sum-close {
  position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; padding: 0;
  background: none; border: 1px solid var(--rule); border-radius: 4px; color: var(--mute); font-size: 18px; line-height: 1;
}

/* timeline: real-world events and the window to act */
.tl-window {
  position: absolute; top: 16px; height: 14px; border-radius: 2px;
  background: repeating-linear-gradient(-45deg, rgba(239, 75, 79, .45) 0 3px, transparent 3px 7px);
  outline: 1px solid rgba(239, 75, 79, .7);
}
.tl-window[hidden] { display: none; }
.tl-events { position: absolute; inset: 0; pointer-events: none; }
.tl-event {
  position: absolute; top: 14px; height: 20px; min-width: 3px; margin-left: -1px; padding: 0 !important;
  background: #fff !important; border: 0 !important; border-radius: 1px !important; opacity: .9;
  pointer-events: auto; clip-path: none;
}
.tl-event.range { top: 29px; height: 5px; }
.tl-event:hover, .tl-event:focus-visible { box-shadow: 0 0 0 2px var(--cable); }
.tl-event .tl-tip { transform: none; bottom: 26px; border-left-color: #fff; }
.tl-event:hover .tl-tip, .tl-event:focus-visible .tl-tip { display: block; }

/* sensitivity */
.sens { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 13px; color: var(--mute); }
.sens input { flex: 1; accent-color: var(--ink); }
.sens output { font-family: var(--mono); color: var(--ink); width: 36px; text-align: right; }

/* ---------- map style switcher, scale, legend ---------- */
.map-style { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.map-style .seg button {
  background: var(--sea-2); border: 1px solid var(--rule); color: var(--ink);
  padding: 5px 9px; font: 500 13px/1 var(--sans);
}
.map-style .seg button[aria-pressed="true"] { background: var(--ink); color: var(--sea); border-color: var(--ink); }
.depth-legend {
  display: none; grid-template-columns: repeat(4, auto); gap: 2px 10px; padding: 6px 8px;
  background: rgba(15, 27, 36, .9); border: 1px solid var(--rule); border-radius: 4px;
  font-size: 11px; color: var(--ink);
}
.depth-legend span:first-child { grid-column: 1 / -1; font-weight: 600; }
.depth-legend i { grid-column: 1 / -1; height: 8px; border-radius: 2px; background: linear-gradient(90deg, #f2f8fc, #cfe4f3 25%, #9cc6e8 50%, #6aa2d8 75%, #3f78c0); }
body[data-map^="nautical"] .depth-legend { display: grid; }
body[data-map="nautical-dark"] .depth-legend i { filter: invert(1) hue-rotate(180deg) brightness(.6); }
.leaflet-tile.depth-dark, .depth-dark .leaflet-tile, img.depth-dark { filter: invert(1) hue-rotate(180deg) brightness(.55) saturate(.8); }
.nm-scale {
  height: 18px; padding: 0 6px; border: 2px solid var(--ink); border-top: 0;
  font: 500 11px/16px var(--mono); color: var(--ink); text-align: center;
  background: rgba(15, 27, 36, .6); white-space: nowrap;
}
body[data-map$="light"] .nm-scale { border-color: #24323c; color: #24323c; background: rgba(255, 255, 255, .7); }
body[data-map$="light"] .cable-label { text-shadow: 0 0 4px #fff, 0 0 8px #fff; }
body[data-map$="light"] .plan-label { color: #24323c; }
body[data-map$="light"] #map { background: #e8ecef; }
body[data-map$="light"] .masthead h1 { color: #16242e; text-shadow: 0 0 6px #fff, 0 0 12px #fff; }

/* ---------- modes ---------- */
body[data-mode="demo"] .ov-only, body[data-mode="overview"] .demo-only { display: none !important; }
.head-seg { pointer-events: auto; }
.head-seg button {
  background: var(--sea-2); border: 1px solid var(--rule); padding: 6px 11px; font: 500 14px/1 var(--sans);
}
.head-seg button[aria-pressed="true"] { background: var(--ink); color: var(--sea); border-color: var(--ink); }
body[data-mode="overview"] .timeline-row { justify-content: flex-start; }

.ov-ship { width: 16px; height: 16px; }
.ov-ship svg { width: 16px; height: 16px; filter: drop-shadow(0 0 2px rgba(0, 0, 0, .8)); }
.ov-ship.muted { opacity: .18; }
.ov-ship.focus svg { width: 24px; height: 24px; margin: -4px; }
.ov-ship[data-level="high"]:not(.muted)::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--high);
  animation: pulse 1.8s ease-out infinite;
}

.watch { flex: 1; display: flex; flex-direction: column; min-height: 0; border-bottom: 0 !important; padding-bottom: 0 !important; }
.watch h2 { margin: 0 0 8px; font: 600 18px/1 var(--cond); display: flex; justify-content: space-between; align-items: baseline; }
.watch h2 span { color: var(--mute); font: 400 13px/1 var(--sans); }
.filters { display: flex; gap: 6px; margin-bottom: 8px; }
.filters select {
  flex: 1; min-width: 0; padding: 5px 6px; border-radius: 4px; font: 13px var(--sans);
  background: var(--sea-2); color: var(--ink); border: 1px solid var(--rule);
}
.watch-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; scrollbar-width: thin; }
.watch-row {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 2px 8px; align-items: center;
  padding: 7px 6px 7px 10px; border-bottom: 1px solid rgba(38, 58, 72, .6); cursor: pointer;
  box-shadow: inset 3px 0 0 var(--c);
}
.watch-row:hover, .watch-row.on { background: var(--sea-2); }
.watch-row b { font: 600 16px/1.1 var(--cond); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watch-row .w-flag { color: var(--mute); font-size: 12px; white-space: nowrap; }
.watch-row .mono { font-size: 12px; color: var(--mute); }
.watch-row p {
  grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--mute); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.watch-row .badge { font-size: 12px; padding: 1px 6px; }
body[data-mode="overview"] .controls { right: auto; flex-direction: row-reverse; align-items: center; gap: 16px; }
body[data-mode="overview"] .panel { overflow-y: auto; }
body[data-mode="overview"] .watch { order: -1; flex: none; height: 46vh; border-bottom: 1px solid var(--rule) !important; padding-bottom: 8px !important; }
body[data-mode="overview"] .vessel-name { font-size: 24px; }

/* =====================================================================================
   Phones. Everything below applies only at 760px and narrower; desktop is untouched.
   Map full-screen, panel as a bottom drawer, card as a top strip, settings in a sheet.
   ===================================================================================== */
@media (max-width: 760px) {
  :root {
    --m-top: env(safe-area-inset-top, 0px);
    --m-bottom: env(safe-area-inset-bottom, 0px);
    --m-peek: 60px;
  }
  html, body { height: 100%; overflow: hidden; }
  .app { display: block; height: 100dvh; }
  .stage { position: fixed; inset: 0; height: 100dvh; z-index: 0; }

  /* masthead: name, honesty badge, case notes */
  .masthead { top: calc(var(--m-top) + 8px); left: 8px; right: 8px; gap: 8px; }
  .masthead h1 { font-size: 22px; }
  .sim-badge { font-size: 13px; padding: 5px 8px; }
  .head-btn { min-height: 44px; padding: 6px 10px; font-size: 13px; }

  /* ship card: slim strip under the masthead, no leader line */
  .card {
    left: 8px; right: 8px; top: calc(var(--m-top) + 60px); width: auto;
    padding: 6px 10px; border-radius: 6px;
  }
  .card-top { gap: 8px; }
  .card-name { font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .card-fold, .card-reason, .card-action { display: none !important; }
  .card.collapsed .card-body { display: block; }
  .card-sub { margin: 2px 0 0; }
  .leader { display: none !important; }

  .case-pop { top: calc(var(--m-top) + 60px); left: 8px; right: 8px; width: auto; max-height: 60dvh; }
  .summary {
    top: calc(var(--m-top) + 116px); bottom: auto; left: 8px; right: 8px; width: auto; translate: none;
    padding: 12px 14px 10px;
  }
  .summary .sum-lead { font-size: 20px; padding-right: 36px; }
  .sum-close { width: 44px; height: 44px; top: 2px; right: 2px; }

  /* map chrome: pinch to zoom; scale and attribution clear of the strip */
  .leaflet-control-zoom { display: none; }
  .leaflet-top, .leaflet-bottom { z-index: 500; } /* below the card, summary and controls */
  .leaflet-top.leaflet-right { top: calc(var(--m-top) + 116px); }
  .leaflet-bottom.leaflet-right { top: calc(var(--m-top) + 144px); bottom: auto; }
  .leaflet-control-attribution { font-size: 9px; max-width: 70vw; }

  /* controls: above the drawer peek */
  .controls,
  body[data-mode="overview"] .controls {
    left: 8px; right: 8px; bottom: calc(var(--m-peek) + var(--m-bottom) + 8px);
    flex-direction: column; align-items: stretch; gap: 6px; padding: 8px;
  }
  .controls-row { flex-wrap: nowrap; gap: 6px; }
  .transport { order: -1; margin-left: 0; flex: none; gap: 6px; }
  .controls button:not(.tl-marker):not(.tl-event) { min-height: 44px; }
  .controls button.icon { width: 44px; height: 44px; }
  .m-more { font-size: 22px !important; line-height: 1; }
  .scenarios {
    flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  }
  .scenarios::-webkit-scrollbar { display: none; }
  .scenarios button { flex: none; white-space: nowrap; scroll-snap-align: start; }
  .timeline-row { flex-wrap: wrap; gap: 2px 8px; }
  .clock { width: 100%; flex-direction: row; align-items: baseline; gap: 8px; }
  #clock { font-size: 14px; }
  .timeline { flex: 1 1 100%; height: 44px; }
  .timeline::before, .tl-band { top: 26px; }
  .tl-window { top: 22px; }
  .tl-head {
    top: 15px; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 0 3px var(--sea), 0 2px 6px rgba(0, 0, 0, .5);
  }
  .tl-marker { top: 4px; }
  .tl-marker::before { content: ""; position: absolute; inset: -12px; } /* bigger touch target */
  .tl-event { top: 18px; height: 24px; }
  .tl-event::before { content: ""; position: absolute; inset: -10px -8px; }
  .tl-event.range { top: 34px; height: 6px; }
  .tl-tip { display: none !important; } /* shown in .m-tip on tap instead */
  .m-tip {
    display: none; position: absolute; left: 8px; right: 8px; bottom: calc(100% + 8px);
    padding: 8px 10px; border-radius: 6px; background: var(--sea); border: 1px solid var(--rule);
    font-size: 13px; line-height: 1.35; box-shadow: 0 6px 20px rgba(0, 0, 0, .6);
  }
  .m-tip.show { display: block; }
  .m-tip b { display: block; }

  /* panel: bottom drawer */
  .panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    height: 70dvh; padding-bottom: var(--m-bottom);
    border-left: 0; border-top: 1px solid var(--rule); border-radius: 12px 12px 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .5);
    overflow: hidden;
    transform: translateY(calc(100% - var(--m-peek) - var(--m-bottom)));
    transition: transform .25s ease-out;
  }
  .panel.m-open { transform: none; overflow-y: auto; }
  .panel { overflow-anchor: none; }
  .panel > section { padding: 12px 16px; }
  .m-peek {
    position: sticky; top: 0; z-index: 1; flex: none; order: -2;
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: 14px 1fr; align-items: center;
    column-gap: 10px; height: var(--m-peek); padding: 0 16px 6px;
    background: var(--sea); border-bottom: 1px solid var(--rule); touch-action: none; cursor: pointer;
  }
  .m-handle { /* covers the whole peek row, so the touch target is the full width */
    position: absolute; inset: 0; padding: 6px 0 0; background: none; border: 0;
    display: grid; place-items: start center;
  }
  .m-peek .badge { grid-row: 2; }
  .m-peek .m-reason { grid-row: 2; }
  .m-handle i { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--mute); }
  .m-peek .badge { min-width: 76px; }
  .m-reason { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
  .stream { flex: none; }
  .stream-list { max-height: none; overflow: visible; }
  body[data-mode="overview"] .panel { overflow-y: hidden; }
  body[data-mode="overview"] .panel.m-open { overflow-y: auto; }
  body[data-mode="overview"] .watch { height: auto; max-height: none; }
  .watch-list { overflow: visible; }
  .watch-row { min-height: 44px; }

  /* settings sheet */
  .m-backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, .45); display: none; }
  .m-backdrop.open { display: block; }
  .m-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; display: none;
    max-height: 80dvh; overflow-y: auto; padding: 0 16px calc(16px + var(--m-bottom));
    background: var(--sea); border-top: 1px solid var(--rule); border-radius: 12px 12px 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .6);
  }
  .m-sheet.open { display: block; }
  .m-sheet-head {
    position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between;
    padding: 8px 0; background: var(--sea); font: 600 20px/1 var(--cond);
  }
  .m-done {
    min-height: 44px; padding: 0 16px; border-radius: 4px;
    background: var(--ink); color: var(--sea); border: 0; font: 600 15px var(--sans);
  }
  .m-sheet section { padding: 8px 0 10px; border-top: 1px solid var(--rule); }
  .m-sheet h3 { margin: 0 0 8px; font: 500 13px/1 var(--sans); color: var(--mute); }
  .m-sheet .seg, .m-sheet .map-style .seg { display: flex; width: 100%; }
  .m-sheet .seg button, .m-sheet .map-style .seg button {
    flex: 1; min-height: 44px; padding: 0 8px; font-size: 15px;
    background: var(--sea-2); border: 1px solid var(--rule); color: var(--ink);
  }
  .m-sheet .seg button[aria-pressed="true"] { background: var(--ink); color: var(--sea); border-color: var(--ink); }
  .m-sheet .seg button + button { border-left: 0; }
  .m-sheet .seg button:first-child { border-radius: 4px 0 0 4px; }
  .m-sheet .seg button:last-child { border-radius: 0 4px 4px 0; }
  .m-sheet .map-style { float: none; clear: none; margin: 0; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  .m-sheet .depth-legend { justify-self: start; }
  .m-sheet .sens { margin: 0; min-height: 44px; }
  .m-sheet .sens input { min-height: 44px; }
  .m-sheet #card-mode { width: 100%; min-height: 44px; }
  .m-sheet .head-seg { display: flex; }
  .m-sheet .filters { flex-direction: column; margin: 0; }
  .m-sheet .filters select { min-height: 44px; font-size: 15px; }
}