/* ---------- tokens: two styles (Nocturne, Expedition) × day / night ----------
   <html data-style="nocturne | expedition"> (the Style menu, saved in localStorage "trip_style")
   and data-theme="light | dark" (the day/night button), or the computer's setting.
   Nocturne: night sky and gold, serif titles (Instrument Serif + Geist).
   Expedition: field journal, condensed capitals, mono data (Big Shoulders + IBM Plex).
   The expense colours (--exp-*) are the same in both styles (checked for colour blindness).
   --texture: the page background (Expedition: contour lines; Nocturne by night: faint stars).
   Style-specific rules are at the end of the file ("Styles"). */
:root {
  /* Nocturne by day (also the default) */
  --paper: #F1F3F7;
  --surface: #FFFFFF;
  --ink: #1A2238;
  --muted: #566074;
  --line: #D9DEE7;
  --hair: rgba(26, 34, 56, .14);
  --accent: #8A651F;
  --error: #A3312A;
  --red: #B23A2B;
  --green: #1E7A4E;
  --yellow: #8A651F;
  --nav-bg: rgba(241, 243, 247, .86);
  --nav-ink: #1A2238;
  --nav-muted: #566074;
  --strip-bg: #E7EBF2;
  --strip-ink: #1A2238;
  --font-body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Instrument Serif", Georgia, serif;
  --font-data: "Geist", system-ui, sans-serif;
  --display-weight: 400;
  --display-case: none;
  --display-tracking: -.01em;
  --label-case: uppercase;
  --label-tracking: .16em;
  --radius: 16px;
  --radius-s: 999px;
  --edge: var(--hair);
  --edge-w: 1px;
  --texture: none;
  --exp-travel: #2a78d6;
  --exp-accommodation: #eb6834;
  --exp-food: #1baf7a;
  --exp-experiences: #eda100;
  --exp-other: #A9B3BA;
  color-scheme: light;
}
:root[data-style="expedition"] {
  /* Expedition by day */
  --paper: #E9E7E1;
  --surface: #F4F2EC;
  --ink: #1C2321;
  --muted: #4E554F;
  --line: #CFCBC0;
  --hair: rgba(28, 35, 33, .3);
  --edge: #1C2321;
  --accent: #C4501F;
  --error: #A63A16;
  --red: #B23A16;
  --green: #2F6B45;
  --yellow: #8A6A08;
  --nav-bg: #1F3329;
  --nav-ink: #F2EFE6;
  --nav-muted: #B8C2B9;
  --strip-bg: #1F3329;
  --strip-ink: #F2EFE6;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, monospace;
  --display-weight: 800;
  --display-case: uppercase;
  --display-tracking: .01em;
  --label-case: uppercase;
  --label-tracking: .08em;
  --radius: 0px;
  --radius-s: 4px;
  --edge-w: 1.5px;
  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='320' viewBox='0 0 640 320'%3E%3Cg fill='none' stroke='%231C2321' stroke-opacity='.09' stroke-width='1.2'%3E%3Cpath d='M-20 280C80 230 160 300 260 250S450 200 660 240'/%3E%3Cpath d='M-20 240C90 190 170 260 270 210S460 160 660 200'/%3E%3Cpath d='M-20 200C100 150 180 220 280 170S470 120 660 160'/%3E%3Cpath d='M-20 160C110 110 190 180 290 130S480 80 660 120'/%3E%3Cpath d='M-20 120C120 70 200 140 300 90S490 40 660 80'/%3E%3Cpath d='M-20 80C130 30 210 100 310 50S500 0 660 40'/%3E%3C/g%3E%3C/svg%3E");
}
/* Night travel, following the computer (keep these two blocks in sync with the two below) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0B1020;
    --surface: #111A2F;
    --ink: #EDE6D6;
    --muted: #9AA3B5;
    --line: #2A3350;
    --hair: rgba(214, 180, 106, .2);
    --accent: #D6B46A;
    --error: #F08A80;
    --red: #F07167;
    --green: #74D19D;
    --yellow: #E8C46A;
    --nav-bg: rgba(11, 16, 32, .86);
    --nav-ink: #EDE6D6;
    --nav-muted: #9AA3B5;
    --strip-bg: #1A2440;
    --strip-ink: #EDE6D6;
    --exp-travel: #3987e5;
    --exp-accommodation: #d95926;
    --exp-food: #199e70;
    --exp-experiences: #c98500;
    --exp-other: #5A6B78;
    --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cg fill='%23EDE6D6'%3E%3Ccircle cx='38' cy='62' r='.8' opacity='.35'/%3E%3Ccircle cx='170' cy='24' r='.6' opacity='.3'/%3E%3Ccircle cx='296' cy='118' r='.9' opacity='.28'/%3E%3Ccircle cx='392' cy='40' r='.6' opacity='.3'/%3E%3Ccircle cx='96' cy='210' r='.7' opacity='.25'/%3E%3Ccircle cx='238' cy='262' r='.6' opacity='.3'/%3E%3Ccircle cx='360' cy='300' r='.9' opacity='.25'/%3E%3Ccircle cx='60' cy='370' r='.6' opacity='.3'/%3E%3Ccircle cx='200' cy='394' r='.8' opacity='.22'/%3E%3Ccircle cx='330' cy='212' r='.5' opacity='.3'/%3E%3C/g%3E%3C/svg%3E");
    color-scheme: dark;
  }
  :root[data-style="expedition"]:not([data-theme="light"]) {
    --paper: #121915;
    --surface: #1A231D;
    --ink: #ECEAE2;
    --muted: #A6AFA4;
    --line: #34413A;
    --hair: rgba(236, 234, 226, .25);
    --edge: #4A574E;
    --accent: #F07A4A;
    --error: #FF9673;
    --red: #FF8A65;
    --green: #8FD3A3;
    --yellow: #E0B43E;
    --nav-bg: #0A0F0C;
    --nav-ink: #ECEAE2;
    --nav-muted: #9AA89D;
    --strip-bg: #24392D;
    --strip-ink: #ECEAE2;
    --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='320' viewBox='0 0 640 320'%3E%3Cg fill='none' stroke='%23ECEAE2' stroke-opacity='.07' stroke-width='1.2'%3E%3Cpath d='M-20 280C80 230 160 300 260 250S450 200 660 240'/%3E%3Cpath d='M-20 240C90 190 170 260 270 210S460 160 660 200'/%3E%3Cpath d='M-20 200C100 150 180 220 280 170S470 120 660 160'/%3E%3Cpath d='M-20 160C110 110 190 180 290 130S480 80 660 120'/%3E%3Cpath d='M-20 120C120 70 200 140 300 90S490 40 660 80'/%3E%3Cpath d='M-20 80C130 30 210 100 310 50S500 0 660 40'/%3E%3C/g%3E%3C/svg%3E");
    color-scheme: dark;
  }
}
/* Night travel chosen with the button */
:root[data-theme="dark"] {
  --paper: #0B1020;
  --surface: #111A2F;
  --ink: #EDE6D6;
  --muted: #9AA3B5;
  --line: #2A3350;
  --hair: rgba(214, 180, 106, .2);
  --accent: #D6B46A;
  --error: #F08A80;
  --red: #F07167;
  --green: #74D19D;
  --yellow: #E8C46A;
  --nav-bg: rgba(11, 16, 32, .86);
  --nav-ink: #EDE6D6;
  --nav-muted: #9AA3B5;
  --strip-bg: #1A2440;
  --strip-ink: #EDE6D6;
  --exp-travel: #3987e5;
  --exp-accommodation: #d95926;
  --exp-food: #199e70;
  --exp-experiences: #c98500;
  --exp-other: #5A6B78;
  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cg fill='%23EDE6D6'%3E%3Ccircle cx='38' cy='62' r='.8' opacity='.35'/%3E%3Ccircle cx='170' cy='24' r='.6' opacity='.3'/%3E%3Ccircle cx='296' cy='118' r='.9' opacity='.28'/%3E%3Ccircle cx='392' cy='40' r='.6' opacity='.3'/%3E%3Ccircle cx='96' cy='210' r='.7' opacity='.25'/%3E%3Ccircle cx='238' cy='262' r='.6' opacity='.3'/%3E%3Ccircle cx='360' cy='300' r='.9' opacity='.25'/%3E%3Ccircle cx='60' cy='370' r='.6' opacity='.3'/%3E%3Ccircle cx='200' cy='394' r='.8' opacity='.22'/%3E%3Ccircle cx='330' cy='212' r='.5' opacity='.3'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: dark;
}
:root[data-theme="dark"][data-style="expedition"] {
  --paper: #121915;
  --surface: #1A231D;
  --ink: #ECEAE2;
  --muted: #A6AFA4;
  --line: #34413A;
  --hair: rgba(236, 234, 226, .25);
  --edge: #4A574E;
  --accent: #F07A4A;
  --error: #FF9673;
  --red: #FF8A65;
  --green: #8FD3A3;
  --yellow: #E0B43E;
  --nav-bg: #0A0F0C;
  --nav-ink: #ECEAE2;
  --nav-muted: #9AA89D;
  --strip-bg: #24392D;
  --strip-ink: #ECEAE2;
  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='320' viewBox='0 0 640 320'%3E%3Cg fill='none' stroke='%23ECEAE2' stroke-opacity='.07' stroke-width='1.2'%3E%3Cpath d='M-20 280C80 230 160 300 260 250S450 200 660 240'/%3E%3Cpath d='M-20 240C90 190 170 260 270 210S460 160 660 200'/%3E%3Cpath d='M-20 200C100 150 180 220 280 170S470 120 660 160'/%3E%3Cpath d='M-20 160C110 110 190 180 290 130S480 80 660 120'/%3E%3Cpath d='M-20 120C120 70 200 140 300 90S490 40 660 80'/%3E%3Cpath d='M-20 80C130 30 210 100 310 50S500 0 660 40'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
           env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  background: var(--paper) var(--texture);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.5;
}
.top, main { width: min(1120px, 100% - 2.5rem); margin-inline: auto; }
main { padding-bottom: 5rem; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ---------- menu bar ---------- */
.menu {
  position: sticky; top: 0; z-index: 20;
  background: var(--nav-bg);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.menu-inner { width: min(1120px, 100% - 2.5rem); margin-inline: auto; display: flex; gap: .25rem; }
.menu-link {
  position: relative;
  padding: .85rem .9rem .75rem;
  color: var(--nav-muted); text-decoration: none;
  font-weight: 650; font-size: .95rem; letter-spacing: .01em;
}
.menu-link:hover { color: var(--nav-ink); }
.menu-link[aria-current="page"] { color: var(--nav-ink); }
.menu-link[aria-current="page"]::after {
  content: ""; position: absolute; left: .9rem; right: .9rem; bottom: -1px;
  height: 3px; border-radius: 3px 3px 0 0; background: var(--accent);
}
.menu-link:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

/* style menu and day/night switch, at the right of the menu bar */
.theme-btn {
  align-self: center; margin-left: .5rem;
  width: 2.25rem; height: 2.25rem; padding: 0;
  display: grid; place-items: center;
  background: transparent; color: var(--nav-ink);
  border: 1.5px solid color-mix(in srgb, var(--nav-muted) 45%, transparent); border-radius: 50%;
}
.theme-btn:hover { border-color: var(--nav-ink); }
.theme-btn svg {
  width: 1.15rem; height: 1.15rem;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* the profile (signed in only), left of sign out */
.profile-btn {
  align-self: center; margin-left: .5rem;
  width: 2.25rem; height: 2.25rem; display: grid; place-items: center;
  color: var(--nav-ink); border: 1.5px solid color-mix(in srgb, var(--nav-muted) 45%, transparent); border-radius: 50%;
}
.profile-btn[hidden] { display: none; }
.profile-btn:hover, .profile-btn[aria-current] { border-color: var(--nav-ink); }
.profile-btn svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.profile-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* sign in / sign out, at the far right of the menu bar (filled while signed out) */
.auth-btn {
  align-self: center; margin-left: .5rem;
  padding: .4rem .85rem; font-size: .88rem; white-space: nowrap;
  background: transparent; color: var(--nav-ink);
  border: 1.5px solid color-mix(in srgb, var(--nav-muted) 45%, transparent);
}
.auth-btn:hover { border-color: var(--nav-ink); }
.auth-btn.is-out { background: var(--nav-ink); color: var(--paper); border-color: var(--nav-ink); }

/* Pyxis: the compass and the name, at the left of the menu bar (a link to Home) */
.brand {
  display: flex; align-items: center; gap: .45rem; margin-right: .6rem;
  color: var(--nav-ink); text-decoration: none;
  font-size: 1.3rem;
}
.brand:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.brand-mark { width: 1.75rem; height: 1.75rem; flex: none; }
.brand-ring, .brand-ticks { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.brand-north { fill: var(--accent); }
.brand-south { fill: currentColor; opacity: .35; }
.brand-pin { fill: var(--paper); stroke: currentColor; stroke-width: 1.2; }
/* the project's sections only show inside a project */
body:not([data-trip="1"]) .menu-trip { display: none; }
.menu-trip { display: contents; }
.menu-sep { align-self: center; width: 1px; height: 1.2rem; margin: 0 .5rem; background: color-mix(in srgb, var(--nav-muted) 40%, transparent); }

/* ---------- header ---------- */
.top {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem;
  align-items: end; justify-content: space-between;
  padding: 1.5rem 0 1.25rem;
}
/* the page's title: the same size on every page */
h1 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: .92;
  font-weight: 750;
  font-stretch: 75%;
  letter-spacing: -.02em;
  font-variation-settings: "opsz" 96;
}
.actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.actions:not(:has(> :not([hidden]))) { display: none; }
.edit-btn { display: inline-flex; align-items: center; gap: .4rem; }
.edit-btn[hidden] { display: none; }

/* the editor's Save / Cancel bar, stuck to the bottom of the window */
.save-bar {
  position: sticky; bottom: 0; z-index: 15;
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  margin-top: 2rem; padding: .85rem 0 calc(.85rem + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: var(--edge-w) solid var(--edge);
}
.save-bar[hidden] { display: none; }
.save-note { margin: 0 auto 0 0; color: var(--muted); font-size: .95rem; }
.save-note.is-dirty { color: var(--ink); font-weight: 600; }
#save-btn { min-width: 7rem; }
button {
  font: inherit; font-weight: 600; font-size: .95rem;
  padding: .6rem 1.15rem;
  border-radius: var(--radius-s);
  border: 1.5px solid var(--ink);
  background: var(--ink); color: var(--paper);
  cursor: pointer;
}
button.ghost { background: transparent; color: var(--ink); }

/* ---------- status + empty ---------- */
.status {
  margin: 0 0 1.75rem; padding: .8rem 1rem;
  max-width: 70ch;
  background: var(--surface);
  border-left: 4px solid var(--accent);
}
.status[data-kind="error"] { border-color: var(--error); color: var(--error); }
.empty { max-width: 60ch; padding: 2rem 0; }
.empty h2 { margin: 0 0 .5rem; font-size: 1.6rem; font-stretch: 85%; }
.empty p { margin: 0; color: var(--muted); }

/* ---------- budget meter ---------- */
.meter { min-width: 12rem; text-align: right; font-variant-numeric: tabular-nums; }
.meter-nums {
  margin: 0;
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 .9rem;
  font-weight: 650; font-size: .95rem; line-height: 1.3;
}
.meter .spent { color: var(--ink); }
.meter .over { color: var(--red); }
.meter .left { color: var(--green); }
.bar {
  height: 6px; margin: .4rem 0 .3rem;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--ink) var(--p), var(--green) var(--p));
}
.bar.is-over { background: var(--red); }
.meter-budget { margin: 0 0 .1rem; color: var(--yellow); font-weight: 700; font-size: 1rem; line-height: 1.3; }
.meter.big .meter-budget { font-size: 1.3rem; }
.meter.big .meter-nums { font-size: 1.15rem; }
.meter.big .bar { height: 10px; border-radius: 5px; }

/* ---------- overview ---------- */
#overview { margin: 0 0 1rem; }
.summary {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 1rem 2rem; align-items: center;
  margin-bottom: 1.25rem;
}
.span { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; color: var(--muted); }
.span li { display: flex; align-items: center; gap: .65rem; }
.span svg { width: 1.3rem; height: 1.3rem; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.span li:first-child { color: var(--ink); font-weight: 600; }
.span li.is-warn { color: var(--error); }
.span li.is-warn svg { stroke: var(--error); }
.span li.is-ok svg { stroke: var(--green); }
.fxnote { margin: .25rem 0 0; color: var(--error); font-size: .9rem; }

/* ---------- layout switch ---------- */
.layout { display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; margin-top: 1.75rem; }
.layout-group { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.layout-label { margin-right: .35rem; font-weight: 600; font-size: .9rem; color: var(--muted); }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; pointer-events: none; }
.pill span {
  display: inline-block;
  padding: .35rem .9rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-s);
  font-size: .92rem; font-weight: 550;
  cursor: pointer;
}
.pill span:hover { border-color: var(--ink); }
.pill input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pill input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- plan ---------- */
.plan { margin-top: 2.5rem; }

/* a top-level section in nested layouts (a country, a month) */
.chapter { margin: 0 0 3rem; scroll-margin-top: 1.5rem; }
.chapter-head {
  display: grid; grid-template-columns: 1fr auto;
  gap: .5rem 2rem; align-items: end;
  padding-bottom: .9rem; margin-bottom: 1rem;
  border-bottom: 3px solid var(--c, var(--ink));
}
.chapter-head h2 {
  margin: 0;
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
  font-weight: 700; font-stretch: 75%;
  line-height: 1;
  font-variation-settings: "opsz" 72;
}
.chapter-head .sub { margin: .35rem 0 0; color: var(--muted); }

/* a card (a city visit, a week, a month) */
.card {
  margin: 0 0 1rem;
  padding: 1.1rem 1.25rem 1.2rem;
  background: var(--surface);
  border-left: 6px solid var(--c, var(--accent));
  scroll-margin-top: 1.5rem;
}
.card-head { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1.5rem; align-items: start; }
.card-head h3 { margin: 0; font-size: 1.5rem; font-weight: 700; line-height: 1.15; }
.card-head .sub { margin: .15rem 0 0; font-weight: 550; }
.card-empty { margin: .8rem 0 0; color: var(--muted); }
.notes { margin: .5rem 0 0; max-width: 65ch; color: var(--muted); white-space: pre-line; overflow-wrap: anywhere; }

/* where we are during a week or month */
.places { margin: .35rem 0 0; display: flex; flex-wrap: wrap; gap: .25rem .9rem; font-size: .92rem; font-weight: 550; }
.places span { padding-left: .45rem; border-left: 4px solid var(--c); line-height: 1.2; }

/* where we sleep during a visit */
.stays { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .3rem; }
.stay { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; font-size: .95rem; }
.stay-type {
  padding: .05rem .5rem;
  border: 1.5px solid var(--c, var(--accent));
  border-radius: var(--radius-s);
  font-size: .78rem; font-weight: 650; letter-spacing: .02em;
}
.stay-name { font-weight: 650; color: inherit; text-decoration-color: var(--line); text-underline-offset: 3px; }
.stay small { color: var(--muted); }
.open-nights { margin: .5rem 0 0; color: var(--error); font-size: .9rem; font-weight: 550; }

.events { list-style: none; margin: .9rem 0 0; padding: 0; }
.event {
  display: grid;
  grid-template-columns: 7.5rem 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: .55rem 0;
  border-top: 1px solid var(--line);
}
.when small, .what small, .cost small { display: block; color: var(--muted); font-size: .85rem; font-weight: 400; }
.what a { color: inherit; text-decoration-color: var(--line); text-underline-offset: 3px; }
.what a:hover { text-decoration-color: currentColor; }
.event.is-auto .what > :first-child { color: var(--accent); }
.what small a { color: inherit; text-decoration-color: var(--line); text-underline-offset: 2px; overflow-wrap: anywhere; }
.what small a:hover { text-decoration-color: currentColor; }
.sites a + a { margin-left: .7rem; }
.notes a { color: inherit; text-underline-offset: 2px; }

/* ---------- expenses tab + pie chart ---------- */
/* budget column, then the chart to its right when open */
.head-side { display: flex; align-items: flex-start; justify-content: flex-end; gap: 1rem 1.5rem; }
.head-budget { display: grid; justify-items: end; gap: .55rem; }
.expenses-tab {
  padding: .3rem .85rem;
  font-size: .85rem;
  background: transparent; color: var(--ink);
  border-color: var(--line);
}
.expenses-tab:hover { border-color: var(--ink); }
.expenses-tab::after {
  content: ""; display: inline-block;
  width: .4em; height: .4em; margin-left: .55em;
  border-right: 2px solid; border-bottom: 2px solid;
  transform: translateY(-.2em) rotate(45deg);
}
.expenses-tab[aria-expanded="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.expenses-tab[aria-expanded="true"]::after { transform: translateY(.05em) rotate(-135deg); }

.expenses {
  display: flex; align-items: center; gap: 1rem;
  padding-left: 1.5rem;
  border-left: 1px solid var(--line);
}
.expenses[hidden] { display: none; }
.expenses-empty { margin: 0; max-width: 12rem; color: var(--muted); font-size: .9rem; }
.pie { width: 6.5rem; height: 6.5rem; flex: none; }
.pie .slice { fill: none; stroke: var(--slice); stroke-width: 7; cursor: pointer; }
.pie .slice:hover { stroke-width: 8.5; }
.legend-box { display: grid; gap: .45rem; }
.legend-label {
  padding: 0; border: 0; border-radius: 2px;
  background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.legend-label:hover { text-decoration: underline; text-underline-offset: 2px; }
.expenses-hint { margin: 0; color: var(--muted); font-size: .78rem; }
/* one category picked: the others fade */
.expenses.is-filtered .slice:not(.is-active),
.expenses.is-filtered .legend li:not(.is-active) > * { opacity: .3; }
.expenses.is-filtered .legend li.is-active .legend-label { font-weight: 700; }

/* a section filtered to one expense group: hide the other events */
:is(.card, .chapter)[data-filter="travel"] .event:not([data-group="travel"]),
:is(.card, .chapter)[data-filter="accommodation"] .event:not([data-group="accommodation"]),
:is(.card, .chapter)[data-filter="food"] .event:not([data-group="food"]),
:is(.card, .chapter)[data-filter="experiences"] .event:not([data-group="experiences"]),
:is(.card, .chapter)[data-filter="other"] .event:not([data-group="other"]) { display: none; }
.legend {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: auto 1fr auto auto; gap: .2rem .7rem; align-items: center;
  font-size: .88rem; line-height: 1.3; font-variant-numeric: tabular-nums;
}
.legend li { display: contents; }
.swatch { width: .8rem; height: .8rem; border-radius: 3px; background: var(--slice); }
.legend-amount { font-weight: 600; text-align: right; }
.legend-share { color: var(--muted); text-align: right; }
.exp-travel { --slice: var(--exp-travel); }
.exp-accommodation { --slice: var(--exp-accommodation); }
.exp-food { --slice: var(--exp-food); }
.exp-experiences { --slice: var(--exp-experiences); }
.exp-other { --slice: var(--exp-other); }
.cost { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* not enough room for title + budget + chart side by side: title goes on top */
@media (max-width: 960px) {
  .card-head:has(.expenses:not([hidden])), .chapter-head:has(.expenses:not([hidden])) { grid-template-columns: 1fr; }
  :is(.card-head, .chapter-head):has(.expenses:not([hidden])) .head-side { justify-content: flex-start; }
  :is(.card-head, .chapter-head):has(.expenses:not([hidden])) .head-budget { justify-items: start; }
  :is(.card-head, .chapter-head):has(.expenses:not([hidden])) .meter { text-align: left; }
  :is(.card-head, .chapter-head):has(.expenses:not([hidden])) .meter-nums { justify-content: flex-start; }
}

/* ---------- Timemap ---------- */
.tm-stage {
  position: relative;
  height: clamp(420px, 68vh, 760px);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 8px 30px rgb(0 0 0 / .08);
}
.tm-stage > .tm-map { position: absolute; inset: 0; } /* beats MapLibre's own "position: relative" */
.tm-error { margin: 0; padding: 2rem; color: var(--error); }

/* the card floating on the map */
.tm-now {
  position: absolute; top: 1rem; left: 1rem; z-index: 2;
  width: min(320px, calc(100% - 2rem));
  max-height: calc(100% - 2rem); overflow: auto;
  padding: 1rem 1.15rem 1.1rem;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 12px;
  box-shadow: 0 6px 24px rgb(0 0 0 / .12);
}
.tm-date {
  margin: 0 0 .5rem; display: flex; justify-content: space-between; gap: 1rem;
  font-size: .82rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.tm-kicker { margin: 0; font-size: .85rem; font-weight: 600; color: var(--accent); }
.tm-now h2 {
  margin: .1rem 0 0;
  font-size: 1.85rem; font-weight: 720; font-stretch: 80%; line-height: 1.02;
  font-variation-settings: "opsz" 48;
}
.tm-sub { margin: .3rem 0 0; color: var(--muted); font-size: .92rem; }
.tm-progress { height: 4px; margin: .7rem 0 .1rem; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) var(--p), var(--line) var(--p)); }
.tm-note { margin: .45rem 0 0; color: var(--muted); font-size: .82rem; }
.tm-note:empty { display: none; }
.tm-plan { display: inline-block; margin-top: .7rem; color: var(--accent); font-weight: 600; text-underline-offset: 3px; }
/* out for an activity: the activities' colour, like their route on the map */
.tm-doing {
  margin: .7rem 0 0; padding-left: .55rem;
  border-left: 3px solid var(--exp-experiences);
  font-weight: 600; font-size: .95rem;
}
.tm-stay { margin: .8rem 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; font-weight: 600; font-size: .95rem; }
.tm-stay small { color: var(--muted); font-weight: 500; }
.tm-day-title {
  margin: 1rem 0 .35rem; padding-top: .75rem; border-top: 1px solid var(--line);
  font-size: .78rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.tm-day { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.tm-day li { display: grid; grid-template-columns: 3.4rem 1fr; gap: .5rem; align-items: baseline; font-size: .92rem; }
.tm-time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .85rem; }
button.tm-event {
  padding: 0; border: 0; border-radius: 2px; background: none; color: inherit;
  font: inherit; font-weight: 550; text-align: left; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px;
}
button.tm-event:hover { text-decoration-color: currentColor; }

.tm-chip {
  position: absolute; right: 1rem; bottom: 2.4rem; z-index: 2;
  padding: .45rem .95rem; font-size: .85rem;
  background: color-mix(in srgb, var(--surface) 90%, transparent); color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 4px 14px rgb(0 0 0 / .12);
}
.tm-chip:hover { border-color: var(--ink); }

/* "we are here": a dot with a soft pulse, a ring while driving */
.tm-me { width: 22px; height: 22px; display: grid; place-items: center; }
.tm-me span {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); border: 3px solid #fff;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent), 0 2px 6px rgb(0 0 0 / .3);
}
.tm-me.is-moving span { width: 18px; height: 18px; background: #fff; border: 5px solid var(--accent); }
/* flying: a plane in a white disc */
.tm-me.is-flying { width: 28px; height: 28px; }
.tm-me.is-flying span {
  width: 26px; height: 26px; border: 2px solid var(--accent);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2316314A' d='M21 15.5v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V8.5l-8 5v2l8-2.5V18l-2 1.5V21l3.5-1 3.5 1v-1.5L13 18v-5z'/%3E%3C/svg%3E") center / 15px no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .tm-me span { animation: tm-pulse 2s ease-out infinite; }
}
@keyframes tm-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent), 0 2px 6px rgb(0 0 0 / .3); }
  80%, 100% { box-shadow: 0 0 0 16px transparent, 0 2px 6px rgb(0 0 0 / .3); }
}

/* the timeline under the map */
.tm-timeline { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; margin-top: 1.1rem; }
.tm-play {
  width: 3rem; height: 3rem; padding: 0; margin-top: .1rem;
  display: grid; place-items: center;
  border-radius: 50%;
}
.tm-play::before { /* play triangle */
  content: ""; margin-left: 4px;
  border-style: solid; border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent currentColor;
}
.tm-play.is-playing::before { /* pause bars */
  margin-left: 0; width: 12px; height: 15px; border: 0;
  background: linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px, currentColor 8px 12px);
}
.tm-rail { position: relative; }
.tm-track {
  position: relative; height: 2.6rem;
  border-radius: 8px; overflow: hidden;
  background: color-mix(in srgb, var(--line) 45%, transparent);
}
.tm-seg {
  position: absolute; top: 0; bottom: 0;
  display: flex; align-items: center;
  padding: 0 .45rem; overflow: hidden;
  background: var(--c); color: #fff;
  border-right: 2px solid var(--paper);
}
.tm-seg span { font-size: .8rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--yellow); }
.tm-months { position: relative; height: 1.4rem; margin-top: .3rem; }
.tm-months span {
  position: absolute; top: 0; padding-left: .35rem;
  border-left: 1px solid var(--line);
  font-size: .8rem; color: var(--muted);
}
.tm-under {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .6rem 1.5rem; margin: .5rem 0 0 4rem;
}
.tm-hint { margin: 0; color: var(--muted); font-size: .82rem; }
.tm-speed { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.pill.small span { padding: .2rem .65rem; font-size: .82rem; }

/* the slider sits on top of the track: invisible rail, a tall line as handle */
.tm-range {
  position: absolute; left: 0; right: 0; top: -.4rem;
  width: 100%; height: 3.4rem; margin: 0;
  background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.tm-range:focus { outline: none; }
.tm-range::-webkit-slider-runnable-track { height: 3.4rem; background: transparent; }
.tm-range::-moz-range-track { height: 3.4rem; background: transparent; }
.tm-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 6px; height: 3.4rem; border-radius: 3px;
  background: var(--ink); border: 2px solid var(--paper);
  box-shadow: 0 2px 8px rgb(0 0 0 / .3);
}
.tm-range::-moz-range-thumb {
  width: 4px; height: 3.2rem; border-radius: 3px;
  background: var(--ink); border: 2px solid var(--paper);
  box-shadow: 0 2px 8px rgb(0 0 0 / .3);
}
.tm-range:focus-visible::-webkit-slider-thumb { outline: 3px solid var(--accent); outline-offset: 2px; }
.tm-range:focus-visible::-moz-range-thumb { outline: 3px solid var(--accent); outline-offset: 2px; }

/* map controls in the page's style */
.maplibregl-ctrl-group { border-radius: 10px !important; overflow: hidden; }

/* ---------- Home: the trip projects ---------- */
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 1rem; }
.home-card {
  display: flex; flex-direction: column; gap: .35rem;
  padding: 1.2rem 1.25rem 1.1rem;
  background: var(--surface); border-radius: 12px;
  text-align: left;
}
.home-card h2 { margin: 0 0 .2rem; font-size: 1.75rem; font-weight: 720; font-stretch: 80%; line-height: 1.05; }
.home-status { margin: 0; font-size: .95rem; }
.home-status.is-error { color: var(--error); }
.home-chip {
  display: inline-block; margin-right: .3rem; padding: .05rem .55rem;
  border-radius: var(--radius-s); font-size: .8rem; font-weight: 650;
  border: 1.5px solid currentColor;
}
.home-chip.is-prep { color: var(--yellow); }
.home-chip.is-on { color: var(--accent); }
.home-chip.is-back { color: var(--muted); }
.home-dates { margin: .3rem 0 0; font-weight: 600; }
.home-facts, .home-money { margin: 0; color: var(--muted); font-size: .92rem; }
.home-money b { color: var(--ink); }
.home-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .8rem; }
.home-open {
  padding: .6rem 1.15rem; border-radius: var(--radius-s);
  background: var(--ink); color: var(--paper);
  font-weight: 600; font-size: .95rem; text-decoration: none;
}
.home-add {
  align-items: center; justify-content: center; min-height: 12rem;
  border: 2px dashed var(--line); background: transparent; color: var(--muted);
  font-size: 1.05rem;
}
.home-add:hover { border-color: var(--ink); color: var(--ink); }
.home-plus { font-size: 2.2rem; line-height: 1; font-weight: 300; }

.home-field { display: grid; gap: .2rem; margin-top: .55rem; }
.home-field label { font-weight: 650; font-size: .95rem; }
.home-help { margin: 0 0 .3rem; color: var(--muted); font-size: .84rem; line-height: 1.4; }
.home-help a { color: var(--accent); font-weight: 600; }
.home-field input, .home-select, .dp-field {
  width: 100%;
  font: inherit; font-size: .95rem; font-weight: 500; padding: .55rem .7rem;
  background: var(--paper); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 8px;
}
.home-field input:hover, .home-select:hover, .dp-field:hover { border-color: var(--muted); }
/* the currency list: the browser's select, restyled like the other fields, with our own arrow */
.home-select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235D6D7A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center; background-size: 1rem;
}
.home-field input:focus-visible, .home-select:focus-visible, .dp-field:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: transparent; }

/* ---------- date picker (datepicker.js) ---------- */
.dp { position: relative; }
.dp-field { display: flex; align-items: center; justify-content: space-between; gap: .5rem; text-align: left; cursor: pointer; }
.dp-field span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-field.is-empty span { color: var(--muted); }
.dp-icon { width: 1.15rem; height: 1.15rem; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dp-pop {
  position: absolute; z-index: 30; top: calc(100% + .4rem); left: 0;
  width: 18.5rem; padding: .8rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 12px 34px rgb(0 0 0 / .18);
}
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.dp-title { margin: 0; font-weight: 700; }
.dp-nav, .dp-day, .dp-link {
  padding: 0; border: 0; background: none; color: var(--ink);
  font: inherit; font-weight: 550; cursor: pointer;
}
.dp-nav { width: 2rem; height: 2rem; border-radius: 50%; font-size: 1.3rem; line-height: 1; }
.dp-nav:hover { background: color-mix(in srgb, var(--line) 60%, transparent); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-weekday { padding: .2rem 0; text-align: center; color: var(--muted); font-size: .75rem; font-weight: 650; }
.dp-day { height: 2.25rem; border-radius: 8px; font-size: .9rem; font-variant-numeric: tabular-nums; }
.dp-day:hover { background: color-mix(in srgb, var(--line) 60%, transparent); }
.dp-day.is-other { color: var(--muted); opacity: .55; }
.dp-day.is-today { box-shadow: inset 0 0 0 1.5px var(--accent); }
.dp-day.is-picked { background: var(--ink); color: var(--paper); font-weight: 700; }
.dp-day:focus-visible, .dp-nav:focus-visible, .dp-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.dp-foot { display: flex; justify-content: space-between; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.dp-link { padding: .25rem .4rem; border-radius: 6px; color: var(--accent); font-size: .88rem; font-weight: 650; }
.dp-link:hover { background: color-mix(in srgb, var(--line) 60%, transparent); }
.home-remove { margin-left: auto; color: var(--error); border-color: var(--error); }

/* ---------- Builder (builder.js, mock-up) ---------- */
button:disabled { opacity: .45; cursor: not-allowed; }
.bl-mock {
  margin: 0 0 1.5rem; padding: .7rem 1rem; max-width: 75ch;
  background: var(--surface); border-left: 4px solid var(--yellow); font-size: .92rem;
}
.bl-intro { max-width: 70ch; margin-bottom: 1.25rem; }
.bl-intro h2 { margin: 0 0 .3rem; font-size: 1.9rem; font-weight: 720; font-stretch: 80%; line-height: 1.05; }
.bl-intro p { margin: 0; color: var(--muted); }

.bl-summary { margin-bottom: 1.25rem; }
.bl-summary p { margin: 0 0 .5rem; font-weight: 600; }
.bl-strip { display: flex; gap: 2px; height: 2rem; border-radius: 6px; overflow: hidden; }
.bl-strip span {
  flex-basis: 0; min-width: 0; padding: 0 .4rem; display: flex; align-items: center;
  background: var(--c); color: #fff; font-size: .78rem; font-weight: 650;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.5rem; align-items: start; }
.bl-route { display: grid; gap: 1rem; }
.bl-country { background: var(--surface); border-left: 6px solid var(--c); border-radius: 4px 12px 12px 4px; }
.bl-country header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem 1rem; padding: .9rem 1.1rem .4rem; }
.bl-country h3 { margin: 0; font-size: 1.35rem; font-weight: 720; font-stretch: 85%; }
.bl-country header small { color: var(--muted); }
.bl-steps { list-style: none; margin: 0; padding: 0; }
.bl-step { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem 1rem; padding: .75rem 1.1rem; border-top: 1px solid var(--line); }
.bl-step.is-editing { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.bl-step-title { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .5rem; font-weight: 650; font-size: 1.05rem; }
.bl-step-title small { color: var(--muted); font-weight: 500; font-size: .85rem; }
.bl-kind { padding: .05rem .45rem; border-radius: 4px; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: color-mix(in srgb, var(--line) 70%, transparent); color: var(--muted); }
.bl-kind.is-country, .bl-kind.is-region { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.bl-step-dates { margin: .1rem 0 0; color: var(--muted); font-size: .9rem; }
.bl-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .45rem 0 0; }
.bl-chips:empty { display: none; }
.bl-chip { padding: .1rem .55rem; border: 1.5px solid var(--line); border-radius: var(--radius-s); font-size: .8rem; font-weight: 600; }
.bl-chip.is-sleep { border-color: var(--accent); color: var(--accent); }
.bl-chip.is-warn { border-color: var(--red); color: var(--red); }
.bl-tools { display: flex; gap: .25rem; align-items: start; }
.bl-tool {
  width: 2rem; height: 2rem; padding: 0; display: grid; place-items: center;
  background: transparent; color: var(--ink); border: 1.5px solid var(--line); border-radius: 8px; font-size: .9rem;
}
.bl-tool:hover:not(:disabled) { border-color: var(--ink); }
.bl-tool.wide { width: auto; padding: 0 .65rem; font-size: .82rem; font-weight: 650; white-space: nowrap; }
.bl-tool.small { width: 1.6rem; height: 1.6rem; font-size: .75rem; border-radius: 6px; }
.bl-chip.is-muted { color: var(--muted); border-style: dashed; }

/* a step's accommodations and activities */
.bl-items { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .2rem; }
.bl-items li {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto auto; gap: .6rem; align-items: center;
  padding: .3rem .4rem .3rem .55rem; border-radius: 8px; font-size: .9rem;
  background: color-mix(in srgb, var(--slice) 10%, transparent);
  border-left: 3px solid var(--slice);
}
.bl-items.is-stays { --slice: var(--exp-accommodation); }
.bl-items.is-acts { --slice: var(--exp-experiences); }
.bl-item-when { color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
.bl-item-hours { display: block; white-space: nowrap; }
.bl-item-title { font-weight: 600; overflow-wrap: anywhere; }
.bl-item-cost { font-variant-numeric: tabular-nums; font-weight: 600; font-size: .85rem; }
.bl-row-tools { display: flex; gap: .2rem; }
.bl-after { margin-top: .8rem; }
.bl-tools { flex-wrap: wrap; justify-content: flex-end; max-width: 24rem; }
/* the city's buttons stay together at its top right, next to its name; its lists run underneath */
.bl-step > .bl-tools { align-self: start; align-content: flex-start; }
.bl-step-body { grid-column: 1 / -1; }
.bl-step-body:empty { display: none; }
.bl-step-body > .bl-items:first-child { margin-top: .1rem; }

/* ---------- confirmation pop-up (dialog.js) ---------- */
.dlg {
  width: min(30rem, calc(100% - 2rem)); padding: 1.3rem 1.4rem 1.1rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 24px 60px rgb(0 0 0 / .3);
}
.dlg::backdrop { background: rgb(10 20 30 / .45); backdrop-filter: blur(2px); }
.dlg h2 { margin: 0 0 .5rem; font-size: 1.45rem; font-weight: 720; font-stretch: 85%; line-height: 1.15; }
.dlg-body p { margin: 0 0 .4rem; color: var(--muted); }
.dlg-list { margin: .5rem 0 0; padding: .55rem .8rem; border-radius: 10px; border-left: 4px solid var(--c); background: color-mix(in srgb, var(--c) 9%, transparent); }
.dlg-list.is-remove { --c: var(--red); }
.dlg-list.is-keep { --c: var(--green); }
.dlg-list-title { margin: 0 0 .2rem; font-weight: 700; font-size: .85rem; }
.dlg-list ul { margin: 0; padding-left: 1.1rem; font-size: .92rem; }
.dlg-list li + li { margin-top: .1rem; }
.dlg-list li.dlg-more { list-style: none; margin-left: -1.1rem; color: var(--muted); font-style: italic; }
.dlg-note { margin: .4rem 0 0; color: var(--muted); font-size: .85rem; }
.dlg-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.1rem; }
button.is-danger { background: var(--red); border-color: var(--red); color: var(--paper); } /* dark text on the light night red */

/* ---------- city finder (cityfinder.js) ---------- */
.cf { position: relative; }
.cf-list {
  position: absolute; z-index: 30; top: calc(100% + .3rem); left: 0; right: 0;
  list-style: none; margin: 0; padding: .3rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 34px rgb(0 0 0 / .18);
}
.cf-item { display: grid; padding: .45rem .6rem; border-radius: 7px; cursor: pointer; }
.cf-item b { font-weight: 650; }
.cf-item small { color: var(--muted); font-size: .82rem; }
.cf-item:hover, .cf-item.is-active { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.cf-note { padding: .5rem .6rem; color: var(--muted); font-size: .88rem; }
.cf-credit { padding: .3rem .6rem .1rem; color: var(--muted); font-size: .7rem; text-align: right; }
.cf-chosen { margin: .35rem 0 0; color: var(--muted); font-size: .88rem; }
.cf-ok { margin-right: .35rem; color: var(--green); font-weight: 700; }

.bl-form { position: sticky; top: 4rem; padding: 1.1rem 1.2rem; background: var(--surface); border-radius: 12px; }
.bl-form h3 { margin: 0 0 .6rem; font-size: 1.25rem; font-weight: 700; }
.bl-seg { display: flex; flex-wrap: wrap; gap: .3rem; }
.bl-two { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.bl-problem { margin: .6rem 0 0; color: var(--error); font-weight: 600; font-size: .9rem; }

.bl-departure { margin-bottom: 1.25rem; max-width: 26rem; }
.bl-departure > p { margin: 0; font-weight: 600; }
.bl-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 1rem; }
.bl-theme { padding: 1rem 1.1rem; background: var(--surface); border-radius: 12px; }
.bl-theme h3 { margin: 0 0 .4rem; font-size: 1.15rem; font-weight: 700; }
.bl-theme ul { list-style: none; margin: 0; padding: 0; }
/* a task: the checkbox and its title on one line, "when" and the date under it */
.bl-task {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .6rem; align-items: center;
  padding: .55rem 0; border-top: 1px solid var(--line); font-size: .92rem;
}
.bl-task label { grid-column: 1 / -1; }
.bl-task .bl-when { justify-self: start; margin-left: 1.55rem; }
.bl-task:first-child { border-top: 0; }
.bl-task label { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.bl-task input[type="checkbox"] { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--green); flex: none; }
/* a suggestion not added to the calendar (yet) */
.bl-task.is-off label span, .bl-task.is-off .bl-date { color: var(--muted); }
.home-select.bl-when { width: auto; padding: .3rem 1.9rem .3rem .55rem; font-size: .82rem; background-position: right .5rem center; }
.bl-date { color: var(--muted); font-size: .82rem; text-align: right; font-variant-numeric: tabular-nums; }
.bl-own .bl-task { grid-template-columns: minmax(0, 1fr) auto auto; }
.bl-add-task { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem; margin-top: .6rem; }
.bl-add-task input[name="title"] { grid-column: 1 / -1; }
.bl-add-task input[name="title"], .bl-add-task .dp-field {
  font: inherit; font-size: .9rem; padding: .45rem .6rem;
  background: var(--paper); color: var(--ink); border: 1.5px solid var(--line); border-radius: 8px;
}
.bl-add-task button[type="submit"] { padding: .45rem .9rem; }

.bl-preview { margin-top: 2rem; padding: 1.1rem 1.2rem 1.2rem; background: var(--surface); border-radius: 12px; }
.bl-preview h2 { margin: 0 0 .6rem; font-size: 1.3rem; font-weight: 700; }
.bl-preview ul { list-style: none; margin: 0 0 1rem; padding: 0; }
.bl-ev {
  display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .1rem 1rem;
  padding: .45rem 0 .45rem .7rem; border-top: 1px solid var(--line); border-left: 3px solid var(--line);
}
.bl-ev.is-visit { border-left-color: var(--accent); }
.bl-ev.is-stay { border-left-color: var(--exp-accommodation); }
.bl-ev.is-transport { border-left-color: var(--exp-travel); }
.bl-ev.is-task { border-left-color: var(--green); }
.bl-ev-date { color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums; }
.bl-ev-title { font-weight: 600; }
.bl-ev small { grid-column: 2; color: var(--muted); font-size: .8rem; }
.bl-soon { display: block; margin-top: .45rem; color: var(--muted); }

@media (max-width: 860px) {
  .bl-layout { grid-template-columns: 1fr; }
  .bl-form { position: static; }
}
/* phones: the city's buttons go under its name; an item's date on its own line, then its name,
   cost and buttons */
@media (max-width: 640px) {
  .bl-step { grid-template-columns: minmax(0, 1fr); }
  .bl-step > .bl-tools { justify-content: flex-start; max-width: none; }
  .bl-items li { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: .1rem; }
  .bl-items li .bl-item-when { grid-column: 1 / -1; }
  .bl-item-hours { display: inline; margin-left: .4rem; }
}

/* ---------- Preparation ---------- */
.prep-head {
  display: flex; flex-wrap: wrap; gap: 1.25rem 3rem; align-items: end;
  padding: 1.2rem 1.25rem; background: var(--surface); border-radius: 12px;
}
.prep-big { margin: 0; font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 750; font-stretch: 75%; line-height: 1; }
.prep-sub { margin: .3rem 0 0; color: var(--muted); }
.prep-progress { flex: 1 1 14rem; }
.prep-bar { height: 8px; margin-top: .45rem; border-radius: 4px;
  background: linear-gradient(90deg, var(--green) var(--p), var(--line) var(--p)); }
.prep-money { margin: .1rem 0 0; font-size: 1.5rem; font-weight: 720; }
.prep-costs small { color: var(--muted); font-size: .8rem; }
.prep-month h2 { margin: 2rem 0 .4rem; font-size: 1.5rem; font-weight: 700; font-stretch: 80%; }
.prep-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border-radius: 12px; }
.prep-task {
  display: grid; grid-template-columns: 1.6rem 7rem 1fr auto; gap: .9rem; align-items: baseline;
  padding: .7rem 1.1rem; border-top: 1px solid var(--line);
}
.prep-task:first-child { border-top: 0; }
.prep-task input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--green); cursor: pointer; align-self: center; }
.prep-task input:disabled { cursor: default; }
.prep-task.is-done .what > :first-child { text-decoration: line-through; color: var(--muted); }
.prep-task.is-saving { opacity: .6; }
.prep-flag {
  display: inline-block; margin-left: .5rem; padding: 0 .5rem;
  border-radius: var(--radius-s); font-size: .78rem; font-weight: 650;
  color: var(--yellow); border: 1.5px solid currentColor;
}
.prep-flag.is-late { color: var(--red); }

@media (max-width: 640px) {
  .prep-task { grid-template-columns: 1.6rem 1fr auto; gap: .1rem .8rem; }
  .prep-task .when { grid-column: 2 / -1; }
  .prep-task .what { grid-column: 2; }
}

/* ---------- Budget ---------- */
.bd-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.bd-tile { padding: .9rem 1.1rem; background: var(--surface); border-radius: 10px; }
.bd-tile-label { margin: 0; color: var(--muted); font-size: .85rem; font-weight: 600; }
.bd-tile-value { margin: .15rem 0 0; font-size: 1.7rem; font-weight: 720; font-stretch: 85%; line-height: 1.1; }
.bd-tile.is-budget .bd-tile-value { color: var(--yellow); }
.bd-tile.is-left .bd-tile-value { color: var(--green); }
.bd-tile.is-over .bd-tile-value { color: var(--red); }

.bd-split { margin-top: 1.4rem; }
.bd-title { margin: 0 0 .5rem; font-weight: 650; }
.bd-split-bar { display: flex; gap: 2px; height: 14px; border-radius: 4px; overflow: hidden; }
.bd-split-bar i { flex-basis: 0; background: var(--slice); }
.bd-split-bar.is-empty { background: color-mix(in srgb, var(--line) 70%, transparent); } /* nothing spent yet */
.bd-split-legend { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: .92rem; }
.bd-split-legend li { display: flex; align-items: center; gap: .4rem; }
.bd-split-legend b { font-variant-numeric: tabular-nums; }
.bd-split-legend small { color: var(--muted); }

/* the chart: buttons picking a line, then the plot */
.bd-chart { margin-top: 1.5rem; padding: 1.1rem 1.1rem .6rem; background: var(--surface); border-radius: 10px; }
.bd-picks { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.bd-pick {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .85rem; font-size: .9rem; font-weight: 600;
  background: transparent; color: var(--ink); border: 1.5px solid var(--line);
}
.bd-pick:hover { border-color: var(--ink); }
.bd-pick small { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.bd-pick[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.bd-pick[aria-pressed="true"] small { color: inherit; opacity: .75; }
.bd-pick[aria-pressed="true"] .swatch { box-shadow: 0 0 0 1.5px var(--paper); }
.exp-total { --slice: var(--ink); }

.bd-plot { position: relative; min-height: 380px; }
.bd-svg { display: block; overflow: visible; }
.bd-grid { stroke: var(--line); stroke-width: 1; }
.bd-axis { stroke: var(--muted); stroke-width: 1; opacity: .6; }
.bd-ylabel, .bd-xlabel { fill: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.bd-line path { fill: none; stroke: var(--slice); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.bd-line circle { fill: var(--slice); stroke: var(--surface); stroke-width: 2; }
.bd-line.is-picked path { stroke-width: 3; }
.bd-line.is-faded { opacity: .18; }
.bd-budget-line { fill: none; stroke: var(--yellow); stroke-width: 2; stroke-dasharray: 2 4; stroke-linecap: round; }
.bd-mean { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 6 5; }
.bd-mean-label { fill: var(--muted); font-size: 11px; }
.bd-mean-value { fill: var(--ink); font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bd-guide { stroke: var(--muted); stroke-width: 1; }
.bd-catcher { fill: transparent; cursor: crosshair; }
.bd-empty-note { fill: var(--muted); font-size: 14px; }

.bd-tip {
  position: absolute; z-index: 3; min-width: 13rem; pointer-events: none;
  padding: .65rem .8rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 20px rgb(0 0 0 / .14);
  font-size: .85rem;
}
.bd-tip-title { margin: 0; font-weight: 700; }
.bd-tip-sub { margin: 0 0 .4rem; color: var(--muted); font-size: .78rem; }
.bd-tip ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.bd-tip li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .45rem; }
.bd-tip li.is-faded { opacity: .55; }
.bd-tip b { font-variant-numeric: tabular-nums; }
.bd-tip-note { margin: .35rem 0 0; color: var(--muted); font-size: .78rem; }

/* the same numbers as a table */
.bd-details { margin-top: 1rem; }
.bd-details summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.bd-scroll { overflow-x: auto; margin-top: .6rem; background: var(--surface); border-radius: 10px; }
.bd-numtable { width: 100%; border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; }
.bd-numtable th, .bd-numtable td { padding: .45rem .75rem; border-top: 1px solid var(--line); text-align: right; white-space: nowrap; }
.bd-numtable th:first-child { text-align: left; }
.bd-numtable thead th { border-top: 0; color: var(--muted); font-weight: 600; }
.bd-avg-row th, .bd-avg-row td { font-weight: 700; border-top: 2px solid var(--ink); }

@media (max-width: 640px) {
  .bd-tiles { grid-template-columns: repeat(2, 1fr); }
  .bd-tile-value { font-size: 1.35rem; }
}

@media (max-width: 640px) {
  /* the card goes under the map instead of on it */
  .tm-stage { height: auto; overflow: visible; background: none; box-shadow: none; }
  .tm-stage > .tm-map { position: relative; height: 58vh; border-radius: 14px; overflow: hidden; }
  .tm-now { position: static; width: auto; max-height: none; margin-top: .75rem; backdrop-filter: none; background: var(--surface); }
  .tm-chip { top: .75rem; left: .75rem; right: auto; bottom: auto; }
  .tm-under { margin-left: 0; }
}

@media (max-width: 640px) {
  .summary, .chapter-head, .card-head { grid-template-columns: 1fr; }
  .meter { text-align: left; min-width: 0; }
  .head-side { flex-wrap: wrap; justify-content: flex-start; }
  .head-budget { justify-items: start; }
  .expenses { padding-left: 0; border-left: 0; }
  .meter-nums { justify-content: flex-start; }
  .event { grid-template-columns: 1fr auto; gap: .1rem 1rem; }
  .when { grid-column: 1 / -1; }
}

/* =========================================================
   Styles: what Nocturne and Expedition change beyond the tokens
   Selectors start with :where([data-style=…]), which adds no weight, so each rule overrides the
   matching rule above only by coming later in the file.
   ========================================================= */

/* ---------- both styles: titles, data, labels, surfaces ---------- */
/* titles in the style's display font (Instrument Serif / Big Shoulders) */
h1, .brand span, .empty h2, .chapter-head h2, .card-head h3, .card-num, .tm-now h2, .home-card h2,
.bl-intro h2, .bl-country h3, .bl-form h3, .bl-theme h3,
.bl-preview h2, .dlg h2, .prep-big, .prep-month h2, .prep-money, .bd-tile-value, .countdown-num {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-transform: var(--display-case);
  letter-spacing: var(--display-tracking);
  font-stretch: normal;
  font-variation-settings: normal;
}
/* small labels: capitals, spaced */
.layout-label, .tm-date, .tm-day-title, .bd-tile-label, .countdown-label, .style-btn-label {
  text-transform: var(--label-case);
  letter-spacing: var(--label-tracking);
  font-size: .72rem;
}
/* dates, times and amounts in the data font (Geist / IBM Plex Mono) */
.when, .cost, .meter-nums, .meter-budget, .legend, .tm-time, .tm-date, .bl-item-when, .bl-item-cost,
.bl-ev-date, .bl-date, .bd-tile-label, .bd-pick small, .bd-numtable, .bd-split-legend b, .home-dates,
.stay-type, .home-chip, .bl-kind, .bl-chip, .prep-flag, .tm-months span, .bd-ylabel, .bd-xlabel {
  font-family: var(--font-data);
}
/* panels: the style's corners and edge */
.home-card, .tm-stage, .tm-now, .bl-form, .bl-theme, .bl-preview, .prep-head, .prep-list,
.bd-tile, .bd-chart, .bd-scroll, .dlg, .dp-pop, .cf-list, .bd-tip, .bl-country, .constellation {
  border-radius: var(--radius);
  border: var(--edge-w) solid var(--edge);
}
.bl-country { border-left: 6px solid var(--c); }
.home-add { border: 2px dashed var(--line); }

/* the style menu (main.js), left of the day/night button */
.style-pick { position: relative; align-self: center; margin-left: auto; }
.style-btn {
  display: inline-flex; align-items: baseline; gap: .4rem;
  padding: .4rem .85rem; font-size: .88rem;
  background: transparent; color: var(--nav-ink);
  border: 1.5px solid color-mix(in srgb, var(--nav-muted) 45%, transparent);
}
.style-btn:hover { border-color: var(--nav-ink); }
.style-btn-label { color: var(--nav-muted); font-weight: 500; }
.style-btn::after {
  content: ""; align-self: center; width: .35em; height: .35em; margin-left: .15rem;
  border-right: 1.5px solid; border-bottom: 1.5px solid; transform: translateY(-.15em) rotate(45deg);
}
.style-menu {
  position: absolute; z-index: 40; top: calc(100% + .5rem); right: 0;
  width: min(21rem, calc(100vw - 2rem)); padding: .35rem;
  display: grid; gap: .2rem;
  background: var(--surface); color: var(--ink);
  border: var(--edge-w) solid var(--edge); border-radius: var(--radius);
  box-shadow: 0 14px 40px rgb(0 0 0 / .22);
}
.style-menu[hidden] { display: none; }
.style-menu button {
  display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: center;
  padding: .65rem .7rem; text-align: left;
  background: transparent; color: var(--ink); border: 0; border-radius: calc(var(--radius) * .6);
  font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: normal;
}
.style-menu button:hover { background: color-mix(in srgb, var(--line) 55%, transparent); }
.style-menu button[aria-checked="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.style-menu button:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.style-menu strong { display: block; font-size: 1rem; }
.style-menu button[aria-checked="true"] strong::after { content: " ✓"; color: var(--accent); }
.style-menu small { display: block; color: var(--muted); font-size: .82rem; line-height: 1.35; }
/* the swatches show each style's own colours, whatever style is on */
.style-swatch { display: flex; }
.style-swatch i { width: 1.1rem; height: 2.4rem; border: 1px solid rgb(0 0 0 / .15); }
.style-swatch i + i { margin-left: -1px; }
.style-swatch.is-nocturne i:nth-child(1) { background: #0B1020; border-radius: 99px 0 0 99px; }
.style-swatch.is-nocturne i:nth-child(2) { background: #D6B46A; }
.style-swatch.is-nocturne i:nth-child(3) { background: #F1F3F7; border-radius: 0 99px 99px 0; }
.style-swatch.is-expedition i:nth-child(1) { background: #1F3329; }
.style-swatch.is-expedition i:nth-child(2) { background: #C4501F; }
.style-swatch.is-expedition i:nth-child(3) { background: #E9E7E1; }

/* ---------- signature pieces (signature.js) ---------- */
.countdown-slot:empty { display: none; }
.countdown { position: relative; width: 150px; height: 150px; display: grid; place-items: center; }
.countdown svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Nocturne: a fine ring, the part travelled in gold, a big serif number */
.ring-track { fill: none; stroke: var(--hair); stroke-width: 1; }
.ring-part { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; }
.ring-dots { fill: none; stroke: var(--hair); stroke-width: 1; stroke-dasharray: 1 5; }
.ring-text { position: relative; text-align: center; }
.countdown-num { margin: 0; font-size: 3.6rem; line-height: 1; }
.countdown-label { margin: .2rem 0 0; color: var(--muted); font-size: .66rem; }
/* Expedition: a rubber stamp, slightly turned */
.countdown.is-expedition { transform: rotate(-8deg); }
.stamp-ring { fill: none; stroke: var(--accent); stroke-width: 3; }
.stamp-ring.thin { stroke-width: 1; }
.stamp-around { fill: var(--accent); font-family: var(--font-data); font-size: 12px; letter-spacing: 3px; }
.stamp-big { fill: var(--accent); font-family: var(--font-display); font-weight: 800; font-size: 52px; }
.stamp-small { fill: var(--accent); font-family: var(--font-data); font-size: 10.5px; letter-spacing: 2px; }

.route { margin: .5rem 0 0; }
/* Nocturne: the constellation */
.constellation {
  margin: 0; padding: 1rem 1rem .5rem; overflow-x: auto;
  background: color-mix(in srgb, var(--surface) 55%, var(--paper));
}
.constellation svg { display: block; width: 100%; min-width: 720px; height: auto; }
.constellation figcaption { margin: .2rem .3rem .3rem; color: var(--muted); font-size: .82rem; }
.cn-sky circle { fill: var(--ink); opacity: .3; }
.cn-axis line { stroke: var(--ink); stroke-opacity: .14; stroke-width: 1; }
.cn-month { fill: var(--muted); font-family: var(--font-data); font-size: 12px; letter-spacing: 1.5px; }
.cn-line { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-opacity: .75; }
.cn-glow { fill: var(--accent); opacity: .14; }
.cn-core { fill: var(--accent); stroke: transparent; stroke-width: 8; transition: stroke .15s; }
.cn-label { fill: var(--ink); font-family: var(--font-display); font-size: 19px; }
.cn-star { cursor: pointer; }
.cn-star:hover .cn-core, .cn-star:focus-visible .cn-core { stroke: color-mix(in srgb, var(--accent) 30%, transparent); }
.cn-star:hover .cn-label { fill: var(--accent); }
.cn-star:focus-visible { outline: none; }
.cn-star:focus-visible .cn-label { fill: var(--accent); text-decoration: underline; }
/* Expedition: boarding-pass tags */
.passes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 0; }
.passes li { display: flex; align-items: center; }
.pass {
  display: block; min-width: 4.5rem; padding: .55rem .8rem;
  background: var(--surface); color: var(--ink); text-decoration: none;
  border: var(--edge-w) solid var(--edge); border-radius: var(--radius-s);
}
.pass.is-end { background: var(--strip-bg); color: var(--strip-ink); border-color: var(--strip-bg); }
.pass:hover { border-color: var(--accent); }
.pass-code { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.85rem; line-height: 1; }
.pass-date { display: block; margin-top: .1rem; font-family: var(--font-data); font-size: .7rem; }
.pass-mode { padding: 0 .5rem; color: var(--muted); font-family: var(--font-data); font-size: .64rem; white-space: nowrap; }

/* the visit's number on its card: "01" (Nocturne) or a "Stage 01" band (Expedition) */
.card-num { margin: 0; }

/* ---------- Nocturne ---------- */
:where([data-style="nocturne"]) .card-num-label { display: none; }
:where([data-style="nocturne"]) .menu { border-bottom-color: var(--hair); }
:where([data-style="nocturne"]) .menu-link {
  font-weight: 500; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
}
:where([data-style="nocturne"]) .menu-link[aria-current="page"]::after {
  left: .9rem; right: .9rem; bottom: .55rem; height: 1px; border-radius: 0;
}
:where([data-style="nocturne"]) .brand span { font-size: 1.65rem; letter-spacing: .01em; }
:where([data-style="nocturne"]) h1 { font-size: clamp(3.5rem, 8.4vw, 5.04rem); line-height: .98; }
:where([data-style="nocturne"]) .top { padding: 2.25rem 0 1.5rem; }
/* cities as open rows between gold hairlines, the number above the name */
:where([data-style="nocturne"]) .card {
  padding: 1.75rem 0 1.5rem; background: transparent;
  border-left: 0; border-top: 1px solid var(--hair);
}
:where([data-style="nocturne"]) .card-num { color: var(--accent); font-size: 3rem; line-height: 1; }
:where([data-style="nocturne"]) .card-num::after {
  content: ""; display: block; width: 2rem; height: 2px; margin: .45rem 0 .55rem; background: var(--c, var(--accent));
}
:where([data-style="nocturne"]) .card-head h3 { font-size: 2.3rem; line-height: 1.02; }
:where([data-style="nocturne"]) .card-head .sub { margin-top: .3rem; color: var(--muted); font-weight: 400; }
:where([data-style="nocturne"]) .chapter-head { border-bottom: 1px solid var(--c, var(--hair)); }
:where([data-style="nocturne"]) .chapter-head h2 { font-size: clamp(2.2rem, 5vw, 3rem); }
:where([data-style="nocturne"]) .event { border-top-color: var(--hair); }
:where([data-style="nocturne"]) .when { font-size: .88rem; }
:where([data-style="nocturne"]) .meter.big .bar { height: 3px; border-radius: 0; }
:where([data-style="nocturne"]) .bar { background: linear-gradient(90deg, var(--accent) var(--p), var(--hair) var(--p)); }
:where([data-style="nocturne"]) .bar.is-over { background: var(--red); }
:where([data-style="nocturne"]) .home-card h2 { font-size: 2.1rem; line-height: 1; }
:where([data-style="nocturne"]) .tm-now h2 { font-size: 2.2rem; line-height: 1; }
:where([data-style="nocturne"]) .bd-tile-value, :where([data-style="nocturne"]) .prep-money { font-size: 2.1rem; font-weight: 400; }
:where([data-style="nocturne"]) .prep-big { font-size: clamp(2.4rem, 5.5vw, 3.2rem); }
:where([data-style="nocturne"]) .bl-intro h2 { font-size: 2.4rem; }
:where([data-style="nocturne"]) .dlg h2 { font-size: 1.9rem; }
:where([data-style="nocturne"]) .tm-kicker { text-transform: uppercase; letter-spacing: .16em; font-size: .7rem; font-weight: 500; }
:where([data-style="nocturne"]) .tm-play { background: var(--accent); border-color: var(--accent); color: var(--paper); }

/* ---------- Expedition ---------- */
:where([data-style="expedition"]) .menu { border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
:where([data-style="expedition"]) .menu-inner { gap: .35rem; }
:where([data-style="expedition"]) .menu-link {
  align-self: center; margin: .7rem 0; padding: .3rem .65rem; border-radius: 3px;
  font-family: var(--font-data); font-weight: 500; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
}
:where([data-style="expedition"]) .menu-link[aria-current="page"] { background: var(--nav-ink); color: var(--nav-bg); }
:where([data-style="expedition"]) .menu-link[aria-current="page"]::after { display: none; }
:where([data-style="expedition"]) .brand span { font-size: 1.65rem; letter-spacing: .06em; }
:where([data-style="expedition"]) :is(.theme-btn, .profile-btn) { border-radius: var(--radius-s); }
:where([data-style="expedition"]) .auth-btn.is-out { color: var(--nav-bg); } /* the forest bar's green on cream */
:where([data-style="expedition"]) :is(.style-btn, .auth-btn) { font-family: var(--font-data); font-weight: 500; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; }
:where([data-style="expedition"]) h1 { font-size: clamp(3.92rem, 10.5vw, 6.44rem); line-height: .88; }
:where([data-style="expedition"]) .top { padding: 2.5rem 0 1.5rem; border-bottom: var(--edge-w) solid var(--edge); margin-bottom: 1.75rem; }
/* buttons: square corners, small capitals */
:where([data-style="expedition"]) button {
  font-weight: 600; font-size: .84rem; letter-spacing: .05em; text-transform: uppercase;
}
:where([data-style="expedition"]) :is(.legend-label, .tm-event, .dp-day, .dp-nav, .dp-link, .bd-pick, .style-menu button, .expenses-tab) {
  text-transform: none; letter-spacing: normal;
}
:where([data-style="expedition"]) .pill span {
  font-family: var(--font-data); font-size: .76rem; letter-spacing: .05em; text-transform: uppercase;
}
:where([data-style="expedition"]) .pill input:checked + span { background: var(--strip-bg); border-color: var(--strip-bg); color: var(--strip-ink); }
:where([data-style="expedition"]) :is(.home-field input, .home-select, .dp-field, .bl-add-task input[name="title"], .bl-add-task .dp-field) { border-radius: 2px; }
:where([data-style="expedition"]) :is(.bl-tool, .bl-items li, .dp-day, .dp-nav, .dp-link, .cf-item, .dlg-list, .status, .bl-strip, .bd-split-bar, .tm-track, .bar, .prep-bar, .tm-progress, .bl-kind) { border-radius: 0; }
:where([data-style="expedition"]) .tm-play { border-radius: var(--radius-s); }
:where([data-style="expedition"]) .home-open { border-radius: var(--radius-s); text-transform: uppercase; letter-spacing: .05em; font-size: .84rem; }
/* cards: a bordered sheet, the stage band across the top */
:where([data-style="expedition"]) .card {
  position: relative; padding: 3.1rem 1.15rem 1.15rem;
  border: var(--edge-w) solid var(--edge); box-shadow: inset 6px 0 0 var(--c, var(--accent));
}
:where([data-style="expedition"]) .card:not(:has(.card-num)) { padding-top: 1.15rem; }
:where([data-style="expedition"]) .card-num {
  position: absolute; top: 0; left: 0; right: 0;
  padding: .45rem 1rem .45rem 1.4rem;
  background: var(--strip-bg); color: var(--strip-ink); box-shadow: inset 6px 0 0 var(--c, var(--accent));
  font-family: var(--font-data); font-weight: 500; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
}
:where([data-style="expedition"]) .card-head h3 { font-size: 2.3rem; line-height: .95; }
:where([data-style="expedition"]) .card-head .sub,
:where([data-style="expedition"]) .chapter-head .sub {
  margin-top: .35rem; color: var(--muted); font-family: var(--font-data); font-weight: 400; font-size: .78rem;
  letter-spacing: .03em; text-transform: uppercase;
}
:where([data-style="expedition"]) .chapter-head { border-bottom: 3px solid var(--edge); }
:where([data-style="expedition"]) .chapter-head h2 { font-size: clamp(2.3rem, 5.5vw, 3.2rem); line-height: .95; }
:where([data-style="expedition"]) .event { border-top: 1px dashed var(--hair); }
:where([data-style="expedition"]) .when { font-size: .78rem; text-transform: uppercase; }
:where([data-style="expedition"]) .cost { font-size: .82rem; font-weight: 500; }
:where([data-style="expedition"]) .stay-type { border-radius: 2px; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
:where([data-style="expedition"]) .meter-nums, :where([data-style="expedition"]) .meter-budget { text-transform: uppercase; font-weight: 500; letter-spacing: .02em; }
:where([data-style="expedition"]) .meter-budget { font-size: .9rem; }
:where([data-style="expedition"]) .meter.big .meter-budget { font-size: 1.05rem; }
:where([data-style="expedition"]) .meter.big .meter-nums { font-size: .95rem; }
:where([data-style="expedition"]) .bar { background: linear-gradient(90deg, var(--ink) var(--p), var(--green) var(--p)); }
:where([data-style="expedition"]) .bar.is-over { background: var(--red); }
:where([data-style="expedition"]) .home-card h2 { font-size: 2.3rem; line-height: .95; }
:where([data-style="expedition"]) .tm-now h2 { font-size: 2.2rem; line-height: .95; }
:where([data-style="expedition"]) .tm-stage { box-shadow: none; }
:where([data-style="expedition"]) .tm-now { box-shadow: none; }
:where([data-style="expedition"]) .tm-kicker { font-family: var(--font-data); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; }
:where([data-style="expedition"]) .bd-tile-value, :where([data-style="expedition"]) .prep-money { font-size: 2.3rem; line-height: 1; }
:where([data-style="expedition"]) .prep-big { font-size: clamp(2.6rem, 6vw, 3.6rem); line-height: .9; }
:where([data-style="expedition"]) .bl-intro h2 { font-size: 2.5rem; line-height: .95; }
:where([data-style="expedition"]) .dlg h2 { font-size: 1.9rem; line-height: 1; }
:where([data-style="expedition"]) .maplibregl-ctrl-group { border-radius: 0 !important; }

@media (max-width: 640px) {
  .summary { grid-template-columns: 1fr; }
  .countdown { width: 120px; height: 120px; justify-self: start; }
  .countdown-num { font-size: 2.8rem; }
  .menu-inner { flex-wrap: wrap; row-gap: 0; padding-bottom: .5rem; }
}

/* ---------- Welcome (welcome.js): for someone not signed in ---------- */
body[data-view="welcome"] .top { display: none; }
.wl-hero {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: center;
  padding: 3.5rem 0 3rem;
}
.wl-kicker { margin: 0 0 .6rem; color: var(--accent); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .22em; }
.wl-title { margin: 0 0 1.4rem; font-size: clamp(5rem, 14vw, 9rem); line-height: .85; }
.wl-lead { margin: 0 0 1rem; max-width: 54ch; color: var(--muted); font-size: 1.1rem; }
.wl-lead + .wl-lead {
  margin-top: 1.4rem; color: var(--ink);
  font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-case);
  font-size: 1.6rem; line-height: 1.25; letter-spacing: var(--display-tracking);
}
.wl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin-top: 2rem; }
.wl-signin { padding: .8rem 1.5rem; font-size: 1.02rem; }
.wl-sample { color: var(--accent); font-weight: 600; text-underline-offset: 3px; }
.wl-note { margin: 1rem 0 0; max-width: 54ch; color: var(--muted); font-size: .88rem; }
.wl-sky { margin: 0; }
.wl-sky svg { display: block; width: 100%; max-height: 470px; overflow: visible; }
.wl-sky figcaption { margin-top: .6rem; color: var(--muted); font-size: .82rem; text-align: center; }
.wl-faint circle { fill: var(--ink); opacity: .28; }
.wl-line { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-opacity: .6; }
.wl-glow { fill: var(--accent); opacity: .14; }
.wl-core { fill: var(--accent); }
.wl-label { fill: var(--ink); font-family: var(--font-display); font-size: 17px; letter-spacing: var(--display-tracking); text-transform: var(--display-case); }
.wl-greek { fill: var(--accent); font-style: italic; text-transform: none; } /* α β γ stay lower case */
.wl-what {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1.5rem 2.5rem;
  padding: 2rem 0 1rem; border-top: 1px solid var(--hair);
}
.wl-item h2 {
  margin: 0 0 .35rem; font-size: 1.9rem; line-height: 1;
  font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-case); letter-spacing: var(--display-tracking);
}
.wl-item p { margin: 0; color: var(--muted); }
:where([data-style="nocturne"]) .wl-lead + .wl-lead { font-style: italic; }
:where([data-style="expedition"]) .wl-kicker { font-family: var(--font-data); letter-spacing: .12em; }
:where([data-style="expedition"]) .wl-title { line-height: .8; }
:where([data-style="expedition"]) .wl-item { padding-top: .8rem; border-top: 3px solid var(--edge); }
:where([data-style="expedition"]) .wl-what { border-top: 0; }
@media (max-width: 760px) {
  .wl-hero { grid-template-columns: 1fr; padding-top: 2rem; }
  .wl-sky svg { max-height: 300px; }
}

/* ---------- Profile (profile.js) ---------- */
.pf-intro { margin: 0 0 1.5rem; max-width: 62ch; color: var(--muted); }
.pf-form { display: grid; gap: 1.6rem; max-width: 34rem; }
.pf-field { margin: 0; padding: 0; border: 0; display: grid; gap: .3rem; }
.pf-field legend, .pf-field > label { padding: 0; font-weight: 650; font-size: 1.05rem; }
.pf-field legend + .home-help { margin-top: .3rem; }
.pf-saved { margin: 0; min-height: 1.5em; color: var(--green); font-weight: 600; font-size: .92rem; }

/* ---------- Home: the Logbook (logbook.js) and the trips under it ---------- */
.logbook {
  position: relative; margin: 0 0 3rem; padding: 2rem 2.3rem;
  background: var(--surface); border: var(--edge-w) solid var(--edge); border-radius: calc(var(--radius) + 4px);
}
.logbook.is-live { border-color: color-mix(in srgb, var(--accent) 45%, var(--edge)); }
/* faint stars behind the logbook (logbook.js starfield; Nocturne only) */
.lb-stars { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.lb-stars svg { display: block; width: 100%; height: 100%; fill: var(--ink); }
.logbook > :not(.lb-stars) { position: relative; }
:where([data-style="expedition"]) .lb-stars { display: none; }
.lb-band {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: 0 0 1rem;
  color: var(--accent); font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
}
.lb-band-date { margin-left: auto; color: var(--muted); letter-spacing: .14em; }
.lb-live {
  display: inline-flex; align-items: center; gap: .4rem; padding: .05rem .6rem;
  border: 1px solid color-mix(in srgb, var(--green) 55%, transparent); border-radius: 999px;
  color: var(--green); font-size: .68rem; letter-spacing: .14em;
}
.lb-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .lb-live::before { animation: lb-blink 1.6s ease-in-out infinite; }
  .cn-star.is-here .cn-here { animation: lb-blink 2.2s ease-in-out infinite; }
}
@keyframes lb-blink { 50% { opacity: .25; } }
.lb-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 2.5rem; align-items: end; }
.lb-kicker { display: none; }
.lb-title {
  margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-case);
  letter-spacing: var(--display-tracking); font-size: clamp(2.2rem, 5vw, 3.3rem); line-height: 1.05;
}
.logbook.is-live .lb-title { font-size: clamp(3.2rem, 8vw, 5.3rem); line-height: .95; }
.lb-of { font-size: .5em; color: var(--muted); }
.lb-hl { color: var(--accent); }
.lb-lede { margin: .7rem 0 0; font-family: var(--font-display); font-size: 1.45rem; line-height: 1.25; color: var(--muted); }
.lb-text { margin: .9rem 0 0; max-width: 60ch; color: var(--muted); }
.lb-stay { margin: .55rem 0 0; color: var(--muted); }
.lb-stay .stay-type { margin-right: .55rem; border-color: var(--accent); color: var(--ink); }
.lb-badge { position: relative; width: 190px; height: 190px; display: grid; place-items: center; }
.lb-badge > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lb-badge .countdown { width: 190px; height: 190px; }
.lb-ring-track { fill: none; stroke: var(--hair); stroke-width: 1; }
.lb-ring-part { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; }
.lb-ring-dots { fill: none; stroke: var(--hair); stroke-width: 1; stroke-dasharray: 1 5; }
.lb-ring-text { position: relative; text-align: center; }
.lb-ring-num { margin: 0; font-family: var(--font-display); font-size: 3.5rem; line-height: 1; }
.lb-ring-label { margin: .3rem 0 0; color: var(--muted); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; }

.lb-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2.5rem; margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid var(--hair); }
.lb-cols.is-three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.lb-cols.is-three > .lb-col { padding: 0 1.6rem; }
.lb-cols.is-three > .lb-col:first-child { padding-left: 0; }
.lb-cols.is-three > .lb-col:last-child { padding-right: 0; }
.lb-cols.is-three > .lb-col + .lb-col { border-left: 1px solid var(--hair); }
.lb-label { margin: 0 0 .6rem; color: var(--muted); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; }
.lb-list { list-style: none; margin: 0; padding: 0; }
.lb-list li { display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto; gap: 1rem; align-items: baseline; padding: .7rem 0; border-bottom: 1px solid var(--hair); }
.lb-list li:last-child { border-bottom: 0; }
.lb-today .lb-list li { grid-template-columns: 4.2rem minmax(0, 1fr); }
.lb-list li.is-past { color: var(--muted); }
.lb-list li.is-past .lb-what { text-decoration: line-through; }
.lb-when { font-family: var(--font-data); font-size: .85rem; color: var(--muted); }
.lb-flag { padding: 0 .55rem; border: 1.5px solid var(--yellow); border-radius: var(--radius-s); color: var(--yellow); font-size: .74rem; font-weight: 600; white-space: nowrap; }
.lb-flag.is-late { border-color: var(--red); color: var(--red); }
.lb-more { margin: .8rem 0 0; color: var(--muted); font-size: .9rem; }
.lb-link { color: var(--accent); font-weight: 600; }
.lb-blocks { display: none; }
.lb-dl { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.5rem; }
.lb-dl dt { color: var(--muted); font-size: .8rem; }
.lb-dl dd { margin: .1rem 0 0; font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-case); font-size: 1.7rem; line-height: 1.1; }
.lb-dl .is-budget dd { color: var(--accent); }
.lb-dl :is(.is-warn, .is-ok) dd { font-family: var(--font-body); font-weight: 500; text-transform: none; font-size: .95rem; line-height: 1.35; }
.lb-dl .is-warn dd { color: var(--error); }
.lb-dl .is-ok dd { color: var(--green); }
.lb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.4rem; }
.lb-actions .lb-link { padding: .5rem 1.1rem; border: 1.5px solid var(--line); border-radius: var(--radius-s); color: var(--ink); text-decoration: none; font-size: .95rem; }
.lb-actions .lb-link:hover { border-color: var(--ink); }
.lb-edit { margin-left: auto; }

.lb-odo { text-align: right; }
.lb-odo .lb-label { margin-bottom: .2rem; }
.lb-odo-num { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(3rem, 7vw, 4.4rem); line-height: 1; color: var(--accent); }
.lb-unit { margin-left: .3rem; font-size: .42em; color: var(--ink); }
.lb-odo-sub { margin: .35rem 0 0; color: var(--muted); font-size: .88rem; }
.lb-odo-bar { height: 2px; margin-top: .6rem; background: linear-gradient(90deg, var(--accent) var(--p), var(--hair) var(--p)); }

.lb-route { margin-top: 1.6rem; padding: .6rem 0 .2rem; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.lb-route .constellation { padding: 0; border: 0; background: none; }
.lb-route .constellation figcaption { display: none; }
.lb-route .passes { padding: .6rem 0; }
.lb-route + .lb-cols { margin-top: 0; border-top: 0; }
/* the route's progress (signature.js route(…, { today })) */
.cn-line.is-done { stroke-opacity: 1; stroke-width: 2; }
.cn-line.is-ahead { stroke: var(--ink); stroke-opacity: .22; stroke-dasharray: 3 5; }
.cn-star.is-ahead .cn-core { fill: var(--ink); opacity: .38; }
.cn-star.is-ahead .cn-glow { display: none; }
.cn-star.is-ahead .cn-label { fill: var(--muted); font-size: 15px; }
.cn-star.is-next .cn-core { fill: var(--surface); stroke: var(--accent); stroke-width: 1.6; }
.cn-star.is-here .cn-label { fill: var(--accent); font-size: 21px; }
.cn-here { fill: color-mix(in srgb, var(--accent) 12%, transparent); stroke: var(--accent); stroke-opacity: .6; stroke-width: 1; }
.cn-note { fill: var(--muted); font-family: var(--font-data); font-size: 10px; letter-spacing: 1.6px; }
.pass.is-done { background: var(--strip-bg); color: var(--strip-ink); border-color: var(--strip-bg); }
.pass.is-here { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.pass.is-next { border-style: dashed; border-color: var(--accent); }
.pass.is-next .pass-date { color: var(--accent); }
.pass.is-ahead { border-color: var(--line); color: var(--muted); }

.lb-next h3 { margin: .1rem 0 0; font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-case); font-size: 2.4rem; line-height: 1; }
.lb-when-long { margin: .3rem 0 0; font-family: var(--font-display); font-size: 1.2rem; color: var(--accent); }
.lb-pass { display: none; }
.lb-lines { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .35rem; font-size: .94rem; }
.lb-lines li { display: flex; gap: .7rem; align-items: baseline; }
.lb-lines li span { flex: 0 0 6.2rem; color: var(--muted); font-size: .8rem; }

.lb-icon svg { display: block; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lb-weather-big { display: flex; align-items: center; gap: 1rem; }
.lb-weather-big .lb-icon svg { width: 3.2rem; height: 3.2rem; stroke: var(--accent); stroke-width: 1.3; }
.lb-temp { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 2.8rem; line-height: 1; }
.lb-temp-lo { font-size: .55em; color: var(--muted); }
.lb-weather-big .lb-text { margin: .2rem 0 0; font-size: .88rem; }
.lb-days { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .25rem; text-align: center; font-size: .8rem; }
.lb-days li { display: grid; justify-items: center; gap: .15rem; padding: .35rem 0; border: 1px solid transparent; border-radius: calc(var(--radius) * .6); }
.lb-days li.is-first { border-color: var(--accent); }
.lb-day { color: var(--muted); }
.lb-days li.is-first .lb-day { color: var(--ink); font-weight: 600; }
.lb-days .lb-icon svg { width: 1.35rem; height: 1.35rem; stroke: var(--ink); stroke-width: 1.6; }
.lb-sky { display: none; }
.lb-lo { color: var(--muted); }
.lb-credit { margin: .6rem 0 0; color: var(--muted); font-size: .7rem; }
.lb-now { margin: 0 0 .4rem; color: var(--muted); font-size: .9rem; }
.lb-now:empty { display: none; }

.lb-stats { margin: 1.5rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--hair); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.lb-stats.is-recap { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lb-stats dt { color: var(--muted); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; }
.lb-stats dd { margin: .25rem 0 0; font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-case); font-size: 2.1rem; line-height: 1.05; }
.lb-stat-small { font-size: .55em; color: var(--muted); }
.lb-stat-small.is-over { color: var(--error); }
.lb-stat-small.is-under { color: var(--green); }
.logbook.is-loading .lb-text { margin: 0; }

.home-section { margin-top: 3rem; }
.home-section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; padding-bottom: .7rem; margin-bottom: 1.3rem; border-bottom: 1px solid var(--hair); }
.home-section-head h2 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-case); letter-spacing: var(--display-tracking); font-size: 2.5rem; line-height: 1; }
.home-section-head p { margin: 0; color: var(--muted); font-size: .88rem; }
.home-card.is-past { background: transparent; }
.home-card.is-past h2 { color: var(--muted); }

:where([data-style="nocturne"]) .lb-lede { font-style: italic; }
:where([data-style="nocturne"]) .lb-when-long { font-style: italic; }

/* Expedition: a field-journal sheet, the band across the top, an odometer, a boarding pass */
:where([data-style="expedition"]) .logbook, :where([data-style="expedition"]) .logbook.is-live { padding: 0 0 1.8rem; border-radius: 0; border-color: var(--edge); }
:where([data-style="expedition"]) .lb-actions .lb-link { font-weight: 600; font-size: .84rem; letter-spacing: .05em; text-transform: uppercase; }
:where([data-style="expedition"]) .logbook > :not(.lb-band) { margin-left: 1.8rem; margin-right: 1.8rem; }
:where([data-style="expedition"]) .lb-band {
  margin: 0 0 1.5rem; padding: .55rem 1.1rem; background: var(--strip-bg); color: var(--strip-ink);
  font-family: var(--font-data); font-size: .74rem; letter-spacing: .1em;
}
:where([data-style="expedition"]) .lb-band-date { color: var(--strip-ink); opacity: .8; letter-spacing: .1em; }
:where([data-style="expedition"]) .lb-live { border: 0; border-radius: 2px; background: var(--accent); color: var(--paper); }
:where([data-style="expedition"]) .lb-kicker { display: block; margin: 0 0 .3rem; color: var(--muted); font-family: var(--font-data); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
:where([data-style="expedition"]) .lb-title { font-size: clamp(2.8rem, 7vw, 4.8rem); line-height: .9; }
:where([data-style="expedition"]) .logbook.is-live .lb-title { font-size: clamp(5rem, 13vw, 9.4rem); line-height: .82; }
:where([data-style="expedition"]) .lb-of { font-size: .32em; }
:where([data-style="expedition"]) .lb-lede { margin-top: .8rem; color: var(--ink); font-size: 1.9rem; line-height: 1; text-transform: uppercase; }
:where([data-style="expedition"]) .lb-cols { border-top: var(--edge-w) solid var(--edge); }
:where([data-style="expedition"]) .lb-cols.is-three > .lb-col + .lb-col { border-left: var(--edge-w) solid var(--edge); }
:where([data-style="expedition"]) .lb-label { color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; letter-spacing: .01em; }
:where([data-style="expedition"]) .lb-odo .lb-label { color: var(--muted); font-family: var(--font-data); font-weight: 500; font-size: .7rem; letter-spacing: .1em; }
:where([data-style="expedition"]) .lb-list li { border-bottom: 1px dashed var(--hair); }
:where([data-style="expedition"]) .lb-when { text-transform: uppercase; font-size: .78rem; color: var(--ink); }
:where([data-style="expedition"]) .lb-flag { border-radius: 0; border-color: var(--accent); color: var(--accent); font-family: var(--font-data); font-weight: 500; text-transform: uppercase; }
:where([data-style="expedition"]) .lb-blocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(20px, 1fr)); gap: 4px; margin: 0 0 .8rem; }
:where([data-style="expedition"]) .lb-blocks span { height: 10px; border: 1.5px solid var(--edge); }
:where([data-style="expedition"]) .lb-blocks span.is-done { background: var(--green); border-color: var(--green); }
:where([data-style="expedition"]) .lb-dl dt { font-family: var(--font-data); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
:where([data-style="expedition"]) .lb-dl dd { font-size: 2.4rem; line-height: 1; }
:where([data-style="expedition"]) .lb-odo-num { color: var(--ink); }
:where([data-style="expedition"]) .lb-digit {
  display: inline-block; width: .9em; margin-left: .1em; padding: .08em 0;
  background: var(--strip-bg); color: var(--strip-ink); text-align: center;
}
:where([data-style="expedition"]) .lb-odo-num .lb-digit:nth-last-child(2) { background: var(--accent); color: var(--paper); }
:where([data-style="expedition"]) .lb-sep { display: none; }
:where([data-style="expedition"]) .lb-unit { font-size: .45em; }
:where([data-style="expedition"]) .lb-odo-sub { font-family: var(--font-data); font-size: .76rem; text-transform: uppercase; }
:where([data-style="expedition"]) .lb-odo-bar { height: 6px; }
:where([data-style="expedition"]) .lb-route { border-top: 0; border-bottom: 0; padding: 0; }
:where([data-style="expedition"]) .lb-route + .lb-cols { margin-top: 1.2rem; border-top: var(--edge-w) solid var(--edge); }
:where([data-style="expedition"]) .lb-next h3 { font-size: 2.2rem; }
:where([data-style="expedition"]) .lb-when-long { font-family: var(--font-data); font-size: .8rem; text-transform: uppercase; }
:where([data-style="expedition"]) .lb-pass {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .8rem;
  padding: .7rem .9rem; border: var(--edge-w) solid var(--edge); background: var(--paper);
}
:where([data-style="expedition"]) .lb-code { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; line-height: 1; }
:where([data-style="expedition"]) .lb-code.is-to { color: var(--accent); }
:where([data-style="expedition"]) .lb-leg { color: var(--muted); font-family: var(--font-data); font-size: .68rem; text-align: center; }
:where([data-style="expedition"]) .lb-leg::after { content: "\A───────▶"; white-space: pre; }
:where([data-style="expedition"]) .lb-lines li span { font-family: var(--font-data); font-size: .7rem; text-transform: uppercase; }
:where([data-style="expedition"]) .lb-days { grid-template-columns: 1fr; gap: 0; text-align: left; font-family: var(--font-data); }
:where([data-style="expedition"]) .lb-days li {
  grid-template-columns: 3.4rem 1.3rem minmax(0, 1fr) 2.6rem 2.6rem; align-items: center; justify-items: start; gap: .5rem;
  padding: .4rem .4rem; border: 0; border-bottom: 1px dashed var(--hair); border-radius: 0;
}
:where([data-style="expedition"]) .lb-days li.is-first { background: var(--strip-bg); color: var(--strip-ink); border-bottom-color: transparent; }
:where([data-style="expedition"]) .lb-days li.is-first .lb-day { color: var(--strip-ink); }
:where([data-style="expedition"]) .lb-days li.is-first .lb-icon svg { stroke: var(--strip-ink); }
:where([data-style="expedition"]) .lb-days li.is-first .lb-lo { color: var(--strip-ink); }
:where([data-style="expedition"]) .lb-day { text-transform: uppercase; }
:where([data-style="expedition"]) .lb-sky { display: inline; font-size: .7rem; text-transform: uppercase; }
:where([data-style="expedition"]) :is(.lb-hi, .lb-lo) { justify-self: end; }
:where([data-style="expedition"]) .lb-days .lb-icon svg { width: 1.1rem; height: 1.1rem; }
:where([data-style="expedition"]) .lb-stats { border-top: var(--edge-w) solid var(--edge); }
:where([data-style="expedition"]) .lb-stats dt { font-family: var(--font-data); letter-spacing: .1em; }
:where([data-style="expedition"]) .lb-stats dd { font-size: 2.6rem; line-height: 1; }
:where([data-style="expedition"]) .home-section-head { border-bottom: 3px solid var(--edge); }
:where([data-style="expedition"]) .home-section-head p { font-family: var(--font-data); font-size: .76rem; text-transform: uppercase; }
:where([data-style="expedition"]) .home-card.is-past { position: relative; border-color: var(--line); }
:where([data-style="expedition"]) .home-card.is-past::after {
  content: "Completed"; position: absolute; top: 1rem; right: 1rem; transform: rotate(-6deg);
  padding: .05rem .5rem; border: 2px solid var(--muted); color: var(--muted);
  font-family: var(--font-data); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
}

@media (max-width: 760px) {
  .logbook { padding: 1.4rem; }
  .lb-top, .lb-cols, .lb-cols.is-three { grid-template-columns: 1fr; }
  .lb-cols.is-three > .lb-col, .lb-cols.is-three > .lb-col:first-child, .lb-cols.is-three > .lb-col:last-child { padding: 1.2rem 0 0; }
  .lb-cols.is-three > .lb-col + .lb-col { border-left: 0; border-top: 1px solid var(--hair); margin-top: 1.2rem; }
  .lb-stats, .lb-stats.is-recap { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb-odo { text-align: left; }
  .lb-badge { justify-self: start; }
  .lb-edit { margin-left: 0; }
  :where([data-style="expedition"]) .logbook { padding: 0 0 1.2rem; }
  :where([data-style="expedition"]) .logbook > :not(.lb-band) { margin-left: 1rem; margin-right: 1rem; }
  :where([data-style="expedition"]) .logbook.is-live .lb-title { font-size: 4.2rem; }
  :where([data-style="expedition"]) .lb-lede { font-size: 1.5rem; }
}

/* ---------- Footer and Privacy page (privacy.js) ---------- */
.site-foot {
  width: min(1120px, 100% - 2.5rem); margin: 0 auto; padding: 1.4rem 0 2.2rem;
  display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; border-top: 1px solid var(--hair);
  font-size: .86rem;
}
.site-foot a { color: var(--muted); text-decoration: none; }
.site-foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.site-foot a[hidden] { display: none; }
:where([data-style="expedition"]) .site-foot { font-family: var(--font-data); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; border-top: var(--edge-w) solid var(--edge); }
.privacy { max-width: 70ch; }
.pv-lead { margin: 0 0 2rem; font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-case); font-size: 1.6rem; line-height: 1.3; }
:where([data-style="nocturne"]) .pv-lead { font-style: italic; }
:where([data-style="expedition"]) .pv-lead { font-size: 1.8rem; line-height: 1.05; }
.pv-section { margin: 0 0 1.8rem; }
.pv-section h2 { margin: 0 0 .5rem; font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-case); letter-spacing: var(--display-tracking); font-size: 1.7rem; line-height: 1.1; }
.pv-section p { margin: 0 0 .6rem; color: var(--muted); }
.pv-section a { color: var(--accent); font-weight: 600; }
.pv-list { margin: .3rem 0 .8rem; padding-left: 1.2rem; display: grid; gap: .35rem; color: var(--muted); }
.pv-list strong { color: var(--ink); font-weight: 600; }
.pv-updated { margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--hair); color: var(--muted); font-size: .88rem; }

/* the new trip form's calendar choice (home.js) */
.home-choice { margin: .55rem 0 0; padding: 0; border: 0; display: grid; gap: .45rem; }
.home-choice legend { padding: 0; font-weight: 650; font-size: .95rem; }
.home-choice legend + .home-help { margin-top: .2rem; }
.home-option {
  display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start;
  padding: .6rem .7rem; border: 1.5px solid var(--line); border-radius: calc(var(--radius) * .6); cursor: pointer;
}
.home-option:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.home-option input { margin: .2rem 0 0; accent-color: var(--accent); }
.home-option { font-weight: 400; }
.home-option strong { display: block; font-size: .95rem; font-weight: 650; }
.home-option small { display: block; color: var(--muted); font-size: .82rem; line-height: 1.35; }
.home-field[hidden] { display: none; }

/* Profile: Delete my account */
.pf-danger { max-width: 34rem; margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--hair); }
.pf-danger h2 { margin: 0 0 .5rem; font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-case); font-size: 1.6rem; color: var(--error); }
.pf-danger p { margin: 0 0 .6rem; color: var(--muted); font-size: .95rem; }
.pf-danger button { margin-top: .4rem; }
:where([data-style="expedition"]) .pf-danger { border-top: var(--edge-w) solid var(--edge); }