/* =========================================================================
   Larnaca coast - Patsias Developments
   Brand from the company profile: Montserrat, navy #103050, brand blue
   #1848a0, light blue #5080c8, sand #b8a898. Rendered as a dark control-room
   treatment so the map is the light source and the chrome recedes.
   The palette here is the pre-load fallback; app.js syncs the live values
   from map-style.json into these same custom properties.
   ========================================================================= */

@font-face {
  font-family: 'Montserrat';
  src: url('../assets/fonts/montserrat-variable.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
/* Montserrat has no Greek letters: Greek text falls through to Commissioner (SIL Open Font
   License, Google Fonts greek subset, 15 KB), a geometric sans close to it in width and weight. */
@font-face {
  font-family: 'Commissioner Greek';
  src: url('../assets/fonts/commissioner-greek.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* ---------- LIGHT (default) ----------
   The app opens light over satellite imagery, so surfaces are near-opaque
   white: translucent panels over aerial photography are unreadable. */
:root {
  --primary: #1848a0;
  --primary-deep: #103050;
  --accent: #1848a0;
  --accent-bright: #1848a0;
  /* The profile's sand is a rule-and-caption colour on paper; on white UI it
     needs darkening to clear 4.5:1 for the small uppercase labels. */
  --sand: #75634f;
  --sand-light: #e0d8c8;

  --ink: #0e2139;
  --ink-dim: #3d5573;
  --ink-mute: #63799a;

  --surface: rgba(255, 255, 255, 0.93);
  --surface-solid: #ffffff;
  --surface-strong: rgba(255, 255, 255, 0.96);
  --fill-soft: rgba(16, 48, 80, 0.045);
  --fill-inset: rgba(16, 48, 80, 0.06);
  --line: rgba(16, 48, 80, 0.13);
  --line-strong: rgba(16, 48, 80, 0.24);

  /* The one colour reserved for things you can press. Nothing decorative
     may use it - that is what makes it mean "clickable". */
  --interactive: #1848a0;
  --interactive-strong: #123a80;
  --interactive-tint: rgba(24, 72, 160, 0.09);
  --interactive-tint-strong: rgba(24, 72, 160, 0.16);
  --on-interactive: #ffffff;

  --shadow: 0 14px 40px rgba(16, 40, 70, 0.18);
  --shadow-sm: 0 4px 14px rgba(16, 40, 70, 0.16);
  --vignette: rgba(20, 40, 65, 0.12);
  /* Aerial haze toward the top of a pitched frame. The RGB is the theme's
     horizon; js/app.js sets --haze-a from the camera pitch, so a top-down
     view has none of it and a raked one fades the far distance out. */
  --haze-rgb: 206 228 241;
  --haze-a: 0;
  --topbar-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.86));
  --modal-bar-bg: linear-gradient(180deg, #ffffff, #f3f6fa);
  --loading-bg: radial-gradient(120% 90% at 50% 40%, #e8eef6, #ffffff 70%);
  --page-bg: #e9eef4;

  --radius: 14px;
  --radius-sm: 10px;
  --blur: saturate(150%) blur(18px);
  --topbar-h: 58px;
  --panel-w: 344px;
}

/* ---------- DARK ---------- */
:root[data-theme="dark"] {
  --accent: #5080c8;
  --accent-bright: #63a4ff;
  --sand: #b8a898;

  --ink: #eaf1fa;
  --ink-dim: #a8bdd6;
  --ink-mute: #7590b1;

  --surface: rgba(9, 27, 48, 0.86);
  --surface-solid: #0a1d33;
  --surface-strong: rgba(6, 20, 36, 0.9);
  --fill-soft: rgba(255, 255, 255, 0.05);
  --fill-inset: rgba(4, 14, 26, 0.5);
  --line: rgba(120, 165, 220, 0.16);
  --line-strong: rgba(120, 165, 220, 0.3);

  --interactive: #63a4ff;
  --interactive-strong: #8bbcff;
  --interactive-tint: rgba(99, 164, 255, 0.14);
  --interactive-tint-strong: rgba(99, 164, 255, 0.24);
  --on-interactive: #06182c;

  --shadow: 0 18px 48px rgba(2, 10, 20, 0.55);
  --shadow-sm: 0 6px 18px rgba(2, 10, 20, 0.4);
  --vignette: rgba(4, 14, 26, 0.55);
  --haze-rgb: 26 58 92;
  --topbar-bg: linear-gradient(180deg, rgba(6, 18, 32, 0.94), rgba(6, 18, 32, 0.72));
  --modal-bar-bg: linear-gradient(180deg, #0d2744, #0a1d33);
  --loading-bg: radial-gradient(120% 90% at 50% 40%, #10365e, #050f1c 70%);
  --page-bg: #061525;
}

/* Every control shares one hover/press language, so "pressable" is learned
   once and then recognised everywhere. */
button, select, a, [role="button"] { cursor: pointer; }
.tb-icon, .rail-btn, .md-eye, .seg-btn, .chip-time, .cat-chip,
.proj-open, .proj-main, .time-row, .drive-row, .kpi-cta,
.panel-foot button, .route-actions button, .tb-tab { color: var(--ink); }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
html { overscroll-behavior: none; }
body {
  font-family: 'Montserrat', 'Commissioner Greek', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
}
button, select, input { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; border-radius: 6px; }

#map { position: absolute; inset: 0; }
/* Two screen-space layers, the cheapest possible atmosphere: haze over the far
   distance whenever the camera is raked over, then a cool vignette that pins the
   eye to the coast and hides the tile edge. Both sit between the eye and the
   whole scene, land and sea alike - which is why the haze lives here and not in
   the sea shader, where it printed the sea polygon's own boundary. */
#map::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, transparent 42%, rgb(var(--haze-rgb) / var(--haze-a)) 100%),
    radial-gradient(120% 90% at 55% 45%, transparent 45%, var(--vignette) 100%);
}

.glass {
  background: var(--surface);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--line);
}

/* ============================ top bar ============================ */
#topbar {
  position: absolute; top: 0; left: 0; right: 0; height: var(--topbar-h);
  z-index: 60;
  /* Grid, not flex: with `flex: 1 1 0` the side groups shrank below their
     content and spilled leftward ACROSS the centre tabs, so a tap landed on
     the basemap segment instead of the tab under the finger. A grid track
     cannot be overrun by its neighbour. */
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr); /* the right group never shrinks under its content, so it cannot spill over the tabs; the breadcrumb gives way instead */
  align-items: center; gap: 12px; padding: 0 14px 0 12px;
  background: var(--topbar-bg);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--line);
}
.tb-left, .tb-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tb-right { justify-content: flex-end; }

.tb-icon {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border-radius: 9px; border: 1px solid transparent;
  background: var(--fill-soft); color: var(--ink-dim);
  cursor: pointer; transition: color .15s, background .15s, border-color .15s;
}
.tb-icon:hover { color: var(--ink); background: rgba(99, 164, 255, 0.14); border-color: var(--line-strong); }

.tb-crumbs {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--ink); min-width: 0;
  white-space: nowrap; overflow: hidden;
}
.tb-crumbs svg { color: var(--accent); flex: none; }
.crumb-dim { color: var(--ink-mute); }
.crumb-sep { color: rgba(120, 165, 220, 0.35); }

.tb-tabs { display: flex; align-items: center; gap: 4px; flex: none; }
.tb-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid transparent; background: none;
  color: var(--ink-mute); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: color .15s, background .15s, border-color .15s;
}
.tb-tab svg { opacity: .8; }
.tb-tab:hover { color: var(--ink); }
.tb-tab.is-active {
  color: #fff; background: var(--primary);
  border-color: rgba(99, 164, 255, 0.5);
  box-shadow: 0 4px 14px rgba(24, 72, 160, 0.5);
}
.tb-tab.is-active svg { opacity: 1; }

.tb-brand {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--ink);
  padding: 4px 4px 4px 10px; border-left: 1px solid var(--line); margin-left: 4px;
}
.tb-brand img { display: block; height: 28px; width: auto; }
.tb-brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.tb-brand-text b { font-size: 13px; font-weight: 700; letter-spacing: .13em; }
.tb-brand-text i {
  font-style: normal; font-size: 8.5px; font-weight: 500;
  letter-spacing: .215em; color: var(--sand);
}

/* ============================ left panel ============================ */
#panel {
  position: absolute; z-index: 40;
  top: calc(var(--topbar-h) + 14px); left: 14px; bottom: 14px;
  width: var(--panel-w); max-width: calc(100vw - 28px);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.panel-head { padding: 16px 18px 14px; border-bottom: 1px solid var(--line); }
#panel-title { margin: 2px 0 12px; font-size: 21px; font-weight: 600; letter-spacing: -.01em; }

.seg--sm .seg-btn { padding: 5px 12px; font-size: 11.5px; }
.seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--fill-inset); border: 1px solid var(--line); border-radius: 999px;
}
.seg-btn {
  border: 0; background: none; cursor: pointer;
  padding: 6px 15px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--ink-mute);
  transition: color .15s, background .15s;
}
.seg-btn:hover { color: var(--ink); }
.seg-btn.is-active { background: var(--primary); color: #fff; }

.panel-context {
  display: flex; align-items: center; gap: 7px;
  margin: 12px 0 0; font-size: 11.5px; color: var(--ink-mute);
}
.panel-context svg { color: var(--accent); flex: none; }

.panel-kpi { padding: 14px 18px 16px; border-bottom: 1px solid var(--line); }
.kpi-label { display: block; font-size: 11px; color: var(--ink-mute); }
.kpi-value {
  display: block; font-size: 44px; font-weight: 700; line-height: 1.05;
  letter-spacing: -.02em; color: var(--ink); margin: 2px 0 3px;
  font-variant-numeric: tabular-nums;
}
.kpi-sub { display: block; font-size: 11.5px; color: var(--ink-dim); }
.kpi-cta {
  margin-top: 13px; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 11px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(99, 164, 255, 0.45);
  background: linear-gradient(180deg, rgba(24, 72, 160, 0.9), rgba(16, 48, 80, 0.9));
  color: #fff; font-size: 13px; font-weight: 600;
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
.kpi-cta:hover { border-color: var(--accent-bright); box-shadow: 0 8px 22px rgba(24, 72, 160, 0.45); }
.kpi-cta:active { transform: translateY(1px); }
.cta-plus {
  width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center; font-size: 15px; font-weight: 600;
  background: rgba(255, 255, 255, 0.16);
}

.panel-sec { padding: 14px 18px; }
.panel-sec[hidden] { display: none; }
.panel-sec--grow { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.panel-sec h2 {
  margin: 0 0 10px; font-size: 10px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute);
}
.sec-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-mute); }

/* scroll affordance so a clipped list does not look like the end of the list */
.panel-sec--grow { position: relative; }
.panel-foot { position: relative; }
.panel-foot::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 32px;
  pointer-events: none; opacity: 0; transition: opacity .2s;
  background: linear-gradient(180deg, transparent, var(--surface));
}
#panel.has-overflow .panel-foot::before { opacity: 1; }

/* ---- project cards ---- */
#project-list, #drive-list { list-style: none; margin: 0; padding: 0; }
#project-list li, #drive-list li { margin-bottom: 8px; }
.proj-item {
  border-radius: var(--radius-sm); padding: 10px 11px 11px;
  background: var(--fill-soft);
  border: 1px solid var(--line);
  transition: border-color .15s, background .15s;
}
.proj-item:hover { border-color: var(--line-strong); background: rgba(99, 164, 255, 0.08); }
.proj-top { display: flex; align-items: center; gap: 9px; }
.proj-main {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  border: 0; background: none; cursor: pointer; padding: 2px 0;
  color: var(--ink); text-align: left;
}
.proj-dot {
  width: 11px; height: 11px; border-radius: 3px; flex: none;
  background: linear-gradient(135deg, var(--accent-bright), var(--primary));
  box-shadow: 0 0 10px rgba(99, 164, 255, 0.7);
}
.proj-name { font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.proj-open {
  flex: none; border: 1px solid rgba(99, 164, 255, 0.4); cursor: pointer;
  background: var(--primary); color: #fff;
  border-radius: 8px; padding: 6px 12px; font-size: 11.5px; font-weight: 600;
  transition: background .15s, border-color .15s;
}
.proj-open:hover { background: var(--primary); border-color: var(--accent-bright); }

.proj-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.chip-time {
  border: 1px solid var(--interactive-tint-strong); background: var(--fill-inset);
  border-radius: 999px; padding: 5px 10px; cursor: pointer;
  font-size: 11px; color: var(--ink-dim); line-height: 1.4;
  transition: border-color .12s, color .12s, background .12s;
}
.chip-time b { color: var(--interactive-strong); font-weight: 700; font-variant-numeric: tabular-nums; }
.chip-time:hover { border-color: var(--interactive); color: var(--interactive-strong); background: var(--interactive-tint); }
.chip-time--all {
  border-color: rgba(99, 164, 255, 0.45); color: var(--accent-bright); font-weight: 600;
}
.chip-time--all:hover { background: var(--primary); color: #fff; border-color: var(--accent-bright); }

/* ---- drive rows ---- */
.drive-row {
  width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 12px; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--fill-soft); border: 1px solid var(--interactive-tint-strong);
  color: var(--ink); text-align: left;
  transition: border-color .15s, background .15s;
}
.drive-row:hover { border-color: var(--accent); background: rgba(80, 128, 200, 0.14); }
.drive-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; }
.drive-go {
  flex: none; font-size: 11px; font-weight: 600; color: var(--accent-bright);
  border: 1px solid rgba(99, 164, 255, 0.4); border-radius: 999px; padding: 4px 10px;
}

/* ---- my places ---- */
.sec-gap { margin-top: 18px !important; }
.add-place {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 8px; padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px dashed var(--interactive-tint-strong); background: var(--interactive-tint);
  color: var(--interactive); font-size: 12.5px; font-weight: 600;
  transition: border-color .15s, background .15s;
}
.add-place:hover { border-color: var(--interactive); background: var(--interactive-tint-strong); }
#myplaces-list { list-style: none; margin: 0; padding: 0; }
.myplace-row {
  display: flex; align-items: center; gap: 9px; margin-bottom: 6px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--fill-soft); padding: 7px 9px;
}
.myplace-icon { color: var(--sand); display: grid; place-items: center; flex: none; }
.myplace-go {
  flex: 1; min-width: 0; text-align: left; border: 0; background: none; cursor: pointer;
  color: var(--interactive); font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.myplace-go:hover { text-decoration: underline; text-underline-offset: 3px; }
.myplace-remove {
  flex: none; width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: none; color: var(--ink-mute); font-size: 15px;
}
.myplace-remove:hover { color: #d05a5a; border-color: #d05a5a; }
.poi--mine .poi-icon { border-style: dashed; border-color: var(--sand); color: var(--sand); }
.poi-pop--mine .myplace-remove { width: auto; height: auto; padding: 7px 12px; font-size: 12px; font-weight: 600; }

#place-banner {
  position: fixed; top: calc(var(--topbar-h) + 14px); left: 50%; transform: translateX(-50%);
  z-index: 90; padding: 10px 20px; border-radius: 999px;
  background: var(--primary); color: #fff; font-size: 13px; font-weight: 600;
  border: 1px solid rgba(150, 200, 255, 0.45); box-shadow: var(--shadow);
}
#place-banner[hidden] { display: none; }
#place-form {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center; padding: 20px;
  background: color-mix(in srgb, var(--page-bg) 65%, transparent);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}
#place-form[hidden] { display: none; }
.place-card {
  width: min(380px, 100%); border-radius: var(--radius); padding: 18px 20px 20px;
  background: var(--surface-solid); border: 1px solid var(--line-strong); box-shadow: var(--shadow);
  display: grid; gap: 12px;
}
.place-card h2 { margin: 0; font-size: 16px; font-weight: 600; }
#place-name {
  font: inherit; font-size: 16px; padding: 10px 12px; width: 100%;
  border: 1px solid var(--line-strong); border-radius: 9px;
  background: var(--fill-inset); color: var(--ink);
}
#place-name:focus { border-color: var(--interactive); outline: none; }
.place-icons-label { margin: 0; font-size: 11px; color: var(--ink-mute); }
#place-icons { display: flex; flex-wrap: wrap; gap: 7px; }
.place-icon {
  width: 42px; height: 42px; border-radius: 10px; cursor: pointer;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--fill-soft); color: var(--ink-dim);
}
.place-icon:hover { border-color: var(--interactive); color: var(--interactive); }
.place-icon.is-picked { border-color: var(--interactive); background: var(--interactive-tint-strong); color: var(--interactive); }
.place-actions { display: flex; gap: 8px; justify-content: flex-end; }
.place-actions button {
  font: inherit; font-size: 13px; font-weight: 600; padding: 9px 16px;
  border-radius: 9px; cursor: pointer; border: 1px solid var(--line);
  background: var(--fill-soft); color: var(--interactive);
}
#place-save { background: var(--primary); color: #fff; border-color: transparent; }
#place-save:hover { background: var(--interactive-strong); }

/* ---- category chips ---- */
#cat-toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-chip {
  border: 1px solid var(--line); background: var(--fill-soft);
  border-radius: 999px; padding: 6px 12px 6px 9px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--ink-dim);
  transition: opacity .15s, border-color .15s, color .15s;
}
.cat-chip .cat-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c, #888); box-shadow: 0 0 8px var(--c, #888);
}
.cat-chip.off { opacity: .4; }
.cat-chip.off .cat-dot { box-shadow: none; }
.cat-chip:hover { border-color: var(--c, var(--accent)); color: var(--ink); }

.panel-foot { margin-top: auto; padding: 12px 18px 14px; border-top: 1px solid var(--line); display: grid; gap: 7px; }
.foot-ghost {
  border: 0 !important; background: none !important;
  color: var(--ink-mute) !important; font-weight: 500 !important; font-size: 11.5px !important;
  padding: 4px !important; cursor: pointer;
}
.foot-ghost:hover { color: var(--ink) !important; }
.panel-foot button {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--interactive-tint-strong); background: var(--fill-soft);
  border-radius: 10px; padding: 10px; cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--ink);
  transition: border-color .15s, background .15s;
}
.panel-foot button:hover { border-color: var(--accent); background: rgba(80, 128, 200, 0.16); }

/* 3D (hero) tier: the city is the three.js scene, so the basemap and building-mode selects and the
   greenery and ambient switches no longer change the picture (measured 28 Sep 2026); only the
   project pins and place icons stay switchable. */
body.poi-quiet .poi:not(.poi--routed) { display: none; }
:root[data-tier="hero"] #mapdata .md-select,
:root[data-tier="hero"] #mapdata [data-layer="greenery"],
:root[data-tier="hero"] #mapdata [data-layer="ambient"] { display: none; }

.md-swatch--roads { background: #8b95a3; }

/* desktop fold: a tab on the panel's right edge; the panel slides off to the left */
#panel { transition: transform .25s ease; }
#panel-hide {
  position: absolute; z-index: 41; top: calc(var(--topbar-h) + 34px); left: calc(14px + var(--panel-w) - 1px);
  width: 22px; height: 46px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid var(--line); border-left: 0; border-radius: 0 10px 10px 0;
  background: var(--surface-strong); color: var(--ink-dim); box-shadow: var(--shadow-sm);
  transition: left .25s ease, color .15s;
}
#panel-hide:hover { color: var(--interactive); }
#panel-hide svg { transition: transform .25s ease; }
body.panel-hidden #panel { transform: translateX(calc(-100% - 20px)); }
body.panel-hidden #panel-hide { left: 0; border-left: 1px solid var(--line); }
body.panel-hidden #panel-hide svg { transform: rotate(180deg); }
body.panel-hidden .maplibregl-ctrl-bottom-left { left: 14px; }
body.panel-hidden #route-bar { left: 34px; }
body.story-on #panel-hide { display: none; }

#panel-toggle {
  display: none;
  position: absolute; right: 14px; bottom: 22px; z-index: 55;
  width: 50px; height: 50px; border-radius: 50%;
  border: 1px solid rgba(99, 164, 255, 0.45); cursor: pointer;
  background: var(--primary); color: #fff; box-shadow: var(--shadow);
  align-items: center; justify-content: center;
}

/* ============================ right rail ============================ */
#rail {
  position: absolute; z-index: 40;
  right: 14px; top: calc(var(--topbar-h) + 14px);
  display: flex; flex-direction: column; gap: 8px;
}
.rail-group { display: flex; flex-direction: column; border-radius: var(--radius-sm); overflow: hidden; }
.rail-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--line); cursor: pointer;
  background: var(--surface);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  color: var(--ink-dim); border-radius: var(--radius-sm);
  transition: color .15s, background .15s, border-color .15s;
}
.rail-btn:hover { color: var(--on-interactive); background: var(--primary); border-color: var(--primary); }
.rail-group .rail-btn { border-radius: 0; margin-bottom: -1px; }
.rail-group .rail-btn:first-child { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.rail-group .rail-btn:last-child { border-radius: 0 0 var(--radius-sm) var(--radius-sm); margin-bottom: 0; }
.rail-btn.is-on { color: var(--on-interactive); background: var(--primary); border-color: var(--primary); }

/* ============================ map data ============================ */
#mapdata {
  position: absolute; z-index: 40; right: 14px; bottom: 78px; width: 264px;   /* above the chat button in the corner */
  border-radius: var(--radius); overflow: hidden;
  background: var(--surface);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.md-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 12px 11px 14px; border-bottom: 1px solid var(--line);
}
.md-head h2 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .04em; }
#md-collapse {
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 0; background: none; color: var(--ink-mute); cursor: pointer;
  border-radius: 7px; transition: color .15s, transform .2s;
}
#md-collapse:hover { color: var(--ink); }
#mapdata.is-collapsed .md-body { display: none; }
#mapdata.is-collapsed #md-collapse { transform: rotate(180deg); }
#mapdata.is-collapsed .md-head { border-bottom: 0; }

.md-body { padding: 6px 6px 12px; }
.md-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px; border-radius: 9px;
}
.md-row:hover { background: var(--fill-soft); }
.md-row-label {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; color: var(--ink-dim); min-width: 0;
}
.md-row-label svg { color: var(--ink-mute); flex: none; }
.md-swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.md-swatch--project { background: linear-gradient(135deg, var(--accent-bright), var(--primary)); box-shadow: 0 0 8px rgba(99,164,255,.6); }
.md-swatch--poi { background: linear-gradient(135deg, #5fd48a, #38c0b0); box-shadow: 0 0 8px rgba(56,192,176,.5); }
.md-swatch--greenery { background: linear-gradient(135deg, #6a9c52, #3f6d3a); box-shadow: 0 0 8px rgba(87,128,77,.5); }

.md-select select {
  border: 1px solid var(--interactive-tint-strong); background: var(--fill-inset);
  color: var(--ink); border-radius: 8px; padding: 5px 8px; font-size: 11.5px;
  cursor: pointer;
}
.md-select select:hover { border-color: var(--accent); }

.md-eye {
  width: 32px; height: 30px; display: grid; place-items: center; flex: none;
  border: 0; background: none; color: var(--interactive); cursor: pointer;
  border-radius: 7px; transition: color .15s;
}
/* Off = a different GLYPH (eye-off, swapped in JS), not a faded eye: opacity
   alone fell below the 3:1 non-text contrast minimum. */
.md-eye[aria-pressed="false"] { color: var(--ink-dim); }

.md-legend { padding: 10px 8px 4px; }
.md-legend[hidden] { display: none; }
.md-legend-title { display: block; font-size: 10.5px; color: var(--ink-mute); margin-bottom: 8px; }
.md-key {
  display: flex; align-items: center; gap: 9px;
  font-size: 11px; color: var(--ink-dim); margin-bottom: 7px;
}
.md-key-line {
  width: 26px; height: 4px; border-radius: 2px; flex: none;
  background: var(--interactive);
  box-shadow: 0 0 0 2.5px var(--surface-solid), 0 0 7px var(--interactive);
}
.md-key-badge {
  flex: none; background: var(--primary); color: #fff;
  font-size: 9.5px; font-weight: 700; line-height: 1;
  padding: 4px 7px; border-radius: 999px;
}

/* ============================ project pins ============================ */
/* No position property here: MapLibre's .maplibregl-marker sets
   position:absolute and a same-specificity override would put markers back in
   normal flow (they then stack, offsetting every pin by the height of the
   ones before it). */
.pin { background: none; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; }
.pin-head {
  width: 34px; height: 34px; border-radius: 11px;
  background: linear-gradient(160deg, #2f6bc4, var(--primary));
  border: 1.5px solid rgba(150, 200, 255, 0.65);
  color: #fff; font-weight: 700; font-size: 14px;
  display: grid; place-items: center;
  box-shadow: 0 4px 16px rgba(4, 14, 26, 0.7), 0 0 18px rgba(48, 110, 200, 0.55);
  transition: transform .15s, box-shadow .15s;
}
.pin-stem { width: 2px; height: 12px; background: linear-gradient(180deg, rgba(150,200,255,.8), transparent); }
.pin-label {
  position: absolute; left: calc(100% - 2px); top: 6px;
  background: var(--surface-strong);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  color: var(--ink); font-size: 11.5px; font-weight: 600; white-space: nowrap;
  padding: 4px 10px; border-radius: 999px;
  box-shadow: var(--shadow-sm); pointer-events: none;
}
.pin--left .pin-label { left: auto; right: calc(100% - 2px); }
.pin:hover .pin-head, .pin:focus-visible .pin-head {
  transform: scale(1.12);
  box-shadow: 0 6px 22px rgba(4, 14, 26, 0.8), 0 0 26px rgba(99, 164, 255, 0.8);
}
.pin--todo .pin-head { background: rgba(90, 110, 135, 0.75); border-style: dashed; }
.pin--todo .pin-stem { background: rgba(140, 160, 185, 0.6); }

/* ============================ POI markers ============================ */
.poi { background: none; border: 0; padding: 0; cursor: pointer; }
.poi-icon {
  position: relative;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-strong);
  border: 1.5px solid var(--c, #888); color: var(--c, #888);
  display: grid; place-items: center;
  box-shadow: 0 3px 12px rgba(4, 14, 26, 0.6), 0 0 12px color-mix(in srgb, var(--c, #888) 45%, transparent);
  transition: transform .15s;
}
.poi:hover .poi-icon { transform: scale(1.16); }
.poi--planned .poi-icon { border-style: dashed; }
.poi--routed .poi-icon { border-color: var(--accent-bright); color: var(--accent-bright); }
.poi--ping .poi-icon::after {
  content: ''; position: absolute; inset: -3px;
  border-radius: 50%; border: 2px solid var(--accent-bright);
  animation: poi-ping 1.1s ease-out 1 both;
}
@keyframes poi-ping {
  from { opacity: .9; transform: scale(1); }
  to { opacity: 0; transform: scale(2.6); }
}
.poi-badge {
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  background: var(--primary); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 5px 9px; border-radius: 999px; white-space: nowrap;
  border: 1px solid rgba(150, 200, 255, 0.45);
  box-shadow: 0 4px 14px rgba(4, 14, 26, 0.7);
  pointer-events: none;
  animation: badge-in .32s cubic-bezier(.2, 1.3, .4, 1) both;
}
@keyframes badge-in {
  from { opacity: 0; transform: translateX(-50%) translateY(5px) scale(.85); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ============================ POI popup ============================ */
.maplibregl-popup-content {
  border-radius: var(--radius); padding: 15px 16px 13px;
  background: var(--surface);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  color: var(--ink);
}
.maplibregl-popup-tip { display: none; }
.maplibregl-popup-close-button { color: var(--ink-mute); font-size: 19px; padding: 4px 9px; }
.maplibregl-popup-close-button:hover { color: var(--ink); background: none; }
.poi-pop { min-width: 200px; }
.poi-pop-cat {
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--c, #888); font-weight: 700;
}
.poi-pop h3 { margin: 5px 0 7px; font-size: 15.5px; font-weight: 600; color: var(--ink); }
.planned-note { margin: 0 0 7px; font-size: 11.5px; line-height: 1.5; color: var(--ink-mute); }
.drive-head {
  margin: 11px 0 5px; font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-mute); font-weight: 600;
}
.times { list-style: none; margin: 0 -6px -4px; padding: 0; }
.times li { margin: 1px 0; }
.time-row {
  width: 100%; display: flex; align-items: center; gap: 10px;
  border: 0; background: none; cursor: pointer;
  border-radius: 8px; padding: 6px; text-align: left;
  font-size: 12.5px; color: var(--ink-dim);
  transition: background .12s, color .12s;
}
.time-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.time-row b { font-variant-numeric: tabular-nums; }
.time-row .time-go { flex: none; color: var(--ink-mute); transition: transform .12s, color .12s; }
.time-row:hover { background: rgba(99, 164, 255, 0.16); color: var(--ink); }
.time-row:hover .time-go { color: var(--accent-bright); transform: translateX(2px); }

/* ============================ modal ============================ */
#modal { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; background: var(--page-bg); }
#modal[hidden] { display: none; }
.modal-bar {
  height: 54px; flex: none;
  background: var(--modal-bar-bg);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 10px 0 18px; padding-top: env(safe-area-inset-top);
  box-sizing: content-box;
}
.modal-bar h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .02em; color: var(--ink); }
.modal-actions { display: flex; align-items: center; gap: 6px; }
.modal-actions a {
  color: var(--ink-dim); font-size: 12.5px; text-decoration: none;
  padding: 8px 11px; border-radius: 8px;
}
.modal-actions a:hover { background: var(--interactive-tint); color: var(--interactive-strong); }
#modal-close {
  border: 1px solid rgba(99, 164, 255, 0.45); cursor: pointer;
  background: var(--primary); color: #fff;
  border-radius: 9px; padding: 9px 14px;
  font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 7px;
}
#modal-close:hover { border-color: var(--accent-bright); }
.modal-body { flex: 1; position: relative; }
#modal-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
#modal-fallback {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  background: var(--surface-solid); color: var(--ink); text-align: center; padding: 24px;
}
#modal-fallback[hidden] { display: none; }
#modal-fallback a {
  background: var(--primary); color: #fff; font-weight: 600;
  padding: 11px 20px; border-radius: 10px; text-decoration: none;
  border: 1px solid rgba(99, 164, 255, 0.45);
}

/* ============================ route bar ============================ */
#route-bar {
  position: absolute; z-index: 45;
  /* The 294px right gap reserves the docked Map data panel. Any breakpoint
     that removes it must also undock that panel, or the bar paints over the
     legend it belongs to. */
  left: calc(var(--panel-w) + 34px); right: 294px; bottom: 30px;
  margin: 0 auto; max-width: 620px;
  display: flex; align-items: center; gap: 15px; flex-wrap: wrap;
  padding: 11px 12px 11px 15px;
  border-radius: var(--radius);
  background: var(--surface);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  animation: bar-in .28s ease both;
}
#route-bar[hidden] { display: none; }
@keyframes bar-in { from { opacity: 0; transform: translateY(12px); } }
.route-mark {
  width: 32px; height: 32px; flex: none; border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(99, 164, 255, 0.16); color: var(--accent-bright);
}
.route-text { min-width: 190px; flex: 1 1 auto; }
.route-pair { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }
.route-pair b { font-weight: 600; white-space: nowrap; }
/* The origin never shrinks; the destination gives way but keeps a floor -
   at 0 it collapsed entirely and the bar read "Sirens ->" with no target. */
.route-pair b:first-of-type { flex: none; }
.route-pair b:last-of-type { min-width: 4em; overflow: hidden; text-overflow: ellipsis; }
.route-arrow { color: var(--accent-bright); flex: none; }
.route-meta { display: block; font-size: 11.5px; color: var(--ink-mute); margin-top: 3px; }
.route-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.route-actions button {
  border-radius: 9px; cursor: pointer; font-size: 12px; font-weight: 600;
  padding: 9px 14px; border: 1px solid var(--line);
}
.route-secondary { background: var(--fill-soft); color: var(--interactive); border-color: var(--interactive-tint-strong); }
.route-secondary:hover { border-color: var(--accent); background: rgba(80, 128, 200, 0.2); }
.route-secondary[hidden] { display: none; }
.route-primary { background: var(--primary); color: #fff; border-color: rgba(99, 164, 255, 0.45); }
.route-primary:hover { border-color: var(--accent-bright); }

/* ============================ help ============================ */
#help {
  position: fixed; inset: 0; z-index: 110;
  display: grid; place-items: center; padding: 20px;
  background: color-mix(in srgb, var(--page-bg) 72%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#help[hidden] { display: none; }
.help-card {
  width: min(520px, 100%); max-height: 82vh; overflow-y: auto;
  border-radius: var(--radius); padding: 20px 22px 22px;
  background: var(--surface-solid); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
}
.help-card header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.help-card h2 { margin: 0; font-size: 18px; font-weight: 600; }
#help-close {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--line); background: none; color: var(--ink-dim);
  border-radius: 9px; cursor: pointer;
}
#help-close:hover { color: var(--interactive-strong); border-color: var(--interactive); }
.help-card dl { margin: 0; display: grid; gap: 12px; }
.help-card dt { font-size: 12.5px; font-weight: 600; color: var(--accent-bright); }
.help-card dd { margin: 3px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-dim); }
.help-card dd b { color: var(--ink); font-weight: 600; }

/* ============================ loading ============================ */
#loading {
  position: fixed; inset: 0; z-index: 200;
  background: var(--loading-bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s; color: var(--ink);
}
#loading.done { opacity: 0; pointer-events: none; }
.load-mark { text-align: center; }
.load-mark img { display: block; margin: 0 auto 18px; opacity: .95; }
.load-mark p { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-mute); margin: 14px 0 0; }
.load-bar {
  width: 150px; height: 2px; margin: 0 auto; border-radius: 2px;
  background: rgba(120, 165, 220, 0.2); overflow: hidden;
}
.load-bar span {
  display: block; width: 40%; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-bright), transparent);
  animation: load-sweep 1.25s ease-in-out infinite;
}
@keyframes load-sweep { from { transform: translateX(-110%); } to { transform: translateX(310%); } }

/* ============================ toast ============================ */
/* Top-centre, not bottom: at the bottom it landed squarely on the route bar
   and hid the very text it was commenting on. */
#toast {
  position: fixed; z-index: 300;
  left: 50%; transform: translateX(-50%); top: calc(var(--topbar-h) + 14px);
  background: var(--surface-solid); color: var(--ink);
  border: 1px solid var(--line-strong);
  padding: 11px 18px; border-radius: 999px; font-size: 12.5px;
  box-shadow: var(--shadow);
}
#toast[hidden] { display: none; }

/* ============================ attribution ============================ */
/* OSM/OpenFreeMap credit is a licence requirement, so it is pushed clear of
   the panel rather than left to sit behind it. */
.maplibregl-ctrl-bottom-left {
  z-index: 30;
  left: calc(var(--panel-w) + 28px);
  transition: left .2s;
}
.maplibregl-ctrl-attrib {
  font-size: 7px; line-height: 1.25;
  padding: 1px 6px !important;
  background: var(--surface) !important;
  color: var(--ink-mute); border-radius: 6px 6px 0 0;
  opacity: 0.85;
}
.maplibregl-ctrl-attrib-inner { line-height: 1.25; }
.maplibregl-ctrl-attrib a { color: var(--ink-dim); }
.maplibregl-ctrl-bottom-right { display: none; } /* the rail replaces the default controls */

/* =========================================================================
   CLICKABLE AFFORDANCE
   One rule for the whole app: if it is pressable it carries --interactive;
   if it is not, it never does. Decorative icons and static values stay in
   the ink greys so the blue always means "you can press this".
   ========================================================================= */

/* decorative marks must give the interactive colour back */
.tb-crumbs svg, .panel-context svg, .route-arrow, .md-row-label svg { color: var(--ink-mute); }

/* pressable text and icons */
.tb-tab:not(.is-active) { color: var(--interactive); }
.tb-tab:not(.is-active):hover { background: var(--interactive-tint); }
.tb-icon { color: var(--interactive); }
.tb-icon:hover { background: var(--interactive-tint); border-color: var(--interactive-tint-strong); }
.rail-btn { color: var(--interactive); }
.md-eye[aria-pressed="true"] { color: var(--interactive); }
.seg-btn:not(.is-active) { color: var(--interactive); }
.md-select select { color: var(--interactive); font-weight: 600; }

/* pressable rows and chips: an interactive-tinted edge marks the hit area */
.chip-time { border-color: var(--interactive-tint-strong); color: var(--interactive); }
.chip-time b { color: var(--interactive-strong); }
.chip-time:hover { background: var(--interactive-tint); border-color: var(--interactive); color: var(--interactive-strong); }
.cat-chip { border-color: var(--interactive-tint-strong); }
.time-row b, .time-row .time-go { color: var(--interactive); }
.time-row:hover { background: var(--interactive-tint); }
.time-row:hover b, .time-row:hover .time-go { color: var(--interactive-strong); }
.drive-row .drive-go { color: var(--interactive); border-color: var(--interactive-tint-strong); }
.drive-row:hover { border-color: var(--interactive); background: var(--interactive-tint); }
.proj-item:hover { border-color: var(--interactive-tint-strong); }
.proj-main:hover .proj-name { color: var(--interactive); text-decoration: underline; text-underline-offset: 3px; }
.panel-foot button { color: var(--interactive); }
.panel-foot button:hover { background: var(--interactive-tint); border-color: var(--interactive); }
.route-secondary:hover { background: var(--interactive-tint); border-color: var(--interactive); }
.modal-actions a { color: var(--interactive); }
.help-card dt { color: var(--interactive); }
#help-close { color: var(--interactive); }
.maplibregl-ctrl-attrib a { color: var(--interactive); }

/* filled controls: the interactive colour becomes the background instead */
.kpi-cta, .proj-open, .route-primary, #modal-close, #modal-fallback a, .tb-tab.is-active, .seg-btn.is-active {
  background: var(--primary); color: #fff; border-color: transparent;
}
.kpi-cta { background: linear-gradient(180deg, #1d55bd, var(--primary)); }
.kpi-cta:hover, .proj-open:hover, .route-primary:hover, #modal-close:hover { background: var(--interactive-strong); }
:root[data-theme="dark"] .kpi-cta:hover,
:root[data-theme="dark"] .proj-open:hover,
:root[data-theme="dark"] .route-primary:hover,
:root[data-theme="dark"] #modal-close:hover { background: #2059c4; }

/* map markers are pressable too, and say so on hover */
.pin:hover .pin-head, .pin:focus-visible .pin-head { outline: 2px solid var(--interactive); outline-offset: 3px; }
.poi:hover .poi-icon, .poi:focus-visible .poi-icon { outline: 2px solid var(--interactive); outline-offset: 2px; }

/* the theme button shows the mode you would switch TO */
.icon-moon { display: none; }
:root[data-theme="dark"] .icon-sun { display: none; }
:root[data-theme="dark"] .icon-moon { display: block; }

/* Light chrome over aerial imagery needs a harder edge than over a drawn map. */
:root[data-basemap="satellite"] #panel,
:root[data-basemap="satellite"] #mapdata,
:root[data-basemap="satellite"] #route-bar,
:root[data-basemap="satellite"] .rail-btn,
:root[data-basemap="satellite"] .maplibregl-popup-content {
  border-color: var(--line-strong);
  box-shadow: var(--shadow), 0 0 0 1px rgba(255, 255, 255, 0.35);
}
:root[data-theme="dark"][data-basemap="satellite"] #panel,
:root[data-theme="dark"][data-basemap="satellite"] #mapdata,
:root[data-theme="dark"][data-basemap="satellite"] #route-bar,
:root[data-theme="dark"][data-basemap="satellite"] .rail-btn,
:root[data-theme="dark"][data-basemap="satellite"] .maplibregl-popup-content {
  box-shadow: var(--shadow), 0 0 0 1px rgba(0, 0, 0, 0.45);
}

/* ============================ responsive ============================ */
/* Top-bar diet, widest first: the Story/Compare pills drop their words, then
   the brand its wordmark, then the help icon (the panel keeps its own help
   button), and below 900px the grid switches to content-sized tracks so the
   side groups can never paint across the centre tabs.
   The route bar KEEPS its 294px right gap while Map data is docked - the
   breakpoint that removed it painted the bar over the legend it belongs to. */
@media (max-width: 1280px) {
  .tb-cta-text { display: none; }
  .tb-cta { padding: 8px 11px; }
}
/* inside a project the breadcrumb carries the story: the section tabs shrink to icons to give it room */
@media (max-width: 1600px) {
  body.sales-open .tb-tab-text { display: none; }
  body.sales-open .tb-tab { padding: 8px 12px; }
}
@media (max-width: 1200px) {
  .tb-brand-text { display: none; }
}
@media (max-width: 1100px) {
  #help-btn { display: none; } /* the help sheet stays reachable from the panel */
}
@media (max-width: 900px) {
  #topbar { grid-template-columns: auto auto auto; }
}
/* Mid widths drop the tab icons and keep the words; the narrowest widths do
   the opposite, because three words will not fit beside the brand. */
@media (max-width: 1024px) {
  :root { --panel-w: 300px; }
  .tb-tab { padding: 8px 11px; }
  .tb-tab svg { display: none; }
  #mapdata { width: 232px; }
  #route-bar { right: 262px; }
}
/* Below here Map data stops being docked and becomes an overlay the rail
   button opens, so the route bar may finally use the full width. */
@media (max-width: 900px) {
  .tb-crumbs { display: none; }
  #route-bar { left: calc(var(--panel-w) + 24px); right: 16px; bottom: 46px; }
  #mapdata { display: none; }
  #mapdata.is-open { display: block; z-index: 55; bottom: 14px; }
}

@media (max-width: 760px) {
  :root { --topbar-h: 52px; }
  .tb-brand-text { display: none; }
  .tb-tab { font-size: 12px; padding: 7px 10px; }
  #topbar { gap: 8px; padding: 0 10px; }
  .tb-brand { padding-left: 8px; margin-left: 0; }
}

/* Phone: the panel becomes a bottom sheet. These rules MUST stay inside the
   760px query - loose at top level they turn every desktop into a phone. */
@media (max-width: 760px) {
  #panel {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%; max-width: none; height: min(66vh, 560px);
    border-radius: var(--radius) var(--radius) 0 0;
    transform: translateY(calc(100% + 12px));
    transition: transform .3s cubic-bezier(.32, .72, 0, 1);
  }
  #panel.open { transform: translateY(0); }
  #panel-toggle { display: flex; }
  #panel-hide { display: none; }
  body.panel-hidden #panel { transform: translateY(calc(100% + 12px)); }
  body.panel-hidden #panel.open { transform: translateY(0); }
  #rail { top: calc(var(--topbar-h) + 10px); right: 10px; }
  .maplibregl-ctrl-bottom-left { left: 0; }
  .pin-label { display: none; }
  .modal-bar h2 { font-size: 13px; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Above the sheet button, never under it. */
  #route-bar {
    left: 12px; right: 12px; bottom: 82px; max-width: none;
    flex-wrap: wrap; gap: 10px; padding: 12px 14px;
  }
  .route-actions { width: 100%; margin-left: 0; }
  .route-actions button { flex: 1; }
  #toast { bottom: 148px; }
}

@media (max-width: 620px) {
  #topbar { gap: 4px; padding: 0 8px; }
  .tb-tab svg { display: block; }
  .tb-tab-text { display: none; }
  .tb-tab { padding: 8px 12px; }
  .tb-left { flex: 0 0 auto; }
  .tb-right { gap: 4px; }
}
/* time of day (hero tier only, js/hero/daylight.js): three labelled buttons */
.tb-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.tb-seg[hidden] { display: none; }
.tb-seg button { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border: 0; border-radius: 999px; background: none; color: var(--ink-dim); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.tb-seg button:hover { color: var(--ink); background: var(--interactive-tint); }
.tb-seg button.is-on { background: var(--interactive); color: var(--on-interactive); }
@media (max-width: 1440px) { .tb-seg-text { display: none; } .tb-seg button { padding: 0 8px; } }
@media (max-width: 480px) { .tb-seg { display: none; } } /* ?t= and &h= links still set the hour */

/* settings: language, light/dark, help in one menu */
.tb-settings { position: relative; }
.tb-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; min-width: 210px; padding: 6px; border-radius: var(--radius); background: var(--surface-solid); border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 2px; }
.tb-menu[hidden] { display: none; }
.tb-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.tb-menu-item:hover { background: var(--interactive-tint); }
.tb-menu-item svg { flex: none; color: var(--ink-dim); }
.tb-menu-text { flex: 1; }
.tb-menu-lang { cursor: default; }
.tb-menu-lang:hover { background: none; }
.tb-lang-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; border: 1px solid var(--line); }
.tb-lang-seg button { border: 0; background: none; padding: 3px 8px; border-radius: 999px; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ink-dim); cursor: pointer; }
.tb-lang-seg button:hover { color: var(--ink); background: var(--interactive-tint); }
.tb-lang-seg button.is-on { background: var(--interactive); color: var(--on-interactive); }

/* the breadcrumb follows the sales view: every step but the last goes back up to it */
.tb-crumbs.is-live { gap: 6px; }
.tb-crumbs .crumb-btn { border: 0; background: none; padding: 2px 0; font: inherit; color: var(--ink-dim); cursor: pointer; white-space: nowrap; }
.tb-crumbs .crumb-btn:hover { color: var(--interactive); text-decoration: underline; }
.tb-crumbs .crumb-now { font-weight: 700; color: var(--ink); white-space: nowrap; }

/* Fingers, not cursors: every control the review measured under 40px gets
   a taller hit area on coarse pointers. Type sizes stay as they are - the
   padding does the work. */
@media (pointer: coarse) {
  .chip-time, .cat-chip { min-height: 40px; padding-top: 9px; padding-bottom: 9px; }
  .time-row { min-height: 44px; }
  .drive-row { min-height: 48px; }
  .md-eye { width: 44px; height: 40px; }
  .md-row { padding-top: 4px; padding-bottom: 4px; }
  .md-select select { min-height: 40px; }
  .tb-icon { width: 42px; height: 42px; }
  .tb-tab { min-height: 40px; }
  .seg-btn { min-height: 36px; }
  .rail-btn { width: 46px; height: 46px; }
  .proj-open { min-height: 40px; padding-left: 14px; padding-right: 14px; }
  .maplibregl-popup-close-button { font-size: 24px; padding: 8px 12px; }
}

/* While the phone sheet is open it owns the bottom of the screen: the route
   bar yields (Done comes back with the map), and the OSM credit - a licence
   term, not decor - rides up to stay visible above the sheet. */
@media (max-width: 760px) {
  body:has(#panel.open) #route-bar { display: none; }
  body:has(#panel.open) .maplibregl-ctrl-bottom-left {
    bottom: min(66vh, 560px);
    transition: bottom .3s cubic-bezier(.32, .72, 0, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  #route-bar, .poi-badge, .load-bar span { animation: none; }
  .poi--ping .poi-icon::after { display: none; }
  * { transition-duration: .01ms !important; }
}

/* ============================================================
   Sales companion features: language, story tour, compare,
   wizard, calculator, enquiry, ambient toggle.
   Colours ride the existing custom properties, so both themes
   and both basemaps are covered without new palette entries.
   ============================================================ */

/* ---- top-bar feature buttons: Story, Compare, language ---- */
.tb-cta {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 8px 15px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(99, 164, 255, 0.45);
  background: var(--primary); color: #fff;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  transition: background .15s, border-color .15s, transform .12s, box-shadow .15s;
}
.tb-cta:hover { border-color: var(--accent-bright); background: var(--interactive-strong); box-shadow: 0 4px 14px rgba(24, 72, 160, 0.35); }
.tb-cta:active { transform: translateY(1px); }
.tb-cta--ghost {
  background: var(--fill-soft); color: var(--interactive);
  border-color: var(--interactive-tint-strong); box-shadow: none;
}
.tb-cta--ghost:hover { background: var(--interactive-tint); color: var(--interactive-strong); border-color: var(--interactive); box-shadow: none; }
.tb-lang {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: 34px; padding: 0 11px; border-radius: 9px; cursor: pointer;
  border: 1px solid transparent; background: var(--fill-soft); color: var(--ink-dim);
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  transition: color .15s, background .15s, border-color .15s;
}
.tb-lang:hover { color: var(--ink); background: rgba(99, 164, 255, 0.14); border-color: var(--line-strong); }

/* ---- KPI: primary wizard CTA + ghost drives CTA ---- */
.kpi-cta--ghost {
  background: var(--fill-inset); color: var(--interactive);
  border: 1px solid var(--interactive-tint-strong); box-shadow: none;
}
.kpi-cta--ghost:hover { border-color: var(--interactive); background: var(--interactive-tint); box-shadow: none; color: var(--interactive-strong); }
.kpi-cta + .kpi-cta { margin-top: 8px; }

/* ---- project card icon buttons (calculator / compare) ---- */
.proj-icon-btn {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border: 1px solid var(--interactive-tint-strong); border-radius: 8px;
  background: var(--fill-inset); color: var(--interactive); cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.proj-icon-btn:hover { border-color: var(--interactive); background: var(--interactive-tint); color: var(--interactive-strong); }

/* ---- projects section tools ---- */
.proj-tools { display: grid; gap: 7px; margin-top: 12px; }
.tool-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 10px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--interactive-tint-strong);
  background: var(--fill-inset); color: var(--interactive);
  font-size: 12.5px; font-weight: 600;
  transition: border-color .15s, background .15s, color .15s;
}
.tool-btn:hover:not(:disabled) { border-color: var(--interactive); background: var(--interactive-tint); color: var(--interactive-strong); }
.tool-btn:disabled { opacity: .45; cursor: default; }

/* ---- panel foot: enquiry first, utilities under it ---- */
/* .panel-foot button (0,1,1) outranks a lone class, so the button-with-class
   selector keeps the blue fill from being washed out to the utility style. */
.panel-foot button.foot-enquiry {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 11px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(99, 164, 255, 0.45);
  background: var(--primary); color: #fff;
  font-size: 13px; font-weight: 600;
  transition: background .15s, border-color .15s;
}
.panel-foot button.foot-enquiry:hover { background: var(--interactive-strong); border-color: var(--accent-bright); }
.panel-foot-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }

/* ---- Map data: ambient swatch ---- */
.md-swatch--ambient { background: linear-gradient(135deg, #63a4ff, #38c0b0); box-shadow: 0 0 8px rgba(99, 164, 255, 0.5); }

/* ============================ story panel ============================ */
/* Presentation mode: while the tour runs, the dashboard chrome yields the
   stage - the narrative panel is the only UI besides the top bar. */
body.story-on #panel,
body.story-on #panel-toggle,
body.story-on #rail,
body.story-on #mapdata,
body.story-on #route-bar,
body.story-on #guide-fab,   /* sat on the card's Next arrow at laptop height (QA 28 Sep, D047) */
body.story-on #guide-chat,
body.story-on #fv-launch { display: none; }

#story-panel {
  position: fixed; z-index: 46;
  top: calc(var(--topbar-h) + 14px); right: 14px;
  width: 340px; max-width: calc(100vw - 28px);
  max-height: calc(100vh - var(--topbar-h) - 28px);
  display: flex;
}
#story-panel[hidden] { display: none; }
.story-card {
  display: flex; flex-direction: column; min-height: 0; width: 100%;
  border-radius: var(--radius);
  background: var(--surface);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.story-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 0;
}
.story-count { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); }
.story-exit {
  width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--interactive);
  transition: border-color .12s, color .12s;
}
.story-exit:hover { border-color: var(--interactive); color: var(--interactive-strong); }
.story-body { padding: 10px 16px 6px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.story-body h3 { margin: 2px 0 6px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.story-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 8px;
}
.story-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.story-fact {
  padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: var(--fill-inset); border: 1px solid var(--line); color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.story-text { margin: 0 0 10px; font-size: 13px; line-height: 1.6; color: var(--ink-dim); }
.story-list { margin: 0 0 10px; padding: 0; list-style: none; display: grid; gap: 5px; }
.story-list li { display: flex; gap: 8px; font-size: 12px; line-height: 1.5; color: var(--ink-dim); }
.story-list li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-bright); flex: none; margin-top: 6px; }
.story-ctas { display: grid; gap: 7px; margin: 4px 0 8px; }
.story-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(99, 164, 255, 0.45); background: var(--primary); color: #fff;
  font-size: 12.5px; font-weight: 600; transition: background .15s;
}
.story-cta:hover { background: var(--interactive-strong); }
.story-cta--ghost { background: var(--fill-inset); color: var(--interactive); border-color: var(--interactive-tint-strong); }
.story-cta--ghost:hover { background: var(--interactive-tint); color: var(--interactive-strong); }
.story-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px 12px; border-top: 1px solid var(--line);
}
.story-nav {
  width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--interactive-tint-strong); border-radius: 10px;
  background: var(--fill-inset); color: var(--interactive);
  transition: border-color .12s, background .12s, color .12s;
}
.story-nav:hover { border-color: var(--interactive); background: var(--interactive-tint); color: var(--interactive-strong); }
.story-nav--primary { background: var(--primary); color: #fff; border-color: rgba(99, 164, 255, 0.45); }
.story-nav--primary:hover { background: var(--interactive-strong); color: #fff; }
.story-dots { display: flex; gap: 6px; }
.story-dot {
  width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: var(--line-strong);
  transition: background .15s, transform .15s;
}
.story-dot.is-on { background: var(--accent-bright); transform: scale(1.25); }
.story-progress { height: 3px; background: var(--fill-inset); }
.story-progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
}
.story-progress.is-running span { animation: story-progress linear forwards; }
@keyframes story-progress { from { width: 0; } to { width: 100%; } }

/* ============================ sheets ============================ */
.sheet {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 16, 28, 0.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  padding: 18px;
}
.sheet[hidden] { display: none; }
.sheet-card {
  width: 520px; max-width: 100%; max-height: calc(100vh - 48px);
  display: flex; flex-direction: column; min-height: 0;
  border-radius: var(--radius); overflow: hidden;
  background: var(--surface);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.sheet-card--wide { width: 760px; }
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.sheet-head h2 { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink); }
.sheet-close {
  width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--interactive);
  transition: border-color .12s, color .12s;
}
.sheet-close:hover { border-color: var(--interactive); color: var(--interactive-strong); }
.sheet-body { padding: 16px 18px 18px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }

/* ---- shared form styles (enquiry, calculator) ---- */
.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.f-field { display: grid; gap: 5px; min-width: 0; }
.f-field--full { grid-column: 1 / -1; }
.f-label { font-size: 11.5px; font-weight: 600; color: var(--ink-mute); }
.f-label b { color: var(--accent-bright); font-weight: 700; }
.f-input {
  width: 100%; padding: 9px 11px; border-radius: 9px; font: inherit; font-size: 13px;
  background: var(--fill-inset); border: 1px solid var(--line); color: var(--ink);
  transition: border-color .12s;
}
.f-input:focus { outline: none; border-color: var(--interactive); }
.f-input::placeholder { color: var(--ink-mute); opacity: .8; }
textarea.f-input { resize: vertical; min-height: 74px; }
.f-radios { display: flex; flex-wrap: wrap; gap: 6px; }
.f-chip {
  padding: 7px 13px; border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 600;
  background: var(--fill-inset); border: 1px solid var(--interactive-tint-strong); color: var(--ink-dim);
  transition: border-color .12s, background .12s, color .12s;
}
.f-chip:hover { border-color: var(--interactive); color: var(--interactive-strong); }
.f-chip[aria-pressed="true"] { background: var(--primary); color: #fff; border-color: var(--accent-bright); }
.f-note { font-size: 11px; line-height: 1.5; color: var(--ink-mute); margin: 8px 0 0; }
.f-error { font-size: 11.5px; color: #e05252; margin: 6px 0 0; min-height: 15px; }
.f-actions { display: grid; gap: 8px; margin-top: 14px; }
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(99, 164, 255, 0.45); background: var(--primary); color: #fff;
  font-size: 13.5px; font-weight: 600; transition: background .15s;
}
.btn-primary:hover:not(:disabled) { background: var(--interactive-strong); }
.btn-primary:disabled { opacity: .55; cursor: default; }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--interactive-tint-strong); background: var(--fill-inset); color: var(--interactive);
  font-size: 12.5px; font-weight: 600; transition: border-color .15s, background .15s;
}
.btn-ghost:hover { border-color: var(--interactive); background: var(--interactive-tint); color: var(--interactive-strong); }

/* ---- compare table ---- */
.cmp-table { overflow-x: auto; }
.cmp-grid { display: grid; min-width: 100%; }
.cmp-cell {
  padding: 9px 12px; font-size: 12.5px; color: var(--ink); border-bottom: 1px solid var(--line);
  min-width: 0; overflow-wrap: break-word;
}
.cmp-cell--label { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-mute); word-break: keep-all; hyphens: none; }
.cmp-cell--head { font-size: 14.5px; font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--line-strong); }
.cmp-cell--num { font-variant-numeric: tabular-nums; font-weight: 600; }
.cmp-cell ul { margin: 0; padding: 0 0 0 14px; }
.cmp-cell li { margin: 2px 0; color: var(--ink-dim); }
.cmp-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.cmp-empty { font-size: 12.5px; color: var(--ink-mute); line-height: 1.6; }

/* ---- wizard ---- */
.wiz-sub { margin: 0 0 14px; font-size: 12.5px; color: var(--ink-mute); }
.wiz-q { margin: 0 0 12px; font-size: 16px; font-weight: 600; color: var(--ink); }
.wiz-opts { display: grid; gap: 8px; }
.wiz-chip {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 12px 14px; border-radius: 10px; cursor: pointer; text-align: left;
  background: var(--fill-inset); border: 1px solid var(--interactive-tint-strong);
  color: var(--ink); font-size: 13px; font-weight: 600;
  transition: border-color .12s, background .12s;
}
.wiz-chip:hover { border-color: var(--interactive); background: var(--interactive-tint); }
.wiz-chip[aria-pressed="true"] { background: var(--primary); color: #fff; border-color: var(--accent-bright); }
.wiz-steps { display: flex; gap: 5px; margin-bottom: 14px; }
.wiz-step { height: 4px; flex: 1; border-radius: 2px; background: var(--fill-inset); }
.wiz-step.is-done { background: var(--accent-bright); }
.wiz-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; }
.wiz-result-card {
  border-radius: var(--radius-sm); padding: 14px; margin-bottom: 12px;
  background: var(--fill-soft); border: 1px solid var(--line-strong);
}
.wiz-result-card h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; color: var(--ink); }
.wiz-why { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.wiz-why li { display: flex; gap: 8px; font-size: 12px; color: var(--ink-dim); }
.wiz-why li::before { content: '\2713'; color: var(--accent-bright); font-weight: 700; }
.wiz-runners { display: grid; gap: 8px; margin: 10px 0 0; }
.wiz-runner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--fill-inset); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink);
}

/* ---- calculator ---- */
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.calc-inputs { display: grid; gap: 12px; align-content: start; }
.calc-range { display: grid; gap: 4px; }
.calc-range-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.calc-range-val { font-size: 13px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
input[type="range"].calc-slider {
  width: 100%; height: 22px; margin: 0; cursor: pointer; background: none; -webkit-appearance: none; appearance: none;
}
input[type="range"].calc-slider::-webkit-slider-runnable-track {
  height: 5px; border-radius: 3px; background: var(--fill-inset); border: 1px solid var(--line);
}
input[type="range"].calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 17px; height: 17px; border-radius: 50%;
  background: var(--primary); border: 2px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.35);
  margin-top: -7px;
}
input[type="range"].calc-slider::-moz-range-track {
  height: 5px; border-radius: 3px; background: var(--fill-inset); border: 1px solid var(--line);
}
input[type="range"].calc-slider::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--primary); border: 2px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.35);
}
.calc-results { display: grid; gap: 0; align-content: start; }
.calc-hero {
  border-radius: var(--radius-sm); padding: 13px 14px; margin-bottom: 10px;
  background: linear-gradient(180deg, rgba(24, 72, 160, 0.92), rgba(16, 48, 80, 0.92));
  border: 1px solid rgba(99, 164, 255, 0.45); color: #fff;
}
.calc-hero .calc-hero-label { font-size: 11px; opacity: .85; }
.calc-hero .calc-hero-value { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.calc-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 7px 2px; font-size: 12.5px; border-bottom: 1px solid var(--line);
}
.calc-row span { color: var(--ink-mute); }
.calc-row b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-row--strong span, .calc-row--strong b { color: var(--ink); font-weight: 700; }
.calc-chart { margin-top: 12px; }
.calc-chart svg { width: 100%; height: auto; display: block; }
.calc-legend { display: flex; gap: 14px; margin-top: 6px; font-size: 11px; color: var(--ink-mute); }
.calc-legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; margin-right: 5px; vertical-align: middle; }
.calc-disclaimer { font-size: 10.5px; line-height: 1.5; color: var(--ink-mute); margin: 12px 0 0; }
.calc-furn { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.calc-furn .f-chip { text-align: center; padding: 8px 6px; }
.calc-furn .f-chip small { display: block; font-weight: 500; font-size: 10px; opacity: .8; }

/* ============================ responsive (new features) ============================ */
@media (max-width: 900px) {
  #story-panel { top: auto; bottom: 14px; right: 14px; max-height: 52vh; }
}
@media (max-width: 760px) {
  #story-panel { left: 12px; right: 12px; bottom: 76px; width: auto; max-height: 46vh; }
  .story-body h3 { font-size: 17px; }
  .f-grid { grid-template-columns: 1fr; }
  .calc-grid { grid-template-columns: 1fr; }
  .calc-furn { grid-template-columns: repeat(2, 1fr); }
  .sheet { padding: 10px; align-items: flex-end; }
  .sheet-card, .sheet-card--wide { width: 100%; max-height: 88vh; border-radius: var(--radius) var(--radius) 0 0; }
  .panel-foot-row { grid-template-columns: 1fr; }
}
@media (pointer: coarse) {
  .proj-icon-btn { width: 40px; height: 40px; }
  .story-nav { width: 44px; height: 44px; }
  .story-dot { width: 10px; height: 10px; }
  .f-chip, .wiz-chip { min-height: 42px; }
  .sheet-close, .story-exit { width: 40px; height: 40px; }
  .tool-btn, .foot-enquiry, .btn-primary, .btn-ghost { min-height: 44px; }
}
/* ============================ motion polish ============================ */
/* Entrances and micro-interactions. Decorative only - every one of these is
   killed by the prefers-reduced-motion block below; the map camera and the
   ambient scene have their own, deliberate motion policy. */
.sheet { animation: sheet-fade .22s ease-out; }
.sheet-card { animation: sheet-pop .32s cubic-bezier(.32, .72, 0, 1); }
@keyframes sheet-fade { from { background-color: rgba(6, 16, 28, 0); backdrop-filter: blur(0); } }
@keyframes sheet-pop { from { opacity: 0; transform: translateY(16px) scale(.985); } }

.story-card { animation: story-in .45s cubic-bezier(.32, .72, 0, 1); }
@keyframes story-in { from { opacity: 0; transform: translateX(26px); } }
.story-body.is-swap { animation: story-swap .34s ease; }
@keyframes story-swap { from { opacity: 0; transform: translateY(9px); } }

.panel-sec:not([hidden]) { animation: sec-fade .22s ease; }
@keyframes sec-fade { from { opacity: 0; transform: translateY(6px); } }

.proj-item { transition: border-color .15s, background .15s, transform .18s, box-shadow .18s; }
.proj-item:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(10, 24, 44, 0.10); }

.pin-head { transition: transform .16s cubic-bezier(.32, .72, 0, 1); }
.pin:hover .pin-head, .pin:focus-visible .pin-head { transform: scale(1.14); }

.md-row { transition: background .14s; border-radius: 8px; }
.md-row:hover { background: rgba(99, 164, 255, 0.07); }

.wiz-chip, .f-chip { transition: border-color .12s, background .12s, color .12s, transform .12s; }
.wiz-chip:active, .f-chip:active { transform: scale(.985); }

@media (prefers-reduced-motion: reduce) {
  .story-progress.is-running span { animation: none; width: 100%; }
  .sheet, .sheet-card, .story-card, .story-body.is-swap, .panel-sec:not([hidden]) { animation: none; }
}

/* ============================ demo guide chatbot ============================ */
/* Sits left of the docked Map data panel (264px + margins) on desktop; when
   Map data becomes a rail-opened overlay below 900px the corner is free. */
#guide-fab {
  position: fixed; z-index: 58; right: 14px; bottom: 14px;
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  border: 1px solid rgba(99, 164, 255, 0.5);
  background: var(--primary); color: #fff;
  box-shadow: 0 10px 28px rgba(8, 24, 48, 0.45);
  transition: transform .16s, background .16s, opacity .2s;
}
#guide-fab:hover { background: var(--interactive-strong); transform: translateY(-2px); }
#guide-fab:active { transform: translateY(0); }
#guide-fab.is-hidden { opacity: 0; pointer-events: none; }

#guide-chat {
  position: fixed; z-index: 59; right: 14px; bottom: 76px;   /* opens above the chat button in the corner */
  width: 340px; max-width: calc(100vw - 28px);
  height: min(520px, calc(100vh - var(--topbar-h) - 40px));
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  animation: sheet-pop .22s cubic-bezier(.3, .9, .3, 1);
}
#guide-chat[hidden] { display: none; }
.guide-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(24, 72, 160, 0.92), rgba(16, 48, 80, 0.92));
  color: #fff;
}
.guide-head-text { display: grid; line-height: 1.35; }
.guide-head-text b { font-size: 13.5px; font-weight: 700; }
.guide-head-text span { font-size: 10.5px; opacity: .78; }
#guide-close {
  width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer; flex: none;
  border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 8px; background: none; color: #fff;
  transition: background .14s;
}
#guide-close:hover { background: rgba(255, 255, 255, 0.14); }

.guide-log {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 13px 12px; display: flex; flex-direction: column; gap: 8px;
}
.guide-msg {
  max-width: 86%; padding: 9px 12px; border-radius: 13px;
  font-size: 12.5px; line-height: 1.5; overflow-wrap: break-word;
  animation: guide-pop .18s ease-out;
}
.guide-msg--bot {
  align-self: flex-start; border-bottom-left-radius: 4px;
  background: var(--fill-inset); border: 1px solid var(--line); color: var(--ink);
}
.guide-msg--user {
  align-self: flex-end; border-bottom-right-radius: 4px;
  background: var(--primary); color: #fff;
}
@keyframes guide-pop { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.guide-msg b { font-weight: 700; }
.guide-rec-label { display: block; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 3px; }
.guide-rec-name { display: block; font-size: 16px; font-weight: 700; color: var(--ink); }
.guide-rec-facts { display: block; font-size: 11.5px; font-weight: 600; color: var(--interactive-strong); margin: 3px 0 5px; }
.guide-rec-blurb { display: block; color: var(--ink-dim); }
.guide-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0 4px; }
.guide-chips.is-done { opacity: .45; pointer-events: none; }
.guide-dots { display: inline-flex; gap: 4px; padding: 2px 1px; }
.guide-dots i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-mute);
  animation: guide-dot 1s infinite ease-in-out;
}
.guide-dots i:nth-child(2) { animation-delay: .15s; }
.guide-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes guide-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }

.guide-form {
  display: flex; gap: 7px; padding: 10px 12px; border-top: 1px solid var(--line);
}
.guide-form .f-input { flex: 1; }
.guide-send {
  flex: none; width: 38px; border-radius: 9px; cursor: pointer;
  display: grid; place-items: center;
  border: 1px solid rgba(99, 164, 255, 0.45); background: var(--primary); color: #fff;
  transition: background .14s;
}
.guide-send:hover { background: var(--interactive-strong); }


@media (max-width: 900px) {
  #guide-fab, #guide-chat { right: 14px; } /* Map data undocks; corner is free */
}
@media (max-width: 760px) {
  #guide-fab { bottom: 76px; } /* clear the phone sheet's toggle */
  #guide-chat { left: 12px; right: 12px; width: auto; bottom: 76px; height: min(60vh, 480px); }
}
@media (pointer: coarse) {
  #guide-fab { width: 56px; height: 56px; }
  .guide-chips .f-chip { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  #guide-chat, .guide-msg { animation: none; }
  .guide-dots i { animation: none; }
}

/* ==================================================================
   PHONES: iPhone 14 and newer, and their Android equivalents
   ==================================================================
   Everything below is scoped to a media query on purpose. The rule at the
   top of the sheet block applies: a phone rule loose at top level turns
   every desktop into a phone, and scripts/check-css.mjs fails the build for
   it. Measured on a 390x844 device pixel ratio 3 viewport, which is an
   iPhone 14; the 430x932 Pro Max and the 402x874 16 Pro behave the same.

   Three things were actually broken rather than merely tight:
     - the bottom sheet gave its project list 57px of 924px of content, so
       no project could be seen or tapped;
     - the chat and sheet buttons sat on top of the sheet's own footer;
     - every height was in vh, which on iOS Safari means the viewport with
       the toolbar HIDDEN, so panels ran under the toolbar.
   ------------------------------------------------------------------ */

/* Safari's toolbar slides away as you scroll, so vh (large viewport) is
   taller than what you can see. dvh tracks the visible height. The vh line
   stays first as the fallback for anything that does not know dvh. */
@media (max-width: 760px) {
  :root {
    --sheet-h: min(86vh, 640px);
    --sheet-h: min(86dvh, 640px);
  }
}

/* The notch, the Dynamic Island and the home indicator. index.html already
   asks for viewport-fit=cover, which puts the page UNDER all three - so
   every edge-anchored control has to pay the inset back. These are zero in
   a normal Safari tab and non-zero once the site is added to the home
   screen or the phone is turned on its side. */
#topbar {
  height: calc(var(--topbar-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  padding-left: calc(12px + env(safe-area-inset-left));
  padding-right: calc(14px + env(safe-area-inset-right));
}
#rail { top: calc(var(--topbar-h) + env(safe-area-inset-top) + 14px); }
.maplibregl-ctrl-bottom-left { padding-bottom: env(safe-area-inset-bottom); }

@media (max-width: 760px) {
  #rail {
    top: calc(var(--topbar-h) + env(safe-area-inset-top) + 10px);
    right: calc(10px + env(safe-area-inset-right));
  }

  /* --- the sheet itself ------------------------------------------- */
  #panel {
    height: var(--sheet-h);
    /* The grab bar reads as "this can move" without needing a gesture to
       discover it, and gives the thumb somewhere to land that is not a
       control. */
    padding-top: 10px;
  }
  #panel::before {
    content: ''; position: absolute; top: 6px; left: 50%;
    width: 38px; height: 4px; margin-left: -19px; border-radius: 2px;
    background: var(--line-strong); opacity: .9;
  }
  /* ONE scroller, with the actions pinned to the bottom of it.
     On the desktop the panel is a fixed column and only the project list
     scrolls inside it, which is right when the column is 900px tall. On a
     phone the same arrangement left the list 57px of its 920px of content -
     the heading, the headline figure and the footer had eaten the sheet
     between them, and no project could be seen, let alone tapped. Here the
     whole sheet scrolls instead, so the heading and the figure move out of
     the way as you go, and the footer stays put because it is the way to
     enquire. */
  #panel {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .panel-sec--grow { overflow: visible; min-height: 0; flex: 0 0 auto; }
  .panel-foot {
    position: sticky; bottom: 0; z-index: 2;
    /* Opaque, not --surface: that token is 93% white so the project cards
       scrolled visibly through "Send an enquiry". A sticky bar has to be a
       floor, not a filter. */
    background: var(--surface-solid);
    padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  }
  /* Tightened so the first card is in view before any scrolling at all. */
  .panel-head { padding: 8px 16px 10px; }
  #panel-title { font-size: 19px; margin: 0 0 9px; }
  .panel-kpi { padding: 10px 16px 12px; }
  .kpi-value { font-size: 30px; margin: 1px 0 2px; }
  .panel-sec { padding: 12px 16px; }
  .kpi-cta { min-height: 44px; padding-top: 9px; padding-bottom: 9px; }

  /* --- floating buttons vs the sheet ------------------------------- */
  #panel-toggle {
    right: calc(14px + env(safe-area-inset-right));
    bottom: calc(22px + env(safe-area-inset-bottom));
    transition: bottom .3s cubic-bezier(.32, .72, 0, 1);
  }
  #guide-fab {
    right: calc(14px + env(safe-area-inset-right));
    bottom: calc(84px + env(safe-area-inset-bottom));
    transition: opacity .2s, transform .16s, background .16s;
  }
  /* Open, the sheet owns the screen. Two thirds of the map is behind it, so
     the zoom rail and the guide button step aside rather than stack on top
     of the sheet's own corner and its footer, and the toggle - the way back
     out - climbs to sit just above it. The toggle stays on the RIGHT: the
     left edge there is where the OSM credit sits, and that is a licence
     term, not something a button may cover. */
  body:has(#panel.open) #panel-toggle {
    bottom: calc(var(--sheet-h) + 12px);
  }
  body:has(#panel.open) #guide-fab,
  body:has(#panel.open) #rail {
    opacity: 0; pointer-events: none;
  }
  #rail { transition: opacity .2s; }
  /* Keep the OSM credit - a licence term, not decor - above the sheet. */
  body:has(#panel.open) .maplibregl-ctrl-bottom-left { bottom: var(--sheet-h); }
  .maplibregl-ctrl-attrib { font-size: 7px; line-height: 1.25; }
}

/* Landscape on a phone is ~390px tall: the side panel and the story panel
   have to live inside that, and the notch moves to a side. */
@media (max-height: 460px) and (orientation: landscape) {
  #panel { bottom: 10px; }
  #rail { gap: 6px; }
  .panel-kpi { padding: 8px 14px 10px; }
  .kpi-value { font-size: 26px; }
  #story-panel { max-height: calc(100dvh - var(--topbar-h) - 24px); }
}

/* --- fingers, not cursors ----------------------------------------------
   Apple's minimum is 44x44 CSS px and the top bar was shipping 32-42.
   Padding does the work so type sizes are untouched. */
@media (pointer: coarse) {
  .tb-icon { width: 44px; height: 44px; }
  .tb-tab { min-height: 44px; min-width: 44px; }
  .tb-cta, .tb-lang { min-height: 44px; }
  .seg-btn { min-height: 44px; }
  #panel-toggle { width: 52px; height: 52px; }
  .panel-foot button { min-height: 44px; }
  .kpi-cta { min-height: 46px; }
  .poi-icon { transform: scale(1.12); } /* 28px dots are small for a thumb */
}

/* iOS zooms the whole page in when a form control under 16px takes focus,
   and never zooms back out. admin/admin.css has known this for a while;
   the public form did not. */
@media (pointer: coarse) {
  .f-input, .f-select select, .md-select select, input, select, textarea {
    font-size: 16px;
  }
}

/* Hover states stick on a touch screen: the first tap fires them and they
   stay until you tap elsewhere, so a POI you tapped keeps looking hovered.
   Gate the transforms and underlines on devices that really have a pointer,
   and leave the colour changes alone - those are harmless either way. */
@media (hover: none) {
  .poi:hover .poi-icon { transform: none; }
  .pin:hover .pin-head { transform: none; }
  .time-row:hover .time-go { transform: none; }
  .proj-main:hover .proj-name { text-decoration: none; }
  .proj-item:hover { transform: none; box-shadow: none; }
  .myplace-go:hover { text-decoration: none; }
  #guide-fab:hover { transform: none; }
}

/* The grey flash iOS paints over anything tappable looks like a rendering
   fault on a dark control. Our own :active states already say "pressed". */
#topbar button, #rail button, #panel button, .sheet button,
#panel-toggle, #guide-fab, .md-eye, .maplibregl-marker {
  -webkit-tap-highlight-color: transparent;
}

/* Rotating the phone must not resize the type. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Second pass on touch targets, after measuring what was still under 44px on
   a 390x844 device pixel ratio 3 viewport. These are the ones a buyer
   actually reaches for: the project name, its View and calculator buttons,
   the drive-time chips, and the POI dots on the map. */
@media (pointer: coarse) {
  /* The project name is the main way into a project and was 22px tall. */
  .proj-main { min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
  .proj-open, .proj-icon-btn { min-height: 44px; min-width: 44px; }
  .chip-time, .cat-chip { min-height: 44px; }
  .tb-brand { min-height: 44px; }

  /* The POI dots stay 28px because 39 of them at 44px would tile the coast
     shut. The button around each one grows instead: an invisible ring of
     padding, negative-margined so the layout and the marker anchor do not
     move a pixel. Same trick for the project pins. */
  .poi { padding: 8px; margin: -8px; }
  .pin { padding: 6px; margin: -6px; }
}

/* View from a residence (hero tier, desktop; js/hero/floorview.js) */
.fv-chip { position: absolute; left: calc(var(--panel-w) + 28px); bottom: 28px; z-index: 30; padding: 8px 14px; border: 0; border-radius: 999px;
  background: var(--surface); color: var(--ink); font: 600 12.5px/1 inherit; box-shadow: 0 2px 10px rgba(0,0,0,.18); cursor: pointer; }
#floor-view { position: absolute; left: calc(var(--panel-w) + 28px); bottom: 70px; z-index: 30; width: 300px; padding: 12px; border-radius: 14px;
  background: var(--surface-strong); color: var(--ink); box-shadow: 0 6px 24px rgba(0,0,0,.22); font-size: 12.5px; }
#floor-view[hidden] { display: none; }
.fv-head { font-weight: 700; margin-bottom: 8px; }
.fv-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.fv-lab { margin-right: 2px; opacity: .7; }
.fv-btn { padding: 6px 10px; border: 1px solid rgba(14,33,57,.18); border-radius: 8px; background: transparent; color: inherit; cursor: pointer; font: inherit; }
.fv-btn.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.fv-floor { min-width: 32px; }
.fv-info { margin-top: 8px; opacity: .8; }
.fv-sunset { padding: 3px 8px; border-radius: 999px; background: #ffb35c; color: #3a1d00; font: 700 11px/1.2 system-ui, sans-serif; box-shadow: 0 0 14px 4px rgba(255,170,80,.55); }
@media (max-width: 900px) { .fv-chip, #floor-view { display: none; } }
/* standing at a window: no top-of-frame haze, the horizon is the point */
body.fv-on #map::after { background: none; }

/* Short desktop screens (a laptop at 240 % scaling is 1330x578 CSS px): the header, KPI block and
   footer took 456 of the panel's 492 px and the project list got 34 (QA 28 Sep 2026, D003). Here
   the KPI reads as one line with the two actions side by side, the header loses its context line,
   and the footer is one row; help stays in the settings menu. */
@media (min-width: 761px) and (max-height: 760px) {
  .panel-head { padding: 10px 16px 9px; }
  #panel-title { margin: 0 0 7px; font-size: 18px; }
  .panel-context { display: none; }
  .panel-kpi { padding: 9px 16px 10px; display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'v l' 'a b'; column-gap: 10px; row-gap: 8px; align-items: center; }
  .kpi-value { grid-area: v; font-size: 28px; margin: 0; }
  .kpi-label { grid-area: l; font-size: 12px; color: var(--ink-dim); }
  .kpi-sub { display: none; }
  .kpi-cta { margin-top: 0; padding: 8px 10px; font-size: 12px; gap: 6px; }
  #wizard-btn { grid-area: a; }
  #explore-btn { grid-area: b; }
  .panel-kpi .kpi-cta:only-of-type { grid-column: 1 / -1; }
  .panel-sec { padding: 10px 16px; }
  .panel-foot { padding: 9px 16px 10px; grid-template-columns: 1fr auto; align-items: center; }
  .panel-foot-row { display: contents; }
  #help-btn-panel { display: none; }
  .panel-foot button.foot-enquiry, .panel-foot button { padding: 9px 12px; white-space: nowrap; }
  .kpi-cta { white-space: nowrap; font-size: 11.5px; }
}

/* ---- destination chapters (js/chapters.js): Neighbourhoods, Seaside, Future city ---- */
.ch-list { list-style: none; margin: 0; padding: 0; }
.ch-list li { margin-bottom: 8px; }
.ch-item {
  border-radius: var(--radius-sm); padding: 10px 11px 11px;
  background: var(--fill-soft); border: 1px solid var(--line);
  transition: border-color .15s, background .15s;
}
.ch-item:hover { border-color: var(--line-strong); background: rgba(99, 164, 255, 0.08); }
.ch-item.is-active { border-color: var(--interactive); background: var(--interactive-tint); }
.ch-main {
  width: 100%; display: flex; align-items: center; gap: 10px;
  border: 0; background: none; cursor: pointer; padding: 2px 0; color: var(--ink); text-align: left;
}
.ch-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.ch-go { flex: none; font-size: 20px; line-height: 1; color: var(--interactive); }
.ch-blurb { margin: 5px 0 0; font-size: 12px; line-height: 1.45; color: var(--ink-dim); }
.ch-meta { margin: 6px 0 0; font-size: 11.5px; font-weight: 600; color: var(--interactive-strong); }
.ch-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 8px; }
.ch-chips-label { font-size: 11px; color: var(--ink-mute); margin-right: 2px; }
.ch-poi {
  border: 1px solid var(--line); background: var(--fill-inset); border-radius: 999px;
  padding: 4px 9px; font-size: 11px; color: var(--ink-dim); cursor: pointer;
}
.ch-poi:hover { border-color: var(--interactive); color: var(--interactive-strong); }
.ch-intro { margin: 0 0 14px; font-size: 12.5px; line-height: 1.5; color: var(--ink); }
#wizard-btn[hidden] { display: none; }
/* time of day inside the settings menu: a full-width row with its labels */
.tb-menu .tb-menu-tod { display: flex; width: 100%; justify-content: space-between; margin: 2px 0 4px; }
.tb-menu .tb-menu-tod[hidden] { display: none; }
.tb-menu .tb-menu-tod button { flex: 1; justify-content: center; }
.tb-menu .tb-menu-tod .tb-seg-text { display: inline; }
.tb-menu { min-width: 290px; }
.panel-kpi[hidden] { display: none; }
/* laptop widths: four chapter tabs need the room, the crumb keeps "Larnaca | Coastal strip" */
@media (max-width: 1500px) { .tb-crumbs > span:nth-of-type(1), .tb-crumbs > span:nth-of-type(2) { display: none; } }

/* ---- Future city plan layers (js/future.js) ---- */
.fz-layers { display: flex; flex-direction: column; gap: 6px; }
.fz-toggle {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; cursor: pointer;
  padding: 9px 11px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--fill-soft); color: var(--ink);
}
.fz-toggle:hover { border-color: var(--line-strong); }
.fz-toggle[aria-pressed="true"] { border-color: var(--interactive); background: var(--interactive-tint); }
.fz-swatches { display: grid; grid-template-columns: repeat(2, 9px); gap: 2px; flex: none; opacity: .45; }
.fz-toggle[aria-pressed="true"] .fz-swatches { opacity: 1; }
.fz-swatches i { width: 9px; height: 9px; border-radius: 2px; }
.fz-toggle-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fz-toggle-text b { font-size: 13px; font-weight: 600; }
.fz-toggle-text small { font-size: 11px; color: var(--ink-mute); }
.fz-stop {
  min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px; display: grid; place-items: center;
  font: 700 10.5px/1 Montserrat, system-ui, sans-serif; color: #fff; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); cursor: default;
}
.fz-stop--rapid { background: #1f3f8f; }
.fz-stop--wt { background: #0a84c6; }
.fz-stop--pr { background: #3a4a5a; }
.fz-stop--parking { background: #6b7a8c; }
.fz-pop b { font-size: 14px; }
.fz-pop span { font-size: 12.5px; }
.fz-pop ul { margin: 6px 0 6px 16px; padding: 0; font-size: 12.5px; line-height: 1.5; }
.fz-pop small { display: block; font-size: 10.5px; color: #6b7280; line-height: 1.35; }

/* guided tour: the four chapters across the top of the card (js/story.js) */
.story-chapters { display: flex; gap: 3px; margin: 0 0 10px; flex-wrap: wrap; }
.story-chapters span { font-size: 9.5px; font-weight: 600; letter-spacing: 0; padding: 2px 6px; border-radius: 999px; color: var(--ink-mute); background: var(--fill-inset); white-space: nowrap; }
.story-chapters span.is-on { background: var(--interactive); color: var(--on-interactive, #fff); }
.story-meta { margin: 8px 0 0; font-size: 12px; font-weight: 600; color: var(--interactive-strong); }
.story-note { margin: 6px 0 0; font-size: 10.5px; line-height: 1.4; color: var(--ink-mute); }
/* determinate progress while the hero scene builds behind the screen (js/boot.js) */
#loading.is-determinate .load-bar { width: 220px; height: 3px; }
#loading.is-determinate .load-bar span { width: 0; animation: none; background: var(--accent-bright); transition: width .45s ease; }

/* ---- the cabin: loading screen as an airliner window (js/boot.js) ---- */
#loading.is-cabin {
  --p: 0;
  flex-direction: column; gap: 3.2vh;
  /* aircraft sidewall: warm off-white panel, soft light from the window */
  background: radial-gradient(ellipse 60% 55% at 50% 44%, #f6f3ee 0%, #e7e2da 55%, #cfc8bd 100%);
}
.cabin-window {
  position: relative; width: min(44vh, 62vw); height: min(62vh, 88vw);
  border-radius: 40% / 29%;                    /* rounded rectangle, as on an A320, not an oval */
  padding: 2.2vh;                              /* the moulded trim around the opening */
  background:
    radial-gradient(ellipse 80% 70% at 35% 25%, rgba(255,255,255,.7), rgba(255,255,255,0) 60%),
    linear-gradient(165deg, #fbf9f5 0%, #ece7df 55%, #d6cfc4 100%);
  box-shadow: 0 1px 0 #fff inset, 0 -2px 3px rgba(80,65,45,.10) inset,
              0 0 0 1px rgba(0,0,0,.05), 0 0 0 1.1vh rgba(255,255,255,.28), 0 18px 40px rgba(60,50,35,.22);
  transition: transform 1.1s cubic-bezier(.55, 0, .35, 1), border-radius 1.1s ease, padding 1.1s ease;
}
.cw-view {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: 38% / 27%;
  background: #0e2b43;
}
.cw-view img {
  position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover;
  will-change: transform, opacity;
}
/* the descent: cruise over the island, zooming toward Larnaca; then the approach over the bay */
.cw-cruise {
  transform-origin: 62% 53%;
  transform: scale(calc(1.05 + var(--p) * 1.9));
  opacity: calc(1 - max(0, (var(--p) - 0.55) * 4));
  transition: transform 1.2s linear, opacity .8s linear;
}
.cw-approach {
  transform-origin: 40% 58%;
  transform: scale(calc(1.25 + max(0, var(--p) - 0.55) * 0.9));
  opacity: calc(max(0, (var(--p) - 0.55) * 4));
  transition: transform 1.2s linear, opacity .8s linear;
}
/* clouds sliding past the window; thinner as we descend below them */
.cw-clouds {
  position: absolute; inset: -20% -60%; pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,255,255,0)) 10% 30% / 38% 22% no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.7), rgba(255,255,255,0)) 55% 62% / 46% 26% no-repeat,
    radial-gradient(closest-side, rgba(255,255,255,.8), rgba(255,255,255,0)) 85% 18% / 30% 18% no-repeat;
  filter: blur(6px);
  opacity: calc(0.75 - var(--p) * 0.55);
  animation: cw-drift 11s linear infinite;
}
.cw-clouds--b { animation-duration: 17s; animation-delay: -6s; opacity: calc(0.5 - var(--p) * 0.4); transform: scale(1.4); }
@keyframes cw-drift { from { transform: translateX(35%); } to { transform: translateX(-35%); } }
/* the double pane: a faint reflection and a vignette; its inset shadows are the reveal, the deep
   plastic tunnel between the trim and the pane, drawn here because the view's own inset shadow
   sits under the photos */
.cw-glass {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(125deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 30%),
              linear-gradient(305deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 18%),
              radial-gradient(ellipse at center, rgba(0,0,0,0) 58%, rgba(0,0,0,.30) 100%);
  box-shadow: inset 0 0 0 .9vh #e2dcd2, inset 0 0 0 calc(.9vh + 1px) rgba(70,60,45,.35),
              inset 0 1.6vh 1.8vh rgba(0,0,0,.30), inset 0 -.5vh 1vh rgba(255,255,255,.10);
}
/* the breather hole in the inner pane */
.cw-glass::after {
  content: ''; position: absolute; left: 50%; bottom: 12%; width: .35vh; height: .35vh; margin-left: -.17vh;
  border-radius: 50%; background: rgba(0,0,0,.22); box-shadow: 0 0 0 .5px rgba(255,255,255,.12);
  transition: opacity .4s;
}
/* the window shade, pulled up most of the way: it slides inside the opening, so the opening
   clips its top to the window's curve; a moulded lip and a finger pull along its lower edge */
.cw-shade {
  position: absolute; left: 0; right: 0; top: 0; height: 12%;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.018) 0 1px, rgba(0,0,0,0) 1px 3px),
    linear-gradient(#f4f1eb, #e6e0d6 85%, #d3cbbf);
  border-bottom: .45vh solid #cbc2b5;
  box-shadow: 0 .5vh 1.1vh rgba(0,0,0,.38), inset 0 -1px 0 rgba(255,255,255,.6);
  transition: opacity .6s;
}
.cw-shade::after {
  content: ''; position: absolute; left: 39%; right: 39%; bottom: .35vh; height: .7vh;
  border-radius: .4vh; background: linear-gradient(#bfb6a8, #d9d2c7);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
}
#loading.is-cabin .load-mark { text-align: center; }
.cabin-msg {
  margin: 0 0 12px !important; font-size: 15px !important; letter-spacing: .02em !important; text-transform: none !important;
  color: #4a4439 !important; font-weight: 500; transition: opacity .26s ease; min-height: 1.4em;
}
.cabin-msg.is-out { opacity: 0; }
.cabin-logo { display: block; margin: 14px auto 0 !important; opacity: .55 !important; }
#loading.is-cabin .load-bar { background: rgba(80, 70, 55, .15); }
#loading.is-cabin.is-determinate .load-bar span { background: #22647f; }
/* the arrival: the window opens past the screen edges and the cabin falls away */
#loading.is-arriving .cabin-window { transform: scale(7); border-radius: 0; padding: 0; }
#loading.is-arriving .cw-shade, #loading.is-arriving .cw-glass::after, #loading.is-arriving .load-mark { opacity: 0; transition: opacity .4s; }
#loading.is-arriving { background: transparent; transition: background .9s ease .3s; }
@media (prefers-reduced-motion: reduce) { .cw-clouds { animation: none; } }

/* ---- how to move round the map (js/navhelp.js): semi-transparent card, large close button ---- */
.navhelp {
  position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 16px;
  background: rgba(14, 33, 57, 0.16); opacity: 0; transition: opacity 0.26s ease;
}
.navhelp.is-open { opacity: 1; }
.navhelp.is-closing { opacity: 0; }
.navhelp-card {
  position: relative; width: min(860px, 100%); max-height: calc(100dvh - 32px); overflow: auto;
  padding: 28px 28px 22px; border-radius: 18px; color: var(--ink);
  background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: var(--shadow); transform: translateY(10px) scale(0.98); transition: transform 0.26s ease;
}
.navhelp.is-open .navhelp-card { transform: none; }
.navhelp-card h2 { margin: 0 56px 4px 0; font-size: 1.35rem; }
.navhelp-sub { margin: 0 56px 18px 0; color: var(--ink-dim); }
.navhelp-x {
  position: absolute; top: 14px; right: 14px; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; border: 2px solid #fff; cursor: pointer;
  background: #0e2139; color: #fff; box-shadow: 0 4px 14px rgba(14, 33, 57, 0.35);
  transition: transform 0.15s ease, background 0.15s ease;
}
.navhelp-x svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.navhelp-x:hover { transform: scale(1.08); background: #c0392b; }
.navhelp-x:focus-visible { outline: 3px solid var(--interactive); outline-offset: 3px; }
.navhelp-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.navhelp-col { padding: 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.5); border: 1px solid var(--line); }
.navhelp-col.is-yours { border-color: var(--interactive); box-shadow: inset 0 0 0 1px var(--interactive); }
.navhelp-col h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 1rem; }
.navhelp-col h3 svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.navhelp-col h3 em { margin-left: auto; font-style: normal; font-size: 0.72rem; font-weight: 600; color: var(--interactive); white-space: nowrap; }
.navhelp-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.navhelp-col li { display: grid; gap: 2px; font-size: 0.9rem; color: var(--ink-dim); }
.navhelp-g { justify-self: start; padding: 2px 8px; border-radius: 6px; font-weight: 600; color: var(--ink); background: var(--fill-inset); border: 1px solid var(--line); }
.navhelp-hint { margin: 16px 0 14px; font-size: 0.88rem; color: var(--ink-dim); }
.navhelp-go {
  display: block; margin-left: auto; padding: 10px 22px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 600; background: var(--interactive); color: var(--on-interactive);
}
.navhelp-go:hover { background: var(--interactive-strong); }
:root[data-theme="dark"] .navhelp-card { background: rgba(16, 28, 44, 0.72); border-color: rgba(255, 255, 255, 0.12); }
:root[data-theme="dark"] .navhelp-col { background: rgba(255, 255, 255, 0.05); }
@media (max-width: 720px) {
  .navhelp-card { padding: 22px 16px 16px; }
  .navhelp-cols { grid-template-columns: 1fr; }
  .navhelp-col:not(.is-yours) ul { display: none; }    /* phones: the touch rows; the other cards fold to a title */
  .navhelp-col:not(.is-yours) { padding: 10px 14px; }
  .navhelp-col:not(.is-yours) h3 { margin: 0; }
}