/* ================================================================ The luxe pass (4 Nov 2026)
   From the mockup Alex approved (public/mock/luxe.html, "Okay, build it"). Loaded last, so it sets
   the final look over app.css and look.css without rewriting them.
   A. Foundation: Inter with tight display tracking and open, tabular figures; one surface system on
      an 8 pt grid (radii 12, 20, 28); flat pill buttons that scale when pressed; orange only on the
      primary action, the active tab, status and Add to my plan; grouped rows; a segmented date
      control; the brand on Home and Explore only; a floating glass tab bar.
   B. Motion: pages push in from the right and pop back, windows spring up and drag down to close,
      things you press answer your finger, tabs cross-fade once per move, the place photo drifts as
      you scroll, placeholders breathe. Transform and opacity only, nothing blurred while it moves,
      and none of it when the phone asks for reduced motion.
   C. Details: a sun glow that breathes and a haze that drifts over every place photo, empty states
      as cards, the map's buttons in the same glass, small done moments. */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/inter-latin-opsz-normal.woff2') format('woff2-variations'), url('../fonts/inter-latin-opsz-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------------------------------------------------------------- tokens */
:root {
  --pd-font: 'Inter', 'Atkinson Hyperlegible', 'Atkinson Hyperlegible Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --lx-card: #FFFFFF; --lx-card-2: #FFFFFF; --lx-line: rgba(20, 34, 58, 0.09); --lx-line-2: rgba(20, 34, 58, 0.14);
  --lx-ink: #141B2E; --lx-ink-2: #4A5268; --lx-ink-3: #6B7388;
  --lx-glass: rgba(255, 255, 255, 0.72); --lx-glass-line: rgba(20, 34, 58, 0.10);
  --lx-accent: #C9500F; --lx-accent-ink: #C9500F; --lx-icon: #D25A16;
  --lx-btn-top: #E06A2C; --lx-btn-bot: #B5460B; --lx-btn-glow: rgba(201, 80, 15, 0.30);
  --lx-plan-a: rgba(232, 98, 30, 0.12); --lx-plan-b: rgba(232, 98, 30, 0.06); --lx-plan-line: rgba(201, 80, 15, 0.38);
  --lx-shadow: 0 12px 32px rgba(40, 30, 20, 0.14); --lx-tile-shadow: 0 10px 24px rgba(40, 30, 20, 0.16);
  --lx-sel: #FFFFFF; --lx-sel-shadow: 0 2px 8px rgba(40, 30, 20, 0.12), 0 0 0 1px var(--lx-line);
  --lx-r-s: 12px; --lx-r-m: 20px; --lx-r-l: 28px;
  --lx-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --tabs-h: calc(var(--pd-size-tab-bar) + 12px);
  --lx-page-end: #FFF0E1;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --lx-card: #151D33; --lx-card-2: #1E2846; --lx-line: rgba(255, 255, 255, 0.08); --lx-line-2: rgba(255, 255, 255, 0.14);
  --lx-ink: #F5F7FB; --lx-ink-2: rgba(245, 247, 251, 0.70); --lx-ink-3: rgba(245, 247, 251, 0.52);
  --lx-glass: rgba(21, 29, 51, 0.66); --lx-glass-line: rgba(255, 255, 255, 0.12);
  --lx-accent: #FF8A3D; --lx-accent-ink: #FFA165; --lx-icon: #FF9B52;
  --lx-plan-a: rgba(255, 138, 61, 0.16); --lx-plan-b: rgba(255, 138, 61, 0.08); --lx-plan-line: rgba(255, 138, 61, 0.36);
  --lx-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); --lx-tile-shadow: 0 10px 24px rgba(0, 0, 0, 0.40);
  --lx-sel: #26315A; --lx-sel-shadow: 0 2px 8px rgba(0, 0, 0, 0.30), 0 0 0 1px var(--lx-line-2);
  --lx-page-end: #1A1729;
} }
:root[data-theme="dark"] {
  --lx-card: #151D33; --lx-card-2: #1E2846; --lx-line: rgba(255, 255, 255, 0.08); --lx-line-2: rgba(255, 255, 255, 0.14);
  --lx-ink: #F5F7FB; --lx-ink-2: rgba(245, 247, 251, 0.70); --lx-ink-3: rgba(245, 247, 251, 0.52);
  --lx-glass: rgba(21, 29, 51, 0.66); --lx-glass-line: rgba(255, 255, 255, 0.12);
  --lx-accent: #FF8A3D; --lx-accent-ink: #FFA165; --lx-icon: #FF9B52;
  --lx-plan-a: rgba(255, 138, 61, 0.16); --lx-plan-b: rgba(255, 138, 61, 0.08); --lx-plan-line: rgba(255, 138, 61, 0.36);
  --lx-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); --lx-tile-shadow: 0 10px 24px rgba(0, 0, 0, 0.40);
  --lx-sel: #26315A; --lx-sel-shadow: 0 2px 8px rgba(0, 0, 0, 0.30), 0 0 0 1px var(--lx-line-2);
  --lx-page-end: #1A1729;
}
/* The older surface tokens now all point at the one system. */
:root, :root[data-theme="dark"] {
  --dusk-card: var(--lx-card); --dusk-edge: var(--lx-line); --dusk-ink: var(--lx-ink); --dusk-ink-2: var(--lx-ink-2); --dusk-link: var(--lx-ink);
  --rb-card: var(--lx-card); --rb-line: var(--lx-line); --rb-ink-2: var(--lx-ink-2); --rb-chip: var(--lx-card-2); --rb-icon: var(--lx-icon);
  --rb-shadow: 0 0 0 1px var(--lx-line), var(--lx-tile-shadow);
  --look-card: var(--lx-card); --look-hairline: var(--lx-line); --look-glass: var(--lx-glass); --look-glass-strong: var(--lx-glass); --look-edge: var(--lx-glass-line);
  --look-depth: 0 0 0 1px var(--lx-line), 0 6px 16px rgba(0, 0, 0, 0.08);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --dusk-card: var(--lx-card); --dusk-edge: var(--lx-line); --dusk-ink: var(--lx-ink); --dusk-ink-2: var(--lx-ink-2); --dusk-link: var(--lx-ink);
  --rb-card: var(--lx-card); --rb-line: var(--lx-line); --rb-ink-2: var(--lx-ink-2); --rb-chip: var(--lx-card-2); --rb-icon: var(--lx-icon);
  --rb-shadow: 0 0 0 1px var(--lx-line), var(--lx-tile-shadow);
  --look-card: var(--lx-card); --look-hairline: var(--lx-line); --look-glass: var(--lx-glass); --look-glass-strong: var(--lx-glass); --look-edge: var(--lx-glass-line);
  --look-depth: 0 0 0 1px var(--lx-line), 0 6px 16px rgba(0, 0, 0, 0.3);
} }

/* ---------------------------------------------------------------- A. type */
body, button, input, select, textarea { font-family: var(--pd-font); }
body { font-feature-settings: "cv11", "ss01"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3, .pd-display, .pd-title, .pd-heading, .hero-title, .over h2, .done-card h2 { letter-spacing: -0.022em; }
.pd-display, .hero-title, .explore .hero h1, .sphoto .over h2, .guide .hero-title { font-weight: 800; letter-spacing: -0.035em; }
.pd-title { font-weight: 750; letter-spacing: -0.028em; }
.night b, .ring, .ring b, .stag, .cstate b, .chipst, .stat b, time, .temp, .pmeta, .fchip { font-variant-numeric: tabular-nums; }
.ssec h3 { font-size: 12px; letter-spacing: 0.08em; font-weight: 700; color: var(--lx-ink-3); }

/* ---------------------------------------------------------------- A. buttons: flat pills */
.press, .btn-primary, .btn-secondary {
  --b-text: #fff;
  min-height: 52px; padding: 0 22px; border-radius: 999px; margin-bottom: 0; gap: 9px;
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  background: linear-gradient(180deg, var(--lx-btn-top), var(--lx-btn-bot));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.30) inset, 0 10px 24px var(--lx-btn-glow);
  text-shadow: 0 1px 1px rgba(80, 30, 0, 0.25);
  transition: transform 0.14s var(--lx-spring), box-shadow 0.2s ease, opacity 0.2s ease;
}
.press:active, .btn-primary:active, .btn-secondary:active { transform: scale(0.97); background: linear-gradient(180deg, var(--lx-btn-top), var(--lx-btn-bot)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24) inset, 0 4px 12px var(--lx-btn-glow); }
.press.ghost, .btn-secondary { --b-text: var(--lx-ink); background: var(--lx-glass); color: var(--lx-ink); text-shadow: none;
  box-shadow: 0 0 0 1px var(--lx-glass-line) inset; -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.press.ghost:active, .btn-secondary:active { background: var(--lx-glass); box-shadow: 0 0 0 1px var(--lx-glass-line) inset; }
.press.violet, .press.green { background: var(--lx-card-2); color: var(--lx-ink); text-shadow: none; box-shadow: 0 0 0 1px var(--lx-line-2) inset; }
.press.violet .pd-icon, .press.green .pd-icon, .press.ghost .pd-icon { color: var(--lx-icon); }
.press.big, .btn-big { min-height: 56px; font-size: 17px; border-radius: 999px; }
.press.small { min-height: 42px; padding: 0 16px; font-size: 15px; border-radius: 999px; }
.press.icon-only { width: 52px; padding: 0; }
.press.small.icon-only { width: 42px; }
.ccard .cfoot .press { min-height: 44px; }
.linkish, .inline-more > summary { color: var(--lx-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--lx-line-2); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.src-card details summary { color: var(--lx-ink); }
main a:not([class]), .sheet a:not([class]) { color: var(--lx-ink); text-decoration-color: var(--lx-line-2); text-underline-offset: 3px; }

/* ---------------------------------------------------------------- A. surfaces */
.ccard { border-radius: var(--lx-r-m); border: 0; box-shadow: 0 0 0 1px var(--lx-line), var(--lx-tile-shadow); }
.htile { border-radius: var(--lx-r-m); box-shadow: 0 0 0 1px var(--lx-line), var(--lx-tile-shadow); }
:root:not([data-theme="dark"]) .htile, .htile:hover { box-shadow: 0 0 0 1px var(--lx-line), var(--lx-tile-shadow); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .htile { box-shadow: 0 0 0 1px var(--lx-line), var(--lx-tile-shadow); } }
.htile:active { transform: scale(0.97); box-shadow: 0 0 0 1px var(--lx-line), 0 4px 12px rgba(0, 0, 0, 0.2); }
.htile .chipst { background: rgba(10, 14, 28, 0.48); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16) inset; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 0; }
.htile .chipst.open { background: rgba(28, 104, 76, 0.66); }
.htile.skel { background: var(--lx-card); box-shadow: 0 0 0 1px var(--lx-line) inset; }

.guide-steps li, .src-card, .mtile, .ringcard, .done-card, .where-pill, .where-row .mchip, .mchip { box-shadow: 0 0 0 1px var(--lx-line) inset; border: 0; background: var(--lx-card); color: var(--lx-ink); }
.guide-steps li { border-radius: var(--lx-r-m); }
.src-card, .ringcard { border-radius: var(--lx-r-m); }
.mtile { border-radius: 18px; }
.mtile .pd-icon { color: var(--lx-icon); }
.mtile[aria-expanded="true"] { background: var(--lx-sel); color: var(--lx-ink); box-shadow: var(--lx-sel-shadow); }
.mtile[aria-expanded="true"] .pd-icon { color: var(--lx-icon); }
.done-card { border-radius: var(--lx-r-l); box-shadow: 0 0 0 1px var(--lx-line) inset, 0 30px 80px rgba(0, 0, 0, 0.35); }
.where-pill { min-height: 40px; font-weight: 600; }
.where-pill em { color: var(--lx-ink); }
.where-pill .pd-icon:first-child { color: var(--lx-icon); }
.fchip { background: var(--lx-card-2); border-radius: 999px; box-shadow: 0 0 0 1px var(--lx-line) inset; }
.badge { border: 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16) inset; }

/* Grouped rows: one card, hairlines between the rows (Settings on a good phone). */
.srows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; background: var(--lx-card); border-radius: var(--lx-r-m); box-shadow: 0 0 0 1px var(--lx-line) inset; overflow: hidden; }
.srows > li { margin: 0; }
.srows > li + li, .srows > .srow + .srow { box-shadow: 0 -1px 0 var(--lx-line); }
.srows .srow, .srows > li > .srow { border: 0; border-radius: 0; background: transparent; box-shadow: none; min-height: 56px; padding: 12px 16px; width: 100%; color: var(--lx-ink); font: inherit; text-align: left; }
.srow { border: 0; border-radius: var(--lx-r-m); background: var(--lx-card); box-shadow: 0 0 0 1px var(--lx-line) inset; }
.srow b { font-weight: 600; font-size: 16px; } .srow span { color: var(--lx-ink-2); font-size: 13.5px; }
.srow .row-ico .pd-icon, .srow > .pd-icon { color: var(--lx-icon); }
button.srow { cursor: pointer; transition: background 0.15s ease, transform 0.14s var(--lx-spring); }
button.srow:active, a.srow:active { background: var(--lx-line); }
.stag { border-radius: 999px; padding: 5px 11px; }
.fitlist li { line-height: 1.4; }

/* Rows that do something: plan, next open, heads up. */
.planline { border: 0; border-radius: var(--lx-r-m); padding: 14px 16px; font-weight: 600; color: var(--lx-ink);
  background: linear-gradient(180deg, var(--lx-plan-a), var(--lx-plan-b)); box-shadow: 0 0 0 1px var(--lx-plan-line) inset; }
.planline .pd-icon { color: var(--lx-icon); }
.planline > .pd-icon:last-child { color: var(--lx-icon); width: 16px; height: 16px; }
.planline b { font-weight: 700; }
/* A title and a line under it (Write a review, Add a hike, Plan another day): the title on its own line. */
.planline > span:has(> b:first-child) { font-weight: 500; font-size: 14px; line-height: 1.4; color: var(--lx-ink-2); }
.planline > span > b:first-child { display: block; font-size: 15.5px; color: var(--lx-ink); }
.planline.done { background: var(--pd-status-open-bg); color: var(--pd-status-open-fg); box-shadow: 0 0 0 1px color-mix(in srgb, var(--pd-status-open-fg) 30%, transparent) inset; }
.planline.done .pd-icon { color: inherit; }
.nextopen { border: 0; border-radius: var(--lx-r-m); padding: 14px 16px; background: var(--lx-card); color: var(--lx-ink); box-shadow: 0 0 0 1px var(--lx-line) inset; font-weight: 600; }
.nextopen .pd-icon { color: var(--lx-icon); }
.nextopen.wait, .nextopen.none { background: var(--lx-card); color: var(--lx-ink-2); font-weight: 500; }
.nextopen.soon { box-shadow: 0 0 0 1px color-mix(in srgb, var(--pd-status-opens-soon-fg) 30%, transparent) inset; }
.headsup { border: 0; border-radius: var(--lx-r-m); padding: 14px 16px; box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent) inset; }
.headsup.mine-day { background: var(--lx-card); color: var(--lx-ink); box-shadow: 0 0 0 1px var(--lx-line) inset; }
.night { border: 0; border-radius: 16px; background: var(--lx-card); box-shadow: 0 0 0 1px var(--lx-line) inset; }
.night.taken, .night.free, .night.notyet { box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent) inset; }
.night b { font-weight: 700; letter-spacing: -0.01em; }
.sheet-note { border-radius: 16px; }

/* Empty states: a quiet card with an icon, not a dashed box. */
.empty { display: flex; align-items: center; gap: 12px; border: 0; border-radius: var(--lx-r-m); padding: 16px; background: var(--lx-card); color: var(--lx-ink-2); box-shadow: 0 0 0 1px var(--lx-line) inset; line-height: 1.4; }
.empty > .pd-icon { flex: none; width: 22px; height: 22px; color: var(--lx-ink-3); }
.empty[aria-busy="true"] > .pd-icon { color: var(--lx-icon); }

/* Chips: pills; picked is lifted and outlined, not filled orange. */
.chip { border-radius: 999px; background: var(--lx-card); color: var(--lx-ink); box-shadow: 0 0 0 1px var(--lx-line) inset; border: 0; font-weight: 600; }
.chip.is-on, .chip:has(input:checked) { background: linear-gradient(180deg, var(--lx-plan-a), var(--lx-plan-b)); color: var(--lx-ink); box-shadow: 0 0 0 1.5px var(--lx-accent) inset; border: 0; }

/* The date chips as one segmented control. */
.dchips { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 2px; padding: 4px; border-radius: 24px; background: var(--lx-card); box-shadow: 0 0 0 1px var(--lx-line) inset; }
.dchip { justify-content: center; text-align: center; flex-wrap: wrap; row-gap: 0; min-height: 40px; padding: 4px 10px; border: 0; border-radius: 20px; background: transparent; color: var(--lx-ink-2); font-weight: 600; font-size: 14.5px; line-height: 1.2;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.14s var(--lx-spring); }
.dchip small { display: block; width: 100%; font-size: 11.5px; font-weight: 500; opacity: 0.85; }
.dchip.on { background: var(--lx-sel); color: var(--lx-ink); box-shadow: var(--lx-sel-shadow); }
.dchip.off { opacity: 0.42; }
.dchip:active:not(.off) { transform: scale(0.97); }

/* ---------------------------------------------------------------- A. the top bar */
.bar.top { background: var(--lx-glass); box-shadow: 0 1px 0 var(--lx-line); border-bottom: 0; -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); }
body.dusk:not(.home-only):not(.page-open) .bar.top { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.bar-btn { width: 40px; height: 40px; background: var(--lx-glass); box-shadow: 0 0 0 1px var(--lx-glass-line) inset; color: var(--lx-ink); }
body.dusk:not(.home-only):not(.page-open) .bar-btn { background: rgba(10, 14, 28, 0.38); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset; color: #fff; }
.bar-btn .pd-icon { width: 20px; height: 20px; }
.bar-end { gap: 8px; }
/* The brand on the front door only; inside, the back arrow and the screen's name. */
body.inner .brand, body.page-open .brand { display: none; }
body.dusk:not(.page-open) .crumb, body.dusk:not(.page-open) .hback { display: none; }
.crumb { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--lx-ink); }
.crumb:not(:empty)::before { content: none; }
.hback { width: 40px; height: 40px; margin-left: -6px; border-radius: 50%; color: var(--lx-ink); }
.hback:active { background: var(--lx-line); }
body.dusk:not(.page-open) .brand img.lk-light { filter: none; }

/* ---------------------------------------------------------------- A. the floating tab bar */
.bar.tabs { left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(12px + var(--safe-bottom)); height: var(--pd-size-tab-bar);
  padding: 0 6px; border: 0; border-radius: 999px; background: var(--lx-glass); box-shadow: 0 0 0 1px var(--lx-glass-line) inset, var(--lx-shadow);
  -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); }
@media (min-width: 560px) { .bar.tabs { left: 50%; right: auto; width: 420px; margin-left: -210px; } }
.tabs a { min-height: 0; height: 100%; gap: 3px; font-size: 11.5px; font-weight: 600; letter-spacing: 0; color: var(--lx-ink-2); border-radius: 999px; transition: color 0.2s ease, transform 0.14s var(--lx-spring); }
.tabs a .pd-icon { width: 24px; height: 24px; transition: transform 0.25s var(--lx-spring); }
.tabs a[aria-current="page"] { color: var(--lx-accent-ink); }
.tabs a[aria-current="page"] .pd-icon { transform: none; }
.tabs a:active { transform: scale(0.94); }
.planbar { left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(var(--tabs-h) + var(--safe-bottom) + 8px); border-radius: var(--lx-r-m);
  background: var(--lx-glass); color: var(--lx-ink); box-shadow: 0 0 0 1px var(--lx-glass-line) inset, var(--lx-shadow); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); }
.planbar .pd-icon { color: var(--lx-icon); }

/* ---------------------------------------------------------------- B. pages push, windows spring */
.sheet { transition: transform 0.5s var(--lx-spring); will-change: transform; }
.sheet:not(.page) { border-radius: var(--lx-r-l) var(--lx-r-l) 0 0; box-shadow: 0 0 0 1px var(--lx-line), 0 -20px 60px rgba(0, 0, 0, 0.3); }
.sheet.dragging, .sheet.dragging + .sbar { transition: none; }
.grab { cursor: grab; touch-action: none; height: 22px; padding-top: 8px; }
.grab span { width: 40px; background: var(--lx-ink-3); box-shadow: none; }
.sphoto .grab span, .sheet .grab:has(+ .sphoto) span { background: rgba(255, 255, 255, 0.75); }
/* A page: opaque, slides in from the right over a gentle dim; the screen behind it never moves. */
.sheet.page { top: calc(var(--bar-h) + var(--safe-top)); bottom: 0; opacity: 1; transform: translate3d(100%, 0, 0); transition: transform 0.42s var(--lx-spring); box-shadow: -12px 0 40px rgba(0, 0, 0, 0.28); }
.sheet.page.on { transform: none; }
.scrim.page { display: block !important; top: calc(var(--bar-h) + var(--safe-top)); pointer-events: none; background: rgba(5, 8, 16, 0.36); -webkit-backdrop-filter: none; backdrop-filter: none; transition: opacity 0.42s ease; }
.scrim.page[hidden] { display: none !important; }
.sheet.page .sbody { padding-bottom: calc(var(--tabs-h) + var(--safe-bottom) + 96px); }
body.page-open .sbar { bottom: calc(var(--tabs-h) + var(--safe-bottom) + 4px); left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); padding: 0;
  background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; transform: translate3d(0, 24px, 0); opacity: 0; transition: transform 0.42s var(--lx-spring) 0.06s, opacity 0.3s ease 0.06s; }
body.page-open .sbar.on { transform: none; opacity: 1; }
body.page-open .sbar .press { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.30) inset, 0 10px 24px var(--lx-btn-glow), 0 8px 24px rgba(0, 0, 0, 0.18); }
body.page-open .sbar .press.ghost { box-shadow: 0 0 0 1px var(--lx-glass-line) inset, var(--lx-shadow); }
@media (min-width: 760px) { body.page-open .sbar { left: 50%; right: auto; width: 640px; margin-left: -320px; } }
.sbar { background: var(--lx-glass); border-top: 0; box-shadow: 0 -1px 0 var(--lx-line); }

/* Things you press answer your finger. */
.ccard, .mtile, .planline, .nextopen, .headsup, .ringcard, .where-pill, .mchip, .chip, .bar-btn, .src-card { transition: transform 0.14s var(--lx-spring), background 0.2s ease, box-shadow 0.2s ease; }
.ccard:active, .mtile:active, a.planline:active, button.planline:active, button.nextopen:active, .headsup:active, .where-pill:active, .mchip:active, .chip:active, .bar-btn:active { transform: scale(0.97); }
@media (hover: hover) { .ccard:hover { transform: translateY(-2px); } }

/* Placeholders breathe (opacity only, so nothing shifts). */
@keyframes lx-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.htile.skel, .night.wait, .nextopen.wait, .empty[aria-busy="true"] { animation: lx-breathe 1.8s ease-in-out infinite; }

/* The place photo drifts slower than the page as you scroll. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes lx-parallax { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(0, 72px, 0) scale(1.08); } }
    .sphoto > .scene, .sphoto > .cimg { animation: lx-parallax linear both; animation-timeline: scroll(nearest block); animation-range: 0 360px; }
  }
}

/* ---------------------------------------------------------------- C. the living hero */
.lx-glow, .lx-haze { position: absolute; pointer-events: none; z-index: 1; }
.lx-glow { left: 28%; top: 10%; width: 64%; height: 56%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 226, 180, 0.42), rgba(255, 226, 180, 0) 100%); animation: lx-sun 7s ease-in-out infinite; }
.lx-haze { left: -30%; top: 38%; width: 160%; height: 28%; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.09) 35%, rgba(255, 255, 255, 0.04) 60%, rgba(255, 255, 255, 0)); animation: lx-drift 60s linear infinite alternate; }
@keyframes lx-sun { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(1.08); } }
@keyframes lx-drift { from { transform: translate3d(-8%, 0, 0); } to { transform: translate3d(12%, 0, 0); } }
.sphoto .over, .sphoto .sclose, .sphoto .pcredit, .sphoto .badge, .explore .hero-in { z-index: 2; }
.sclose { border: 0; background: rgba(10, 14, 28, 0.38); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset; }

/* The map's buttons in the same glass. */
.leaflet-container { font-family: var(--pd-font); background: var(--lx-card-2); }
.leaflet-bar { border: 0 !important; border-radius: 14px !important; overflow: hidden; box-shadow: 0 0 0 1px var(--lx-glass-line) inset, var(--lx-shadow) !important; background: var(--lx-glass); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.leaflet-bar a, .leaflet-bar a:hover { width: 40px !important; height: 40px !important; line-height: 40px !important; background: transparent !important; color: var(--lx-ink) !important; border-bottom: 1px solid var(--lx-line) !important; font: 600 20px/40px var(--pd-font) !important; }
.leaflet-bar a:last-child { border-bottom: 0 !important; }
.leaflet-bar a:active { background: var(--lx-line) !important; }
.leaflet-control-attribution { background: var(--lx-glass) !important; color: var(--lx-ink-2) !important; border-radius: 10px 0 0 0; font-size: 10px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.leaflet-control-attribution a { color: var(--lx-ink) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--lx-card) !important; color: var(--lx-ink) !important; box-shadow: 0 0 0 1px var(--lx-line), var(--lx-shadow) !important; }
.leaflet-popup-content-wrapper { border-radius: 16px !important; }
.pmap { border-radius: var(--lx-r-m); overflow: hidden; box-shadow: 0 0 0 1px var(--lx-line); }

/* Small done moments: the card springs in and its tick draws itself. */
.done-card { transition: transform 0.5s cubic-bezier(0.2, 1.3, 0.3, 1), opacity 0.3s ease; transform: scale(0.9) translate3d(0, 12px, 0); }
.pdone.on .done-card { transform: none; }
.pdone { background: rgba(5, 8, 16, 0.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet.page, .sbar, body.page-open .sbar, .scrim, .done-card, .press, .tabs a, .htile, .ccard, .dchip { transition-duration: 1ms !important; }
  .lx-glow, .lx-haze, .htile.skel, .night.wait, .nextopen.wait, .empty[aria-busy="true"] { animation: none !important; }
}

/* ---------------------------------------------------------------- fit and finish (render checks) */
:root { --lx-bar: rgba(255, 252, 248, 0.90); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --lx-bar: rgba(16, 22, 40, 0.90); } }
:root[data-theme="dark"] { --lx-bar: rgba(16, 22, 40, 0.90); }
.bar.top { background: var(--lx-bar); }
/* Explore on one screen above the floating tabs: where and when share one row. */
.explore .where-row { flex-wrap: wrap; gap: 8px; } /* where and when share a row; your trip's chip takes the next */
.explore .where-pill, .explore .where-row .mchip { min-height: 38px; padding: 0 12px; gap: 6px; font-size: 14px; }
.explore .where-pill .pd-icon:first-child { width: 16px; height: 16px; }
.explore .htiles { gap: 10px; }
.explore .dash-go .press.big { min-height: 54px; }
/* The date control on one line. */
.dchip { padding: 4px 6px; font-size: 14px; white-space: nowrap; }
.dchip small { white-space: nowrap; }
/* A page's actions float over a soft fade, so text never sits right under them. */
body.page-open .sbar::before { content: ""; position: absolute; z-index: -1; left: -24px; right: -24px; top: -44px; bottom: calc(-1 * (var(--tabs-h) + var(--safe-bottom) + 4px)); pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--dusk-ground) 0%, transparent) 0%, var(--dusk-ground) 34%); }
body.page-open .sbar:empty::before { content: none; }
/* Explore's photo runs up under the clear top bar, as in the mockup; the white lockup sits on it. */
.explore .hero { margin-top: calc(-1 * (var(--space) + var(--bar-h) + var(--safe-top))); padding-top: calc(var(--bar-h) + var(--safe-top)); min-height: calc(clamp(150px, 20dvh, 220px) + var(--bar-h) + var(--safe-top)); }
@media (min-width: 720px) { .explore .hero { margin-top: 0; padding-top: 0; min-height: clamp(150px, 20dvh, 220px); } }
.explore .hero .pcredit { top: calc(var(--bar-h) + var(--safe-top) + 4px); }
body.dusk:not(.home-only):not(.page-open) .brand .lk-light { display: none; }
body.dusk:not(.home-only):not(.page-open) .brand .lk-dark { display: inline; }
/* The quick facts on a place: figures on one line, labels tight. */
.now-tile { border-radius: 18px; gap: 4px; padding: 12px 4px 10px; }
.now-tile b { font-size: clamp(15px, 4.4vw, 18px); letter-spacing: -0.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.now-tile span { font-size: 11.5px; line-height: 1.25; color: var(--lx-ink-2); }
/* Glass a little denser, so what scrolls under it stays out of the way. */
:root { --lx-glass: rgba(255, 255, 255, 0.82); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --lx-glass: rgba(21, 29, 51, 0.78); } }
:root[data-theme="dark"] { --lx-glass: rgba(21, 29, 51, 0.78); }
/* Three actions share a row: tighter pills so the words fit. */
.sbar .press { padding: 0 12px; font-size: 15px; gap: 6px; min-width: 0; }
.sbar .press .pd-icon { width: 18px; height: 18px; }
/* A long picked range wraps inside its segment instead of spilling out. */
.dchip { white-space: normal; }
.dchip.on[data-action="sheet-dates-pick"] { font-size: 13px; line-height: 1.15; }
/* The results filters: pills on the one surface; More filters quiet, not dashed. */
.rchip { border: 0 !important; background: var(--lx-card); color: var(--lx-ink); box-shadow: 0 0 0 1px var(--lx-line) inset; border-radius: 999px; transition: transform 0.14s var(--lx-spring); }
.rchip:active { transform: scale(0.97); }
.rchip.ghost { background: transparent; color: var(--lx-ink-2); box-shadow: 0 0 0 1px var(--lx-line-2) inset; }
.rchip .pd-icon { color: var(--lx-icon); }
.rchip.is-on, .rchip.is-open { background: linear-gradient(180deg, var(--lx-plan-a), var(--lx-plan-b)); color: var(--lx-ink); box-shadow: 0 0 0 1.5px var(--lx-accent) inset; }
.rseg { border: 0; padding: 3px; gap: 2px; background: var(--lx-card); box-shadow: 0 0 0 1px var(--lx-line) inset; }
.rseg .chip { border-radius: 999px; min-height: 38px; background: transparent; box-shadow: none; color: var(--lx-ink-2); }
.rseg .chip.is-on, .rseg .chip:has(input:checked) { background: var(--lx-sel); color: var(--lx-ink); box-shadow: var(--lx-sel-shadow); }
/* On a wide screen the page's actions span its column, over a fade the full width of the window. */
@media (min-width: 760px) { body.page-open .sbar { width: 728px; margin-left: -364px; } }
body.page-open .sbar::before { left: -100vw; right: -100vw; }
/* The page's actions sit 12 px above the tab bar, the same gap the tab bar keeps from the screen's
   edge, and with no hairline over them (4 Nov 2026, Alex: 'a little too close to the button bar'). */
body.page-open .sbar { bottom: calc(var(--tabs-h) + var(--safe-bottom) + 12px); box-shadow: none; }
/* Share in the action row is a round icon button (as in the mockup), so the two labelled actions get
   the room they need; the word stays in the button for screen readers. */
.sbar .bar3 { grid-template-columns: 1.15fr 1fr 52px; }
.sbar .press[data-action^="share"] { width: 52px; padding: 0; font-size: 0; gap: 0; }
.sbar .press[data-action^="share"] .pd-icon { width: 20px; height: 20px; }
.sbar .press[data-action^="share"] .pd-icon { display: inline-block !important; }
/* The map's two tools: where I am, and save for no signal (4 Nov 2026). */
.pd-maptools a { display: grid !important; place-items: center; position: relative; }
.pd-maptools .pd-icon { width: 20px; height: 20px; }
.pd-maptools a.on { color: var(--lx-accent-ink) !important; }
/* A line over the map: the wrong-turn warning, or how to read the land map (4 Nov 2026). */
/* Top right of the map, clear of the tools on the left and above Leaflet's own controls (1000). */
.pd-maptip { position: absolute; left: 64px; right: 10px; top: 10px; z-index: 1001; padding: 10px 14px; border-radius: 14px; background: rgba(12, 18, 36, 0.86); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.35; box-shadow: 0 6px 20px rgba(0,0,0,.3); pointer-events: none; }
.pd-maptip[hidden] { display: none; }
.pd-maptools a.busy .pd-icon { opacity: 0.25; }
.pd-maptools a.busy::after { content: attr(data-p); position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px/1 var(--pd-font); color: var(--lx-ink); }
/* Reviews (4 Nov 2026). */
.reviews .rv-avg { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.reviews .rv-avg b { font-size: 20px; letter-spacing: -0.02em; } .reviews .rv-avg span { color: var(--lx-ink-2); font-size: 14px; }
.rv-stars { color: var(--lx-accent); letter-spacing: 1px; font-size: 14px; } .rv-stars i { font-style: normal; color: var(--lx-line-2); }
.rv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rv { padding: 14px 16px; border-radius: var(--lx-r-m); background: var(--lx-card); box-shadow: 0 0 0 1px var(--lx-line) inset; display: grid; gap: 6px; min-width: 0; }
.rv-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rv-top b { font-size: 14.5px; } .rv-top span { color: var(--lx-ink-3); font-size: 13px; }
.rv-more { margin-left: auto; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--lx-ink-3); cursor: pointer; }
.rv-more .pd-icon { width: 16px; height: 16px; transform: rotate(90deg); }
.rv-more:active { background: var(--lx-line); }
.rv p { margin: 0; line-height: 1.45; overflow-wrap: anywhere; }
.rv-photo { width: 100%; max-width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.rv-pick { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rv-pick label { position: relative; }
.rv-pick input { position: absolute; opacity: 0; pointer-events: none; }
.rv-pick span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 999px; background: var(--lx-card); box-shadow: 0 0 0 1px var(--lx-line) inset; color: var(--lx-accent); letter-spacing: 1px; cursor: pointer; }
.rv-pick input:checked + span { box-shadow: 0 0 0 1.5px var(--lx-accent) inset; background: linear-gradient(180deg, var(--lx-plan-a), var(--lx-plan-b)); }
.rv-pick input:focus-visible + span { outline: 3px solid var(--pd-focus); outline-offset: 2px; }
.rv-form textarea { width: 100%; min-height: 110px; font: inherit; }
.rv-form .press { width: 100%; }
.rv-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 16px; border-radius: var(--lx-r-m); background: var(--lx-card); box-shadow: 0 0 0 1px var(--lx-line) inset; }
.rv-form label { font-size: 14px; }
.rv-form .rv-pick label { display: inline-block; }
.rv-form textarea, .rv-form input[type="month"], .rv-form input[type="file"] { width: 100%; border-radius: 12px; border: 1px solid var(--lx-line-2); background: var(--lx-card-2); color: var(--lx-ink); padding: 10px 12px; font: inherit; font-size: 16px; }
.rv-stars { font-family: system-ui, -apple-system, 'Segoe UI Symbol', sans-serif; }
.pass-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; border-radius: var(--lx-r-m); background: var(--lx-card); box-shadow: 0 0 0 1px var(--lx-line) inset; }
.pass-form label { min-width: 0; } .pass-form input, .pass-form select { width: 100%; }
.reviews .rv-avg .rv-stars, .rv .rv-top .rv-stars { color: var(--lx-accent); font-size: 14px; }
.reviews .rv-avg .rv-stars i, .rv .rv-top .rv-stars i { color: var(--lx-line-2); }
/* Five stars in a row; tapping one fills it and the ones before it. */
.rv-pick .rv-row { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.rv-pick .rv-row input { position: absolute; opacity: 0; pointer-events: none; }
.rv-pick .rv-row label { display: grid !important; place-items: center; width: 44px; height: 44px; font-size: 28px; line-height: 1; color: var(--lx-line-2); cursor: pointer; font-family: system-ui, -apple-system, 'Segoe UI Symbol', sans-serif; transition: transform 0.14s var(--lx-spring), color 0.15s ease; }
.rv-pick .rv-row input:checked ~ label { color: var(--lx-accent); }
.rv-pick .rv-row label:active { transform: scale(0.88); }
.rv-pick .rv-row input:focus-visible + label { outline: 3px solid var(--pd-focus); outline-offset: 2px; border-radius: 8px; }
/* On a wide screen the plan bar sits centred over the column (found live, 4 Nov 2026: it slid off the left edge). */
@media (min-width: 760px) { .planbar { left: 50%; right: auto; width: 640px; margin-left: -320px; } }
/* Starred parks (4 Nov 2026): first in Explore's six spots, and the Star button on a park page. */
.chipst.st-star .pd-icon { color: #FFC266; }
.drow .press.on .pd-icon { color: var(--rb-icon, #FF9B52); }
/* Campfire ratings and the rating on a photo (4 Nov 2026). */
.rv-stars { display: inline-flex; gap: 2px; vertical-align: -2px; }
.rv-stars i { display: inline-grid; color: var(--lx-line-2); }
.rv-stars i.on { color: var(--lx-accent); }
.rv-stars .pd-icon { width: 15px; height: 15px; }
.rv-pick .rv-row label .pd-icon { width: 30px; height: 30px; }
.rv-badge { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 7px 12px; border-radius: 999px; border: 0; background: rgba(10, 16, 32, 0.62); color: #fff; font: 600 14px/1 var(--pd-font); cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.rv-badge .rv-stars i { color: rgba(255, 255, 255, 0.35); }
.rv-badge .rv-stars i.on { color: #FFB25B; }
.rv-badge b { font-size: 15px; }
.rv-badge span { opacity: 0.85; font-weight: 500; }
.rv-wait { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--lx-chip, rgba(255,255,255,0.06)); font-size: 14px; }
.screen.admin { padding: 16px; display: grid; gap: 14px; }
.admin-rv.waiting { box-shadow: inset 3px 0 0 var(--lx-accent); padding-left: 12px; }
/* Change dates from My Day (4 Nov 2026). */
.chips .chip-edit { display: inline-flex; align-items: center; gap: 6px; }
.chips .chip-edit .pd-icon { width: 16px; height: 16px; color: var(--rb-icon, #FF9B52); }
/* The rating badge sat across the photo credit (4 Nov 2026, measured on Yosemite: badge 326 px wide,
   credit under its right end). The badge takes only its own width, and a photo with a badge puts its
   credit in the top left corner (the campground sheet keeps its close button top right). */
.over > .rv-badge { align-self: flex-start; }
:has(> .over .rv-badge) > .pcredit { top: 8px; bottom: auto; left: 10px; right: auto; }
/* Self-guided tours (5 Nov 2026): one fold each, its stops numbered. */
details.tour { border-top: 1px solid var(--pd-line, rgba(255,255,255,.08)); padding: 10px 0; }
details.tour > summary { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; list-style: none; }
details.tour > summary::-webkit-details-marker { display: none; }
details.tour > summary .pd-icon { flex: none; width: 20px; height: 20px; color: var(--rb-icon, #FF9B52); margin-top: 2px; }
details.tour p { margin: 8px 0 0 30px; }
details.tour ol.stops { margin: 8px 0 0 30px; padding-left: 18px; display: grid; gap: 4px; }
/* Parks you have been to (5 Nov 2026), on Trips. */
.visited { margin-top: var(--space-l, 28px); }
.visited-count { margin: 4px 0 10px; font-size: 17px; }
.visited-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.visited-list .chip { display: inline-flex; align-items: center; gap: 6px; }
.visited-list .chip .pd-icon { width: 16px; height: 16px; color: var(--rb-icon, #FF9B52); }
/* How busy (5 Nov 2026): twelve months of visitors, your month in orange. */
.busy-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; align-items: end; height: 64px; }
.busy-bars i { display: block; border-radius: 4px 4px 2px 2px; background: color-mix(in srgb, currentColor 22%, transparent); }
.busy-bars i.on { background: var(--rb-icon, #FF9B52); }
.busy-axis { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-top: 4px; text-align: center; font-size: 11px; opacity: .7; }
.busy-line { margin: 10px 0 0; }
/* What to pack for the trip (5 Nov 2026). */
.trip-pack { margin: var(--space, 16px) 0; }
/* Trail conditions (5 Nov 2026): tags as small pills, the form's tags as toggles. */
.cd-tags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.cd-tag { font-style: normal; font-size: 13px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, currentColor 12%, transparent); }
.cd-tag.cd-clear { background: rgba(70, 180, 140, .22); }
.cd-tag.cd-snow, .cd-tag.cd-ice { background: rgba(120, 170, 255, .22); }
.cd-tag.cd-closed, .cd-tag.cd-high-water { background: rgba(255, 110, 90, .25); }
.cd-pick .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cd-pick input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.cd-pick input[type="checkbox"]:checked + label { background: var(--pd-accent, #F2762E); color: var(--pd-on-accent, #14223A); border-color: transparent; }
.cd-pick input[type="checkbox"]:focus-visible + label { outline: 2px solid var(--pd-accent, #F2762E); outline-offset: 2px; }
/* Two fields side by side (Leave word, 5 Nov 2026). */
.dform .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dform .row2 > label { min-width: 0; }
.lw-form > label, .lw-form > .row2 { flex: 1 1 100%; }
.lw-form textarea { width: 100%; box-sizing: border-box; min-height: 150px; line-height: 1.45; border-radius: 10px; border: 1px solid var(--pd-border-strong); background: var(--pd-surface); color: var(--pd-text); font: inherit; font-weight: 400; padding: 10px; resize: vertical; }
.lw-form > button { flex: 1 1 100%; justify-content: center; }
/* Cell signal line on a campground (5 Nov 2026). */
.cellline { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; }
.cellline .pd-icon { flex: none; width: 20px; height: 20px; color: var(--rb-icon, #FF9B52); margin-top: 2px; }
/* Six map tools (5 Nov 2026) as one row across the top right: a phone's 16:10 map is about 200 px
   tall, too short for the zoom and six buttons stacked. The status line moves to the bottom. */
.pd-maptools { display: flex; }
.pd-maptools a { width: 34px !important; height: 34px !important; border-bottom: 0 !important; border-left: 1px solid rgba(0,0,0,.12); }
.pd-maptools a:first-child { border-left: 0; }
.pd-maptip { top: auto; bottom: 24px; left: 10px; right: 10px; }
/* More in four groups (5 Nov 2026). */
/* The park's card row (4 Nov 2026, Alex: every reading a card, four at a time, moved by the arrows,
   not a swipe, which flipped pages by mistake). The track does not scroll by touch; the arrows page it.
   Each card keeps its reading. "1 of 5", the dots and the arrows sit under the row. */
.now-row { display: grid; gap: 8px; }
.now-row .ntrack { --gap: 8px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--gap)) / 4); gap: var(--gap); overflow: hidden; padding: 2px; margin: -2px; scroll-behavior: smooth; }
.now-row .now-tile { min-height: 84px; align-content: center; text-decoration: none; }
.now-row .now-tile span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Narrow phones (5 Nov 2026, measured at 360: "Sunset, dark 6:23 PM" and "EV chargers, ..." were cut at two lines
   in a 75 px tile): three lines, so every label reads whole. */
@media (max-width: 380px) { .now-row .now-tile span { -webkit-line-clamp: 3; } }
.now-row .now-tile.waiting b { opacity: .45; }
.now-row .now-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.now-row .now-arrow { display: inline-grid; place-items: center; width: 40px; height: 32px; border: 0; border-radius: 999px; background: var(--lx-card, var(--rb-card)); box-shadow: 0 0 0 1px var(--lx-line, var(--rb-line)) inset; color: var(--lx-ink, var(--pd-text)); cursor: pointer; }
.now-row .now-arrow .pd-icon { width: 18px; height: 18px; color: var(--lx-icon, var(--rb-icon)); }
.now-row .now-arrow:not(:disabled) { box-shadow: 0 0 0 1.5px var(--lx-icon, var(--rb-icon)) inset; }
.now-row .now-arrow:disabled { opacity: .35; cursor: default; }
.now-row .now-pages { display: inline-flex; align-items: center; gap: 10px; }
.now-row .mdots { display: inline-flex; gap: 5px; }
.now-row .mdots i { width: 6px; height: 6px; border-radius: 3px; background: currentColor; opacity: .25; transition: width .25s var(--lx-spring, ease), opacity .25s ease; }
.now-row .mdots i.on { width: 16px; opacity: .85; }
.now-row .now-count { font-size: 12.5px; font-weight: 650; opacity: .7; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .now-row .ntrack { scroll-behavior: auto; } }
/* Camping on the left, hiking on the right: two each in a column, All for the rest (4 Nov 2026). */
.pcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.pcols.one { grid-template-columns: minmax(0, 1fr); }
.pcol { min-width: 0; display: grid; gap: 8px; }
.pcol .dash-head { margin: 0; }
.htiles.col { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.pcols:not(.one) .htiles.col .htile { aspect-ratio: 1 / 0.6; }
.pcols.one .htiles.col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pcols.one .htiles.col .htile { aspect-ratio: 1 / 0.6; }
.pcols .htile .over b { font-size: 14px; }
.pcols .htile .chipst { font-size: 11px; padding: 3px 8px; }
.pcol-all { width: 100%; justify-content: center; font-size: 13px; min-height: 40px; }
.busy-sec { margin-top: 4px; }
/* In the four groups the tiles are chips: icon and name on one line, wrapping, so the whole of More
   is a short block instead of a screen of boxes (5 Nov 2026). */

/* The park page fits one phone screen (4 Nov 2026, Alex: "we may avoid having the page scroll"): a
   shorter photo, the four buttons in one row with the icon over the word, a shorter How busy graph. */
.place .place-photo { aspect-ratio: 12 / 5; }
.place .place-photo .over h1 { font-size: 24px; }
.place .place-head { gap: 10px; }
.place .place-head .drow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin-top: 0; }
.place .place-head .drow .press { flex: none; flex-direction: column; justify-content: center; gap: 3px; min-height: 52px; padding: 6px 4px; font-size: 12.5px; line-height: 1.15; text-align: center; }
.place .place-head .drow .press .pd-icon { width: 18px; height: 18px; }
.place .busy-sec .busy-bars { height: 40px; }
.place .busy-sec .busy-line { font-size: 13px; margin: 6px 0 0; }
.place .busy-sec .busy-axis span { font-size: 10px; }
.place .busy-sec h2 em { font-style: normal; font-size: 13px; font-weight: 700; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--lx-card, var(--rb-card)); }
.place .busy-sec h2 em.busy-busy { color: var(--pd-warning, #FF9B52); }
.place .headsup { padding-block: 8px; min-height: 0; font-size: 14px; }
.pcols .dash-head h2 { font-size: 17px; }
/* Tighter spacing on the park page so it fits (measured 4 Nov 2026). */
.screen.place { gap: 10px; }
.place .place-overview { gap: 12px; }
.place .busy-sec { gap: 4px; margin-top: 0; }
.place .busy-sec .dash-head { margin: 0; }
.place .place-photo { aspect-ratio: 13 / 5; }
.now-row { gap: 6px; }
.now-row .now-arrow { height: 28px; }
.now-row .now-tile { min-height: 78px; padding: 8px 4px; gap: 2px; }
.pcols:not(.one) .htiles.col .htile, .pcols.one .htiles.col .htile { aspect-ratio: 1 / 0.54; }
.pcol { gap: 6px; }
.place .headsup { padding: 7px 12px; }
.htile .chipst:empty { display: none; }
/* Live Yellowstone check (4 Nov 2026): the columns ended 18 points under the tab bar. One-line heads
   up, slightly shorter cards and photo, tighter gaps. */
.place .headsup span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.place .place-photo { aspect-ratio: 14 / 5; }
.now-row .now-tile { min-height: 70px; padding: 6px 4px; }
.place .place-overview { gap: 10px; }
.screen.place { gap: 8px; }
/* Save trip, Star, Share and Been here as icons stacked on the right of the photo (4 Nov 2026, Alex). */
.place .place-photo { aspect-ratio: 11 / 5; position: relative; }
.place .place-photo .over { right: 56px; }
.phact { position: absolute; top: 8px; right: 8px; bottom: 8px; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; }
.phbtn { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border: 0; border-radius: 50%; background: rgba(9, 16, 30, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .22) inset; color: #fff; cursor: pointer; text-decoration: none; }
.phbtn .pd-icon { width: 17px; height: 17px; color: #fff; }
.phbtn.primary { background: var(--pd-primary, #E8692A); box-shadow: 0 4px 14px rgba(232, 105, 42, .45); }
.phbtn.on .pd-icon { color: #FFB27A; }
.phbtn:active { transform: scale(.94); }
.now-row .now-tile.headsup-card b { font-size: 15px; }
.now-row .now-tile.headsup-card span { color: inherit; }
/* More room and bolder photo icons (4 Nov 2026, Alex: "spread it out a bit now, it's very cramped";
   "make the 4 buttons icons more prominent"). Still measured to end above the plan bar. */
.place .place-photo { aspect-ratio: 2 / 1; }
.phact { top: 8px; right: 10px; bottom: 8px; gap: 2px; }
/* Four buttons must fit the photo's height (2:1 of the width): 42 px from 410 px wide, smaller below, so
   Been here never hangs under the photo on a 360 or 375 px phone (5 Nov 2026). */
.phbtn { width: clamp(34px, 10vw, 42px); height: clamp(34px, 10vw, 42px); background: rgba(9, 16, 30, .72); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .38) inset, 0 4px 14px rgba(0, 0, 0, .35); }
.phbtn .pd-icon { width: 21px; height: 21px; }
.phbtn.primary { background: var(--pd-primary, #E8692A); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .5) inset, 0 6px 18px rgba(232, 105, 42, .55); }
.phbtn.on { background: rgba(255, 178, 122, .22); box-shadow: 0 0 0 1.5px #FFB27A inset, 0 4px 14px rgba(0, 0, 0, .35); }
.place .place-photo .over { right: 64px; }
.screen.place { gap: 14px; }
.place .place-overview { gap: 16px; }
.now-row { gap: 10px; }
.now-row .ntrack { --gap: 10px; }
.now-row .now-tile { min-height: 84px; padding: 10px 4px; gap: 3px; }
.pcols { gap: 12px; }
.pcol { gap: 10px; }
.htiles.col { gap: 10px; }
.pcols:not(.one) .htiles.col .htile, .pcols.one .htiles.col .htile { aspect-ratio: 1 / 0.6; }
/* Fit with the How busy graph and the plan bar both showing (measured 4 Nov 2026). */
.screen.place { gap: 12px; }
.place .place-overview { gap: 12px; }
.now-row .now-tile { min-height: 80px; padding: 8px 4px; }
.pcols:not(.one) .htiles.col .htile, .pcols.one .htiles.col .htile { aspect-ratio: 1 / 0.52; }
.place .busy-sec .busy-bars { height: 32px; }
.place .place-overview { gap: 10px; }
.now-row { gap: 8px; }
.pcols .dash-head h2 { font-size: 16px; }
.pcols .dash-head .linkish { font-size: 15px; }
.pcol { gap: 8px; }
.pcols:not(.one) .htiles.col .htile, .pcols.one .htiles.col .htile { aspect-ratio: 1 / 0.5; }
.place .busy-sec.waiting .busy-bars i { height: 30%; opacity: .45; }
.place .busy-sec.waiting h2 em, .place .busy-sec.waiting .linkish { opacity: .5; }
/* The studio line is one fixed strip at the very bottom of every screen, just above the tab bar, and the
   plan bar sits above it (4 Nov 2026, Alex: "at the very bottom of each screen centered and the floating
   bar just above it"). The page is padded so what it scrolls ends above the strip. The landing page has no
   tab bar and carries its own studio line (.guide-by), so it is left alone. */
body { --footline: 32px; --pb: 0px; } /* a 6px fade, then the 26px line */
body:has(.planbar:not([hidden])) { --pb: 60px; }
body:not(.home-only) { padding-bottom: calc(var(--tabs-h) + var(--safe-bottom) + var(--footline) + var(--pb) + var(--pd-space-2)); }
body:not(.home-only) main { padding-bottom: var(--space); }
/* The strip runs down behind the tab bar in the page's own ground colour, fading in at its top, so what
   scrolls passes under it rather than through the words. */
body:not(.home-only) .foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; margin: 0; padding: 0; height: calc(var(--tabs-h) + var(--safe-bottom) + var(--footline) + 2px); max-width: none; justify-content: flex-start; pointer-events: none;
  background: linear-gradient(to bottom, transparent 0, var(--lx-page-end) 6px); }
body:not(.home-only) .foot .by { height: 26px; margin-top: 6px; display: inline-flex; align-items: center; }
.foot .by, .guide-by a { font-size: 12px; opacity: .75; color: var(--pd-text); font-weight: 700; text-decoration: none; pointer-events: auto; }
.foot .by:active, .guide-by a:active { opacity: 1; }
.planbar { bottom: calc(var(--tabs-h) + var(--safe-bottom) + var(--footline) + 4px); }
body.sheet-open .foot, body.page-open .foot { display: none; }
/* The park page fills the screen exactly and does not scroll (4 Nov 2026, Alex: "Lock the page from
   scrolling... if the cards have room to be bigger, make them bigger"). The page is as tall as the space
   between the top bar and the bottom strip; the room left over goes to the cards and the camping and
   hiking tiles. On a phone too small for all of it, it still scrolls rather than cut a card off. */
body:has(main > .screen.place) main { padding-bottom: 0; }
.screen.place { display: flex; flex-direction: column; min-height: calc(100dvh - var(--bar-h) - var(--safe-top) - var(--tabs-h) - var(--safe-bottom) - var(--footline) - var(--pb) - 2 * var(--space) - 2px); }
.place .place-overview { flex: 1 1 auto; display: flex; flex-direction: column; }
.place .pcols { flex: 1 1 auto; align-items: stretch; }
.place .pcol { display: flex; flex-direction: column; }
.place .htiles.col { flex: 1 1 auto; display: grid; grid-auto-rows: minmax(0, 1fr); }
.place .htiles.col > li { min-height: 0; display: flex; }
.place .pcols:not(.one) .htiles.col .htile, .place .pcols.one .htiles.col .htile { aspect-ratio: auto; height: 100%; min-height: 72px; }
.now-row .now-tile { min-height: clamp(78px, 10dvh, 110px); }
.now-row .now-tile b { font-size: clamp(16px, 4.8vw, 21px); }
.now-row .now-tile .pd-icon { width: 24px; height: 24px; }
/* Alerts with nothing set yet fits the screen the same way (4 Nov 2026, Alex): the four "What you get"
   cards take the room left over; once there are reminders or watches the page grows and scrolls. */
body:has(main > .screen.alerts.fit) main { padding-bottom: 0; }
.screen.alerts.fit { display: flex; flex-direction: column; min-height: calc(100dvh - var(--bar-h) - var(--safe-top) - var(--tabs-h) - var(--safe-bottom) - var(--footline) - var(--pb) - 2 * var(--space) - 2px); }
.screen.alerts.fit .gets-grid { flex: 1 1 auto; grid-auto-rows: minmax(0, 1fr); }
.screen.alerts.fit .gets-grid li { justify-content: center; }
.screen.alerts .gets-grid li { padding: 12px 14px; }
.screen.alerts .gets-grid strong { font-size: 15px; }
.screen.alerts .gets-grid .row-ico { width: 36px; height: 36px; }
.screen.alerts > .pd-caption:last-of-type { margin: 0; text-align: center; }
/* Terms and Privacy are their own pages with no tab bar: the same top bar with a Back arrow, the same
   light or dark as the app, and the studio line at the very bottom (4 Nov 2026, Alex). */
body.legal { --tabs-h: 0px; }
body.legal .hback { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
body.legal .hback .pd-icon { width: 24px; height: 24px; }
body.legal .list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
body.legal .list li { padding: 14px 16px; border-radius: var(--lx-r-m); background: var(--lx-card); box-shadow: 0 0 0 1px var(--lx-line) inset; line-height: 1.45; }
/* What's it like: the tiles share the row (two tiles take the whole width, not two of five columns), and
   a word is never cut in half ("Modera te", 5 Nov 2026); a long word shrinks instead. */
.likes { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
.like b { overflow-wrap: normal; word-break: keep-all; font-size: clamp(14px, 4.4vw, 19px); }
.like b:has(+ span) { max-width: 100%; }
/* Tap targets at 44 px (the design tokens' minimum; audit, 5 Nov 2026): the top bar's two buttons and the
   Back arrow, the card row's arrows, the small pills, the map tools, and the underlined links, whose
   hit area grows without moving the text. */
.bar-btn, .hback { width: 44px; height: 44px; }
.now-arrow { min-height: 36px; min-width: 44px; }
.press.small { min-height: 44px; }
.press.small.icon-only { width: 44px; }
.pd-maptools a { width: 40px !important; height: 40px !important; line-height: 40px !important; }
.linkish { padding: 10px 2px; margin: -10px -2px; }
/* Narrow phones (iPhone SE and mini, 360 to 390 px): the hike window's three pills and the area page's
   two keep their words inside the pill: no icon, and a word may wrap (audit, 5 Nov 2026). */
@media (max-width: 400px) {
  .sbar .bar3 .press, .area .place-head .drow .press { white-space: normal; line-height: 1.15; font-size: 14px; padding: 0 10px; }
  .sbar .bar3 .press .pd-icon, .area .place-head .drow .press .pd-icon { display: none; }
}
/* Hour by hour (5 Nov 2026): one line that says when the weather turns, then a row of small hour
   tiles that scrolls sideways; the hours from the turn on are tinted by what comes. */
.hourly { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 2px; min-width: 0; max-width: 100%; }
/* In a grid (the hike window's day section) the row's own width is the column's, never its content's,
   or every line beside it stretched off the screen (seen live, 5 Nov 2026). */
.camp3 .ans > * { min-width: 0; }
.hourly-line { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-weight: 600; line-height: 1.3; }
.hourly-line .pd-icon { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--lx-icon); }
.hours { list-style: none; margin: 0; padding: 2px 0 6px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; min-width: 0; max-width: 100%; width: 100%; }
.hours::-webkit-scrollbar { display: none; }
.hours .hr { flex: none; width: 46px; display: grid; justify-items: center; gap: 2px; padding: 8px 2px 6px; border-radius: 12px; background: var(--lx-card-2); box-shadow: 0 0 0 1px var(--lx-line) inset; font-variant-numeric: tabular-nums; }
.hours .hr small { font-size: 11px; color: var(--lx-ink-3); }
.hours .hr .pd-icon { width: 18px; height: 18px; color: var(--lx-icon); }
.hours .hr b { font-size: 14px; }
.hours .hr span { font-size: 10.5px; color: var(--lx-ink-2); min-height: 13px; }
.hours .hr.storm { box-shadow: 0 0 0 1.5px rgba(201, 80, 15, .55) inset; }
.hours .hr.rain, .hours .hr.snow { box-shadow: 0 0 0 1.5px rgba(27, 95, 208, .45) inset; }
.hourly .pd-caption { margin: 0; }
.day-tl .hourly { margin-top: 6px; }
/* What this trip costs (5 Nov 2026). */
.trip-cost { margin-top: var(--space, 16px); }
.trip-cost .cost-line { margin: 4px 0 8px; font-size: 17px; }
.trip-cost .cost-line b { font-size: 22px; letter-spacing: -0.02em; }
/* A trip whose campground is closed on its nights (5 Nov 2026). */
.planline.warn { box-shadow: 0 0 0 1.5px var(--lx-plan-line) inset; }
.planline.warn .pd-icon:first-child { color: var(--lx-accent); }
/* A trip shared with you (5 Nov 2026). */
.shared-days { list-style: none; margin: var(--space, 16px) 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.shared-days li { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--lx-r-m); background: var(--lx-card); box-shadow: 0 0 0 1px var(--lx-line) inset; }
.shared-days li b { font-size: 15px; }
/* When to go (5 Nov 2026): the line, then the twelve months; the best months tinted, this month edged. */
.when-line { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; line-height: 1.35; }
.when-line .pd-icon { flex: none; width: 20px; height: 20px; color: var(--lx-icon); margin-top: 1px; }
.when-wrap { overflow-x: auto; }
table.when { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 14px; }
table.when th, table.when td { padding: 6px 6px; text-align: right; border-bottom: 1px solid var(--lx-line); }
table.when th[scope="row"], table.when thead th:first-child { text-align: left; }
table.when thead th { font-size: 12px; color: var(--lx-ink-3); font-weight: 600; }
table.when tr.best { background: var(--lx-plan-b); }
table.when tr.best th { color: var(--lx-accent-ink); }
table.when tr.now th::after { content: ' ·'; color: var(--lx-accent); }
table.when td:last-child { width: 30%; }
.wbar { display: block; height: 8px; border-radius: 4px; background: var(--lx-line-2); }
.shared-trip .bar3 { display: flex; flex-wrap: wrap; gap: 8px; grid-template-columns: none; }
.shared-trip .bar3 > * { flex: 1 1 auto; min-width: 0; }
.shared-trip .bar3 > .press:first-child { flex-basis: 100%; }

/* The odds from Parkday's own watch (5 Nov 2026): one quiet line under Can I get in? */
.oddsline { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--lx-ink-2); }
.oddsline .ico, .oddsline svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--lx-icon); }
/* Plan B on the watch screen (5 Nov 2026) */
.planb { list-style: none; margin: 8px 0 16px; padding: 0; display: grid; gap: 8px; }
.planb a { display: flex; gap: 12px; align-items: center; min-height: 56px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--lx-line-2); color: inherit; text-decoration: none; }
.planb a > span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.planb a > svg { flex: none; width: 20px; height: 20px; color: var(--lx-icon); }
.planb a > svg:last-child { width: 16px; height: 16px; opacity: .6; color: inherit; }
/* Release day: countdown and sites picked ahead (5 Nov 2026) */
.reminder .countdown { margin: 4px 0 10px; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; color: var(--lx-accent-ink); }
.reminder .countdown.is-open { color: var(--lx-accent-ink); }
.picks-box { display: grid; gap: 8px; margin: 14px 0 6px; padding-top: 12px; border-top: 1px solid var(--lx-line-2); }
.picks-box .pd-heading { margin: 0; }
.picks-row { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: pick; }
.picks-row li { display: flex; align-items: center; gap: 8px; counter-increment: pick; }
.picks-row li::before { content: counter(pick); flex: none; width: 24px; text-align: center; font-weight: 700; opacity: .7; font-variant-numeric: tabular-nums; }
.picks-row li > a { flex: 1; min-width: 0; justify-content: flex-start; }
.pick-move { display: flex; gap: 2px; flex: none; }
.pick-move .flat { min-width: 44px; min-height: 44px; display: grid; place-items: center; background: transparent; border: 0; border-radius: 999px; color: var(--lx-ink-2); cursor: pointer; }
.pick-move .up .pd-icon { transform: rotate(-90deg); }
.site-pick { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 420px; overflow: auto; }
.site-pick .pick { width: 100%; display: flex; gap: 8px; align-items: center; justify-content: space-between; min-height: 48px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--lx-line-2); background: transparent; color: inherit; text-align: left; font: inherit; }
.site-pick .pick[aria-pressed="true"] { border-color: var(--lx-icon); }
/* More from Wayside Foundry in the menu (5 Nov 2026) */
.menu-more { margin: 16px 0 4px; }
.menu-rows .srow div .pd-caption { display: block; margin-top: 2px; }
/* More from Wayside Foundry and the studio's email list, as Advanced Golf Address has them (5 Nov 2026) */
.wfmore { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.wfapp { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n go" "l l" "a a"; gap: 2px 10px; padding: 14px 16px; border-radius: 16px; background: var(--lx-card); border: 1px solid var(--lx-line-2); color: var(--lx-ink); text-decoration: none; }
.wfapp .wfn { grid-area: n; font-weight: 800; font-size: 16px; }
.wfapp .wfgo { grid-area: go; align-self: center; font-weight: 800; font-size: 13px; color: var(--lx-accent-ink); }
.wfapp .wfl { grid-area: l; font-weight: 700; font-size: 13px; color: var(--lx-accent-ink); }
.wfapp .wfa { grid-area: a; font-size: 13.5px; line-height: 1.45; color: var(--lx-ink-2); }
.wfmail { display: grid; gap: 8px; padding: 4px 2px 0; }
.wfmail .wfq, .wfmail .wfdone { margin: 0; font-size: 14.5px; }
.wfmail input[type=email] { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--lx-line-2); background: var(--lx-card); color: var(--lx-ink); }
.wfmail .wfok { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.4; color: var(--lx-ink-2); }
.wfmail .wfok input { margin-top: 2px; width: 20px; height: 20px; flex: none; accent-color: var(--lx-accent); }
.wfmail .btn[disabled] { opacity: .45; }
.wfmail .wfmsg { margin: 0; min-height: 1em; font-size: 12.5px; color: var(--lx-ink-2); }
.wfmail .wflink { justify-self: start; background: none; border: 0; padding: 8px 0; font: inherit; font-weight: 800; font-size: 13.5px; color: var(--lx-accent-ink); cursor: pointer; }
/* The optional account (5 Nov 2026) */
.account .acct-card { display: grid; gap: 12px; padding: 18px; border-radius: 18px; }
.account .acct-card p { margin: 0; }
.account input { width: 100%; box-sizing: border-box; font: inherit; font-size: 17px; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--lx-line-2); background: var(--lx-card); color: var(--lx-ink); }
.account #acct-code { font-size: 22px; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.account .acct-email { font-size: 19px; font-weight: 750; overflow-wrap: anywhere; }
.account .acct-msg { min-height: 1.2em; margin: 12px 0; font-weight: 600; color: var(--lx-accent-ink); }
.account .acct-confirm { display: grid; gap: 10px; }
.account h2 { margin-top: 24px; }
.btn-danger-ghost { background: transparent; border: 1px solid var(--pd-status-unavailable-fg, #B3261E); color: var(--pd-status-unavailable-fg, #B3261E); }
.acct-offer { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 18px; margin: 16px 0; }
.acct-offer > svg { flex: none; width: 24px; height: 24px; color: var(--lx-icon); margin-top: 2px; }
.acct-offer p { margin: 4px 0 10px; }
/* Hike photo actions (5 Nov 2026): Save for no signal, Leave word, Report conditions, under the close button */
.sphoto.has-acts .over { right: 72px; }
.phact.hike-acts { top: 72px; right: 17px; bottom: auto; justify-content: flex-start; gap: 10px; }
.phbtn.busy .phpct { color: #fff; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.phbtn.wait { opacity: .55; }
/* Saved for no signal rows: a remove button beside each (5 Nov 2026) */
.srow-x-wrap { display: flex; align-items: center; gap: 4px; }
.srow-x-wrap > .srow { flex: 1; min-width: 0; }
.srow-x { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--lx-ink-3); cursor: pointer; }
.srow-x .pd-icon { width: 18px; height: 18px; }
.sheet-acts { display: grid; gap: 10px; margin-top: 14px; }
/* Tokens the older styles name but nothing defined (audit, 5 Nov 2026): tied to the themed tokens */
:root { --pd-text-2: var(--lx-ink-2); --pd-link: var(--lx-accent-ink); --pd-line: var(--lx-line); --lx-chip: var(--lx-line); --pd-warning: var(--lx-accent-ink); }
/* A results toggle that is on reads as on (audit: Dog and Kids looked the same either way) */
.rchip.is-on { background: var(--lx-accent); color: #fff; box-shadow: none; }
.rchip.is-on .pd-icon { color: #fff; }
.account .acct-msg:empty { min-height: 0; margin: 0; }
/* Audio tours (5 Nov 2026): the stop now on top, the tools under it, every stop below. */
.tour .tour-now { display: grid; gap: 10px; padding: 16px; border-radius: 18px; }
.tour .tour-now .pd-heading { margin: 0; }
.tour .tour-now .pd-label { margin: 0; }
.tour .tour-ctl { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tour .tour-play { display: inline-flex; align-items: center; gap: 8px; }
.tour .tour-time { font-variant-numeric: tabular-nums; }
.tour .tour-words summary { cursor: pointer; font-weight: 700; color: var(--lx-accent-ink); }
.tour .tour-words p { margin: 8px 0 0; line-height: 1.5; }
.tour .tour-dir { margin: 0; line-height: 1.45; color: var(--lx-ink-2); }
.tour .tour-steps { display: flex; justify-content: space-between; gap: 8px; }
.tour .tour-steps .btn { display: inline-flex; align-items: center; gap: 6px; }
.tour .tour-tools { display: grid; gap: 8px; margin: 14px 0; }
.tour .tour-tools .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.tour .tour-tool { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-radius: 14px; background: var(--lx-card); box-shadow: 0 0 0 1px var(--lx-line) inset; }
.tour .tour-tool > span { display: inline-flex; align-items: center; gap: 8px; }
.tour .tour-pro { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--lx-accent, #C2410C) 14%, transparent); color: var(--lx-accent-ink); }
.tour .tour-stops { list-style: none; margin: 6px 0 14px; padding: 0; display: grid; gap: 6px; }
.tour .tour-stops .srow { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 14px; background: var(--lx-card); box-shadow: 0 0 0 1px var(--lx-line) inset; color: var(--lx-ink); font: inherit; text-align: left; cursor: pointer; }
.tour .tour-stops .srow > span:nth-child(2) { flex: 1; min-width: 0; }
.tour .tour-stops .srow.on { box-shadow: 0 0 0 2px var(--lx-accent) inset; font-weight: 700; }
.tour .tour-n { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: var(--lx-card-2, var(--lx-card)); box-shadow: 0 0 0 1px var(--lx-line) inset; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tour .tour-stops .pd-icon { flex: none; width: 18px; height: 18px; color: var(--lx-icon); }
details.tour .tour-go { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 10px; }