/* ════════════════════════════════════════════════════════════════════════
   THE LONG WAY EAST — a night-atlas visual system.
   Deep space, warm sand, one continuous ember→violet journey spectrum.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --void:     #06090d;
  --night:    #090d13;
  --night-2:  #0c1118;
  --panel:    #0b1017;
  --panel-2:  #101722;
  --ink:      #f3ecdd;
  --ink-2:    #c6bdad;
  --ink-3:    #8c8578;
  --ink-4:    #5d5a52;
  --line:     rgba(243, 236, 221, 0.11);
  --line-2:   rgba(243, 236, 221, 0.055);
  --ember:    #ff7a45;
  --gold:     #efc55e;
  --jade:     #75c5a3;
  --sky:      #5bb0c1;
  --violet:   #8b77b8;
  --info:     #4f8ef7;
  --glass:    rgba(9, 13, 19, 0.72);
  --glass-2:  rgba(9, 13, 19, 0.9);

  --f-disp: "Fraunces", "Newsreader", Georgia, serif;
  --f-serif: "Fraunces", "Newsreader", Georgia, serif;
  --f-sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Type scale, in px, as literals so each rule reads at a glance.
     The micro tiers were set for a print page and then lived on a screen:
     7–9px mono uppercase is legible only if you lean in, which nobody does
     with a map underneath. The floor is now 9.5–11.5px for labels and 12px for
     mono metadata; body sans starts at 14px. What the lift bought:
       label / kicker        9.5 – 11.5px  (was 6.5 – 9)
       mono metadata, pills  12 – 13px     (was 9.5 – 11)
       prose                 14 – 16px     (was 12 – 14.5)
       heads / numerals      as before, +1
     The phone breakpoints below keep their own smaller steps — they moved up by
     the same mapping, not to the desktop sizes. Display sizes are clamp()ed and
     were never the problem. Adding 2px is not the lever that fixes a layout: if
     a row needs more room, raise the row. */

  --hdr: 66px;
  --spine: 44px;
  --shadow-1: 0 2px 10px rgba(0,0,0,.35), 0 20px 60px rgba(0,0,0,.35);
  --shadow-2: 0 8px 30px rgba(0,0,0,.5), 0 40px 120px rgba(0,0,0,.55);

  /* Satellite basemap treatment — the single dial for map tone. */
  --map-tile-filter: saturate(.85) brightness(.88) contrast(1.18);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  height: 100%;
  background: var(--void);
  color: var(--ink);
  font-family: var(--f-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  overflow: hidden;
  background-image:
    radial-gradient(1200px 800px at 78% -10%, rgba(91, 176, 193, 0.07), transparent 60%),
    radial-gradient(1000px 700px at 8% 110%, rgba(255, 122, 69, 0.06), transparent 60%);
}
/* Film grain over the whole page — the analog counterweight to all this UI. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 3000;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
button:focus-visible, [role="button"]:focus-visible {
  outline: 1px solid var(--ember);
  outline-offset: 3px;
}
::selection { background: rgba(255,122,69,.35); color: var(--ink); }

/* No visible scrollbars. The shell is a fixed stage, and the panels that do
   scroll (binder, detail sheet, ledger table, the reel) read as pages — a
   10px rail of chrome down the side of every one of them was the loudest thing
   on screen. Nothing is taken away: wheel, trackpad, keys, scrollbar-gutter and
   touch all still scroll normally; only the rail is withheld. */
html { scrollbar-width: none; -ms-overflow-style: none; }
::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Firefox ignores ::-webkit-scrollbar, so the containers opt out by name. */
.page, .detail-scroll, .binder-scroll, .ledger-table-wrap, .reel-track { scrollbar-width: none; }

.kicker {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.muted { color: var(--ink-3); }

/* ════════════════════════════════════════════════════════════════════════
   APP SHELL
   ════════════════════════════════════════════════════════════════════════ */
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--void);
}
.app-body {
  position: relative;
  flex: 1;
  min-height: 0;
}

/* ── Header ───────────────────────────────────────────────────────────── */
.topbar {
  position: relative;
  z-index: 1100;
  flex: none;
  height: var(--hdr);
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 26px;
  border-bottom: 1px solid var(--line-2);
  background: linear-gradient(to bottom, rgba(6,9,13,.96), rgba(6,9,13,.72));
  backdrop-filter: blur(18px);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  flex-shrink: 0;
}
.brand-mark {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ember);
  background: radial-gradient(circle at 35% 25%, rgba(255,122,69,.18), transparent 65%);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), border-color .3s;
}
.brand:hover .brand-mark { transform: rotate(45deg); border-color: rgba(255,122,69,.5); }
.brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.brand-name {
  font-family: var(--f-disp);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  white-space: nowrap;
}
.brand-name em { font-style: italic; color: var(--ember); }
.brand-sub {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 12px;
}
.topnav button {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  border: 0;
  background: transparent;
  padding: 8px 13px;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color .18s, background .18s;
}
.topnav-index {
  font-size: 9.5px;
  color: var(--ink-4);
  letter-spacing: .04em;
  transition: color .18s;
}
.topnav button:hover { color: var(--ink); background: rgba(243,236,221,.05); }
.topnav button.is-active { color: var(--ink); background: rgba(243,236,221,.075); }
.topnav button.is-active .topnav-index { color: var(--ember); }

.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}
.dayclock { display: flex; align-items: center; gap: 9px; }
.dayclock-ring {
  position: relative;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: conic-gradient(var(--ember) var(--p, 0deg), rgba(243,236,221,.1) 0);
  display: grid; place-items: center;
}
.dayclock-ring::before {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--void);
}
.dayclock-ring span {
  position: relative;
  z-index: 1;
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
}
.dayclock-meta { display: flex; flex-direction: column; gap: 1px; }
.dayclock-of {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dayclock-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* Sync dropdown (Calendar + Tasks) */
.sync-wrap { position: relative; display: inline-flex; }
.sync-wrap > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 999px;
  padding: 6px 11px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  transition: all .18s;
}
.sync-wrap > button:hover { border-color: rgba(243,236,221,.3); color: var(--ink); }
.sync-backdrop { position: fixed; inset: 0; z-index: 50; }
.sync-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  min-width: 160px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-2);
  padding: 5px;
  animation: menuIn .16s ease both;
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sync-menu button {
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 8px;
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
}
.sync-menu button:hover:not(:disabled) { background: rgba(243,236,221,.07); color: var(--ink); }
.sync-menu button:disabled { opacity: .45; cursor: default; }

/* ── The year spine ──────────────────────────────────────────────────── */
.spine {
  position: relative;
  z-index: 1050;
  flex: none;
  height: var(--spine);
  padding: 0 24px;
  /* Month row + bar as one block, centred in the strip. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(6,9,13,.86);
  border-bottom: 1px solid var(--line-2);
  backdrop-filter: blur(14px);
}
.spine-months { position: relative; height: 17px; }
.spine-months span {
  position: absolute;
  top: 3px;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  color: var(--ink-4);
  white-space: nowrap;
}
.spine-months span i { font-style: normal; margin-left: 2px; opacity: .45; }
.spine-track {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 0;
  height: 18px;
  padding-top: 4px;
  /* Height of a day's bar. The today/picked markers centre on it. */
  --tick-h: 6px;
}
.spine-tick {
  appearance: none;
  flex: 1 1 0;
  min-width: 0;
  height: 6px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 1px;
  background: var(--tint, var(--ember));
  opacity: .22;
  cursor: pointer;
  transition: opacity .18s, height .18s, bottom .18s, filter .18s;
}
.spine-tick.is-past { opacity: .85; }
.spine-tick.is-current { opacity: 1; }
.spine-tick.is-selected { opacity: 1; filter: saturate(1.15) brightness(1.12); }
.spine-tick:hover {
  opacity: 1;
  height: 11px;
  /* Ticks are bottom-aligned, so growing one lifts it off centre. Nudge it
     back down by half the extra height to keep it centred on the bar. */
  position: relative;
  bottom: calc((var(--tick-h) - 11px) / 2);
}
.spine-tick.is-future { opacity: .3; }
.spine-tick.is-now {
  opacity: 1;
  background: var(--ink);
  box-shadow: 0 0 10px rgba(255,255,255,.55);
}
/* Today's playhead. One 2px bar, deliberately thicker than the 1px hairline it
   replaced: a subpixel-positioned 1px line renders as two faint columns. No
   dot and no extra tall tick, so nothing crosses it. */
.spine-now {
  position: absolute;
  top: calc(100% - var(--tick-h) / 2);
  height: calc(var(--tick-h) * 1.8);
  width: 2px;
  border-radius: 1px;
  background: var(--ink);
  box-shadow: 0 0 9px rgba(255,255,255,.45);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/* The day you clicked. The tick itself is the marker: taller than its
   neighbours, fully opaque, glowing in its own chapter colour. */
.spine-tick.is-focused {
  opacity: 1;
  height: calc(var(--tick-h) * 1.8);
  position: relative;
  bottom: calc(var(--tick-h) * -0.4);
  filter: saturate(1.25) brightness(1.3);
  box-shadow: 0 0 9px var(--tint, var(--ember));
}

/* Hover read-out: the date and the city the plan has you in that day. It sits
   below the bar so it never covers the header. */
.spine-tip {
  position: absolute;
  top: calc(100% + 7px);
  transform: translateX(-50%);
  z-index: 40;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(6,9,13,.95);
  box-shadow: 0 12px 28px rgba(0,0,0,.6);
  backdrop-filter: blur(10px);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
.spine-tip b { font-weight: 400; color: var(--ink-3); }
.spine-tip span { color: var(--ink); }
.spine-tip span::before { content: '·'; margin-right: 7px; color: var(--ink-4); }

/* "Unsynced" nudge — a quiet amber dot, no badge or banner. It appears when
   the itinerary or the to-dos have moved since the last successful push;
   the button's tooltip names which one is behind. */
.sync-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ember);
  display: inline-block;
  flex: 0 0 auto;
}
.sync-menu .sync-dot { margin-left: auto; }
/* A push in flight: the dot goes blue and blinks. On mobile the button is
   compact (no "Syncing…" label), so this is the whole progress cue. */
.sync-dot.is-busy {
  background: var(--info);
  animation: sync-blink 1s ease-in-out infinite;
}
@keyframes sync-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.2; }
}
@media (prefers-reduced-motion: reduce) {
  .sync-dot.is-busy { animation: none; }
}

/* ── Bottom nav (mobile) ─────────────────────────────────────────────── */
.bottomnav {
  flex: none;
  height: 60px;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  border-top: 1px solid var(--line);
  background: rgba(8,11,16,.96);
  backdrop-filter: blur(18px);
  z-index: 1100;
}
.bottomnav > button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.bottomnav > button.is-active { color: var(--ink); }
.bottomnav > button.is-active svg { color: var(--ember); }
.bottomnav .sync-wrap { flex: 1; display: flex; }
/* Same column as a view tab: icon, then label, so the two rows align across
   the whole bar. The stale/busy dot rides on the icon instead of becoming a
   third row that would push this label out of line. */
.bottomnav .sync-wrap > button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--ink-3);
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.bottomnav .sync-nav-icon { position: relative; display: inline-flex; }
.bottomnav .sync-nav-icon .sync-dot {
  position: absolute;
  top: -2px;
  right: -5px;
  margin: 0;
}
/* The menu hangs off the last tab, and the tab is flush with the screen edge:
   right:-30px pushed a 160px panel 30px past the viewport, where the app's
   overflow:hidden cut it in half. Anchor it inside the edge instead. */
.bottomnav .sync-menu {
  top: auto;
  bottom: calc(100% + 10px);
  right: 10px;
}

/* ════════════════════════════════════════════════════════════════════════
   ATLAS STAGE
   ════════════════════════════════════════════════════════════════════════ */
.atlas { position: absolute; inset: 0; overflow: hidden; }
.atlas-canvas { position: absolute; inset: 0; z-index: 0; }
.atlas-title, .atlas-tools, .reel, .atlas-vignette { transition: opacity .35s ease; }
.atlas-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Above the map's panes, below the title (20), reel (25) and tools (30). */
  z-index: 5;
  /* The chapter title and its metadata sit straight on the imagery, and the
     imagery has no respect for small type: a bright desert or a snowfield
     behind 12px mono is unreadable. The two edge gradients alone read as a
     frame, not as backing — by the "next up" row they had all but run out. The
     first layer is the one that does the work: a fixed throw anchored on the
     title corner, sized in px so it reaches zero inside the viewport on every
     side (a gradient that is still opaque at its own edge draws a rectangle)
     and fades out over the first ~800px of map. */
  background:
    radial-gradient(ellipse 820px 660px at 140px 160px, rgba(6,9,13,.76) 0%, rgba(6,9,13,.44) 42%, rgba(6,9,13,.15) 70%, rgba(6,9,13,0) 100%),
    linear-gradient(to bottom, rgba(6,9,13,.42) 0%, transparent 22%, transparent 62%, rgba(6,9,13,.74) 100%),
    linear-gradient(to right, rgba(6,9,13,.42) 0%, transparent 34%, transparent 72%, rgba(6,9,13,.22) 100%);
}

.atlas-title {
  position: absolute;
  z-index: 20;
  top: 34px;
  left: 34px;
  max-width: min(720px, 58vw);
  pointer-events: none;
}
.atlas-title > * { pointer-events: none; }
.atlas-title .atlas-name { pointer-events: auto; }
/* A finger on the giant name used to steal the gesture from the map. The name
   is a button, so a pinch with one thumb over the title hit the button and
   Leaflet/OrbitControls never saw a second touch — the one place on the stage
   where pinching simply did not work, and it is the biggest target on the
   screen. On touch it becomes scenery: the reel's current card opens the same
   chapter, and phones never showed the hover arrow that made the name read as
   a button in the first place. Desktop keeps the shortcut. */
@media (hover: none) {
  .atlas-title .atlas-name { pointer-events: none; }
}
.atlas-name {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border: 0;
  background: transparent;
  padding: 0 0 .16em;
  margin: 10px 0 4px;
  font-family: var(--f-disp);
  font-size: clamp(58px, 8.4vw, 132px);
  font-weight: 400;
  line-height: .84;
  letter-spacing: -0.055em;
  color: var(--ink);
  text-align: left;
  text-shadow: 0 10px 50px rgba(0,0,0,.55);
  transition: color .3s;
}
.atlas-name svg {
  flex: none;
  margin-top: .14em;
  color: var(--ember);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .25s, transform .25s;
}
.atlas-name:hover { color: #fffdf6; }
.atlas-name:hover svg { opacity: 1; transform: none; }
.atlas-title.is-long .atlas-name { font-size: clamp(45px, 6.3vw, 98px); line-height: .88; }
/* The title block is the one piece of UI with no surface of its own: it sits
   straight on the imagery. The corner scrim in .atlas-vignette does the heavy
   lifting, but a shadow on the text itself is the insurance — it survives a
   snowfield or a bright city grid sliding under the row while the map pans. */
.atlas-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink);
  text-transform: uppercase;
  margin-top: 6px;
  text-shadow: 0 1px 3px rgba(6,9,13,.95), 0 2px 14px rgba(6,9,13,.9);
  /* Above the display title: its descenders hang into this row. */
  position: relative;
  z-index: 1;
}
.atlas-weather {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid rgba(243,236,221,.18);
  border-radius: 999px;
  background: rgba(6,9,13,.72);
  backdrop-filter: blur(6px);
  font-size: 11px;
  color: var(--ink-2);
}
.atlas-next {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(243,236,221,.18);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(6,9,13,.95), 0 2px 14px rgba(6,9,13,.9);
}
.atlas-next-label { color: var(--ink-2); }
.atlas-next-city { color: var(--gold); }
.atlas-next-when { color: var(--ink-2); }

.atlas-tools {
  position: absolute;
  z-index: 30;
  top: 26px;
  right: 26px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  /* The row is chrome, not surface. On phones it stretches full width above
     the reel, and as a hit target its box (plus the gaps between pills) turned
     that whole band over the map into a dead zone — a pinch or a drag begun
     beside the 2D/3D switch simply did nothing. Only the controls themselves
     take pointers; every pixel between them belongs to the map.
     (pointer-events is inherited, so children opt back in below.) */
  pointer-events: none;
}
.atlas-tools .tool-seg,
.atlas-tools .tool-btn { pointer-events: auto; }
.tool-seg {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(8,11,16,.72);
  backdrop-filter: blur(14px);
}
.tool-seg button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 6px 11px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: all .18s;
}
.tool-seg button:hover { color: var(--ink); }
.tool-seg button.is-active { background: var(--ink); color: var(--void); }
.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(8,11,16,.72);
  backdrop-filter: blur(14px);
  padding: 7px 12px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: all .18s;
}
.tool-btn:hover { border-color: rgba(243,236,221,.32); color: var(--ink); }
/* With a chapter open, the atlas recedes and the spread takes the stage.
   One opacity per element: fading the wrapper *and* each child multiplies the
   two curves, so the name sat at 28% half-way through the fade and was
   effectively gone by ~150ms — a cut wearing a fade's clothes. The wrapper
   does the fading (children only lose their pointer events, since the name
   re-enables them), and it now runs for the same 400ms as the spread's
   arrival instead of finishing while the panel is still half in. */
.app.has-detail .atlas-title,
.app.has-detail .atlas-tools {
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s cubic-bezier(.4, 0, .6, 1);
}
/* The corner scrim only exists to carry the title block. Once the spread takes
   the stage the map should get its light back rather than keep a dark thumb-
   print where the title used to be. */
.app.has-detail .atlas-vignette { opacity: .25; }
.app.has-detail .atlas-title > * { pointer-events: none; }
.app.has-detail .reel {
  opacity: .28;
  pointer-events: none;
  transition: opacity .3s ease;
}
/* The pass-through chrome re-enables pointers on its leaves, and an explicit
   `auto` beats an inherited `none` — so a faded atlas would still let a thumb
   tap the map switch or scroll the reel behind the spread. Put them back down. */
.app.has-detail .atlas-tools .tool-seg,
.app.has-detail .atlas-tools .tool-btn,
.app.has-detail .reel-track { pointer-events: none; }

/* ── Chapter reel ────────────────────────────────────────────────────── */
.reel {
  position: absolute;
  z-index: 25;
  left: 0; right: 0; bottom: 0;
  padding: 46px 26px 16px;
  background: linear-gradient(to top, rgba(6,9,13,.97) 0%, rgba(6,9,13,.9) 30%, rgba(6,9,13,.55) 66%, transparent 100%);
  /* Same deal as the tool row: the plate, its gradient and the head are
     scenery. The 34px fade above the cards on a phone was a no-man's-land
     where a thumb could not pan the map and the strip had nothing to scroll.
     The scrolling strip keeps its own pointers. */
  pointer-events: none;
}
.reel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}
.reel-head-left { display: flex; align-items: baseline; gap: 12px; }
.reel-kicker {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.reel-count {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-4);
}
/* Dragging the strip must scroll it, not select the card's text or start the
   browser's native image drag — the latter fires pointercancel and kills the
   gesture on the spot. */
.reel-track { user-select: none; -webkit-user-select: none; }
.reel-track img { -webkit-user-drag: none; }
.reel-track.is-dragging { cursor: grabbing; }
.reel-track.is-dragging .reel-card { transform: none; }
.reel-track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  /* Room for the hover lift (-4px) plus the 1px ring, so the top and left
     strokes are never clipped by this scroll container. */
  padding: 8px 6px 10px;
  scrollbar-width: none;
  /* The one live part of the reel; see .reel. */
  pointer-events: auto;
}
.reel-track::-webkit-scrollbar { display: none; }
.reel-card {
  flex: none;
  width: 202px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  color: var(--ink);
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.reel-card:hover { transform: translateY(-4px); }
.reel-photo {
  position: relative;
  display: block;
  height: 100px;
  border-radius: 9px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  outline: 1px solid transparent;
  outline-offset: -1px;
  transition: outline-color .2s, box-shadow .2s;
}
.reel-card:hover .reel-photo { box-shadow: 0 10px 28px rgba(0,0,0,.55); }
.reel-card:hover .reel-photo img { transform: scale(1.06); }
.reel-card.is-now .reel-photo {
  outline-color: var(--ember);
  box-shadow: 0 10px 30px rgba(255,122,69,.18);
}
.reel-card.is-selected .reel-photo { outline-color: rgba(243,236,221,.85); }
/* A chapter you have left keeps its photograph at full strength: dimming a
   third of the reel made the arc read as disabled, not as travelled. The check
   is the signal — earned, quiet, and only on the four cards that have one. */
.reel-done {
  position: absolute;
  top: 7px; right: 7px;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(6,9,13,.6);
  box-shadow: inset 0 0 0 1px rgba(243,236,221,.24);
  color: rgba(243,236,221,.9);
  backdrop-filter: blur(3px);
}
.reel-done svg { width: 9px; height: 9px; }
.reel-num {
  position: absolute;
  top: 8px; left: 9px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.8);
}
.reel-now {
  position: absolute;
  top: 7px; right: 7px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--ember);
  color: #1a0d07;
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.reel-now i {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #1a0d07;
  animation: pulse 2s ease infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.reel-days {
  position: absolute;
  right: 8px; bottom: 7px;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  color: rgba(255,255,255,.85);
  text-shadow: 0 1px 5px rgba(0,0,0,.9);
}
.reel-meta { display: flex; flex-direction: column; gap: 1px; padding: 0 2px; }
.reel-title {
  font-family: var(--f-disp);
  font-size: 18px;
  /* Fraunces descenders (Singapore's g) run ~1.28em off the baseline; a 1.1
     line box clipped them against this element's overflow: hidden. */
  line-height: 1.3;
  letter-spacing: -.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reel-date {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reel-date i { font-style: normal; opacity: .5; }

/* ════════════════════════════════════════════════════════════════════════
   MAP + GLOBE (dark canvas)
   ════════════════════════════════════════════════════════════════════════ */
.map-container {
  width: 100%;
  height: 100%;
  background: #05080d;
}
.map-container.is-globe { background: radial-gradient(circle at 50% 45%, #0b1520, #04070b 70%); }
/* Globe country and pin labels are HTML over a canvas: without this, dragging
   the planet starts a text selection and you can highlight every country name
   in the view. Leaflet already opts out on its own container. */
.map-container.is-globe,
.map-container.is-globe * { user-select: none; -webkit-user-select: none; }
.leaflet-container {
  background: #05080d;
  font-family: var(--f-sans);
  outline: none;
}
/* A jump across the world is a cut, not a flight: dip the map to the stage
   colour, move while nothing is watching, fade back once the new tiles are in.
   The alternative — flying — makes Leaflet zoom out to ~z3.5 to cover the
   distance, which drags every route line and a half-loaded world across the
   screen. Short hops still fly; see map-view.jsx. */
.map-container.leaflet-container { transition: opacity .16s linear; }
.map-container.is-jumping { opacity: 0; }
.leaflet-tile, .leaflet-tile-loaded { opacity: 1 !important; }
/* Dark-theme treatment for satellite imagery. Brightness alone just crushed
   the picture (hence the soft, muddy look) — most of the detail loss came
   from contrast, not from the dimming. Contrast carries it back while the
   0.88 brightness keeps the map from glowing against the dark UI. One dial,
   in :root, if it needs tuning. */
.leaflet-tile-pane { filter: var(--map-tile-filter); }
.route-line { animation: route-ants 5s linear infinite; }
.transport-tiles { filter: saturate(.5) brightness(1.02) contrast(.9); }
@keyframes route-ants { to { stroke-dashoffset: -30; } }

/* Globe overlay */
.eq-pins {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.eq-pin-wrap, .eq-city-wrap {
  position: absolute;
  width: 0; height: 0;
}
.eq-pin-wrap .map-pin,
.eq-pin-wrap .map-place,
.eq-city-wrap .map-place {
  width: 0; height: 0;
  pointer-events: auto;
}
.eq-country {
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(243,236,221,.5);
  text-shadow: 0 1px 4px rgba(0,0,0,.9);
  white-space: nowrap;
  pointer-events: none;
}
/* Opacity is driven per-frame (rim fade); the declutter fade gets its own
   span so a transition here cannot lag or flap the continuous value. */
.eq-country > span { transition: opacity .18s linear; }
.eq-country > span.is-off { opacity: 0; }
/* Pins */
.map-pin-wrap { background: transparent !important; border: none !important; pointer-events: none; }
.map-pin {
  position: relative;
  pointer-events: auto;
  cursor: pointer;
  transform-origin: center;
  transition: transform .2s ease;
}
.map-pin:hover { transform: scale(1.12); }
.map-pin-num {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--pin-c, var(--ember));
  color: #120c08;
  font-family: var(--f-mono);
  font-weight: 600;
  font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1.5px rgba(6,9,13,.9), 0 0 0 2.5px rgba(255,255,255,.16), 0 4px 14px rgba(0,0,0,.55);
  letter-spacing: -.02em;
}
.map-pin.is-active .map-pin-num {
  background: var(--ink);
  color: var(--void);
  transform: translate(-50%, -50%) scale(1.18);
  box-shadow: 0 0 0 2px var(--void), 0 0 0 3.5px var(--pin-c, var(--ember)), 0 6px 20px rgba(0,0,0,.65);
}
.map-pin-label {
  position: absolute;
  top: calc(50% + 20px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--ink);
  background: rgba(6,9,13,.9);
  border: 1px solid var(--line);
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
  backdrop-filter: blur(8px);
}
.map-pin:hover .map-pin-label,
.map-pin.is-active .map-pin-label { opacity: 1; }

.map-place-wrap { background: transparent !important; border: none !important; }
.map-place {
  position: relative;
  cursor: pointer;
  transform-origin: center;
  transition: transform .18s ease;
}
.map-place:hover { transform: scale(1.4); z-index: 1000; }
.map-place-dot {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pin-c, var(--ember));
  box-shadow: 0 0 0 1.5px rgba(6,9,13,.9), 0 0 0 2px rgba(255,255,255,.2), 0 2px 8px rgba(0,0,0,.6);
}
.map-place.is-active .map-place-dot {
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--void), 0 0 0 3.5px var(--pin-c, var(--ember)), 0 3px 12px rgba(0,0,0,.7);
  transform: translate(-50%, -50%) scale(1.25);
}
.map-place-label {
  position: absolute;
  top: 50%;
  left: calc(50% + 8px);
  transform: translateY(-50%);
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
  background: rgba(6,9,13,.92);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
  transition: opacity .18s ease;
}
.map-place:hover .map-place-label,
.map-place.is-active .map-place-label { opacity: 1; }

/* Map failure fallback */
.map-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 24px;
  background: #05080d;
  color: var(--ink);
  z-index: 600;
}
.map-fallback p {
  margin: 0;
  max-width: 420px;
  font-family: var(--f-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-3);
  word-break: break-word;
}
.map-fallback-actions { display: flex; gap: 8px; margin-top: 4px; }

/* ════════════════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════════════════ */
.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--line);
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: all .16s;
  flex-shrink: 0;
}
.pill-btn:hover { background: var(--ink); color: var(--void); border-color: var(--ink); }
.pill-btn.is-active { background: var(--ember); color: #1a0d07; border-color: var(--ember); }
.icon-btn {
  width: 32px; height: 32px;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .16s;
  flex-shrink: 0;
}
.icon-btn:hover { background: var(--ink); color: var(--void); border-color: var(--ink); }

/* ════════════════════════════════════════════════════════════════════════
   PAGES — shared editorial layout
   ════════════════════════════════════════════════════════════════════════ */
.page {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(900px 600px at 90% 0%, rgba(91,176,193,.05), transparent 60%),
    var(--void);
}
.page-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 58px 48px 92px;
}
.page-head { max-width: 940px; margin-bottom: 54px; }
.page-head h1 {
  margin: 0 0 20px;
  font-family: var(--f-disp);
  font-size: clamp(46px, 6.2vw, 92px);
  font-weight: 400;
  line-height: .94;
  letter-spacing: -.045em;
  color: var(--ink);
}
.page-head h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--ember);
  background: linear-gradient(100deg, var(--ember), var(--gold) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-head p {
  max-width: 660px;
  margin: 0;
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-2);
  letter-spacing: .005em;
  text-wrap: pretty;
}
.page-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.page-fact b {
  display: block;
  font-family: var(--f-disp);
  font-size: 39px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
}
.page-fact span {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.page-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 60px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ════════════════════════════════════════════════════════════════════════
   DETAIL PANEL — the chapter spread
   ════════════════════════════════════════════════════════════════════════ */
.detail-panel {
  position: fixed;
  z-index: 900;
  top: calc(var(--hdr) + var(--spine));
  right: 0;
  bottom: 0;
  width: min(620px, 94vw);
  display: flex;
  flex-direction: column;
  background: var(--night);
  border-left: 1px solid var(--line);
  box-shadow: -40px 0 120px rgba(0,0,0,.6);
  animation: sheetIn .4s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes sheetIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.detail-topbar {
  flex: none;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(9,13,19,.94);
  backdrop-filter: blur(14px);
}
.detail-topbar-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.detail-topbar-label i { width: 6px; height: 6px; border-radius: 50%; }
.detail-topbar-label b { font-weight: 400; color: var(--ink-4); }
.detail-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; }

.detail-hero {
  position: relative;
  height: 320px;
  background: #11151c;
  overflow: hidden;
}
.detail-hero .photo { height: 100% !important; aspect-ratio: unset !important; }
.detail-hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9,13,19,.95) 0%, rgba(9,13,19,.1) 45%, rgba(9,13,19,.25) 100%);
  pointer-events: none;
}
/* A horizontal swipe is ours; vertical stays the panel's scroll. */
.detail-hero.carousel { touch-action: pan-y; }
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(6,9,13,.65);
  color: var(--ink);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0 0 2px;
  z-index: 3;
  backdrop-filter: blur(10px);
  transition: all .16s;
}
.carousel-arrow:hover { background: var(--ink); color: var(--void); border-color: var(--ink); }
.carousel-arrow.is-left { left: 12px; }
.carousel-arrow.is-right { right: 12px; }
.carousel-dots {
  position: absolute;
  bottom: 12px;
  left: 0; right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.carousel-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  border: none;
  background: rgba(243,236,221,.35);
  cursor: pointer;
  padding: 0;
  transition: all .16s;
}
.carousel-dot.is-active { background: var(--ink); transform: scale(1.3); }

.detail-content { padding: 26px 28px 64px; }
.detail-title {
  margin: 10px 0 8px;
  font-family: var(--f-disp);
  font-size: clamp(52px, 7vw, 74px);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.05em;
  color: var(--ink);
}
.detail-theme {
  margin: 0 0 26px;
  font-family: var(--f-serif);
  font-size: 20px;
  font-style: italic;
  line-height: 1.38;
  color: var(--gold);
  text-wrap: pretty;
}
.detail-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
.detail-fact {
  padding: 14px 12px 14px 0;
  border-bottom: 1px solid var(--line-2);
  min-width: 0;
}
.detail-fact:nth-child(2n) { padding-left: 14px; border-left: 1px solid var(--line-2); }
.detail-fact:nth-last-child(-n+2) { border-bottom: 0; }
.detail-fact span {
  display: block;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 5px;
}
.detail-fact b {
  display: block;
  font-family: var(--f-sans);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
}
.detail-fact i {
  display: block;
  font-style: normal;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--ink-3);
  margin-top: 3px;
}
.section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin: 34px 0 16px;
}
.section-head-num {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--ember);
}
.section-head-title {
  margin: 0;
  font-family: var(--f-disp);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -.025em;
  color: var(--ink);
}
.section-head-note {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* Stop timeline */
.stop-timeline { position: relative; }
.stop-row {
  display: grid;
  grid-template-columns: 82px 16px 1fr;
  gap: 10px;
  /* The row bleeds 8px into the content padding so its hover wash has room;
     the extra 12px on the left keeps the dates off the card edge. */
  padding: 15px 8px 15px 12px;
  border-bottom: 1px dashed var(--line-2);
  cursor: pointer;
  transition: background .16s;
  margin: 0 -8px;
  border-radius: 4px;
}
.stop-row:hover, .stop-row.is-active { background: rgba(243,236,221,.045); }
.stop-date {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-top: 3px;
  font-family: var(--f-mono);
}
.stop-date-day { font-size: 12px; color: var(--ink); letter-spacing: .02em; }
.stop-date-end { font-size: 10.5px; color: var(--ink-3); }
.stop-date-nights { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); margin-top: 3px; }
.stop-node {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}
.stop-node::before {
  content: '';
  position: absolute;
  top: 0; bottom: -30px;
  left: 50%;
  width: 1px;
  background: var(--line);
}
.stop-row:last-child .stop-node::before { display: none; }
.stop-node i {
  position: relative;
  z-index: 1;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tint, var(--ember));
  box-shadow: 0 0 0 3px var(--night), 0 0 0 4px var(--line);
}
.stop-row.is-active .stop-node i { box-shadow: 0 0 0 3px var(--night), 0 0 0 4px var(--tint), 0 0 12px var(--tint); }
.stop-body { min-width: 0; }
.stop-titlerow { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.stop-idx { font-family: var(--f-mono); font-size: 10px; color: var(--ink-4); }
.stop-name {
  font-family: var(--f-disp);
  font-size: 21px;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--ink);
}
.stop-plan {
  margin: 7px 0 0;
  font-family: var(--f-sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 56ch;
  text-wrap: pretty;
}
.stop-notes {
  list-style: none;
  margin: 10px 0 0;
  padding: 0 0 0 12px;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stop-notes li {
  font-family: var(--f-sans);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
  text-wrap: pretty;
}
.decision-list {
  list-style: none;
  counter-reset: dec;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--line);
}
.decision-list li {
  counter-increment: dec;
  position: relative;
  padding: 10px 0 10px 26px;
  font-family: var(--f-sans);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line-2);
  text-wrap: pretty;
}
.decision-list li::before {
  content: counter(dec, decimal-leading-zero);
  position: absolute;
  left: 9px;
  top: 11px;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ember);
}
.detail-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.detail-nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--ink);
  text-align: left;
  font-family: var(--f-disp);
  font-size: 16.5px;
  line-height: 1.15;
  transition: all .16s;
}
.detail-nav button:hover { border-color: rgba(243,236,221,.3); background: rgba(243,236,221,.04); }
.detail-nav button.is-next { justify-content: flex-end; text-align: right; }
.detail-nav button span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.detail-nav button i {
  font-style: normal;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* ════════════════════════════════════════════════════════════════════════
   BINDER (Ledger / Field kit)
   ════════════════════════════════════════════════════════════════════════ */
.binder-page { display: flex; flex-direction: column; height: 100%; }
.binder-scroll { flex: 1; overflow-y: auto; }

/* Both binder pages share one measure so switching tabs does not shift the
   content column. */
.ledger-page, .kit-page { max-width: 1280px; }
/* These two pages once needed a local +1.5px on the shared micro-type because
   7–8px is below comfortable at laptop distance. That reasoning now holds
   everywhere (see the type scale note in :root), so the exception is gone —
   the binder inherits the same floor as the atlas. */
.money-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: center;
  padding: 34px 36px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(600px 300px at 12% 10%, rgba(255,122,69,.08), transparent 65%),
    radial-gradient(500px 300px at 88% 90%, rgba(91,176,193,.06), transparent 65%),
    rgba(12,17,24,.6);
  margin-bottom: 18px;
}
.money-label {
  display: block;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.money-big {
  display: block;
  font-family: var(--f-disp);
  font-size: clamp(52px, 6vw, 82px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.05em;
  color: var(--ink);
}
.money-sub {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 12px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--ink-3);
}
.money-stat { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.money-stat b { font-weight: 500; color: var(--ink-2); }
.money-stat em {
  font-style: normal;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.money-note {
  display: block;
  margin-top: 8px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.donut-wrap { display: flex; align-items: center; gap: 22px; justify-content: flex-end; }
.donut {
  position: relative;
  width: 190px; height: 190px;
  border-radius: 50%;
  flex: none;
  display: grid; place-items: center;
}
.donut::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
.donut-hole {
  width: 128px; height: 128px;
  border-radius: 50%;
  background: var(--void);
  border: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  z-index: 1;
}
.donut-hole span {
  font-family: var(--f-disp);
  font-size: 28px;
  line-height: 1;
  letter-spacing: -.02em;
}
.donut-hole i {
  font-style: normal;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.donut-key { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; min-width: 210px; }
.donut-key li { display: flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-3); }
.donut-key li i { width: 6px; height: 6px; border-radius: 2px; flex: none; }
.donut-key li span { flex: 1; }
.donut-key li b { font-weight: 500; color: var(--ink-2); }
/* The share of the total, spelled out instead of read off the ring. */
.donut-pct { font-style: normal; font-weight: 400; margin-left: 5px; color: var(--ink-4); }

.bar-list { display: flex; flex-direction: column; }
.bar-row {
  display: grid;
  grid-template-columns: 240px 1fr 92px 92px;
  align-items: center;
  gap: 14px;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  background: transparent;
  padding: 9px 6px;
  text-align: left;
  color: var(--ink);
  border-radius: 4px;
  transition: background .15s;
}
.bar-row:hover { background: rgba(243,236,221,.035); }
.bar-ch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bar-ch i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.bar-track { height: 7px; background: rgba(243,236,221,.06); border-radius: 4px; overflow: hidden; }
.bar-track span { display: block; height: 100%; border-radius: 4px; opacity: .85; }
.bar-val { text-align: right; font-family: var(--f-mono); font-size: 13px; color: var(--ink); }
.bar-per { text-align: right; font-family: var(--f-mono); font-size: 12px; color: var(--ink-4); }
.bar-per i { font-style: normal; opacity: .6; }

.ledger-table-wrap { overflow-x: auto; margin: 0 -4px; }
.ledger-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-family: var(--f-mono);
  font-size: 12.5px;
  letter-spacing: .02em;
}
.ledger-table th {
  text-align: left;
  padding: 0 8px 8px 0;
  border-bottom: 1px solid var(--line);
  font-weight: 400;
}
.ledger-table th button {
  border: 0;
  background: transparent;
  padding: 0;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-4);
  cursor: pointer;
  white-space: nowrap;
}
.ledger-table th button:hover { color: var(--ink); }
.ledger-table td {
  padding: 8px 8px 8px 0;
  border-bottom: 1px solid var(--line-2);
  color: var(--ink-2);
  white-space: nowrap;
}
.ledger-table tr:hover td { background: rgba(243,236,221,.025); }
.ledger-table .is-muted { color: var(--ink-4); }
.ledger-table .is-name { color: var(--ink); }
.ledger-table .is-num { text-align: right; }
.ledger-table .is-total { color: var(--ink); font-weight: 500; }
.ledger-table .is-share { text-align: right; color: var(--ink-3); padding-left: 10px; }
.ledger-table tr.is-sum td { border-top: 1px solid var(--line); border-bottom: 0; padding-top: 12px; color: var(--ink); }

.ledger-below {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 34px;
  margin-top: 48px;
  align-items: start;
}
.receipt {
  border: 1px dashed rgba(243,236,221,.24);
  border-radius: 4px;
  padding: 20px 20px 16px;
  background: rgba(12,17,24,.45);
  font-family: var(--f-mono);
  font-size: 12.5px;
  color: var(--ink-2);
}
.receipt-head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px dashed rgba(243,236,221,.24);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.receipt-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.receipt-row b { font-weight: 500; color: var(--ink); }
.receipt-row.is-sub { margin-top: 6px; padding-top: 10px; border-top: 1px dashed rgba(243,236,221,.18); }
.receipt-row.is-grand {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--ink);
  font-family: var(--f-disp);
  font-size: 20px;
  letter-spacing: -.01em;
}
.receipt-row.is-grand b { font-weight: 500; }
.receipt-foot {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(243,236,221,.18);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.ledger-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.ledger-note h3 {
  margin: 0 0 10px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ember);
}
.ledger-note ul { list-style: none; margin: 0; padding: 0; }
.ledger-note li {
  padding: 7px 0;
  border-bottom: 1px solid var(--line-2);
  font-family: var(--f-sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-3);
  text-wrap: pretty;
}
.ledger-note li b { font-weight: 500; color: var(--ink-2); }

/* ════════════════════════════════════════════════════════════════════════
   FIELD KIT
   ════════════════════════════════════════════════════════════════════════ */
.kit-hero {
  display: grid;
  grid-template-columns: 132px 1fr auto;
  align-items: center;
  gap: 30px;
  padding: 26px 30px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: radial-gradient(500px 260px at 10% 10%, rgba(117,197,163,.07), transparent 70%), rgba(12,17,24,.55);
  margin-bottom: 26px;
}
.kit-ring {
  position: relative;
  width: 118px; height: 118px;
  border-radius: 50%;
  background: conic-gradient(var(--jade) var(--p, 0deg), rgba(243,236,221,.08) 0);
  display: grid; place-items: center;
}
.kit-ring::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--night);
}
.kit-ring-hole { position: relative; z-index: 1; text-align: center; }
.kit-ring-hole b {
  display: block;
  font-family: var(--f-disp);
  font-size: 35px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink);
}
.kit-ring-hole b i { font-style: normal; font-size: 15.5px; color: var(--ink-3); }
.kit-ring-hole span {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.kit-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kit-stats > div { min-width: 0; }
.kit-stats b {
  display: block;
  font-family: var(--f-disp);
  font-size: 31px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.02em;
}
.kit-stats span {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.kit-stats .is-alert b { color: var(--ember); }
.kit-actions { display: flex; flex-direction: column; gap: 7px; }
.todo-export {
  background: rgba(12,17,24,.7);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 22px;
}
.todo-export textarea {
  width: 100%;
  box-sizing: border-box;
  margin: 10px 0;
  padding: 10px 12px;
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  background: var(--void);
  border: 1px solid var(--line);
  border-radius: 8px;
  resize: vertical;
}
.kit-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  margin-bottom: 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.seg { display: inline-flex; gap: 2px; background: rgba(243,236,221,.06); padding: 3px; border-radius: 999px; }
.seg button {
  border: 0;
  background: transparent;
  padding: 5px 10px;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: all .16s;
  white-space: nowrap;
}
.seg button:hover { color: var(--ink); }
.seg button.is-active { background: var(--ink); color: var(--void); }
.kit-cats { display: flex; flex-wrap: wrap; gap: 5px; }
.kit-cats button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  padding: 4px 9px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: all .16s;
}
.kit-cats button:hover { color: var(--ink); border-color: rgba(243,236,221,.3); }
.kit-cats button.is-active { background: var(--ember); border-color: var(--ember); color: #1a0d07; }
.kit-filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-left: auto;
}
.todo-check-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
}
.todo-check-label input { accent-color: var(--ember); }
.todo-expand-links { display: inline-flex; gap: 5px; }

.kit-group { margin-bottom: 8px; }
.kit-group-head {
  display: grid;
  /* Label column grew with the type: "Before you leave" + its 12px mono
     subtitle on one line is ~410px at the current sizes. */
  grid-template-columns: 18px 430px minmax(60px, 1fr) 34px 74px;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 13px 4px;
  text-align: left;
  color: var(--ink);
  transition: background .16s;
}
.kit-group-head:hover { background: rgba(243,236,221,.03); }
.kit-caret { font-family: var(--f-mono); font-size: 15.5px; color: var(--ink-3); line-height: 1; }
.kit-group-label { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kit-group-title {
  font-family: var(--f-disp);
  font-size: 23px;
  letter-spacing: -.02em;
  line-height: 1.1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kit-group-dates { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.kit-group-past {
  justify-self: start;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 2px 5px;
}
.kit-group-bar { height: 3px; background: rgba(243,236,221,.07); border-radius: 2px; overflow: hidden; min-width: 50px; }
.kit-group-bar i { display: block; height: 100%; background: var(--tint, var(--ember)); }
.kit-group-pct {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--ink-4);
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.kit-group-count {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
  white-space: nowrap;
}
.kit-group-count.is-done { color: var(--jade); }
.kit-list { display: flex; flex-direction: column; }
.kit-empty {
  padding: 14px 0 14px 28px;
  font-family: var(--f-sans);
  font-size: 14px;
  font-style: italic;
  color: var(--ink-4);
}
.kit-row {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 13px;
  align-items: start;
  padding: 11px 4px 11px 26px;
  border-bottom: 1px dashed var(--line-2);
  transition: opacity .16s;
}
.kit-row.is-done { opacity: .42; }
.kit-row-body { min-width: 0; }
.kit-row-title {
  font-family: var(--f-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -.005em;
}
.kit-row.is-done .kit-row-title { text-decoration: line-through; }
.kit-row-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 9px; margin-top: 3px; }
.kit-cat {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-4);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 4px;
}
.kit-row-group {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--ink-2);
  background: rgba(255,122,69,.1);
  border-radius: 3px;
  padding: 1px 5px;
}
.kit-row-place { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-3); }
.kit-row-note { font-family: var(--f-sans); font-size: 13px; font-style: italic; color: var(--ink-4); }
.kit-due {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--ink-4);
  white-space: nowrap;
  padding-top: 3px;
}
.kit-due.is-overdue { color: var(--ember); font-weight: 600; }
.kit-due.is-soon { color: var(--gold); }
.booking-check {
  width: 20px; height: 20px;
  margin-top: 1px;
  border: 1px solid rgba(243,236,221,.3);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  color: var(--void);
  font-size: 13px;
  transition: all .16s;
}
.booking-check:hover { border-color: var(--jade); }
.booking-check.is-done { background: var(--jade); border-color: var(--jade); color: #06130e; }

/* ════════════════════════════════════════════════════════════════════════
   COVER
   ════════════════════════════════════════════════════════════════════════ */
.cover {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  padding: 34px 42px 30px;
  background: #05070a;
  color: var(--ink);
  cursor: pointer;
  overflow: hidden;
  transition: opacity .7s ease, visibility .7s;
}
.cover.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.cover-glow {
  position: absolute;
  inset: -20% -10% auto -20%;
  height: 90%;
  background:
    radial-gradient(600px 420px at 32% 44%, rgba(255,122,69,.22), transparent 65%),
    radial-gradient(700px 500px at 74% 30%, rgba(91,176,193,.12), transparent 65%);
  filter: blur(10px);
  pointer-events: none;
}
.cover-stars { position: absolute; inset: 0; pointer-events: none; }
.cover-stars i {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: rgba(243,236,221,.7);
  animation: twinkle 4s ease-in-out infinite;
}
@keyframes twinkle { 0%,100% { opacity: .15; } 50% { opacity: .8; } }
.cover-top {
  position: relative;
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cover-center {
  position: relative;
  margin: auto 0;
  padding-bottom: 36px;
  max-width: 1100px;
}
.cover-kicker {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 26px;
  opacity: 0;
  animation: rise .9s .15s ease both;
}
.cover-center h1 {
  margin: 0 0 28px;
  font-family: var(--f-disp);
  font-size: clamp(62px, 11vw, 168px);
  font-weight: 400;
  line-height: .82;
  letter-spacing: -.065em;
  opacity: 0;
  animation: rise 1.05s .25s cubic-bezier(.2,.7,.2,1) both;
}
.cover-center h1 em {
  font-style: italic;
  background: linear-gradient(100deg, var(--ember) 10%, var(--gold) 55%, var(--jade) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.cover-route {
  position: absolute;
  left: 42px; right: 42px;
  bottom: 96px;
  height: 1px;
  background: rgba(243,236,221,.12);
}
.cover-route-line {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--ember), var(--gold) 35%, var(--jade) 70%, var(--violet));
  transform-origin: left;
  animation: draw 1.6s .7s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.cover-route-dot {
  position: absolute;
  top: -2px;
  width: 5px; height: 5px;
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 0 2px #05070a;
  opacity: 0;
  animation: pop .4s ease both;
}
@keyframes pop { from { opacity: 0; transform: translateX(-50%) scale(.2); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
.cover-bottom {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cover-enter {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  animation: nudge 2s ease-in-out infinite;
}
@keyframes nudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1280px) {
  .ledger-notes { grid-template-columns: 1fr 1fr; }
  .bar-row { grid-template-columns: 200px 1fr 86px 86px; }
}

@media (max-width: 1080px) {
  .topbar { gap: 12px; padding: 0 18px; }
  .topnav { margin-left: 0; }
  .brand-sub { display: none; }
  .atlas-title { max-width: 64vw; }
  .money-hero { grid-template-columns: 1fr; }
  .donut-wrap { justify-content: flex-start; }
  .ledger-below { grid-template-columns: 1fr; }
  .receipt { max-width: 420px; }
  .kit-hero { grid-template-columns: 118px 1fr; }
  .kit-actions { grid-column: 1 / -1; flex-direction: row; }
}

@media (max-width: 880px) {
  :root { --hdr: 56px; --spine: 34px; }  .topbar { padding: 0 14px; }
  .brand-mark { width: 30px; height: 30px; }
  .brand-name { font-size: 17px; }
  .dayclock-ring { width: 30px; height: 30px; }
  .dayclock-meta { display: none; }
  /* Months stay on mobile — an unlabelled bar was just a progress streak.
     Smaller type, no year; the base rule centres the block. */
  .spine { padding: 0 12px; }
  .spine-months { display: block; height: 11px; }
  .spine-months span { top: 0; font-size: 8px; letter-spacing: .06em; }
  .spine-months span i { display: none; }
  .spine-track { height: 13px; padding-top: 0; --tick-h: 5px; }
  .spine-tick { height: 5px; }
  .spine-tick.is-now { height: 5px; }
  .spine-now { height: 9px; }

  .atlas-title { top: 16px; left: 14px; right: 14px; max-width: none; }
  .atlas-name { font-size: clamp(44px, 12.5vw, 72px); margin-top: 8px; }
  .atlas-title.is-long .atlas-name { font-size: clamp(36px, 10.5vw, 58px); }
  .atlas-name svg { display: none; }
  .atlas-sub { font-size: 10.5px; gap: 7px; }
  .atlas-weather { font-size: 10px; padding: 2px 6px; }
  .atlas-next { margin-top: 10px; padding-top: 9px; font-size: 10px; }

  /* On a phone the desktop corner throw is a different object: it covers more
     than half the screen, and the map is the whole point of the page. A band
     that dies by roughly a third of the stage keeps the title block readable
     and gives the imagery back. The text shadows carry the last few percent. */
  .atlas-vignette {
    background:
      linear-gradient(to bottom, rgba(6,9,13,.82) 0%, rgba(6,9,13,.72) 20%, rgba(6,9,13,.4) 36%, rgba(6,9,13,0) 52%),
      linear-gradient(to bottom, transparent 64%, rgba(6,9,13,.82) 100%);
  }

  .atlas-tools {
    top: auto;
    bottom: 200px;
    left: 0;
    right: 0;
    padding: 0 12px;
    justify-content: center;
    gap: 6px;
  }
  .tool-seg { padding: 2px; }
  .tool-seg button, .tool-btn {
    width: 34px; height: 34px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .tool-label { display: none; }

  .reel { padding: 34px 14px 10px; }
  .reel-head { margin-bottom: 7px; }
  .reel-kicker { font-size: 10px; }
  .reel-count { font-size: 9.5px; }
  .reel-card { width: 156px; gap: 5px; }
  .reel-photo { height: 82px; }
  .reel-title { font-size: 15.5px; }
  .reel-date { font-size: 8.5px; }


  .app-body { min-height: 0; }
  .detail-panel {
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    z-index: 1400;
    border-left: 0;
    animation: sheetUp .38s cubic-bezier(.2,.7,.2,1) both;
  }
  @keyframes sheetUp { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
  .detail-topbar { height: 54px; padding: 0 12px 0 16px; }
  .detail-hero { height: 260px; }
  .detail-content { padding: 22px 18px 48px; }
  .detail-title { font-size: 51px; }
  .detail-theme { font-size: 17px; }

  .page-inner { padding: 34px 18px 70px; }
  .page-head { margin-bottom: 36px; }
  .page-head h1 { font-size: clamp(40px, 11vw, 56px); }
  .page-head p { font-size: 15px; }
  .page-facts { gap: 24px; }
  .page-fact b { font-size: 31px; }

  .ledger-page, .kit-page { max-width: none; }
  .money-hero { padding: 24px 20px; gap: 24px; }
  .money-big { font-size: 49px; }
  .money-sub { font-size: 10px; gap: 6px; }
  /* Phones: the ring is a 150px circle you cannot read a slice of. The legend
     already lists every spend, so it carries the share as a number instead. */
  .donut-wrap { gap: 0; }
  .donut, .donut-hole { display: none; }
  .donut-key { min-width: 0; width: 100%; gap: 8px; }
  .donut-key li { font-size: 9px; }
  .bar-row { grid-template-columns: 1fr 78px; grid-template-areas: "ch val" "track per"; gap: 6px 10px; padding: 10px 2px; }
  .bar-ch { grid-area: ch; }
  .bar-val { grid-area: val; }
  .bar-track { grid-area: track; }
  .bar-per { grid-area: per; }
  .ledger-table { min-width: 760px; }
  .ledger-notes { grid-template-columns: 1fr; gap: 20px; }
  .receipt { max-width: none; }

  .kit-hero { grid-template-columns: 94px 1fr; padding: 20px; gap: 18px; }
  .kit-ring { width: 90px; height: 90px; }
  .kit-ring::before { inset: 3px; }
  .kit-ring-hole b { font-size: 27px; }
  .kit-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kit-stats b { font-size: 25px; }
  .kit-actions { grid-column: 1 / -1; }
  .kit-group-head { grid-template-columns: 16px 1fr auto; gap: 6px 8px; }
  .kit-group-label { flex-direction: column; align-items: flex-start; gap: 2px; }
  .kit-group-bar, .kit-group-pct { display: none; }
  .kit-group-count { grid-column: 3; grid-row: 1; }
  .kit-group-past { display: none; }
  .kit-row { padding-left: 6px; grid-template-columns: 20px 1fr; }
  .kit-due { grid-column: 2; padding-top: 0; margin-top: 2px; }
  .kit-filters { gap: 8px; }
  .kit-filter-row { margin-left: 0; width: 100%; }

  .cover { padding: 24px 20px; }
  .cover-center h1 { font-size: clamp(54px, 16vw, 90px); }
  .cover-kicker { font-size: 10px; letter-spacing: .2em; }
  .cover-route { left: 20px; right: 20px; bottom: 86px; }
  .cover-bottom { gap: 16px; font-size: 9.5px; padding-top: 14px; }
  .cover-enter { display: none; }
}

@media (max-width: 520px) {
  .reel-card { width: 142px; }
  .reel-photo { height: 74px; }
  .atlas-sub .atlas-weather:nth-of-type(n+2) { display: none; }
  .donut-wrap { flex-direction: column; align-items: flex-start; }
  .donut-key { min-width: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .route-line { animation: none; }
}