/* Audio Tours – The Smokies — tour player page styles. */
.player-hero { padding: 2rem 0 1.5rem; background: var(--ridge); color: var(--cream); }
.player-hero h1 { margin: .4rem 0 0; font-size: 2rem; color: var(--white); }
.player-hero__meta { color: rgba(246,242,233,.8); margin-top: .4rem; font-size: .95rem; }
.breadcrumb { font-size: .82rem; color: rgba(246,242,233,.7); margin-bottom: .5rem; }
.breadcrumb a { color: rgba(246,242,233,.85); text-decoration: none; }

.placeholder-banner { background: #FFF3E0; border: 1px solid #F0C089; border-radius: 6px; padding: .85rem 1.1rem; margin: 1.25rem 0; font-size: .85rem; color: #7A3E0A; }
.placeholder-banner strong { text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; display: block; margin-bottom: .3rem; }

/* "Enable location" primer -- shown before the native geolocation permission
   dialog fires, not instead of it. Explains the value, gets an explicit tap,
   THEN requests permission (see startGpsWatch in smokies-player.js). Also
   reused (with updated text) as the post-decline/error state. */
.location-primer {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  background: var(--cream); border: 1px solid var(--border); border-radius: 10px;
  padding: .9rem 1.1rem; margin-bottom: 1.25rem;
}
.location-primer__icon { font-size: 1.3rem; flex-shrink: 0; }
.location-primer__text { flex: 1; min-width: 200px; font-size: .85rem; color: var(--charcoal); }
.location-primer .btn { flex-shrink: 0; }
.location-primer .btn[disabled] { opacity: .6; cursor: wait; }

/* Map block: collapsed by default (Code_Instruction_MapBlock_Redesign.md,
   2026-08-26) -- a decorative placeholder earns no hero position, so it now
   sits below the stops list behind a <details> toggle instead of racing the
   real CTAs for the top of the page. The static <img> inside is a single
   shared, tour-agnostic illustration (no baked-in per-tour text -- that's
   what caused every tour page to show Cable Mill's stale "Stops 1-4 of 12"
   banner); the interactive Leaflet map still only loads after the visitor
   taps "Activate live map" -- see smokies-player.js. */
.tour-map-details { margin: 1.5rem 0; }
.tour-map-summary { cursor: pointer; font-weight: 600; color: var(--charcoal); padding: .5rem 0; list-style: none; }
.tour-map-summary::-webkit-details-marker { display: none; }
.tour-map-summary::before { content: '▸ '; }
.tour-map-details[open] .tour-map-summary::before { content: '▾ '; }
.tour-map-caption { font-size: .85rem; color: var(--charcoal); margin: .5rem 0 .5rem; font-weight: 500; }
.tour-map-note { font-size: .78rem; color: var(--muted); margin: .5rem 0 0; }
.tour-map-wrap { position: relative; height: 280px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); margin-bottom: 0; background: var(--ridge-dark); }
.tour-map-wrap img.static-map { width: 100%; height: 100%; object-fit: cover; display: block; }
.tour-map-wrap #tour-map { position: absolute; inset: 0; display: none; }
.tour-map-wrap.is-live #tour-map { display: block; }
.tour-map-wrap.is-live img.static-map { display: none; }
.map-activate-btn { position: absolute; bottom: 10px; right: 10px; background: rgba(34,31,26,.75); color: #fff; border: none; font-size: .75rem; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-family: var(--font-body); }

.stop-marker { background: none; border: none; }
.stop-dot { width: 34px; height: 34px; border-radius: 50%; background: var(--ridge); color: #fff; font-size: .85rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--ember); box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .2s; }
.stop-marker.pulse .stop-dot { animation: smk-pulse .6s ease-out; }
@keyframes smk-pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(193,101,46,.6); } 50% { transform: scale(1.35); box-shadow: 0 0 0 12px rgba(193,101,46,0); } 100% { transform: scale(1); } }

.gps-status { font-size: .82rem; color: var(--muted); min-height: 1.2em; margin-bottom: .75rem; }

.listen-banner { position: sticky; top: 0; z-index: 200; background: var(--ember); color: #fff; padding: .75rem 0; }
.listen-banner__inner { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.listen-banner__text { flex: 1; }
.listen-banner__label { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; margin-bottom: .15rem; }
.listen-banner__text strong { font-size: 1rem; }
.btn--banner { background: #fff; color: var(--ember); border: 2px solid #fff; font-weight: 700; padding: .6rem 1.25rem; border-radius: 4px; font-size: .9rem; cursor: pointer; }

.audio-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 1.25rem; margin-bottom: 1.25rem; }
.audio-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.share-btn--light { border-color: var(--charcoal); color: var(--charcoal); flex-shrink: 0; }
.share-btn--light:hover { background: rgba(0,0,0,.05); }
.audio-card__title { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--ridge); }
.audio-card__status { font-size: .8rem; color: var(--muted); margin-top: .2rem; }
.audio-card__controls { display: flex; align-items: center; gap: .75rem; }
.mp3-play-btn { width: 48px; height: 48px; border-radius: 50%; background: var(--ridge); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mp3-play-btn svg { width: 20px; height: 20px; fill: #fff; }
.audio-progress-wrap { flex: 1; }
.mp3-progress { width: 100%; height: 5px; appearance: none; background: var(--border); border-radius: 3px; cursor: pointer; outline: none; }
.mp3-progress::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--ridge); cursor: pointer; }
.audio-time { font-size: .8rem; font-weight: 600; color: var(--muted); white-space: nowrap; min-width: 80px; }

.stop-list { margin-bottom: 1.25rem; }
.stop-list__heading { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: .75rem; }
.stop-item { display: flex; align-items: center; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--border); }
.stop-item:last-child { border-bottom: none; }
.stop-item__number { width: 28px; height: 28px; border-radius: 50%; background: var(--ridge); color: #fff; font-size: .75rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1.5px solid var(--ember); }
.stop-item__body { flex: 1; }
.stop-item__title { font-weight: 600; font-size: .9rem; }
.stop-item__dist { font-size: .78rem; color: var(--muted); margin-top: .1rem; }
.btn--playing { background: var(--ridge); border-color: var(--ridge); color: #fff; }

.access-note { font-size: .8rem; padding: .6rem .9rem; border-radius: 6px; margin-top: .5rem; }
.access-note--preview { background: #E7F1FA; color: #17547E; }
.access-note--paid { background: #F3EBF6; color: #5C3B6B; }

/* Seasonal road-access notice (2026-09-01, Code_Instruction_Tier2_Rulings_
   PortersSwap_P7Pin_PublishOP.md #4) -- visitor-facing, page-level warning
   for tours reached via a seasonally-closed road, read from tour.json's
   seasonal_closure_note field. Amber rather than the blue/purple access
   notes above: this is a caution about physically reaching the trailhead,
   not a pricing/access-tier note. */
.seasonal-note { font-size: .85rem; padding: .7rem 1rem; border-radius: 6px; margin-top: .75rem; background: #FDF3E3; color: #7A5215; border: 1px solid #F0DBAE; }

/* Taster gate (interim, until Stripe/M3 exists) -- a locked stop shows an
   honest "Unlocks soon" state, never a Buy button that doesn't work. See
   scripts/build-tour-page.py. */
.stop-item--locked { opacity: .65; }
.stop-item--locked .stop-item__number { background: var(--muted); border-color: var(--muted); }
/* 13 Oct addendum H: a story along the way has no number -- a small outlined dot in the number column + a "Story along the way" kicker */
.stop-item .stop-item__number--story { background: none !important; border-color: transparent !important; box-shadow: none !important; }
.stop-item .stop-item__number--story::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid #B4532A; }
.stop-item__kind { font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #B4532A; margin-bottom: 1px; }

.back-link { padding: 1rem 0 2rem; text-align: center; }

/* ─────────────────────────────────────────────────────────────────────────
   TASK-015 · Tour-page UX (design v1, 2026-09-05, artefact-frozen)
   Mobile-first: used one-handed, outdoors, in sunlight, sometimes gloved.
   Every interactive target is >= 48px; no state is signalled by colour alone.
   ───────────────────────────────────────────────────────────────────────── */

/* §1a.3 · Start block ---------------------------------------------------- */
.start-block { margin: 14px 0; }
.start-block__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--cream, #F6F2E9); border: 1px solid var(--border, #DDD4C4);
  border-radius: 10px; padding: 12px 14px;
}
.start-block__label { font-size: 14px; }
/* Collapsed state after the tour starts: one muted line, no card. */
.start-block--collapsed .start-block__row {
  background: none; border: 0; padding: 0; font-size: 12px; color: var(--muted, #6B6459);
}
.start-block--collapsed .start-block__label { font-size: 12px; }
.start-block--collapsed #directions-to-start { display: none; }

/* §1a.4 · GPS state pill ------------------------------------------------- */
.gps-pill {
  display: flex; align-items: center; gap: 8px;
  border-radius: 10px; padding: 12px 16px; margin: 14px 0;
  font-size: 13px; font-weight: 600;
}
.gps-pill__icon { font-size: 16px; line-height: 1; }
.gps-pill__text { flex: 1; }
.gps-pill__btn {
  border: 0; border-radius: 8px; background: var(--ridge, #26413C); color: #fff;
  font-weight: 600; font-size: 12px; line-height: 1; padding: 7px 12px; min-height: 32px; cursor: pointer;
}
.gps-pill--off      { background: var(--border, #DDD4C4); color: var(--muted, #6B6459); }
.gps-pill--searching{ background: rgba(46,127,190,.14); color: var(--preview, #2E7FBE); }
.gps-pill--searching .gps-pill__btn { display: none; }
.gps-pill--live     { background: rgba(43,168,74,.14); color: #1E7A38; }
.gps-pill--live .gps-pill__btn { display: none; }
/* The pulse is decorative; prefers-reduced-motion turns it off entirely. */
@keyframes smk-gps-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(46,127,190,.28); }
                           50%     { box-shadow: 0 0 0 6px rgba(46,127,190,0); } }
.gps-pill--searching { animation: smk-gps-pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .gps-pill--searching { animation: none; } }

/* §1a.5 · Now-playing card ---------------------------------------------- */
.audio-card__progress-count { font-weight: 600; font-size: 12px; line-height: 1.3; color: var(--muted, #6B6459); margin-top: 2px; }
.btn--start-tour { width: 100%; min-height: 48px; font-weight: 600; font-size: 15px; line-height: 1; padding: 14px 0; }
.audio-card__start { margin: 12px 0 4px; }

.audio-card__transport { display: flex; align-items: center; gap: 12px; margin: 12px 0 4px; }
.transport__play {
  flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; border: 0;
  background: var(--ember, #C1652E); color: #fff; font-size: 26px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
/* Driving tours get a larger primary control -- it is used at arm's length in
   a mounted phone, not held. */
.tour--driving .transport__play { width: 72px; height: 72px; font-size: 30px; }
.transport__stop {
  /* The artefact draws 44px; built at 48 per Nicky's tap-target ruling. */
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
  background: #fff; border: 1px solid var(--border, #DDD4C4);
  font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.transport__bar { flex: 1 1 auto; min-width: 0; }
.transport__bar .mp3-progress { width: 100%; }
.tour--driving .audio-time { font-size: 14px; }
/* Reserve the line so late GPS text cannot shift the layout (§2). */
.proximity-status { font-size: 14px; min-height: 1.35em; margin-top: 8px; }

/* §1a.6 · Toggles as switches ------------------------------------------- */
.toggle-row { display: flex; gap: 12px; margin: 14px 0 6px; }
.toggle { flex: 1 1 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.toggle__label { font-weight: 600; font-size: 13px; line-height: 1.3; }
.toggle__help {
  /* TASK-021 §1: 10px was below the 12px floor Nicky set. Grown to 20x20 so the
     "?" fits the larger glyph without the circle looking cramped; still a hint
     affordance (cursor:help + title), not a control, so no 48px target. */
  width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; cursor: help;
  border: 1px solid var(--border, #DDD4C4); background: #fff;
  color: var(--muted, #6B6459); font-weight: 600; font-size: 12px; line-height: 1; padding: 0;
}
.toggle__input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle__switch {
  flex: 0 0 auto; width: 40px; height: 22px; border-radius: 11px; cursor: pointer;
  background: #fff; border: 1px solid var(--border, #DDD4C4);
  position: relative; transition: background .15s ease;
}
.toggle__switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--border, #DDD4C4); transition: transform .15s ease, background .15s ease;
}
.toggle__input:checked + .toggle__switch { background: var(--ember, #C1652E); border-color: var(--ember, #C1652E); }
.toggle__input:checked + .toggle__switch::after { background: #fff; transform: translateX(18px); }
/* Keyboard users must see focus even though the real input is offscreen. */
.toggle__input:focus-visible + .toggle__switch { outline: 2px solid var(--ember, #C1652E); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .toggle__switch, .toggle__switch::after { transition: none; }
}

/* §1a.7 · Save for offline ---------------------------------------------- */
/* TASK-021 §2: 42px -> >=48px. Padding kept; min-height covers all three
   button-text states (idle / "Saving n/N…" lives in the adjacent status
   span, not this button / "✓ Saved for offline"). */
.btn--save-offline { width: 100%; font-weight: 600; font-size: 14px; line-height: 1; padding: 13px 0; min-height: 48px; }

/* §1a.8 · Map card ------------------------------------------------------- */
.tour-map-card {
  margin: 14px 0; border: 1px solid var(--border, #DDD4C4); border-radius: 10px;
  overflow: hidden; background: var(--cream, #F6F2E9);
}
/* TASK-019 §1. `.tour-map-wrap` carries `height: 280px` from its base rule.
   With a definite height and `aspect-ratio: 16/9` and no width of its own,
   Chrome resolves the WIDTH from the height: 280 x 16/9 = 497.77px at every
   viewport. Measured on production 3c8f1795 at 390px: card 342 wide, wrap
   497.766 -- so the card's `overflow: hidden` was cropping 31% off the right
   of every static map, pins included, on all 17 pages since TASK-015. Making
   the width explicit and the height auto puts the ratio back in charge of the
   height instead of the other way round. Leaflet's #tour-map is inset:0 so it
   follows; the <img> attributes (TASK-017) are untouched. */
.tour-map-card .tour-map-wrap { width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 0; }
@supports not (aspect-ratio: 1 / 1) {
  /* No aspect-ratio: fall back to the fixed height that shipped before, which
     without the ratio sizes its width normally and does not crop. */
  .tour-map-card .tour-map-wrap { height: 280px; }
}
.tour-map-card .static-map { width: 100%; height: 100%; object-fit: cover; display: block; }
.tour-map-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px;
}
.tour-map-bar .tour-map-caption { font-weight: 600; font-size: 13px; line-height: 1.3; }
.tour-map-card .map-activate-btn {
  position: static; transform: none; background: none; border: 0; padding: 8px 0;
  color: var(--ridge, #26413C); font-weight: 600; font-size: 13px; line-height: 1;
  text-decoration: underline; cursor: pointer; min-height: 48px;
}
.tour-map-card .tour-map-note { font-size: 12px; color: var(--muted, #6B6459); padding: 0 12px 10px; }

/* §1a.9 · Stop rows ------------------------------------------------------ */
.stop-item__free {
  /* TASK-021 §1: 10px -> 12px floor. No uppercase/letter-spacing was actually
     applied here (the source text is "Free", not "FREE") -- nothing to keep. */
  font-weight: 700; font-size: 12px; line-height: 1; color: var(--live, #2BA84A); border: 1px solid currentColor;
  border-radius: 8px; padding: 3px 6px; margin-right: 8px; flex: 0 0 auto;
}
.stop-item__action {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-width: 48px; min-height: 48px; padding: 4px 6px;
  background: none; border: 0; cursor: pointer;
  color: var(--ember, #C1652E); font-weight: 600; font-size: 12px; line-height: 1.1;
}
.stop-item__action-icon { font-size: 15px; line-height: 1; }
.stop-item__action--locked { color: var(--paid, #8A5A9E); }
.stop-item--locked { opacity: .55; }
.stop-item--playing { background: rgba(193,101,46,.08); }
.stop-item--playing .stop-item__action { color: var(--ember, #C1652E); }

/* §1a.10 · Unlock CTA (injected at runtime, paywall modes only) ---------- */
.unlock-cta {
  margin: 16px 0; padding: 14px; border: 1px solid var(--paid, #8A5A9E);
  border-radius: 10px; background: var(--cream, #F6F2E9); text-align: center;
}
.unlock-cta__title { font-weight: 600; font-size: 15px; line-height: 1.35; margin-bottom: 10px; }
/* TASK-021 §2: 38px -> >=48px. */
.unlock-cta__btn { width: 100%; font-weight: 600; font-size: 14px; line-height: 1; padding: 12px 0; min-height: 48px; }
.unlock-cta__restore {
  display: inline-block; margin-top: 10px; font-size: 13px;
  color: var(--ridge, #26413C); text-decoration: underline; min-height: 48px; line-height: 48px;
}

/* §1a.11 · Below the stops ---------------------------------------------- */
.share-row--below { display: flex; gap: 10px; margin: 16px 0; }
.share-row--below > * { flex: 1 1 0; text-align: center; }
.how-it-works {
  border: 1px solid var(--border, #DDD4C4); border-radius: 10px;
  padding: 12px 14px; margin: 14px 0; background: var(--cream, #F6F2E9);
}
.how-it-works > summary { font-weight: 600; font-size: 14px; line-height: 1.3; cursor: pointer; min-height: 24px; }
.how-it-works__body { font-size: 13px; color: var(--muted, #6B6459); margin-top: 8px; }

/* The `hidden` attribute must win. Found while building TASK-015: several
   components set `display` on their class, which outranks the UA's
   `[hidden] { display: none }`, so JS that correctly set `el.hidden = true`
   changed nothing visually. Live on production at the time:
     · #chrome-ios-notice     — an iPhone-only notice shown to every visitor
     · #wakelock-indicator    — "Screen staying awake" while it was not held
     · #simulate-location     — the TEST-ONLY "Simulate arrival" button, on all
                                17 customer-facing tour pages
   One rule fixes the class and stops the next component reintroducing it.
   No JS logic changes: this makes the existing logic actually take effect. */
[hidden] { display: none !important; }

/* The tour page's first block sits right under the hero in the design (14px,
   not the site-wide 48px section padding). Scoped to the tour player so no
   other page's rhythm changes. */
.player-hero + .section,
.listen-banner + .section { padding-top: 14px; }

/* Contrast corrections for the two pairs this task introduced. §2 asks for
   high contrast because the page is read outdoors in sunlight, and Lighthouse
   measured both below 4.5:1 against cream:
     · the off-state GPS pill text (#756f63 on #DDD4C4 = 3.39)
     · the stop-row action label (ember #C1652E on cream  = 3.63)
   Both keep the design's shape and weight; only the text darkens. The icon
   stays ember so the row still reads as the design drew it. */
.gps-pill--off .gps-pill__text { color: var(--ridge, #26413C); }
.stop-item__action .stop-item__action-label { color: #9A4E1F; }
.stop-item__action--locked .stop-item__action-label { color: #6E4480; }

/* ══════════════════════════════════════════════════════════════════════════
   TASK-20260906-018 · Tour player UI v1.2
   Every rule here is scoped under `.ui-v12`, which build-tour-page.py puts on
   <body> only for tours carrying "player_ui": "1.2" (today: the two unlisted
   Tinahely field-test rigs). The 15 Smokies pages never match any of it, so
   §3's "unchanged except asset hashes" holds by construction rather than by
   review. Tokens are the existing brand set per §0's ruling -- no new fonts
   and no new colours: #9A4E1F is the darkened-ember TEXT value TASK-015
   already introduced for contrast, reused here as the artefact's accent-700.
   ══════════════════════════════════════════════════════════════════════════ */

/* §1c.2 · Full-width mobile spacing. 16px gutter, nothing wider than the
   content column, no horizontal scroll between 320 and 430px. */
@media (max-width: 430px) {
  .ui-v12 .container--narrow { padding: 0 16px; }
}
.ui-v12 .site-header { padding-top: calc(1rem + env(safe-area-inset-top, 0px)); }

.ui-v12 .v12-card {
  background: #fff; border: 1px solid var(--border, #DDD4C4); border-radius: 10px;
  padding: 20px; margin: 14px 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.ui-v12 .v12-card__title { font-family: var(--font-heading, 'Playfair Display', serif); font-size: 17px; line-height: 1.3; font-weight: 700; }
.ui-v12 .v12-card__title--lg { font-size: 20px; line-height: 1.25; }
.ui-v12 .v12-card__body { font-size: 13px; line-height: 1.5; color: var(--muted, #6B6459); margin: 0; }
.ui-v12 .v12-card__link { font-weight: 600; font-size: 13px; line-height: 1.4; color: var(--ridge, #26413C); text-decoration: underline; }
.ui-v12 .v12-card__link--center { align-self: center; }
.ui-v12 .v12-card__cta { width: 100%; min-height: 52px; font-size: 16px; font-weight: 700; padding: 14px 16px; }

/* S1 · the pulsing locating dot (artboard A). */
.ui-v12 .v12-pulse {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  background: rgba(193, 101, 46, .45);
  animation: v12PulseRing 1.6s ease-in-out infinite;
}
@keyframes v12PulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(193, 101, 46, .45); }
  100% { box-shadow: 0 0 0 10px rgba(193, 101, 46, 0); }
}
@media (prefers-reduced-motion: reduce) { .ui-v12 .v12-pulse { animation: none; } }

/* S2 · "You're closest to" eyebrow pill. */
.ui-v12 .v12-eyebrow {
  /* TASK-021 §1 sweep: 11px -> 12px. Real informative text ("You're closest
     to"), not decorative -- raised per the task's own default. Not named in
     §1; found by the literal grep the task specifies. See report. */
  align-self: flex-start; font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: .04em;
  padding: 5px 10px; border-radius: 20px;
  border: 1px solid var(--ember, #C1652E); color: #9A4E1F;
  background: rgba(193, 101, 46, .08);
}

/* §1a.3 S0 · Start Tour sits inside the start block, full width under the
   distance row. It no longer implies Stop 1 -- the nearest-stop card decides. */
.ui-v12 .start-block { display: flex; flex-direction: column; gap: 10px; }
.ui-v12 .btn--start-tour { min-height: 52px; font-size: 16px; }

/* S3 · tracking strip. The `live` GPS pill becomes the slim reassurance row;
   the `off` state keeps its TASK-015 appearance so "Enable" stays obvious. */
.ui-v12 .gps-pill--live {
  background: #fff; border: 1px solid var(--border, #DDD4C4); border-radius: 10px;
  padding: 10px 14px; color: var(--muted, #6B6459);
  font-weight: 500; font-size: 12px; line-height: 1.3; animation: none;
}
.ui-v12 .gps-pill--live .gps-pill__icon {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ember, #C1652E);
  font-size: 0; flex: none;
}
.ui-v12 .gps-pill--paused .gps-pill__icon { opacity: .45; }

/* §1a.4 · Now-playing card. */
.ui-v12 .v12-np {
  background: #fff; border: 1px solid var(--border, #DDD4C4); border-radius: 10px;
  padding: 18px; margin: 14px 0; display: flex; flex-direction: column; gap: 8px;
}
.ui-v12 .v12-np__count { font-weight: 600; font-size: 12px; line-height: 1.3; color: var(--muted, #6B6459); }
.ui-v12 .v12-np__now { font-family: var(--font-heading, 'Playfair Display', serif); font-size: 18px; line-height: 1.3; font-weight: 700; }
.ui-v12 .v12-np__prox { font-size: 13px; line-height: 1.4; color: var(--muted, #6B6459); }
.ui-v12 .v12-np__next { font-size: 13px; line-height: 1.4; color: #9A4E1F; font-weight: 600; }
.ui-v12 .v12-np__status { font-size: 12px; color: var(--muted, #6B6459); }
.ui-v12 .v12-np__prox:empty, .ui-v12 .v12-np__next:empty { display: none; }

/* §1a.5 · Stops. */
.ui-v12 .v12-stops__heading {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-family: var(--font-heading, 'Playfair Display', serif); font-size: 16px; font-weight: 700;
  /* v1.2 draws "Stops" as a heading, not the v1 uppercase eyebrow, so it must
     also drop the eyebrow's muted colour: --muted on cream measures 4.46:1 at
     bold 16px, which Lighthouse fails (12pt bold is not "large text"). */
  color: var(--charcoal, #221F1A);
  letter-spacing: 0; text-transform: none;
}
.ui-v12 .v12-tag {
  /* TASK-021 §1 sweep: 11px -> 12px. The "Autoplay on/off" state, not
     decorative. Not named in §1; see report. */
  font-weight: 600; font-size: 12px; line-height: 1; padding: 4px 9px; border-radius: 20px;
  border: 1px solid var(--border, #DDD4C4); color: var(--muted, #6B6459);
  background: #fff; white-space: nowrap;
}
.ui-v12 .v12-tag--on { border-color: var(--ember, #C1652E); color: #9A4E1F; background: rgba(193, 101, 46, .08); }

/* TASK-20260913-018D · Combined tour-lifecycle + GPS + Autoplay status card.
   Same box treatment as .v12-np/.v12-card (existing tokens only, no new
   colours) so it reads as one family of cards rather than a new artefact. The
   GPS pill is nested here rather than duplicated, so its own box decoration
   (background/padding/margin, all four state variants) is flattened to a
   plain row item -- it still carries setGpsState()'s classes and copy
   unchanged, only the chrome around it differs in this one context. */
.ui-v12 .v12-tour-status {
  background: #fff; border: 1px solid var(--border, #DDD4C4); border-radius: 10px;
  padding: 14px 16px; margin: 14px 0; display: flex; flex-direction: column; gap: 8px;
}
.ui-v12 .v12-tour-status__state {
  font-weight: 700; font-size: 13px; line-height: 1.3; letter-spacing: .02em;
  color: var(--ridge, #26413C);
}
.ui-v12 .v12-tour-status__state--gps-needs-attention { color: #9A4E1F; }
.ui-v12 .v12-tour-status__row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ui-v12 .v12-tour-status .gps-pill {
  flex: 1; min-width: 0; margin: 0; padding: 0; background: transparent;
}
.ui-v12 .stop-item { padding: 12px 4px; gap: 10px; }
.ui-v12 .stop-item__number {
  width: 22px; height: auto; border-radius: 0; border: none; background: none;
  color: var(--muted, #6B6459); font-weight: 700; font-size: 13px; line-height: 1.4;
  font-variant-numeric: tabular-nums; justify-content: flex-start;
}
.ui-v12 .stop-item--locked .stop-item__number { background: none; }
.ui-v12 .stop-item__title { font-weight: 600; font-size: 14px; line-height: 1.35; }
.ui-v12 .stop-item__dist { font-size: 12px; }
.ui-v12 .stop-item__action {
  min-width: 48px; min-height: 48px; padding: 0 8px;
  font-weight: 600; font-size: 12px; line-height: 1.2; justify-content: flex-end;
}
.ui-v12 .stop-item--playing { background: rgba(193, 101, 46, .08); }
@supports (background: color-mix(in oklch, red 8%, transparent)) {
  .ui-v12 .stop-item--playing { background: color-mix(in oklch, var(--ember, #C1652E) 8%, transparent); }
}

/* §1a.7 · Map card sits below the stops; the card itself is TASK-015/017. */
.ui-v12 .tour-map-card { margin: 16px 0; }

/* ── Sticky transport (§1a, §1c.1) ──────────────────────────────────────── */
.ui-v12 .v12-transport {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: #fff; border-top: 1px solid var(--border, #DDD4C4);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
  padding: 10px calc(16px + env(safe-area-inset-right, 0px))
           calc(14px + env(safe-area-inset-bottom, 0px))
           calc(16px + env(safe-area-inset-left, 0px));
  touch-action: manipulation;
}
.ui-v12 .v12-transport__inner {
  max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px;
}
.ui-v12 .v12-transport__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ui-v12 .v12-transport__title {
  font-weight: 600; font-size: 14px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
/* TASK-021 §1 sweep: 11px -> 12px. A tabular-nums counter is explicitly NOT
   decorative per the task's own example. Not named in §1; see report. */
.ui-v12 .v12-transport__time { font-size: 12px; color: var(--muted, #6B6459); white-space: nowrap; flex: none; }
.ui-v12 .v12-transport__next {
  font-weight: 500; font-size: 12px; line-height: 1.3; color: #9A4E1F;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ui-v12 .v12-transport__next:empty { display: none; }

/* The progress element stays the TASK-015 <input type="range"> so the player's
   own timeupdate/seek bindings are untouched; v1.2 only restyles it as the
   5px bar the artefact draws. It remains seekable. */
.ui-v12 .v12-progress {
  -webkit-appearance: none; appearance: none; width: 100%; height: 5px;
  border-radius: 3px; background: var(--border, #DDD4C4); margin: 0; padding: 0;
}
.ui-v12 .v12-progress::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%; background: var(--ember, #C1652E); border: none;
}
.ui-v12 .v12-progress::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: var(--ember, #C1652E); border: none;
}
.ui-v12 .v12-progress::-moz-range-progress { background: var(--ember, #C1652E); height: 5px; border-radius: 3px; }

.ui-v12 .v12-transport__controls {
  display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 2px;
}
.ui-v12 .v12-ctl {
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  border-radius: 50%; cursor: pointer; padding: 0; line-height: 1;
  font-family: inherit; touch-action: manipulation;
}
.ui-v12 .v12-ctl--play {
  width: 72px; height: 72px; border: none; background: var(--ember, #C1652E);
  color: #fff; font-size: 30px;
}
.ui-v12 .v12-ctl--play:active { background: #a4531f; }
.ui-v12 .v12-ctl--sm {
  width: 52px; height: 52px; background: transparent;
  border: 2px solid var(--charcoal, #221F1A); color: var(--charcoal, #221F1A);
}
.ui-v12 .v12-ctl__glyph { font-size: 19px; line-height: 1; }
.ui-v12 .v12-ctl--rewind .v12-ctl__glyph { margin-bottom: -2px; }
/* TASK-021 §1 sweep: 11px -> 12px. Conveys the rewind step ("15"), not
   decorative; fits inside the 52px circle with room to spare. Not named in
   §1; see report. */
.ui-v12 .v12-ctl__sub { font-weight: 700; font-size: 12px; line-height: 1; }

/* Nothing may render underneath the bar. The reserve goes on the FOOTER --
   the last thing in the flow -- because the footer sits outside <main>, so
   padding the section alone would still leave it under the bar. Reserved
   unconditionally, not on reveal, so the transport appearing shifts nothing
   (§4F asks for no CLS from it).

   §1a specifies a 150px reserve. MEASURED, the bar is 157px tall (identical at
   320 / 390 / 430 px), so 150px clipped the footer's share row by 7px -- seen
   on the publish-prep preview, not in the markup. The reserve is therefore the
   measured bar height plus the footer's own 40px bottom padding, so the footer
   keeps its normal rhythm instead of sitting flush against the bar. The safe
   -area inset is added on both, so the clearance holds on a notched iPhone. */
.ui-v12 { --v12-bar-h: 157px; }
.ui-v12 .site-footer {
  padding-bottom: calc(40px + var(--v12-bar-h) + env(safe-area-inset-bottom, 0px));
}

/* ══════════════════════════════════════════════════════════════════════════
   TASK-20260914-022 · Tour player UI v1.3 (design v2.1)
   Scoped under .ui-v13, which build-tour-page.py adds -- ALONGSIDE .ui-v12 --
   only for tours carrying "player_ui": "1.3" (the two Tinahely rigs and Cades
   Cove Loop). Every rule below either overrides a v1.2 rule or styles a new
   v1.3 element; none can match a 1.2 page. Palette: the existing brand tokens
   plus colours the site already uses -- the amber notice set of .seasonal-note
   (#FDF3E3 / #7A5215) and --live green -- as the design canvas does.
   The canvas draws 10.5-11px text and 32-40px controls. Held here at the
   TASK-021 floor instead: 12px minimum text, and every control a >=48px tap
   target (the visual size stays close to the canvas; the hit area is
   extended with ::after rather than by making the chips bulkier).
   ══════════════════════════════════════════════════════════════════════════ */

/* [hidden] must win over the display values below (author CSS otherwise beats
   the UA's [hidden] rule). Scoped: only 1.3 pages. */
.ui-v13 [hidden] { display: none !important; }

/* The tour's own sticky region takes top:0, so the site header scrolls away on
   these pages: two pinned bars would cost ~200px of an 844px screen, which is
   exactly what this redesign removes. */
.ui-v13 .site-header { position: static; }
.ui-v13 { --v12-bar-h: 0px; }   /* no bottom bar any more: footer reserve collapses */
.ui-v13 main > .section { padding-top: 12px; }

/* §1 · Sticky top region */
.ui-v13 .v13-sticky {
  position: sticky; top: 0; z-index: 90;
  padding-top: env(safe-area-inset-top, 0px);
  background: #fff; border-bottom: 1px solid var(--border, #DDD4C4);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .06);
}
.ui-v13 .v13-sticky--active { background: #EAF6EE; }
.ui-v13 .v13-sticky--attention { background: #FDF3E3; }
.ui-v13 .v13-sticky__label {
  max-width: 720px; margin: 0 auto; padding: 8px 16px 0;
  font-size: 12px; font-weight: 700; letter-spacing: .03em; line-height: 1.3;
  color: var(--muted, #756F63);
}
.ui-v13 .v13-sticky--active .v13-sticky__label { color: #1E7A38; }
.ui-v13 .v13-sticky--attention .v13-sticky__label { color: #7A5215; }
.ui-v13 .v13-sticky__chips {
  max-width: 720px; margin: 0 auto; padding: 8px 16px 8px;
  display: flex; align-items: center; gap: 12px;
  overflow-x: auto; scrollbar-width: none;
}
.ui-v13 .v13-sticky__chips::-webkit-scrollbar { display: none; }
.ui-v13 .v13-sticky__note {
  max-width: 720px; margin: 0 auto; padding: 0 16px 6px;
  font-size: 12px; line-height: 1.35; color: var(--muted, #756F63);
}
.ui-v13 .v13-sticky__note:empty { display: none; }

/* §2 · Chips (loud) and quiet indicators */
.ui-v13 .v13-chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 32px; margin: 0; padding: 0 12px; border-radius: 16px;
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap;
  background: #fff; border: 1px solid var(--border, #DDD4C4); color: var(--muted, #756F63);
  animation: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.ui-v13 button.v13-chip { cursor: pointer; }
.ui-v13 button.v13-chip::after { content: ''; position: absolute; inset: -8px -4px; }
.ui-v13 .v13-chip--on { border-color: var(--ember, #C1652E); color: #9A4E1F; background: rgba(193, 101, 46, .08); }
.ui-v13 .v13-chip--warn { border-color: var(--ember, #C1652E); color: #7A5215; background: #fff; }
.ui-v13 .v13-chip .gps-pill__icon { font-size: 13px; line-height: 1; }
.ui-v13 .v13-chip .gps-pill__btn {
  position: relative; margin: 0 -6px 0 2px; border: 0; border-radius: 8px;
  background: var(--ridge, #26413C); color: #fff; padding: 5px 10px; min-height: 0;
  font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1.2; cursor: pointer;
}
.ui-v13 .v13-chip .gps-pill__btn::after { content: ''; position: absolute; inset: -12px -6px; }
.ui-v13 .v13-quiet {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 32px; margin: 0; padding: 0; background: none; border: 0; animation: none;
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 12px; font-weight: 600; line-height: 1.2; color: #5C6B62; white-space: nowrap;
}
.ui-v13 .v13-quiet--live .gps-pill__icon {
  width: 7px; height: 7px; border-radius: 50%; background: var(--live, #2BA84A); font-size: 0; flex: none;
}
.ui-v13 button.v13-quiet { cursor: default; }
.ui-v13 .v13-chip:focus-visible, .ui-v13 .v13-quiet:focus-visible,
.ui-v13 .v13-chip .gps-pill__btn:focus-visible, .ui-v13 .v13-ctl:focus-visible,
.ui-v13 .v13-stops-toggle:focus-visible { outline: 2px solid var(--ridge, #26413C); outline-offset: 2px; }

/* §1 · Mini transport, inside the sticky region */
.ui-v13 .v13-transport {
  max-width: 720px; margin: 0 auto; padding: 8px 16px 10px;
  border-top: 1px solid var(--border, #DDD4C4);
  display: flex; flex-direction: column; gap: 6px;
}
.ui-v13 .v13-transport__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ui-v13 .v13-transport__title {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13px; font-weight: 700; line-height: 1.3;
}
.ui-v13 .v13-transport__time { flex: none; font-size: 12px; color: var(--muted, #756F63); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ui-v13 .v13-transport__next { display: none; }
.ui-v13 .v13-progress { height: 4px; }
.ui-v13 .v13-transport__controls { display: flex; align-items: center; justify-content: center; gap: 16px; }
.ui-v13 .v13-ctl {
  position: relative; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; padding: 0; line-height: 1; cursor: pointer; touch-action: manipulation;
  font-family: inherit;
}
.ui-v13 .v13-ctl::after { content: ''; position: absolute; inset: -6px; }
.ui-v13 .v13-ctl--sm {
  width: 36px; height: 36px; background: transparent;
  border: 1.5px solid var(--charcoal, #221F1A); color: var(--charcoal, #221F1A); font-size: 14px;
}
.ui-v13 .v13-ctl--play { width: 44px; height: 44px; border: 0; background: var(--ember, #C1652E); color: #fff; font-size: 18px; }
.ui-v13 .v13-ctl--play:active { background: #a4531f; }
.ui-v13 .v13-ctl__sub { font-size: 12px; font-weight: 700; margin-left: 1px; }

/* §5 · Concise header + one-line description */
.ui-v13 .v13-hero { padding: 1.1rem 0 1rem; }
.ui-v13 .v13-hero h1 { font-size: 1.5rem; line-height: 1.2; }
.ui-v13 .v13-hero__park { margin: .25rem 0 0; font-size: 13px; color: rgba(246, 242, 233, .8); }
.ui-v13 .v13-hero__facts { margin: .5rem 0 0; font-size: 13px; font-weight: 600; color: rgba(246, 242, 233, .92); }
.ui-v13 .v13-hero__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .5rem; }
.ui-v13 .v13-hero__tag {
  font-size: 12px; font-weight: 600; line-height: 1.3; color: #fff;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28);
  padding: 3px 9px; border-radius: 20px;
}
.ui-v13 .v13-desc { margin: 0 0 4px; font-size: 14px; line-height: 1.5; color: var(--charcoal, #221F1A); }

/* §5 · Collapsible stop list */
.ui-v13 .v13-stops-toggle {
  min-height: 44px; padding: 0 2px; border: 0; background: none; cursor: pointer;
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 13px; font-weight: 700; color: var(--ridge, #26413C); text-decoration: underline;
}
.ui-v13 .v13-row--collapsed { display: none !important; }
.ui-v13 .v13-row--played { opacity: .6; }
.ui-v13 .v13-row--played .stop-item__number { color: var(--live, #2BA84A); }

/* ── TASK-20260914-023 · v1.3 refinement pass ────────────────────────────
   §4 · Primary actions step up; quiet stays quiet. Only the controls a
   visitor reaches for mid-walk, one-handed, in sunlight -- Start Tour, the
   nearest-stop Play, Play/Pause, Stop, Rewind and the Location toggle -- get
   more size, weight and contrast. The healthy confirmations (Offline "✓
   saved", the Autoplay chip) are untouched. The ember fill on those primary
   buttons moves to #A4531F -- the site's own ember hover shade -- for ~5.5:1
   white-text contrast; the base ember (#C1652E) is ~3.9:1, below AA for this
   text size. Still .ui-v13 only. */
.ui-v13 .btn--start-tour {
  min-height: 58px; font-size: 18px; font-weight: 700; letter-spacing: .01em;
  background: #A4531F; border-radius: 10px;
}
.ui-v13 .btn--start-tour:hover, .ui-v13 .btn--start-tour:active { background: #8E4619; }
.ui-v13 .v12-card__cta { min-height: 56px; font-size: 17px; font-weight: 700; background: #A4531F; }
.ui-v13 .v12-card__cta:hover, .ui-v13 .v12-card__cta:active { background: #8E4619; }
.ui-v13 .v13-transport__controls { gap: 22px; }
.ui-v13 .v13-transport__title { font-size: 14px; }
.ui-v13 .v13-ctl--play { width: 56px; height: 56px; font-size: 22px; background: #A4531F; }  /* hit area 68px */
.ui-v13 .v13-ctl--play:active { background: #8E4619; }
.ui-v13 .v13-ctl--sm { width: 46px; height: 46px; border-width: 2px; font-size: 17px; }       /* hit area 58px */

/* §1 · Location control. The chip row now WRAPS rather than scrolling
   sideways: at 390px the three TASK-022 chips already overflowed and pushed
   the last one off-screen, and the Location control must never be the one
   hidden. */
.ui-v13 .v13-sticky__chips { flex-wrap: wrap; row-gap: 6px; overflow-x: visible; }
.ui-v13 .v13-loc { gap: 8px; }
.ui-v13 .v13-loc .gps-pill__text { font-size: 13px; font-weight: 700; color: var(--ridge, #26413C); }
.ui-v13 .v13-loc--off .gps-pill__icon {
  width: 8px; height: 8px; border-radius: 50%; flex: none; font-size: 0;
  border: 2px solid var(--muted, #756F63); background: transparent;
}
.ui-v13 .v13-loc .gps-pill__btn {
  position: relative; display: inline-flex; align-items: center; min-height: 34px; margin: 0;
  padding: 0 14px; border-radius: 17px; border: 1.5px solid var(--ridge, #26413C);
  font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1; cursor: pointer;
}
.ui-v13 .v13-loc--on .gps-pill__btn { background: #fff; color: var(--ridge, #26413C); }
.ui-v13 .v13-loc--off .gps-pill__btn { background: var(--ridge, #26413C); color: #fff; }
.ui-v13 .v13-loc .gps-pill__btn::after { content: ''; position: absolute; inset: -8px -6px; }   /* hit area 50px */
.ui-v13 .v13-chip--gps .gps-pill__btn { font-size: 13px; padding: 6px 12px; }
.ui-v13 .v13-loc .gps-pill__btn:focus-visible { outline: 2px solid var(--ridge, #26413C); outline-offset: 2px; }

/* ── TASK-20260914-024 · Active Tour Mode ────────────────────────────────
   Once Start Tour is pressed, tour-ux.js puts .v13-active on <body> and the
   page collapses to the TourPlayer: the sticky region (tour name, status,
   chips, next stop, transport) + the locating / nearest-stop cards + the
   collapsible stop list + a quiet "View full tour page" button. Everything
   below is hidden -- NOT removed -- so every element keeps its bindings, and
   .v13-full (that button) shows it all again. Before Start Tour nothing here
   applies. Still .ui-v13 only. */
.ui-v13.v13-active:not(.v13-full) .site-header,
.ui-v13.v13-active:not(.v13-full) .v13-desc,
.ui-v13.v13-active:not(.v13-full) #chrome-ios-notice,
.ui-v13.v13-active:not(.v13-full) #location-primer,
.ui-v13.v13-active:not(.v13-full) #start-block,
.ui-v13.v13-active:not(.v13-full) #np-card,
.ui-v13.v13-active:not(.v13-full) .access-note,
.ui-v13.v13-active:not(.v13-full) .toggle-row,
.ui-v13.v13-active:not(.v13-full) #wakelock-indicator,
.ui-v13.v13-active:not(.v13-full):not(.v13-show-map) .tour-map-card,
.ui-v13.v13-active:not(.v13-full) .share-row--below,
.ui-v13.v13-active:not(.v13-full) .how-it-works,
.ui-v13.v13-active:not(.v13-full) .back-link,
.ui-v13.v13-active:not(.v13-full) .site-footer { display: none !important; }
.ui-v13.v13-active:not(.v13-full) main > .section { padding-top: 4px; padding-bottom: 24px; }

/* A sticky-region line that exists only in Active Tour Mode. */
.ui-v13:not(.v13-active) .v13-sticky__status { display: none !important; }

/* ── TASK-20260917-042 · "Screen may sleep" ──────────────────────────────
   #wakelock-indicator carries two truths, never a claim: the existing
   "Screen staying awake" (only while a sentinel is really held) and this
   warning, shown only when an ACTIVE tour wanted a lock and the platform
   refused it or has no API. The rule above hides the indicator in Active
   Tour Mode by design (the 1.1 redesign's quiet default) -- the warning is
   the one state that must survive that, so it overrides with one extra
   class of specificity rather than by touching the list above.
   On a 1.4 page the sticky status line carries the same sentence ("· Screen
   may sleep", tour-ux.js), so the override is scoped away from .ui-v14 rather
   than printing it twice. */
.wakelock-indicator--warn { color: var(--ember, #C1652E); }
.ui-v13.v13-active:not(.v13-full):not(.ui-v14) #wakelock-indicator.wakelock-indicator--warn { display: block !important; }

/* ── TASK-20260914-027 · Active Tour Mode Simplified 1.1 ─────────────────
   Source of truth: AI-HANDOFF/DESIGN-REFERENCE/active-tour-mode-simplified-1.1.html.
   Once Start Tour is pressed the page stops being a brochure and becomes a
   player. Top to bottom:
     1 identity row   "Cades Cove Loop · 22 stops"                        [⋯]
     2 status line    ● GPS On · ▶ Autoplay On · Save offline  (amber banner when GPS fails)
     3 player card    Next / Playing / Paused heading + the existing transport
     4 stop summary   "Stops · 4/22"                                View all ›
   Map, Share and "View full tour page" live behind ⋯ in a bottom sheet. 1-3
   are the sticky region, so the card stays in reach while the list scrolls.
   Colours are the site's own tokens rather than the mockup's neutral hexes
   (task §Colours). Text keeps the TASK-021 12px floor and every control a
   >=48px hit area, as all v1.3 rules have. Superseded, so removed here:
   TASK-024's sticky tour-name / next-line / full-toggle styles, TASK-025's
   hero tightening and Map/Share row, TASK-026's tour-name rule (that
   element is gone). Before Start Tour none of this applies. */

/* Pre-start: the new pieces are not drawn. */
.ui-v13:not(.v13-active) .v13-idrow,
.ui-v13:not(.v13-active) .v13-card { display: none !important; }

/* Active mode hides the brochure: hero (breadcrumb, launch badge, park,
   facts, tags) and the S1/S2 locating / nearest-stop cards -- the player
   card's "Next: …" line and Play now carry that job. "View full tour page"
   shows them again (TASK-024's .v13-full). */
.ui-v13.v13-active:not(.v13-full) .v13-hero,
.ui-v13.v13-active:not(.v13-full) #locating-card,
.ui-v13.v13-active:not(.v13-full) #nearest-card { display: none !important; }

/* The sticky region takes the page's own ground: no lifecycle tint (only the
   GPS banner goes amber). The lifecycle label stays for screen readers. */
.ui-v13.v13-active .v13-sticky { background: var(--cream, #F6F2E9); box-shadow: none; }
.ui-v13.v13-active .v13-sticky__label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* §1 · Identity row */
.ui-v13 .v13-idrow {
  max-width: 720px; margin: 0 auto; padding: 10px 16px 6px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ui-v13 .v13-idrow__title {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-heading, 'Playfair Display', Georgia, serif);
  font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--ridge, #26413C);
}
.ui-v13 .v13-idrow__more {
  position: relative; flex: none; width: 26px; height: 26px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border, #DDD4C4); background: transparent; color: var(--muted, #756F63);
  font-family: inherit; font-size: 13px; line-height: 1; cursor: pointer; touch-action: manipulation;
}
.ui-v13 .v13-idrow__more::after { content: ''; position: absolute; inset: -11px; }   /* hit area 48px */
.ui-v13 .v13-idrow__more[aria-expanded="true"] {
  background: var(--ridge, #26413C); border-color: var(--ridge, #26413C); color: var(--cream, #F6F2E9);
}

/* §2 · One quiet status line. The three items are the same elements as
   before (#gps-state with #gps-enable-btn, #autoplay-tag, #save-offline-btn);
   tour-ux.js gives them these classes once the tour is active. */
.ui-v13.v13-active .v13-sticky__chips { padding: 4px 16px 10px; gap: 6px; row-gap: 4px; }
.ui-v13 .v13-st {
  position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 24px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
  box-shadow: none; animation: none; white-space: nowrap;
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--muted, #756F63);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.ui-v13 button.v13-st { cursor: pointer; }
.ui-v13 button.v13-st::after { content: ''; position: absolute; inset: -12px -3px; }   /* hit area 48px tall */
.ui-v13 .v13-st + .v13-st::before { content: '·'; color: var(--border, #DDD4C4); font-weight: 400; }
.ui-v13 .v13-st--gps .gps-pill__icon {
  width: 6px; height: 6px; flex: none; border-radius: 50%; font-size: 0; background: var(--live, #2BA84A);
}
.ui-v13 .v13-st--off .gps-pill__icon {
  width: 7px; height: 7px; background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted, #756F63);
}
.ui-v13 .v13-st--searching .gps-pill__icon { background: var(--muted, #756F63); animation: v13-pulse 1.3s ease-in-out infinite; }
.ui-v13 .v13-st .gps-pill__text:empty { display: none; }
.ui-v13 .v13-st .gps-pill__btn {
  position: relative; margin: 0; padding: 0; min-height: 0; border: 0; border-radius: 0;
  background: none; font: inherit; color: inherit; white-space: nowrap; cursor: pointer;
}
.ui-v13 .v13-st .gps-pill__btn::after { content: ''; position: absolute; inset: -12px -8px; }   /* hit area 48px tall */
.ui-v13 .v13-st--save { color: #9A4E1F; font-weight: 700; }     /* the site's ember text shade (AA on cream) */
.ui-v13 .v13-st--saved { color: #1E7A38; font-weight: 600; }    /* the v1.3 "active" green */
.ui-v13 button.v13-st:focus-visible,
.ui-v13 .v13-st .gps-pill__btn:focus-visible { outline: 2px solid var(--ridge, #26413C); outline-offset: 2px; }

/* §2 · GPS needs attention: the line becomes one amber banner -- the site's
   existing amber notice set (.seasonal-note). The banner's text IS
   #gps-enable-btn, stretched over the whole banner, so tapping anywhere on it
   re-enables location through TASK-023's handler. */
.ui-v13 .v13-sticky__chips--alert > :not(#gps-state) { display: none !important; }
.ui-v13 .v13-alert {
  position: relative; display: flex; align-items: flex-start; gap: 7px; flex: 1 1 100%;
  min-height: 0; margin: 2px 0 0; padding: 9px 11px; border-radius: 8px; animation: none;
  background: #FDF3E3; border: 1px solid #F0DBAE; color: #7A5215;
}
.ui-v13 .v13-alert .gps-pill__icon {
  flex: none; width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; font-size: 0;
  background: #7A5215; animation: v13-pulse 1.3s ease-in-out infinite;
}
.ui-v13 .v13-alert .gps-pill__text:empty { display: none; }
.ui-v13 .v13-alert .gps-pill__btn {
  position: static; flex: 1; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: none; color: inherit; text-align: left; white-space: normal; cursor: pointer;
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 12px; font-weight: 600; line-height: 1.4;
}
.ui-v13 .v13-alert .gps-pill__btn::after { content: ''; position: absolute; inset: 0; border-radius: 8px; }
.ui-v13 .v13-alert .gps-pill__btn:focus-visible { outline: none; }
.ui-v13 .v13-alert .gps-pill__btn:focus-visible::after { outline: 2px solid var(--ridge, #26413C); outline-offset: 2px; }
@keyframes v13-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) {
  .ui-v13 .v13-alert .gps-pill__icon, .ui-v13 .v13-st--searching .gps-pill__icon { animation: none; }
}

/* §3 · Player card */
.ui-v13 .v13-card {
  margin: 6px 16px 12px; padding: 16px;
  background: #fff; border: 1px solid var(--border, #DDD4C4); border-radius: 12px;
}
@media (min-width: 720px) { .ui-v13 .v13-card { max-width: 688px; margin-left: auto; margin-right: auto; } }
.ui-v13 .v13-card__head {
  font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--charcoal, #221F1A); text-align: center;
}
.ui-v13 .v13-card__head:empty { display: none; }
.ui-v13 .v13-card .v13-transport { max-width: none; margin: 0; padding: 0; border-top: 0; gap: 0; }
.ui-v13 .v13-card .v13-transport__title,
.ui-v13 .v13-card .v13-transport__next { display: none; }
.ui-v13 .v13-card .v13-progress { order: 1; }
.ui-v13 .v13-card .v13-transport__head { order: 2; justify-content: flex-start; }
.ui-v13 .v13-card .v13-sticky__status { order: 3; }
.ui-v13 .v13-card .v13-transport__controls { order: 4; gap: 16px; margin-top: 12px; }
/* Idle ("Next: …"): Play + Stop only. .v13-card.v13-card--idle out-ranks the
   .v13-card rules that set these elements' display, wherever they sit. */
.ui-v13 .v13-card.v13-card--idle .v13-progress,
.ui-v13 .v13-card.v13-card--idle .v13-transport__head,
.ui-v13 .v13-card.v13-card--idle #btn-rewind { display: none; }
.ui-v13 .v13-card.v13-card--idle .v13-transport__controls { margin-top: 16px; }
/* #player-status: routine lines are quieted (the heading already says them);
   anything the visitor must act on shows here, above the controls. */
.ui-v13 .v13-card .v13-sticky__note { max-width: none; margin: 8px 0 0; padding: 0; text-align: center; }
.ui-v13 .v13-note--routine { display: none !important; }
/* The design's thin filled bar. Still the player's seekable range input;
   tour-ux.js paints the fill through --v13-pct (WebKit has no progress
   pseudo-element). 4px drawn, 16px tall to tap. */
.ui-v13 .v13-card .v13-progress {
  -webkit-appearance: none; appearance: none; display: block;
  width: 100%; height: 16px; margin: 4px 0 0; padding: 0; border-radius: 0; cursor: pointer;
  background: linear-gradient(to right, var(--ember, #C1652E) var(--v13-pct, 0%), var(--border, #DDD4C4) var(--v13-pct, 0%)) center / 100% 4px no-repeat;
}
.ui-v13 .v13-card.v13-card--paused .v13-progress {
  background-image: linear-gradient(to right, rgba(117, 111, 99, .45) var(--v13-pct, 0%), var(--border, #DDD4C4) var(--v13-pct, 0%));
}
.ui-v13 .v13-card .v13-progress::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 12px; height: 16px; background: transparent; border: 0;
}
.ui-v13 .v13-card .v13-progress::-moz-range-thumb { width: 12px; height: 16px; background: transparent; border: 0; }
.ui-v13 .v13-card .v13-progress::-moz-range-track,
.ui-v13 .v13-card .v13-progress::-moz-range-progress { background: transparent; }
.ui-v13 .v13-card .v13-ctl--play {
  width: 58px; height: 58px; font-size: 20px; border: 0; color: #fff;
  background: #A4531F; box-shadow: 0 4px 10px rgba(193, 101, 46, .4);   /* TASK-023's AA ember */
}
.ui-v13 .v13-card .v13-ctl--play:active { background: #8E4619; }
.ui-v13 .v13-card .v13-ctl--sm {
  width: 42px; height: 42px; font-size: 13px; font-weight: 700;
  background: #fff; border: 1.5px solid var(--border, #DDD4C4); color: var(--ridge, #26413C);
}
.ui-v13 .v13-card .v13-ctl__sub { font-size: 12px; margin-left: 0; }
/* While the stop list is open the card compacts, as the design's state 6. */
.ui-v13.v13-list-open .v13-card { padding: 12px 14px; }
.ui-v13.v13-list-open .v13-card .v13-transport__controls { gap: 14px; margin-top: 10px; }
.ui-v13.v13-list-open .v13-card .v13-ctl--play { width: 44px; height: 44px; font-size: 16px; box-shadow: 0 3px 8px rgba(193, 101, 46, .4); }
.ui-v13.v13-list-open .v13-card .v13-ctl--sm { width: 34px; height: 34px; font-size: 12px; }
.ui-v13.v13-list-open .v13-card .v13-ctl--sm::after { inset: -7px; }   /* hit area 48px */

/* §4 · ⋯ More bottom sheet */
.ui-v13 .v13-more { position: fixed; inset: 0; z-index: 200; }
.ui-v13 .v13-more__scrim { position: absolute; inset: 0; background: rgba(20, 26, 20, .35); }
.ui-v13 .v13-more__sheet {
  position: absolute; left: 12px; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  max-width: 480px; margin: 0 auto; padding: 14px 16px;
  background: #fff; border: 1px solid var(--border, #DDD4C4); border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
}
.ui-v13 .v13-more__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ui-v13 .v13-more__title { font-size: 13px; font-weight: 700; color: var(--ridge, #26413C); }
.ui-v13 .v13-more__close {
  position: relative; padding: 0 2px; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 13px; line-height: 1; color: var(--muted, #756F63);
}
.ui-v13 .v13-more__close::after { content: ''; position: absolute; inset: -16px -14px; }   /* hit area 48px */
.ui-v13 .v13-more__row {
  display: flex; align-items: center; width: 100%; min-height: 48px; margin: 0; padding: 10px 2px;
  border: 0; border-bottom: 1px solid var(--border, #DDD4C4); background: none; cursor: pointer; text-align: left;
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 13px; font-weight: 500; color: var(--charcoal, #221F1A);
}
.ui-v13 .v13-more__row:last-child { border-bottom: 0; }
.ui-v13 .v13-more__row:focus-visible, .ui-v13 .v13-more__close:focus-visible,
.ui-v13 .v13-idrow__more:focus-visible { outline: 2px solid var(--ridge, #26413C); outline-offset: 2px; }

/* §5 · Stop list: a one-line summary until "View all ›". */
.ui-v13.v13-active .v12-stops__heading {
  margin: 2px 0 4px; font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 13px; font-weight: 600; color: var(--charcoal, #221F1A);
}
.ui-v13.v13-active .v13-stops-toggle { color: #9A4E1F; font-size: 13px; font-weight: 700; text-decoration: none; }
.ui-v13.v13-list-open .v12-stops__heading { padding-bottom: 4px; border-bottom: 1px solid var(--border, #DDD4C4); }
.ui-v13.v13-active .stop-item { padding: 9px 0; gap: 10px; }
.ui-v13.v13-active .stop-item__number {
  width: 22px; height: 22px; flex: none; border-radius: 50%; justify-content: center;
  background: var(--ridge, #26413C); color: var(--cream, #F6F2E9); font-size: 12px; line-height: 1;
}
.ui-v13.v13-active .stop-item--playing .stop-item__number { background: var(--ember, #C1652E); }
.ui-v13.v13-active .v13-row--played .stop-item__number { color: var(--cream, #F6F2E9); }
.ui-v13.v13-active .stop-item__title { font-size: 13px; line-height: 1.3; }
.ui-v13.v13-active .stop-item__action { padding: 0 2px 0 8px; background: none; border: 0; }
.ui-v13.v13-active .stop-item__action-icon { display: none; }
.ui-v13.v13-active .stop-item__action .stop-item__action-label { font-size: 12px; font-weight: 700; color: var(--muted, #756F63); }
.ui-v13.v13-active .stop-item--playing .stop-item__action .stop-item__action-label { color: #9A4E1F; }

/* ── TASK-20260915-033 · "← Exit tour" in the identity row ────────────────
   Beside ⋯, same 26px height and the same quiet outline, so the approved
   identity line is unchanged apart from the added control. 12px gap keeps
   the two 48px hit areas from overlapping. */
.ui-v13 .v13-idrow__actions { display: flex; align-items: center; gap: 12px; flex: none; }
.ui-v13 .v13-idrow__exit {
  position: relative; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px;
  border-radius: 13px; border: 1px solid var(--border, #DDD4C4); background: transparent; cursor: pointer;
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif); font-size: 12px; font-weight: 600;
  line-height: 1; color: var(--ridge, #26413C); white-space: nowrap; touch-action: manipulation;
}
.ui-v13 .v13-idrow__exit::after { content: ''; position: absolute; inset: -11px 0; }   /* hit area 48px tall */
.ui-v13 .v13-idrow__exit:focus-visible { outline: 2px solid var(--ridge, #26413C); outline-offset: 2px; }

/* ── Active Tour Redesign 3.6 (player_ui 1.4, PLAN-20260917) ──────────────
   Source of truth: AI-HANDOFF/DESIGN-REFERENCE/active-tour-redesign-3.6.html.
   A presentation layer over 1.3: body carries ui-v12 ui-v13 ui-v14, so every
   rule here is scoped .ui-v14 and no 1.3 page can match. Active Tour Mode is
   one screen with no scrolling: status banner, then exactly ONE of Next Stop /
   Now Playing (also Paused) / Needs Attention, then Map · Stops · Settings ·
   End tour. Palette is the design's (brand unchanged); white-on-ember uses
   TASK-023's AA shade #A4531F. 12px text floor, >=48px hit areas, as 1.3. */
.ui-v14 { --v14-green: #1e3a33; --v14-cream: #f4efe4; --v14-ember: #A4531F; --v14-card: #fffdf8; --v14-line: #e3dbc8; --v14-muted: #6b6355; }

/* Pre-start: the 1.3 sticky status strip is replaced by the readiness rows. */
.ui-v14:not(.v13-active) #tour-status { display: none !important; }
.ui-v14 .v14-notstarted {
  display: inline-flex; align-items: center; gap: 7px; margin: 6px 0 2px;
  font-size: 12px; font-weight: 700; color: #6b6355; background: #e6e0d2; border-radius: 20px; padding: 5px 12px;
}
.ui-v14 .v14-notstarted__dot { width: 8px; height: 8px; border-radius: 50%; background: #a49c88; }
.ui-v14 .v14-ready { margin: 10px 0 14px; }
.ui-v14 .v14-ready__row {
  display: flex; align-items: center; gap: 11px; width: 100%; min-height: 48px; margin: 0; padding: 10px 2px;
  border: 0; border-bottom: 1px solid #ece4d1; background: none; text-align: left; cursor: default;
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif); font-size: 15px; color: #22201a;
}
.ui-v14 button.v14-ready__row { cursor: pointer; }
.ui-v14 .v14-ready__row:last-child { border-bottom: 0; }
.ui-v14 .v14-ready__icon {
  width: 24px; height: 24px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; background: #dcead1; color: #3f6b2e;
}
.ui-v14 .v14-ready__row--warn .v14-ready__icon { background: #efe4c8; color: #8c6b1f; }
.ui-v14 .v14-ready__label { flex: 1; }
.ui-v14 .v14-ready__badge { font-size: 12px; font-weight: 700; border-radius: 10px; padding: 4px 10px; background: #ece4d1; color: #6b6355; white-space: nowrap; }
.ui-v14 .v14-ready__row--good .v14-ready__badge { background: #dcead1; color: #3f6b2e; }
.ui-v14 .btn--start-tour { width: 100%; }
.ui-v14 .v14-startlinks { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 10px; }
.ui-v14 .v14-textlink {
  position: relative; min-height: 32px; padding: 0 4px; border: 0; background: none; cursor: pointer;
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif); font-size: 13px; font-weight: 600;
  color: var(--v14-green); text-decoration: underline;
}
.ui-v14 .v14-textlink::after { content: ''; position: absolute; inset: -8px -4px; }
.ui-v14 .v14-textlink--muted { color: var(--v14-muted); text-decoration: none; }
.ui-v14 .v14-dot-sep { color: #cfc4a8; }

/* Active Tour Mode: the 1.3 identity row, lifecycle label and status chips
   give way to the banner and the nav row (their elements stay in the DOM,
   driven through the proxies). No sticky: the screen does not scroll. */
.ui-v14.v13-active .v13-sticky { position: static; background: var(--v14-cream); border-bottom: 0; box-shadow: none; padding-bottom: 8px; }
.ui-v14.v13-active .v13-idrow,
.ui-v14.v13-active .v13-sticky__chips,
.ui-v14.v13-active #gps-status { display: none !important; }
.ui-v14.v13-active #save-offline-status { max-width: 560px; margin: 8px auto 0; padding: 0 16px; text-align: center; }
.ui-v14.v13-active { background: var(--v14-cream); }
.ui-v14.v13-active main > .section { padding-top: 0; }

.ui-v14 .v14-banner {
  max-width: 560px; margin: calc(14px + env(safe-area-inset-top, 0px)) 16px 0; padding: 18px 16px;
  border-radius: 18px; background: var(--v14-green); text-align: center;
}
@media (min-width: 592px) { .ui-v14 .v14-banner { margin-left: auto; margin-right: auto; } }
.ui-v14 .v14-banner__top {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 25px; font-weight: 800; line-height: 1.15; color: #fff; letter-spacing: -.01em;
}
.ui-v14 .v14-banner__dot { width: 13px; height: 13px; flex: none; border-radius: 50%; background: #8fd48a; }
.ui-v14 .v14-banner__sub { margin-top: 7px; font-size: 14px; font-weight: 600; color: rgba(244, 239, 228, .82); }
.ui-v14 .v14-banner__sub:empty { display: none; }
.ui-v14 .v14-banner--attention { background: #7a4a12; }
.ui-v14 .v14-banner--attention .v14-banner__top { font-size: 23px; color: #fff9ec; }
.ui-v14 .v14-banner--attention .v14-banner__dot { background: #fff9ec; }

.ui-v14 .v14-next, .ui-v14 .v14-attn, .ui-v14 .v14-upnext, .ui-v14 .v14-nav { max-width: 560px; }
@media (min-width: 592px) {
  .ui-v14 .v14-next, .ui-v14 .v14-attn, .ui-v14 .v14-upnext, .ui-v14 .v14-nav { margin-left: auto !important; margin-right: auto !important; }
}
.ui-v14 .v14-next {
  margin: 16px 16px 0; padding: 22px 18px; text-align: center;
  background: var(--v14-card); border: 1px solid var(--v14-line); border-radius: 16px;
}
.ui-v14 .v14-label { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; color: #756F63; }
.ui-v14 .v14-next__title {
  margin-top: 10px; font-family: Georgia, 'Times New Roman', serif; font-size: 25px; font-weight: 700; line-height: 1.2; color: var(--v14-green);
}
.ui-v14 .v14-next__dist { margin-top: 6px; font-size: 17px; font-weight: 700; color: #22201a; }
.ui-v14 .v14-next__dist:empty { display: none; }
.ui-v14 .v14-next__auto {
  margin-top: 16px; padding: 12px; border-radius: 10px; background: #eaf1e4;
  font-size: 15px; font-weight: 700; line-height: 1.4; color: #3f6b2e;
}
.ui-v14 .v14-next__note { margin-top: 10px; font-size: 14px; line-height: 1.4; color: #7a4a12; font-weight: 600; }
.ui-v14 .v14-next__note:empty { display: none; }
.ui-v14 .v14-next__replay { margin-top: 12px; }
.ui-v14 .v14-btn, .ui-v14 .v14-attn__btn {
  display: block; width: 100%; min-height: 54px; margin-top: 16px; padding: 14px; border: 0; border-radius: 11px; cursor: pointer;
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif); font-size: 16.5px; font-weight: 700; color: #fff; background: var(--v14-ember);
}
.ui-v14 .v14-btn:active { background: #8E4619; }

.ui-v14 .v14-attn { margin: 0 16px; padding: 30px 10px 0; text-align: center; }
.ui-v14 .v14-attn__icon {
  width: 48px; height: 48px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #f4e3c5; border: 2px solid #dcb877; color: #7a4a12; font-size: 22px; font-weight: 700;
}
.ui-v14 .v14-attn__explain { margin: 18px 0 0; font-size: 16px; font-weight: 500; line-height: 1.55; color: #4a3116; }
.ui-v14 .v14-attn__btn { margin-top: 24px; color: #fff9ec; background: #7a4a12; }
.ui-v14 .v14-attn__btn:active { background: #5e380c; }
.ui-v14.v14-attention.v13-active, .ui-v14.v14-attention.v13-active .v13-sticky { background: #fdf6e8; }

/* Now Playing / Paused: the 1.3 player card, restyled. */
.ui-v14.v13-active .v13-card { margin: 16px 16px 0; padding: 18px 18px 20px; background: var(--v14-card); border: 1px solid var(--v14-line); border-radius: 16px; }
@media (min-width: 592px) { .ui-v14.v13-active .v13-card { max-width: 560px; margin-left: auto; margin-right: auto; } }
.ui-v14 .v14-card__label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #756F63; }
.ui-v14 .v14-card__title {
  display: block; margin-top: 6px; font-family: Georgia, 'Times New Roman', serif; font-size: 21px; font-weight: 700; line-height: 1.2; color: var(--v14-green);
}
.ui-v14.v13-active .v13-card .v13-transport__head { justify-content: center; }
/* .v13-active out-ranks 1.3's .v13-list-open compaction (the 3.6 card never compacts). */
.ui-v14.v13-active .v13-card .v13-transport__controls { gap: 20px; margin-top: 14px; }
.ui-v14.v13-active .v13-card .v13-ctl--play { width: 72px; height: 72px; font-size: 24px; box-shadow: 0 4px 14px rgba(193, 98, 47, .4); }
.ui-v14.v13-active .v13-card .v13-ctl--sm { width: 52px; height: 52px; font-size: 15px; background: var(--v14-card); border: 1.5px solid #cfc4a8; color: var(--v14-green); }
.ui-v14.v13-active .v13-card .v13-ctl--sm::after { inset: -2px; }
.ui-v14 .v14-upnext { margin: 14px 16px 0; text-align: center; font-size: 13px; color: #756F63; }
.ui-v14 .v14-upnext:empty { display: none; }

.ui-v14 .v14-nav { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px; margin: 18px 16px 0; padding: 0 4px; }
/* TASK-20260920-053: with Home added, the five items measured 368 px against
   358 px of usable width at 390 px, so 'End tour' alone wrapped to a second
   row -- which reads as a primary action and costs 44 px of height. Tightening
   only the column gap and the link padding on narrow phones keeps one row;
   every target stays >= 40 px tall (min-height is untouched). */
@media (max-width: 430px) {
  .ui-v14 .v14-nav { gap: 4px 4px; }
  .ui-v14 .v14-nav__link { padding: 0 4px; }
}
/* TASK-20260920-053: Home is the only <a> in this row, so the site's global
   link styling (underline + link colour) made it look unlike its siblings
   despite carrying the same class. This makes the anchor match the buttons;
   it is not a restyle of the nav. */
.ui-v14 a.v14-nav__link { text-decoration: none; color: var(--v14-muted); }
.ui-v14 .v14-nav__link {
  position: relative; min-height: 40px; padding: 0 6px; border: 0; background: none; cursor: pointer;
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif); font-size: 14px; font-weight: 600; color: var(--v14-muted);
}
.ui-v14 .v14-nav__link::after { content: ''; position: absolute; inset: -4px 0; }
.ui-v14 .v14-nav__link[aria-expanded="true"] { color: var(--v14-green); text-decoration: underline; }
.ui-v14 .v14-nav__link--end { color: #a05a3a; }
.ui-v14 .v14-nav__link:focus-visible, .ui-v14 .v14-textlink:focus-visible, .ui-v14 .v14-ready__row:focus-visible,
.ui-v14 .v14-btn:focus-visible, .ui-v14 .v14-attn__btn:focus-visible { outline: 2px solid var(--v14-green); outline-offset: 2px; }

/* Active Tour Mode hides the stop list until "Stops"; then it is the design's
   "Current & Next Stops" window (tour-ux.js marks the rows). */
.ui-v14.v13-active:not(.v13-full):not(.v14-stops) .stop-list,
.ui-v14.v13-active:not(.v13-full) .v12-stops__heading #stops-toggle { display: none !important; }
.ui-v14.v13-active.v14-stops .v14-next,
.ui-v14.v13-active.v14-stops .v14-attn,
.ui-v14.v13-active.v14-stops .v13-card,
.ui-v14.v13-active.v14-stops .v14-upnext { display: none !important; }
.ui-v14.v13-active .v12-stops__heading { margin: 8px 0 4px; font-family: Georgia, 'Times New Roman', serif; font-size: 15px; font-weight: 700; color: var(--v14-green); border-bottom: 0; }
.ui-v14.v13-active .stop-item { align-items: center; gap: 13px; padding: 13px 4px; border-bottom: 1px solid #ece4d1; }
.ui-v14.v13-active .stop-item.v14-row--next { background: #f7f1e2; }
.ui-v14.v13-active .stop-item__number {
  width: 30px; height: 30px; flex: none; border-radius: 50%; justify-content: center; font-size: 13px; font-weight: 700;
  background: #e6ded0; color: #756F63;
}
.ui-v14.v13-active .v14-row--done .stop-item__number { background: #d8e0cf; color: #4d6b3f; }
.ui-v14.v13-active .v14-row--playing .stop-item__number { background: var(--v14-ember); color: #fff; }
.ui-v14.v13-active .v14-row--next .stop-item__number { background: var(--v14-green); color: var(--v14-cream); }
.ui-v14.v13-active .stop-item__title { font-size: 15px; font-weight: 600; color: #22201a; }
.ui-v14.v13-active .v14-row--done .stop-item__title { color: #756F63; }
.ui-v14 .v14-row__sub { display: none; }
.ui-v14.v13-active .v14-row__sub { display: block; margin-top: 2px; font-size: 13px; color: #756F63; }
.ui-v14.v13-active .v14-row--playing .v14-row__sub { color: var(--v14-ember); font-weight: 700; }
.ui-v14.v13-active .v13-row--played { opacity: 1; }
.ui-v14.v13-active .stop-item__action:not(.stop-item__action--locked) {
  width: 44px; height: 44px; flex: none; padding: 0; border-radius: 50%; justify-content: center;
  border: 1.5px solid #cfc4a8; background: var(--v14-card); color: var(--v14-green);
}
.ui-v14.v13-active .stop-item__action:not(.stop-item__action--locked) .stop-item__action-icon { display: inline; font-size: 13px; }
.ui-v14.v13-active .stop-item__action:not(.stop-item__action--locked) .stop-item__action-label { display: none; }
.ui-v14.v13-active .v14-row--playing .stop-item__action:not(.stop-item__action--locked) { visibility: hidden; }
.ui-v14.v13-active .v14-row--hidden { display: none !important; }
.ui-v14 .v14-viewall { display: none; }
.ui-v14.v13-active.v14-stops .v14-viewall { display: block; padding: 14px 0 4px; text-align: center; }
.ui-v14 .v14-set { justify-content: space-between; gap: 12px; }
.ui-v14 .v14-set__val { font-weight: 700; color: var(--v14-green); }

/* ═══ ATLAS-PLAYER-v1.3 · player_ui "1.5" (body .ui-v15) ══════════════════
   TASK-20260922-056. The approved Atlas Core Active Tour Player v1.3, ported
   from AI-HANDOFF/DESIGN-REFERENCE/ATLAS-PLAYER-v1.3/state-*.markup.html --
   every colour, radius, size and spacing value below is that markup's own
   inline value, not an eyeball of the PNGs.

   A 1.5 page carries ui-v12 ui-v13 ui-v14 ui-v15, so it runs every proven 1.4
   engine path and these rules re-lay-out what the design changes. Every rule
   is scoped .ui-v15 (most of them .ui-v15.v13-active as well): no 1.2/1.3/1.4
   page can match any selector here, and a 1.5 page BEFORE Start Tour is
   pixel-identical to a 1.4 one. */
.ui-v15 {
  --v15-bg: #F1EAD9;          /* frame background            rgb(241,234,217) */
  --v15-ink: #1E1B16;         /* body text                   rgb(30,27,22)    */
  --v15-green: #1E3A2F;       /* banner + headings           rgb(30,58,47)    */
  --v15-dot: #7CC49A;         /* "Tour Active" dot           rgb(124,196,154) */
  --v15-card: #FBF8F0;        /* Next Stop card + small ctls rgb(251,248,240) */
  --v15-muted: #6E6656;       /* eyebrows, helper, times     rgb(110,102,86)  */
  --v15-ember: #B5541F;       /* Play Now / Pause / bar fill rgb(181,84,31)   */
  --v15-note-bg: #E7EFE2;     /* autoplay note row           rgb(231,239,226) */
  --v15-note-ink: #2F5744;    /* autoplay note text          rgb(47,87,68)    */
  --v15-end: #9C4419;         /* End Tour pill               rgb(156,68,25)   */
  --v15-hair: rgba(30, 58, 47, .15);
}

/* Self-hosted so the active screen renders correctly with no connection --
   the design's fonts must not depend on the Google Fonts CDN at runtime
   (§1). Both files are the latin-subset VARIABLE font, so one file covers
   every weight the design uses; build-sw.py precaches both. */
@font-face {
  font-family: 'Lora v15'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/lora-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Work Sans v15'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/worksans-var.woff2') format('woff2');
}

/* ── the frame ── */
.ui-v15.v13-active, .ui-v15.v13-active .v13-sticky { background: var(--v15-bg); }
.ui-v15.v13-active #tour-status {
  display: flex; flex-direction: column; gap: 16px;
  box-sizing: border-box; width: 100%; max-width: 430px; margin: 0 auto;
  padding: 20px 20px 22px;
  min-height: calc(100dvh - var(--v15-chrome, 0px));
  font-family: 'Work Sans v15', 'Work Sans', system-ui, sans-serif; color: var(--v15-ink);
}
.ui-v15.v13-active #save-offline-status:empty { display: none; }
.ui-v15.v13-active #save-offline-status { margin: 0; padding: 0; }
.ui-v15 .v15-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ui-v15 .v15-eyebrow, .ui-v15.v13-active .v14-label {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--v15-muted); text-transform: uppercase;
}

/* The 1.4 rules give these regions `margin-left/right: auto !important` above
   592 px. In a column flex container an auto cross-axis margin turns off
   stretch, so the nav collapsed to its content width (186 px of a 390 px
   frame). The 1.5 frame IS the column, so every region stretches to it. */
.ui-v15.v13-active .v14-banner,
.ui-v15.v13-active .v14-next,
.ui-v15.v13-active .v14-attn,
.ui-v15.v13-active .v13-card,
.ui-v15.v13-active .v14-nav { margin-left: 0 !important; margin-right: 0 !important; align-self: stretch; }
/* Waiting has no "Now Playing" head -- the 1.3 card head still carries its own
   "Next: Stop N · …" line, which the Next Stop card above already says. */
.ui-v15.v13-active:not(.v15-live) .v13-card__head { display: none !important; }

/* ── 1 · status banner ── */
.ui-v15.v13-active .v14-banner {
  margin: 0; padding: 18px 22px; border-radius: 20px; background: var(--v15-green);
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  flex-shrink: 0; max-width: none; text-align: left;
}
.ui-v15.v13-active .v14-banner__top {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Lora v15', Lora, Georgia, serif; font-weight: 600; font-size: 23px; color: #fff;
}
.ui-v15.v13-active .v14-banner__dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--v15-dot); }
.ui-v15.v13-active .v14-banner__sub {
  margin: 0; padding-left: 20px; font-size: 14px; font-weight: 400; color: rgba(255, 255, 255, .78);
}
.ui-v15.v13-active .v14-banner--attention { background: #7A4A12; }
.ui-v15.v13-active .v14-banner--attention .v14-banner__dot { background: #FFF9EC; }

/* ── 2 · Next Stop card ── */
/* The design's Next Stop card is LEFT-aligned; the 1.3 sticky region it lives
   in is centred, so say so explicitly rather than inheriting. */
.ui-v15.v13-active .v14-next {
  margin: 0; padding: 22px; border-radius: 20px; background: var(--v15-card);
  border: 0.5px solid var(--v15-hair); display: flex; flex-direction: column; align-items: stretch;
  gap: 10px; flex-shrink: 0; max-width: none; text-align: left;
}
.ui-v15.v13-active .v14-next__title, .ui-v15.v13-active .v14-next__dist,
.ui-v15.v13-active .v14-next .v15-eyebrow, .ui-v15 .v15-note__text { text-align: left; }
.ui-v15.v13-active .v14-next__title {
  margin: 0; font-family: 'Lora v15', Lora, Georgia, serif; font-weight: 600; font-size: 23px; line-height: 1.28; color: var(--v15-green);
}
.ui-v15.v13-active .v14-next__dist { margin: 0; font-size: 17px; font-weight: 600; color: var(--v15-ink); }
.ui-v15 .v15-note {
  display: flex; align-items: center; gap: 10px; margin-top: 2px;
  background: var(--v15-note-bg); border-radius: 12px; padding: 10px 14px;
}
/* The design's note is one line. At 390 px the longest of our five notes
   needed 252 px against 250 px of text box, so the row's side padding gives
   back 4 px below 400 px wide -- measured, not guessed (TASK-056). */
@media (max-width: 400px) { .ui-v15 .v15-note { padding-left: 12px; padding-right: 12px; } }
.ui-v15 .v15-note__icon { flex-shrink: 0; color: var(--v15-note-ink); }
.ui-v15.v13-active .v14-next__auto {
  margin: 0; padding: 0; background: none; font-size: 13px; font-weight: 500; color: var(--v15-note-ink);
}
.ui-v15.v13-active .v14-next__note { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.4; color: #7A4A12; }
.ui-v15.v13-active .v14-next__note:empty { display: none; }
.ui-v15 .v15-note:has(.v14-next__auto:empty) { display: none; }

/* ── 3 · playback zone ── */
.ui-v15.v13-active .v13-card {
  margin: 0; padding: 0; background: none; border: 0; border-radius: 0; max-width: none;
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.ui-v15.v13-active .v13-card__head { text-align: center; }
.ui-v15 .v14-card__label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--v15-muted); }
.ui-v15 .v14-card__title {
  display: block; margin-top: 8px; font-family: 'Lora v15', Lora, Georgia, serif;
  font-weight: 600; font-size: 18px; line-height: 1.25; color: var(--v15-green);
}
.ui-v15 .v15-part { font-size: 12.5px; color: var(--v15-muted); margin-top: -8px; }
.ui-v15 .v15-progress { width: 100%; max-width: 280px; }
.ui-v15 .v15-bar { height: 5px; border-radius: 3px; background: var(--v15-hair); overflow: hidden; }
.ui-v15 .v15-bar__fill { height: 100%; width: 0; background: var(--v15-ember); border-radius: 3px; }
.ui-v15 .v15-times { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--v15-muted); }
.ui-v15.v13-active .v13-transport { margin: 0; padding: 0; border: 0; background: none; display: contents; }
/* `display: contents` would otherwise defeat the UA's [hidden] rule, and
   #transport is hidden until the session's first play. One state drives
   the zone: body.v15-live (playing or paused) shows the transport and the
   progress bar, everything else shows the Waiting block. */
.ui-v15.v13-active .v13-transport[hidden] { display: none !important; }
.ui-v15.v13-active:not(.v15-live) .v13-transport,
.ui-v15.v13-active:not(.v15-live) .v15-progress,
.ui-v15.v13-active:not(.v15-live) .v15-part { display: none !important; }
.ui-v15.v13-active.v15-live .v15-waiting { display: none !important; }
.ui-v15.v13-active .v15-status { margin: 0; font-size: 13px; line-height: 1.4; text-align: center; color: var(--v15-muted); max-width: 300px; }
.ui-v15.v13-active .v15-status:empty, .ui-v15.v13-active .v15-status.v15-quiet { display: none; }
/* .v13-card in the selector only to out-specify the 1.4 rule
   `.ui-v14.v13-active .v13-card .v13-transport__controls { gap: 20px }`,
   which was winning and giving the row a 20px gutter instead of the
   design's 26px (measured on the deployed preview, TASK-056). */
.ui-v15.v13-active .v13-card .v15-controls { display: flex; align-items: center; justify-content: center; gap: 26px; margin-top: 4px; }
.ui-v15.v13-active .v13-card .v15-ctl--sm {
  width: 52px; height: 52px; border-radius: 50%; background: var(--v15-card);
  border: 1px solid rgba(30, 58, 47, .18); color: var(--v15-green);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 0;
}
.ui-v15 .v15-ctl--sm .v15-ctl__sub { font-size: 8.5px; font-weight: 700; }
/* 1.3 hides Replay while the card is "idle" (nothing loaded). On 1.5 the card
   can be idle for a moment between clips while the zone is still live, and the
   spec makes Replay available in BOTH Playing and Paused -- so it stays put
   whenever the zone is live, and is hidden with the whole transport otherwise.
   Caught in the browser: the control vanished mid-handover (TASK-056). */
.ui-v15.v13-active.v15-live .v13-card.v13-card--idle #btn-rewind { display: flex; }
/* >= 44px touch target on a 52px control is met by the control itself; this
   only widens the two 52px circles' hit area to the design's 26px gutter. */
.ui-v15 .v15-ctl { position: relative; cursor: pointer; }
.ui-v15 .v15-ctl--sm::after { content: ''; position: absolute; inset: -4px; }
.ui-v15.v13-active .v13-card .v15-ctl--main {
  width: 88px; height: 88px; border-radius: 50%; background: var(--v15-ember); border: 0; color: #fff;
  font-size: 30px; line-height: 1; display: flex; align-items: center; justify-content: center;
  box-shadow: rgba(181, 84, 31, .35) 0 10px 22px;
}
.ui-v15 .v15-paused-chip {
  display: inline-flex; align-items: center; gap: 6px; background: rgba(110, 102, 86, .14); color: var(--v15-muted);
  border-radius: 10px; padding: 4px 12px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
/* Paused: title + progress at 0.75 opacity, frozen (state-3 markup). */
.ui-v15.v15-paused .v13-card__head, .ui-v15.v15-paused .v15-progress, .ui-v15.v15-paused .v15-part { opacity: .75; }

/* Waiting */
.ui-v15 .v15-waiting { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.ui-v15 .v15-playnow {
  width: 100%; height: 64px; border-radius: 32px; background: var(--v15-ember); border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  color: #fff; font-family: inherit; font-weight: 600; font-size: 17px;
  box-shadow: rgba(181, 84, 31, .32) 0 10px 22px;
}
.ui-v15 .v15-playnow:active { background: #9C4419; }
.ui-v15 .v15-helper { font-size: 13px; color: var(--v15-muted); text-align: center; max-width: 260px; line-height: 1.4; }
.ui-v15 .v15-helper:empty { display: none; }

/* Needs Attention keeps 1.4's amber treatment, re-spaced into the zone. */
.ui-v15.v13-active .v14-attn { margin: 0; padding: 0; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; max-width: none; }
.ui-v15.v13-active .v14-attn__explain { margin: 0; max-width: 300px; font-size: 15px; }
.ui-v15.v13-active .v14-attn__btn { margin: 0; min-height: 48px; }

/* ── 4 · nav + End Tour ── */
.ui-v15.v13-active .v14-upnext { display: none !important; }
.ui-v15.v13-active .v14-nav {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px;
  margin: 0; padding: 12px 0 0; border-top: 0.5px solid var(--v15-hair); max-width: none; flex-shrink: 0;
}
.ui-v15.v13-active .v15-nav__item {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0;
  min-height: 48px; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 500; color: var(--v15-green); text-decoration: none;
}
.ui-v15.v13-active a.v15-nav__item { color: var(--v15-green); text-decoration: none; }
.ui-v15 .v15-nav__label { font-size: 11px; font-weight: 500; }
.ui-v15.v13-active .v14-nav__link[aria-expanded="true"] { text-decoration: none; }
.ui-v15.v13-active .v14-nav__link[aria-expanded="true"] .v15-nav__label { text-decoration: underline; }
.ui-v15 .v15-end {
  width: 100%; height: 38px; min-height: 38px; margin: 12px 0 0; border-radius: 19px;
  border: 1px solid rgba(156, 68, 25, .4); background: transparent; color: var(--v15-end); cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0;
}
.ui-v15 .v15-end:active { background: rgba(156, 68, 25, .08); }
.ui-v15.v13-active:not(.v14-stops) .v15-end { display: flex; }
.ui-v15 .v15-ctl:focus-visible, .ui-v15 .v15-playnow:focus-visible,
.ui-v15 .v15-nav__item:focus-visible, .ui-v15 .v15-end:focus-visible { outline: 2px solid var(--v15-green); outline-offset: 2px; }

/* Eli R7: text-only buttons were "too small". Every row in a 1.5 sheet is a
   44px target. */
.ui-v15 .v13-more__row { min-height: 44px; }

/* Eli R2: the map hovered over the Settings sheet. The sheet is a modal; the
   map is page content and must never sit above it. */
.ui-v15 .v13-more { z-index: 9000; }
.ui-v15 .v13-more__scrim { z-index: 9000; }
.ui-v15 .v13-more__sheet { z-index: 9001; }
.ui-v15 .tour-map-card, .ui-v15 .tour-map-wrap, .ui-v15 #tour-map, .ui-v15 .leaflet-pane,
.ui-v15 .leaflet-top, .ui-v15 .leaflet-bottom, .ui-v15 .leaflet-control { z-index: 400; }
.ui-v15.v13-active .tour-map-card { position: relative; z-index: 1; }

/* Eli R3: on a rig with no generated static map the placeholder illustration
   reads as "the map is blank". Say what it is and what to tap. */
.ui-v15 .v15-map-hint {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  padding: 6px 12px; border-radius: 12px; background: rgba(30, 58, 47, .82); color: #fff;
  font-size: 12px; font-weight: 600; pointer-events: none; z-index: 2;
}

/* Fits 360 / 375 / 390 / 430. On a short phone (375x667) the flex zone
   shrinks -- the controls never do. */
/* 375x667 (iPhone SE) is the one viewport the three states do not fit in at
   the design's own spacing: measured 694 px of content against 667 px, which
   pushed End Tour below the fold. Every value below comes off the CHROME --
   padding, gaps and the nav row -- never off the controls, which stay 52/88/52
   and >= 44 px exactly as the design and Eli's "buttons big enough" both
   require (TASK-056; measured, not guessed). */
@media (max-height: 700px) {
  .ui-v15.v13-active #tour-status { gap: 10px; padding: 12px 16px 14px; }
  .ui-v15.v13-active .v14-banner { padding: 12px 16px; gap: 4px; }
  .ui-v15.v13-active .v14-next { padding: 14px; gap: 6px; }
  .ui-v15.v13-active .v14-next__title, .ui-v15.v13-active .v14-banner__top { font-size: 20px; }
  .ui-v15.v13-active .v13-card { gap: 10px; }
  .ui-v15.v13-active .v14-nav { padding-top: 8px; }
  .ui-v15.v13-active .v15-nav__item { min-height: 44px; padding: 0; }
  .ui-v15 .v15-end { margin-top: 8px; }
  .ui-v15 .v15-note { padding-top: 8px; padding-bottom: 8px; }
}
@media (max-width: 360px) {
  .ui-v15.v13-active #tour-status { padding-left: 16px; padding-right: 16px; }
  .ui-v15.v13-active .v15-controls { gap: 18px; }
}

/* TASK-20260927-068 C · "save before you drive into the park". Amber, because
   it is the one pre-start line whose cost is a silent tour in a national park
   with no signal -- not decoration, and not an error either. */
.ui-v14 .v14-ready__note {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 10px;
  background: #fdf3e0; border: 1px solid #e8cf9f; color: #7a4a12;
  font-size: 13.5px; font-weight: 600; line-height: 1.45;
}
.ui-v14 .v14-ready__note[hidden] { display: none; }

/* TASK-20260929-074 · tour-end feedback (data-gated on tour.json feedback_link;
   no live tour sets it, so this block is inert on production). Deliberately a
   link that expands in place under the completion message -- never a modal, so
   it cannot block the closing screen. */
.v14-feedback { margin-top: 12px; }
.v14-feedback__link {
  background: none; border: 0; padding: 8px 0; min-height: 44px;
  font: 600 15px/1.3 inherit; color: #26413C; text-decoration: underline; cursor: pointer;
}
.v14-feedback__panel { margin-top: 8px; }
.v14-feedback__q { border: 0; padding: 0; margin: 0 0 12px; }
.v14-feedback__q legend, .v14-feedback__q label {
  display: block; padding: 0; margin: 0 0 6px; font: 600 14px/1.3 inherit; color: #26413C;
}
.v14-feedback__rate, .v14-feedback__choice {
  min-height: 44px; min-width: 44px; margin: 0 6px 6px 0; padding: 8px 12px;
  border: 1px solid #DDD4C4; border-radius: 10px; background: #fff; color: #26413C;
  font: 600 14px/1.2 inherit; cursor: pointer;
}
.v14-feedback__choice { min-width: 0; }
.v14-feedback__rate[aria-pressed="true"], .v14-feedback__choice[aria-pressed="true"] {
  background: #26413C; color: #fff; border-color: #26413C;
}
.v14-feedback__note {
  width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #DDD4C4;
  border-radius: 10px; font: 400 15px/1.4 inherit; color: #26413C; resize: vertical;
}
.v14-feedback__send {
  min-height: 44px; padding: 10px 18px; border: 0; border-radius: 12px;
  background: #26413C; color: #fff; font: 600 15px/1.2 inherit; cursor: pointer;
}
.v14-feedback__thanks { margin: 8px 0 0; font: 600 15px/1.4 inherit; color: #26413C; }

/* [shared] TASK-20260930-075 (D-207) · optional deeper stories.
   Inert unless a tour.json sets `more` on a stop: nothing below matches on a
   page that emits no extras row and no offer button. 48px minimum targets per
   §5, same contrast as the existing v14 controls. */
.smk-extra-offer {
  display: block; width: 100%; box-sizing: border-box;
  min-height: 56px; margin: 12px 0 0; padding: 14px 16px;
  border: 1px solid #26413C; border-radius: 14px;
  background: #26413C; color: #fff;
  font: 600 17px/1.3 inherit; text-align: left; cursor: pointer;
}
.smk-extra-offer:active { background: #1d322e; }
.smk-extra-offer[hidden] { display: none; }

/* A `more` entry in the stop list, shown under its parent. The "+" badge marks
   it as a child rather than a numbered stop in travel order -- the numbers in
   that column are travel positions and an extra does not have one. */
.stop-item--extra { background: rgba(38, 65, 60, .035); }
.stop-item__number--extra { color: #5b6b66; font-weight: 600; }
.stop-item--extra .stop-item__play { min-height: 48px; min-width: 48px; }

/* Owner GO 2026-10-02 01:10 · optional email + consent on the feedback card.
   Inert unless a tour sets feedback_link. 44px targets, and the consent row is
   a label wrapping its own checkbox so the whole line is tappable. */
.v14-feedback__email {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 8px 10px;
  border: 1px solid #DDD4C4; border-radius: 10px; font: 400 15px/1.4 inherit; color: #26413C;
}
.v14-feedback__consent {
  display: flex; align-items: flex-start; gap: 10px; margin: 10px 0 0;
  font: 400 14px/1.45 inherit; color: #26413C; cursor: pointer; min-height: 44px;
}
.v14-feedback__consent input { width: 22px; height: 22px; margin-top: 2px; flex: none; }
.v14-feedback__emailnote { margin: 8px 0 0; font: 400 14px/1.45 inherit; color: #5b6b66; }

/* RC1f (owner 20 Oct: "embedded map so compressed it is almost useless"): every embedded tour map is LARGE by default --
   phone >= 55 % of the screen and >= 360 px, desktop 520 px -- and usable in place (gestures: atlas-cluster.js). */
.tour-map-card .tour-map-wrap, .tour-map-wrap { height: 56vh; height: 56svh; min-height: 362px; max-height: 720px; aspect-ratio: auto; }   /* 56: the 1 px border stays inside 55 % */
@media (min-width: 768px) { .tour-map-card .tour-map-wrap, .tour-map-wrap { height: 524px; max-height: none; } }
body.p3-mapfull .tour-map-wrap { max-height: none; min-height: 0; }