/* Generated with AI assistance (Claude Code) — reviewed by lane UI / pending human review */
:root {
  --n-deep: #242933; --n0: #2E3440; --n1: #3B4252; --n2: #434C5E; --n3: #4C566A;
  --n4: #D8DEE9; --n5: #E5E9F0; --n6: #ECEFF4;
  --n7: #8FBCBB; --n8: #88C0D0; --n9: #81A1C1; --n10: #5E81AC;
  --n11: #BF616A; --n12: #D08770; --n13: #EBCB8B; --n14: #A3BE8C; --n15: #B48EAD;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --r-sm: 8px; --r-md: 10px; --r-lg: 14px;
  --glass: rgba(46, 52, 64, .80); --blur: blur(14px) saturate(120%);
  --shadow-float: 0 16px 40px rgba(16, 18, 24, .5);
  --top: 56px; --gutter: 16px; --tl-h: 118px; --left-w: 320px; --right-w: 360px;
  --sheet-h: 0px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--n0); color: var(--n6); font-family: var(--font-ui); font-size: 14px; -webkit-font-smoothing: antialiased; }
a { color: var(--n9); } a:hover { color: var(--n8); }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
:focus-visible { outline: 2px solid var(--n8); outline-offset: 2px; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "zero" 1; }
.dim { color: var(--n4); }
.fine { font-size: 10.5px; color: var(--n4); }
.warn { color: var(--n13); }
.c8 { color: var(--n8); } .c9 { color: var(--n9); } .c15 { color: var(--n15); }
.spacer { flex: 1; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.row-gap { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.glass { background: var(--glass); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--n3); border-radius: var(--r-lg); box-shadow: var(--shadow-float); }
.eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--n4); font-weight: 500; }
.badge { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 6px; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; border: 1px solid; white-space: nowrap; }
.badge:empty { display: none; }
.b-est { color: var(--n13); border-color: rgba(235,203,139,.45); background: rgba(235,203,139,.08); }
.b-demo { color: var(--n15); border-color: rgba(180,142,173,.5); background: rgba(180,142,173,.1); }
.b-proc { color: var(--n9); border-color: rgba(129,161,193,.5); background: rgba(129,161,193,.1); }
.b-ok { color: var(--n14); border-color: rgba(163,190,140,.45); background: rgba(163,190,140,.08); }
.b-ext { color: var(--n6); border-color: var(--n3); background: var(--n1); }
.ibtn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--n3); background: var(--n1); color: var(--n4); padding: 0; flex: none; }
.ibtn:hover:not(:disabled) { background: var(--n2); color: var(--n6); }
.ibtn.sm { width: 30px; height: 30px; border-radius: 8px; }
.ibtn.xs { width: 28px; height: 28px; border-radius: 7px; }
.ibtn[aria-pressed="true"] { color: var(--n8); border-color: rgba(136,192,208,.5); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--n3); background: var(--n1); color: var(--n6); text-decoration: none; font-size: 13px; font-weight: 500; white-space: nowrap; }
.btn:hover { background: var(--n2); color: var(--n6); }
.btn.sm { height: 30px; padding: 0 10px; border-radius: 8px; font-size: 12px; }
.btn.lg { height: 46px; padding: 0 18px; border-radius: 12px; font-size: 15px; }
.btn-p { background: var(--n8); border-color: var(--n8); color: var(--n0); font-weight: 600; }
.btn-p:hover { background: var(--n7); color: var(--n0); }
.btn[aria-pressed="true"] { border-color: var(--n8); color: var(--n8); }
.sel { appearance: none; -webkit-appearance: none; width: 100%; height: 38px; padding: 0 34px 0 12px; border-radius: 10px; border: 1px solid var(--n3); background: var(--n1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23D8DEE9' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; color: var(--n6); font-size: 13.5px; font-weight: 500; }
select option, select optgroup { background: var(--n1); color: var(--n6); }
.overlay-select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.hatch { background: repeating-linear-gradient(135deg, rgba(76,86,106,.55) 0 2px, transparent 2px 7px); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--n4); flex: none; }
kbd { font-family: var(--font-mono); font-size: 11px; padding: 1px 5px; border: 1px solid var(--n3); border-radius: 4px; background: var(--n1); }

/* ---------- top bar ---------- */
.topbar { position: fixed; z-index: 20; left: 0; right: 0; top: 0; height: var(--top); display: flex; align-items: center; gap: 20px; padding: 0 16px; background: rgba(46,52,64,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--n3); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-weight: 700; letter-spacing: .34em; font-size: 15px; }
.brand-sub { font-size: 9.5px; letter-spacing: .14em; color: var(--n4); margin-top: 4px; }
.tabs { display: flex; gap: 4px; padding: 4px; background: var(--n1); border: 1px solid var(--n3); border-radius: 12px; }
.tabs [role="tab"] { height: 30px; padding: 0 14px; border-radius: 8px; border: 0; background: transparent; color: var(--n4); font-size: 13px; font-weight: 500; }
.tabs [role="tab"][aria-selected="true"] { background: var(--n8); color: var(--n0); font-weight: 600; }
.link-status { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .08em; color: var(--n4); white-space: nowrap; }
.link-status[data-state="ok"] .dot { background: var(--n14); box-shadow: 0 0 0 3px rgba(163,190,140,.18); }
.link-status[data-state="error"] .dot { background: var(--n11); box-shadow: 0 0 0 3px rgba(191,97,106,.2); }
.link-status[data-state="busy"] .dot { background: var(--n9); animation: pulse 1.6s ease-in-out infinite; }
.help-pop { position: absolute; right: 16px; top: 60px; width: 300px; padding: 14px; display: flex; flex-direction: column; gap: 10px; font-size: 12.5px; line-height: 1.5; color: var(--n4); }
.help-pop ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--n6); }
.banner-stack { position: fixed; z-index: 15; left: 0; right: 0; top: var(--top); display: flex; flex-direction: column; }
.net-banner, .sample-banner, .demo-banner { padding: 10px 16px; display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.45; }
.net-banner { background: rgba(191,97,106,.18); border-bottom: 1px solid var(--n11); backdrop-filter: blur(10px); }
.net-banner .btn { margin-top: 8px; height: 30px; }
.sample-banner { align-items: center; background: rgba(180,142,173,.16); border-bottom: 1px solid var(--n15); backdrop-filter: blur(10px); }
/* Persistent dataset disclosure (GET /api/nisar/dataset); amber for a synthetic/demo bundle,
   grey "unknown" state when the dataset endpoint cannot be reached — never silently hidden. */
.demo-banner { align-items: center; background: rgba(235,203,139,.16); border-bottom: 1px solid var(--n13); backdrop-filter: blur(10px); }
.demo-banner[data-state="unknown"] { background: rgba(76,86,106,.3); border-bottom-color: var(--n3); }
.b-disclosure { color: var(--n13); border-color: rgba(235,203,139,.5); background: rgba(235,203,139,.1); }
.b-real { color: var(--n14); border-color: rgba(163,190,140,.45); background: rgba(163,190,140,.08); }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes sweep { 0% { transform: translateY(-10%); } 100% { transform: translateY(70vh); } }

/* ---------- Dance ---------- */
.nisar-main { position: fixed; left: 0; right: 0; top: calc(var(--top) + var(--banner-offset, 0px)); bottom: 0; }
.dance { position: absolute; inset: 0; overflow: hidden; background: var(--n-deep); }
.map-stage { position: absolute; inset: 0; }
.radar-map { position: absolute; inset: 0; }
.compare-map { pointer-events: none; }
.maplibregl-ctrl-attrib { background: rgba(46,52,64,.7) !important; color: var(--n4) !important; font-size: 10px; }
.maplibregl-ctrl-attrib a { color: var(--n4) !important; }
.maplibregl-ctrl-group { background: var(--n1) !important; border: 1px solid var(--n3); box-shadow: none !important; }
.maplibregl-ctrl-group button + button { border-top-color: var(--n3) !important; }
.maplibregl-ctrl-group .maplibregl-ctrl-icon { filter: invert(.9); }
.maplibregl-ctrl-bottom-right { right: calc(var(--right-w) + 40px); bottom: calc(var(--tl-h) + 64px); }
.maplibregl-ctrl-bottom-left { left: calc(var(--left-w) + 40px); bottom: calc(var(--tl-h) + 64px); }
.panels-collapsed .maplibregl-ctrl-bottom-left { left: 92px; }
.sample-mark { position: absolute; left: 50%; top: 55%; transform: translate(-50%,-50%) rotate(-18deg); font-size: 46px; font-weight: 600; letter-spacing: .3em; color: rgba(180,142,173,.18); pointer-events: none; }

.hud { position: absolute; left: calc(var(--left-w) + 32px); right: calc(var(--right-w) + 32px); top: 20px; bottom: calc(var(--tl-h) + 38px); pointer-events: none; }
.panels-collapsed .hud { left: 84px; }
.crop { position: absolute; width: 22px; height: 22px; border: 0 solid rgba(136,192,208,.7); }
.crop.tl { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; }
.crop.tr { right: 0; top: 0; border-right-width: 1.5px; border-top-width: 1.5px; }
.crop.bl { left: 0; bottom: 0; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.crop.br { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.hud-code, .hud-date, .hud-cursor { position: absolute; font-size: 11px; letter-spacing: .08em; color: var(--n4); white-space: nowrap; text-shadow: 0 1px 2px rgba(16,18,24,.8); }
.hud-code { left: 30px; top: 4px; }
.hud-date { right: 30px; top: 4px; color: var(--n6); display: flex; align-items: center; gap: 8px; }
.rec { width: 7px; height: 7px; border-radius: 50%; background: var(--n8); }
.rec.on { animation: pulse 1.6s ease-in-out infinite; }
.hud-cursor { left: 30px; bottom: 6px; letter-spacing: .06em; }
.hud-scale { position: absolute; right: 30px; bottom: 6px; display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--n4); }
.scale-bar { width: 96px; height: 6px; border: 1px solid var(--n4); border-top: 0; }
.reticle { position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; }
.reticle i { position: absolute; background: rgba(236,239,244,.55); }
.reticle i:nth-child(1) { left: 13px; top: 0; width: 1px; height: 9px; }
.reticle i:nth-child(2) { left: 13px; bottom: 0; width: 1px; height: 9px; }
.reticle i:nth-child(3) { top: 13px; left: 0; height: 1px; width: 9px; }
.reticle i:nth-child(4) { top: 13px; right: 0; height: 1px; width: 9px; }
.playing .map-stage::after { content: ""; position: absolute; left: calc(var(--left-w) + 32px); right: calc(var(--right-w) + 32px); top: 4px; height: 70px; background: linear-gradient(180deg, rgba(136,192,208,0), rgba(136,192,208,.14)); border-bottom: 1px solid rgba(136,192,208,.45); animation: sweep 6s linear infinite; pointer-events: none; }

/* swipe */
.swipe { position: absolute; inset: 0; pointer-events: none; }
.swipe-line { position: absolute; top: 0; bottom: 0; left: var(--swipe, 50%); width: 2px; margin-left: -1px; background: var(--n6); box-shadow: 0 0 0 1px rgba(36,41,51,.6), 0 0 18px rgba(136,192,208,.5); }
.swipe-handle { pointer-events: auto; position: absolute; top: 42%; left: var(--swipe, 50%); width: 48px; height: 48px; margin-left: -24px; border-radius: 50%; background: var(--n6); border: 0; color: var(--n0); display: flex; align-items: center; justify-content: center; cursor: ew-resize; touch-action: none; box-shadow: 0 0 0 6px rgba(236,239,244,.16), 0 8px 24px rgba(16,18,24,.5); }
.side-label { position: absolute; top: 18px; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 8px; background: rgba(46,52,64,.9); border: 1px solid var(--n3); font-size: 11px; letter-spacing: .06em; color: var(--n6); white-space: nowrap; }
.side-left { right: calc(100% - var(--swipe, 50%) + 14px); }
.side-right { left: calc(var(--swipe, 50%) + 14px); }

.map-loading { position: absolute; left: 50%; top: 45%; transform: translate(-50%,-50%); width: 220px; padding: 14px; border-radius: 12px; background: rgba(46,52,64,.92); border: 1px solid var(--n3); text-align: center; font-size: 11px; letter-spacing: .1em; }
.map-loading .bar { height: 3px; border-radius: 2px; background: var(--n2); margin: 10px 0 8px; overflow: hidden; }
.map-loading .bar span { display: block; width: 30%; height: 100%; background: var(--n8); animation: sweep-x 1.2s ease-in-out infinite; }
@keyframes sweep-x { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
.toast { position: absolute; z-index: 6; left: 50%; transform: translateX(-50%); top: 20px; width: min(440px, calc(100% - 32px)); border-radius: 12px; padding: 12px 14px; background: rgba(46,52,64,.94); backdrop-filter: blur(14px); border: 1px solid var(--n3); box-shadow: var(--shadow-float); display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; }
.toast .row-gap { margin-top: 10px; }
.toast .btn { height: 32px; font-size: 12.5px; }

/* panels */
.panel { position: absolute; z-index: 4; top: var(--gutter); bottom: calc(var(--tl-h) + 2 * var(--gutter)); display: flex; flex-direction: column; overflow: hidden; }
.panel-left { left: var(--gutter); width: var(--left-w); }
.panel-right { right: var(--gutter); width: var(--right-w); }
.panels-collapsed .panel-left { display: none; }
.rail { position: absolute; z-index: 4; left: var(--gutter); top: var(--gutter); width: 52px; padding: 8px 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rail-sep { width: 24px; height: 1px; background: var(--n3); margin: 2px 0; }
.panel-head { padding: 14px 14px 12px; border-bottom: 1px solid var(--n3); display: flex; flex-direction: column; gap: 10px; }
.area-picker { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; background: var(--n1); border: 1px solid var(--n3); border-radius: 10px; }
.area-picker:hover { background: var(--n2); }
.area-picker:focus-within { outline: 2px solid var(--n8); outline-offset: 2px; }
.area-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.area-name { font-size: 16px; font-weight: 600; text-transform: capitalize; }
.area-track { font-size: 11px; color: var(--n4); margin-top: 3px; }
.area-story { font-size: 13px; line-height: 1.5; color: var(--n4); }
.badges { display: flex; gap: 6px; flex-wrap: wrap; }
.panel-body { flex: 1; overflow: auto; padding: 12px 10px 4px; }
.group-head { padding: 12px 4px 6px; align-items: baseline; }
.group-head:first-child { padding-top: 0; }
.layer-list { display: flex; flex-direction: column; gap: 2px; }
.row-btn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 8px 10px; }
.row-btn:hover { background: rgba(67,76,94,.6); }
.row-btn[aria-pressed="true"] { background: var(--n2); border-color: rgba(136,192,208,.45); }
.row-btn .sw { width: 26px; height: 16px; border-radius: 4px; border: 1px solid var(--n3); flex: none; }
.row-btn .t { flex: 1; font-size: 13.5px; font-weight: 500; }
.row-btn .u { font-family: var(--font-mono); font-size: 11px; color: var(--n4); }
.legend { margin: 12px 4px 8px; padding: 12px; background: rgba(36,41,51,.6); border: 1px solid var(--n3); border-radius: 10px; display: flex; flex-direction: column; gap: 10px; }
.legend:empty { display: none; }
.legend-sep { border: none; border-top: 1px solid var(--n3); margin: 2px 0; }
.grad { height: 10px; border-radius: 3px; border: 1px solid var(--n3); }
.ticks { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--n4); margin-top: 5px; }
.legend-ends { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--n4); margin-top: 4px; text-transform: capitalize; }
.legend-rows { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.legend-rows > div, .legend-grid > div { display: flex; align-items: center; gap: 8px; text-transform: capitalize; }
.legend-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; font-size: 12.5px; }
.chip-sw { width: 18px; height: 12px; border-radius: 3px; border: 1px solid var(--n3); flex: none; }
.chip-sw.empty { border-style: dashed; }
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.legend details { border-top: 1px solid var(--n3); padding-top: 8px; }
.legend summary { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--n8); font-weight: 500; }
.legend details p { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--n4); }
.panel-foot { padding: 10px 14px; border-top: 1px solid var(--n3); font-size: 13px; }
.switch { width: 40px; height: 22px; border-radius: 11px; border: 1px solid var(--n3); background: var(--n2); position: relative; padding: 0; }
.switch span { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--n6); transition: left .15s; }
.switch[aria-pressed="true"] { background: var(--n8); }
.switch[aria-pressed="true"] span { left: 20px; }

.view { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.panel-top { padding: 14px 16px 0; }
.ev-head { padding: 12px 14px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--n3); }
.back-link { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border-radius: 8px; color: var(--n4); background: transparent; border: 0; font-size: 12.5px; }
.back-link:hover { background: var(--n2); color: var(--n6); }
.view-body { flex: 1; overflow: auto; padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 16px; }
#event-detail { padding-top: 14px; }
.peak-label { font-size: 13px; color: var(--n4); }
.peak { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.peak .num { font-family: var(--font-mono); font-size: 46px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.peak .unit { font-family: var(--font-mono); font-size: 18px; color: var(--n4); }
.peak-sub { font-size: 13px; color: var(--n4); margin-top: 8px; }
.peak-sub .mono { color: var(--n6); }
.card-in { background: rgba(36,41,51,.55); border: 1px solid var(--n3); border-radius: 12px; padding: 12px; }
.card-title { font-size: 12.5px; font-weight: 500; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile { background: var(--n1); border: 1px solid var(--n3); border-radius: 12px; padding: 12px; text-align: left; }
button.tile:hover { border-color: rgba(136,192,208,.5); }
.tile .k { font-size: 12px; color: var(--n4); }
.tile .v { font-family: var(--font-mono); font-size: 26px; font-weight: 600; margin-top: 6px; }
.tile .s { font-family: var(--font-mono); font-size: 10.5px; color: var(--n4); margin-top: 2px; text-transform: uppercase; }
.tile.pending { border-style: dashed; background: transparent; }
.tile.pending .v { color: var(--n4); font-size: 22px; }
.stack-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin-top: 10px; gap: 2px; }
.move-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.move-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.move-row .name { width: 72px; text-transform: capitalize; }
.move-row .hint { flex: 1; color: var(--n4); font-size: 11.5px; }
.intervals { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.interval { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 10px; }
.interval .bars { display: flex; flex-direction: column; gap: 3px; }
.interval .bars div { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; color: var(--n4); }
.interval .bars span { height: 6px; border-radius: 3px; min-width: 2px; }
.processing { padding: 12px; border-radius: 10px; border: 1px dashed rgba(129,161,193,.6); background: rgba(129,161,193,.08); font-size: 13px; line-height: 1.45; }
.processing .btn { margin-top: 10px; height: 32px; }
.status-line { font-size: 12.5px; line-height: 1.45; color: var(--n4); }
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 24px 8px; }
.empty-state strong { font-size: 15px; font-weight: 600; }
.empty-state p { font-size: 12.5px; color: var(--n4); line-height: 1.5; max-width: 260px; }
.region-list { display: flex; flex-direction: column; gap: 6px; }
.region-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; border: 1px solid var(--n3); background: var(--n1); text-align: left; width: 100%; }
.region-item:hover { border-color: rgba(136,192,208,.5); }
.region-item .mk { width: 10px; height: 10px; flex: none; }
.region-item .mk.unc { border: 1.5px dashed var(--n4); }
.region-item .nm { flex: 1; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* evidence */
.driver-chip { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: 7px; border: 1.5px solid; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.driver-chip .mk { width: 9px; height: 9px; }
.driver-chip.unc { border-style: dashed; }
.driver-chip.unc .mk { border: 1.5px dashed var(--n4); }
.ev-title { margin: 12px 0 6px; font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
.ev-sub { font-size: 13.5px; line-height: 1.55; color: var(--n4); }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--n3); border: 1px solid var(--n3); border-radius: 12px; overflow: hidden; }
.facts > div { background: var(--n1); padding: 10px 12px; }
.facts .k { font-size: 11.5px; color: var(--n4); }
.facts .v { font-family: var(--font-mono); font-size: 13.5px; margin-top: 4px; }
.facts .s { font-family: var(--font-mono); font-size: 10.5px; color: var(--n4); margin-top: 2px; }
.meter { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.meter span { height: 8px; border-radius: 2px; border: 1px solid var(--n3); }
.meter span.on { background: var(--n13); border-color: var(--n13); }
.li { display: grid; grid-template-columns: 16px 1fr; gap: 8px; font-size: 13px; line-height: 1.45; }
.li svg { margin-top: 2px; }
.cant { background: rgba(36,41,51,.6); border: 1px dashed var(--n3); border-radius: 12px; padding: 12px; }
.cant-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.cant ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; line-height: 1.45; color: var(--n4); }
.ev-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ev-actions .btn { height: 38px; }

/* compare */
.compare-card { position: absolute; z-index: 5; right: var(--gutter); top: var(--gutter); width: 320px; padding: 14px; display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--n4); }
.field-label { font-size: 12px; color: var(--n4); }
.compare-legend { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.compare-legend:empty { display: none; }
.date-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.date-chip { height: 28px; padding: 0 4px; border-radius: 8px; border: 1px solid var(--n3); background: transparent; color: var(--n4); font-family: var(--font-mono); font-size: 11px; }
.date-chip:hover { color: var(--n6); }
.date-chip.left { border-color: var(--n8); color: var(--n8); }
.date-chip.gap { border-style: dashed; font-size: 9.5px; letter-spacing: .04em; cursor: not-allowed; }
.date-chip[aria-pressed="true"] { background: var(--n9); border-color: var(--n9); color: var(--n0); font-weight: 600; }
.chips-note { margin-top: 8px; }
.between { position: absolute; z-index: 5; left: 50%; transform: translateX(-50%); bottom: calc(var(--tl-h) + 2 * var(--gutter)); display: flex; align-items: center; gap: 18px; padding: 12px 18px; border-radius: 12px; white-space: nowrap; }
.between .col { display: flex; flex-direction: column; gap: 3px; }
.between .sep { width: 1px; height: 32px; background: var(--n3); }
.between .note { font-size: 12px; color: var(--n4); max-width: 210px; white-space: normal; line-height: 1.4; }
.comparing .panel-right { display: none; }
.comparing .maplibregl-ctrl-bottom-right { right: calc(320px + 32px); }

/* spot chart */
.spot-panel { position: absolute; z-index: 5; left: calc(var(--left-w) + 32px); bottom: calc(var(--tl-h) + 2 * var(--gutter)); width: min(640px, calc(100% - var(--left-w) - var(--right-w) - 64px)); padding: 14px 16px 10px; display: flex; flex-direction: column; gap: 4px; }
.panels-collapsed .spot-panel { left: 84px; width: min(640px, calc(100% - 84px - var(--right-w) - 48px)); }
.spot-head { display: flex; align-items: center; gap: 10px; }
.spot-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
.spot-title .fine { font-weight: 400; margin-top: 2px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spot-key { display: flex; align-items: center; gap: 12px; margin-right: 6px; font-size: 12px; }
.spot-key span { display: inline-flex; align-items: center; gap: 6px; }
.series-chart { width: 100%; height: 176px; display: block; margin-top: 8px; }
.map-hint { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); bottom: calc(var(--tl-h) + 2 * var(--gutter)); display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 15px; background: rgba(46,52,64,.85); border: 1px solid var(--n3); color: var(--n4); font-size: 11px; letter-spacing: .06em; white-space: nowrap; pointer-events: none; }

/* timeline */
.timeline { position: absolute; z-index: 6; left: var(--gutter); right: var(--gutter); bottom: var(--gutter); height: var(--tl-h); display: flex; align-items: stretch; }
.tl-controls { display: flex; align-items: center; gap: 10px; padding: 0 18px; border-right: 1px solid var(--n3); }
.play { width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--n8); color: var(--n0); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 6px rgba(136,192,208,.14); flex: none; }
.play .i-pause, .playing .play .i-play { display: none; }
.playing .play .i-pause { display: block; }
.speed { height: 28px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--n3); background: transparent; color: var(--n4); font-size: 11px; }
.tl-pass { display: flex; flex-direction: column; justify-content: center; padding: 0 20px; border-right: 1px solid var(--n3); width: 190px; flex: none; }
.tl-date { font-size: 24px; font-weight: 600; margin-top: 6px; letter-spacing: -.01em; white-space: nowrap; }
.tl-pass .fine { font-size: 11px; margin-top: 4px; }
.date-track { flex: 1; position: relative; margin: 0 24px; min-width: 0; }
.tl-month { position: absolute; top: 14px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--n4); border-left: 1px solid var(--n3); padding-left: 5px; height: 12px; line-height: 12px; }
.tl-spark { position: absolute; left: 0; right: 0; bottom: 24px; width: 100%; height: 40px; }
.tl-gap { position: absolute; bottom: 24px; height: 40px; border-left: 1px dashed var(--n3); border-right: 1px dashed var(--n3); }
.tl-gap-label { position: absolute; transform: translateX(-50%); bottom: 68px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; color: var(--n4); white-space: nowrap; background: rgba(46,52,64,.9); padding: 1px 5px; border-radius: 4px; text-transform: uppercase; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.tl-base { position: absolute; left: 0; right: 0; bottom: 24px; height: 1px; background: var(--n3); }
.date-tick { position: absolute; bottom: 24px; width: 14px; height: 40px; margin-left: -7px; background: transparent; border: 0; padding: 0; display: flex; justify-content: center; align-items: flex-end; }
.date-tick span { width: 2px; height: 18px; border-radius: 1px; background: var(--n4); }
.date-tick.past span { height: 22px; background: var(--n9); }
.date-tick.active span { width: 3px; height: 34px; background: var(--n8); }
.date-tick.cmp span { background: var(--n9); height: 30px; }
.tl-head { position: absolute; bottom: 18px; width: 0; height: 56px; border-left: 2px solid var(--n8); pointer-events: none; }
.tl-diamond { position: absolute; bottom: 12px; width: 12px; height: 12px; margin-left: -5px; background: var(--n8); transform: rotate(45deg); border-radius: 2px; pointer-events: none; }
.tl-window { position: absolute; bottom: 24px; height: 40px; background: rgba(136,192,208,.14); border-top: 2px solid var(--n8); pointer-events: none; }
.tl-foot { position: absolute; bottom: 0; font-family: var(--font-mono); font-size: 10.5px; color: var(--n4); white-space: nowrap; }
.tl-empty { position: absolute; inset: 0; display: flex; align-items: center; font-size: 12.5px; color: var(--n4); }
.tl-side { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 0 16px; border-left: 1px solid var(--n3); width: 178px; flex: none; }
.tl-side .fine { font-size: 10px; letter-spacing: .06em; }

/* mobile-only elements hidden on desktop */
.m-chips, .m-fabs, .m-hint, .m-sheet-tabs { display: none; }

/* ---------- Story ---------- */
.story { position: absolute; inset: 0; overflow-y: auto; background: var(--n0); }
.story-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px 64px; }
.hero { padding: 72px 0 40px; display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-end; }
.hero-l { flex: 1 1 520px; min-width: 0; }
.hero h1 { margin-top: 16px; font-size: 64px; line-height: 1.02; letter-spacing: -.035em; font-weight: 700; }
.hero-r { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.hero-r p { font-size: 18px; line-height: 1.55; color: var(--n4); }
.hero-fig { margin: 0; position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--n3); height: 340px; background: var(--n-deep); }
.hero-fig svg { display: block; }
.hero-fig figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 14px 18px; gap: 12px; flex-wrap: wrap; background: linear-gradient(0deg, rgba(36,41,51,.92), rgba(36,41,51,0)); font-size: 11px; letter-spacing: .1em; }
.cap-cam { color: var(--n0); background: var(--n6); padding: 3px 8px; border-radius: 5px; }
.cap-radar { color: var(--n0); background: var(--n8); padding: 3px 8px; border-radius: 5px; }
.key { padding: 72px 0 24px; }
.key-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.key-head h2 { margin-top: 10px; font-size: 32px; letter-spacing: -.02em; font-weight: 600; }
.key-head p { max-width: 420px; font-size: 15px; line-height: 1.55; color: var(--n4); }
.key-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 28px; }
.key-card { padding: 20px; border-radius: 14px; }
.key-card p { margin-top: 12px; font-size: 14.5px; line-height: 1.55; }
.c-meas { background: rgba(136,192,208,.08); border: 1px solid rgba(136,192,208,.4); }
.c-ext { background: var(--n1); border: 1px solid var(--n3); }
.c-hyp { background: transparent; border: 1.5px dashed rgba(180,142,173,.7); }
.tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; padding-top: 2px; }
.chapter { padding: 48px 0 0; }
.rule-head { display: flex; align-items: center; gap: 14px; }
.rule-head i { flex: 1; height: 1px; background: var(--n3); }
.rule-head .num { font-family: var(--font-mono); font-size: 13px; color: var(--n8); }
.chapter article { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 32px; padding: 28px; border-radius: 18px; background: var(--n1); border: 1px solid var(--n3); }
.ch-media { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.thumb { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--n3); aspect-ratio: 4 / 3; background: var(--n-deep); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: auto; }
.thumb .lbl { position: absolute; left: 12px; top: 12px; font-size: 10.5px; letter-spacing: .1em; background: rgba(46,52,64,.9); border: 1px solid var(--n3); padding: 4px 8px; border-radius: 6px; }
.thumb .veil { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(36,41,51,.55); font-size: 11px; letter-spacing: .1em; text-align: center; padding: 16px; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.step { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 10px; border: 1px solid var(--n3); background: transparent; color: var(--n6); text-align: left; }
.step:hover { border-color: rgba(136,192,208,.6); }
.step .k { font-family: var(--font-mono); font-size: 10px; color: var(--n4); text-transform: uppercase; }
.step .d { font-family: var(--font-mono); font-size: 13px; }
.step.peak-step { border-color: var(--n8); background: rgba(136,192,208,.1); }
.step.peak-step .k { color: var(--n8); }
.sites { display: flex; flex-direction: column; gap: 6px; }
.site { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--n3); background: transparent; color: var(--n6); text-align: left; width: 100%; }
.site:hover { border-color: rgba(136,192,208,.6); }
.site .k { font-family: var(--font-mono); font-size: 11px; color: var(--n8); text-transform: uppercase; }
.site .d { font-size: 12.5px; color: var(--n5); }
.site .d.s2 { color: var(--n4); }
.ch-text { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.ch-meta { font-size: 12px; color: var(--n4); letter-spacing: .06em; text-transform: uppercase; }
.ch-title { margin-top: 10px; font-size: 34px; line-height: 1.12; letter-spacing: -.02em; font-weight: 700; text-transform: capitalize; }
.ch-lede { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--n4); }
.ch-peak { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 18px 20px; border-radius: 14px; background: var(--n0); border: 1px solid var(--n3); }
.ch-peak .num { font-size: 44px; }
.ch-pending { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; border: 1px dashed rgba(129,161,193,.6); background: rgba(129,161,193,.06); }
.ch-pending strong { font-size: 15px; font-weight: 600; }
.ch-pending p { font-size: 13.5px; color: var(--n4); margin-top: 2px; }
.claims { display: flex; flex-direction: column; gap: 8px; }
.claim { display: grid; grid-template-columns: 118px 1fr; gap: 14px; align-items: start; padding: 12px 14px; border-radius: 10px; font-size: 14px; line-height: 1.5; }
.ch-cta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.later { padding: 56px 0 0; }
.later-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 20px; }
.later-card { padding: 20px; border-radius: 14px; border: 1px solid var(--n3); }
.later-card .t { font-size: 18px; font-weight: 600; margin-top: 8px; text-transform: capitalize; }
.later-card p { font-size: 14px; color: var(--n4); margin-top: 6px; line-height: 1.5; }
.story-foot { margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--n3); display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; font-size: 13px; color: var(--n4); line-height: 1.6; }
.story-foot > div:first-child { max-width: 560px; }
.story-foot .mono { font-size: 11.5px; letter-spacing: .06em; }

/* ---------- narrower desktops ---------- */
@media (max-width: 1180px) {
  :root { --left-w: 280px; --right-w: 320px; }
  .tl-side { display: none; }
  .tl-pass { width: 160px; padding: 0 14px; }
  .tl-date { font-size: 19px; }
  .map-hint { display: none; }
}

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  :root { --tl-h: 124px; --gutter: 0px; }
  .topbar { gap: 10px; padding: 0 12px; }
  .brand-sub, .link-status #app-status-text, .help-btn { display: none; }
  .brand svg { width: 24px; height: 24px; }
  .brand-name { font-size: 13px; letter-spacing: .08em; }
  #dataset-badge { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
  .tabs [role="tab"] { height: 32px; padding: 0 12px; }
  #sample-badge { padding: 0 6px; }
  .desk-only, .hud, .map-hint, .rail, .between, .maplibregl-ctrl-bottom-right { display: none !important; }
  .maplibregl-ctrl-bottom-left { left: 0; bottom: calc(var(--tl-h) + 120px); }
  .m-chips { display: flex; position: absolute; z-index: 5; left: 12px; right: 12px; top: 12px; gap: 8px; }
  .chip-area { position: relative; flex: 1; min-width: 0; height: 44px; border-radius: 12px; display: flex; align-items: center; gap: 8px; padding: 0 12px; }
  .chip-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; text-transform: capitalize; }
  .chip-layer { height: 44px; border-radius: 12px; display: flex; align-items: center; gap: 8px; padding: 0 12px; }
  .chip-layer .sw { width: 22px; height: 12px; border-radius: 3px; border: 1px solid var(--n3); }
  .chip-layer .mono { font-size: 12px; }
  .m-fabs { display: flex; position: absolute; z-index: 5; right: 12px; top: 72px; flex-direction: column; gap: 8px; }
  .fab { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 0; color: var(--n6); }
  .fab[aria-pressed="true"] { color: var(--n8); }
  .m-hint { display: flex; position: absolute; z-index: 5; left: 12px; top: 72px; height: 28px; padding: 0 10px; border-radius: 14px; background: rgba(46,52,64,.85); border: 1px solid var(--n3); align-items: center; font-size: 10px; letter-spacing: .06em; color: var(--n4); max-width: calc(100% - 80px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .m-hint:empty { display: none; }

  .m-sheet-tabs { display: block; position: absolute; z-index: 7; left: 0; right: 0; bottom: calc(var(--tl-h) + var(--sheet-h)); border-radius: 18px 18px 0 0; border-width: 1px 0 0 0; padding: 8px 16px 12px; box-shadow: none; }
  .sheet-open { --sheet-h: min(52vh, 420px); }
  .sheet-open .m-sheet-tabs { border-radius: 18px 18px 0 0; }
  .sheet-handle { display: block; margin: 0 auto 8px; width: 44px; height: 14px; background: transparent; border: 0; padding: 4px 0; }
  .sheet-handle span { display: block; width: 40px; height: 4px; margin: 0 auto; border-radius: 2px; background: var(--n3); }
  .m-peak:not(:empty) { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
  .m-peak .num { font-family: var(--font-mono); font-size: 34px; font-weight: 600; line-height: 1; }
  .m-peak .unit { font-family: var(--font-mono); font-size: 14px; color: var(--n4); }
  .m-peak .side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
  .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 3px; background: var(--n1); border: 1px solid var(--n3); border-radius: 10px; }
  .seg [role="tab"] { height: 34px; border: 0; border-radius: 7px; background: transparent; color: var(--n4); font-size: 12.5px; }
  .seg [role="tab"][aria-selected="true"] { background: var(--n2); color: var(--n6); font-weight: 600; }

  .panel { left: 0 !important; right: 0; width: auto; top: auto; bottom: var(--tl-h); height: var(--sheet-h); border-radius: 0; border-width: 0; box-shadow: none; background: rgba(46,52,64,.94); z-index: 7; }
  .panel, .comparing .panel-right, .panels-collapsed .panel-left { display: none; }
  body.sheet-open[data-sheet="layers"] .panel-left { display: flex; }
  body.sheet-open:not([data-sheet="layers"]) .panel-right { display: flex; }
  .panel-head { padding: 12px 16px; }
  .compare-card { left: 8px; right: 8px; top: 64px; width: auto; padding: 12px; gap: 10px; z-index: 8; }
  .comparing .m-fabs { top: auto; bottom: calc(var(--tl-h) + 120px); }
  .spot-panel { left: 8px !important; right: 8px; width: auto !important; top: 64px; bottom: auto; z-index: 8; }
  .series-chart { height: 150px; }
  .spot-key { display: none; }
  .toast { top: 64px; }

  .timeline { left: 0; right: 0; bottom: 0; border-radius: 0; border-width: 1px 0 0 0; box-shadow: none; background: var(--n0); flex-direction: column; padding: 10px 14px 14px; gap: 10px; }
  .tl-controls { border: 0; padding: 0; gap: 10px; order: 1; }
  .tl-controls .ibtn { width: 40px; height: 40px; border-radius: 12px; }
  .play { width: 48px; height: 48px; box-shadow: 0 0 0 5px rgba(136,192,208,.14); }
  .tl-pass { position: absolute; right: 14px; top: 10px; border: 0; padding: 0; width: auto; text-align: right; align-items: flex-end; }
  .tl-pass .eyebrow { order: 2; font-size: 10px; letter-spacing: .06em; margin-top: 2px; }
  .tl-pass .tl-date { order: 1; font-size: 18px; margin-top: 0; }
  .tl-pass .fine { display: none; }
  .date-track { order: 2; margin: 0; height: 40px; flex: none; }
  .tl-month, .tl-gap-label, .tl-spark, .tl-foot.mid { display: none; }
  .tl-gap, .date-tick { bottom: 14px; height: 20px; }
  .tl-base { bottom: 14px; }
  .date-tick span { height: 12px !important; }
  .date-tick.active span { height: 20px !important; }
  .tl-head { bottom: 12px; height: 24px; }
  .tl-diamond { bottom: 9px; width: 10px; height: 10px; margin-left: -4px; }
  .tl-window { bottom: 14px; height: 20px; }
  .tl-foot { font-size: 9.5px; }
  .playing .map-stage::after { left: 0; right: 0; }

  .hero { padding: 40px 0 28px; gap: 20px; }
  .hero h1 { font-size: 40px; }
  .hero-r p { font-size: 16px; }
  .hero-fig { height: 220px; }
  .key { padding: 48px 0 16px; }
  .key-head h2 { font-size: 24px; }
  .chapter article { padding: 16px; gap: 20px; }
  .ch-title { font-size: 26px; }
  .claim { grid-template-columns: 1fr; gap: 4px; }
  .story-inner { padding: 0 16px 48px; }
}

/* ---------- gaps added after design review ---------- */
.compare-card-left { right: auto; left: calc(var(--gutter) + var(--left-w) + var(--gutter)); width: 280px; z-index: 5; }
.left-layer { font-size: 13.5px; font-weight: 500; color: var(--n6); }
.map-na { position: absolute; inset: 0; z-index: 2; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.map-na-text { padding: 6px 12px; border-radius: 8px; background: rgba(46,52,64,.9); border: 1px solid var(--n3); font-size: 11px; letter-spacing: .1em; color: var(--n4); }
.outlines-note { display: block; margin-top: 2px; }
.outlines-note:empty { display: none; }
.switch:disabled { opacity: .45; }
.region-label { pointer-events: none; padding: 2px 7px; border: 1.5px solid; border-radius: 6px; background: rgba(46,52,64,.88); font-size: 10px; font-weight: 600; letter-spacing: .08em; white-space: nowrap; color: var(--n6); }
.region-label.unc { border-style: dashed; color: var(--n4); }
.spot-pin { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--n6); box-shadow: 0 0 0 2px rgba(36,41,51,.6); display: flex; align-items: center; justify-content: center; }
.spot-pin .pin-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--n6); }
.spot-pin .pin-x { display: none; font-size: 24px; line-height: 1; font-weight: 700; color: var(--n12); }
.spot-pin.bad { border-color: transparent; box-shadow: none; }
.spot-pin.bad .pin-dot { display: none; }
.spot-pin.bad .pin-x { display: block; text-shadow: 0 0 3px rgba(36,41,51,.9); }
.date-track { touch-action: none; cursor: ew-resize; }
.date-tick { cursor: pointer; }
.date-tick.pending { opacity: .35; }
.date-tick { transition: opacity .2s; }
.tick-lbl { position: absolute; top: -2px; left: 50%; transform: translateX(-50%); font-size: 9.5px; font-weight: 700; padding: 0 3px; border-radius: 3px; background: var(--n0); pointer-events: none; }
.tick-lbl[data-side="L"] { color: var(--n8); } .tick-lbl[data-side="R"] { color: var(--n9); }
.tl-gap:focus-visible { outline-offset: 0; }
.tl-gap:hover + .tl-gap-label, .tl-gap:focus + .tl-gap-label { display: block !important; z-index: 3; }
.tl-note { position: absolute; left: 0; right: 0; top: 4px; font-size: 11.5px; color: var(--n13); }
.btn.saved { border-color: var(--n14); color: var(--n14); }
@media (max-width: 1000px) { .compare-card-left { display: none; } }
@media (max-width: 760px) {
  .compare-card-left { display: none; }
  .sheet-open .map-stage { bottom: calc(var(--tl-h) + var(--sheet-h) + 118px); }
  .sheet-open .m-fabs, .sheet-open .m-hint { display: none; }
  .sheet-open .maplibregl-ctrl-bottom-left { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .playing .map-stage::after { display: none; }
}
.ev-story { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: rgba(136,192,208,.06); border: 1px solid rgba(136,192,208,.35); }
.ev-story-h { font-size: 14px; font-weight: 600; }
.ev-story .claim { grid-template-columns: 1fr; gap: 4px; padding: 10px 12px; font-size: 12.5px; }
.ev-story-chart { width: 100%; height: auto; display: block; }
.ev-verdict { font-size: 12.5px; font-weight: 500; }
.ev-verdict.v-supports { color: var(--n8, #88C0D0); }
.ev-verdict.v-questions { color: #D08770; }
.ev-story-main { font-size: 11.5px; color: #EBCB8B; letter-spacing: .02em; }
.ev-story-in { animation: ev-story-in .45s ease-out; }
@keyframes ev-story-in { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ev-story-in { animation: none; } }

/* ---------- bug-fix pass + flood check points ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mobile-only { display: none !important; }
.b-err { color: var(--n11); border-color: rgba(191,97,106,.55); background: rgba(191,97,106,.1); }
.b-cand { color: var(--n15); border-color: rgba(180,142,173,.55); background: rgba(180,142,173,.1); }
.gap-warn { color: var(--n13); font-size: 12px; line-height: 1.4; }
.area-limits { margin-top: 8px; font-size: 12px; color: var(--n4); }
.area-limits summary { cursor: pointer; color: var(--n8); font-weight: 500; }
.area-limits ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; line-height: 1.45; }
.compare-window-note { display: flex; flex-direction: column; gap: 4px; line-height: 1.45; font-size: 11px; }
.compare-window-note:empty { display: none; }
.compare-body { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 761px) { .compare-window-note { display: none; } } /* desktop shows the same caveat in the .between strip */
.spot-verdict { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.spot-verdict:empty { display: none; }
.verdict-line { font-size: 13px; font-weight: 600; }
.verdict-label.v-drop { color: var(--n14); } .verdict-label.v-none { color: var(--n13); } .verdict-label.v-nodata { color: var(--n12); }

/* flood check points (left panel section, map labels) */
.cp-section { margin-top: 4px; }
.cp-list { display: flex; flex-direction: column; gap: 6px; }
.cp-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--n3); background: var(--n1); }
.cp-item:hover { border-color: rgba(180,142,173,.6); }
.cp-item[aria-pressed="true"] { background: var(--n2); border-color: var(--n15); }
.cp-rank { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--n0); background: var(--n15); }
.cp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cp-name { font-size: 13px; font-weight: 600; }
.cp-ev { font-size: 11px; line-height: 1.35; color: var(--n4); }
.cp-card { margin-top: 8px; padding: 12px; border-radius: 10px; border: 1px dashed var(--n15); background: rgba(36,41,51,.6); display: flex; flex-direction: column; gap: 10px; }
.cp-facts { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.cp-facts > div { display: flex; justify-content: space-between; gap: 8px; }
.cp-facts .k { color: var(--n4); }
.cp-actions { display: flex; flex-direction: column; gap: 6px; }
.cp-actions .btn { height: 34px; justify-content: flex-start; }
.cp-text { font-size: 12px; line-height: 1.5; color: var(--n5); }
.cp-note { font-size: 11.5px; color: var(--n4); border-top: 1px solid var(--n3); padding-top: 8px; }
.cp-verdict { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.cp-verdict:empty { display: none; }
.cp-label { padding: 1px 7px; border: 1.5px dashed var(--n15); border-radius: 6px; background: rgba(46,52,64,.92); color: var(--n6); font-size: 11px; font-weight: 700; line-height: 1.5; }
.cp-label.cp-sel { background: var(--n15); color: var(--n0); border-style: solid; }

@media (max-width: 760px) {
  .mobile-only { display: inline-flex !important; }
  /* Compact compare card: header + window caveat only, so it no longer sits on the swipe handle. */
  .compare-card.compact .compare-body { display: none; }
  .compare-card.compact { gap: 6px; }
}
.synth { display: flex; flex-direction: column; gap: 10px; }
.synth-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--n3); }
.synth-bar span { display: block; height: 100%; }
.synth-rows { display: flex; flex-direction: column; gap: 5px; font-size: 12px; }
.synth-rows > div { display: grid; grid-template-columns: 10px 1fr auto 28px; gap: 8px; align-items: center; }
.synth-rows i, .synth-cluster i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.synth-rows .fine { text-align: right; }
.synth-check { font-size: 12px; }
.synth-check .v-questions { color: #D08770; } .synth-check .v-supports { color: #88C0D0; }
.synth-clusters { display: flex; flex-direction: column; gap: 6px; }
.synth-cluster { display: grid; grid-template-columns: 10px 1fr; gap: 8px; align-items: start; text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--n3); background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer; }
.synth-cluster:hover, .synth-cluster:focus-visible { border-color: #88C0D0; }
.synth-cluster i { margin-top: 3px; }
.synth .claim { grid-template-columns: 1fr; gap: 4px; padding: 10px 12px; font-size: 12.5px; }
.tiles.tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tiles.tiles-3 .tile { padding: 10px; }
.tiles.tiles-3 .tile .v { font-size: 20px; }
.fold { border: 1px solid var(--n3); border-radius: 12px; background: rgba(36,41,51,.35); }
.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: '▸'; color: var(--n4); font-size: 11px; margin-left: 4px; transition: transform .15s; }
.fold[open] > summary::after { transform: rotate(90deg); }
.fold > summary .fine { margin-left: auto; }
.fold > summary:hover .card-title { color: #88C0D0; }
.fold > :not(summary) { padding: 0 12px 12px; }
.fold-stack { display: flex; flex-direction: column; gap: 8px; }
.synth .fold { background: transparent; }
.synth .fold > :not(summary) { padding: 0 10px 10px; }
.narrative-text { font-size: 13px; line-height: 1.55; }

/* ---------------- 2D / 3D terrain toggle (docs/plans/2026-11-14-3d-terrain.md) ---------------- */
/* The 3D bar and the 3D water legend stack in one column, so the legend always sits below the bar, even when it wraps. */
.map-top-stack { position: absolute; z-index: 5; left: 50%; transform: translateX(-50%); top: 50px; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; width: calc(100% - var(--left-w) - var(--right-w) - 80px); }
.map-top-stack > * { pointer-events: auto; }
.view3d { display: flex; align-items: center; gap: 12px; padding: 5px 10px 5px 5px; border-radius: 12px; max-width: 100%; flex-wrap: wrap; justify-content: center; }
.v3d-seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 9px; background: var(--n0); border: 1px solid var(--n3); }
.v3d-seg button { height: 28px; padding: 0 12px; border-radius: 7px; border: 0; background: transparent; color: var(--n4); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.v3d-seg button[aria-pressed="true"] { background: var(--n2); color: var(--n6); box-shadow: inset 0 0 0 1px var(--n3); }
.v3d-seg button:disabled { opacity: .45; cursor: not-allowed; }
.exag { display: inline-flex; align-items: center; gap: 8px; }
.exag input { width: 90px; accent-color: var(--n8); }
.terrain-note { white-space: nowrap; cursor: help; }
@media (max-width: 1100px) { .terrain-note { display: none; } }
@media (max-width: 760px) {
  .map-top-stack { top: 58px; width: calc(100% - 24px); }
  .view3d { max-width: 100%; padding: 4px; gap: 8px; }
  .exag input { width: 70px; }
}
.water3d-legend { display: flex; flex-direction: column; gap: 5px; padding: 9px 12px; border-radius: 12px; font-size: 12px; max-width: min(460px, 100%); }
.w3-row { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: center; }
.w3-sw { width: 14px; height: 10px; border-radius: 3px; border: 1px solid rgba(236,239,244,.2); }
.w3-perm { background: rgb(94,143,199); }
.w3-new { background: linear-gradient(90deg, rgb(84,148,204), rgb(20,51,120)); }
.w3-snow { background: repeating-linear-gradient(135deg, #b8c4d6 0 3px, #8c99ad 3px 6px); }
@media (max-width: 760px) { .water3d-legend { font-size: 11px; } }

/* ---------------- water vs radar-shadow explainer ---------------- */
.chip-sw.shadow, .w3-shadow { background: #6E6378; }
.chip-sw.inline { display: inline-block; vertical-align: -1px; margin: 0 2px; }
.shadow-note { margin-top: 10px; padding: 10px; border-radius: 10px; background: var(--n0); border: 1px solid var(--n3); display: flex; flex-direction: column; gap: 8px; }
.shadow-stats { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.shadow-stats > div:not(.fine) { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: center; }
.shadow-why summary { cursor: pointer; font-size: 12.5px; color: var(--n8); }
.shadow-why p { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--n4); }
.shadow-why b { color: var(--n6); font-weight: 600; }
.shadow-diagram { display: block; width: 100%; height: auto; margin-top: 8px; border-radius: 8px; background: var(--n-deep); }
.shadow-line { font-size: 11.5px; color: var(--n4); margin-top: 3px; }
.linkish { border: 0; background: none; padding: 0; color: var(--n8); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.w3-unres { background: rgb(135,191,214); }
.w3-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.w3-toggle { display: inline-flex; align-items: center; gap: 5px; flex: none; height: 24px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--n3); background: var(--n1); color: var(--n6); font-size: 11.5px; font-weight: 500; }
.w3-head:hover .w3-toggle { background: var(--n2); color: var(--n8); border-color: rgba(136,192,208,.5); }
.water3d-legend.min { padding: 5px 6px 5px 12px; }
.w3-sum { font-size: 11px; color: var(--n4); margin-left: auto; }

/* ---------------- 3D trees ---------------- */
.veg-toggle { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--n3); background: var(--n0); color: var(--n4); font-size: 12.5px; font-weight: 500; cursor: pointer; }
.veg-toggle[aria-pressed="true"] { color: #A3BE8C; border-color: rgba(163,190,140,.6); background: rgba(163,190,140,.12); }
.veg-sw { background: linear-gradient(90deg, rgb(163,191,120), rgb(41,92,51)); }
.veg-flat { background: rgb(97,148,84); }
.veg-legend .dim { color: var(--n4); }

/* ---------------- hide the findings panel to see more map ---------------- */
.open-right { position: absolute; z-index: 4; right: var(--gutter); top: var(--gutter); display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 9px; border-radius: 10px; color: var(--n6); cursor: pointer; }
.open-right:hover { color: var(--n8); }
body.right-collapsed { --right-w: 110px; }
body.right-collapsed .panel-right { display: none; }
.w3-why summary { cursor: pointer; font-size: 12px; color: var(--n8); }
.w3-swot { display: flex; flex-direction: column; gap: 4px; padding: 7px 9px; border-radius: 8px; background: rgba(94,129,172,.14); border: 1px solid rgba(136,192,208,.25); }
.w3-swot b { color: var(--n6); font-weight: 600; }
.w3-why p { margin: 5px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--n4); }

/* ---------- Story v2: stats, primer, chapter nav, swipe, charts, drivers, closing sections ---------- */
.story-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin-top: 28px; border: 1px solid var(--n3); border-radius: 14px; overflow: hidden; background: var(--n3); }
.stat { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: var(--n0); }
.stat-v { font-family: var(--font-mono); font-size: 26px; font-weight: 600; color: var(--n6); letter-spacing: -.02em; }
.stat-k { font-size: 10.5px; letter-spacing: .1em; color: var(--n4); }
.primer { padding: 72px 0 8px; }
.primer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 28px; }
.primer-card { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 14px; background: var(--n1); border: 1px solid var(--n3); transition: border-color .2s, transform .2s; }
.primer-card:hover { border-color: rgba(136,192,208,.5); transform: translateY(-2px); }
.primer-svg { width: 100%; height: auto; aspect-ratio: 200 / 120; border-radius: 10px; background: var(--n-deep); margin-bottom: 6px; }
.primer-tag { align-self: flex-start; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--n13); border: 1px solid rgba(235,203,139,.4); border-radius: 999px; padding: 3px 9px; }
.primer-card h4 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.primer-card p { font-size: 14px; line-height: 1.55; color: var(--n4); flex: 1; }
.primer-layer { color: var(--n8); letter-spacing: .06em; }
.story-nav { position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; overflow-x: auto; padding: 12px 0; margin-top: 40px; background: linear-gradient(180deg, var(--n0) 75%, rgba(46,52,64,0)); scrollbar-width: none; }
.nav-chip { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--n3); background: var(--n1); color: var(--n6); text-decoration: none; font-size: 13.5px; transition: border-color .2s, background .2s; }
.nav-chip:hover { border-color: var(--ch); background: color-mix(in srgb, var(--ch) 14%, var(--n1)); }
.nav-chip .mono { font-size: 11px; color: var(--n4); }
.nav-chip b { width: 8px; height: 8px; border-radius: 50%; background: var(--ch); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ch) 25%, transparent); }
.chapter { scroll-margin-top: 64px; }
.chapter .rule-head .kind { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ch); border: 1px solid color-mix(in srgb, var(--ch) 55%, transparent); border-radius: 999px; padding: 3px 10px; }
.chapter .rule-head .num { color: var(--ch); font-size: 15px; }
.ch-head { margin-top: 22px; max-width: 860px; }
.chapter .ch-title { font-size: 42px; text-transform: none; margin-top: 8px; }
.ch-why { margin-top: 14px; font-size: 17px; line-height: 1.65; color: var(--n5); }
.chapter article { border-top: 3px solid var(--ch); }
.ch-media { gap: 16px; }
.story-swipe { aspect-ratio: 1 / 1; cursor: ew-resize; }
.story-swipe > svg, .story-swipe .sw-top { position: absolute; inset: 0; }
.story-swipe .sw-top svg { width: 100%; height: 100%; }
.sw-line { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--n8); box-shadow: 0 0 12px rgba(136,192,208,.8); pointer-events: none; }
.sw-range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: ew-resize; }
.sw-range:focus-visible + .lbl { outline: 2px solid var(--n8); }
.story-swipe .lbl-r { left: auto; right: 12px; }
.sw-hint { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); font-size: 10px; letter-spacing: .14em; padding: 4px 10px; border-radius: 999px; background: rgba(46,52,64,.85); border: 1px solid var(--n3); pointer-events: none; }
.story-chart { margin: 0; padding: 12px 14px 6px; border-radius: 12px; background: var(--n0); border: 1px solid var(--n3); }
.story-chart figcaption { margin-bottom: 6px; letter-spacing: .04em; }
.story-chart svg { display: block; }
.ch-radar { padding: 14px 16px; border-radius: 12px; background: color-mix(in srgb, var(--ch) 9%, var(--n0)); border: 1px solid color-mix(in srgb, var(--ch) 35%, transparent); }
.ch-radar p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--n5); }
.peak-2 { padding-left: 18px; border-left: 1px solid var(--n3); }
.peak-2 .mono { margin-top: 4px; font-size: 15px; color: var(--n6); }
.drivers { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 12px; background: var(--n0); border: 1px solid var(--n3); }
.drv-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 2px; background: var(--n2); }
.drv-bar i { display: block; min-width: 3px; }
.drv-bar.empty { opacity: .4; }
.drv-unc { background: repeating-linear-gradient(135deg, #4C566A 0 4px, #3B4252 4px 8px) !important; }
.drv-legend { display: flex; flex-direction: column; gap: 6px; }
.drv-row { display: grid; grid-template-columns: 130px 120px 1fr; gap: 10px; align-items: baseline; font-size: 13px; }
.drv-row.people .drv-k { color: var(--n14); font-weight: 600; }
.drv-k { color: var(--n5); }
.drv-v { color: var(--n6); font-size: 12px; }
.drv-p { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--n4); font-size: 12.5px; }
.drv-p b, .drv-key b { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.ch-list ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.ch-list li { font-size: 14px; line-height: 1.5; color: var(--n4); }
.ch-list.cant li::marker { content: '✕  '; color: var(--n11); }
.ch-next { padding: 14px 16px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--ch) 60%, transparent); }
.ch-next p { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--n5); }
.chapter .fold { border: 1px solid var(--n3); border-radius: 12px; padding: 10px 14px; }
.chapter .fold summary { display: flex; justify-content: space-between; gap: 12px; cursor: pointer; font-size: 13.5px; }
.chapter .fold[open] summary { margin-bottom: 10px; }
.claim a { color: var(--n8); }
.xsec { padding: 80px 0 0; }
.xdrv-rows { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; padding: 22px; border-radius: 16px; background: var(--n1); border: 1px solid var(--n3); }
.xdrv { display: grid; grid-template-columns: 220px 1fr 220px; gap: 16px; align-items: center; }
.xdrv-h { display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; font-weight: 600; }
.xdrv .drv-bar { height: 18px; }
.drv-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; color: var(--n4); }
.drv-key b.drv-unc { width: 14px; }
.limits-grid, .next-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 28px; }
.limit-card { padding: 18px; border-radius: 14px; border: 1px solid rgba(191,97,106,.35); background: rgba(191,97,106,.05); }
.limit-card h4 { font-size: 15.5px; font-weight: 600; }
.limit-card p, .next-card p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--n4); }
.next-card { padding: 18px; border-radius: 14px; background: var(--n1); border: 1px solid var(--n3); border-left: 3px solid var(--ch); }
.next-card .mono { color: var(--ch); letter-spacing: .08em; }
.next-card p { color: var(--n5); }
.sources { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; margin-top: 28px; }
.source { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--n3); color: var(--n6); text-decoration: none; transition: border-color .2s; }
.source:hover { border-color: rgba(136,192,208,.6); }
.source-n { font-weight: 600; font-size: 14.5px; }
.source-r { font-size: 13.5px; color: var(--n4); line-height: 1.5; }
.team p { margin-top: 12px; font-size: 17px; line-height: 1.65; color: var(--n5); max-width: 760px; }
@media (max-width: 760px) {
  .chapter .ch-title { font-size: 28px; }
  .ch-why { font-size: 15.5px; }
  .xdrv { grid-template-columns: 1fr; gap: 6px; }
  .drv-row { grid-template-columns: 1fr 1fr; }
  .drv-row .drv-p { grid-column: 1 / -1; }
  .stat-v { font-size: 20px; }
  .sources { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .primer-card, .primer-card:hover { transition: none; transform: none; } }
.cband { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 12px; background: var(--n0); border: 1px solid var(--n3); }
.cb-lede { font-size: 13.5px; line-height: 1.5; color: var(--n4); }
.cb-row { display: grid; grid-template-columns: minmax(150px, 1.1fr) 1fr 70px; gap: 12px; align-items: center; }
.cb-k { font-size: 13.5px; font-weight: 600; }
.cb-track { height: 12px; border-radius: 6px; background: var(--n2); overflow: hidden; }
.cb-track i { display: block; height: 100%; border-radius: 6px; }
.cb-v { text-align: right; font-size: 13px; }
@media (max-width: 760px) { .cb-row { grid-template-columns: 1fr 60px; } .cb-track { grid-column: 1 / -1; grid-row: 2; } }
/* Check points: NISAR vs Sentinel-2 */
.cpv { display: flex; flex-direction: column; gap: 10px; }
.cpv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cpv-fig { position: relative; margin: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--n3); aspect-ratio: 1 / 1; background: var(--n-deep); }
.cpv-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cpv-fig figcaption { position: absolute; left: 6px; bottom: 6px; font-size: 9.5px; letter-spacing: .06em; padding: 2px 6px; border-radius: 4px; background: rgba(36,41,51,.85); }
.cpv-none { display: flex; align-items: center; justify-content: center; }
.cpv-lines { display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.45; }
.cpv-lines > div { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: baseline; }
.cpv-k { font-size: 10px; letter-spacing: .1em; color: var(--n4); }
.cp-story-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.cp-story { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; border: 1px solid var(--n3); background: var(--n0); }
.cp-story-h { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; }
.cp-story-n { font-size: 14px; font-weight: 600; }
.cp-story .cp-rank { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #B48EAD; color: var(--n0); font-size: 12px; font-weight: 700; }
.cp-story .btn { align-self: flex-start; }
.cp-card .cpv { margin: 8px 0; }
.fire-cmp { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 18px; background: var(--n1); border: 1px solid var(--n3); border-top: 3px solid var(--ch); }
.fire-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fire-fig { position: relative; margin: 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--n3); background: var(--n-deep); }
.fire-fig img { width: 100%; display: block; }
.fire-fig figcaption { position: absolute; left: 8px; top: 8px; font-size: 10px; letter-spacing: .08em; padding: 3px 7px; border-radius: 5px; background: rgba(36,41,51,.88); }
.fire-key { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--n4); }
.fire-key b { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.fire-sev { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 760px) { .fire-figs { grid-template-columns: 1fr; } .fire-cmp { padding: 14px; } }
.cp-story-b { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.cpv-lines > div { grid-template-columns: 76px 1fr; }