/* ============================================================
   Nilkanth Yatra — design tokens
   ============================================================ */
:root {
  --ink: #1e1a16;
  --ink-2: #4a433b;
  --muted: #8b8378;
  --faint: #b9b1a5;
  --rule: #ece7df;
  --wash: #f7f4ef;          /* hover / track fills only, never page bg */
  --gold: #f2c230;          /* stop discs, a nod to the original map */
  --gold-ink: #6b5205;
  --saffron: #e2701b;       /* the one accent: progress + active */
  --saffron-soft: rgba(226, 112, 27, .14);

  --panel-w: 372px;
  /* spacing scale: every padding, margin and gap uses one of these */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px;
  --pad: var(--s6);
  --radius: 12px;
  --shadow: 0 1px 2px rgba(30, 26, 22, .06), 0 8px 28px rgba(30, 26, 22, .14);

  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: #ffffff; color: var(--ink);
  font: 400 14px/1.5 var(--sans);
  font-variant-numeric: lining-nums tabular-nums;
  -webkit-font-smoothing: antialiased;
}
body { display: flex; overflow: hidden; }
button { font: inherit; color: inherit; }
/* One line, always: headings, labels, buttons and values never wrap */
h1, h2, button, label, output, dt, dd, .eyebrow, .readout, .region, .badge, .seg, .chip, .link,
.region-head, #card .meta, .sky-facts, .sky-toggle, .regions span, .wx { white-space: nowrap; }
svg { display: block; }

/* ============================================================
   Panel
   ============================================================ */
#panel {
  width: var(--panel-w); flex: 0 0 var(--panel-w); height: 100%;
  display: flex; flex-direction: column;
  background: #ffffff; border-right: 1px solid var(--rule);
  z-index: 2;
}
#panel > * { animation: rise .7s var(--ease) both; }
#panel > :nth-child(2) { animation-delay: .08s; }
#panel > :nth-child(3) { animation-delay: .16s; }
#panel > :nth-child(4) { animation-delay: .24s; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

.intro { padding: var(--s7) var(--pad) var(--s6); }
.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
  display: flex; justify-content: space-between; align-items: baseline;
}
.eyebrow span { color: var(--muted); font-weight: 500; }
h1 {
  font: 400 52px/1 var(--serif); letter-spacing: -.015em;
  margin: var(--s4) 0 var(--s3);
}
h1 em { font-style: italic; color: var(--saffron); }
.lede { margin: 0 0 var(--s6); font-size: 14px; line-height: 1.55; color: var(--ink-2); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border-top: 1px solid var(--ink); }
.stats div { padding-top: var(--s2); }
.stats div + div { padding-left: var(--s3); border-left: 1px solid var(--rule); }
.stats dt { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.stats dd { margin: var(--s1) 0 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }

/* ---------- Player ---------- */
.player { padding: 0 var(--pad) var(--s4); }
.transport { display: flex; gap: var(--s2); }
.transport button {
  height: 42px; border-radius: 999px; border: 1px solid var(--rule); background: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  cursor: pointer; transition: border-color .2s, background .2s, color .2s, transform .1s;
}
.transport button:active { transform: scale(.97); }
.transport .icon { width: 42px; flex: 0 0 42px; }
.transport .icon svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.transport .icon:hover { border-color: var(--ink); }
.transport .play {
  flex: 1; background: var(--ink); border-color: var(--ink); color: #fff;
  font-size: 14px; font-weight: 500; letter-spacing: .01em;
}
.transport .play:hover { background: #000; }
.transport .play svg { width: 14px; height: 14px; fill: currentColor; }
.transport .play .i-pause, .transport .play.playing .i-play { display: none; }
.transport .play.playing .i-pause { display: block; }
.transport .play.playing { background: var(--saffron); border-color: var(--saffron); }

.readout {
  display: flex; justify-content: space-between; margin-top: var(--s2);
  font-size: 12px; color: var(--muted);
}

/* ---------- View controls ---------- */
.view {
  padding: var(--s4) var(--pad); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3);
}
.view .row { display: flex; align-items: center; gap: var(--s2); }
.seg { display: inline-flex; background: var(--wash); border-radius: 8px; padding: 2px; }
.seg button {
  border: 0; background: none; cursor: pointer; border-radius: 6px;
  padding: var(--s1) var(--s3); font-size: 12px; font-weight: 500; color: var(--muted); line-height: 20px;
  transition: background .2s, color .2s, box-shadow .2s;
}
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.seg.small button { padding: var(--s1) var(--s2); font-size: 12px; }
.view .link {
  margin-left: auto; border: 0; background: none; cursor: pointer; padding: 0;
  font-size: 12px; font-weight: 500; color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--faint); text-underline-offset: 3px;
}
.view .link:hover { text-decoration-color: var(--ink); }
.view .print-link { margin-left: var(--s4); display: inline-flex; align-items: center; gap: var(--s1); text-decoration: none; }
.view .print-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
.view .print-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.chip { cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s3) var(--s1) var(--s2); border-radius: 999px; border: 1px solid var(--rule); line-height: 18px;
  font-size: 12px; color: var(--muted); transition: all .2s;
}
.chip span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); transition: background .2s; }
.chip input:checked + span { color: var(--ink); border-color: #d9d2c6; }
.chip input:checked + span::before { background: var(--saffron); }
.chip input:focus-visible + span { outline: 2px solid var(--saffron); outline-offset: 1px; }
.field { display: flex; align-items: center; gap: var(--s2); font-size: 12px; color: var(--muted); flex: 1; min-width: 0; }
.field output { font-size: 12px; color: var(--ink); width: 32px; }

input[type=range].thin {
  -webkit-appearance: none; appearance: none; height: 3px; border-radius: 2px; flex: 1; min-width: 40px;
  background: linear-gradient(to right, var(--ink) var(--p, 50%), var(--rule) var(--p, 50%));
}
input[type=range].thin::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 1.5px solid var(--ink); cursor: pointer;
}
input[type=range].thin::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 1.5px solid var(--ink); }

/* ---------- Stop list ---------- */
#stop-list { list-style: none; margin: 0; padding: 0 0 var(--s6); overflow-y: auto; flex: 1; scrollbar-width: thin; }
#stop-list .region-head {
  position: sticky; top: 0; z-index: 1; background: rgba(255,255,255,.96); backdrop-filter: blur(6px);
  display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--s4) var(--pad) var(--s2); border-bottom: 1px solid var(--rule);
}
#stop-list .region-head b { font: 400 20px/1 var(--serif); font-style: italic; }
#stop-list .region-head small { font-size: 11px; color: var(--muted); letter-spacing: .06em; }
#stop-list .stop {
  position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--s3); align-items: center;
  padding: var(--s2) var(--pad); cursor: pointer; transition: background .15s;
}
#stop-list .stop:hover { background: var(--wash); }
#stop-list .stop::before {
  content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px;
  background: var(--saffron); transform: scaleY(0); transition: transform .3s var(--ease);
}
#stop-list .stop.active::before { transform: scaleY(1); }
#stop-list .n {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 10px; font-weight: 600; color: var(--muted); border: 1px solid var(--rule); background: #fff;
  transition: all .3s var(--ease);
}
#stop-list .visited .n { background: var(--gold); border-color: var(--gold); color: var(--ink); }
#stop-list .active .n { background: var(--ink); border-color: var(--ink); color: var(--gold); }
/* one line per stop: alternate name inline; overlong names end in an ellipsis (full name in the tooltip) */
#stop-list .t { font-size: 14px; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#stop-list .t small { font-size: 12px; color: var(--muted); margin-left: var(--s2); }
#stop-list .t.no-alt small { display: none; }
#stop-list .km { font-size: 11px; color: var(--faint); white-space: nowrap; }
#stop-list .active .km { color: var(--ink); }

#panel footer { font-size: 10px; line-height: 1.6; color: var(--muted); padding: var(--s3) var(--pad) var(--s4); border-top: 1px solid var(--rule); }

/* ============================================================
   Map chrome
   ============================================================ */
#map { flex: 1; height: 100%; position: relative; --ms: 18px; }
.maplibregl-ctrl-group { border-radius: 10px !important; box-shadow: var(--shadow) !important; overflow: hidden; }
.maplibregl-ctrl-group button { width: 32px; height: 32px; }
.maplibregl-ctrl-bottom-right { bottom: 84px; }
.maplibregl-ctrl-attrib { font: 10px var(--sans); background: rgba(255,255,255,.8) !important; border-radius: 6px; }

/* ---------- Stop markers ----------
   Near/mid zoom: numbered discs. Overview (.z-far): small route dots, with
   name labels only on milestone stops. */
.stop-marker { width: var(--ms); height: var(--ms); cursor: pointer; }
.stop-marker .disc {
  position: relative; width: 100%; height: 100%; border-radius: 50%;
  display: grid; place-items: center;
  font: 600 calc(var(--ms) * .5)/1 var(--sans); letter-spacing: -.02em;
  background: #fff; color: #6b6359; border: 1.25px solid #a89f92;
  box-shadow: 0 1px 2px rgba(30,26,22,.18), 0 2px 6px rgba(30,26,22,.10);
  transition: background .35s, color .35s, border-color .35s, transform .3s var(--ease), width .3s, height .3s;
}
.stop-marker.visited .disc { background: var(--gold); border-color: #c4950f; color: var(--ink); animation: pop .45s var(--ease); }
.stop-marker.active .disc { background: var(--ink); color: var(--gold); border-color: #fff; border-width: 1.5px; transform: scale(1.4); }
.stop-marker.active .disc::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--saffron); animation: ripple 2.2s var(--ease) infinite;
}
.stop-marker:hover .disc { transform: scale(1.25); }
.stop-marker.active:hover .disc { transform: scale(1.5); }
.stop-marker .tip {
  position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 4px);
  white-space: nowrap; background: #fff; color: var(--ink); border-radius: 6px; box-shadow: var(--shadow);
  font: 500 12px var(--sans); padding: 5px 9px; opacity: 0; pointer-events: none;
  transition: opacity .15s, transform .15s;
}
.stop-marker:hover .tip { opacity: 1; transform: translate(-50%, 0); }
.stop-marker .mlabel { display: none; }
@keyframes pop { 40% { transform: scale(1.35); } }
@keyframes ripple { from { transform: scale(1); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }

/* Walking-view names beside the discs (placement + collisions handled in JS) */
.stop-marker .slabel {
  position: absolute; top: 50%; left: calc(100% + 7px); transform: translateY(-50%);
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .25s;
  /* a real outline reads on snow and hillshade where a soft glow doesn't */
  -webkit-text-stroke: 3.5px rgba(255,255,255,.92); paint-order: stroke fill;
  text-shadow: 0 1px 6px rgba(255,255,255,.9);
}
.stop-marker .slabel.l { left: auto; right: calc(100% + 7px); text-align: right; }
.stop-marker.active .slabel { left: calc(100% + 11px); }
.stop-marker.active .slabel.l { left: auto; right: calc(100% + 11px); }
.stop-marker .slabel.on { opacity: 1; }
.stop-marker .slabel b { display: block; font: 400 15px/1.05 var(--serif); color: #7a7166; }
.stop-marker.visited .slabel b { color: var(--ink-2); }
.stop-marker.active .slabel b { color: var(--ink); font-size: 17px; }
.stop-marker .slabel small { display: none; }
.stop-marker .slabel.next small {
  display: block; margin-top: 3px;
  font: 600 10px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--saffron);
  -webkit-text-stroke-width: 2.5px;
}
.stop-marker:has(.slabel.on):hover .tip { opacity: 0; }
.theme-satellite .stop-marker .slabel { -webkit-text-stroke: 3.5px rgba(20,16,12,.7); text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.theme-satellite .stop-marker .slabel b { color: rgba(255,255,255,.75); }
.theme-satellite .stop-marker.visited .slabel b, .theme-satellite .stop-marker.active .slabel b { color: #fff; }
.theme-satellite .stop-marker .slabel.next small { color: #ffc27a; }
.z-far .stop-marker .slabel { display: none; }

/* Overview: dots, not numbers */
.z-far .stop-marker { width: 7px; height: 7px; }
.z-far .stop-marker.key { width: 9px; height: 9px; }
.z-far .stop-marker .disc { color: transparent; border-width: 1.25px; box-shadow: 0 0 0 1.5px rgba(255,255,255,.85); }
.z-far .stop-marker:not(.visited) .disc { background: #fff; border-color: #8b8378; }
.z-far .stop-marker.key .disc { border-color: var(--ink); }
.z-far .stop-marker.visited .disc { border-color: #b8890c; }
.z-far .stop-marker.active .disc { background: var(--saffron); border-color: #fff; transform: scale(1.6); }
.z-far .stop-marker.active .disc::after { inset: -3px; border-width: 1.5px; }
.z-far .stop-marker:hover .disc { transform: scale(1.5); }
.z-far .stop-marker .mlabel {
  display: block; position: absolute; white-space: nowrap; pointer-events: none;
  font: 400 14px/1 var(--serif); color: var(--ink); letter-spacing: .01em;
  text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 8px rgba(255,255,255,.9);
}
.side-right .mlabel { left: calc(100% + 6px); top: 50%; transform: translateY(-52%); }
.side-left .mlabel { right: calc(100% + 6px); top: 50%; transform: translateY(-52%); }
.side-top .mlabel { left: 50%; bottom: calc(100% + 5px); transform: translateX(-50%); }
.side-bottom .mlabel { left: 50%; top: calc(100% + 5px); transform: translateX(-50%); }
.theme-satellite.z-far .stop-marker .mlabel { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.85); }

.traveler { width: 26px; height: 26px; pointer-events: none; display: grid; place-items: center; }
.traveler::before {
  content: ''; position: absolute; width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle, rgba(226,112,27,.55), rgba(226,112,27,0) 70%);
  animation: breathe 2.4s ease-in-out infinite;
}
.traveler::after {
  content: ''; width: 10px; height: 10px; border-radius: 50%;
  background: var(--saffron); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
@keyframes breathe { 50% { transform: scale(1.5); opacity: .6; } }

/* ---------- Labels ---------- */
.city { pointer-events: none; }
.city .fade { display: flex; align-items: center; gap: 5px; }
/* MapLibre writes inline opacity on marker roots (terrain occlusion), so zoom fades act on .fade */
.fade { transition: opacity .4s; }
.city.left .fade { flex-direction: row-reverse; }
.city i { width: 5px; height: 5px; background: var(--ink); border: 1px solid #fff; flex: 0 0 auto; }
.city span { font: 600 10px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.area { pointer-events: none; white-space: nowrap; text-align: center; }
.area.country { font: 400 14px/1 var(--serif); letter-spacing: .38em; text-transform: uppercase; }
.area.country.xl { font-size: 30px; letter-spacing: .6em; }
.area.sea { font: italic 400 16px/1 var(--serif); letter-spacing: .12em; }
.area.range { font: italic 400 15px/1 var(--serif); letter-spacing: .5em; text-transform: uppercase; }

/* theme-specific label ink */
.theme-atlas .city span { color: var(--ink); text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff; }
.theme-atlas .area.country { color: rgba(62, 46, 32, .62); }
.theme-atlas .area.sea { color: rgba(30, 64, 92, .55); }
.theme-atlas .area.range { color: rgba(90, 62, 38, .5); }
.theme-satellite .city span { color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.theme-satellite .city.left .fade { flex-direction: row-reverse; }
.city i { background: #fff; border-color: var(--ink); }
.theme-satellite .area { color: rgba(255,255,255,.88); text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.theme-satellite .stop-marker .disc { box-shadow: 0 1px 6px rgba(0,0,0,.6); }

/* zoom-dependent label visibility */
.z-mid .area .fade, .z-near .area .fade { opacity: 0; }
.z-far .city .fade { opacity: 0; }

/* ============================================================
   Stop card
   ============================================================ */
#card {
  position: absolute; left: calc(var(--panel-w) + var(--s6)); top: var(--s6); z-index: 3;
  width: 344px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: var(--s5) var(--s6); transition: opacity .4s var(--ease), transform .4s var(--ease);
}
#card.hidden { opacity: 0; transform: translateY(-6px); pointer-events: none; }
#card.swap .card-in > * { animation: rise .55s var(--ease) backwards; }
#card.swap .card-in > :nth-child(2) { animation-delay: .04s; }
#card.swap .card-in > :nth-child(3) { animation-delay: .08s; }
#card.swap .card-in > :nth-child(4) { animation-delay: .12s; }
#card.swap .card-in > :nth-child(5) { animation-delay: .16s; }
.card-top { display: flex; align-items: center; gap: var(--s2); }
.badge {
  min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center;
  background: var(--gold); color: var(--ink); font-size: 12px; font-weight: 600;
}
.region { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
/* title shrinks to fit one line (see fitText in app.js) */
#card h2 { font: 400 32px/1.1 var(--serif); margin: var(--s3) 0 0; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; }
#card .alt { font-size: 13px; color: var(--muted); margin-top: var(--s1); }
#card .note { font: italic 400 17px/1.4 var(--serif); color: var(--ink-2); margin: var(--s3) 0 0; }
#card .alt:empty, #card .note:empty { display: none; }
#card .meta { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--rule); }
#card .meta div + div { padding-left: var(--s4); border-left: 1px solid var(--rule); }
#card .meta b { display: block; font-size: 16px; font-weight: 600; }
#card .meta small { font-size: 11px; color: var(--muted); }

#card .wx {
  display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3);
  font-size: 12px; color: var(--ink-2);
}
#card .wx-ico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
#card .wx-elev { margin-left: auto; color: var(--muted); }
#card .wx-ico { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--wash); transition: background .6s, color .6s; }
#card .wx[data-wx=snow] .wx-ico, #card .wx[data-wx=flurries] .wx-ico { background: #e7eff6; color: #3d6a8e; }
#card .wx[data-wx=rain] .wx-ico { background: #e3ebef; color: #3f5f72; }
#card .wx[data-wx=mist] .wx-ico { background: #eef0ee; color: #66706c; }
#card .wx[data-wx=heat] .wx-ico { background: #fbeedd; color: #b4651a; }

/* ---------- Night sky section ---------- */
#card { max-height: calc(100% - 140px); overflow-y: auto; scrollbar-width: none; }
/* when the card scrolls, fade its lower edge instead of slicing through a line of text */
#card.scrolls:not(.at-end) { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); }
.sky-sec { margin-top: var(--s4); border-top: 1px solid var(--rule); }
.sky-toggle {
  width: 100%; display: flex; align-items: center; gap: var(--s2); padding: var(--s3) 0 var(--s1);
  border: 0; background: none; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--ink);
}
.sky-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sky-toggle .sky-date { margin-left: auto; color: var(--muted); font-weight: 400; }
.sky-toggle .chev { transition: transform .3s var(--ease); }
.sky-open .sky-toggle .chev { transform: rotate(180deg); }
.sky-body { display: none; }
.sky-open .sky-body, .looking .sky-body { display: block; animation: rise .45s var(--ease) both; }
.sky-chart { display: block; width: min(100%, 264px); aspect-ratio: 1; margin: var(--s3) auto var(--s1); }
.looking .sky-chart { display: none; }
.looking .wx { display: none; }
.sky-facts { display: grid; grid-template-columns: 1fr 1fr; margin-top: var(--s2); }
.sky-facts div + div { padding-left: var(--s4); border-left: 1px solid var(--rule); }
.sky-facts b { display: block; font: 400 20px/1.1 var(--serif); }
.sky-facts small { font-size: 11px; color: var(--muted); }
.sky-time { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s2); margin-top: var(--s3); font-size: 11px; color: var(--muted); white-space: nowrap; }
.sky-time output { grid-column: 1 / -1; text-align: center; font-size: 12px; color: var(--ink); }
.lookup {
  width: 100%; margin-top: var(--s3); height: 40px; border-radius: 999px; cursor: pointer;
  border: 1px solid #0d1830; background: #0d1830; color: #e9eefb; font-size: 13px; font-weight: 500;
  transition: background .2s;
}
.lookup:hover { background: #1b2a4c; }
.sky-note { font-size: 11px; color: var(--muted); margin: var(--s2) 0 0; line-height: 1.5; }

/* ---------- Look-up (night) mode ---------- */
#dome { position: absolute; inset: 0; width: 100%; height: 100%; }
.night .area .fade, .night .city .fade { opacity: 0; }
.night .stop-marker:not(.active) > *, .night .traveler { visibility: hidden; }
.night .stop-marker.active .slabel b { color: #fff; }
.night .stop-marker .slabel { -webkit-text-stroke-color: rgba(10,16,30,.8); }
.night ~ #timeline, body:has(.night) #timeline { opacity: .35; pointer-events: none; transition: opacity .4s; }

/* ============================================================
   Weather overlay
   ============================================================ */
#fx-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#fx { position: absolute; inset: 0; width: 100%; height: 100%; }
#fx-tint { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
#fx-tint[data-wx=snow] { background: radial-gradient(ellipse at 50% 45%, rgba(235,242,248,0) 35%, rgba(228,237,245,.6) 100%), linear-gradient(rgba(220,232,242,.22), rgba(220,232,242,.22)); }
#fx-tint[data-wx=rain] { background: radial-gradient(ellipse at 50% 50%, rgba(44,60,76,.22) 30%, rgba(44,60,76,.48) 100%); }
#fx-tint[data-wx=mist] { background: radial-gradient(ellipse at 50% 55%, rgba(246,246,242,0) 30%, rgba(246,246,242,.7) 100%); }
#fx-tint[data-wx=heat] { background: radial-gradient(ellipse at 50% 40%, rgba(255,214,150,0) 40%, rgba(255,190,110,.28) 100%); }

/* ============================================================
   Timeline
   ============================================================ */
#timeline {
  position: absolute; left: calc(var(--panel-w) + var(--s6)); right: var(--s6); bottom: var(--s6); z-index: 3;
  /* no backdrop-filter: blurring a live WebGL canvas costs a full-screen pass every frame */
  background: #fff;
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: var(--s3) var(--s4) var(--s2);
}
#scrub {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 4px; margin: 0;
  border-radius: 2px; cursor: pointer;
  background: linear-gradient(to right, var(--saffron) var(--p, 0%), var(--rule) var(--p, 0%));
}
#scrub::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; border: 2px solid var(--saffron); box-shadow: 0 1px 4px rgba(0,0,0,.2);
  transition: transform .15s;
}
#scrub:hover::-webkit-slider-thumb { transform: scale(1.15); }
#scrub::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--saffron); }
.regions { display: flex; margin-top: var(--s2); }
.regions span {
  overflow: hidden; white-space: nowrap;
  border-left: 1px solid var(--rule); padding: 0 0 0 var(--s2); line-height: 16px;
  font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
  cursor: pointer; transition: color .3s;
}
.regions span:hover { color: var(--muted); }
.regions span.on { color: var(--ink); border-left-color: var(--saffron); }
/* a label that doesn't fit its segment is hidden rather than cut mid-word (name stays in the tooltip) */
.regions span.tight { color: transparent !important; }

/* ============================================================
   Responsive + motion
   ============================================================ */
@media (max-width: 820px) {
  body { flex-direction: column-reverse; }
  #panel { width: 100%; flex: 0 0 46%; height: 46%; border-right: 0; border-top: 1px solid var(--rule); }
  .intro { padding: var(--s5) var(--pad) var(--s4); }
  h1 { font-size: 36px; margin: var(--s2) 0 0; }
  .lede, .stats { display: none; }
  #card { left: var(--s3); right: var(--s3); top: var(--s3); width: auto; }
  #timeline { left: var(--s3); right: var(--s3); bottom: calc(46% + var(--s3)); }
  .regions { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}