:root{
  --bg: #0b101a;
  --panel: #111827;
  --panel-2: #151f32;
  --panel-3: #1b2740;
  --text: #eef2ff;
  --muted: #9fb0ca;
  --line: #24324a;
  --accent: #73b2ff;
  --accent-ink: #0b101a;
  --accent-soft: rgba(115,178,255,.16);
  --accent-border: rgba(115,178,255,.42);
  --viewer-bg: #0b111b;
  --chrome: rgba(8,12,20,.78);
  --chart-grid: rgba(255,255,255,.07);
  --measure: #ffd166;
  --good: #57d39b;
  --warn: #ffb35c;
  --danger: #ff8a7a;
  --shadow: 0 18px 44px rgba(5,10,20,.5);
  --radius: 16px;
}

body[data-theme="light"]{
  --bg: #f4f6fb;
  --panel: #ffffff;
  --panel-2: #eef2f8;
  --panel-3: #e3e9f3;
  --text: #1b2333;
  --muted: #51607a;
  --line: #d6deeb;
  --accent: #3f6ff5;
  --accent-ink: #ffffff;
  --accent-soft: rgba(63,111,245,.12);
  --accent-border: rgba(63,111,245,.38);
  --viewer-bg: #e3e8ef;
  --chrome: rgba(255,255,255,.88);
  --chart-grid: rgba(20,30,50,.08);
  --measure: #d98b00;
  --good: #198754;
  --warn: #b86200;
  --danger: #c2412d;
  --shadow: 0 10px 28px rgba(18,25,38,.12);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  height:100vh;
  height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:13px;
  color:var(--text);
  background:
    radial-gradient(1100px 520px at 12% -12%, rgba(115,178,255,.16), transparent 55%),
    radial-gradient(900px 560px at 96% 8%, rgba(77,211,167,.1), transparent 60%),
    var(--bg);
}
body[data-theme="light"]{
  background:
    radial-gradient(1100px 520px at 10% -12%, rgba(63,111,245,.1), transparent 55%),
    radial-gradient(900px 560px at 96% 8%, rgba(77,211,167,.12), transparent 60%),
    var(--bg);
}

/* The shared header, a little tighter so the tool gets the height. */
.site-header--demo{ margin-bottom:0; flex:none; }
.site-header--demo .site-header__inner{ padding-top:.55rem; padding-bottom:.55rem; }

h1,h2,h3,p{ margin:0; }
button,select,input{ font:inherit; color:inherit; }
output{ font-variant-numeric: tabular-nums; }
.hint,.helper{ font-size:11.5px; color:var(--muted); line-height:1.4; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* ── App frame ─────────────────────────────────────────────────────────── */
.app{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:10px 14px 12px;
}
.app-bar{ flex:none; display:flex; align-items:center; gap:16px; min-width:0; }
.app-bar__title{ min-width:0; flex:0 1 auto; }
.app-bar__title h1{ font-size:18px; line-height:1.2; letter-spacing:.01em; white-space:nowrap; }
.app-bar__title p{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-bar__stats{ display:flex; gap:6px; margin:0 0 0 auto; min-width:0; }
.stat{ padding:4px 10px; border-radius:10px; border:1px solid var(--line); background:var(--panel); min-width:0; }
.stat dt{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.stat dd{ margin:0; font-weight:600; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px; font-variant-numeric:tabular-nums; }
.app-bar__actions{ display:flex; align-items:center; gap:10px; flex:none; }

/* ── Buttons & controls ────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border-radius:999px; border:1px solid var(--accent-border); background:transparent;
  padding:6px 13px; font-size:12px; line-height:1.2; cursor:pointer; white-space:nowrap;
  transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn:hover{ background:var(--accent-soft); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn:disabled:hover{ background:transparent; }
.btn--small{ padding:3px 10px; font-size:11.5px; }
.btn--icon{ width:28px; height:28px; padding:0; font-size:16px; flex:none; }
.btn--accent{ background:var(--accent); border-color:transparent; color:var(--accent-ink); font-weight:600; }

.switch{ display:inline-flex; align-items:center; gap:7px; font-size:12px; cursor:pointer; white-space:nowrap; }
.switch input{ width:15px; height:15px; margin:0; accent-color:var(--accent); }

.control{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.control__label{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:12px; }
.control__label output{ color:var(--muted); }
.control select, .field{
  width:100%; min-width:0; padding:5px 8px; border-radius:9px; border:1px solid var(--line); background:var(--panel);
}
.control--inline{ display:grid; grid-template-columns:70px minmax(0,1fr); align-items:center; gap:8px; }
.control--inline[hidden]{ display:none; }
.control[hidden]{ display:none; }
.control input[type="range"]{ width:100%; margin:0; accent-color:var(--accent); }
.row{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.row--split{ display:grid; grid-template-columns:1fr 1fr; }

.segmented{ display:flex; gap:3px; padding:3px; border-radius:10px; background:var(--panel); border:1px solid var(--line); }
.segmented button{
  flex:1 1 0; min-width:0; border:none; border-radius:7px; background:transparent; padding:5px 6px;
  font-size:11.5px; color:var(--muted); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.segmented button:hover{ color:var(--text); }
.segmented button[aria-checked="true"]{ background:var(--accent-soft); color:var(--text); font-weight:600; box-shadow:inset 0 0 0 1px var(--accent-border); }

/* ── Workspace ─────────────────────────────────────────────────────────── */
.workspace{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:clamp(256px, 20vw, 340px) minmax(0, 1fr) clamp(240px, 21vw, 380px);
  gap:12px;
}
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); min-width:0; }

.sidebar{ display:flex; flex-direction:column; gap:10px; padding:10px; min-height:0; }
.tabs{ flex:none; display:grid; grid-template-columns:repeat(3, 1fr); gap:3px; padding:3px; border-radius:11px; background:var(--panel-2); }
.tab{ border:none; border-radius:8px; background:transparent; padding:6px 4px; font-size:12px; color:var(--muted); cursor:pointer; }
.tab:hover{ color:var(--text); }
.tab[aria-selected="true"]{ background:var(--panel); color:var(--text); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.25); }
.tab-panel{ flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
.tab-panel[hidden]{ display:none; }
.group{ display:flex; flex-direction:column; gap:8px; padding:9px 10px 10px; border-radius:12px; border:1px solid var(--line); background:var(--panel-2); }
.group[hidden]{ display:none; }
.group__title{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }

/* Survey library */
.library{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px 7px; }
.tile{ display:flex; flex-direction:column; gap:3px; padding:0; border:none; background:none; text-align:left; cursor:pointer; min-width:0; }
.tile img{
  display:block; width:100%; height:auto; aspect-ratio:2 / 1; object-fit:cover; border-radius:8px;
  border:2px solid transparent; background:var(--panel-3); transition:border-color .15s ease;
}
.tile:hover img{ border-color:var(--accent-border); }
.tile[aria-current="true"] img{ border-color:var(--accent); }
.tile span{ font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tile[aria-current="true"] span{ color:var(--text); font-weight:600; }

.story{ display:flex; flex-direction:column; gap:3px; padding:9px 11px 10px; border-radius:12px; border:1px solid var(--line); background:var(--panel-2); }
.story__tag{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.story__title{ font-size:14px; }
.story__text{ font-size:12px; line-height:1.45; color:var(--muted); display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }

.tour{ display:flex; flex-direction:column; gap:6px; }
.tour__head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tour__head h3{ font-size:12px; font-weight:600; }
.tour__nav{ display:flex; gap:4px; }
.poi-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.poi{
  width:100%; display:grid; grid-template-columns:22px minmax(0,1fr) auto; align-items:center; gap:8px;
  padding:5px 8px; border-radius:9px; border:1px solid transparent; background:var(--panel-2);
  cursor:pointer; text-align:left; font-size:12px;
}
.poi:hover{ border-color:var(--accent-border); }
.poi[aria-current="true"]{ border-color:var(--accent); background:var(--accent-soft); }
.poi__num{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:11px; background:var(--measure); color:#1b1405; }
.poi__title{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.poi__tag{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }

.facts{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:3px 10px; margin:0; font-size:12px; }
.facts dt{ color:var(--muted); white-space:nowrap; }
.facts dd{ margin:0; text-align:right; font-variant-numeric:tabular-nums; min-width:0; overflow-wrap:anywhere; }
.facts--plan dd{ font-weight:600; }
.warn{ color:var(--warn); }
.good{ color:var(--good); }

.acc{ width:100%; border-collapse:collapse; font-size:11.5px; font-variant-numeric:tabular-nums; }
.acc th,.acc td{ padding:3px 4px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap; }
.acc th:first-child,.acc td:first-child{ text-align:left; }
.acc thead th{ color:var(--muted); font-weight:500; font-size:10.5px; }
.acc tfoot td{ font-weight:600; border-bottom:none; }
.acc .acc__gcp{ color:var(--muted); }

/* ── Stage: 3D view over the chart drawer ──────────────────────────────── */
.stage{ display:flex; flex-direction:column; gap:12px; min-height:0; min-width:0; }
.viewer-card{ flex:1 1 auto; min-height:0; overflow:hidden; position:relative; }
.viewer{ position:absolute; inset:0; background:var(--viewer-bg); overflow:hidden; touch-action:none; outline:none; }
.viewer.is-picking{ cursor:crosshair; }
.viewer__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.viewer:focus-visible{ box-shadow:inset 0 0 0 2px var(--accent); }

.toolbar{
  position:absolute; top:10px; left:10px; display:flex; gap:3px; padding:3px; border-radius:12px;
  background:var(--chrome); border:1px solid var(--line); backdrop-filter:blur(6px); z-index:3;
}
.tool{
  display:inline-flex; align-items:center; gap:5px; border:none; border-radius:9px; background:transparent;
  padding:5px 9px 5px 7px; font-size:12px; color:var(--muted); cursor:pointer; white-space:nowrap;
}
.tool[hidden]{ display:none; }
.tool svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.tool:hover{ color:var(--text); background:var(--accent-soft); }
.tool[aria-pressed="true"]{ background:var(--accent); color:var(--accent-ink); font-weight:600; }
.tool--clear{ margin-left:3px; box-shadow:-4px 0 0 -3px var(--line); }

.compass{
  position:absolute; top:10px; right:10px; width:46px; height:46px; padding:0; border-radius:50%;
  border:1px solid var(--line); background:var(--chrome); cursor:pointer; backdrop-filter:blur(6px); z-index:3;
}
.compass svg{ width:100%; height:100%; display:block; }
.compass__ring{ fill:none; stroke:var(--line); stroke-width:1.5; }
.compass__north{ fill:#ff6b5b; }
.compass__south{ fill:var(--muted); opacity:.6; }
.compass text{ font-size:9px; font-weight:700; fill:#fff; }
#compassNeedle{ transform-origin:24px 24px; transition:transform .08s linear; }

.readout{
  position:absolute; left:10px; bottom:40px; max-width:calc(100% - 20px); padding:5px 10px; border-radius:9px;
  background:var(--chrome); border:1px solid var(--line); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  pointer-events:none; backdrop-filter:blur(6px); font-variant-numeric:tabular-nums; z-index:2;
}
.readout[hidden]{ display:none; }
.readout b{ font-weight:600; }
.readout .sep{ color:var(--muted); padding:0 5px; }

.scalebar{ position:absolute; left:12px; bottom:12px; display:flex; align-items:center; gap:7px; font-size:11px; pointer-events:none; z-index:2; }
.scalebar i{ display:block; height:7px; border:2px solid var(--text); border-top:none; width:60px; filter:drop-shadow(0 0 2px var(--viewer-bg)); }
.scalebar span{ text-shadow:0 0 3px var(--viewer-bg), 0 0 3px var(--viewer-bg); font-variant-numeric:tabular-nums; }

.legend{
  position:absolute; right:10px; bottom:10px; min-width:150px; max-width:220px; padding:7px 10px 8px; border-radius:10px;
  background:var(--chrome); border:1px solid var(--line); font-size:11px; backdrop-filter:blur(6px); z-index:2;
}
.legend:empty{ display:none; }
.legend__title{ font-weight:600; margin-bottom:4px; }
.legend__bar{ height:9px; border-radius:3px; }
.legend__ticks{ display:flex; justify-content:space-between; color:var(--muted); margin-top:2px; font-variant-numeric:tabular-nums; }
.legend__items{ display:grid; grid-template-columns:1fr 1fr; gap:2px 8px; }
.legend__item{ display:flex; align-items:center; gap:5px; white-space:nowrap; }
.legend__item i{ width:10px; height:10px; border-radius:3px; flex:none; }
.legend__note{ color:var(--muted); margin-top:3px; }

.hint-bar{
  position:absolute; left:50%; top:56px; transform:translateX(-50%); max-width:calc(100% - 140px);
  padding:5px 12px; border-radius:999px; background:var(--chrome); border:1px solid var(--line); font-size:11.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; pointer-events:none; backdrop-filter:blur(6px); z-index:2;
}
.hint-bar:empty{ display:none; }
.viewer__status{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); padding:8px 14px; border-radius:999px;
  background:var(--chrome); border:1px solid var(--line); font-size:12.5px; z-index:4;
}
.viewer__status:empty{ display:none; }
.viewer__status.is-error{ border-color:var(--danger); }

.swipe{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.swipe[hidden]{ display:none; }
.swipe__line{ position:absolute; top:0; bottom:0; left:var(--split, 50%); width:2px; margin-left:-1px; background:#fff; box-shadow:0 0 6px rgba(0,0,0,.6); }
.swipe__handle{
  position:absolute; top:50%; left:var(--split, 50%); width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
  border:2px solid #fff; background:rgba(10,15,25,.75); color:#fff; font-size:15px; cursor:ew-resize; pointer-events:auto; touch-action:none;
}
.swipe__label{
  position:absolute; top:56px; padding:3px 9px; border-radius:999px; background:var(--chrome); border:1px solid var(--line); font-size:11.5px; font-weight:600;
}
.swipe__label--left{ right:calc(100% - var(--split, 50%) + 10px); }
.swipe__label--right{ left:calc(var(--split, 50%) + 10px); }

/* Labels and pins placed over the 3D view. */
.viewer__labels{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1; }
.tag,.pin{ position:absolute; left:0; top:0; will-change:transform; transition:opacity .15s ease; }
.tag{
  margin:-26px 0 0 8px; padding:2px 7px; border-radius:6px; font-size:11.5px; font-weight:600; white-space:nowrap;
  background:rgba(12,16,24,.82); color:#fff; border:1px solid rgba(255,209,102,.6); font-variant-numeric:tabular-nums;
}
.tag--tree{ border-color:rgba(255,224,102,.5); font-weight:500; }
.pin{
  width:24px; height:24px; margin:-12px 0 0 -12px; border-radius:50%; border:2px solid #fff; padding:0;
  display:grid; place-items:center; font-size:11px; font-weight:800; cursor:pointer; pointer-events:auto;
  box-shadow:0 2px 8px rgba(0,0,0,.45);
}
.pin--poi{ background:var(--measure); color:#1b1405; }
.pin--poi.is-active{ transform-origin:center; outline:3px solid rgba(255,209,102,.45); }
.pin--gcp,.pin--check{ width:auto; height:20px; margin:-10px 0 0 -10px; padding:0 6px; border-radius:6px; font-size:10px; font-weight:700; }
.pin--gcp{ background:#ff6b5b; color:#fff; }
.pin--check{ background:#2ec4b6; color:#06231f; }
.tag.is-hidden,.pin.is-hidden{ opacity:.35; }

/* Chart drawer */
.drawer{ flex:none; height:clamp(150px, 26vh, 230px); display:flex; flex-direction:column; padding:8px 12px 6px; }
.drawer[hidden]{ display:none; }
.drawer__head{ flex:none; display:flex; align-items:center; gap:10px; min-height:26px; min-width:0; }
.drawer__head h2{ font-size:13px; white-space:nowrap; }
.drawer__head .hint{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chart{ flex:1; min-height:0; position:relative; }
.chart canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.chart-tooltip{
  position:absolute; pointer-events:none; padding:6px 9px; border-radius:9px; background:var(--panel-2); border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(0,0,0,.25); font-size:12px; white-space:nowrap; opacity:0; transform:translate(-50%, calc(-100% - 10px));
  transition:opacity .12s ease; z-index:2;
}
.chart-tooltip.is-visible{ opacity:1; }
.chart-tooltip strong{ font-size:12.5px; font-variant-numeric:tabular-nums; }
.tip-row{ display:flex; align-items:center; gap:6px; }
.tip-key{ width:12px; height:3px; border-radius:2px; }
.tip-sub{ color:var(--muted); font-size:11px; }

/* ── Insights column ───────────────────────────────────────────────────── */
.insights{ display:flex; flex-direction:column; gap:10px; padding:10px; min-height:0; }
.map-card{ flex:0 0 clamp(150px, 30%, 250px); display:flex; flex-direction:column; gap:6px; min-height:0; }
.map-card__head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.map-card__head h2{ font-size:13px; }
.mini-map{ flex:1; min-height:0; border-radius:10px; border:1px solid var(--line); background:var(--panel-3); overflow:hidden; }
.leaflet-container{ font:inherit; background:var(--panel-3); }
body[data-theme="dark"] .leaflet-tile-pane{ filter:brightness(.78) contrast(1.05) saturate(.85); }
.leaflet-control-attribution{ font-size:9px; }
.map-poi{ width:18px !important; height:18px !important; margin:-9px 0 0 -9px !important; border-radius:50%; background:var(--measure); color:#1b1405; border:1.5px solid #fff; display:grid; place-items:center; font-size:10px; font-weight:800; }

.results{ flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:6px; padding:2px 2px 4px; }
.results__tag{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.results__tag:empty{ display:none; }
.results__title{ font-size:14px; }
.results__text{ font-size:12px; line-height:1.45; color:var(--muted); }
.results__text:empty{ display:none; }
.results__body{ display:flex; flex-direction:column; gap:8px; }
.metrics{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:0; }
.metric{ padding:6px 9px; border-radius:10px; border:1px solid var(--line); background:var(--panel-2); min-width:0; }
.metric dt{ font-size:10.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.metric dd{ margin:1px 0 0; font-size:15px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.metric--wide{ grid-column:1 / -1; }
.metric--cut dd{ color:#f0884f; }
.metric--fill dd{ color:#4f9cf0; }
.truth{
  display:flex; flex-direction:column; gap:2px; padding:7px 10px; border-radius:10px; font-size:12px;
  border:1px dashed var(--accent-border); background:var(--accent-soft);
}
.truth b{ font-variant-numeric:tabular-nums; }
.truth .hint{ font-size:11px; }
.compare{ width:100%; border-collapse:collapse; font-size:12px; font-variant-numeric:tabular-nums; }
.compare td{ padding:3px 2px; border-bottom:1px solid var(--line); }
.compare td:last-child{ text-align:right; }
.compare tr.is-current td{ font-weight:600; color:var(--text); }
.compare tr:not(.is-current) td{ color:var(--muted); }
.empty-note{ font-size:12px; color:var(--muted); line-height:1.5; }
.empty-note kbd{ font:inherit; padding:0 4px; border-radius:4px; border:1px solid var(--line); background:var(--panel-2); }

/* Export menu */
.menu{ position:relative; }
.menu__list{
  position:absolute; right:0; top:calc(100% + 6px); z-index:20; min-width:220px; display:flex; flex-direction:column; padding:5px;
  border-radius:12px; background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow);
}
.menu__list[hidden]{ display:none; }
.menu__item{ border:none; background:none; padding:7px 10px; border-radius:8px; text-align:left; font-size:12.5px; cursor:pointer; }
.menu__item:hover,.menu__item:focus-visible{ background:var(--accent-soft); outline:none; }
.menu__item:disabled{ opacity:.45; cursor:not-allowed; background:none; }

/* ── Smaller laptops ───────────────────────────────────────────────────── */
@media (max-width: 1600px){
  .app-bar__title p{ display:none; }
  .stat:nth-child(5){ display:none; }
}
@media (max-width: 1440px){
  .tool span{ display:none; }
  .tool{ padding:5px 7px; }
}
@media (max-width: 1280px){
  .stat dd{ max-width:130px; }
}
@media (max-width: 1100px){
  .workspace{ grid-template-columns:240px minmax(0,1fr) 232px; gap:10px; }
  .stat:nth-child(4){ display:none; }
}
@media (max-height: 820px) and (min-width: 981px){
  .story__text{ -webkit-line-clamp:3; }
  .poi{ padding:4px 8px; }
  .library{ gap:6px 7px; }
}
@media (max-height: 700px) and (min-width: 981px){
  .story__text{ -webkit-line-clamp:2; }
  .drawer{ height:clamp(140px, 25vh, 230px); }
}
/* Short windows: tighten the chrome so the panels still fit unscrolled. */
@media (max-height: 660px) and (min-width: 981px){
  .site-header--demo .site-header__inner{ padding-top:.35rem; padding-bottom:.35rem; }
  .app{ gap:8px; padding-top:7px; padding-bottom:9px; }
  .workspace{ gap:10px; }
  .stage{ gap:10px; }
  .sidebar{ padding:8px; gap:8px; }
  .tab-panel{ gap:8px; }
  .group{ gap:6px; padding:8px 10px; }
  .story__text{ -webkit-line-clamp:2; }
  .tile span{ display:none; }
  .insights{ padding:8px; gap:8px; }
}

/* ── Tablets and phones: stack and let the page scroll ─────────────────── */
@media (max-width: 980px){
  html,body{ height:auto; }
  body{ height:auto; min-height:100vh; overflow:auto; }
  .app{ flex:none; }
  .app-bar{ flex-wrap:wrap; }
  .app-bar__stats{ order:3; width:100%; margin:0; flex-wrap:wrap; }
  .stat{ flex:1 1 120px; }
  .stat:nth-child(4),.stat:nth-child(5){ display:block; }
  .stat dd{ max-width:none; }
  .app-bar__actions{ margin-left:auto; }
  .workspace{ grid-template-columns:1fr; }
  .stage{ order:1; }
  .sidebar{ order:2; }
  .insights{ order:3; }
  .viewer-card{ flex:none; height:min(62vh, 560px); }
  .drawer{ height:220px; }
  .tab-panel{ overflow:visible; }
  .map-card{ flex:none; height:240px; }
  .results{ overflow:visible; }
  .library{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .library{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .app{ padding:8px 10px 12px; }
  .hint-bar{ top:auto; bottom:44px; max-width:calc(100% - 20px); }
  .legend{ display:none; }
}