/* ============================================================
   Baja Cape Loop — field-guide styles
   Palette: desert sand, Sierra pine, clay, Sea-of-Cortez blue.
   High contrast for sunlight; large tap targets for phones.
   ============================================================ */
:root {
  color-scheme: light dark;

  /* Brand accents — oklch so tints stay perceptually even and dark mode is a
     lightness tweak, not a re-pick. */
  --pine: oklch(32.1% 0.042 168.4);
  --pine-2: oklch(40.3% 0.055 168.6);
  --clay: oklch(58.3% 0.149 39.9);
  --clay-dark: oklch(51.4% 0.142 38.9);
  --cortez: oklch(50.5% 0.088 227.7);
  --amber: oklch(64.9% 0.139 63.2);
  --grape: oklch(53.1% 0.174 297.6);

  /* Surface + ink ladders (light = warm desert paper) */
  --bg: oklch(95.3% 0.025 89.2);        /* page */
  --paper: oklch(97.6% 0.015 90.2);     /* raised card */
  --sand-2: oklch(92.3% 0.035 88.8);    /* recessed: tracks, pills, insets */
  --ink: oklch(26.3% 0.018 141.6);      /* primary text */
  --ink-soft: oklch(43.1% 0.022 135.1); /* secondary text */
  --line: oklch(84.9% 0.047 90.9);      /* hairline border */
  --sand: var(--bg);                    /* legacy alias for page bg */

  /* Role tokens that must diverge between light and dark */
  --heading: var(--pine);               /* heading / emphasis text on cards */
  --on-brand: oklch(95.3% 0.025 89.2);  /* light text on the green bar + badges */
  --brand-chip: oklch(95.3% 0.025 89.2);/* active-tab chip on the green bar */

  /* Tints + on-tint text derived from the accents. Fills mix toward
     transparent (sit on whatever surface); text mixes toward --ink; borders
     toward --line — so all three flip with the theme automatically. */
  --tint-clay: color-mix(in oklch, var(--clay) 16%, transparent);
  --tint-cortez: color-mix(in oklch, var(--cortez) 15%, transparent);
  --tint-amber: color-mix(in oklch, var(--amber) 18%, transparent);
  --tint-grape: color-mix(in oklch, var(--grape) 15%, transparent);
  --tint-brand: color-mix(in oklch, var(--heading) 22%, transparent);
  --bd-clay: color-mix(in oklch, var(--clay) 42%, var(--line));
  --bd-cortez: color-mix(in oklch, var(--cortez) 40%, var(--line));
  --bd-amber: color-mix(in oklch, var(--amber) 48%, var(--line));
  --bd-grape: color-mix(in oklch, var(--grape) 42%, var(--line));
  --on-clay: color-mix(in oklch, var(--clay) 64%, var(--ink));
  --on-cortez: color-mix(in oklch, var(--cortez) 60%, var(--ink));
  --on-amber: color-mix(in oklch, var(--amber) 62%, var(--ink));

  --shadow: 0 1px 2px rgba(32, 39, 31, .12), 0 6px 18px rgba(32, 39, 31, .08);
  --radius: 12px;
  --maxw: 1100px;
  --font: "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
}

/* Dark mode — override the ladders + lift the accents for dark surfaces.
   Everything else (tints, on-tint text, borders) recomputes from these. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: oklch(20% 0.012 80);
    --paper: oklch(24.5% 0.014 78);
    --sand-2: oklch(30% 0.016 76);
    --ink: oklch(92% 0.012 90);
    --ink-soft: oklch(74% 0.013 90);
    --line: oklch(41% 0.013 76);
    --heading: oklch(83% 0.065 160);      /* light sage */
    --on-brand: oklch(96% 0.02 90);
    --pine: oklch(42% 0.055 166);         /* badges/bar: readable green on dark */
    --clay: oklch(67% 0.15 42);
    --clay-dark: oklch(73% 0.13 44);
    --cortez: oklch(72% 0.10 226);
    --amber: oklch(76% 0.13 66);
    --grape: oklch(72% 0.15 300);
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 22px rgba(0, 0, 0, .42);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--sand);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.15; margin: 0 0 .35em; text-wrap: balance; }
p { margin: 0 0 .8em; }
code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: var(--sand-2);
  padding: .1em .35em;
  border-radius: 5px;
  font-size: .9em;
}
.muted { color: var(--ink-soft); }
.loading { color: var(--ink-soft); padding: 2rem 0; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--pine); color: #fff; padding: .6rem 1rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---- Top bar + tabs ---------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: var(--pine);
  color: var(--on-brand);
  box-shadow: var(--shadow);
  padding-top: env(safe-area-inset-top);
}
.topbar-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem 1rem; padding: .6rem 1rem;
}
.brand { display: flex; align-items: center; gap: .7rem; }
.brand-mark {
  font-size: 1.5rem; color: var(--clay);
  letter-spacing: -2px;
}
.brand-text h1 { font-size: 1.2rem; margin: 0; letter-spacing: .2px; }
.brand-sub { margin: 0; font-size: .78rem; color: #cdd8c8; letter-spacing: .3px; text-transform: uppercase; }

.tabs { display: flex; gap: .25rem; flex-wrap: wrap; }
.tab {
  appearance: none; border: 0; cursor: pointer;
  background: transparent; color: #d7e0d2;
  font: inherit; font-weight: 600; font-size: .95rem;
  padding: .65rem .95rem; border-radius: 9px;
  min-height: 44px;
}
.tab:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.tab.is-active { background: var(--brand-chip); color: var(--pine); }
.tab:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }

/* ---- Panels ------------------------------------------------ */
.panel { display: none; }
.panel.is-active { display: block; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1rem, 4vw, 1.5rem) 3rem; }

/* ---- Map --------------------------------------------------- */
.map-shell { position: relative; height: calc(100dvh - 64px); min-height: 420px; }
#map { position: absolute; inset: 0; background: var(--sand-2); }
.map-controls {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow); padding: .7rem .8rem; max-width: 230px;
}
.map-controls-title { margin: 0 0 .4rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .8px; color: var(--ink-soft); }
.switch { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; font-size: .9rem; cursor: pointer; min-height: 32px; }
.switch input { width: 18px; height: 18px; accent-color: var(--clay); }
.legend { margin-top: .5rem; border-top: 1px solid var(--line); padding-top: .5rem; }
.legend summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--heading); }
.legend ul { list-style: none; margin: .5rem 0 0; padding: 0; font-size: .8rem; }
.legend li { padding: .12rem 0; }
.legend b { display: inline-block; min-width: 1.4em; color: var(--clay-dark); }

/* POI category filter chips */
.poi-filter { display: flex; flex-wrap: wrap; gap: 4px; margin: .1rem 0 .5rem; }
.poi-chip {
  appearance: none; display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: .72rem; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft);
  padding: .2rem .45rem; border-radius: 999px; min-height: 26px;
}
.poi-chip .poi-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--chip); flex: none; }
.poi-chip.is-on { color: var(--ink); border-color: var(--chip); }
.poi-chip:not(.is-on) { opacity: .5; text-decoration: line-through; }
.poi-chip:not(.is-on) .poi-dot { background: var(--line); }
.poi-chip:focus-visible { outline: 2px solid var(--clay); outline-offset: 1px; }
.poi-cat {
  display: inline-block; color: #fff; font-size: .62rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .4px; padding: .1rem .4rem;
  border-radius: 4px; margin: 0 0 .35rem;
}

.map-fallback {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background:
    repeating-linear-gradient(45deg, var(--sand-2) 0 14px, var(--sand) 14px 28px);
}
.map-fallback-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.5rem 1.6rem; max-width: 460px;
}
.map-fallback-card h2 { color: var(--heading); }
.linklike { background: none; border: 0; color: var(--clay-dark); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; padding: 0; }

/* Mapbox popups */
.mapboxgl-popup-content { border-radius: 10px; padding: .85rem .95rem; box-shadow: var(--shadow); font-family: var(--font); background: var(--paper); color: var(--ink); }
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip, .mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip, .mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip { border-bottom-color: var(--paper); }
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip, .mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip, .mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip { border-top-color: var(--paper); }
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip { border-right-color: var(--paper); }
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip { border-left-color: var(--paper); }
.mapboxgl-popup-close-button { color: var(--ink-soft); }
.poi-pop h3 { margin: 0 0 .2rem; color: var(--heading); font-size: 1.02rem; }
.poi-pop .svc { font-size: .78rem; color: var(--ink-soft); margin: 0 0 .4rem; }
.poi-pop .svc b { color: var(--clay-dark); }
.poi-pop .dry {
  background: var(--tint-amber); border-left: 4px solid var(--amber);
  padding: .45rem .6rem; border-radius: 6px; font-size: .82rem; margin: .4rem 0 0;
}
.poi-pop .notes { font-size: .85rem; margin: .4rem 0 0; }

/* ---- Section intro / callouts ------------------------------ */
.section-head { margin-bottom: 1.1rem; }
.section-head h2 { font-size: clamp(1.4rem, 1.1rem + 1.8vw, 1.75rem); color: var(--heading); }
.section-head .lede { font-size: 1.02rem; color: var(--ink-soft); max-width: 70ch; text-wrap: pretty; }

/* Provenance / freshness chips */
.prov { display: flex; flex-wrap: wrap; gap: .4rem; margin: -.4rem 0 1.2rem; }
.prov-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .2px;
  color: var(--ink-soft); background: var(--sand-2);
  border: 1px solid var(--line); border-radius: 999px; padding: .18rem .55rem;
}
.prov-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cortez); flex: none; }
.prov-chip.fresh .prov-dot { background: var(--heading); }
.prov-chip.pending .prov-dot { background: var(--amber); }
.prov-chip.pending { color: var(--on-amber); border-color: var(--bd-amber); }

.callout {
  border-radius: var(--radius); padding: .85rem 1rem; margin: 0 0 1rem;
  display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem;
  border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow);
}
.callout .ic { font-size: 1.2rem; line-height: 1; flex: none; }
.callout.tubeless { background: var(--tint-grape); border-color: var(--bd-grape); }
.callout.water { background: var(--tint-cortez); border-color: var(--bd-cortez); }
.callout strong { color: var(--heading); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
  gap: .6rem;
  margin: 0 0 1.2rem;
}
.stat {
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: .55rem .85rem; box-shadow: var(--shadow); min-width: 92px;
}
.stat .n { font-size: 1.25rem; font-weight: 800; color: var(--heading); display: block; }
.stat .l { font-size: .72rem; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-soft); }

/* ---- Itinerary --------------------------------------------- */
.day {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); margin: 0; overflow: hidden;
  border-left: 6px solid var(--pine-2);
}
.day.is-rest { border-left-color: var(--cortez); }
.day.is-hard { border-left-color: var(--clay); }
.day-head {
  display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  padding: .9rem 1.1rem .4rem;
}
.day-num {
  flex: none; background: var(--pine); color: var(--on-brand);
  font-weight: 800; font-size: .8rem; letter-spacing: .5px;
  padding: .25rem .55rem; border-radius: 999px; text-transform: uppercase;
}
.day.is-rest .day-num { background: var(--cortez); }
.day.is-hard .day-num { background: var(--clay); }
.day-title { font-size: 1.15rem; color: var(--heading); margin: 0; flex: 1 1 240px; }
.day-tags { display: flex; gap: .4rem; flex-wrap: wrap; }
.tag {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  padding: .2rem .5rem; border-radius: 999px; border: 1px solid var(--line);
}
.tag.hard { background: var(--tint-clay); color: var(--on-clay); border-color: var(--bd-clay); }
.tag.rest { background: var(--tint-cortez); color: var(--on-cortez); border-color: var(--bd-cortez); }
.day-meta {
  display: flex; flex-wrap: wrap; gap: 1.1rem; padding: 0 1.1rem .5rem;
  font-size: .85rem; color: var(--ink-soft);
}
.day-meta b { color: var(--ink); font-weight: 700; }
.day-body { padding: 0 1.1rem 1rem; }
.day-route { font-size: .9rem; color: var(--ink-soft); margin: 0 0 .6rem; }
.day-route b { color: var(--heading); }
.day-body ul { margin: .2rem 0 .7rem; padding-left: 1.1rem; }
.day-body li { margin: .15rem 0; }
.day-camp { font-size: .9rem; }
.day-water {
  background: var(--tint-cortez); border-left: 4px solid var(--cortez);
  padding: .5rem .7rem; border-radius: 6px; font-size: .88rem; margin: .6rem 0 0;
}
.day-water.dry { background: var(--tint-amber); border-left-color: var(--amber); }
.day-shortcut {
  background: var(--sand-2); border: 1px dashed var(--line);
  padding: .5rem .7rem; border-radius: 6px; font-size: .85rem; margin: .6rem 0 0;
}
.day-shortcut b { color: var(--clay-dark); }

/* ---- Itinerary visualizations ------------------------------ */
.trip-viz {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(.9rem, 1.6vw, 1.35rem);
  margin: 0 0 1.3rem;
  align-items: start;
}
.trip-viz .viz-card:first-child { grid-column: 1 / -1; } /* day bars span full width */
.viz-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1rem 1.1rem 1.1rem; min-width: 0;
}
.viz-title { color: var(--heading); font-size: 1.05rem; margin: 0 0 .15rem; }
.viz-sub { font-size: .82rem; color: var(--ink-soft); margin: 0 0 .85rem; text-wrap: pretty; }
.viz-legend { display: inline-flex; gap: 1rem; }
.viz-legend .lg { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; color: var(--ink-soft); }
.sw { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.sw.dist { background: var(--cortez); }
.sw.climb { background: var(--clay); }

/* Day-by-day bars */
.db-row {
  display: grid; grid-template-columns: clamp(94px, 26vw, 150px) 1fr auto;
  align-items: center; gap: .7rem; padding: .5rem 0; border-top: 1px solid var(--line);
}
.db-row:first-child { border-top: 0; }
.db-lbl { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.db-n {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--pine); color: var(--on-brand); font-size: .72rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.db-n.rest { background: var(--cortez); }
.db-t { font-size: .8rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-bars { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.db-bt { display: flex; align-items: center; gap: .5rem; }
.db-bar { height: 9px; border-radius: 0 5px 5px 0; min-width: 2px; display: block; }
.db-bar.dist { background: var(--cortez); }
.db-bar.climb { background: var(--clay); }
.db-v { font-size: .72rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.db-flags { display: flex; gap: .3rem; justify-content: flex-end; flex-wrap: wrap; max-width: 128px; }
.db-chip {
  font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  padding: .15rem .4rem; border-radius: 999px; border: 1px solid var(--line);
}
.db-chip.hard { background: var(--tint-clay); color: var(--on-clay); border-color: var(--bd-clay); }
.db-chip.dry { background: var(--tint-cortez); color: var(--on-cortez); border-color: var(--bd-cortez); }
.db-chip.opt { background: var(--sand-2); color: var(--ink-soft); }
.db-rest { grid-column: 2 / 4; font-size: .8rem; color: var(--ink-soft); background: var(--sand-2); border-radius: 8px; padding: .35rem .6rem; }

/* Cumulative-climb curve (SVG) */
.climb-curve { width: 100%; height: auto; display: block; }
.cc-grid { stroke: var(--line); stroke-width: 1; }
.cc-ax { fill: var(--ink-soft); font-size: 10px; font-family: var(--font); }
.cc-area { fill: var(--tint-clay); }
.cc-line { fill: none; stroke: var(--clay); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.cc-dot { fill: var(--clay); stroke: var(--paper); stroke-width: 1.5; }
.cc-dot.hard { fill: var(--clay-dark); }
.cc-dot.rest { fill: var(--sand-2); stroke: var(--clay); }

/* Dry-carry planner */
.dry-carries { display: flex; flex-direction: column; gap: .65rem; }
.dc-row { display: flex; flex-direction: column; gap: .28rem; }
.dc-lbl { display: flex; align-items: baseline; gap: .5rem; }
.dc-day {
  font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
  color: var(--heading); background: var(--sand-2); padding: .1rem .4rem; border-radius: 999px; flex: none;
}
.dc-route { font-size: .85rem; color: var(--ink); font-weight: 600; }
.dc-track { display: flex; align-items: center; gap: .5rem; }
.dc-bar { height: 14px; border-radius: 0 6px 6px 0; background: var(--cortez); min-width: 3px; display: block; opacity: .55; }
.dc-bar.longest { opacity: 1; background: var(--amber); }
.dc-v { font-size: .74rem; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- Gear -------------------------------------------------- */
.view-toggle { display: inline-flex; background: var(--sand-2); border-radius: 999px; padding: 4px; margin: 0 0 1.2rem; gap: 2px; }
.view-toggle button {
  appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit; font-weight: 600;
  padding: .5rem 1rem; border-radius: 999px; min-height: 40px; color: var(--ink-soft);
}
.view-toggle button.is-active { background: var(--paper); color: var(--heading); box-shadow: var(--shadow); }

.matrix-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); }
table.matrix { border-collapse: collapse; width: 100%; min-width: 560px; background: var(--paper); }
table.matrix th, table.matrix td { padding: .6rem .7rem; text-align: left; border-bottom: 1px solid var(--line); font-size: .9rem; }
table.matrix thead th { background: var(--pine); color: var(--on-brand); position: sticky; top: 0; }
table.matrix .col-r { text-align: center; width: 78px; }
table.matrix tr.tier-row th {
  background: var(--sand-2); color: var(--heading); font-size: .78rem; text-transform: uppercase; letter-spacing: .6px;
}
table.matrix .item-name { font-weight: 600; }
table.matrix .item-detail { display: block; font-weight: 400; color: var(--ink-soft); font-size: .8rem; margin-top: .15rem; }
.chk { color: var(--heading); font-weight: 800; }
.dash { color: var(--line); }
.pri-badge { display: inline-block; background: var(--clay); color: #fff; font-size: .62rem; font-weight: 800; padding: .12rem .4rem; border-radius: 4px; text-transform: uppercase; letter-spacing: .4px; margin-left: .4rem; vertical-align: middle; }

.tier-block { margin: 0; }
.tier-block h3 { color: var(--heading); font-size: 1.15rem; margin-bottom: .15rem; }
.tier-block .tier-sub { font-size: .88rem; color: var(--ink-soft); margin-bottom: .7rem; max-width: 75ch; }
.check-list { list-style: none; margin: 0; padding: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.check-list li { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .9rem; border-bottom: 1px solid var(--line); }
.check-list li:last-child { border-bottom: 0; }
.check-box { flex: none; width: 20px; height: 20px; border: 2px solid var(--pine-2); border-radius: 5px; margin-top: 2px; }
.check-list .ci-name { font-weight: 600; }
.check-list .ci-carry { font-size: .76rem; color: var(--ink-soft); }
.check-list .ci-detail { font-size: .82rem; color: var(--ink-soft); display: block; margin-top: .1rem; }

/* ---- Readiness --------------------------------------------- */
.readiness-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 0 0 1.2rem; }
.btn {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 700;
  background: var(--clay); color: #fff; padding: .65rem 1.1rem; border-radius: 9px; min-height: 44px;
  box-shadow: var(--shadow);
}
.btn:hover { background: var(--clay-dark); }
.btn.ghost { background: var(--paper); color: var(--heading); border: 1px solid var(--line); }
.btn:focus-visible { outline: 3px solid var(--pine); outline-offset: 2px; }
.copied-note { font-size: .85rem; color: var(--heading); font-weight: 600; }
.progress-wrap { margin: 0 0 1.2rem; }
.progress-bar { height: 12px; background: var(--sand-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--line); }
.progress-bar > span { display: block; height: 100%; background: var(--heading); width: 0; transition: width .25s ease; }
.progress-label { font-size: .82rem; color: var(--ink-soft); margin-top: .35rem; }

.phase { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin: 0; overflow: hidden; }
.phase-head { padding: .9rem 1.1rem .3rem; }
.phase-head h3 { color: var(--heading); margin: 0; font-size: 1.12rem; }
.phase-head .phase-sub { font-size: .86rem; color: var(--ink-soft); margin: .15rem 0 0; }
.phase ul { list-style: none; margin: .6rem 0 0; padding: 0; }
.phase li { border-top: 1px solid var(--line); }
.phase label { display: flex; gap: .7rem; align-items: flex-start; padding: .75rem 1.1rem; cursor: pointer; min-height: 44px; }
.phase label:hover { background: var(--sand); }
.phase input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--clay); flex: none; }
.phase .done { text-decoration: line-through; color: var(--ink-soft); }

/* Readiness timeline — month-scaled phase strip with a live "Today" marker */
.readiness-tl { padding-top: 20px; margin: 0 0 1.3rem; }
.rt-track { position: relative; }
.rt-bands { display: flex; gap: 4px; }
.rt-band {
  position: relative; overflow: hidden; min-width: 44px;
  background: var(--sand-2); border: 1px solid var(--line); border-radius: 8px; height: 58px;
}
.rt-fill { position: absolute; inset: 0 auto 0 0; background: var(--tint-brand); }
.rt-in { position: relative; height: 100%; padding: .4rem .5rem; display: flex; flex-direction: column; justify-content: space-between; }
.rt-top { display: flex; align-items: baseline; justify-content: space-between; gap: .3rem; }
.rt-name { font-size: .8rem; font-weight: 700; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-count { font-size: .72rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; flex: none; }
.rt-mo { font-size: .64rem; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-soft); }
.rt-now { position: absolute; top: -6px; bottom: -6px; width: 0; border-left: 2px dashed var(--clay); z-index: 2; pointer-events: none; }
.rt-now-lbl {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  color: #fff; background: var(--clay); padding: .05rem .3rem; border-radius: 4px; white-space: nowrap;
}

/* ---- Footer ------------------------------------------------ */
.footer { background: var(--pine-2); color: #cdd8c8; font-size: .8rem; }
.footer p { max-width: var(--maxw); margin: 0 auto; padding: 1rem; }

/* ============================================================
   FLUID GRID SYSTEM — intrinsic "RAM" grids + subgrid
   Columns reflow with NO media queries via
   minmax(min(100%, <ideal>), 1fr): the min() guard lets a track
   shrink below its ideal on narrow viewports instead of overflowing.
   Subgrid then lets each card borrow its parent's row tracks so
   neighbouring cards align internally.
   ============================================================ */

/* Itinerary — responsive grid of day cards */
.days {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  gap: clamp(.9rem, 1.6vw, 1.35rem);
}
.days > .day { margin: 0; min-width: 0; }

/* Gear checklist — grid of tier blocks (natural, uneven heights) */
.gear-list-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: clamp(.9rem, 1.6vw, 1.35rem);
  align-items: start;
}
.gear-list-view > .tier-block { margin: 0; min-width: 0; }

/* Readiness — grid of phase cards (natural, uneven heights) */
.phase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: clamp(.9rem, 1.6vw, 1.35rem);
  align-items: start;
}
.phase-grid > .phase { margin: 0; min-width: 0; }

/* ---- Subgrid: cross-card row alignment (progressive enhancement) ----
   Where it degrades, cards simply stay self-contained — no visual break. */
@supports (grid-template-rows: subgrid) {
  /* Day cards share head / meta / body tracks across each row, so titles,
     stat lines, and bodies line up even when titles wrap to 2 lines. */
  .days > .day {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    row-gap: 0;              /* don't inherit the outer grid's gap *inside* a card */
  }
  .day-head { grid-row: 1; }
  .day-meta { grid-row: 2; } /* rest days omit meta — the track stays reserved */
  .day-body { grid-row: 3; }

  /* Stat chips: the big-number row and the label row align across the row. */
  .stat-row > .stat {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    row-gap: 0;
  }
}

/* ---- Responsive -------------------------------------------- */
@media (max-width: 640px) {
  .brand-text h1 { font-size: 1.05rem; }
  .brand-sub { font-size: .68rem; }
  .tab { padding: .6rem .7rem; font-size: .88rem; }
  .map-shell { height: calc(100dvh - 104px); }
}

/* ============================================================
   PRINT — clean gear checklist + 1-page itinerary brief
   ============================================================ */
@media print {
  :root {
    --bg: #fff; --paper: #fff; --sand-2: #f2ede0;
    --ink: #000; --ink-soft: #333; --line: #bbb;
    --heading: #1b3a2f; --pine: #1b3a2f; --on-brand: #fff;
    --clay: #a8431f; --clay-dark: #8f3a1a; --cortez: #1c6e8c; --amber: #b06a12;
  }
  body { background: #fff; color: #000; font-size: 11pt; }
  .topbar, .footer, .map-shell, .map-controls, .view-toggle,
  .readiness-actions, .progress-wrap, .skip-link, .day-shortcut { display: none !important; }
  /* Print every panel that opts in, regardless of active tab */
  .panel { display: none !important; }
  .panel.print-show { display: block !important; }
  .wrap { max-width: none; padding: 0; }
  .callout, .day, .phase, .check-list, .matrix-scroll, .tier-block, .stat {
    box-shadow: none !important; break-inside: avoid;
  }
  /* Collapse the fluid grids to a single column so pages paginate cleanly. */
  .days, .phase-grid, .gear-list-view, .trip-viz { display: block !important; }
  .readiness-tl { break-inside: avoid; }
  .day, .phase { display: block !important; }
  .day, .phase, .tier-block { border: 1px solid #999; margin: 0 0 .55rem !important; }
  .viz-card { box-shadow: none !important; break-inside: avoid; border: 1px solid #999; margin: 0 0 .55rem !important; }
  /* Force the printable checklist visible + hide the matrix, regardless of
     which gear view is on screen (overrides inline display styles). */
  .gear-matrix-view { display: none !important; }
  .gear-list-view { display: block !important; }
  .check-box { border-color: #000; }
  .section-head h2, .day-title, .tier-block h3, .phase-head h3 { color: #000; }
  a[href]::after { content: ""; }
  @page { margin: 14mm; }
}