:root {
  --bg: #06100f;
  --surface: #0a1715;
  --surface-raised: #10211e;
  --surface-soft: #122824;
  --ink: #edf4ec;
  --muted: #91a69f;
  --faint: #647a73;
  --line: rgba(218, 237, 228, .1);
  --line-strong: rgba(218, 237, 228, .18);
  --accent: #d9ff91;
  --accent-ink: #13200d;
  --verified: #80d68c;
  --constrained: #63b5d7;
  --approximate: #e8b86a;
  --assumption: #bd8cf2;
  --conflict: #ff6d68;
  --shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 48px rgba(0,0,0,.28);
  --topbar-height: 66px;
  --timeline-height: 110px;
  --left-width: 286px;
  --right-width: 344px;
  color-scheme: dark;
}

.travel-view { position:absolute; inset:0; z-index:14; display:flex; flex-direction:column; background:#081815; overflow:auto; }
.travel-view[hidden], .travel-follow-hud[hidden] { display:none; }
.travel-heading { display:flex; gap:12px; justify-content:space-between; align-items:center; padding:16px 18px 6px; }
.travel-heading h2 { margin:4px 0; font-size:21px; letter-spacing:-.04em; }
.travel-heading .small-button { flex-shrink:0; padding:0 10px; }
.travel-controls { display:flex; align-items:center; flex-wrap:wrap; gap:4px 12px; padding:0 18px; }
.travel-controls label { display:flex; gap:8px; align-items:center; font-size:11px; color:var(--muted); }
.travel-controls select { min-height:34px; font-size:11px; max-width:240px; }
.travel-controls .text-button { min-height:34px; font-size:11px; }
.travel-basis-note { margin:6px 18px 12px; font-size:11px; line-height:1.55; color:#aebfb6; max-width:780px; }
.travel-map { position:relative; flex:1 0 220px; min-height:220px; background:radial-gradient(ellipse at center,#1c3939,#091e21); overflow:hidden; border-block:1px solid var(--line); }
#travel-svg { position:absolute; width:100%; height:100%; inset:0; }
#travel-tiles { opacity:.58; }
.travel-place { fill:#f2f7ea; stroke:#0a1d19; stroke-width:3px; paint-order:stroke fill; stroke-linejoin:round; font-weight:600; font-family:Inter,system-ui,sans-serif; pointer-events:none; }
.travel-boat-marker { cursor:pointer; }
.travel-boat-marker:focus-visible { outline:none; }
.travel-boat-marker:focus-visible circle { stroke:#fff; stroke-width:3; }
.travel-map-tools { display:flex; gap:4px; position:absolute; left:12px; top:10px; }
.travel-map-tools button { min-height:32px; padding:0 10px; border:1px solid #527266; border-radius:6px; background:#081a17ee; color:#d9eee0; font-size:10px; cursor:pointer; }
.travel-map-key { position:absolute; right:10px; top:10px; display:grid; gap:4px; padding:7px; background:#061612c9; border-radius:5px; font-size:9px; color:#ccddd2; pointer-events:none; }
.travel-attribution { position:absolute; margin:0; bottom:0; right:0; padding:3px 7px; background:#071712de; color:#a9bbb1; font-size:8px; pointer-events:none; }
.travel-vessel-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:12px 14px 8px; }
.travel-vessel-card { min-width:0; text-align:left; border:1px solid #29423a; border-top:3px solid var(--boat-color); border-radius:7px; background:#0e231d; padding:9px 10px; display:grid; align-content:start; gap:5px; cursor:pointer; }
.travel-vessel-card.is-selected { background:#1a3025; border-color:var(--boat-color); }
.travel-vessel-card strong { font-size:13px; color:var(--boat-color); }
.travel-vessel-card span { font-size:10px; color:#baccc2; line-height:1.45; min-height:29px; }
.travel-vessel-card b { font-size:20px; font-variant-numeric:tabular-nums; font-weight:500; }
.travel-vessel-card small { font-size:9px; line-height:1.4; color:#b0c3b8; }
.travel-comparison { display:flex; gap:6px 14px; flex-wrap:wrap; justify-content:space-between; padding:4px 15px 12px; font-size:9px; color:#abbdb1; }
.travel-comparison a { color:var(--accent); }
.movement-card { border-color:#526841; }
.movement-duration { margin:10px 0 6px; color:var(--accent); font-size:29px; font-variant-numeric:tabular-nums; }
.movement-duration small { font-size:13px; color:var(--muted); }
.movement-event h3 { line-height:1.5; }
.travel-follow-hud { position:absolute; top:16px; left:16px; z-index:12; display:grid; gap:6px; padding:13px; border:1px solid #5d7457; border-radius:9px; background:#071a15e8; max-width:calc(100% - 80px); font-size:12px; }
.travel-follow-hud small { font-size:10px; color:#aac0b1; }
.travel-follow-hud button { min-height:34px; color:var(--accent); background:#173326; border:1px solid #3c6049; border-radius:6px; cursor:pointer; }
.viewport.is-travel > .orientation, .viewport.is-travel > .scale-readout, .viewport.is-travel > .source-badge, .viewport.is-travel > .scene-context-note, .viewport.is-travel > .selection-hint { display:none; }

@media (max-width:650px) {
  .travel-heading { padding:12px 12px 4px; }
  .travel-heading h2 { font-size:17px; }
  .travel-heading .eyebrow { font-size:7px; }
  .travel-heading .small-button { font-size:10px; min-height:34px; }
  .travel-controls { padding:0 12px; gap:1px 8px; }
  .travel-controls select { max-width:200px; font-size:10px; }
  .travel-basis-note { margin:5px 12px 8px; font-size:10px; line-height:1.4; }
  .travel-vessel-cards { padding:8px; gap:5px; }
  .travel-vessel-card { padding:7px; gap:4px; }
  .travel-vessel-card strong { font-size:11px; }
  .travel-vessel-card span { font-size:9px; min-height:40px; }
  .travel-vessel-card b { font-size:15px; }
  .travel-vessel-card small { font-size:8px; }
  .travel-map-key { font-size:8px; }
  .travel-comparison { padding:0 10px 8px; font-size:8px; gap:4px; }
}

* { box-sizing: border-box; }
html { height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--ink); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
p, li, label { text-wrap: pretty; }
.sr-only { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }
.skip-link { position: fixed; left: 16px; top: 10px; z-index: 100; padding: 10px 14px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); transform: translateY(-150%); transition-property: transform; transition-duration: 160ms; }
.skip-link:focus { transform: translateY(0); }

.lab-shell { height: 100%; display: grid; grid-template-rows: var(--topbar-height) minmax(0, 1fr); }
.lab-topbar { position: relative; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-width: 0; padding: 0 14px; background: rgba(6,16,15,.96); border-bottom: 1px solid var(--line); box-shadow: 0 10px 35px rgba(0,0,0,.16); }
.brand-block, .scenario-controls, .viewport-toolbar, .timeline-controls, .section-heading, .panel-heading { display: flex; align-items: center; }
.brand-block { min-width: 0; gap: 10px; }
.brand-block h1 { margin: 0; font-size: 16px; letter-spacing: -.02em; white-space: nowrap; }
.brand-block h1 span { margin-left: 8px; color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: .02em; }
.eyebrow { margin: 0 0 3px; color: var(--faint); font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; font-weight: 600; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; }
.back-link, .icon-button, .panel-toggle, .dialog-close, .play-button { display: inline-grid; place-items: center; width: 42px; height: 42px; min-width: 42px; border: 0; border-radius: 10px; background: var(--surface-raised); box-shadow: 0 0 0 1px rgba(255,255,255,.08); text-decoration: none; cursor: pointer; transition-property: background-color, box-shadow, scale; transition-duration: 150ms; }
.back-link:hover, .icon-button:hover, .panel-toggle:hover, .dialog-close:hover, .play-button:hover { background: var(--surface-soft); box-shadow: 0 0 0 1px rgba(255,255,255,.15); }
button:active, .back-link:active { scale: .96; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex="0"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.scenario-controls { position: relative; gap: 8px; }
.field { display: grid; gap: 6px; color: var(--muted); font-size: 11px; }
.compact-field { display: flex; align-items: center; gap: 8px; }
.compact-field > span { position: absolute; overflow: hidden; clip: rect(0 0 0 0); width: 1px; height: 1px; }
input, select { min-height: 42px; border: 1px solid var(--line-strong); border-radius: 8px; background: #081310; color: var(--ink); padding: 0 11px; font-variant-numeric: tabular-nums; }
select { padding-right: 34px; }
.button { min-height: 42px; border: 0; border-radius: 9px; padding: 0 14px; cursor: pointer; box-shadow: 0 0 0 1px rgba(255,255,255,.09); transition-property: background-color, box-shadow, color, scale; transition-duration: 150ms; }
.button-primary { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.button-primary:hover { background: #e5ffad; }
.button-quiet { background: var(--surface-raised); color: var(--ink); }
.button-quiet:hover { background: var(--surface-soft); box-shadow: 0 0 0 1px rgba(255,255,255,.15); }
.action-menu { position: absolute; top: 49px; right: 0; z-index: 50; width: 210px; padding: 6px; border-radius: 14px; background: #0c1a17; box-shadow: var(--shadow); }
.action-menu button { display: block; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; }
.action-menu button:hover { background: rgba(255,255,255,.07); }

.lab-workspace { min-height: 0; display: grid; grid-template-columns: var(--left-width) minmax(420px, 1fr) var(--right-width); }
.lab-panel { position: relative; z-index: 20; min-width: 0; min-height: 0; background: rgba(8,20,18,.98); }
.layers-panel { border-right: 1px solid var(--line); }
.inspector-panel { border-left: 1px solid var(--line); }
.panel-heading { justify-content: space-between; min-height: 65px; padding: 13px 14px; border-bottom: 1px solid var(--line); }
.panel-heading h2 { margin: 0; font-size: 15px; letter-spacing: -.01em; }
.panel-toggle { display: none; }
.panel-scroll { height: calc(100% - 65px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #315047 transparent; }
.panel-section { padding: 16px 14px; border-bottom: 1px solid var(--line); }
.panel-section h3 { margin: 0; color: var(--muted); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.section-heading { justify-content: space-between; margin-bottom: 10px; }
.text-button, .small-button { min-height: 40px; border: 0; background: transparent; color: var(--accent); cursor: pointer; }
.small-button { min-width: 58px; border-radius: 8px; background: rgba(217,255,145,.08); }
.layer-list { display: grid; gap: 3px; }
.layer-row { display: grid; grid-template-columns: 40px minmax(0,1fr) 40px; align-items: center; min-height: 48px; border-radius: 9px; }
.layer-row:hover { background: rgba(255,255,255,.035); }
.layer-row input { width: 18px; min-height: 18px; justify-self: center; accent-color: var(--accent); }
.layer-copy { min-width: 0; }
.layer-copy strong { display: block; overflow: hidden; color: #dbe9e1; font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.layer-copy small { display: block; overflow: hidden; margin-top: 2px; color: var(--faint); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.lock-indicator { color: var(--faint); font-size: 12px; text-align: center; }
.search-field { display: block; margin-bottom: 10px; }
.search-field input { width: 100%; }
.object-list { display: grid; gap: 4px; }
.object-row { position: relative; display: grid; grid-template-columns: 10px minmax(0,1fr) auto; align-items: center; gap: 9px; min-height: 56px; width: 100%; padding: 6px 9px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; transition-property: background-color, box-shadow, scale; transition-duration: 150ms; }
.object-row:hover { background: rgba(255,255,255,.045); }
.object-row.is-selected { background: rgba(217,255,145,.08); box-shadow: inset 0 0 0 1px rgba(217,255,145,.24); }
.object-color { width: 8px; height: 28px; border-radius: 4px; background: var(--object-color); }
.object-copy { min-width: 0; }
.object-copy strong { display: block; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.object-copy small { display: block; overflow: hidden; margin-top: 3px; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.state-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--state-color); box-shadow: 0 0 10px var(--state-color); }
.legend { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 8px; margin-top: 13px; }
.legend-item { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.legend-item i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--state-color); }

.viewport-column { position: relative; min-width: 0; min-height: 0; display: grid; grid-template-columns:minmax(0,1fr); grid-template-rows: 54px auto minmax(0,1fr) auto; background: #06100f; }
.viewport-toolbar { position: relative; z-index: 10; justify-content: space-between; gap: 10px; padding: 6px 10px; border-bottom: 1px solid var(--line); background: rgba(7,17,15,.93); }
.segmented, .tool-group { display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.segmented button, .tool-button { min-height: 40px; border: 0; border-radius: 8px; padding: 0 11px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 600; cursor: pointer; transition-property: background-color, color, scale; transition-duration: 150ms; }
.segmented button:hover, .tool-button:hover { color: var(--ink); }
.segmented button.is-active, .tool-button.is-active { background: var(--surface-soft); color: var(--ink); box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.mobile-panel-actions { display: none; }
.mobile-diff-controls { display: none; }
.viewport-stage { min-height: 0; display: flex; }
.viewport { position: relative; min-width: 0; min-height: 0; flex: 1; overflow: hidden; background: radial-gradient(circle at 50% 20%, #183027, #06100f 70%); }
.viewport + .viewport { border-left: 1px solid var(--line-strong); }
.viewport canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.viewport-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; background: rgba(6,16,15,.88); transition-property: opacity, visibility; transition-duration: 240ms; }
.viewport-loading.is-hidden { opacity: 0; visibility: hidden; }
.viewport-loading span { width: 30px; height: 30px; border: 2px solid rgba(217,255,145,.2); border-top-color: var(--accent); border-radius: 50%; animation: spin 900ms linear infinite; }
.viewport-loading p { color: var(--muted); font-size: 12px; }
@keyframes spin { to { transform: rotate(360deg); } }
.viewport-empty { position: absolute; inset: 0; place-content: center; padding: 40px; text-align: center; background: linear-gradient(150deg,#0d1d1a,#06100f); }
.viewport-empty:not([hidden]) { display: grid; }
.viewport-empty h2 { max-width: 460px; margin: 8px auto; }
.viewport-empty p:last-child { max-width: 560px; color: var(--muted); }
.viewport-empty dl { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; width: min(620px,100%); margin: 18px auto; }
.viewport-empty dl div { padding: 10px; border-radius: 10px; background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.viewport-empty dt { color: var(--faint); font-size: 9px; text-transform: uppercase; }
.viewport-empty dd { margin: 5px 0 0; font: 11px/1.4 ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.viewport-empty a { color: var(--accent); font-size: 12px; }
.orientation { position: absolute; top: 16px; right: 16px; display: grid; justify-items: center; color: var(--accent); font-family: ui-monospace, monospace; font-size: 10px; }
.orientation i { width: 1px; height: 28px; margin-top: 4px; background: linear-gradient(var(--accent), transparent); transform: rotate(18deg); transform-origin: top; }
.scale-readout { position: absolute; left: 18px; bottom: 18px; min-width: 76px; padding-top: 6px; border-top: 2px solid rgba(255,255,255,.72); color: var(--muted); font-family: ui-monospace, monospace; font-size: 10px; font-variant-numeric: tabular-nums; text-align: center; }
.source-badge { position: absolute; top: 16px; left: 16px; display: flex; align-items: center; gap: 9px; max-width: 300px; padding: 9px 11px; border-radius: 12px; background: rgba(7,17,15,.82); box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 8px 24px rgba(0,0,0,.18); backdrop-filter: blur(12px); }
.source-badge i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--verified); box-shadow: 0 0 10px rgba(128,214,140,.7); }
.source-badge strong, .source-badge small { display: block; }
.source-badge strong { font-size: 10px; }
.source-badge small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.selection-hint { position: absolute; right: 16px; bottom: 16px; padding: 8px 10px; border-radius: 8px; background: rgba(7,17,15,.78); color: var(--muted); font-size: 10px; backdrop-filter: blur(10px); }
#scene-canvas.is-flight { cursor: grab; }
#scene-canvas.is-looking { cursor: grabbing; }
#scene-canvas:focus-visible { outline: 2px solid var(--accent, #d9ff91); outline-offset: -2px; }
.comparison-label { position: absolute; top: 16px; left: 16px; display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 9px; border-radius: 10px; background: rgba(7,17,15,.86); color: var(--accent); font-family: ui-monospace, monospace; font-size: 10px; text-transform: uppercase; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.comparison-label select { min-height: 34px; max-width: 160px; padding: 0 24px 0 8px; font-size: 9px; text-transform: none; }
.comparison-label label { display: flex; align-items: center; gap: 5px; color: var(--muted); text-transform: none; }
.comparison-label input { min-height: 16px; width: 16px; padding: 0; accent-color: var(--accent); }
.camera-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.camera-overlay img { width: 100%; height: 100%; object-fit: contain; opacity: var(--overlay-opacity,.5); outline: 1px solid rgba(255,255,255,.1); outline-offset: -1px; }

.timeline-panel { min-height:var(--timeline-height); position: relative; display: grid; grid-template-columns: 170px minmax(0,1fr) 78px; gap: 14px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--line); background: rgba(8,20,18,.98); }
.timeline-controls { gap: 10px; }
.context-traffic-controls { grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; padding-top:7px; border-top:1px solid var(--line); font-size:10px; color:var(--muted); }
.context-traffic-controls label { display:flex; align-items:center; gap:8px; }
.context-traffic-controls select { height:28px; min-height:28px; font-size:10px; padding:0 24px 0 8px; }
.context-traffic-controls .text-button { font-size:10px; }
.context-traffic-controls > span { color:#efd5aa; }
.play-button { position: relative; overflow: hidden; color: var(--accent); }
.play-button span { grid-area: 1/1; transition-property: opacity, scale, filter; transition-duration: 300ms; transition-timing-function: cubic-bezier(.2,0,0,1); }
.play-button .pause-icon { opacity: 0; scale: .25; filter: blur(4px); }
.play-button.is-playing .play-icon { opacity: 0; scale: .25; filter: blur(4px); }
.play-button.is-playing .pause-icon { opacity: 1; scale: 1; filter: blur(0); }
.play-icon { margin-left: 2px; }
.clock strong, .clock small { display: block; }
.clock strong { font-family: ui-monospace, monospace; font-size: 13px; font-variant-numeric: tabular-nums; }
.clock small { margin-top: 3px; color: var(--faint); font-size: 9px; }
.speed-control { display: none; }
.timeline-track-wrap { position: relative; min-width: 0; }
.timeline-range-labels { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; color: var(--faint); font-family: ui-monospace, monospace; font-size: 9px; font-variant-numeric: tabular-nums; }
.timeline-range-labels button { min-height: 28px; border: 0; border-radius: 7px; padding: 0 9px; background: rgba(255,255,255,.04); color: var(--muted); font-size: 9px; cursor: pointer; }
.time-slider { width: 100%; min-height: 24px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; accent-color: var(--accent); }
.timeline-events { position: absolute; left: 8px; right: 8px; bottom: -6px; height: 12px; pointer-events: none; }
.timeline-marker { position: absolute; top: 0; width: 5px; height: 5px; margin-left: -2px; border-radius: 50%; background: var(--state-color); box-shadow: 0 0 0 3px rgba(6,16,15,.75); }
.timeline-window { position: absolute; top: 3px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--state-color) 40%, transparent); }
.timeline-expand { min-height: 40px; border: 0; border-radius: 8px; background: rgba(255,255,255,.045); color: var(--muted); font-size: 10px; cursor: pointer; }
.timeline-expand span { display: inline-grid; place-items: center; min-width: 19px; min-height: 19px; margin-left: 4px; border-radius: 10px; background: rgba(255,255,255,.08); font-variant-numeric: tabular-nums; }
.timeline-event-drawer { position: absolute; z-index: 30; right: 12px; bottom: calc(100% - 2px); width: min(360px, calc(100% - 24px)); max-height: 320px; overflow: auto; padding: 7px; border-radius: 15px; background: #0c1a17; box-shadow: var(--shadow); }
.timeline-event-drawer button { display: grid; grid-template-columns: 82px minmax(0,1fr) 10px; align-items: center; gap: 8px; width: 100%; min-height: 44px; border: 0; border-radius: 8px; padding: 5px 8px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.timeline-event-drawer button:hover { background: rgba(255,255,255,.05); }
.timeline-event-drawer time { color: var(--muted); font: 10px ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.timeline-event-drawer span { font-size: 10px; }
.timeline-event-drawer i { width: 7px; height: 7px; border-radius: 50%; background: var(--state-color); }

.inspector-tabs { display: flex; gap: 1px; overflow-x: auto; padding: 5px 6px; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.inspector-tabs button { flex: 0 0 auto; min-height: 40px; padding: 0 9px; border: 0; border-radius: 7px; background: transparent; color: var(--faint); font-size: 10px; cursor: pointer; }
.inspector-tabs button.is-active { background: rgba(255,255,255,.06); color: var(--ink); }
.inspector-scroll { height: calc(100% - 116px); }
.tab-panel { display: none; padding: 14px; }
.tab-panel.is-active { display: block; }
.empty-inspector { padding: 30px 10px; color: var(--muted); font-size: 12px; text-align: center; }
.data-card { margin-bottom: 12px; padding: 12px; border-radius: 13px; background: rgba(255,255,255,.035); box-shadow: 0 0 0 1px rgba(255,255,255,.07); }
.data-card h3 { margin: 0 0 10px; color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.property-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.property-grid .wide { grid-column: 1/-1; }
.property-grid label { display: grid; gap: 5px; color: var(--faint); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; }
.property-grid input, .property-grid select { width: 100%; min-width: 0; }
.property-grid .checkbox-field { display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: center; min-height: 44px; text-transform: none; letter-spacing: 0; }
.property-grid .checkbox-field input { width: 18px; min-height: 18px; padding: 0; accent-color: var(--accent); }
.inspector-actions { display: flex; gap: 7px; margin-top: 10px; }
.inspector-actions .button { flex: 1; font-size: 10px; }
.status-banner { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 12px; padding: 10px; border-radius: 10px; background: color-mix(in srgb, var(--state-color) 11%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--state-color) 32%, transparent); }
.status-banner i { width: 8px; height: 8px; flex: 0 0 auto; margin-top: 3px; border-radius: 50%; background: var(--state-color); }
.status-banner strong { display: block; font-size: 11px; }
.status-banner small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.source-list, .check-list, .environment-list, .diff-list { display: grid; gap: 8px; }
.source-record, .check-record, .environment-record, .diff-record { display: block; padding: 10px; border-radius: 10px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.065); color: var(--ink); text-decoration: none; }
.source-record strong, .check-record strong, .environment-record strong { display: block; font-size: 11px; }
.source-record small, .check-record small, .environment-record small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.muted-copy { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.coordinate-readout { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.coordinate-readout span { padding: 5px 7px; border-radius: 6px; background: rgba(255,255,255,.045); color: var(--muted); font: 9px ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.danger-button { color: #ff9b97; }
.measurement-list { display: grid; gap: 6px; }
.measurement-record { padding: 8px; border-radius: 8px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.055); }
.measurement-record strong, .measurement-record small { display: block; }
.measurement-record strong { font: 10px ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.measurement-record small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.data-definition { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 0; }
.data-definition div { min-width: 0; padding: 8px; border-radius: 8px; background: rgba(255,255,255,.035); }
.data-definition dt { color: var(--faint); font-size: 8px; text-transform: uppercase; }
.data-definition dd { overflow: hidden; margin: 4px 0 0; font: 9px ui-monospace, monospace; text-overflow: ellipsis; }
.count-pill { display: inline-grid; place-items: center; min-width: 24px; min-height: 24px; border-radius: 12px; background: rgba(255,255,255,.06); color: var(--muted); font: 9px ui-monospace, monospace; }
.check-record { width: 100%; min-height: 44px; border: 0; text-align: left; }
.check-main { width: 100%; min-height: 44px; border: 0; padding: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.warning-source-links { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 8px; border-top: 1px solid var(--line); }
.warning-source-links a { min-height: 32px; padding: 7px 8px; border-radius: 7px; background: rgba(255,255,255,.035); color: var(--accent); font-size: 9px; text-decoration: none; }
.check-record .warning-assumption { padding-top: 7px; border-top: 1px solid var(--line); }
.check-record.conflict { box-shadow: inset 3px 0 0 var(--conflict), inset 0 0 0 1px rgba(255,109,104,.12); }
.check-record.warning { box-shadow: inset 3px 0 0 var(--approximate), inset 0 0 0 1px rgba(232,184,106,.12); }
.check-record.notice { box-shadow: inset 3px 0 0 var(--constrained), inset 0 0 0 1px rgba(99,181,215,.12); }
.camera-preview { margin-top: 10px; }
.camera-preview img, .camera-preview video { display: block; width: 100%; max-height: 190px; border-radius: 8px; object-fit: contain; background: #050b0a; outline: 1px solid rgba(255,255,255,.1); outline-offset: -1px; }
.camera-preview .field { margin-top: 8px; }
.file-button { display: grid; place-items: center; min-height: 42px; margin-top: 9px; border-radius: 8px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); color: var(--muted); font-size: 10px; cursor: pointer; }
.file-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.wide-button { width: 100%; margin-top: 10px; }
.inspector-segmented { width: 100%; }
.inspector-segmented button { flex: 1; min-width: 0; padding-inline: 5px; }
.assertion-form { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 7px; }
.assertion-form select { min-width: 0; font-size: 9px; }
.assertion-form .small-button { grid-column: 1/-1; }
.assertion-list { display: grid; gap: 5px; margin-top: 9px; }
.assertion-list > div { display: grid; grid-template-columns: minmax(0,1fr) 40px; align-items: center; min-height: 40px; padding-left: 8px; border-radius: 8px; background: rgba(255,255,255,.035); color: var(--muted); font-size: 9px; }
.assertion-list button { min-width: 40px; min-height: 40px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.range-field { margin-top: 12px; }
.range-field input { padding: 0; }
.context-notice { margin-bottom: 12px; padding: 10px; border-radius: 10px; background: rgba(232,184,106,.08); box-shadow: inset 0 0 0 1px rgba(232,184,106,.18); color: #e8cf9f; font-size: 10px; line-height: 1.5; }
.environment-record { padding: 11px; }
.environment-record.is-assumption { box-shadow: inset 3px 0 0 var(--assumption), inset 0 0 0 1px rgba(189,140,242,.18); }
.environment-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.environment-heading b { flex: 0 0 auto; color: var(--ink); font: 11px ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.environment-record p { margin: 7px 0 0; color: var(--muted); font-size: 10px; }
.environment-record a { display: inline-block; margin-top: 8px; color: var(--accent); font-size: 9px; }
.override-control { display: grid; grid-template-columns: 24px minmax(0,1fr) 82px; align-items: center; gap: 6px; min-height: 44px; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.override-control input[type="checkbox"] { width: 18px; min-height: 18px; padding: 0; accent-color: var(--assumption); }
.override-control input[type="number"] { width: 82px; min-height: 36px; padding-inline: 7px; }

.lab-dialog { width: min(520px, calc(100% - 28px)); border: 0; border-radius: 18px; padding: 22px; background: #0e201c; color: var(--ink); box-shadow: var(--shadow); }
.lab-dialog::backdrop { background: rgba(0,0,0,.66); backdrop-filter: blur(5px); }
.lab-dialog h2 { margin-bottom: 14px; }
.dialog-close { position: absolute; top: 12px; right: 12px; }
.shortcut-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; align-items: center; margin: 18px 0; color: var(--muted); font-size: 12px; }
kbd { min-width: 44px; padding: 6px 8px; border-radius: 7px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: var(--ink); font-family: ui-monospace, monospace; text-align: center; }
.object-palette { display: grid; gap: 8px; margin-top: 16px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.palette-button { min-height: 58px; border: 0; border-radius: 11px; padding: 10px 12px; background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); text-align: left; cursor: pointer; }
.palette-button strong, .palette-button small { display: block; }
.palette-button small { margin-top: 4px; color: var(--muted); }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 128px; max-width: min(420px, calc(100% - 30px)); padding: 10px 14px; border-radius: 10px; background: #183027; box-shadow: var(--shadow); color: var(--ink); font-size: 11px; opacity: 0; transform: translate(-50%, 10px); pointer-events: none; transition-property: opacity, transform; transition-duration: 180ms; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1160px) {
  :root { --left-width: 248px; --right-width: 310px; }
  .brand-block h1 span, .button#duplicate-scenario { display: none; }
  .tool-button { padding-inline: 8px; }
}

@media (max-width: 900px) {
  :root { --topbar-height: 60px; --timeline-height: 104px; }
  .lab-topbar { padding-inline: 8px; }
  .brand-block .eyebrow, .scenario-controls .button { display: none; }
  .brand-block h1 { font-size: 14px; }
  .scenario-controls select { width: 144px; }
  .lab-workspace { display: block; position: relative; }
  .viewport-column { height: 100%; grid-template-rows: 54px auto minmax(0,1fr) auto; }
  .lab-panel { position: absolute; z-index: 40; top: 0; bottom: 0; width: min(360px, calc(100% - 26px)); box-shadow: 0 18px 60px rgba(0,0,0,.55); transition-property: transform, visibility; transition-duration: 210ms; transition-timing-function: cubic-bezier(.2,0,0,1); }
  .layers-panel { left: 0; transform: translateX(-105%); }
  .inspector-panel { right: 0; transform: translateX(105%); }
  .lab-panel.is-open { transform: translateX(0); }
  .panel-toggle { display: inline-grid; }
  .mobile-panel-actions { display: flex; gap: 6px; }
  .mobile-diff-controls { display: block; }
  .viewport-toolbar .segmented { margin-left: auto; }
  .viewport-toolbar { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .viewport-toolbar .tool-group { display: inline-flex; }
  .compare-button { display: none; }
  .timeline-panel { grid-template-columns: 150px minmax(0,1fr); }
  .timeline-expand { display: none; }
  .source-badge { max-width: 230px; }
}

@media (max-width: 560px) {
  :root { --topbar-height: 58px; --timeline-height: 116px; }
  .back-link { width: 40px; height: 40px; min-width: 40px; }
  .brand-block h1 { font-size: 13px; }
  .scenario-controls select { width: 122px; font-size: 11px; }
  .viewport-column { grid-template-rows: 54px auto minmax(0,1fr) auto; }
  .viewport-toolbar { gap: 5px; padding-inline: 6px; }
  .mobile-panel-actions .button { min-width: 68px; padding-inline: 8px; font-size: 10px; }
  .segmented button { min-width: 42px; padding-inline: 7px; font-size: 0; }
  .segmented button::after { font-size: 10px; }
  .segmented button[data-view="perspective"]::after { content: "3D"; }
  .segmented button[data-view="overhead"]::after { content: "Top"; }
  .segmented button[data-view="beach"]::after { content: "Eye"; }
  .segmented button[data-view="camera"]::after { content: "Cam"; }
  .timeline-panel { grid-template-columns: 112px minmax(0,1fr); gap: 8px; padding: 10px 8px; }
  .timeline-controls { gap: 7px; }
  .play-button { width: 40px; height: 40px; min-width: 40px; }
  .clock strong { font-size: 11px; }
  .timeline-range-labels span:nth-child(2) { display: none; }
  .timeline-range-labels button { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .source-badge { top: 10px; left: 10px; max-width: calc(100% - 58px); }
  .source-badge small { display: none; }
  .orientation { top: 11px; right: 10px; }
  .selection-hint { display: none; }
  .scale-readout { bottom: 12px; left: 12px; }
  .viewport-empty dl { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto!important; animation-duration: .001ms!important; animation-iteration-count: 1!important; transition-duration: .001ms!important; }
}

/* Reference models and the true-scale spacing view. */
.scene-context-note { position: absolute; left: 16px; top: 77px; max-width: calc(100% - 32px); margin: 0; padding: 7px 10px; border: 1px solid rgba(232,184,106,.25); border-radius: 6px; background: rgba(6,16,15,.82); color: #efd5aa; font-size: 10px; line-height: 1.4; pointer-events: none; }
.boat-reference { display: block; width: 100%; max-height: 190px; object-fit: contain; margin-bottom: 12px; border-radius: 6px; background: #06100f; }
.viewport-toolbar { overflow-x: auto; scrollbar-width: thin; }
.viewport-toolbar > * { flex-shrink: 0; }

.navigation-row { display:flex; align-items:center; gap:10px; min-width:0; min-height:45px; padding:6px 10px; background:#101e1b; border-bottom:1px solid var(--line); z-index:9; }
.navigation-label { color:var(--muted); font-size:11px; }
.navigation-caption { color:var(--muted); font-size:11px; margin-left:auto; }
.navigation-row .segmented { flex-shrink:0; }
.navigation-row .segmented button { font-size:12px; }
.boat-picker { display:flex; align-items:center; gap:5px; min-width:0; flex:1; }
.boat-picker[hidden], .boat-drive-hud[hidden] { display:none; }
#night-camp-note[hidden] { display:none; }
.boat-picker button { height:30px; min-width:30px; border:1px solid var(--line); border-radius:5px; background:#172b24; color:var(--ink); cursor:pointer; }
.boat-picker #boat-previous, .boat-picker #boat-next { font-size:24px; line-height:24px; }
.boat-picker select { width:min(260px,30vw); min-width:80px; height:30px; color:var(--ink); background:#11241e; border:1px solid var(--line); border-radius:5px; padding:3px 22px 3px 8px; font-size:12px; text-overflow:ellipsis; }
.boat-picker output { color:var(--accent); font-variant-numeric:tabular-nums; white-space:nowrap; min-width:57px; font-size:12px; text-align:center; }
.boat-picker #boat-reset { padding:0 9px; font-size:11px; }
.boat-drive-hud { position:absolute; left:14px; bottom:42px; z-index:8; max-width:340px; padding:13px 15px; border:1px solid rgba(185,214,194,.24); border-radius:9px; background:rgba(6,20,17,.88); color:#e5efe8; box-shadow:0 4px 25px #0003; pointer-events:none; }
.boat-drive-heading { display:flex; align-items:center; gap:24px; font-size:12px; }
.boat-drive-heading span { color:var(--accent); margin-left:auto; font-size:11px; }
.boat-drive-hud p { font-size:11px; line-height:1.9; margin:8px 0; }
.boat-drive-hud kbd { font:inherit; font-size:10px; border:1px solid #bfd2c644; border-radius:3px; padding:1px 4px; background:#ffffff09; }
.boat-drive-hud small { display:block; font-size:10px; line-height:1.6; color:#b0c4b7; }
#boat-contact { display:block; color:#ffce86; min-height:0; font-size:11px; margin-top:4px; }
.boat-touch-controls { display:none; gap:5px; margin-top:9px; pointer-events:auto; }
.boat-touch-controls button { touch-action:none; min-width:40px; min-height:40px; border-radius:5px; border:1px solid #d9ff9144; background:#233e30; color:#eef5eb; }
.is-boat-driving { touch-action:none; cursor:grab; }
.is-boat-driving.is-looking { cursor:grabbing; }
@media (max-width:1100px) { .navigation-row:has(.boat-picker:not([hidden])) .navigation-caption { display:none; } }
@media (pointer:coarse) { .boat-touch-controls { display:flex; } }
@media (max-width:650px) {
  .navigation-row { flex-wrap:wrap; gap:6px; padding:6px; }
  .navigation-label { display:none; }
  .navigation-caption { font-size:10px; }
  .navigation-row .boat-picker { flex-basis:100%; }
  .boat-picker select { width:auto; flex:1; }
  .boat-drive-hud { left:8px; bottom:36px; max-width:calc(100% - 16px); padding:8px 10px; }
  .boat-drive-hud p { margin:4px 0; }
}
.scale-readout { width: 76px; min-width: 76px; font-size: 9px; color: #e6eee8; white-space: nowrap; }
.spacing-labels { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.spacing-label { position: absolute; transform: translate(-50%,-50%); white-space: nowrap; padding: 4px 6px; border: 1px solid #a38755; border-radius: 4px; background: #18231fed; color: #ffe2aa; font: 10px ui-monospace,monospace; }
.spacing-label.boat-name { transform: translate(-50%,-100%); white-space: pre-line; text-align: center; font-size: 9px; line-height: 1.35; border-color: #668441; color: #d9ff91; }
.spacing-label.person-gap { transform: translate(24px,-50%); border-color: #578797; color: #a5deee; }
.spacing-label.row-offset { border-color: #578797; color: #a5deee; }
.spacing-summary { position: absolute; left: 16px; bottom: 54px; max-width: calc(100% - 32px); padding: 8px 10px; margin: 0; border-radius: 6px; background: #10211eed; color: #eedabb; font-size: 10px; pointer-events: none; }
.orientation { width: 34px; height: 42px; }
.orientation i { position: absolute; top: 12px; left: 16px; height: 25px; margin: 0; transform-origin: center; }
.is-spacing .source-badge, .is-spacing .scene-context-note { display: none; }
@media (max-width: 900px) { .lab-workspace { overflow: hidden; } }
@media (max-width: 560px) {
  .segmented button[data-view="spacing"]::after { content: "Space"; }
  .segmented button[data-view="anchorage"]::after { content: "Boats"; }
  .spacing-label, .spacing-label.boat-name { font-size: 8px; padding: 3px; }
  .spacing-label.person-gap { transform: translate(-50%,12px); }
  .scene-context-note { font-size: 9px; max-width: calc(100% - 58px); }
}

.timeline-controls { flex-wrap:wrap; row-gap:4px; }
.speed-control { display:flex; align-items:center; gap:7px; width:100%; font-size:9px; color:var(--muted); }
.speed-control select { min-height:26px; height:26px; font-size:10px; padding:0 20px 0 7px; }
.viewport.is-following > .source-badge, .viewport.is-following > .scene-context-note { display:none; }
@media (max-width:650px) {
  .segmented button[data-view="travel"]::after { content:"Travel"; }
  .speed-control { gap:4px; font-size:8px; }
  .speed-control select { width:100%; max-width:110px; font-size:9px; }
  .speed-control > span { display:none; }
}

.island-coverage { position:absolute; left:50%; bottom:70px; transform:translateX(-50%); width:min(390px,calc(100% - 32px)); box-sizing:border-box; padding:16px; border:1px solid #657d71; border-radius:10px; background:#11221ff2; display:grid; gap:7px; color:#edf2df; box-shadow:0 8px 30px #0003; }
.island-coverage[hidden] { display:none; }
.island-coverage span { color:#b9d6ba; font-size:12px; }
.island-coverage small { color:#b2bdb8; font-size:11px; line-height:1.5; }
.island-coverage button { justify-self:start; padding:7px 10px; border:1px solid #729983; border-radius:5px; background:#294b3c; color:#f3f5e9; cursor:pointer; }
.spacing-label.shore-gap { background:#244734ee; color:#d4f1c6; border-color:#80a572; }

@media(max-width:560px) { .segmented button[data-view="island"]::after { content:"Island"; } }

.island-pin { position:absolute; padding:7px 9px; border:1px solid #d9ff91; border-radius:6px; background:#19362f; color:#d9ff91; font-size:11px; transform:translate(-15%,-100%); cursor:pointer; }
.island-pin[hidden] { display:none; }

.spacing-label, .spacing-label.boat-name, .spacing-label.person-gap { transform:translate(-50%,-50%); }

.caption-leaders { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.caption-leaders line { stroke:#bfd0b899; stroke-width:1; }

.yacht-card > .text-button { display:block; margin-top:12px; }
@media(max-width:560px) { .segmented button[data-view="yacht"]::after { content:"Yacht"; } }

/* Reviewed source viewpoints */
.camera-map-pins {position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden;}
.camera-map-pins svg {position:absolute;inset:0;}
.camera-map-pins button {position:absolute;transform:translate(-50%,-50%);width:28px;height:28px;border:2px solid var(--pin-color);border-radius:50%;background:#132824;color:#fff;font-weight:800;pointer-events:auto;cursor:pointer;box-shadow:0 2px 12px #0009;}
.camera-map-pins button:hover,.camera-map-pins button:focus-visible {background:var(--pin-color);color:#10221e;outline:2px solid white;z-index:2;}
.camera-map-legend {position:absolute;left:16px;top:50px;z-index:5;background:#0d201deb;border:1px solid #46605a;border-radius:10px;padding:12px;max-width:285px;pointer-events:none;}
.camera-map-legend strong,.camera-map-legend span,.camera-map-legend small {display:block;}
.camera-map-legend span {margin:6px 0;font-size:12px;color:#d5e7df;}
.camera-map-legend small {font-size:11px;color:#a7bdb5;line-height:1.5;}
.source-camera-list {display:grid;gap:5px;margin:12px 0;}
.source-camera-list button {display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:1px solid #324c44;background:#142b25;color:#e3eee8;border-radius:7px;padding:9px;cursor:pointer;font-size:12px;}
.source-camera-list i {display:block;width:8px;height:8px;border-radius:50%;flex:none;}
.source-camera-list small {display:block;margin-top:3px;color:#9db7aa;font-size:10px;}
.source-camera-list button.is-active,.reviewed-frames button.is-active {border-color:#c2e598;background:#264234;}
.reviewed-frames {display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:12px 0;}
.reviewed-frames button {padding:0;border:1px solid #375047;border-radius:7px;overflow:hidden;background:#142b25;color:#dfece5;cursor:pointer;text-align:left;}
.reviewed-frames img {width:100%;height:92px;object-fit:contain;background:#091a16;display:block;}
.reviewed-frames span {display:block;font-size:10px;padding:7px;line-height:1.5;}
@media(max-width:600px){.camera-map-legend{top:48px;left:8px;max-width:210px;padding:9px}.camera-map-legend small{display:none}}

.source-camera-list {grid-template-columns:1fr 1fr;}
.source-camera-list button {align-items:flex-start;padding:8px;gap:6px;}
.source-camera-list i {margin-top:3px;}
.camera-map-legend {top:auto;bottom:48px;max-width:260px;}

.camera-overlay canvas {width:100%;height:100%;object-fit:contain;opacity:var(--overlay-opacity,.5);}
.drone-flight-hud {position:absolute;left:12px;bottom:48px;z-index:5;background:#10221fee;border:1px solid #80759c;border-radius:9px;padding:10px 13px;pointer-events:none;max-width:310px;}
.drone-flight-hud strong,.drone-flight-hud span,.drone-flight-hud small {display:block;line-height:1.5;}
.drone-flight-hud span {font-size:12px;color:#e3dfef}.drone-flight-hud small {font-size:11px;color:#becbc6}
@media(max-width:560px){.segmented button[data-view="drone"]::after{content:"Drone"}.drone-flight-hud{bottom:38px;left:7px;padding:7px;font-size:11px;max-width:245px}.drone-flight-hud small{font-size:10px}}

.drone-flight-hud {pointer-events:auto;max-width:340px}.drone-transport{display:flex;align-items:center;gap:7px;margin-top:8px}.drone-transport input{min-width:45px;width:100px;accent-color:#c3b1f9}.drone-transport button{font:inherit;font-size:11px;white-space:nowrap;background:#253c36;color:#eff9f1;border:1px solid #657f75;border-radius:5px;padding:5px 7px;cursor:pointer}
@media(max-width:560px){.drone-transport input{width:65px}.drone-transport button{font-size:10px;padding:4px}.drone-flight-hud{max-width:265px}}

.drone-pass-select{width:100%;max-width:320px;background:#162c3c;color:#e4eff7;border:1px solid #496072;border-radius:7px;padding:6px 8px;margin-bottom:6px;font:inherit;pointer-events:auto}

.drone-flight-hud{box-sizing:border-box}.drone-transport input{flex:1;width:70px;min-width:25px}.drone-pass-select{font-size:12px}

/* Landscape beach footage keeps its transport below the landmark band. */
#drone-flight-hud[data-ground-pan="true"]{top:auto;bottom:12px;left:12px;right:12px;max-width:none!important;width:auto;padding:8px 10px;display:grid;grid-template-columns:1fr auto;gap:3px 14px;align-items:center;}
#drone-flight-hud[data-ground-pan="true"]>span{display:none;}
#drone-flight-hud[data-ground-pan="true"]>small{grid-column:1;}
#drone-flight-hud[data-ground-pan="true"]>.drone-transport{grid-column:2;grid-row:1/3;margin:0;}
#drone-flight-hud[hidden]{display:none!important;}
@media(max-width:640px){#drone-flight-hud[data-ground-pan="true"]{display:block;}#drone-flight-hud[data-ground-pan="true"]>small{display:none;}}

.dock-view-label select{background:transparent;color:inherit;border:0;font:inherit;padding:6px;max-width:132px;cursor:pointer}.dock-view-label select option{background:#13201c}.mainland-hud{position:absolute;left:18px;bottom:48px;max-width:370px;padding:14px 16px;border:1px solid #506355;border-radius:12px;background:#11221eea;display:grid;gap:6px;pointer-events:auto;color:#d9e5da;font-size:12px}.mainland-hud[hidden]{display:none}.mainland-hud strong{font-size:16px}.mainland-hud small{color:#a7b8aa}.mainland-hud a{color:#d8efaa}.yacht-timing-card label{display:grid;gap:5px;margin:12px 0}.yacht-timing-card input{width:100%;background:#18251e;color:#edf4eb;padding:8px;border:1px solid #4c5c50;border-radius:6px}.context-traffic-controls{flex-wrap:wrap}@media(max-width:700px){.mainland-hud{max-width:270px;bottom:60px;font-size:11px}.dock-view-label select{max-width:95px}}

.travel-docks{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0;color:#aabbac;font-size:12px}.travel-docks button{background:#213429;color:#ddecce;border:1px solid #4a5e4a;border-radius:6px;padding:7px 9px}.travel-vessel-cards{grid-template-columns:repeat(4,minmax(0,1fr))}@media(max-width:1000px){.travel-vessel-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}

.person-activity-card .inspector-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.person-activity-card .inspector-actions button{text-align:left;white-space:normal;padding:7px 0}.person-activity-card>a{font-size:12px;color:#d8efaa}

.mainland-hud button{border:1px solid #53675a;border-radius:5px;background:#20352b;color:#e5eade;padding:5px 8px;font:inherit;cursor:pointer}.mainland-hud button:hover{background:#395244}.mainland-hud div{display:flex;gap:6px;flex-wrap:wrap}

/* Time-linked atmosphere and clearly attributed overnight study. */
.daylight-hud{position:absolute;z-index:5;right:16px;top:74px;display:flex;flex-direction:column;gap:4px;padding:9px 12px;border:1px solid #9bb4cb44;border-radius:10px;background:#08121cce;pointer-events:none;color:#edf2f7;font-size:12px}
.daylight-hud span{color:#b4c3d2;font:10px var(--font-mono,monospace)}
.daylight-hud[data-phase="Night"] strong{color:#adbdff}
.night-camp-note{position:absolute;bottom:58px;right:16px;width:260px;z-index:6;display:grid;gap:7px;padding:12px;border:1px solid #dca65c77;border-radius:10px;background:#17150ded;color:#e6dcc6;font-size:11px;line-height:1.5}
.night-camp-note strong{color:#f4cc8b}.night-camp-note a{color:#d9e7b7}.night-camp-control input{width:14px;height:14px;accent-color:#d9e7b7}
.timeline-solar-band{height:4px;border-radius:4px;opacity:.9;pointer-events:none}.clock strong{white-space:normal}.context-traffic-controls{flex-wrap:wrap}
@media(max-width:700px){.daylight-hud{top:12px;right:10px;max-width:155px;font-size:10px}.night-camp-note{right:10px;bottom:54px;width:205px;font-size:10px}.context-traffic-controls{gap:7px}.context-traffic-controls .night-camp-control{font-size:10px}}

.travel-final-gps{border:1px solid #8b754766;border-radius:12px;padding:12px 14px;margin:12px 0;background:#17190f;color:#d8d9c9;font-size:12px;line-height:1.5}.travel-final-gps div{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.travel-final-gps button{border:1px solid #8b754766;border-radius:6px;padding:7px 10px;background:#252919;color:#e5edbb;cursor:pointer}.travel-final-gps p{margin:8px 0 3px}.travel-final-gps a{color:#d8eb9d}

.night-camp-note{display:block}.night-camp-note summary{cursor:pointer;font-weight:600;color:#f4cc8b}.night-camp-note span{display:block;margin:8px 0}.night-camp-note:not([open])> :not(summary){display:none}

/* Persistent controls stay beside the camera/boat selector in every layout. */
.lab-workspace { --layers-space:var(--left-width); --inspector-space:var(--right-width); grid-template-columns:var(--layers-space) minmax(0,1fr) var(--inspector-space); }
.lab-workspace.layers-collapsed { --layers-space:0px; }
.lab-workspace.inspector-collapsed { --inspector-space:0px; }
.lab-panel.is-collapsed { visibility:hidden; pointer-events:none; overflow:hidden; }
.panel-toggle { display:inline-grid; flex-shrink:0; font-size:25px; }
.panel-heading { gap:8px; }
.panel-heading > div { min-width:0; }
.panel-heading h2 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.viewport-column { container-type:inline-size; container-name:scene-column; }
.workspace-actions { display:flex; align-items:center; gap:4px; flex:0 0 auto; margin-left:auto; }
.workspace-button { position:relative; display:inline-grid; place-items:center; flex:0 0 40px; width:40px; height:40px; padding:8px; border:0; border-radius:8px; background:var(--surface-raised); color:var(--muted); box-shadow:inset 0 0 0 1px var(--line-strong); cursor:pointer; transition-property:background-color,color,scale; transition-duration:150ms; }
.workspace-button:hover { background:var(--surface-soft); color:var(--ink); }
.workspace-button[aria-expanded="true"], .workspace-button[aria-pressed="true"] { color:var(--accent); }
.workspace-button svg { width:22px; height:22px; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; fill:none; }
.workspace-button .panel-fill { fill:currentColor; stroke:none; opacity:0; transition:opacity 150ms; }
.workspace-button[aria-expanded="true"] .panel-fill { opacity:.25; }
#toggle-fullscreen svg { transition-property:opacity,scale,filter; transition-duration:180ms; transition-timing-function:cubic-bezier(.2,0,0,1); }
#toggle-fullscreen .fullscreen-exit { position:absolute; opacity:0; scale:.25; filter:blur(4px); }
#toggle-fullscreen[aria-pressed="true"] .fullscreen-enter { opacity:0; scale:.25; filter:blur(4px); }
#toggle-fullscreen[aria-pressed="true"] .fullscreen-exit { opacity:1; scale:1; filter:blur(0); }
.navigation-row { flex-wrap:wrap; }
.navigation-row .boat-picker { order:2; flex-basis:100%; }
.navigation-row .navigation-caption { display:none; }
@container scene-column (min-width:800px) {
  .navigation-row { flex-wrap:nowrap; }
  .navigation-row .boat-picker { order:0; flex-basis:0; }
  .navigation-row:not(:has(.boat-picker:not([hidden]))) .navigation-caption { display:block; }
}
.lab-shell.is-expanded { position:fixed; inset:0; width:100%; height:100dvh; z-index:80; grid-template-rows:minmax(0,1fr); background:var(--bg); }
.lab-shell.is-expanded > .lab-topbar { display:none; }