/* ============================================================================
   app.css — Nassau 2026 family voting page.
   Imports the shared /design-tokens.css (ExoHelix system). All color/type/space
   comes from those custom properties — no hardcoded hex. Mobile-first.
   XSS note: styling only; all user content is injected via textContent in app.js.
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
.wrap { max-width: var(--container-max); margin: 0 auto; padding-left: var(--container-x); padding-right: var(--container-x); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: var(--lh-heading); letter-spacing: var(--tracking-display); margin: 0; color: var(--text-primary); }
h2 { font-size: var(--fs-h2-mobile); }
h3 { font-size: var(--fs-h4); letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--helix-teal); }
em { font-style: italic; }

.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--helix-teal);
  margin: 0 0 var(--sp-sm);
}
.field-label { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }

/* ---- Gate (locked / 401) ---- */
.gate {
  max-width: 34rem; margin: 18vh auto; padding: var(--sp-2xl) var(--sp-xl);
  background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-hairline);
  text-align: center; font-size: var(--fs-body-large); color: var(--text-secondary);
}

/* ============================================================================
   Layout — left control bar + main content (desktop); stacks on mobile.
   ============================================================================ */
.layout { display: grid; grid-template-columns: 258px minmax(0, 1fr); max-width: 1480px; margin: 0 auto; }
.content { min-width: 0; padding: var(--sp-2xl) var(--sp-2xl) var(--sp-3xl); }

/* ---- Left control bar (sidebar) ---- */
.sidebar {
  position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--sp-lg);
  padding: var(--sp-xl) var(--sp-lg);
  background: var(--surface-base); box-shadow: inset -1px 0 0 var(--hairline);
}
.side-brand .side-title { font-family: var(--font-display); font-weight: 600; font-size: 1.95rem; line-height: 1; letter-spacing: -0.02em; color: var(--text-primary); margin: 2px 0 0; }
.side-brand .side-dates { font-size: var(--fs-caption); color: var(--text-tertiary); margin-top: 6px; line-height: 1.4; }

.side-countdown { font-family: var(--font-display); color: var(--text-primary); line-height: 1.1; }
.side-countdown .num { font-size: 1.55rem; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.side-countdown .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); margin-left: var(--sp-xs); }

/* ---- Persistent "voting as …" badge ---- */
.side-voter { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-sm) var(--sp-md); border-radius: var(--radius-md); }
.side-voter:empty { display: none; }
/* prompt state (no name yet): teal-tinted nudge */
.side-voter { background: rgba(9,138,143,0.12); box-shadow: inset 0 0 0 1.5px var(--helix-teal); }
.side-voter .sv-hint { font-size: var(--fs-body-small); font-weight: 600; color: var(--teal-dark); }
/* named state: solid teal fill so identity is unmistakable at a glance */
.side-voter.active { background: var(--helix-teal); box-shadow: var(--shadow-raised); }
.side-voter.active .sv-name { font-weight: 700; font-size: var(--fs-body); color: var(--off-white); }
.side-voter.active .sv-count { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.82); }

/* ---- Sidebar nav ---- */
.side-nav { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nav-group { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-quaternary); margin: var(--sp-md) 0 4px; }
.nav-group:first-child { margin-top: 0; }
.nav-link { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-sm); padding: 8px 10px; border-radius: var(--radius-md); text-decoration: none; color: var(--text-secondary); font-size: var(--fs-body-small); font-weight: 500; line-height: 1.25; }
.nav-link:hover { background: var(--surface-tinted); color: var(--text-primary); }
.nav-link.active { background: var(--surface-tinted); color: var(--teal-dark); box-shadow: inset 2px 0 0 var(--helix-teal); }
.nav-label { min-width: 0; }
.nav-count { flex-shrink: 0; font-family: var(--font-mono); font-size: 10px; color: var(--text-quaternary); background: var(--surface-tinted); border-radius: var(--radius-full); padding: 1px 8px; }
.nav-link:hover .nav-count, .nav-link.active .nav-count { color: var(--teal-dark); }

/* ---- Sidebar controls (filter / refresh) ---- */
.side-controls { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-sm); padding-top: var(--sp-lg); box-shadow: inset 0 1px 0 var(--hairline); }
.side-controls .btn-ghost { align-self: flex-start; }
.kidfilter { display: inline-flex; align-items: center; gap: var(--sp-xs); font-size: var(--fs-body-small); color: var(--text-secondary); cursor: pointer; user-select: none; }
.kidfilter input { width: 1rem; height: 1rem; accent-color: var(--helix-teal); flex-shrink: 0; }
.status-line { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-tertiary); }

/* ============================================================================
   Welcome band — pronounced name entry + how-to for the family.
   ============================================================================ */
.welcome { margin-bottom: var(--sp-xl); }
.welcome-title { font-size: var(--fs-h1-mobile, 2rem); line-height: 1.04; margin-top: 2px; }
.welcome-lede { color: var(--text-secondary); font-size: var(--fs-body-large); max-width: 44rem; margin-top: var(--sp-sm); }
.welcome-cols { display: grid; grid-template-columns: 1fr; gap: var(--sp-lg); margin-top: var(--sp-lg); }
@media (min-width: 860px) { .welcome-cols { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); align-items: start; } }

/* Pronounced name card — teal ring so it reads as "do this first". */
.whoami { background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: 0 0 0 1.5px rgba(9,138,143,.35); padding: var(--sp-lg); }
.whoami-label { display: block; font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.1em; text-transform: uppercase; color: var(--helix-teal); margin-bottom: 8px; }
.whoami input, .whoami select { width: 100%; font-size: var(--fs-body-large); padding: 12px 14px; }
.whoami-hint { font-size: var(--fs-caption); color: var(--text-tertiary); margin-top: 10px; line-height: 1.5; }

/* How-to steps */
.howto { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-sm); }
.howto li { display: flex; gap: var(--sp-sm); align-items: flex-start; font-size: var(--fs-body-small); color: var(--text-secondary); line-height: 1.45; }
.howto-n { flex-shrink: 0; width: 22px; height: 22px; border-radius: var(--radius-full); background: var(--helix-teal); color: var(--off-white); font-family: var(--font-display); font-size: 13px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.howto strong { color: var(--text-primary); font-weight: 600; }

/* ---- Inputs / buttons ---- */
input[type=text], select, textarea {
  font-family: var(--font-body); font-size: var(--fs-body); color: var(--text-primary);
  background: var(--surface-raised); border: 0; box-shadow: var(--shadow-hairline);
  border-radius: var(--radius-md); padding: 10px 12px;
}
input[type=text]:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 2px var(--helix-teal); }
textarea { width: 100%; resize: vertical; min-height: 5rem; line-height: 1.5; }
button { font-family: var(--font-body); cursor: pointer; }
.btn { background: var(--helix-teal); color: var(--off-white); border: 0; border-radius: var(--radius-md); padding: 10px 20px; font-weight: 500; font-size: var(--fs-body-small); }
.btn:hover { background: var(--teal-light); }
.btn-ghost { background: var(--surface-raised); color: var(--text-primary); border: 0; box-shadow: var(--shadow-hairline); border-radius: var(--radius-md); padding: 8px 16px; font-weight: 500; font-size: var(--fs-body-small); }
.btn-ghost:hover { color: var(--helix-teal); }
.btn-mini { background: transparent; color: var(--text-tertiary); border: 0; box-shadow: var(--shadow-hairline); border-radius: var(--radius-sm); padding: 4px 10px; font-size: var(--fs-caption); }
.btn-mini:hover { color: var(--helix-teal); }
.btn-mini.on { background: var(--helix-teal); color: var(--off-white); box-shadow: none; }

/* ---- Section blocks ---- */
.block { padding: var(--sp-2xl) 0; scroll-margin-top: 4.5rem; }
.block-head { display: flex; align-items: flex-end; gap: var(--sp-md); flex-wrap: wrap; margin-bottom: var(--sp-md); }
.block-head .eyebrow { margin-bottom: 2px; width: 100%; }
.block-actions { margin-left: auto; display: flex; gap: var(--sp-sm); }
.block-lede { color: var(--text-secondary); max-width: 46rem; margin-bottom: var(--sp-lg); font-size: var(--fs-body-small); }
.cat-section { padding-top: var(--sp-xl); scroll-margin-top: 4.5rem; }
.cat-count { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-tertiary); letter-spacing: 0.05em; }

/* ---- Card grid ---- */
.cards { display: grid; grid-template-columns: 1fr; gap: var(--sp-md); margin-top: var(--sp-md); }
@media (min-width: 680px) { .cards { grid-template-columns: 1fr 1fr; gap: var(--sp-lg); } }
@media (min-width: 1000px) { .cards { grid-template-columns: 1fr 1fr 1fr; } }

.card {
  background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-hairline);
  padding: var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-sm);
  transition: box-shadow .3s cubic-bezier(.16,1,.3,1);
}
.card:hover { box-shadow: var(--shadow-raised); }
.card.dropped { opacity: .5; }
.card.picked { box-shadow: 0 0 0 1px var(--helix-teal); }
/* cards you personally approved get a teal left-edge so your picks are scannable */
.card.mine { box-shadow: inset 4px 0 0 0 var(--helix-teal), var(--shadow-hairline); }
.card.mine:hover { box-shadow: inset 4px 0 0 0 var(--helix-teal), var(--shadow-raised); }
.card.picked.mine { box-shadow: inset 4px 0 0 0 var(--helix-teal), 0 0 0 1px var(--helix-teal); }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-sm); }
.card .cat { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); }
.card h3 { margin-top: 2px; }
.tally { text-align: right; flex-shrink: 0; }
.tally .num { font-family: var(--font-display); font-size: 1.9rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--helix-teal); }
.tally .unit { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); }
/* no votes yet — keep teal for real signal, not an empty score */
.tally.zero .num { color: var(--text-quaternary); }

.badges { display: flex; gap: 6px; flex-wrap: wrap; }
.badge { font-family: var(--font-body); font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-full); background: var(--surface-tinted); color: var(--text-secondary); }
.badge.picked { background: var(--helix-teal); color: var(--off-white); }
.badge.dropped { background: var(--surface-tinted); color: var(--text-tertiary); }
.badge.kid { background: rgba(9,138,143,.12); color: var(--teal-dark); }
.badge.bucket { background: var(--surface-tinted); color: var(--text-secondary); }

.why { color: var(--text-secondary); font-size: var(--fs-body-small); }
.cost-line { font-family: var(--font-display); font-size: 1.15rem; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.cost-line .band { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-tertiary); margin-left: 6px; letter-spacing: .05em; }
.meta { display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-body-small); color: var(--text-secondary); }
.meta .row { display: flex; gap: 6px; }
.meta .k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary); min-width: 78px; flex-shrink: 0; padding-top: 2px; }
.flag { background: rgba(9,138,143,.08); border-radius: var(--radius-sm); padding: 6px 10px; font-size: var(--fs-body-small); color: var(--teal-dark); }
.links { display: flex; gap: var(--sp-md); flex-wrap: wrap; font-size: var(--fs-body-small); }

/* approve — full-width toggle (the card's primary action) */
.approve { display: flex; flex-direction: column; gap: var(--sp-sm); margin-top: auto; padding-top: var(--sp-md); box-shadow: inset 0 1px 0 var(--hairline); }
.vote-btn {
  width: 100%; text-align: center; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-body);
  padding: 12px 16px; border: 0; border-radius: var(--radius-md); cursor: pointer;
  background: var(--surface-tinted); color: var(--text-primary); box-shadow: inset 0 0 0 1.5px var(--hairline);
  transition: background .2s, color .2s, box-shadow .2s;
}
.vote-btn:hover { box-shadow: inset 0 0 0 1.5px var(--helix-teal); color: var(--teal-dark); }
.vote-btn.on { background: var(--helix-teal); color: var(--off-white); box-shadow: none; }
.vote-btn.on:hover { background: var(--teal-light); color: var(--off-white); box-shadow: none; }
.vote-btn:disabled { opacity: .6; cursor: default; }
.approvers { align-self: flex-end; font-size: var(--fs-caption); color: var(--text-tertiary); cursor: pointer; }
.approvers-list { font-size: var(--fs-body-small); color: var(--text-secondary); }

/* comments */
.comments { display: flex; flex-direction: column; gap: 6px; }
.comment { font-size: var(--fs-body-small); }
.comment .who { font-weight: 600; color: var(--text-primary); }
.comment .when { font-family: var(--font-mono); font-size: 10px; color: var(--text-quaternary); margin-left: 6px; }
.comment .del { border: 0; background: none; color: var(--text-quaternary); cursor: pointer; font-size: 12px; margin-left: 6px; }
.comment .del:hover { color: var(--helix-teal); }
.comment-row { display: flex; gap: 6px; margin-top: 4px; }
.comment-row input { flex: 1; padding: 7px 10px; font-size: var(--fs-body-small); }
.disclose { font-size: var(--fs-body-small); color: var(--teal-dark); cursor: pointer; background: none; border: 0; padding: 4px 0; text-align: left; }

/* booking + admin controls on card */
.book { display: flex; align-items: center; gap: var(--sp-sm); flex-wrap: wrap; font-size: var(--fs-body-small); }
.book .cur { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); }
.book select, .book input { padding: 6px 10px; font-size: var(--fs-body-small); }
.admin-ctl { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

/* ---- Map ---- */
#map { height: 60vh; min-height: 360px; border-radius: var(--radius-lg); box-shadow: var(--shadow-hairline); }
.leaflet-container { font-family: var(--font-body); background: var(--surface-tinted); }
.leaflet-popup-content { font-family: var(--font-body); }
.leaflet-popup-content b { font-family: var(--font-display); font-weight: 500; }

/* ---- Costs ---- */
.cost-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-md); }
@media (min-width: 720px) { .cost-grid { grid-template-columns: 1.4fr 1fr; } }
.cost-total { background: var(--surface-dark); color: var(--off-white); border-radius: var(--radius-lg); padding: var(--sp-xl); }
.cost-total .big { font-family: var(--font-display); font-size: 3rem; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.cost-total .cap { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: .12em; text-transform: uppercase; color: var(--text-inverse-tertiary); }
.cost-fams { display: flex; flex-direction: column; gap: var(--sp-sm); }
.fam { display: flex; justify-content: space-between; align-items: baseline; background: var(--surface-raised); box-shadow: var(--shadow-hairline); border-radius: var(--radius-md); padding: var(--sp-sm) var(--sp-md); }
.fam .name { font-weight: 500; }
.fam .amt { font-family: var(--font-display); font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.cost-lines { margin-top: var(--sp-md); }
.cost-lines .cl { display: flex; justify-content: space-between; font-size: var(--fs-body-small); padding: 6px 0; box-shadow: inset 0 -1px 0 var(--hairline); }
.cost-lines .cl .amt { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.cost-empty { color: var(--text-tertiary); font-size: var(--fs-body-small); }

/* ---- Itinerary ---- */
.day { background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-hairline); padding: var(--sp-lg); margin-bottom: var(--sp-md); }
.day-head { display: flex; align-items: baseline; gap: var(--sp-md); flex-wrap: wrap; }
.day-date { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: .08em; text-transform: uppercase; color: var(--helix-teal); }
.day h3 { font-size: 1.4rem; }
.day .nap { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-tertiary); margin-left: auto; }
.day ul { margin: var(--sp-sm) 0 0; padding-left: 1.1rem; color: var(--text-secondary); font-size: var(--fs-body-small); }
.day li { margin-bottom: 4px; }
.day-edit { margin-top: var(--sp-sm); display: flex; flex-direction: column; gap: var(--sp-sm); }
.day-edit input.title-in { font-size: var(--fs-body); }

/* ---- Packing ---- */
.pack-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-lg); }
@media (min-width: 720px) { .pack-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pack-card { background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-hairline); padding: var(--sp-lg); min-width: 0; overflow-wrap: anywhere; }
.pack-card h4 { font-family: var(--font-display); font-size: 1.25rem; margin-bottom: var(--sp-sm); }
.pack-item { display: flex; justify-content: space-between; gap: var(--sp-sm); font-size: var(--fs-body-small); padding: 6px 0; box-shadow: inset 0 -1px 0 var(--hairline); min-width: 0; }
.pack-item > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.pack-item .who { color: var(--text-tertiary); font-size: var(--fs-caption); flex-shrink: 1; min-width: 0; text-align: right; overflow-wrap: anywhere; }
.pack-master li { margin-bottom: 4px; color: var(--text-secondary); font-size: var(--fs-body-small); }
.pack-add { display: flex; gap: 6px; margin-top: var(--sp-sm); flex-wrap: wrap; }
.pack-add input { flex: 1; min-width: 0; }

/* ---- Emergency ---- */
.emerg-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-sm); }
@media (min-width: 720px) { .emerg-grid { grid-template-columns: 1fr 1fr; } }
.emerg { background: var(--surface-raised); border-radius: var(--radius-md); box-shadow: var(--shadow-hairline); padding: var(--sp-md); }
.emerg .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary); }
.emerg .val { font-size: var(--fs-body-small); color: var(--text-primary); margin-top: 2px; }
.emerg .tel { font-family: var(--font-display); font-size: 1.1rem; color: var(--teal-dark); font-variant-numeric: tabular-nums; }

/* ---- Admin ---- */
.admin-bar { display: flex; align-items: center; gap: var(--sp-md); background: var(--surface-dark); color: var(--off-white); border-radius: var(--radius-md); padding: var(--sp-sm) var(--sp-md); margin: var(--sp-lg) 0; flex-wrap: wrap; }
.admin-tag { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: .1em; text-transform: uppercase; background: var(--helix-teal); color: var(--off-white); padding: 3px 10px; border-radius: var(--radius-full); }
.admin-note { font-size: var(--fs-body-small); color: var(--text-inverse-secondary); }
.admin-bar .btn-ghost { margin-left: auto; }
.admin-add { background: var(--surface-raised); box-shadow: var(--shadow-hairline); border-radius: var(--radius-lg); padding: var(--sp-lg); margin-bottom: var(--sp-lg); display: grid; gap: var(--sp-sm); }
.admin-add .arow { display: flex; gap: var(--sp-sm); flex-wrap: wrap; }
.admin-add input, .admin-add textarea, .admin-add select { flex: 1; min-width: 8rem; }
.admin-status { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-tertiary); }

/* ---- Back-to-top (mobile only) ---- */
.to-top {
  position: fixed; bottom: 18px; right: 18px; z-index: 60; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-full); background: var(--surface-dark); color: var(--off-white);
  font-size: 20px; line-height: 1; cursor: pointer; box-shadow: var(--shadow-raised);
}
.to-top:hover { background: var(--helix-teal); }
@media (min-width: 860px) { .to-top { display: none !important; } }

/* ---- Footer ---- */
.footer { background: var(--surface-dark); color: var(--text-inverse-secondary); padding: var(--sp-2xl) 0; margin-top: var(--sp-2xl); text-align: center; }
.footer-mark { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; color: var(--off-white); }
.footer-note { font-size: var(--fs-body-small); color: var(--text-inverse-tertiary); margin-top: var(--sp-sm); }

/* ---- Responsive type ---- */
@media (min-width: 720px) {
  h2 { font-size: var(--fs-h2); }
  .welcome-title { font-size: var(--fs-h1, 2.6rem); }
}

/* ---- Mobile: control bar collapses to a top strip ---- */
@media (max-width: 859px) {
  .layout { display: block; max-width: none; }
  .sidebar {
    position: static; height: auto; overflow: visible; flex-direction: column; gap: var(--sp-md);
    padding: var(--sp-md) var(--container-x);
    box-shadow: inset 0 -1px 0 var(--hairline);
  }
  .side-nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .nav-group { display: none; }
  .nav-link { white-space: nowrap; background: var(--surface-tinted); padding: 6px 12px; }
  .nav-count { display: none; }
  .side-controls { margin-top: 0; flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--sp-md); padding-top: var(--sp-sm); }
  .side-controls .btn-ghost { align-self: auto; }
  .content { padding: var(--sp-lg) var(--container-x) var(--sp-2xl); }
}

/* ---- Print (Save as PDF of the itinerary) ---- */
@media print {
  .sidebar, .welcome, #map-section, #costs-section, #packing-section,
  .footer, #adminBar, #adminAdd, #sections, .block-actions, .to-top { display: none !important; }
  .layout { display: block; }
  .content { padding: 0; }
  body { background: #fff; }
  .day { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .block-lede { color: #000; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }