/* the Travel Agent — multi-country trip planner.
   Dark editorial base shared with louisbrown.space. All country colour lives
   in SEMANTIC theme variables (--accent/--primary/--warn/--good/--map-*):
   the values below are the defaults the picker screen uses; the active
   country pack's THEME overrides them at load (see applyTheme in app.js).
   The Claude terracotta (--claude) never changes — it colours the "Agent"
   in the brand and the picker chrome. */

:root {
  --bg: #0F0E0C;
  --surface: #1A1814;
  --surface-2: #24201A;
  --text: #E8E0D0;
  --text-2: #C9C1AF;
  --muted: #8C846F;
  --border: rgba(232, 224, 208, 0.10);
  --border-strong: rgba(232, 224, 208, 0.20);

  /* Claude terracotta — the "Agent" in the brand. Never themed per country. */
  --claude: #D97757;
  --claude-rgb: 217, 119, 87;

  /* Country theme slots (overridden by the active pack's THEME).
     Each colour that feeds an rgba() tint has an -rgb twin. */
  --accent: #FFBE29;        --accent-rgb: 255, 190, 41;
  --accent-soft: #D9BE93;
  --primary: #E8A33D;       --primary-rgb: 232, 163, 61;
  --primary-bright: #F5B95C;
  --warn: #B4405E;          --warn-rgb: 180, 64, 94;
  --warn-deep: #8D153A;     --warn-deep-rgb: 141, 21, 58;
  --warn-bright: #E39AAB;
  --good: #3FA9A0;          --good-rgb: 63, 169, 160;
  --good-bright: #8FD4CC;
  --good-deep: #00534E;     --good-deep-rgb: 0, 83, 78;
  --map-land: #1E2C20;
  --map-water-1: #10201F;   --map-water-2: #0D1F1E;   --map-water-3: #0B1514;
  --map-tint-rgb: 20, 65, 62;
  --rain: #5A7CA8;

  --font-heading: 'Fraunces', Georgia, serif;
  --font-body: 'Newsreader', Georgia, serif;
  --font-ui: 'Inter', system-ui, sans-serif;

  --dock-min-h: 76px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scrollbar-width: thin; scrollbar-color: var(--muted) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--muted); border: 2px solid var(--bg); border-radius: 8px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--dock-min-h) + 1.5rem);
}
body.dock-open { padding-bottom: 260px; }

/* Flag nod: a hairline ribbon across the very top. --flag-bands is set from
   the active pack's EXPORT.bands; the fallback is a Claude-terracotta fade
   shown on the picker screen. */
.flag-ribbon {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  background: var(--flag-bands, linear-gradient(90deg, var(--claude) 0 30%, transparent 100%));
  opacity: 0.6;
}

.glow {
  position: fixed; inset: -15%; pointer-events: none; z-index: -1;
  background:
    radial-gradient(ellipse 45% 38% at 15% 20%, rgba(var(--good-rgb), 0.07) 0%, transparent 70%),
    radial-gradient(ellipse 40% 34% at 85% 75%, rgba(var(--primary-rgb), 0.06) 0%, transparent 70%),
    radial-gradient(ellipse 36% 30% at 70% 15%, rgba(var(--warn-deep-rgb), 0.06) 0%, transparent 65%);
  filter: blur(30px);
}

.wrap { max-width: 1220px; margin: 0 auto; padding: 0 1.5rem; }

/* ===== Top bar: brand + global travel controls ===== */
.topbar {
  max-width: 1220px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding: 1rem 1.5rem 0.8rem;
}
.topbar__left { display: flex; align-items: baseline; gap: 0.9rem; }
/* the decorative tag is the first thing to go when the bar gets tight —
   the tip pill widened the left cluster, hence the raised breakpoint */
@media (max-width: 1560px) { .topbar__tag { display: none; } }
.back-link {
  font-family: var(--font-ui); font-size: 0.78rem; font-weight: 500;
  color: var(--muted); text-decoration: none; letter-spacing: 0.04em;
  text-transform: lowercase; transition: color 0.15s ease; white-space: nowrap;
}
.back-link:hover { color: var(--text); }
.back-link::before { content: "← "; }
.brand {
  font-family: var(--font-heading); font-size: 1.9rem; font-weight: 300;
  letter-spacing: -0.02em; margin: 0; line-height: 1; color: var(--text);
  position: relative; padding-bottom: 6px;
}
.brand::after {
  content: ''; position: absolute; left: 2px; bottom: 0; width: 42px; height: 3px;
  border-radius: 2px;
  background: var(--flag-bands, linear-gradient(90deg, var(--claude) 0 55%, transparent 100%));
}
.brand__agent { color: var(--claude); font-style: italic; }

.country-switch {
  font-family: var(--font-ui); font-size: 0.7rem; font-weight: 500;
  color: var(--muted); text-decoration: none; white-space: nowrap;
  border: 1px solid var(--border); border-radius: 2rem; padding: 0.32rem 0.75rem;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.country-switch:hover { color: var(--claude); border-color: rgba(var(--claude-rgb), 0.5); }
.country-switch[hidden] { display: none; }

/* tip jar pill — same shape as the switch pill, with a whisper of terracotta
   so it reads at a glance without shouting. Opens the tip modal. */
.topbar-tip {
  font-family: var(--font-ui); font-size: 0.7rem; font-weight: 500;
  color: var(--text-2); background: none; white-space: nowrap; cursor: pointer;
  border: 1px solid rgba(var(--claude-rgb), 0.35); border-radius: 2rem;
  padding: 0.32rem 0.75rem;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.topbar-tip .brand__agent { font-family: var(--font-heading); }
.topbar-tip:hover {
  color: var(--claude); border-color: rgba(var(--claude-rgb), 0.6);
  background: rgba(var(--claude-rgb), 0.08);
}

/* Until a country pack is loaded, the planner chrome stays out of sight —
   the picker overlay is the whole app. */
body:not(.has-country) .top-controls,
body:not(.has-country) .board,
body:not(.has-country) .dock { display: none; }

.topbar__tag {
  font-family: var(--font-ui); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}

.top-controls { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.control { display: flex; align-items: center; gap: 0.6rem; }
.control__label {
  font-family: var(--font-ui); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted);
}

.month-chips, .style-chips { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.month-chip, .style-chip {
  border: 1px solid var(--border); background: transparent; color: var(--text-2);
  font-family: var(--font-ui); font-size: 0.7rem; font-weight: 500;
  padding: 0.32rem 0.42rem; border-radius: 0.45rem; cursor: pointer;
  transition: all 0.15s ease; letter-spacing: 0.02em;
}
.month-chip:hover, .style-chip:hover { border-color: var(--border-strong); color: var(--text); }
.month-chip.is-active {
  background: rgba(var(--accent-rgb), 0.13); border-color: rgba(var(--accent-rgb), 0.5);
  color: var(--accent);
}
.style-chip { padding: 0.32rem 0.7rem; }
.style-chip.is-active {
  background: rgba(var(--good-deep-rgb), 0.35); border-color: rgba(var(--good-rgb), 0.55);
  color: var(--good-bright);
}

/* ===== Board: map + side panel ===== */
.board {
  display: grid; grid-template-columns: minmax(370px, 5fr) 7fr;
  gap: 1.25rem; align-items: stretch;
  --board-h: clamp(470px, calc(100vh - 230px), 690px);
}
/* expanding the dock shrinks the board instead of covering it — the whole
   island stays in view, video-editor style */
body.dock-open .board { --board-h: clamp(300px, calc(100vh - 300px), 690px); }
.map-panel, .side-panel { transition: height 0.35s ease, max-height 0.35s ease; }

.map-panel {
  position: relative;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(var(--good-rgb), 0.10) 0%, transparent 60%),
    radial-gradient(110% 80% at 75% 85%, rgba(var(--map-tint-rgb), 0.55) 0%, transparent 70%),
    linear-gradient(160deg, var(--map-water-1) 0%, var(--map-water-2) 55%, var(--map-water-3) 100%);
  border: 1px solid var(--border); border-radius: 1rem;
  overflow: hidden;
  height: var(--board-h);
  display: flex; align-items: center; justify-content: center;
}
/* user-select: none so panning the map never accidentally highlights labels */
#map { width: 100%; height: 100%; display: block; touch-action: none; -webkit-user-select: none; user-select: none; }
#map.is-zoomed { cursor: grab; }
#map.is-panning { cursor: grabbing; }
.map-viewport { will-change: transform; }

/* on-map zoom controls */
.map-zoom {
  position: absolute; right: 0.85rem; bottom: 0.85rem;
  display: flex; flex-direction: column; gap: 0.3rem; z-index: 2;
}
.map-zoom__btn {
  width: 2rem; height: 2rem; display: grid; place-items: center;
  font-size: 1.15rem; line-height: 1; font-family: var(--font-ui);
  color: var(--text); cursor: pointer;
  background: rgba(20, 22, 28, 0.55); backdrop-filter: blur(6px);
  border: 1px solid var(--border); border-radius: 0.55rem;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.map-zoom__btn:hover { background: rgba(20, 22, 28, 0.8); border-color: var(--primary); }
.map-zoom__btn:active { transform: scale(0.92); }
.map-zoom__reset { font-size: 1rem; }

.map-legend {
  position: absolute; right: 0.95rem; top: 0.85rem;
  display: flex; flex-direction: column; gap: 0.28rem; align-items: flex-start;
  font-family: var(--font-ui); font-size: 0.66rem; color: var(--text-2);
  pointer-events: none;
}
/* Packs park the legend in whichever corner keeps it clear of the coastline,
   set from config STRINGS.legendCorner via the data attribute (default top-right). */
.map-legend[data-corner="top-left"]     { left: 0.95rem; right: auto; top: 0.85rem; bottom: auto; }
.map-legend[data-corner="bottom-left"]  { left: 0.95rem; right: auto; bottom: 0.85rem; top: auto; }
/* bottom-right is also where .map-zoom lives, so this corner sits beside the
   button stack rather than under it: clear its 2rem width (anchored at
   right: 0.85rem) plus a gap. Cleared horizontally, not vertically, because
   the stack's height changes when the reset button un-hides on zoom. */
.map-legend[data-corner="bottom-right"] { right: calc(0.85rem + 2rem + 0.6rem); left: auto; bottom: 0.85rem; top: auto; }
.map-legend__item { display: flex; align-items: center; gap: 0.45rem; letter-spacing: 0.04em; }
.map-legend__dot { width: 8px; height: 8px; border-radius: 50%; }

/* SVG innards */
/* non-scaling stroke: at deep zoom the coastline stays a hairline instead of
   fattening into a band (identical at zoom 1, where scale is 1 anyway) */
.island { fill: var(--map-land); stroke: rgba(232, 224, 208, 0.28); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.island-glow { fill: none; stroke: rgba(var(--good-rgb), 0.35); stroke-width: 10; filter: blur(14px); }

.rain-blob { fill: var(--rain); transition: fill-opacity 0.6s ease; }

.route-line {
  fill: none; stroke: var(--primary); stroke-width: 4.5;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 3 18;
  animation: route-flow 1.5s linear infinite;
  opacity: 0.9;
  /* keep the line's weight and dash constant regardless of zoom, so it stays
     in proportion with the counter-scaled dots and arrowheads */
  vector-effect: non-scaling-stroke;
}
/* fill/stroke live on the group and inherit to the inner head, which pan/zoom
   counter-scales so the arrow stays the same size as you zoom */
.route-arrow { fill: var(--primary-bright); stroke: rgba(15, 14, 12, 0.55); stroke-width: 2; }
.route-arrow__head { vector-effect: non-scaling-stroke; }
@keyframes route-flow { to { stroke-dashoffset: -21; } }
@media (prefers-reduced-motion: reduce) { .route-line { animation: none; } }

.loc { cursor: grab; }
.loc:active { cursor: grabbing; }
.loc__hit { fill: transparent; }
.loc__core {
  fill: #F5F0E6; stroke: rgba(15, 14, 12, 0.65); stroke-width: 2;
  transition: r 0.15s ease, fill 0.15s ease, opacity 0.2s ease;
}
.loc__ring {
  fill: none; stroke: var(--primary); stroke-width: 2.5; opacity: 0;
  transition: opacity 0.15s ease;
}
.loc__label {
  font-family: var(--font-ui); font-size: 31px; font-weight: 500;
  fill: var(--text-2); paint-order: stroke; stroke: rgba(13, 26, 25, 0.85); stroke-width: 6px;
  letter-spacing: 0.02em; pointer-events: none;
  transition: fill 0.15s ease, opacity 0.2s ease;
}
.loc__order {
  font-family: var(--font-ui); font-size: 25px; font-weight: 700;
  fill: #171310; text-anchor: middle; dominant-baseline: central;
  pointer-events: none;
}
.loc:hover .loc__core { fill: var(--primary-bright); }
.loc:hover .loc__label { fill: var(--text); }
.loc.in-trip .loc__core { fill: var(--primary); }
.loc.in-trip .loc__ring { opacity: 0.9; }
.loc.in-trip .loc__label { fill: var(--primary-bright); }
.loc.is-selected .loc__ring { opacity: 1; stroke: #F5F0E6; }
.loc.is-off .loc__core, .loc.is-off .loc__label { opacity: 0.32; }
.loc.is-off .loc__label { font-style: italic; }
.loc.is-faded .loc__core, .loc.is-faded .loc__label { opacity: 0.15; }
.loc:focus { outline: none; }
.loc:focus-visible .loc__ring { opacity: 1; stroke: #F5F0E6; stroke-width: 3.5; }
.loc:focus-visible .loc__core { fill: var(--primary-bright); }
.loc:focus-visible .loc__label { fill: var(--text); opacity: 1; }

/* ===== Side panel ===== */
.side-panel {
  display: flex; flex-direction: column; gap: 1rem; min-width: 0;
  max-height: var(--board-h); overflow-y: auto; padding-right: 2px;
}

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 1rem; padding: 1.3rem 1.5rem;
}
.card__eyebrow {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-ui); font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 0.5rem;
}
.cat-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.card__title {
  font-family: var(--font-heading); font-size: 1.7rem; font-weight: 400;
  letter-spacing: -0.01em; margin: 0 0 0.15rem; line-height: 1.1;
}
.card__tagline { font-style: italic; color: var(--primary-bright); margin: 0 0 0.8rem; font-size: 0.95rem; }
.card__desc { color: var(--text-2); font-size: 0.95rem; margin: 0 0 1rem; }
.card__desc em { color: var(--primary-bright); }

.months-strip { display: flex; gap: 3px; margin: 0 0 1.1rem; }
.months-strip__cell {
  flex: 1; text-align: center; font-family: var(--font-ui); font-size: 0.58rem;
  font-weight: 600; letter-spacing: 0.03em; color: var(--muted);
  padding: 0.28rem 0 0.24rem; border-radius: 0.3rem;
  background: var(--surface-2); position: relative;
}
.months-strip__cell.r2 { background: rgba(var(--good-deep-rgb), 0.55); color: var(--good-bright); }
.months-strip__cell.r1 { background: rgba(var(--accent-rgb), 0.14); color: var(--accent-soft); }
.months-strip__cell.r0 { background: rgba(var(--warn-deep-rgb), 0.28); color: var(--warn-bright); }
.months-strip__cell.is-picked { outline: 1.5px solid var(--accent); outline-offset: 1px; }

.card__section-label {
  font-family: var(--font-ui); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted);
  margin: 1rem 0 0.4rem;
}
.card__list { margin: 0; padding: 0 0 0 1.1rem; color: var(--text-2); font-size: 0.92rem; }
.card__list li { margin-bottom: 0.22rem; }
.card__stay { color: var(--text-2); font-size: 0.92rem; margin: 0; }

.card__actions { display: flex; gap: 0.6rem; margin-top: 1.1rem; }

.btn {
  font-family: var(--font-ui); font-size: 0.82rem; font-weight: 500;
  padding: 0.55rem 1.15rem; border-radius: 2rem; cursor: pointer;
  border: 1px solid transparent; letter-spacing: 0.02em;
  transition: all 0.15s ease;
}
.btn--primary { background: var(--primary); color: #171310; border-color: var(--primary); }
.btn--primary:hover { background: var(--accent); border-color: var(--accent); }
.btn--outline { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn--outline:hover { border-color: var(--primary); color: var(--primary-bright); }
.btn--ghost { background: transparent; color: var(--muted); border-color: transparent; }
.btn--ghost:hover { color: var(--text); }
.btn--xs { padding: 0.3rem 0.7rem; font-size: 0.72rem; }

/* Highlight filters (intro card) — deliberately a different visual language
   from the locations they reveal: flat uppercase tabs vs. rich place cards */
.filter-chips { display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem; margin-bottom: 0.4rem; }
.filter-chip {
  font-family: var(--font-ui); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); background: none; border: none;
  border-bottom: 2px solid transparent; border-radius: 0;
  padding: 0.35rem 0.1rem; cursor: pointer; user-select: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.filter-chip:hover { color: var(--text); }
.filter-chip.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* place cards revealed by a filter */
.loc-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.85rem; }
.loc-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem;
  text-align: left; background: var(--surface-2);
  border: 1px solid var(--border); border-left: 3px solid var(--cat, var(--border-strong));
  border-radius: 0.6rem; padding: 0.55rem 0.8rem; cursor: grab; user-select: none;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.loc-row:hover { border-color: var(--border-strong); border-left-color: var(--cat); }
.loc-row__name {
  font-family: var(--font-ui); font-size: 0.82rem; font-weight: 600; color: var(--text);
  display: flex; align-items: center; gap: 0.4rem;
}
.loc-row.in-trip .loc-row__name::after {
  content: 'in trip'; font-size: 0.58rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primary-bright);
  border: 1px solid rgba(var(--primary-rgb), 0.45); border-radius: 2rem; padding: 0.05rem 0.4rem;
}
.loc-row__tag {
  font-family: var(--font-body); font-size: 0.78rem; font-style: italic; color: var(--muted);
  line-height: 1.35;
}

/* ===== Bottom dock (minimal ⇄ expanded) ===== */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: rgba(20, 18, 15, 0.93);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid var(--border-strong);
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.5);
  padding: 0.55rem 1.5rem 0.8rem;
}

.dock__toggle {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  width: 46px; height: 26px; border-radius: 13px;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  color: var(--text-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.15s ease, border-color 0.15s ease, box-shadow 0.3s ease;
}
.dock__toggle:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.5); }
.dock__toggle svg { transition: transform 0.25s ease; }
.dock[data-mode="full"] .dock__toggle svg { transform: rotate(180deg); }
.dock__toggle.is-pulse {
  border-color: rgba(var(--accent-rgb), 0.75); color: var(--accent);
  animation: toggle-pulse 1.6s ease-in-out infinite;
}
@keyframes toggle-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.35); }
  50%      { box-shadow: 0 0 14px 4px rgba(var(--accent-rgb), 0.25); }
}
.dock__toggle-badge {
  position: absolute; top: -5px; right: -5px; min-width: 15px; height: 15px;
  border-radius: 8px; background: var(--warn); color: #FFF;
  font-family: var(--font-ui); font-size: 0.6rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.dock__toggle-badge[hidden] { display: none; }

/* minimal row — a fully interactive compact track */
.dock__min {
  max-width: 1220px; margin: 0 auto;
  display: flex; align-items: center; gap: 1.1rem;
}
.dock__summary {
  font-family: var(--font-ui); font-size: 0.74rem; color: var(--text-2);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.dock__summary strong { color: var(--text); font-weight: 600; }

.timeline.timeline--compact { flex: 1; height: 46px; }
.timeline--compact .tl-stay { top: 3px; bottom: 3px; padding: 0 0.5rem; flex-direction: row; align-items: center; gap: 0.35rem; }
.timeline--compact .tl-stay__name { font-size: 0.7rem; }
.timeline--compact .tl-stay__nights { font-size: 0.62rem; }
.timeline--compact .tl-stay--tight .tl-stay__nights { display: none; }
.timeline--compact .tl-unplanned { top: 3px; bottom: 3px; font-size: 0.62rem; }
.timeline--compact .tl-handle { top: 3px; bottom: 3px; }
.timeline--compact .tl-caret { top: 0; bottom: 0; }
.timeline--compact .tl-stay__remove { top: 50%; transform: translateY(-50%); }
.dock.is-drop-target .timeline--compact { outline: 1.5px dashed rgba(var(--accent-rgb), 0.6); outline-offset: 2px; border-radius: 0.5rem; }

.dock[data-mode="full"] .dock__min { display: none; }

/* expanded content — two deliberate rows so nothing wraps unpredictably */
.dock__full { max-width: 1220px; margin: 0 auto; }
.dock__head { margin-bottom: 0.6rem; }
.dock__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 2.3rem;
}
.dock__row-left { display: flex; align-items: center; gap: 0.8rem; min-width: 0; }
.dock__row-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.dock__title { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 400; white-space: nowrap; }

/* the trip spec is ONE editable box: summary + Edit chip, all clickable */
.spec {
  display: inline-flex; align-items: center; gap: 0.65rem;
  font-family: var(--font-ui); font-size: 0.78rem; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 2rem;
  padding: 0.3rem 0.3rem 0.3rem 0.85rem; white-space: nowrap;
  max-width: 56ch; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.spec:hover { border-color: rgba(var(--accent-rgb), 0.6); background: var(--surface-2); }
.spec strong { color: var(--accent); font-weight: 600; }
.spec > #specSummary { overflow: hidden; text-overflow: ellipsis; }
.spec__edit {
  flex: none; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.05em;
  color: #171310; background: var(--primary); border-radius: 2rem;
  padding: 0.22rem 0.7rem; transition: background 0.15s ease;
}
.spec:hover .spec__edit { background: var(--accent); }

.flags-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-ui); font-size: 0.76rem; font-weight: 600;
  color: var(--warn-bright); background: rgba(var(--warn-deep-rgb), 0.16);
  border: 1px solid rgba(var(--warn-rgb), 0.5); border-radius: 2rem;
  padding: 0.4rem 0.9rem; cursor: pointer; white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.flags-pill:hover { background: rgba(var(--warn-deep-rgb), 0.28); border-color: rgba(var(--warn-rgb), 0.8); }
.flags-pill.is-calm {
  color: var(--good-bright); background: rgba(var(--good-deep-rgb), 0.2); border-color: rgba(var(--good-rgb), 0.4);
}
.flags-pill[hidden] { display: none; }

.date-input {
  background: var(--surface); border: 1px solid var(--border); border-radius: 0.5rem;
  color: var(--text-2); font-family: var(--font-ui); font-size: 0.78rem;
  padding: 0.4rem 0.55rem;
}
.date-input:focus { outline: none; border-color: rgba(var(--accent-rgb), 0.5); color: var(--text); }
.trip-length__arrow { color: var(--muted); font-size: 0.8rem; }

.dock__actions { display: flex; gap: 0.5rem; }

.timeline {
  position: relative;
  height: 122px; user-select: none; touch-action: none;
}

.tl-grid { position: absolute; inset: 26px 0 20px; display: flex; }
.tl-grid__cell {
  flex: 1; border-left: 1px dashed rgba(232, 224, 208, 0.10);
  position: relative;
}
.tl-grid__cell:first-child { border-left: none; }
.tl-grid__cell.is-weekend { background: rgba(var(--accent-rgb), 0.045); }
.tl-grid__num {
  position: absolute; bottom: -19px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-ui); font-size: 0.58rem; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tl-grid__wd { color: rgba(140, 132, 111, 0.75); font-size: 0.52rem; letter-spacing: 0.04em; }
.tl-grid__cell.is-weekend .tl-grid__num, .tl-grid__cell.is-weekend .tl-grid__wd { color: var(--primary-bright); }

.tl-stay {
  position: absolute; top: 26px; bottom: 20px;
  border-radius: 0.6rem; overflow: hidden;
  background: linear-gradient(180deg, rgba(var(--stay-rgb), 0.30), rgba(var(--stay-rgb), 0.16));
  border: 1px solid rgba(var(--stay-rgb), 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 0.7rem; cursor: grab;
  transition: box-shadow 0.15s ease, opacity 0.15s ease;
}
.tl-stay:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 18px rgba(0,0,0,0.4); }
.tl-stay:focus { outline: none; }
.tl-stay:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 4px 18px rgba(0,0,0,0.4); }
.tl-stay.is-lifted { opacity: 0.25; }
.tl-stay__name {
  font-family: var(--font-ui); font-size: 0.78rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25;
}
.tl-stay__nights {
  font-family: var(--font-ui); font-size: 0.66rem; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tl-stay__remove {
  position: absolute; top: 3px; right: 4px; width: 16px; height: 16px;
  border: none; border-radius: 50%; background: rgba(15, 14, 12, 0.5);
  color: var(--text-2); font-size: 0.65rem; line-height: 1; cursor: pointer;
  display: none; align-items: center; justify-content: center; padding: 0;
}
.tl-stay:hover .tl-stay__remove { display: flex; }
.tl-stay__remove:hover { color: #fff; background: rgba(var(--warn-rgb), 0.8); }
/* touch has no hover — keep the remove button visible on the full track
   (the compact bar stays clean; drag-off and the expanded view cover it) */
@media (pointer: coarse) {
  .timeline:not(.timeline--compact) .tl-stay__remove { display: flex; width: 20px; height: 20px; }
}
.tl-stay--tight .tl-stay__nights { display: none; }
.tl-stay--tight { padding: 0 0.4rem; }
.tl-stay--tight .tl-stay__name { font-size: 0.68rem; }

.tl-handle {
  position: absolute; top: 26px; bottom: 20px; width: 14px;
  transform: translateX(-50%); cursor: ew-resize; z-index: 6;
  display: flex; align-items: center; justify-content: center;
}
.tl-handle::after {
  content: ''; width: 3px; height: 46%; border-radius: 2px;
  background: rgba(232, 224, 208, 0.35);
  transition: background 0.15s ease, height 0.15s ease;
}
.tl-handle:hover::after, .tl-handle.is-active::after { background: var(--accent); height: 62%; }

.tl-transfer {
  position: absolute; top: 0; transform: translateX(-50%); z-index: 7;
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--font-ui); font-size: 0.64rem; font-weight: 600;
  color: var(--text-2); background: var(--surface-2);
  border: 1px solid var(--border-strong); border-radius: 2rem;
  padding: 0.14rem 0.55rem; cursor: pointer; white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tl-transfer:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.5); }
.tl-transfer.is-long { color: var(--warn-bright); border-color: rgba(var(--warn-rgb), 0.55); }
.tl-transfer__icon { font-size: 0.72rem; line-height: 1; }
/* the chevron says "this is a menu, click me" */
.tl-transfer__chev { font-size: 0.55rem; color: var(--muted); transition: color 0.15s ease, transform 0.15s ease; }
.tl-transfer:hover .tl-transfer__chev { color: var(--accent); transform: translateY(1px); }

.tl-unplanned {
  position: absolute; top: 26px; bottom: 20px;
  border: 1.5px dashed rgba(232, 224, 208, 0.18); border-radius: 0.6rem;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: 0.7rem; color: var(--muted);
  text-align: center; padding: 0 0.5rem; overflow: hidden; white-space: nowrap;
}
.timeline.is-drop-target .tl-unplanned {
  border-color: rgba(var(--accent-rgb), 0.6); color: var(--accent);
  background: rgba(var(--accent-rgb), 0.06);
}
.tl-caret {
  position: absolute; top: 20px; bottom: 14px; width: 3px; border-radius: 2px;
  background: var(--accent); z-index: 8; transform: translateX(-50%);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.8); pointer-events: none;
}

/* advice items (rendered inside the flags overlay) */
.flags-list { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 1rem; }
.advice__item {
  display: flex; gap: 0.6rem; align-items: baseline;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--good);
  border-radius: 0.55rem; padding: 0.55rem 0.85rem;
  font-size: 0.86rem; color: var(--text-2);
}
.advice__item.warn { border-left-color: var(--warn); }
.advice__item.tip { border-left-color: var(--good-deep); }
.advice__icon { flex: none; font-size: 0.82rem; }
.advice__item strong { color: var(--text); font-weight: 500; }

/* stay being dragged clear of the track (about to be removed) */
.tl-stay.is-dropping-off {
  opacity: 0.6;
  border-color: rgba(var(--warn-rgb), 0.85);
  background: linear-gradient(180deg, rgba(var(--warn-deep-rgb), 0.4), rgba(var(--warn-deep-rgb), 0.2));
}

/* ===== Overlays (trip setup + flags) ===== */
.overlay {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 7, 6, 0.68);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 1.5rem;
}
.overlay[hidden] { display: none; }
.modal {
  position: relative; width: min(560px, 94vw); max-height: 88vh; overflow-y: auto;
  background: rgba(26, 24, 20, 0.94);
  border: 1px solid rgba(232, 224, 208, 0.14); border-radius: 1.1rem;
  padding: 2rem 2.2rem 1.9rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.modal__title {
  font-family: var(--font-heading); font-size: 1.9rem; font-weight: 300;
  letter-spacing: -0.02em; margin: 0 0 0.3rem;
}
.modal__label {
  font-family: var(--font-ui); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted);
  margin: 1.3rem 0 0.5rem;
}

/* length vs dates: two blocks, the one you're NOT using fades back */
.spec-block { transition: opacity 0.2s ease; }
.spec-block .modal__label { margin-top: 1rem; }
.spec-block.is-muted { opacity: 0.4; }
.spec-block.is-muted:hover { opacity: 0.75; }
.spec-or {
  display: flex; align-items: center; gap: 0.8rem; margin: 1rem 0 0;
  font-family: var(--font-ui); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.spec-or::before, .spec-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.modal__skip {
  display: block; width: 100%; text-align: right;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-ui); font-size: 0.8rem; font-weight: 500;
  color: var(--primary-bright); padding: 0 0 0.9rem;
  transition: color 0.15s ease;
}
.modal__skip:hover { color: var(--accent); }
.modal__close {
  position: absolute; top: 0.9rem; right: 0.9rem; width: 2rem; height: 2rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 14, 12, 0.5); border: 1px solid rgba(232, 224, 208, 0.14);
  color: var(--text); font-size: 1.1rem; line-height: 1; cursor: pointer; border-radius: 50%;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.modal__close:hover { border-color: rgba(232, 224, 208, 0.32); transform: rotate(90deg); }
.modal__dates { display: flex; align-items: center; gap: 0.6rem; }
.modal__actions { display: flex; justify-content: flex-end; margin-top: 1.7rem; }

.len-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.len-custom { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.5rem; }
.len-custom__label { font-family: var(--font-ui); font-size: 0.72rem; color: var(--muted); margin-left: 0.35rem; }
.stepper__btn {
  width: 1.8rem; height: 1.8rem; border: 1px solid var(--border); border-radius: 0.45rem;
  background: var(--surface-2); color: var(--text-2); font-size: 1.05rem; line-height: 1;
  cursor: pointer; font-family: var(--font-ui);
  transition: background 0.15s ease, color 0.15s ease;
}
.stepper__btn:hover { background: var(--surface); color: var(--text); }
.stepper__value {
  min-width: 2rem; text-align: center;
  font-family: var(--font-ui); font-size: 0.95rem; font-weight: 600; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.len-chip {
  font-family: var(--font-ui); font-size: 0.82rem; font-weight: 500;
  color: var(--text-2); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 0.6rem;
  padding: 0.5rem 0.9rem; cursor: pointer;
  transition: all 0.15s ease;
}
.len-chip:hover { border-color: var(--border-strong); color: var(--text); }
.len-chip.is-active {
  background: rgba(var(--accent-rgb), 0.13); border-color: rgba(var(--accent-rgb), 0.55); color: var(--accent);
}

.style-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.style-card {
  display: flex; flex-direction: column; gap: 0.15rem; text-align: left;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 0.7rem;
  padding: 0.7rem 0.85rem; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.style-card:hover { border-color: var(--border-strong); }
.style-card.is-active { border-color: rgba(var(--good-rgb), 0.6); background: rgba(var(--good-deep-rgb), 0.22); }
.style-card__name { font-family: var(--font-ui); font-size: 0.85rem; font-weight: 600; color: var(--text); }
.style-card.is-active .style-card__name { color: var(--good-bright); }
.style-card__hint { font-family: var(--font-body); font-size: 0.78rem; font-style: italic; color: var(--muted); line-height: 1.35; }

/* tip jar modal — the tiers are shared site-wide (/assets/tipjar.js) */
.modal--tip { width: min(430px, 94vw); text-align: center; }
.tip-modal__note {
  font-family: var(--font-body); font-size: 0.95rem; font-style: italic;
  color: var(--text-2); line-height: 1.5; margin: 0.2rem 0 0;
}
.tip-modal__options {
  display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
  margin-top: 1.5rem;
}
.tip-modal__options stripe-buy-button { display: inline-block; }

/* Drag ghost (follows pointer during any drag) */
.drag-ghost {
  position: fixed; z-index: 200; pointer-events: none; display: none;
  transform: translate(-50%, -120%);
  font-family: var(--font-ui); font-size: 0.8rem; font-weight: 600;
  color: #171310; background: var(--accent);
  padding: 0.4rem 0.9rem; border-radius: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
}

/* Transfer popover */
.transfer-pop {
  position: fixed; z-index: 210; display: none;
  width: min(340px, 92vw);
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: 0.85rem; padding: 0.9rem 1rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.transfer-pop__title {
  font-family: var(--font-ui); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 0.6rem;
}
.transfer-pop__title strong { color: var(--text); letter-spacing: 0.02em; }
.transfer-opt {
  display: grid; grid-template-columns: 1.4rem 1fr auto auto; align-items: center;
  gap: 0.6rem; width: 100%; text-align: left;
  background: transparent; border: 1px solid transparent; border-radius: 0.6rem;
  padding: 0.5rem 0.6rem; cursor: pointer; color: var(--text-2);
  font-family: var(--font-ui); font-size: 0.8rem;
}
.transfer-opt:hover { background: var(--surface); }
.transfer-opt.is-chosen { border-color: rgba(var(--accent-rgb), 0.55); background: rgba(var(--accent-rgb), 0.08); color: var(--text); }
.transfer-opt__time { font-weight: 600; font-variant-numeric: tabular-nums; }
.transfer-opt__price { color: var(--muted); font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.transfer-opt__note {
  grid-column: 2 / -1; font-size: 0.68rem; color: var(--muted); font-style: italic; margin-top: -0.15rem;
}
.transfer-pop__via { font-family: var(--font-ui); font-size: 0.68rem; color: var(--muted); margin: 0.5rem 0 0; font-style: italic; }

/* Toast — sits above the overlays (z 400) so validation feedback fired from
   inside a modal (e.g. the trip-setup date checks) is never swallowed by the
   modal's backdrop. */
.toast {
  position: fixed; left: 50%; top: 64px; transform: translateX(-50%) translateY(-8px);
  z-index: 500; background: var(--surface-2); border: 1px solid rgba(var(--accent-rgb), 0.4);
  color: var(--text); font-family: var(--font-ui); font-size: 0.8rem;
  padding: 0.55rem 1.1rem; border-radius: 2rem;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.is-open { opacity: 1; transform: translateX(-50%) translateY(0); }
.month-chip:disabled { opacity: 0.45; cursor: default; }

/* ===== Footer ===== */
.site-footer {
  display: flex; justify-content: center; align-items: center; gap: 0.5rem;
  padding: 1.6rem 1.5rem 0.4rem; flex-wrap: wrap;
  font-family: var(--font-ui); font-size: 0.68rem; letter-spacing: 0.05em;
  color: var(--text-2); opacity: 0.55;
}
.site-footer__version { font-variant-numeric: tabular-nums; }

/* ===== Narrow screens (desktop-first, but stay usable) ===== */
@media (max-width: 940px) {
  .board { grid-template-columns: 1fr; --board-h: 480px; }
  .side-panel { max-height: none; }
  .dock__summary { display: none; }
}

/* ===== Intro: the front door (full-screen world map + list) =====
   Season colours here are deliberately concrete — no country pack theme is
   loaded yet, so the intro can't lean on pack-set variables. */
:root {
  --rate-2: #3FA9A0;   /* prime */
  --rate-1: #D99A3D;   /* shoulder */
  --rate-0: #A84258;   /* off-season */
}

body:not(.has-country) { overflow: hidden; padding-bottom: 0; }
body:not(.has-country) .topbar,
body:not(.has-country) .site-footer { display: none; }

.intro { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; background: var(--bg); }
.intro[hidden] { display: none; }

.intro__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem 2rem; flex-wrap: wrap;
  padding: 1.1rem 1.6rem 0.95rem;
}
.intro__title { margin: 0.35rem 0 0; }
.intro__sub {
  font-family: var(--font-body); font-style: italic; font-size: 0.86rem;
  color: var(--text-2); margin: 0.55rem 0 0; max-width: 52ch; line-height: 1.45;
}
.intro__controls { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-left: auto; }

.intro__months {
  display: flex; gap: 2px; padding: 3px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 2rem;
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.intro__months::-webkit-scrollbar { display: none; }
.intro-month {
  flex: none; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-ui); font-size: 0.7rem; font-weight: 500;
  color: var(--text-2); padding: 0.34rem 0.58rem; border-radius: 2rem;
  transition: color 0.15s ease, background 0.15s ease;
}
.intro-month:hover { color: var(--text); }
.intro-month.is-active { background: var(--claude); color: #171310; font-weight: 600; }

.view-toggle {
  display: flex; gap: 2px; padding: 3px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 2rem;
}
.view-toggle__btn {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-ui); font-size: 0.72rem; font-weight: 500;
  color: var(--text-2); padding: 0.34rem 0.85rem; border-radius: 2rem;
  transition: color 0.15s ease, background 0.15s ease;
}
.view-toggle__btn:hover { color: var(--text); }
.view-toggle__btn.is-active { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); }

/* ---- the map ---- */
.intro__map {
  position: relative; flex: 1; min-height: 0;
  background:
    radial-gradient(ellipse 55% 48% at 18% 12%, rgba(var(--good-rgb), 0.05) 0%, transparent 70%),
    radial-gradient(ellipse 50% 44% at 82% 82%, rgba(var(--claude-rgb), 0.05) 0%, transparent 70%);
}
.intro__map[hidden] { display: none; }
/* user-select: none so panning the map never drag-selects country labels */
#worldMap { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
#worldMap.is-panning { cursor: grabbing; }

.wm-world {
  fill: #1B1915;
  stroke: rgba(232, 224, 208, 0.09); stroke-width: 0.75; vector-effect: non-scaling-stroke;
}
/* Each available country's low-res (110m) shape, under its detailed one —
   fills the slivers of bare background where the two resolutions disagree
   along shared borders. Same fill as the world layer, no stroke. */
.wm-underlay { fill: #1B1915; }
.wm-outline {
  fill: rgba(var(--claude-rgb), 0.42);
  stroke: rgba(var(--claude-rgb), 0.85); stroke-width: 1; vector-effect: non-scaling-stroke;
  cursor: pointer; transition: fill 0.2s ease;
  outline: none;
}
.wm-country:hover .wm-outline,
.wm-outline:focus-visible { fill: rgba(var(--claude-rgb), 0.62); stroke-width: 1.5; }
.wm-country.is-seasoned .wm-outline { fill: rgba(15, 14, 12, 0.001); }
.wm-country.is-seasoned:hover .wm-outline,
.wm-country.is-seasoned .wm-outline:focus-visible { fill: rgba(232, 224, 208, 0.12); }
.wm-country.is-selected .wm-outline { stroke: var(--claude); stroke-width: 2; }
#worldMap.has-selection .wm-country:not(.is-selected) { opacity: 0.55; }
#worldMap.has-selection .wm-country { transition: opacity 0.25s ease; }

.wm-season { opacity: 0.82; }
.wm-cells { stroke: none; }
.wm-cells.r2 { fill: var(--rate-2); }
.wm-cells.r1 { fill: var(--rate-1); }
.wm-cells.r0 { fill: var(--rate-0); }

.wm-label {
  fill: var(--text); font-family: var(--font-ui); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; text-anchor: middle;
  paint-order: stroke; stroke: rgba(15, 14, 12, 0.8); stroke-linejoin: round;
  pointer-events: none;
}

.intro__legend {
  position: absolute; left: 1.1rem; bottom: 1.1rem; z-index: 4;
  display: flex; gap: 0.9rem; align-items: center;
  background: rgba(26, 24, 20, 0.85); backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: 2rem; padding: 0.45rem 1rem;
  font-family: var(--font-ui); font-size: 0.66rem; letter-spacing: 0.04em; color: var(--text-2);
}
.intro__legend[hidden] { display: none; }
.intro__legend-item { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.intro__legend-item i { width: 0.68rem; height: 0.68rem; border-radius: 50%; }
.intro__legend-item i.r2 { background: var(--rate-2); }
.intro__legend-item i.r1 { background: var(--rate-1); }
.intro__legend-item i.r0 { background: var(--rate-0); }

.intro__zoom {
  position: absolute; right: 1.1rem; bottom: 1.1rem; z-index: 4;
  display: flex; flex-direction: column; gap: 6px;
}

.intro__tip {
  position: absolute; z-index: 6; pointer-events: none; max-width: 260px;
  background: rgba(26, 24, 20, 0.94); border: 1px solid var(--border-strong);
  border-radius: 0.6rem; padding: 0.55rem 0.8rem;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  font-family: var(--font-ui); font-size: 0.72rem; color: var(--text-2); line-height: 1.45;
}
.intro__tip[hidden] { display: none; }
.intro__tip strong { display: block; color: var(--text); font-weight: 600; font-size: 0.8rem; }
.intro__tip em { font-family: var(--font-body); font-style: italic; color: var(--muted); }
.intro__tip span { display: block; margin-top: 0.15rem; }

/* ---- country detail card ---- */
.intro-detail {
  position: absolute; top: 1.1rem; right: 1.1rem; z-index: 5;
  width: min(370px, calc(100% - 2.2rem));
  background: rgba(26, 24, 20, 0.94); backdrop-filter: blur(10px);
  border: 1px solid var(--border-strong); border-radius: 1rem;
  padding: 1.25rem 1.4rem 1.35rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  animation: detail-in 0.28s ease;
}
.intro-detail[hidden] { display: none; }
@keyframes detail-in { from { opacity: 0; transform: translateX(14px); } }
.intro-detail__close {
  position: absolute; top: 0.55rem; right: 0.7rem;
  background: transparent; border: 0; color: var(--muted); font-size: 1.3rem;
  cursor: pointer; line-height: 1; padding: 0.3rem;
}
.intro-detail__close:hover { color: var(--text); }
.intro-detail__eyebrow {
  font-family: var(--font-ui); font-size: 0.78rem; color: var(--muted); margin: 0;
}
.intro-detail__eyebrow em { font-family: var(--font-body); font-style: italic; color: var(--claude); }
.intro-detail__name {
  font-family: var(--font-heading); font-size: 1.85rem; font-weight: 300;
  line-height: 1.1; margin: 0.2rem 0 0.4rem; color: var(--text);
}
.intro-detail__tag {
  font-family: var(--font-body); font-style: italic; font-size: 0.9rem;
  color: var(--text-2); line-height: 1.45; margin: 0 0 0.7rem;
}
.intro-detail .country-card__season { margin: 0 0 0.5rem; }
.intro-detail__meta { font-family: var(--font-ui); font-size: 0.68rem; color: var(--muted); letter-spacing: 0.03em; margin: 0; }
.intro-detail__month { font-family: var(--font-ui); font-size: 0.72rem; margin: 0.45rem 0 0; }
.intro-detail__month[data-rate="2"] { color: var(--rate-2); }
.intro-detail__month[data-rate="1"] { color: var(--rate-1); }
.intro-detail__month[data-rate="0"] { color: #D77F94; }
.intro-detail__saved { font-family: var(--font-ui); font-size: 0.7rem; font-weight: 600; color: var(--claude); margin: 0.5rem 0 0; }
.intro-detail__go {
  width: 100%; margin-top: 1rem; justify-content: center;
  background: var(--claude); border-color: var(--claude);
}
.intro-detail__go:hover { filter: brightness(1.08); }
.wm-label { transition: opacity 0.25s ease; }

/* ---- list view ---- */
.intro__list { flex: 1; min-height: 0; overflow-y: auto; padding: 0.4rem 1.6rem 2.5rem; }
.intro__list[hidden] { display: none; }
.intro__list-inner { max-width: 740px; margin: 0 auto; }
.picker__search {
  width: 100%; margin: 0.4rem 0 1rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 2rem;
  color: var(--text); font-family: var(--font-ui); font-size: 0.88rem;
  padding: 0.62rem 1.1rem;
}
.picker__search:focus { outline: none; border-color: rgba(var(--claude-rgb), 0.55); }
.picker__search::placeholder { color: var(--muted); }

.country-list { display: flex; flex-direction: column; gap: 0.65rem; }
.country-card {
  display: flex; gap: 1.1rem; align-items: center; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: 0.9rem;
  padding: 0.95rem 1.15rem; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.country-card:hover, .country-card:focus-visible {
  border-color: rgba(var(--claude-rgb), 0.55); background: var(--surface-2);
}
.country-card[hidden] { display: none; }
.country-card__shape { width: 62px; height: 62px; flex: none; }
.country-card__shape path {
  fill: rgba(var(--claude-rgb), 0.3);
  stroke: rgba(var(--claude-rgb), 0.8); stroke-width: 1; vector-effect: non-scaling-stroke;
}
.country-card__body { display: flex; flex-direction: column; gap: 0.28rem; min-width: 0; flex: 1; }
.country-card__top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.country-card__name { font-family: var(--font-heading); font-size: 1.28rem; font-weight: 400; color: var(--text); line-height: 1.15; }
.country-card__name em { font-style: italic; font-size: 0.92rem; color: var(--muted); }
.country-card__badge {
  flex: none; font-family: var(--font-ui); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.22rem 0.6rem; border-radius: 2rem;
}
.country-card__badge[hidden] { display: none; }
.country-card__badge[data-rate="2"] { background: rgba(63, 169, 160, 0.16); color: var(--rate-2); box-shadow: inset 0 0 0 1px rgba(63, 169, 160, 0.4); }
.country-card__badge[data-rate="1"] { background: rgba(217, 154, 61, 0.14); color: var(--rate-1); box-shadow: inset 0 0 0 1px rgba(217, 154, 61, 0.4); }
.country-card__badge[data-rate="0"] { background: rgba(168, 66, 88, 0.16); color: #D77F94; box-shadow: inset 0 0 0 1px rgba(168, 66, 88, 0.45); }
.country-card__tag { font-family: var(--font-body); font-size: 0.85rem; font-style: italic; color: var(--text-2); line-height: 1.4; }
.country-card__season { display: flex; gap: 2px; margin-top: 0.2rem; }
.season-cell {
  flex: none; width: 1.4rem; text-align: center;
  font-family: var(--font-ui); font-size: 0.55rem; font-weight: 600;
  color: var(--muted); padding: 0.24rem 0; border-radius: 0.25rem;
  background: var(--surface-2);
}
.season-cell.r2 { background: rgba(63, 169, 160, 0.28); color: #6FD3CA; }
.season-cell.r1 { background: rgba(217, 154, 61, 0.2); color: #E9BC77; }
.season-cell.r0 { background: rgba(168, 66, 88, 0.24); color: #D77F94; }
.season-cell.is-month { box-shadow: inset 0 0 0 1.5px var(--claude); color: var(--text); }
.country-card__meta {
  font-family: var(--font-ui); font-size: 0.68rem; color: var(--muted);
  letter-spacing: 0.03em; margin-top: 0.1rem;
}
.country-card__meta em.country-card__saved { color: var(--claude); font-style: normal; font-weight: 600; }
.country-card__go { flex: none; color: var(--muted); font-size: 1.15rem; transition: color 0.15s ease, transform 0.15s ease; }
.country-card:hover .country-card__go { color: var(--claude); transform: translateX(3px); }
.picker__empty { font-family: var(--font-body); font-style: italic; color: var(--muted); font-size: 0.9rem; margin: 0.3rem 0 0; }

/* ===== Mobile (≤700px): the planner, redesigned =====
   Phones get a different chrome, not a squeezed desktop: a two-line topbar,
   a single scrollable month strip, no map legend (the dot colours + the
   filter chips in the side panel carry the categories), and an expanded dock
   whose controls stack in deliberate rows instead of overlapping. Modals
   become bottom sheets. */
@media (max-width: 700px) {
  .wrap { padding: 0 0.9rem; }

  /* -- topbar: row 1 links + pills, row 2 the brand, row 3 month strip -- */
  .topbar { padding: 0.7rem 0.9rem 0.55rem; gap: 0.55rem; }
  .topbar__left {
    display: grid; width: 100%;
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "back switch tip" "brand brand brand";
    align-items: center; column-gap: 0.5rem; row-gap: 0.4rem;
  }
  .back-link { grid-area: back; }
  .brand { grid-area: brand; font-size: 1.45rem; padding-bottom: 5px; }
  .country-switch { grid-area: switch; }
  .topbar-tip { grid-area: tip; }

  .top-controls { width: 100%; }
  .control { width: 100%; gap: 0; }
  .control__label { display: none; }
  .month-chips {
    width: 100%; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .month-chips::-webkit-scrollbar { display: none; }
  .month-chip { flex: none; font-size: 0.78rem; padding: 0.42rem 0.62rem; }

  /* -- board: a map you can see past, cards that breathe -- */
  .board { --board-h: clamp(320px, 52vh, 480px); gap: 1rem; }
  body.dock-open .board { --board-h: clamp(240px, calc(100vh - 440px), 480px); }
  .map-legend { display: none; }
  .card { padding: 1.1rem 1.1rem; }
  .loc-rows { grid-template-columns: 1fr; }

  /* -- minimal dock: the track IS the row -- */
  .dock { padding: 0.5rem 0.75rem 0.7rem; }
  .dock__toggle { width: 56px; height: 30px; top: -17px; }
  #resetBtnMin { display: none; }   /* Reset lives in the expanded dock */
  .timeline.timeline--compact { height: 52px; }

  /* -- expanded dock: spec pill on its own line, actions on theirs -- */
  body.dock-open { padding-bottom: 300px; }
  .dock__row { flex-wrap: wrap; gap: 0.5rem 0.6rem; min-height: 0; }
  .dock__title { display: none; }
  #clearSpecBtn { display: none; }  /* Reset covers it on a phone */
  .dock__row-left { width: 100%; gap: 0.5rem; }
  .spec { flex: 1; min-width: 0; max-width: none; justify-content: space-between; }
  .dock__row-right { width: 100%; justify-content: flex-end; gap: 0.45rem; }
  .flags-pill { margin-right: auto; padding: 0.4rem 0.7rem; }
  .dock .btn { padding: 0.5rem 0.85rem; font-size: 0.78rem; }

  /* fatter touch targets on the track */
  .tl-handle { width: 26px; }

  /* -- modals become bottom sheets -- */
  .overlay { padding: 0; align-items: flex-end; }
  .modal {
    width: 100%; max-height: 90vh;
    border-radius: 1.1rem 1.1rem 0 0;
    padding: 1.5rem 1.2rem calc(1.3rem + env(safe-area-inset-bottom));
  }
  .modal__title { font-size: 1.55rem; }
  .modal__dates { flex-wrap: wrap; }
  .date-input { flex: 1 1 8.5rem; min-width: 0; }
  .style-cards { grid-template-columns: 1fr; }
  .style-card { flex-direction: row; align-items: baseline; gap: 0.55rem; padding: 0.65rem 0.85rem; }
  .style-card__name { flex: none; }
  .modal--tip { text-align: center; }
}

/* ---- intro on small screens ---- */
@media (max-width: 760px) {
  .intro__head { padding: 0.9rem 1rem 0.7rem; gap: 0.7rem 1rem; }
  .intro__sub { display: none; }
  .intro__controls { margin-left: 0; width: 100%; }
  .intro__months { flex: 1; min-width: 0; }
  .intro-detail {
    top: auto; bottom: 0.8rem; left: 0.8rem; right: 0.8rem; width: auto;
    animation-name: detail-up;
  }
  @keyframes detail-up { from { opacity: 0; transform: translateY(16px); } }
  .intro__legend { bottom: auto; top: 0.8rem; left: 0.8rem; padding: 0.35rem 0.8rem; }
  .intro__list { padding: 0.3rem 1rem 2rem; }
  .country-card { gap: 0.8rem; padding: 0.85rem 0.95rem; }
  .country-card__shape { width: 48px; height: 48px; }
  .country-card__season { flex-wrap: wrap; }
}