/* ═══ [shared] Atlas player presentation layer v3 — ux-polish.css ═════════════════════════════════════════
   ONE stylesheet for every destination (owner rule A4: one player, destinations must not drift). TASK-20260927-036.
   Linked by scripts/ux_polish.py ONLY on pages whose tour.json sets hero_image, ux_polish "v3" or brand "atlas", so
   no other page loads a byte of it. Cascade: after player.css. Sections, in the order they were approved:
   029 hero photograph · 030 UX polish v3 · 032 Start above the fold + CLS · 032 ADDENDUM ONE ATLAS LOOK · 036 driving. */

/* ═══ [shared] TASK-20260926-029 · Director presentation pass ═══════════════
   Additive and scoped: .player-hero--photo exists only when a tour.json sets
   hero_image; the Stops-view rules are .ui-v15 only. No existing page's
   markup changes, so everything else renders exactly as before. */
.player-hero--photo { position: relative; overflow: hidden; background-color: var(--ridge, #26413C); background-size: cover; background-position: center 35%; }
.player-hero.player-hero--photo, .ui-v13 .v13-hero.player-hero--photo { padding-top: 190px; }
.player-hero--photo .player-hero__img {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
}
.player-hero--photo::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(20,38,34,.05) 0%, rgba(20,38,34,.30) 28%, rgba(30,52,47,.90) 58%, var(--ridge, #26413C) 100%);
}
.player-hero--photo > .container { position: relative; z-index: 2; }
.player-hero--photo .breadcrumb, .player-hero--photo .breadcrumb a { color: rgba(255,255,255,.92); }
.player-hero__credit {
  position: absolute; z-index: 2; top: 8px; right: 10px; margin: 0;
  padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,.38);
  font-size: 11px; line-height: 1.2; color: rgba(255,255,255,.92);
}
/* Stops view (1.5): the row's own status line ("301 ft ahead", "You're here",
   "Playing now") already carries the distance, so the player's raw
   #dist-stop-N line under it was a second, slightly different number. And the
   hidden player card no longer holds a full screen of empty space open. */
.ui-v15.v13-active.v14-stops .stop-item__dist { display: none; }
.ui-v15.v13-active.v14-stops #tour-status { min-height: 0; }

/* ═══ [shared] TASK-20260927-030 · Player UX polish (approved mockup v3) ═════
   Every rule is scoped to body.ui-p3, which build-tour-page.py adds only for a
   tour.json carrying "ux_polish": "v3" (today: the Central Park showcase). No
   other page has the class, so no other page changes. Presentation only. */
.ui-p3 { --p3-forest: #1F3A2E; --p3-orange: #A84A17; --p3-cream: #F2EADB; --p3-card: #FAF6EE;
  --p3-ink: #1c1c1c; --p3-ink2: #33372f; --p3-line: #DDD3C1; font-size: 17px; }
.ui-p3 main { color: var(--p3-ink); }

/* ── 1 · pre-start: hero, facts, total ── */
.ui-p3 .player-hero .badge--preview, .ui-p3 .v13-hero__facts,
.ui-p3 .v13-hero__tags, .ui-p3 .access-note--preview { display: none !important; }
.ui-p3 .player-hero h1 { font-size: 30px; line-height: 1.15; }
.ui-p3 .v13-hero__park { font-size: 17px; }
.ui-p3 .p3-facts { display: grid; grid-template-columns: repeat(var(--p3-cols, 4), 1fr); background: var(--p3-forest);
  color: #fff; text-align: center; padding: 12px 4px 8px; }
.ui-p3 .p3-fact b { display: block; font-size: 18px; }
.ui-p3 .p3-fact span { font-size: 14px; }
/* the exact sentence is in the stats strip on a tour page, so the site-wide bar steps aside (once per page, one bar fewer) */
body.ui-p3 #smk-free-banner { display: none !important; }
.ui-p3 .p3-fact--free { grid-column: 1 / -1; padding: 8px 12px 2px; }
.ui-p3 .p3-fact--free span { font-size: 15px; font-weight: 700; }
.ui-p3 .p3-total { margin: 0; background: var(--p3-forest); color: #fff; text-align: center; font-size: 15px; line-height: 1.4; padding: 0 14px 14px; }
.ui-p3 .p3-line { margin: 0; background: var(--p3-forest); color: #fff; text-align: center; font: 700 19px/1.4 system-ui, sans-serif; padding: 4px 14px 18px; }
.ui-p3.v13-active .p3-facts, .ui-p3.v13-active .p3-line, .ui-p3.v13-active .p3-total, .ui-p3.v13-active .p3-before { display: none; }
.ui-p3 .v13-desc { font-size: 17px; line-height: 1.5; }

/* ── 1 · "Before you start" ── */
.ui-p3 .p3-before { background: var(--p3-card); border: 1px solid var(--p3-line); border-radius: 16px; padding: 14px 16px; margin: 16px 0 4px; }
.ui-p3 .p3-before__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ui-p3 .p3-before h2 { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 20px; color: var(--p3-ink); }
.ui-p3 .p3-before__toggle { min-height: 48px; min-width: 64px; padding: 0 10px; border: 0; background: none; font: 600 15px inherit; color: var(--p3-ink2); text-decoration: underline; cursor: pointer; }
.ui-p3 .p3-steps { list-style: none; margin: 6px 0 0; padding: 0; }
.ui-p3 .p3-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; font-size: 17px; line-height: 1.4; }
.ui-p3 .p3-num { flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--p3-forest); color: #fff; display: grid; place-items: center; font-weight: 700; }
.ui-p3 .p3-steps a { color: var(--p3-orange); font-weight: 700; }

/* ── 2 · one big Start; the status rows and the old start copy leave the pre-start view ── */
.ui-p3 #v14-ready, .ui-p3 #start-block .start-block__row, .ui-p3 #start-block .start-block__hint,
.ui-p3 #start-block .v14-startlinks, .ui-p3:not(.v13-active) #gps-state, .ui-p3:not(.v13-active) #gps-status { display: none !important; }
.ui-p3 #start-block { border: 0; background: none; padding: 0; margin: 0; }
/* the route-mode buttons are moved into the Explore sheet by ux-polish.js; hidden while they are still in the start
   block so the Start button never jumps up when they leave (layout shift, TASK-20260927-032) */
.ui-p3 #start-block > #nav-modes, .ui-p3 #start-block > #nav-modes-orientation, .ui-p3 #start-block > #nav-modes-advisory { display: none !important; }
.ui-p3 #start-tour-btn { display: block; width: 100%; min-height: 72px; border: 0; border-radius: 18px; background: var(--p3-orange);
  color: #fff; padding: 16px; margin: 16px 0 4px; box-shadow: 0 6px 16px rgba(168,74,23,.3); text-align: center; }
.ui-p3 .p3-start__main { display: block; font-size: 21px; font-weight: 700; }
.ui-p3 .p3-start__sub { display: block; font-size: 15px; font-weight: 500; margin-top: 2px; }
.ui-p3 .p3-explore-link { display: block; width: 100%; min-height: 48px; border: 0; background: none; font-size: 17px; font-weight: 600;
  color: var(--p3-forest); text-decoration: underline; cursor: pointer; }

/* ── 3/4 · bottom sheets ── */
.ui-p3 .p3-sheet { position: fixed; inset: 0; z-index: 9800; display: flex; align-items: flex-end; }
.ui-p3 .p3-sheet[hidden] { display: none; }
.ui-p3 .p3-sheet__scrim { position: absolute; inset: 0; background: rgba(20,30,25,.55); }
.ui-p3 .p3-sheet__panel { position: relative; width: 100%; max-width: 560px; margin: 0 auto; background: var(--p3-cream);
  border-radius: 22px 22px 0 0; padding: 22px 20px calc(24px + env(safe-area-inset-bottom)); max-height: 90vh; overflow: auto; }
.ui-p3 .p3-sheet h2 { font-family: Georgia, 'Times New Roman', serif; font-size: 24px; margin: 4px 0 10px; color: var(--p3-ink); }
.ui-p3 .p3-sheet p { font-size: 18px; line-height: 1.45; margin: 0 0 14px; color: var(--p3-ink); }
.ui-p3 .p3-sheet__icon { font-size: 32px; }
.ui-p3 .p3-cta { display: block; width: 100%; min-height: 60px; border: 0; border-radius: 16px; background: var(--p3-orange); color: #fff; font-size: 20px; font-weight: 700; margin-top: 4px; }
.ui-p3 .p3-ghost { display: block; width: 100%; min-height: 48px; border: 0; background: none; font-size: 17px; font-weight: 600; color: var(--p3-ink2); margin-top: 6px; }
.ui-p3 #p3-explore-modes .nav-modes { display: flex; flex-direction: column; gap: 10px; }
.ui-p3 #p3-explore-modes [data-nav-mode] { display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: 64px; text-align: left;
  padding: 12px 16px; border-radius: 14px; border: 2px solid var(--p3-line); background: #fff; color: var(--p3-ink); }
.ui-p3 #p3-explore-modes [data-nav-mode][aria-checked="true"] { border-color: var(--p3-forest); background: #E7F0E8; }
.ui-p3 .p3-mode__t { font-size: 18px; font-weight: 700; }
.ui-p3 .p3-mode__s { font-size: 15px; color: var(--p3-ink2); margin-top: 2px; }
.ui-p3 #p3-explore-modes .nav-modes__orientation, .ui-p3 #p3-explore-modes .nav-modes__advisory { font-size: 15px; color: var(--p3-ink2); margin-top: 10px; }
body.p3-sheet-open { overflow: hidden; }

/* ── 5 · map card (moved up) and full-screen map ── */
.ui-p3 .tour-map-card { margin: 16px 0 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--p3-line); background: var(--p3-card); }
.ui-p3 .tour-map-card .tour-map-bar { display: none; }
.ui-p3 .p3-mapfoot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; font-size: 15px; }
.ui-p3 .p3-mapfoot__text b { display: block; font-size: 17px; }
.ui-p3 .p3-mapfoot__text span { color: var(--p3-ink2); }
.ui-p3 .p3-btn2 { min-height: 48px; border: 2px solid var(--p3-forest); color: var(--p3-forest); background: #fff; border-radius: 12px;
  padding: 10px 16px; font-size: 16px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.ui-p3 .tour-map-card .tour-map-note { font-size: 13px; color: var(--p3-ink2); }
.ui-p3 .p3-mapbar, .ui-p3 .p3-legend { display: none; }
body.ui-p3.p3-mapfull { overflow: hidden; }
/* #p3-mapcard (set by ux-polish.js) outranks the active-tour rule that hides the map card. */
.ui-p3.p3-mapfull #p3-mapcard { display: block !important; position: fixed !important; inset: 0; z-index: 9500 !important; margin: 0; border-radius: 0; border: 0; }
.ui-p3.p3-mapfull .tour-map-card .tour-map-wrap { position: absolute; inset: 0; height: 100% !important; aspect-ratio: auto; border-radius: 0; border: 0; }
.ui-p3.p3-mapfull .p3-mapfoot, .ui-p3.p3-mapfull .tour-map-note { display: none; }
.ui-p3.p3-mapfull .p3-mapbar { display: flex; position: absolute; z-index: 1200; top: calc(12px + env(safe-area-inset-top)); left: 12px; right: 12px;
  justify-content: space-between; align-items: center; background: var(--p3-forest); color: #fff; border-radius: 16px; padding: 4px 16px 4px 4px; font-size: 17px; font-weight: 700; }
.ui-p3 .p3-mapbar__back { min-height: 48px; border: 0; background: none; color: #fff; font: inherit; padding: 0 12px; cursor: pointer; }
.ui-p3.p3-mapfull .p3-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; position: absolute; z-index: 1200; left: 12px; right: 12px;
  bottom: calc(24px + env(safe-area-inset-bottom)); background: #fff; border-radius: 16px; padding: 12px 14px; font-size: 15px; color: var(--p3-ink); }
.ui-p3 .p3-legend span { display: flex; align-items: center; gap: 6px; }
.ui-p3 .p3-legend__tip { width: 100%; color: var(--p3-ink2); }
.ui-p3 .p3-key { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.ui-p3 .p3-key--you { background: #4CAF50; border: 2px solid #26413C; }
.ui-p3 .p3-key--done { background: var(--p3-forest); }
.ui-p3 .p3-key--todo { background: var(--p3-orange); }
.ui-p3 .stop-marker { display: flex; align-items: center; justify-content: center; pointer-events: none !important; }   /* Leaflet's own rule would make the whole 44 px box catch taps */
.ui-p3 .stop-dot { position: relative; pointer-events: auto !important; width: 22px; height: 22px; background: #B4532A; border: 2px solid #fff; color: #fff; cursor: pointer; font-size: 11px; font-weight: 800; line-height: 1; box-shadow: 0 1px 3px rgba(0,0,0,.4); transition: none; }
.ui-p3 .stop-dot::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; }           /* a finger-sized hit area; the dot itself stays small */
.ui-p3 .stop-dot.p3-pin--done { background: var(--p3-forest); }
/* 13 Oct addendum H: a story along the way is not a stop -- small, unnumbered, outlined, so it never reads as "Stop N" or "Next" */
.ui-p3 .stop-dot.stop-dot--story { width: 12px; height: 12px; margin: 5px; background: #fff; border: 2px solid #B4532A; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.ui-p3 .stop-dot.stop-dot--story.p3-pin--done { background: var(--p3-forest); border-color: #fff; }
.ui-p3 .stop-dot.stop-dot--mini::before { display: none; }          /* a shrunk pin must not steal taps from the full-size pin beside it */
.ui-p3 .stop-dot.stop-dot--mini { width: 10px; height: 10px; font-size: 0; border-width: 1.5px; }       /* declutter: numbers never pile into a blob */

/* ── 7 · save for offline ── */
.ui-p3 .p3-save { margin: 12px 0 0; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--p3-line); background: var(--p3-card); }
.ui-p3 .p3-save__btn { width: 100%; }
.ui-p3 .p3-meter { height: 8px; border-radius: 4px; background: #e3dac8; margin: 10px 0 0; overflow: hidden; }
.ui-p3 .p3-meter i { display: block; height: 100%; width: 0; background: var(--p3-forest); transition: width .3s; }
.ui-p3 .p3-save__line { font-size: 15px; color: var(--p3-ink2); margin-top: 8px; }
.ui-p3.v13-active .p3-save { display: none; }

/* ── 6 · stops as cards, first five, then "See all" (pre-start) ── */
.ui-p3:not(.v13-active) .stop-list .v12-stops__heading, .ui-p3:not(.v13-active) .stop-list .stop-list__heading {
  font-family: Georgia, 'Times New Roman', serif; font-size: 21px; border: 0; margin: 22px 0 8px; }
.ui-p3:not(.v13-active) .stop-list .stop-item { display: flex; align-items: center; gap: 12px; background: var(--p3-card); border: 1px solid var(--p3-line);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; min-height: 64px; cursor: pointer; }
.ui-p3:not(.v13-active) .stop-list:not(.p3-all) .stop-item.p3-more { display: none !important; }
.ui-p3:not(.v13-active) .stop-item__title { font-size: 17px; font-weight: 600; }
.ui-p3:not(.v13-active) .stop-item__dist, .ui-p3 .p3-len { font-size: 15px; color: var(--p3-ink2); }
.ui-p3 .p3-len { display: block; }
.ui-p3.v13-active .p3-len { display: none; }
.ui-p3:not(.v13-active) .stop-item__action { position: relative; flex: none; width: 48px; height: 48px; min-width: 48px; border-radius: 50%; padding: 0; border: 0;
  background: var(--p3-orange); color: #fff; display: grid; place-items: center; justify-content: center; align-content: center; }
.ui-p3:not(.v13-active) .stop-item__action .stop-item__action-icon { color: #fff; font-size: 16px; margin-left: 3px; }
.ui-p3:not(.v13-active) .stop-item__action .stop-item__action-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ui-p3:not(.v13-active) #stops-toggle { display: none !important; }
.ui-p3 .p3-seeall { display: block; width: 100%; min-height: 52px; background: #fff; border: 2px solid var(--p3-line); border-radius: 14px;
  font-size: 17px; font-weight: 700; color: var(--p3-forest); margin: 4px 0 8px; cursor: pointer; }
.ui-p3.v13-active .p3-seeall { display: none; }

/* ── 10 · one price line, one share row, a short footer ── */
.ui-p3 .footer-share, .ui-p3 .how-it-works { display: none !important; }
/* the old live-map hint names a button this layout no longer has; wake lock is on by default and shown as one line in the player (Settings keeps the switch) */
.ui-p3 .v15-map-hint, .ui-p3:not(.v13-active) .toggle-row, .ui-p3:not(.v13-active) #wakelock-indicator { display: none !important; }
.ui-p3 .site-footer { padding: 18px 0; font-size: 15px; }

/* ── 9 · the active player ── */
.ui-p3.v13-active #tour-status > * { order: 20; }
.ui-p3.v13-active #v13-idrow { order: 0; }
.ui-p3.v13-active #tour-status-label { order: 1; }
.ui-p3.v13-active #v14-banner { order: 2; }
.ui-p3.v13-active #v14-attn { order: 3; }
.ui-p3.v13-active #v13-card { order: 4; }
.ui-p3.v13-active #v14-next { order: 5; }
.ui-p3.v13-active #p3-prog { order: 6; }
.ui-p3.v13-active #p3-dots { order: 7; }
.ui-p3.v13-active #p3-pocket { order: 8; }
.ui-p3.v13-active #v14-nav { order: 30; }
.ui-p3.v13-active #v14-nav-end { order: 31; }
.ui-p3.v13-active .v13-sticky__chips, .ui-p3.v13-active #v14-upnext { display: none !important; }
.ui-p3:not(.v13-active) #p3-prog, .ui-p3:not(.v13-active) #p3-dots, .ui-p3:not(.v13-active) #p3-pocket { display: none; }
/* NOW PLAYING is the biggest thing on screen */
.ui-p3.v13-active .v14-card__title { font-size: 28px; line-height: 1.15; }
.ui-p3 .p3-now-meta { font-size: 15px; font-weight: 600; color: var(--p3-ink2); margin: 4px 0 0; }
.ui-p3.v13-active .v15-times { font-size: 15px; color: var(--p3-ink2); font-weight: 600; }
/* NEXT, smaller, underneath while a story plays */
.ui-p3.v13-active.v15-live #v14-next { padding: 12px 16px; }
.ui-p3.v13-active.v15-live #v14-next-title { font-size: 19px; }
.ui-p3.v13-active #v14-next-dist { font-size: 16px; }
.ui-p3 .p3-walk { font-size: 15px; color: var(--p3-ink2); margin-top: 2px; }
.ui-p3 .p3-walk:empty { display: none; }
/* Between stories the next stop takes the big slot, with "Play it now" */
.ui-p3.v13-active:not(.v15-live) #v14-next { order: 4; border-radius: 22px 22px 0 0; margin-bottom: -16px; padding-bottom: 8px; }
.ui-p3.v13-active:not(.v15-live) #v13-card { order: 5; border-top-left-radius: 0; border-top-right-radius: 0; }
.ui-p3.v13-active:not(.v15-live) #v14-next-title { font-size: 28px; line-height: 1.15; }
.ui-p3.v13-active:not(.v15-live) #v14-next-dist { font-size: 18px; font-weight: 700; color: var(--p3-ink); }
.ui-p3.v13-active:not(.v15-live) #v13-card .v15-zone__head,
.ui-p3.v13-active:not(.v15-live) #v13-card .v15-progress,
.ui-p3.v13-active:not(.v15-live) #v13-card #transport,
.ui-p3.v13-active:not(.v15-live) #v13-card .v16-speed-row { display: none !important; }
.ui-p3 #v15-playnow-label { font-size: 0; }
.ui-p3 #v15-playnow-label::after { content: 'Play it now' attr(data-len); font-size: 19px; }
.ui-p3 #v15-playnow-label[data-act="Resume"]::after { content: 'Resume' attr(data-len); }
.ui-p3 .p3-far { background: #FBEBD9; border-radius: 12px; padding: 12px; font-size: 16px; line-height: 1.4; color: var(--p3-ink); margin-top: 8px; }
.ui-p3.p3-is-far #v14-next-dist, .ui-p3.p3-is-far #p3-walk { display: none; }
/* progress and the pocket line */
.ui-p3 .p3-prog { display: flex; justify-content: space-between; font-size: 15px; font-weight: 700; color: var(--p3-forest); margin-top: 4px; }
.ui-p3 .p3-dots { display: flex; gap: 3px; }
.ui-p3 .p3-dots i { flex: 1; height: 6px; border-radius: 3px; background: #d6ccb8; }
.ui-p3 .p3-dots i.p3-dot--done { background: var(--p3-forest); }
.ui-p3 .p3-pocket { background: #E7F0E8; border-radius: 12px; padding: 10px 12px; font-size: 15px; line-height: 1.4; color: var(--p3-ink); }
/* legibility and targets */
.ui-p3.v13-active .v15-nav__item, .ui-p3.v13-active .v14-nav__link { min-height: 48px; }
.ui-p3.v13-active .v15-note__text, .ui-p3.v13-active .v15-helper { font-size: 15px; color: var(--p3-ink2); }
.ui-p3.v13-active:not(.v15-live) #v15-waiting > .v15-eyebrow { display: none; }
/* the share row's WhatsApp green fails 4.5:1 with white text; a darker WhatsApp green passes (≈5.9:1) */
.ui-p3 .whatsapp-btn { background: #177245; border-color: #177245; color: #fff; }

/* ═══ [shared] TASK-20260927-032 · Start above the fold (owner iPhone 14 Plus review) ═══
   .ui-p3 only. The hero is shorter and a little lighter; the sticky Start bar forwards to the
   existing #start-tour-btn; "Before you start" sits below Start and folds to one line on short
   screens. */
.ui-p3 .player-hero.player-hero--photo, .ui-p3.ui-v13 .v13-hero.player-hero--photo { padding-top: 120px; }
.ui-p3 .player-hero--photo::before {
  background: linear-gradient(180deg, rgba(20,38,34,0) 0%, rgba(20,38,34,.18) 30%, rgba(30,52,47,.82) 66%, var(--ridge, #26413C) 100%);
}
@media (max-width: 600px) { .ui-p3 .player-hero .breadcrumb { display: none; } .ui-p3 .player-hero h1 { font-size: 27px; } }
.ui-p3 .p3-startbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9400; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(242,234,219,.97); border-top: 1px solid var(--p3-line); box-shadow: 0 -6px 18px rgba(0,0,0,.12); }
.ui-p3 .p3-startbar[hidden] { display: none; }
/* 12 Oct (Director): on a full-height screen (no browser bars: 844 tall) the Start button's bottom edge sits at <= ~780, clear of where a bar would be */
@media (min-height: 800px) { .ui-p3 .p3-startbar { bottom: 56px; padding-bottom: 10px; background: transparent; border-top: 0; box-shadow: none; pointer-events: none; }
  .ui-p3 .p3-startbar button { pointer-events: auto; box-shadow: 0 6px 18px rgba(0,0,0,.28); } }
.ui-p3 .p3-startbar button { display: block; width: 100%; max-width: 560px; margin: 0 auto; min-height: 56px; border: 0; border-radius: 16px;
  background: var(--p3-orange); color: #fff; font-size: 19px; font-weight: 700; cursor: pointer; }
.ui-p3 .p3-startbar small { font-size: 15px; font-weight: 500; }
body.ui-p3.p3-has-bar { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
/* 14 Oct: permission sheet OFF -> one line above Start and "Not now" under it, on the page and in the sticky bar */
.ui-p3 .p3-locnote { max-width: 560px; margin: 0 auto 8px; font-size: 14px; line-height: 1.35; font-weight: 600; color: var(--p3-ink2, #3f4f4a); text-align: center; }
.ui-p3 .p3-locnote[hidden] { display: none; }
.ui-p3 .p3-notnow { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 560px; min-height: 44px; margin: 2px auto 0; border: 0; background: none;
  font-size: 15px; font-weight: 600; color: var(--p3-ink2, #3f4f4a); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ui-p3 .p3-startbar .p3-locnote { margin-bottom: 6px; font-size: 13px; }
.ui-p3 .p3-startbar.p3-startbar--note { background: #F2EADB; }   /* opaque: the line must not show the page through it */
.ui-p3 .p3-startbar .p3-notnow { min-height: 44px; margin-top: 0; border-radius: 0; background: none; box-shadow: none; color: var(--p3-ink2, #3f4f4a); font-size: 14px; font-weight: 600; }   /* a plain link, not a second orange button */
@media (min-height: 800px) { .ui-p3 .p3-startbar.p3-startbar--note { left: 10px; right: 10px; padding: 10px 12px 2px; border-radius: 18px; pointer-events: auto;
  background: #F2EADB; border: 1px solid var(--p3-line); box-shadow: 0 8px 22px rgba(0,0,0,.18); } }
body.ui-p3.p3-has-bar.p3-bar-note { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
@media (min-height: 800px) { body.ui-p3.p3-has-bar.p3-bar-note { padding-bottom: calc(210px + env(safe-area-inset-bottom)); } }
.ui-p3 .p3-before--compact { padding: 4px 8px; }
.ui-p3 .p3-howto { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: space-between; border: 0; background: none;
  font-family: Georgia, 'Times New Roman', serif; font-size: 19px; color: var(--p3-ink); cursor: pointer; padding: 0 8px; }
.ui-p3 .p3-howto__chev { font-family: inherit; font-size: 22px; transition: transform .2s; }
.ui-p3 .p3-howto[aria-expanded="true"] .p3-howto__chev { transform: rotate(90deg); }
.ui-p3 .p3-before + .v13-desc { margin-top: 16px; }

/* ═══ [shared] TASK-20260927-032 ADDENDUM · ONE ATLAS LOOK (body.brand-atlas) ═══════════
   Only pages built from a tour.json with "brand": "atlas" carry .brand-atlas, so nothing else
   changes. Tokens are the atlasaudiotours.com values (src/styles/tokens.css); fonts are the same
   OFL faces HQ self-hosts (Fraunces variable opsz+wght, Instrument Sans 400/500/600, latin). The
   @font-face rules below download nothing on pages that never use these families. font-display: optional + the
   page's preloads = the Atlas faces on normal loads, and never a font-swap reflow (no layout shift). */
@font-face { font-family: 'Fraunces Atlas'; font-style: normal; font-weight: 100 900; font-display: optional;
  src: url('../fonts/atlas/fraunces-latin-opsz-normal.woff2') format('woff2-variations'), url('../fonts/atlas/fraunces-latin-opsz-normal.woff2') format('woff2'); }
/* 19 Oct (Director 1/3, frozen D-269): body face Public Sans 400-700 (was Instrument Sans); Fraunces italic for the 500 italic. */
@font-face { font-family: 'Fraunces Atlas'; font-style: italic; font-weight: 100 900; font-display: optional; src: url('../fonts/atlas/fraunces-latin-opsz-italic.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans Atlas'; font-style: normal; font-weight: 400; font-display: optional; src: url('../fonts/atlas/public-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans Atlas'; font-style: normal; font-weight: 500; font-display: optional; src: url('../fonts/atlas/public-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans Atlas'; font-style: normal; font-weight: 700 800; font-display: optional; src: url('../fonts/atlas/public-sans-latin-700-normal.woff2') format('woff2'); }
/* TASK-076 Brand 2.1: the lockup descriptor face, self-hosted (no third party). */
@font-face { font-family: 'Public Sans Atlas'; font-style: normal; font-weight: 600; font-display: optional; src: url('../fonts/atlas/public-sans-latin-600-normal.woff2') format('woff2'); }

body.brand-atlas {
  --atlas-display: 'Fraunces Atlas', Georgia, 'Times New Roman', serif;
  --atlas-body: 'Public Sans Atlas', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --atlas-paper: #F6F0E4; --atlas-surface: #FFFDF8; --atlas-ink: #1B2420; --atlas-ink-2: #4F5A54; --atlas-stone: #4F5A54;
  --atlas-line: #E2D8C3; --atlas-spruce: #1F3B2D; --atlas-spruce-deep: #14291F; --atlas-spruce-tint: #F6F0E4;
  /* TASK-076: Brand 2.1 palette, exactly as the spec lists it. Added alongside
     the existing v3 tokens rather than replacing them, so only the lockup
     adopts the new values and no approved v3 surface shifts colour. */
  --brand21-green: #1F3B2D; --brand21-green-dark: #14291F; --brand21-gold: #C9A24A;
  --brand21-paper: #FFFDF8; --brand21-cream: #F6F0E4; --brand21-ink: #1B2420;
  --atlas-ember: #B4532A; --atlas-ember-ink: #1F3B2D; --atlas-on-dark: #F6F0E4;
  /* the site's own tokens */
  --ridge: var(--atlas-spruce); --ridge-dark: var(--atlas-spruce-deep); --ember: var(--atlas-ember); --cream: var(--atlas-paper);
  --charcoal: var(--atlas-ink); --muted: var(--atlas-stone); --border: var(--atlas-line);
  --font-heading: var(--atlas-display); --font-body: var(--atlas-body);
  background: var(--atlas-paper); color: var(--atlas-ink);
}
/* the v1.3 player's tokens and the UX-polish tokens, mapped onto the same palette */
body.brand-atlas.ui-v15 { --v15-bg: #F6F0E4; --v15-ink: #1B2420; --v15-green: #1F3B2D; --v15-card: #FFFDF8; --v15-muted: #4F5A54; --v15-ember: #B4532A; --v15-end: #1F3B2D; }
body.brand-atlas.ui-p3 { --p3-forest: #1F3B2D; --p3-orange: #B4532A; --p3-cream: #F6F0E4; --p3-card: #FFFDF8; --p3-ink: #1B2420; --p3-ink2: #4F5A54; --p3-line: #E2D8C3; }
/* one type system: Public Sans everywhere (frozen D-269; was Instrument Sans), Fraunces for display (the player's own Lora/Work Sans rules sit on id
   selectors, hence the !important -- scoped to .brand-atlas pages only; map tiles and SVG text are left alone) */
body.brand-atlas, body.brand-atlas *:not(svg):not(svg *):not(.leaflet-container):not(.leaflet-container *) { font-family: var(--atlas-body) !important; }
body.brand-atlas :is(h1, h2, h3, .v14-card__title, #v14-next-title, .v15-next__title, .v15-banner__top, .v13-hero__park, .p3-fact b,
  .p3-mapfoot__text b, .p3-howto, .atlas-lockup__name, .stop-list__heading, #stops-heading, .p3-mode__t) { font-family: var(--atlas-display) !important; }
body.brand-atlas :is(h1, h2, h3, .v14-card__title, #v14-next-title) { font-weight: 600; letter-spacing: -0.01em; }
body.brand-atlas .v13-hero__park { font-weight: 400; }
body.brand-atlas .p3-steps a, body.brand-atlas .back-link a { color: var(--atlas-ember-ink); }
/* ── TASK-20261001-076 · Brand 2.1 header lockup ──────────────────────────────
   Horizontal "mark | ATLAS / AUDIO TOURS", then the destination as a place line.
   Replaces the old compass wordmark. Spec type: ATLAS in Fraunces 700 uppercase
   tight; AUDIO TOURS in Public Sans 600, small caps, tracked. Spec palette:
   Green #163B2E, Gold #C9A227 (the mark's centre), Ink #2B2B27.
   The mark is 32px here, above the brand's own >=32px full-mark floor; below
   that the micro-mark is the correct asset. */
body.brand-atlas .site-header { background: var(--atlas-paper); border-bottom: 1px solid var(--atlas-line); }
body.brand-atlas .atlas-lockup { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--brand21-green); text-decoration: none; }
body.brand-atlas .atlas-mark { width: 32px; height: 32px; flex: none; }
body.brand-atlas .atlas-lockup__words { display: flex; flex-direction: column; justify-content: center; gap: 1px; }
body.brand-atlas .atlas-lockup__name {
  font-family: var(--atlas-display) !important; font-weight: 700; font-size: 22px;
  letter-spacing: -0.015em; line-height: 1; text-transform: uppercase; color: var(--brand21-green);
}
body.brand-atlas .atlas-lockup .atlas-lockup__words .atlas-lockup__descriptor {
  /* The long selector and the !important are both load-bearing. The blanket rule
     above (body.brand-atlas + every descendant, with four :not()s) carries
     !important AND specificity (0,3,3), so a plain
     `body.brand-atlas .atlas-lockup__descriptor !important` at (0,2,1) still lost
     and the descriptor rendered Instrument Sans on tour pages -- while the
     homepage, served by site.css which has no such blanket, rendered Public Sans
     correctly. This selector is (0,4,1), which wins on class count.
     Found on the live production post-check: my preview check had only measured
     the homepage lockup, so the tour-page path was never looked at. */
  font-family: 'Public Sans Atlas', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  font-weight: 600; font-size: 9.5px; line-height: 1; text-transform: uppercase;
  letter-spacing: 0.17em; color: var(--brand21-green); opacity: .82;
}
body.brand-atlas .atlas-lockup__place { font-size: 15px; font-weight: 500; color: var(--atlas-stone); line-height: 1; }
/* Under 32px the brand rule says use the micro-mark, so the descriptor would be
   illegible anyway: drop it and the place line and keep mark + ATLAS. */
@media (max-width: 359px) {
  body.brand-atlas .atlas-lockup__descriptor, body.brand-atlas .atlas-lockup__place { display: none; }
  body.brand-atlas .atlas-mark { width: 26px; height: 26px; }
}
/* footer: the reversed lockup on Green Dark */
body.brand-atlas .atlas-footer__lockup { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 10px; color: #FBF8F1; }
body.brand-atlas .atlas-footer__lockup .atlas-mark { width: 30px; height: 30px; }
body.brand-atlas .atlas-footer__lockup .atlas-lockup__name,
body.brand-atlas .atlas-footer__lockup .atlas-lockup__descriptor { color: #FBF8F1; }
body.brand-atlas .nav__links a { color: var(--atlas-ink); font-weight: 600; }
/* footer: the reversed lockup on Brand 2.1 Green Dark, per TASK-076 item 1.
   Was --atlas-ink; the spec names Green Dark #0E241C for reversed use. */
body.brand-atlas .site-footer { background: var(--brand21-green-dark); color: var(--atlas-on-dark); }
body.brand-atlas .atlas-footer__line { margin: 0; font-size: 15px; line-height: 1.5; color: var(--atlas-on-dark); }
body.brand-atlas .atlas-footer__mark { font-family: var(--atlas-display) !important; font-weight: 600; font-size: 18px; color: #F5F1E8; margin-right: 6px; }

/* ═══ [shared] TASK-20260927-036 · driving adaptation (Smokies TASK-067 §3 + ADDENDUM 2) ═══
   The big "Save for offline" button sits directly under Start on driving tours (rendered by ux_polish.py, paired with
   the TASK-068 warning); the hero chips are not shown on v3 pages, so none can be mistaken for a button. */
.ui-p3 .p3-save--top { margin: 12px 0 0; }
.ui-p3 .p3-save--top .p3-save__btn { min-height: 56px; font-size: 18px; }

/* Contact link in the reversed tour-page footer (owner note 2 Oct 01:10). */
body.brand-atlas .atlas-footer__contact { margin: 6px 0 0; }
body.brand-atlas .atlas-contact { color: var(--brand21-paper); text-decoration: underline; display: inline-block; min-height: 44px; line-height: 44px; }

/* "Email us" panel (owner feedback 2 Oct 10:00): a bare mailto: does nothing on
   a desktop with no mail app. Phones keep the direct mailto. Same component and
   wording as Atlas HQ, so the two sites behave identically. */
.mail-panel { border: 0; border-radius: 20px; padding: 24px; width: min(92vw, 420px);
  background: #FFFFFF; color: #2B2B27; box-shadow: 0 18px 48px rgba(14,36,28,.28); }
.mail-panel::backdrop { background: rgba(14, 36, 28, 0.6); }
.mail-panel__title { font-size: 26px; margin: 0 0 6px; }
.mail-panel__lead { margin: 0; color: #56605C; }
.mail-panel__addr { margin: 4px 0 16px; font-size: 20px; font-weight: 600; color: #163B2E;
  word-break: break-all; user-select: all; }
.mail-panel__actions { display: flex; flex-direction: column; gap: 10px; }
.mail-panel__btn { display: flex; align-items: center; justify-content: center; min-height: 52px;
  border-radius: 999px; border: 1.5px solid #163B2E; background: transparent; color: #163B2E;
  font: inherit; font-weight: 600; font-size: 17px; text-decoration: none; cursor: pointer; }
.mail-panel__btn--primary { background: #163B2E; color: #fff; }
.mail-panel__btn:hover { background: #E3EAE6; color: #163B2E; }
.mail-panel__btn--primary:hover { background: #0E241C; color: #fff; }
.mail-panel__btn:focus-visible, .mail-panel__close:focus-visible { outline: 3px solid #163B2E; outline-offset: 2px; }
.mail-panel__toast { margin: 12px 0 0; min-height: 1.4em; font-weight: 600; color: #163B2E; }
.mail-panel__close { margin-top: 10px; width: 100%; min-height: 44px; border: 0; background: none;
  color: #56605C; font: inherit; text-decoration: underline; cursor: pointer; }
.mail-panel__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%); white-space: nowrap; }

/* D-244 / Standard §3: ONE status line. The banner sub-line repeated "Autoplay on" -- the word was on screen twice
   (field test: "Autoplay shown twice"). #mg-strip's line is the single source now. */
.ui-p3.v13-active #v14-banner-sub { display: none !important; }

/* Ciara 7 (8 Oct): the map area is ONE straight row of three equal buttons -- Open map · Show my location ·
   Save for offline. `order` fixes the sequence whichever script mounts its button first. */
.ui-p3 .p3-mapfoot.p3-maprow { display: flex; flex-wrap: nowrap; justify-content: stretch; align-items: stretch; gap: 8px; padding: 10px; }
.ui-p3 .p3-maprow > button { flex: 1 1 0; min-width: 0; width: auto; min-height: 56px; margin: 0; padding: 6px 4px;
  font-size: 14px; line-height: 1.2; font-weight: 700; white-space: normal; text-align: center; display: flex; align-items: center; justify-content: center; }
.ui-p3 .p3-maprow > #p3-open-map { order: 1; }
.ui-p3 .p3-maprow > #ps-locate { order: 2; }
.ui-p3 .p3-maprow > #p3-save-btn { order: 3; }
.ui-p3 .p3-maprow > button { border: 2px solid var(--brand21-green, #163B2E) !important; border-radius: 14px !important; background: #fff !important;
  color: var(--brand21-green, #163B2E) !important; margin-left: 0 !important; padding: 6px 4px !important; font-size: 14px !important; }
.ui-p3 .p3-maprow > button[disabled] { opacity: .7; }

/* ═════ 12 Oct · v3 ACTIVE SKIN (owner approved the v3 player, "one design, one build") ═════
   The mockup's player screen, top to bottom: slim "Tour active" bar -> NOW PLAYING card (title, progress, ONE control row, speed) -> NEXT ->
   "n of N visited" + dots -> the honest pocket line -> bottom nav -> End Tour. The inline map, the second Settings button, the
   "GPS / Online / Autoplay" strip line and the extra links are not part of that screen: the map is one tap away (Map), Settings is the nav's.
   Nothing here touches GPS, audio or the player engine; it only hides/reorders what the engine already renders. */
.ui-p3.v13-active #mg-tools, .ui-p3.v13-active #mg-strip .mg-line, .ui-p3.v13-active #mg-gear,
.ui-p3.v13-active #v15-note-row, .ui-p3.v13-active #ra-explore, .ui-p3.v13-active #qr-loc-line, .ui-p3.v13-active .atlas-legal-foot,
.ui-p3.v13-active #tour-status-label { display: none !important; }
.ui-p3.v13-active:not(.p3-mapfull) #p3-mappanel { display: none !important; }          /* the dock belongs to the full-screen map; the list view has the big card */
.ui-p3.v13-active #tour-status { display: flex; flex-direction: column; gap: 0; }
.ui-p3.v13-active #tour-status > * { order: 20 !important; }
.ui-p3.v13-active #v13-idrow { order: 0 !important; }
.ui-p3.v13-active #v14-banner { order: 1 !important; }
.ui-p3.v13-active #mg-strip { order: 2 !important; }
.ui-p3.v13-active.v15-live #v13-card { order: 3 !important; }
.ui-p3.v13-active.v15-live #v14-next { order: 4 !important; }
.ui-p3.v13-active:not(.v15-live) #v14-next { order: 3 !important; }
.ui-p3.v13-active:not(.v15-live) #v13-card { order: 4 !important; }
.ui-p3.v13-active #p3-prog { order: 5 !important; } .ui-p3.v13-active #p3-dots { order: 6 !important; } .ui-p3.v13-active #p3-pocket { order: 7 !important; }
.ui-p3.v13-active #v14-upnext, .ui-p3.v13-active #gap-now { order: 8 !important; }
.ui-p3.v13-active #v14-nav { order: 9 !important; } .ui-p3.v13-active #v14-nav-end { order: 10 !important; }
/* 1 · the slim "Tour active" bar */
.ui-p3.v13-active #v14-banner { margin: 10px 0 0; padding: 12px 16px; border-radius: 18px; background: var(--p3-forest, #26413C); color: #fff; }
.ui-p3.v13-active #v14-banner .v15-banner__top, .ui-p3.v13-active #v14-banner-title { font-size: 18px; line-height: 1.2; }
.ui-p3.v13-active .p3-pbar-sub { margin: 2px 0 0; font: 500 14px/1.35 system-ui, sans-serif; color: #fff; opacity: .95; }
.ui-p3.v13-active #mg-strip { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
/* 2 · the NOW PLAYING / next-stop cards */
.ui-p3.v13-active #v13-card { margin: 10px 0 0; background: #fff; border: 1px solid var(--p3-line, #DDD3C1); border-radius: 22px; padding: 14px 14px 12px; }
.ui-p3.v13-active #v14-next { margin: 10px 0 0; background: var(--p3-card, #FAF6EE); border-radius: 16px; padding: 14px 16px; }
.ui-p3.v13-active.v15-live #v14-next { padding: 10px 16px; }
.ui-p3.v13-active.v15-live #v14-next .v15-next__title { font-size: 19px; }
.p3-pills { display: none; justify-content: center; gap: 10px; margin: 6px 0 2px; }
.ui-p3.v13-active.v15-live .p3-pills { display: flex; }
.p3-pills .mg-tool { min-height: 44px; padding: 0 16px; border: 1px solid var(--p3-line, #DDD3C1); border-radius: 22px; background: #fff; font: 700 15px system-ui, sans-serif; color: var(--p3-ink, #1c1c1c); }
/* 3 · progress, pocket, nav, End */
.ui-p3.v13-active #p3-pocket { margin: 12px 0 0; }
.ui-p3.v13-active #v14-nav-end { margin: 10px 0 24px; }
/* the settings the second button used to hold now live in the nav Settings sheet */
.p3-more-set { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--p3-line, #DDD3C1); }
.p3-more-set .mg-tool { min-height: 52px; text-align: left; padding: 0 16px; border: 1px solid var(--p3-line, #DDD3C1); border-radius: 14px; background: #fff; font: 700 17px system-ui, sans-serif; color: var(--p3-ink, #1c1c1c); }
.ui-p3.v13-active #v14-banner { flex-direction: column !important; align-items: flex-start !important; }
.ui-p3.v13-active #v13-card { display: flex !important; flex-direction: column !important; }
.ui-p3.v13-active #v13-card > .p3-pills { order: 99; width: 100%; }

/* ═════ 12 Oct · v3 LANDING polish ═════ */
/* the stops list before Start is the mockup's compact rows: number, title, length, one round Play (directions and "Read" appear once the tour is active) */
.ui-p3:not(.v13-active) .stop-item :is(.ra-take--row, .ra-take, .mb-read, .mb-box, [class*="mb-read"]) { display: none !important; }
.ui-p3:not(.v13-active) #mg-keepopen { margin: 10px 0 0; font-size: 14px; line-height: 1.35; color: var(--p3-ink2, #3E4845); text-align: center; }
.ui-p3:not(.v13-active) #ps-line { font-size: 15px; }
.ui-p3:not(.v13-active) .p3-total { padding-bottom: 16px; }
/* a hero whose photo is missing or fails reads as a calm green panel, never a black box */
.ui-p3 .player-hero--photo { background-image: linear-gradient(135deg, #3d5a4c, #26413C 60%, #1d3329); }
.ui-p3 .player-hero__img { background: #3d5a4c; }

/* 12 Oct (owner): the compact live map is back on the player screen, at the TOP (under the "Tour active" bar), shown by default; Hide map / Show map is its corner button.
   Order: idrow 0 · banner 1 · MAP 2 · chips 3 · Now playing 4 · Next 5 ... (the later rules below renumber; 'order' ties fall back to DOM order, so each gets its own number) */
.ui-p3.v13-active #tour-status > #ml-panel { order: 2 !important; }
.ui-p3.v13-active #mg-strip { order: 3 !important; }
.ui-p3.v13-active.v15-live #v13-card { order: 4 !important; }
.ui-p3.v13-active.v15-live #v14-next { order: 5 !important; }
.ui-p3.v13-active:not(.v15-live) #v14-next { order: 4 !important; }
.ui-p3.v13-active:not(.v15-live) #v13-card { order: 5 !important; }
.ui-p3.v13-active #p3-prog { order: 6 !important; } .ui-p3.v13-active #p3-dots { order: 7 !important; } .ui-p3.v13-active #p3-pocket { order: 8 !important; }
.ui-p3.v13-active #v14-upnext, .ui-p3.v13-active #gap-now { order: 9 !important; }
.ui-p3.v13-active #v14-nav { order: 10 !important; } .ui-p3.v13-active #v14-nav-end { order: 11 !important; }

/* ── 12 Oct · with the compact map on screen, the cards under it tighten so NOW PLAYING + its ONE control row + NEXT stay in one screen (390x844, 375x667) ── */
.ui-p3.v13-active.p3-map-on #mg-strip { order: 6 !important; margin-top: 6px; }
.ui-p3.v13-active.p3-map-on #tour-status { padding-top: 6px; }
.ui-p3.v13-active.p3-map-on #v14-banner { margin-top: 0; padding: 7px 14px; }
.ui-p3.v13-active.p3-map-on #ml-panel { margin-top: 8px; }
.ui-p3.v13-active.p3-map-on #v13-card { margin-top: 8px; padding: 10px 12px 8px; border-radius: 20px; }
.ui-p3.v13-active.p3-map-on .v14-card__title { font-size: 24px; line-height: 1.1; }
.ui-p3.v13-active.p3-map-on #p3-now-meta { font-size: 14px; margin: 0; }
.ui-p3.v13-active.p3-map-on .v15-progress { margin: 2px 0 0; }
.ui-p3.v13-active.p3-map-on .v13-card .v15-controls { gap: 18px; margin-top: 0; }
.ui-p3.v13-active.p3-map-on .v13-card .v15-ctl--sm { width: 48px; height: 48px; }
.ui-p3.v13-active.p3-map-on .v13-card .v15-ctl--main { width: 64px; height: 64px; font-size: 24px; box-shadow: rgba(181, 84, 31, .3) 0 6px 14px; }
.ui-p3.v13-active.p3-map-on .p3-pills { margin: 2px 0 0; }
.ui-p3.v13-active.p3-map-on .p3-pills .mg-tool { min-height: 44px; padding: 0 14px; }
.ui-p3.v13-active.p3-map-on #v14-next { margin-top: 8px; padding: 8px 14px; }
.ui-p3.v13-active.p3-map-on #v14-next { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 0; }
.ui-p3.v13-active.p3-map-on #v14-next > #v14-next-label, .ui-p3.v13-active.p3-map-on #v14-next > #v14-next-title { flex: 0 0 100%; }
.ui-p3.v13-active.p3-map-on #v14-next-dist, .ui-p3.v13-active.p3-map-on #p3-walk { font-size: 15px; margin: 0; }
.ui-p3.v13-active.p3-map-on #p3-walk::before { content: " · "; }
.ui-p3.v13-active.p3-map-on #ra-box { display: none; }   /* the map shows the way (and the full map has the directions); with the map hidden the turn-by-turn box is back */
@media (max-height: 700px) {
  .ui-p3.v13-active.p3-map-on #v14-banner .p3-pbar-sub { display: none; }
  .ui-p3.v13-active.p3-map-on #v14-banner { padding: 6px 14px; }
  .ui-p3.v13-active.p3-map-on .v14-card__title { font-size: 21px; }
  .ui-p3.v13-active.p3-map-on #p3-now-meta { display: none; }
  .ui-p3.v13-active.p3-map-on #v14-next-label, .ui-p3.v13-active.p3-map-on #ra-box { display: none; }
}

/* Explore mode: the Finish button (margaret-b.js) sits just above End Tour in the v3 player (the tools row is hidden there) */
.ui-p3.v13-active #mb-finish-row { order: 11 !important; margin: 10px 0 0; display: flex; justify-content: center; }
.ui-p3.v13-active #mb-finish-row #mb-finish-btn { min-height: 48px; padding: 0 22px; }
.ui-p3.v13-active #mb-finish-row:has(#mb-finish-btn[hidden]) { display: none; }

/* Pre-start / waiting state: the Next stop card must never be squeezed (a two-line title was clipped under the "Play it now" card). Cards in the active column keep their content height. */
.ui-p3.v13-active #tour-status > * { flex-shrink: 0 !important; }
.ui-p3.v13-active #v14-next { overflow: visible !important; min-height: 0; }
.ui-p3.v13-active:not(.v15-live) #v14-next { padding-bottom: 14px; }
.ui-p3.v13-active.p3-map-on:not(.v15-live) #v14-next { margin-bottom: 0; border-radius: 16px; }
.ui-p3.v13-active.p3-map-on:not(.v15-live) #v13-card { margin-top: 8px; border-top-left-radius: 20px; border-top-right-radius: 20px; }

/* 12 Oct 20:50 (owner): the pre-start page and the active player must look different at a glance. Pre-start says "Not started" in plain words; the active
   player's banner says Playing / Paused / Waiting for the next stop. */
.ui-p3:not(.v13-active) .v14-notstarted { display: inline-flex !important; align-items: center; gap: 8px; margin: 10px 0 0; padding: 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,.16); color: #fff; font: 700 15px system-ui, sans-serif; letter-spacing: .02em; }
.ui-p3:not(.v13-active) .v14-notstarted__dot { width: 10px; height: 10px; border-radius: 50%; background: #E8B04B; }
.ui-p3.v13-active .v14-notstarted { display: none !important; }

/* 13 Oct: any short clip (gap story, route cue, hand-off, closing) shows in ONE clip bar with Pause / Resume / Skip and a progress bar (audio-bus.js);
   the old Skip-only gap strip is replaced by it. The bar sits right under the status banner. */
#gap-now { display: none !important; }
.ui-p3.v13-active #clip-bar { order: 1 !important; }

/* 13 Oct: the full-screen map's controls: a count chip on the left and a "Close map" pill at the TOP-RIGHT, no longer one bar stacked under the header Back */
.ui-p3.p3-mapfull .p3-mapbar { background: transparent !important; padding: 0 !important; pointer-events: none; flex-direction: row-reverse; }
.ui-p3.p3-mapfull .p3-mapbar > * { pointer-events: auto; }
.ui-p3 .p3-mapbar__back { display: inline-flex; align-items: center; gap: 8px; min-height: 48px !important; padding: 0 18px !important; border: 2px solid var(--p3-forest, #163B2E) !important; border-radius: 999px !important;
  background: #fff !important; color: var(--p3-forest, #163B2E) !important; font-weight: 800; box-shadow: 0 4px 14px rgba(0,0,0,.28); }
.ui-p3 .p3-mapbar__back .p3-x { font-size: 18px; line-height: 1; }
.ui-p3 .p3-mapbar__count { background: var(--p3-forest, #163B2E); color: #fff; border-radius: 999px; padding: 8px 14px; font-size: 15px; font-weight: 700; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
/* [shared] 17 Oct (ROUTE-MAP-FIXES #5): on a plan's map, pins that would overlap become ONE numbered badge ("3–5") */
.stop-dot.stop-dot--grp, .ui-p3 .stop-dot.stop-dot--grp { width: auto; min-width: 22px; padding: 0 6px; border-radius: 999px; white-space: nowrap; margin-left: auto; margin-right: auto; }
/* [shared] 17 Oct (§10b): an approximate (unverified) stop: numbered, dashed ring, never a trigger */
.stop-dot.stop-dot--approx, .ui-p3 .stop-dot.stop-dot--approx { background: #fff; color: #B4532A; border: 2px dashed #B4532A; }
/* D-269 Phase 2: progress row "N completed · Stop X of Y playing · R remaining" + dots (green completed, dark with gold ring now,
   orange next, outlined skipped) + the Stops list state tag */
.ui-p3 .p3-prog { gap: 8px; align-items: baseline; }
.ui-p3 .p3-prog .p3-prog__l { color: #1F7A4D; }
.ui-p3 .p3-prog .p3-prog__c { text-align: center; flex: 1; color: var(--p3-forest); }
.ui-p3 .p3-prog .p3-prog__r { font-weight: 600; color: #5E6863; white-space: nowrap; }
.ui-p3 .p3-dots i.p3-dot--done { background: #1F7A4D; }
.ui-p3 .p3-dots i.p3-dot--now { background: var(--p3-forest); box-shadow: 0 0 0 2px #C9A227; }
.ui-p3 .p3-dots i.p3-dot--next { background: #E8721C; }
.ui-p3 .p3-dots i.p3-dot--skip { background: transparent; box-shadow: inset 0 0 0 2px #8C918D; }
.p3-row-state { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px; font: 700 12px/1.5 system-ui, sans-serif; background: #EEF2EE; color: #3D4A43; }
.p3-row-state[data-state="completed"] { background: #E3F1E8; color: #1F7A4D; }
.p3-row-state[data-state="current"] { background: var(--p3-forest, #163B2E); color: #fff; }
.p3-row-state[data-state="skipped"] { background: #F1EEE8; color: #6B6457; }
.p3-row-state[data-state="unfinished"] { background: #FDF0E3; color: #8A4A12; }
/* D-269 Phase 2: a larger Play/Pause; chips; weak-GPS banner (switch, off by default); "Just heard · Replay"; Offline in the header */
.ui-p3 #btn-play-pause.transport__play, .ui-p3 #btn-play-pause { width: 88px; height: 88px; font-size: 34px; }
.p3-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.p3-chips[hidden] { display: none; }
.p3-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; background: #fff; border: 1px solid #E1DCCF; font: 600 13px/1 system-ui, sans-serif; color: #1b1b18; }
.p3-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #8C918D; }
.p3-chip--ok::before { background: #1F7A4D; } .p3-chip--bad::before { background: #C8402E; }
.p3-weakgps { display: grid; gap: 2px; margin: 8px 0; padding: 12px 14px; border-radius: 14px; background: #FBE3DD; color: #6E1F12; font: 500 14px/1.35 system-ui, sans-serif; }
.p3-weakgps[hidden] { display: none; }
.p3-weakgps b { font-size: 16px; }
.p3-justheard { display: flex; align-items: center; gap: 12px; margin: 10px 0; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid #E1DCCF; }
.p3-justheard[hidden] { display: none; }
.p3-jh__ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #1F7A4D; color: #fff; font-weight: 800; }
.p3-jh__tx { flex: 1; display: grid; min-width: 0; }
.p3-jh__eyebrow { font: 800 12px/1.3 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #1F7A4D; }
.p3-jh__title { font: 700 16px/1.3 system-ui, sans-serif; color: #163B2E; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p3-jh__replay { flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid #163B2E; background: #fff; color: #163B2E; font: 700 15px system-ui, sans-serif; cursor: pointer; }
.p3-offchip { margin-left: auto; flex: none; font: 700 13px/1 system-ui, sans-serif; color: #CFE8D7; white-space: nowrap; }
.p3-offchip[hidden] { display: none; }
.ui-p3.v13-active #p3-weakgps, .ui-p3.v13-active #p3-chips { order: 1 !important; }
.ui-p3.v13-active #p3-justheard { order: 5 !important; }
/* D-269 Phase 2 fix (found in Phase 5): the larger Play/Pause lost to the compact "map on" rule above (64 px), so it never showed during a tour */
body.ui-p3.v13-active #btn-play-pause, body.ui-p3.v13-active.p3-map-on .v13-card #btn-play-pause { width: 88px !important; height: 88px !important; font-size: 34px !important; }
/* D-269 Phase 5: driving mode, OPTION A -- the same player, simplified: 120 px Play/Pause, larger -15 / Skip, no Replay or Speed */
body.ui-p3.p3-drive.v13-active #btn-play-pause, body.ui-p3.p3-drive.v13-active.p3-map-on .v13-card #btn-play-pause { width: 120px !important; height: 120px !important; font-size: 44px !important; }
body.ui-p3.p3-drive.v13-active #btn-rewind, body.ui-p3.p3-drive.v13-active #v15-skip,
body.ui-p3.p3-drive.v13-active.p3-map-on .v13-card #btn-rewind, body.ui-p3.p3-drive.v13-active.p3-map-on .v13-card #v15-skip { width: 72px !important; height: 72px !important; }
body.ui-p3.p3-drive.v13-active #mg-replay, body.ui-p3.p3-drive.v13-active #mg-speed, body.ui-p3.p3-drive #p3-pills { display: none !important; }
.p3-chip--wait::before { background: #E07B1F; }

/* ELI 19 Oct (P1-B): the Speed pill whenever a tour is active (not only while a story plays); the progress line is a seek slider with a
   44 px touch target around the 5 px bar. Driving mode still hides Speed (the rule above, D-269 Phase 5 Option A). */
.ui-p3.v13-active .p3-pills { display: flex; }
.v15-bar.p3-seek { position: relative; cursor: pointer; touch-action: none; }
.v15-bar.p3-seek::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; bottom: -20px; }
.v15-bar.p3-seek:focus-visible { outline: 3px solid #1F3B2D; outline-offset: 6px; }

/* ELI 19 Oct (P2): the main Play button's triangle is centred by its visual weight, not its box (a triangle's box centre sits left of its
   mass), and drawn as text, never as an iOS colour emoji (the U+FE0E in the glyph). */
#btn-play-pause .pp-g { display: inline-block; line-height: 1; font-family: system-ui, -apple-system, sans-serif; }
#btn-play-pause .pp-g--play { transform: translateX(9%); }

/* OWNER RETEST 19 Oct (B): a plan page has ONE Start (the sticky bar) and one "Not now"; the top copies stay in the DOM for the player's wiring */
body.p3-plan-shell:not(.v13-active) #start-tour-btn, body.p3-plan-shell #p3-notnow { display: none !important; }

/* Director 19 Oct: the tour PITCH directly under the title on the hero, above the stats -- readable on a phone before the Start button */
.v13-hero .v13-hero__pitch { margin: 8px 0 10px; font-size: 16px; line-height: 1.45; font-weight: 500; color: inherit; opacity: .96; max-width: 38em; }

/* OWNER RECHECK 19 Oct: a cluster pill on ANY map never grows past 90 px and never wraps (atlas-cluster.js picks a label that fits) */
.stop-dot--grp, .ml-pin--grp, .ie-pinnum.grp, .pr-pin { max-width: 90px; white-space: nowrap; }
/* the full map draws pins larger: a group pill keeps a compact font so "N stories" always fits inside 90 px, never clipped ("6 storie") */
.stop-dot.stop-dot--grp, .ui-p3 .stop-dot.stop-dot--grp, body.p3-mapfull .stop-dot.stop-dot--grp { font-size: 12px !important; letter-spacing: 0; padding: 0 7px; overflow: visible; }

/* RC1f (owner 20 Oct: "the 'Stop 1 of 38…' pill, the 'Close map' pill and the player card cover most of the full map"): small overlays.
   Budget: everything drawn over a map covers <= 15 % of it. The whole progress label stays (owner test 8, 18 Oct), as a small chip. */
.ui-p3.p3-mapfull .p3-mapbar { align-items: flex-start; gap: 8px; }
.ui-p3 .p3-mapbar__back { min-height: 44px !important; height: 44px; padding: 0 12px !important; gap: 6px; border: 7px solid transparent !important; background-clip: padding-box !important; font-size: 13px !important; box-shadow: inset 0 0 0 1.5px var(--p3-forest, #163B2E) !important; flex: 0 0 auto; }   /* a 30 px pill inside the 44 px touch target */
.ui-p3 .p3-mapbar__back .p3-x { font-size: 13px; }
.ui-p3 .p3-mapbar__count { padding: 5px 10px !important; font-size: 12px !important; line-height: 1.3; font-weight: 700; border-radius: 12px !important; box-shadow: 0 1px 6px rgba(0,0,0,.18) !important; max-width: calc(100% - 120px); }
/* the player card on the FULL map: one slim strip (title + Back / Play / Skip), the "Next:" row and the state line are on the top chip already */
.ui-p3.p3-mapfull #p3-mappanel .mp-card { padding: 5px 6px; border-radius: 14px; }
.ui-p3.p3-mapfull #p3-mappanel .mp-state, .ui-p3.p3-mapfull #p3-mappanel .mp-next { display: none !important; }
.ui-p3.p3-mapfull #p3-mappanel .mp-title { font-size: 13px; line-height: 16px; margin: 0 0 4px; }
.ui-p3.p3-mapfull #p3-mappanel .mp-btns button { min-height: 38px; font-size: 12px; border-radius: 10px; }
.ui-p3.p3-mapfull #p3-mappanel .mp-btns button#mp-pp { font-size: 14px; }
.ui-p3.p3-mapfull #p3-mappanel .mp-key { margin-top: 4px; padding: 1px 8px; gap: 12px; font-size: 11px; line-height: 14px; background: rgba(255,255,255,.9); }
.ui-p3.p3-mapfull #p3-mappanel .mp-key i { width: 8px; height: 8px; }
/* RC1f: the progress label moves into the card on the full map; the map keeps only the small "Close map" chip at the top */
.ui-p3.p3-mapfull .p3-mapbar__count { display: none !important; }
.ui-p3.p3-mapfull #p3-mappanel { background: #fff; border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,.22); padding: 0 0 3px; }
.ui-p3.p3-mapfull #p3-mappanel .mp-card { box-shadow: none; border: 0; }
.ui-p3.p3-mapfull #p3-mappanel .mp-key { margin-top: 0; padding: 0 8px; background: transparent; }
.ui-p3.p3-mapfull #p3-mappanel .mp-btns button { min-height: 36px; }
/* a place-named group pill keeps its own shape whatever state colours it (next / now / done) */
.ui-p3 .stop-dot.stop-dot--area, .ui-p3.p3-mapfull.v13-active .stop-dot.stop-dot--area { width: auto !important; min-width: 64px; height: 34px !important; font-size: 11px !important; }
/* RC1f: the full map starts BELOW the tour header (the header no longer covers the top of it); its controls sit just inside its top edge */
html body.ui-p3.p3-mapfull #p3-mapcard { top: var(--atlas-bb, 0px) !important; }
html body.ui-p3.p3-mapfull .p3-mapbar { top: 8px !important; }
html body.ui-p3.p3-mapfull .leaflet-top.leaflet-left { margin-top: 0 !important; }
/* RC1f (4b): with the large map on the player screen the controls below it are compact, so Play stays in reach */
.ui-p3.v13-active:has(#ml-panel:not([hidden]):not([data-collapsed="1"])) #v14-next { padding-top: 10px; padding-bottom: 10px; }
.ui-p3.v13-active:has(#ml-panel:not([hidden]):not([data-collapsed="1"])) #v14-next-title,
.ui-p3.v13-active:has(#ml-panel:not([hidden]):not([data-collapsed="1"])) .v14-card__title { font-size: 20px !important; line-height: 1.2 !important; }
.ui-p3.v13-active:has(#ml-panel:not([hidden]):not([data-collapsed="1"])) #v14-next-dist { font-size: 14px !important; }
.ui-p3.v13-active:has(#ml-panel:not([hidden]):not([data-collapsed="1"])) #ml-panel { margin-top: 6px; }
/* RC1f (owner 20 Oct, 4b): the map is LARGE (>= 55 % of the screen); the player controls are compact BELOW it so the play row stays on
   screen without scrolling at 390x844. One-line status, a slim Now playing card (title, stop + time, progress, ONE control row). */
.ui-p3.v13-active.p3-map-on #v14-banner { padding: 5px 12px; }
.ui-p3.v13-active.p3-map-on #v14-banner .p3-pbar-sub, .ui-p3.v13-active.p3-map-on #v14-banner-sub { display: none; }
.ui-p3.v13-active.p3-map-on #ml-panel { margin-top: 6px; }
.ui-p3.v13-active.p3-map-on #v13-card { margin-top: 6px; padding: 6px 10px 6px; border-radius: 16px; }
.ui-p3.v13-active.p3-map-on #v13-card .v14-card__label { display: none; }
.ui-p3.v13-active.p3-map-on .v14-card__title { font-size: 18px !important; line-height: 1.15 !important; margin: 0; }
.ui-p3.v13-active.p3-map-on #p3-now-meta { font-size: 12px; margin: 0; }
.ui-p3.v13-active.p3-map-on .v15-progress { margin: 0; }
.ui-p3.v13-active.p3-map-on .v13-card .v15-controls { gap: 14px; margin-top: 0; }
.ui-p3.v13-active.p3-map-on .v13-card .v15-ctl--sm { width: 44px; height: 44px; }
.ui-p3.v13-active.p3-map-on .v13-card .v15-ctl--main { width: 56px; height: 56px; font-size: 22px; }
.ui-p3.v13-active.p3-map-on #v14-next { margin-top: 6px; padding: 6px 12px; }
.ui-p3.v13-active.p3-map-on #v14-next-title { font-size: 15px !important; }
.ui-p3.v13-active.p3-map-on #v14-next-dist, .ui-p3.v13-active.p3-map-on #p3-walk { font-size: 13px !important; }
/* RC1f: with the large map on, the Skip toast shows at the TOP (over the top of the map), never over the Now playing title below it */
.ui-p3.v13-active.p3-map-on #mg-toast { bottom: auto !important; top: calc(var(--atlas-bb, 56px) + 8px); }
/* a short phone (375x667): the Now playing card gives up its meta line so the ONE control row stays on screen */
@media (max-height: 700px) {
  .ui-p3.v13-active.p3-map-on #p3-now-meta { display: none; }
  .ui-p3.v13-active.p3-map-on .v14-card__title { font-size: 16px !important; }
  .ui-p3.v13-active.p3-map-on #v13-card { padding: 4px 10px; margin-top: 4px; }
  .ui-p3.v13-active.p3-map-on #ml-panel { margin-top: 4px; }
  .ui-p3.v13-active.p3-map-on #v14-banner { padding: 3px 12px; }
  .ui-p3.v13-active.p3-map-on #tour-status { padding-top: 3px; }
}

/* D-292: the sticky Start bar is slim while the route map is on screen -- one 44 px button, no note or "Not now" (they are on the page) */
.ui-p3 .p3-startbar.p3-startbar--slim { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
.ui-p3 .p3-startbar.p3-startbar--slim button { min-height: 44px; font-size: 16px; border-radius: 12px; }
.ui-p3 .p3-startbar.p3-startbar--slim .p3-notnow, .ui-p3 .p3-startbar.p3-startbar--slim .p3-locnote { display: none; }
/* D-292 (4) (Director 20 Oct): with the large map on, the play row stays on screen at 390x844 AND at 390x660 (Safari's visible area).
   The frozen D-269 sizes (walk 88 px, drive 120 px) are kept except while the large map shows: drive 104 px; a short screen 88 / 72 px. */
/* a full-height phone keeps the frozen drive sizes (120 / 72 px); the few pixels come from the spacing around the card instead */
body.ui-p3.p3-drive.v13-active.p3-map-on #ml-panel { margin-top: 3px !important; }
body.ui-p3.p3-drive.v13-active.p3-map-on #v13-card { margin-top: 3px !important; padding-top: 3px !important; padding-bottom: 3px !important; }
body.ui-p3.p3-drive.v13-active.p3-map-on .v14-card__title { font-size: 16px !important; line-height: 1.1 !important; }
body.ui-p3.p3-drive.v13-active.p3-map-on .v13-card .v15-controls { margin-top: -2px !important; }
@media (max-height: 700px) {
  body.ui-p3.v13-active.p3-map-on .v13-card #btn-play-pause { width: 72px !important; height: 72px !important; font-size: 28px !important; }
  body.ui-p3.p3-drive.v13-active.p3-map-on .v13-card #btn-play-pause { width: 88px !important; height: 88px !important; font-size: 34px !important; }
  body.ui-p3.p3-drive.v13-active.p3-map-on .v13-card #btn-rewind, body.ui-p3.p3-drive.v13-active.p3-map-on .v13-card #v15-skip { width: 56px !important; height: 56px !important; }
  .ui-p3.v13-active.p3-map-on .v15-progress { margin: 0 !important; }
}
/* D-292: on a short screen (Safari's ~660 px) the full map's card drops its key and slims its buttons, so overlays stay <= 15 % */
@media (max-height: 700px) {
  .ui-p3.p3-mapfull #p3-mappanel .mp-key { display: none !important; }
  .ui-p3.p3-mapfull #p3-mappanel .mp-btns button { min-height: 32px !important; }
  .ui-p3.p3-mapfull #p3-mappanel .mp-title { margin-bottom: 2px !important; }
  /* title and progress share ONE line (each ellipsised), the whole progress label stays in its title attribute and the top chip text */
  .ui-p3.p3-mapfull #p3-mappanel .mp-title, .ui-p3.p3-mapfull #p3-mappanel .mp-prog { display: inline-block !important; vertical-align: baseline; max-width: 49%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 0 3px !important; }
}