/* Parkday's look (2 Nov 2026, Alex: "glassy and depth and smooth. Beauty"). Layered on app.css:
   a lit page for the glass to sit on, glass cards with real depth, a full-bleed photo landing,
   big tappable tiles for the guided search, photo result cards, and screens that ease in. Colours
   come from the design system's tokens; the few added here are tints of them for depth. */

:root {
  --look-glass: rgba(255, 252, 247, 0.72);
  --look-glass-strong: rgba(255, 252, 247, 0.86);
  --look-edge: rgba(255, 255, 255, 0.75);
  --look-hairline: rgba(20, 34, 58, 0.08);
  --look-depth: 0 1px 1px rgba(20, 34, 58, 0.04), 0 6px 16px rgba(20, 34, 58, 0.07), 0 18px 40px rgba(20, 34, 58, 0.08);
  --look-depth-hi: 0 2px 2px rgba(20, 34, 58, 0.05), 0 12px 28px rgba(20, 34, 58, 0.12), 0 32px 64px rgba(20, 34, 58, 0.12);
  --look-shine: inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --look-page: radial-gradient(1200px 700px at 0% -10%, rgba(242, 118, 46, 0.18), transparent 60%),
    radial-gradient(900px 600px at 110% 10%, rgba(28, 77, 154, 0.12), transparent 60%),
    radial-gradient(1000px 800px at 50% 120%, rgba(30, 97, 88, 0.12), transparent 60%), var(--pd-background);
  --look-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --look-glass: rgba(19, 31, 54, 0.66);
    --look-glass-strong: rgba(19, 31, 54, 0.84);
    --look-edge: rgba(255, 255, 255, 0.12);
    --look-hairline: rgba(255, 255, 255, 0.08);
    --look-depth: 0 1px 1px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.35), 0 20px 48px rgba(0, 0, 0, 0.3);
    --look-depth-hi: 0 2px 2px rgba(0, 0, 0, 0.35), 0 14px 32px rgba(0, 0, 0, 0.45), 0 32px 64px rgba(0, 0, 0, 0.4);
    --look-shine: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --look-page: radial-gradient(1200px 700px at 0% -10%, rgba(255, 155, 82, 0.14), transparent 60%),
      radial-gradient(900px 600px at 110% 10%, rgba(141, 182, 255, 0.10), transparent 60%),
      radial-gradient(1000px 800px at 50% 120%, rgba(134, 211, 196, 0.08), transparent 60%), var(--pd-background);
  }
}
:root[data-theme="dark"] {
    --look-glass: rgba(19, 31, 54, 0.66);
    --look-glass-strong: rgba(19, 31, 54, 0.84);
    --look-edge: rgba(255, 255, 255, 0.12);
    --look-hairline: rgba(255, 255, 255, 0.08);
    --look-depth: 0 1px 1px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.35), 0 20px 48px rgba(0, 0, 0, 0.3);
    --look-depth-hi: 0 2px 2px rgba(0, 0, 0, 0.35), 0 14px 32px rgba(0, 0, 0, 0.45), 0 32px 64px rgba(0, 0, 0, 0.4);
    --look-shine: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --look-page: radial-gradient(1200px 700px at 0% -10%, rgba(255, 155, 82, 0.14), transparent 60%),
      radial-gradient(900px 600px at 110% 10%, rgba(141, 182, 255, 0.10), transparent 60%),
      radial-gradient(1000px 800px at 50% 120%, rgba(134, 211, 196, 0.08), transparent 60%), var(--pd-background);
  }


body { background: var(--look-page); background-attachment: fixed; }
/* A screen lands below the fixed bar, and a heading given focus by the app shows no ring. */
.screen { scroll-margin-top: calc(var(--bar-h) + var(--safe-top) + var(--pd-space-4)); }
.home { scroll-margin-top: 0; }
[data-details-heading]:focus:not(:focus-visible), h1[tabindex="-1"]:focus { outline: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Glass with depth: frosted, lit from above, a soft layered shadow. */
.glass, .card.pd-glass, .rcard, .trip-card, .panel.card {
  background: var(--look-glass); border: 1px solid var(--look-edge); border-radius: var(--pd-radius-xl);
  box-shadow: var(--look-depth), var(--look-shine);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
}
@media (prefers-reduced-transparency: reduce) { .glass, .rcard { background: var(--pd-surface); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.lift { transition: transform 220ms var(--look-ease), box-shadow 220ms var(--look-ease); }
@media (hover: hover) { .lift:hover { transform: translateY(-2px); box-shadow: var(--look-depth-hi), var(--look-shine); } }
.lift:active { transform: scale(0.985); }

.bar.top { background: var(--look-glass-strong); box-shadow: 0 1px 0 var(--look-hairline), 0 8px 24px rgba(20, 34, 58, 0.06); }
.bar.tabs { background: var(--look-glass-strong); box-shadow: 0 -1px 0 var(--look-hairline), 0 -8px 24px rgba(20, 34, 58, 0.06); }
.tabs a { transition: color 160ms var(--look-ease); }
.tabs a[aria-current="page"] .pd-icon { transform: translateY(-1px) scale(1.08); }

/* Buttons: a lit primary, a glass secondary, generous targets. */
.btn { transition: transform 160ms var(--look-ease), box-shadow 200ms var(--look-ease), background 200ms; }
.btn:active { transform: scale(0.97); }
.btn-glass { background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.45); color: #fff; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--pd-primary); padding: 0 var(--pd-space-3); }
.btn-big { min-height: 56px; padding: 0 var(--pd-space-6); font-size: 17px; }
.btn.wide { width: 100%; }
.icon-only { padding: 0; width: 48px; }
.actions.center { justify-content: center; }

/* Screens ease in. */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.screen > *, .rise { animation: rise 420ms var(--look-ease) both; }
.screen > *:nth-child(2) { animation-delay: 40ms; } .screen > *:nth-child(3) { animation-delay: 80ms; }
.screen > *:nth-child(4) { animation-delay: 120ms; } .screen > *:nth-child(5) { animation-delay: 160ms; }
.results > li { animation: rise 460ms var(--look-ease) both; }
.results > li:nth-child(2) { animation-delay: 60ms; } .results > li:nth-child(3) { animation-delay: 120ms; } .results > li:nth-child(n+4) { animation-delay: 160ms; }

.eyebrow, .eyebrow-dark { display: inline-flex; align-items: center; gap: var(--pd-space-2); text-transform: uppercase; letter-spacing: 0.12em; font-size: 13px; font-weight: 700; }
.eyebrow-dark { color: var(--pd-primary); }

/* ---------------- Landing ---------------- */
.home { gap: var(--pd-space-6); }
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  width: 100vw; margin-left: calc(50% - 50vw);
  margin-top: calc(-1 * (var(--bar-h) + var(--safe-top) + var(--pd-space-4)));
  min-height: min(86vh, 760px); display: flex; align-items: flex-end;
  padding: calc(var(--bar-h) + var(--safe-top) + var(--pd-space-8)) var(--pd-space-5) var(--pd-space-10);
  color: #fff; animation: none;
}
.hero-art, .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero-photo { opacity: 0; transform: scale(1.06); transition: opacity 900ms var(--look-ease), transform 6s ease-out; }
.hero-photo.in { opacity: 1; transform: scale(1); }
.hero-shade { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11, 20, 38, 0.35) 0%, rgba(11, 20, 38, 0.05) 30%, rgba(11, 20, 38, 0.45) 62%, rgba(11, 20, 38, 0.88) 100%); }
.hero-copy { max-width: 640px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: var(--pd-space-4); }
.hero .eyebrow { color: #FFD7B5; }
.hero-title { margin: 0; font-size: clamp(40px, 11vw, 64px); line-height: 1.02; letter-spacing: -0.025em; font-weight: 700; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); }
.hero-lede { font-size: 18px; line-height: 27px; color: rgba(255, 255, 255, 0.92); max-width: 34em; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--pd-space-3); margin-top: var(--pd-space-2); }
.hero-actions .btn { flex: 1 1 200px; }
.hero-credit { position: absolute; right: var(--pd-space-3); bottom: var(--pd-space-2); margin: 0; font-size: 11px; color: rgba(255, 255, 255, 0.72); }
.home-cards { display: grid; gap: var(--pd-space-3); margin-top: calc(-1 * var(--pd-space-10)); position: relative; z-index: 1; }
.home-card { display: flex; align-items: center; gap: var(--pd-space-3); padding: var(--pd-space-4); color: var(--pd-text); text-decoration: none; }
.home-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.home-txt strong { font-size: 19px; line-height: 25px; }
.home-ico { flex: none; width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; color: var(--pd-primary); background: var(--pd-primary-soft); box-shadow: var(--look-shine); }
.home-ico.soon { color: var(--pd-status-opens-soon-fg); background: var(--pd-status-opens-soon-bg); }
.how { display: flex; flex-direction: column; gap: var(--pd-space-3); }
.how-steps { list-style: none; padding: 0; display: grid; gap: var(--pd-space-3); }
.how-steps li { position: relative; display: flex; gap: var(--pd-space-3); align-items: flex-start; padding: var(--pd-space-4); }
.how-steps h3 { margin-bottom: 2px; }
.how-n { position: absolute; top: 10px; right: 14px; font-weight: 700; font-size: 13px; color: var(--pd-text-secondary); }
@media (min-width: 720px) { .how-steps { grid-template-columns: 1fr 1fr; } .home-cards { grid-template-columns: 1fr 1fr; } }

/* ---------------- Guided search ---------------- */
.find-step { gap: var(--pd-space-4); }
.find-step .pd-display { font-size: clamp(30px, 8vw, 40px); line-height: 1.1; letter-spacing: -0.02em; }
.step-top { display: flex; align-items: center; justify-content: space-between; gap: var(--pd-space-2); }
.step-top .back { display: inline-flex; align-items: center; gap: 2px; text-decoration: none; }
.progress { list-style: none; padding: 0; display: flex; gap: 6px; flex: 1; justify-content: center; max-width: 180px; }
.progress li { height: 6px; flex: 1; border-radius: 999px; background: var(--pd-border); transition: background 300ms; }
.progress li.done { background: var(--pd-primary-soft); }
.progress li.now { background: var(--pd-primary); }
.tiles { display: grid; gap: var(--pd-space-3); border: 0; padding: 0; margin: 0; }
.tile { position: relative; display: flex; align-items: center; gap: var(--pd-space-4); width: 100%; min-height: 84px; padding: var(--pd-space-4); text-align: left; color: var(--pd-text); font: inherit; cursor: pointer; }
.tile input { position: absolute; opacity: 0; pointer-events: none; }
.tile-ico { flex: none; width: 52px; height: 52px; border-radius: 18px; display: grid; place-items: center; background: var(--pd-primary-soft); color: var(--pd-primary); }
.tile-ico .pd-icon { width: 28px; height: 28px; }
.tile-txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.tile-txt strong { font-size: 19px; line-height: 24px; }
.tile.is-on, .tile:has(input:checked) { border-color: var(--pd-primary); box-shadow: 0 0 0 2px var(--pd-primary), var(--look-depth); }
.tile.is-on > .pd-icon { color: var(--pd-primary); }
.tile:has(input:focus-visible) { outline: 3px solid var(--pd-focus); outline-offset: 2px; }
fieldset.chips { flex-direction: row; flex-wrap: wrap; gap: var(--pd-space-2); }
fieldset.chips > legend { width: 100%; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip { position: relative; }
.chip:has(input:focus-visible) { outline: 3px solid var(--pd-focus); outline-offset: 2px; }
.chips.big .chip { min-height: 56px; padding: 0 var(--pd-space-5); font-size: 17px; }
.chip { background: var(--look-glass-strong); border-color: var(--look-edge); box-shadow: var(--look-depth); transition: transform 160ms var(--look-ease), background 200ms; }
.chip input[type="radio"], .chips.big .chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:active { transform: scale(0.97); }
.chip.is-on, .chip:has(input:checked) { background: var(--pd-primary); border-color: var(--pd-primary); color: var(--pd-on-primary); }
.start-now { display: flex; gap: var(--pd-space-3); align-items: flex-start; padding: var(--pd-space-4); }
.start-now > .pd-icon { color: var(--pd-status-open-fg); width: 28px; height: 28px; }
.or { display: flex; align-items: center; gap: var(--pd-space-3); color: var(--pd-text-secondary); font-size: 14px; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--pd-border); }
.grow { flex: 1 1 200px; }
.dates, .sub-form { padding: var(--pd-space-4); display: flex; flex-direction: column; gap: var(--pd-space-3); }
.dates { flex-direction: row; }
input[type="text"], input[type="date"], select { background: var(--look-glass-strong); border-color: var(--pd-border-strong); border-radius: 14px; min-height: 52px; }
.sticky-go { position: sticky; bottom: calc(var(--tabs-h) + var(--safe-bottom) + var(--pd-space-3)); z-index: 2; }

/* ---------------- Result cards ---------------- */
.results { gap: var(--pd-space-4); }
.rcard { overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.rcard-photo { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: url(../images/hero.svg) center / cover; }
.rcard-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--look-ease); }
@media (hover: hover) { .rcard:hover .rcard-img { transform: scale(1.04); } }
.art-2 { background-position: 20% 70%; } .art-3 { background-position: 80% 60%; } .art-4 { background-position: 35% 85%; } .art-5 { background-position: 65% 75%; }
.rcard-dist { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px;
  background: rgba(11, 20, 38, 0.55); color: #fff; font-weight: 700; font-size: 14px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.rcard-dist .pd-icon { width: 18px; height: 18px; }
.rcard-body { padding: var(--pd-space-4); display: flex; flex-direction: column; gap: var(--pd-space-3); }
.rcard .result-head h2 { color: var(--pd-text); text-decoration: none; }
.rcard-book:empty { display: none; }
.rcard .conditions { padding: var(--pd-space-3); border-radius: 14px; background: var(--pd-surface-sunken); }
.summary { color: var(--pd-text-secondary); }

/* ---------------- Reminder, alerts, trip ---------------- */
.big-card { padding: var(--pd-space-6) var(--pd-space-5); display: flex; flex-direction: column; gap: var(--pd-space-3); }
.big-card .pd-title { font-size: 30px; line-height: 36px; }
.leads { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--pd-space-2); }
.leads li { display: flex; gap: var(--pd-space-2); align-items: center; padding: var(--pd-space-2) var(--pd-space-3); border-radius: 12px; background: var(--pd-surface-sunken); }
.list.cards { gap: var(--pd-space-2); }
.row-card { display: flex; align-items: center; gap: var(--pd-space-2); padding: var(--pd-space-3); }
.row-card > a { flex: 1; display: flex; gap: var(--pd-space-3); align-items: center; color: var(--pd-text); text-decoration: none; min-width: 0; }
.row-card > a > span { display: flex; flex-direction: column; min-width: 0; }
.row-link { background: var(--look-glass); border: 1px solid var(--look-edge); border-radius: 16px; box-shadow: var(--look-depth); min-height: 56px; }
.trip-hero { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--pd-radius-xl); min-height: 200px; display: flex; align-items: flex-end; padding: var(--pd-space-4); color: #fff; box-shadow: var(--look-depth); }
.trip-hero .hero-shade { border-radius: inherit; }
.trip-hero-name { font-size: 26px; line-height: 30px; font-weight: 700; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4); }
.trip-hero-copy .pd-label { color: #FFD7B5; }
.details { background: var(--look-glass-strong); border-left-width: 4px; }
.pick { background: var(--look-glass-strong); border-color: var(--look-edge); box-shadow: var(--look-depth); border-radius: 14px; min-height: 52px; }
.empty { background: var(--look-glass); border-style: dashed; }
.foot { opacity: 0.9; }

@media (min-width: 768px) {
  .hero { padding-left: var(--pd-space-8); padding-right: var(--pd-space-8); }
  .results { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .hero-photo { transform: none; } .lift:hover { transform: none; } }
.gets li { display: flex; gap: var(--pd-space-3); align-items: flex-start; }
.gets .pd-icon { color: var(--pd-primary); margin-top: 1px; }

/* ================================================================ The rebuild (2 Nov 2026)
   From the prototype Alex approved ("This is lovely"): drawn scenes carry the name, icon chips carry
   the facts, buttons press in, and a sheet slides up for the detail. */
:root {
  --rb-card: var(--pd-surface); --rb-chip: #F1EAE0; --rb-line: rgba(20, 34, 58, 0.10);
  --rb-ink-2: var(--pd-text-secondary); --rb-icon: #A8410A;
  --rb-shadow: 0 1px 1px rgba(20,34,58,.05), 0 8px 20px rgba(20,34,58,.08), 0 24px 48px rgba(20,34,58,.10);
  --rb-ghost-top: #FFFFFF; --rb-ghost-face: #F4EEE6; --rb-ghost-base: #D9CFC2; --rb-ghost-text: #14223A;
  --rb-ghost-glow: inset 0 1px 0 #fff;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --rb-chip: #1C2B47; --rb-line: rgba(255,255,255,.09); --rb-icon: #FF9B52;
  --rb-shadow: 0 1px 1px rgba(0,0,0,.3), 0 10px 24px rgba(0,0,0,.35), 0 28px 56px rgba(0,0,0,.35);
  --rb-ghost-top: #2A3B5C; --rb-ghost-face: #22324F; --rb-ghost-base: #0E1830; --rb-ghost-text: #EEF2F8;
  --rb-ghost-glow: inset 0 1px 0 rgba(255,255,255,.12);
} }
:root[data-theme="dark"] {
  --rb-chip: #1C2B47; --rb-line: rgba(255,255,255,.09); --rb-icon: #FF9B52;
  --rb-shadow: 0 1px 1px rgba(0,0,0,.3), 0 10px 24px rgba(0,0,0,.35), 0 28px 56px rgba(0,0,0,.35);
  --rb-ghost-top: #2A3B5C; --rb-ghost-face: #22324F; --rb-ghost-base: #0E1830; --rb-ghost-text: #EEF2F8;
  --rb-ghost-glow: inset 0 1px 0 rgba(255,255,255,.12);
}

/* Buttons that press in: a lit top edge, a base underneath, and they sink when tapped. */
.press, .btn-primary, .btn-secondary {
  --b-top: #D2581A; --b-face: #A8410A; --b-base: #7E3108; --b-text: #fff; --b-glow: inset 0 1px 0 rgba(255,255,255,.35); --b-drop: rgba(126,49,8,.28);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px;
  border-radius: 16px; border: 0; cursor: pointer; color: var(--b-text); font: inherit; font-weight: 700; font-size: 16px; white-space: nowrap; text-decoration: none;
  background: linear-gradient(180deg, var(--b-top), var(--b-face) 60%);
  box-shadow: var(--b-glow), 0 4px 0 var(--b-base), 0 10px 18px var(--b-drop);
  transform: translateY(0); transition: transform .12s ease, box-shadow .12s ease; -webkit-tap-highlight-color: transparent; margin-bottom: 4px;
}
.press:active, .btn-primary:active, .btn-secondary:active { transform: translateY(4px); box-shadow: var(--b-glow), 0 0 0 var(--b-base), 0 3px 6px var(--b-drop); background: linear-gradient(180deg, var(--b-top), var(--b-face) 60%); }
.press .pd-icon, .btn-primary .pd-icon, .btn-secondary .pd-icon { width: 20px; height: 20px; }
.press.ghost, .btn-secondary { --b-top: var(--rb-ghost-top); --b-face: var(--rb-ghost-face); --b-base: var(--rb-ghost-base); --b-text: var(--rb-ghost-text); --b-glow: var(--rb-ghost-glow); --b-drop: rgba(20,34,58,.14); border: 0; }
.press.violet { --b-top: #7A55B8; --b-face: #583794; --b-base: #3B2366; --b-drop: rgba(59,35,102,.3); }
.press.green { --b-top: #2C8073; --b-face: #1E6158; --b-base: #123F39; --b-drop: rgba(18,63,57,.3); }
.press.big, .btn-big { min-height: 56px; font-size: 17px; border-radius: 18px; }
.press.small { min-height: 40px; padding: 0 14px; font-size: 15px; border-radius: 13px; }
.press.icon-only { padding: 0; width: 48px; }
.press:focus-visible, .btn:focus-visible, .ccard:focus-visible { outline: 3px solid var(--pd-focus); outline-offset: 3px; }
.btn-primary[disabled], .press[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.linkish { background: none; border: 0; padding: 0; color: var(--pd-primary); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.press.ghost.icon-only .pd-icon { color: var(--rb-icon); }

/* Drawn scenes fill whatever frame they sit in. */
.scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: transform .8s var(--look-ease); }

/* Cards */
.ccards { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
@media (min-width: 760px) { .ccards { grid-template-columns: 1fr 1fr; } }
.ccard { background: var(--rb-card); border-radius: 26px; overflow: hidden; box-shadow: var(--rb-shadow); border: 1px solid var(--rb-line); cursor: pointer; min-width: 0;
  transition: transform .3s var(--look-ease), box-shadow .3s var(--look-ease); animation: rise .55s var(--look-ease) both; }
.ccard:nth-child(2) { animation-delay: .06s } .ccard:nth-child(3) { animation-delay: .12s } .ccard:nth-child(n+4) { animation-delay: .18s }
@media (hover: hover) { .ccard:hover { transform: translateY(-3px); } .ccard:hover .scene { transform: scale(1.04); } }
.ccard:active { transform: scale(.985); }
.cphoto, .sphoto { position: relative; aspect-ratio: 16 / 10; max-width: 100%; overflow: hidden; background: var(--pd-night); }
.cphoto::after, .sphoto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,20,38,0) 35%, rgba(11,20,38,.82) 100%); pointer-events: none; }
.over { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1; color: #fff; display: flex; flex-direction: column; gap: 2px; }
.over h2 { margin: 0; color: #fff; font-size: 23px; line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
.over p { margin: 0; font-size: 14px; opacity: .9; }
.badge { position: absolute; top: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; color: #fff; font-weight: 700; font-size: 14px;
  background: rgba(11,20,38,.48); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.18); }
.badge .pd-icon { width: 17px; height: 17px; }
.badge.l { left: 12px; } .badge.r { right: 12px; }
.fchips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px 0; }
.fchips:empty { display: none; }
.fchip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 12px; background: var(--rb-chip); font-weight: 700; font-size: 14px; color: var(--pd-text); }
.fchip .pd-icon { width: 17px; height: 17px; color: var(--rb-icon); }
.cfoot { display: flex; align-items: center; gap: 12px; padding: 14px 16px 14px; }
.cstate { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cstate b { font-size: 15px; display: inline-flex; align-items: center; gap: 7px; }
.cstate span { font-size: 13px; color: var(--rb-ink-2); overflow: hidden; text-overflow: ellipsis; }
.sdot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--pd-status-closed-fg); box-shadow: 0 0 0 4px var(--pd-status-closed-bg); }
.full .sdot { background: var(--pd-status-unavailable-fg); box-shadow: 0 0 0 4px var(--pd-status-unavailable-bg); }
.soon .sdot { background: var(--pd-status-opens-soon-fg); box-shadow: 0 0 0 4px var(--pd-status-opens-soon-bg); }
.open .sdot { background: var(--pd-status-open-fg); box-shadow: 0 0 0 4px var(--pd-status-open-bg); }
.wait .sdot { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.results-top { display: flex; flex-direction: column; gap: 6px; }
.results-top .summary { margin: 0; }

/* The sheet */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(11,20,38,.46); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s ease; }
.scrim.on { opacity: 1; }
.sheet { position: fixed; z-index: 41; left: 0; right: 0; bottom: 0; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain; background: var(--pd-background);
  border-radius: 28px 28px 0 0; box-shadow: 0 -20px 60px rgba(0,0,0,.3); transform: translateY(105%); transition: transform .45s var(--look-ease); }
.sheet.on { transform: none; }
@media (min-width: 760px) { .sheet { left: 50%; width: 640px; margin-left: -320px; } }
.grab { position: sticky; top: 0; z-index: 3; display: flex; justify-content: center; padding: 10px 0 0; height: 15px; }
.grab span { width: 44px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.7); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.sphoto { aspect-ratio: 16 / 11; margin-top: -15px; }
.sphoto::after { background: linear-gradient(180deg, rgba(11,20,38,.25), rgba(11,20,38,0) 30%, rgba(11,20,38,.85)); }
.sphoto .over h2 { font-size: 28px; }
.sclose { position: absolute; top: 16px; right: 16px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); color: #fff; cursor: pointer;
  background: rgba(11,20,38,.45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); display: grid; place-items: center; }
.sbody { padding: 18px max(16px, env(safe-area-inset-right, 0px)) 130px max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 22px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stat { background: var(--rb-card); border: 1px solid var(--rb-line); border-radius: 18px; padding: 12px 4px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: 0 2px 8px rgba(20,34,58,.05); min-width: 0; }
.stat .pd-icon { width: 22px; height: 22px; color: var(--rb-icon); }
.stat b { font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12px; color: var(--rb-ink-2); }
.ssec { display: flex; flex-direction: column; gap: 10px; }
.ssec h3 { margin: 0; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--rb-ink-2); }
.ssec .pd-caption { margin: 0; }
.nights { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.night { border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--rb-line); background: var(--rb-card); }
.night b { font-size: 16px; } .night span { font-size: 13px; }
.night.taken { background: var(--pd-status-unavailable-bg); color: var(--pd-status-unavailable-fg); }
.night.free { background: var(--pd-status-open-bg); color: var(--pd-status-open-fg); }
.night.notyet { background: var(--pd-status-opens-soon-bg); color: var(--pd-status-opens-soon-fg); }
.wx { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.wday { background: var(--rb-card); border: 1px solid var(--rb-line); border-radius: 18px; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; }
.wday .pd-icon { width: 30px; height: 30px; color: var(--pd-accent); }
.wday b { font-size: 18px; font-variant-numeric: tabular-nums; } .wday b span { color: var(--rb-ink-2); font-weight: 400; }
.wday small { color: var(--rb-ink-2); font-size: 12px; line-height: 1.25; }
.srows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.srow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--rb-card); border: 1px solid var(--rb-line); }
.srow > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.srow b { font-size: 15px; } .srow span { font-size: 13px; color: var(--rb-ink-2); }
a.srow, a.srow b, a.srow span { text-decoration: none; color: inherit; } a.srow span { color: var(--rb-ink-2); } a.srow { width: 100%; box-sizing: border-box; }
.offline-note { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--rb-card); border: 1px solid var(--rb-line); font-weight: 600; }
.offline-note .ic, .offline-note svg { flex: none; }
.stag { font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 10px; }
.stag.taken { background: var(--pd-status-unavailable-bg); color: var(--pd-status-unavailable-fg); }
.stag.nofit { background: var(--pd-status-closed-bg); color: var(--pd-status-closed-fg); }
.amen { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.am { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 16px; background: var(--rb-chip); font-size: 13px; font-weight: 700; text-align: center; }
.am .pd-icon { width: 24px; height: 24px; color: var(--rb-icon); } .am.no { opacity: .45; }
.ringcard { display: flex; align-items: center; gap: 16px; background: var(--rb-card); border: 1px solid var(--rb-line); border-radius: 22px; padding: 16px; box-shadow: var(--rb-shadow); }
.ring { flex: none; width: 88px; height: 88px; position: relative; }
.ring svg { width: 88px; height: 88px; transform: rotate(-90deg); }
.ring-bg { stroke: var(--pd-status-opens-soon-bg); } .ring-fg { stroke: var(--pd-status-opens-soon-fg); }
.ring .n { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.ring .n b { font-size: 26px; font-variant-numeric: tabular-nums; } .ring .n span { font-size: 11px; color: var(--rb-ink-2); }
.rtxt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .rtxt b { font-size: 17px; } .rtxt span { font-size: 14px; color: var(--rb-ink-2); }
.sheet-note { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 16px; margin: 0; text-decoration: none; }
.sheet-note.full { background: var(--pd-status-unavailable-bg); color: var(--pd-status-unavailable-fg); }
.sheet-note.alert { background: var(--pd-status-alert-bg); color: var(--pd-status-alert-fg); font-weight: 700; }
.sheet-note span { flex: 1; }
.sbar { position: fixed; z-index: 42; left: 0; right: 0; bottom: 0; padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: var(--look-glass-strong); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); border-top: 1px solid var(--rb-line);
  display: flex; gap: 10px; transform: translateY(110%); transition: transform .45s var(--look-ease) .05s; }
.sbar.on { transform: none; } .sbar .press { flex: 1; min-width: 0; }
.sbar:empty { display: none; }
@media (min-width: 760px) { .sbar { left: 50%; width: 640px; margin-left: -320px; } }
body.sheet-open { overflow: hidden; }

/* The confirmation after Remind me or Watch */
.pdone { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; background: rgba(11,20,38,.46); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .3s; }
.pdone.on { opacity: 1; pointer-events: auto; }
.done-card { width: min(420px, 100%); background: var(--rb-card); border-radius: 28px; padding: 26px 22px 22px; box-shadow: 0 30px 80px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 16px; transform: scale(.92); transition: transform .45s var(--look-ease); }
.pdone.on .done-card { transform: none; }
.tick { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto; background: var(--pd-status-open-bg); color: var(--pd-status-open-fg); }
.tick svg { width: 34px; height: 34px; stroke-dasharray: 40; stroke-dashoffset: 40; }
.pdone.on .tick svg { animation: draw .6s .2s var(--look-ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.done-card h2 { margin: 0; text-align: center; font-size: 22px; text-wrap: balance; }
.done-card p { margin: 0; text-align: center; color: var(--rb-ink-2); }
.tl { list-style: none; margin: 0; padding: 0 0 0 6px; display: flex; flex-direction: column; }
.tl li { display: flex; gap: 12px; align-items: flex-start; position: relative; padding-bottom: 14px; }
.tl li::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: 0; width: 2px; background: var(--rb-line); }
.tl li:last-child::before { display: none; }
.tl i { width: 16px; height: 16px; border-radius: 50%; margin-top: 3px; flex: none; background: var(--pd-status-opens-soon-fg); box-shadow: 0 0 0 4px var(--pd-status-opens-soon-bg); }
.tl b { display: block; font-size: 15px; } .tl span { font-size: 13px; color: var(--rb-ink-2); }
.drow { display: flex; gap: 10px; flex-wrap: wrap; } .drow .press { flex: 1 1 140px; }

/* Landing: the drawn hero, three icons, two big buttons */
.intro-icons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.intro-icons li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: #fff; font-size: 14px; font-weight: 700; }
.intro-icons .home-ico { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.3); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* Trip header and place header use the same drawn scene */
.trip-hero .scene, .place-art .scene { z-index: -2; }
.place-art { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--pd-radius-xl); aspect-ratio: 16 / 7; max-width: 100%; box-shadow: var(--look-depth); }

/* Alerts and trips: rows with an icon tile */
.row-ico { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--pd-primary-soft); color: var(--pd-primary); }
.row-ico.soon { background: var(--pd-status-opens-soon-bg); color: var(--pd-status-opens-soon-fg); }
.row-ico.watch { background: var(--pd-status-watching-bg); color: var(--pd-status-watching-fg); }
@media (prefers-reduced-motion: reduce) { .press, .ccard, .sheet, .sbar, .pdone, .done-card, .scene { transition-duration: 1ms !important; animation-duration: 1ms !important; } }
.fitlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fitlist li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.fitlist .pd-icon { width: 20px; height: 20px; flex: none; color: var(--pd-status-open-fg); margin-top: 1px; }
.fitlist li.ns .pd-icon { color: var(--rb-ink-2); }
.ssec .fitlist + .fitlist { margin-top: 4px; }
.fitlist.cond .pd-icon { color: var(--rb-icon); }
.hero-actions .press { flex: 1 1 200px; }
.intro-icons li span:last-child { line-height: 1.3; }
.intro-icons { margin: 4px 0; }
.badge[hidden], .sheet[hidden], .scrim[hidden], .sbar[hidden], .pdone[hidden] { display: none; }
.gets-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gets-grid li { display: flex; flex-direction: column; gap: 6px; padding: 14px; }
.gets-grid strong { font-size: 16px; line-height: 1.25; }
.row-card .press { margin-bottom: 4px; flex: none; }
.ccard { display: flex; flex-direction: column; } .ccard .cfoot { margin-top: auto; }
.soon-controls { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.seg-row { display: flex; gap: 8px; flex-wrap: wrap; }
.soon-status { display: flex; align-items: baseline; gap: 8px; margin: 0; font-weight: 700; color: var(--rb-ink-2); }
.soon-status .sdot { background: var(--pd-status-open-fg); box-shadow: 0 0 0 4px var(--pd-status-open-bg); }
.soon-status.wait .sdot { animation: pulse 1.2s ease-in-out infinite; }
.badge.tag { background: rgba(30, 97, 88, .85); }
.soon-link { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: var(--pd-text); text-decoration: none; }
.soon-link > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.hike-row { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.hike-row > .pd-icon { color: var(--rb-ink-2); flex: none; }
.sback { position: absolute; top: 16px; left: 16px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); color: #fff; cursor: pointer;
  background: rgba(11,20,38,.45); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); display: grid; place-items: center; }
.sheet-note.soon { background: var(--pd-status-opens-soon-bg); color: var(--pd-status-opens-soon-fg); font-weight: 700; }
.fitlist .pd-caption { display: inline; }
.day-tl { padding: 18px 16px; display: flex; flex-direction: column; gap: 14px; }
.day-tl .pd-heading { margin: 0; }
.tl.day i { background: var(--pd-primary); box-shadow: 0 0 0 4px var(--pd-primary-soft); }
.tl-time { font-variant-numeric: tabular-nums; color: var(--pd-primary); }
.sources-box summary { cursor: pointer; padding: 8px 0; }
.pmap { width: 100%; max-width: 100%; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: var(--rb-chip); border: 1px solid var(--rb-line); z-index: 0; position: relative; }
.pmap.tall { aspect-ratio: 4 / 5; }
@media (min-width: 760px) { .pmap.tall { aspect-ratio: 16 / 10; } }
.view-seg { display: flex; gap: 8px; }
.leaflet-container { font: inherit; }
.readings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.readings li { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 16px; background: var(--rb-chip); }
.rd-big { display: flex; gap: 12px; flex: none; }
.rd-big b { display: block; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.rd-big span { font-size: 12px; color: var(--rb-ink-2); }
.rd-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.aqi { flex: none; width: 58px; height: 58px; border-radius: 16px; display: grid; place-content: center; text-align: center; line-height: 1; color: #14223A; }
.aqi b { font-size: 22px; font-variant-numeric: tabular-nums; } .aqi span { font-size: 11px; font-weight: 700; }
/* EPA's own category colours (airnow.gov), text kept dark or light for contrast */
.aqi-good { background: #00E400; } .aqi-moderate { background: #FFFF00; } .aqi-usg { background: #FF7E00; }
.aqi-unhealthy { background: #FF0000; color: #fff; } .aqi-vunhealthy { background: #8F3F97; color: #fff; } .aqi-hazardous { background: #7E0023; color: #fff; }
.soon-bar { height: 6px; border-radius: 999px; background: var(--rb-chip); overflow: hidden; margin-top: 8px; }
.soon-bar i { display: block; height: 100%; background: var(--pd-primary); border-radius: inherit; transition: width .6s var(--look-ease); }
.soon-list .ccard { animation: none; }
.soon-list .ccard.fresh { animation: rise .5s var(--look-ease) both; }
.soonest > #soon-status, .soonest > #soon-list, .soonest > #soon-empty { animation: none; }

/* ---------------------------------------------------------------- Live home screen (3 Nov 2026) */
.dash { display: grid; gap: 18px; max-width: 720px; margin-inline: auto; width: 100%; }
.dash-where { display: flex; align-items: center; gap: 8px; margin: -6px 0 0; color: var(--pd-text-2, inherit); }
.dash-where .pd-icon { width: 18px; height: 18px; flex: none; }
.dash-where span { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.dash-where a { font-weight: 600; }
.dash-go { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.press.big { min-height: 84px; flex-direction: column; gap: 6px; font-size: 1.05rem; }
.press.big .pd-icon { width: 28px; height: 28px; }
.dash-sec { display: grid; gap: 10px; min-width: 0; }
.dash-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dash-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.05rem; }
.dash-head h2 .pd-icon { width: 20px; height: 20px; }
.dash-head a { font-weight: 600; white-space: nowrap; }
.dash-empty { margin: 0; color: var(--pd-text-2, inherit); }
.dash .ccards { margin: 0; padding: 0; list-style: none; }
.see-all { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-weight: 600; }
.see-all .pd-icon { width: 16px; height: 16px; }
.dash-trip { display: block; border-radius: 18px; overflow: hidden; position: relative; color: #fff; text-decoration: none; aspect-ratio: 16 / 7; max-width: 100%; }
.dash-trip-art { position: absolute; inset: 0; }
.dash-trip-art svg, .dash-trip-art .scene { width: 100%; height: 100%; display: block; }
.dash-trip .over { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px; background: linear-gradient(180deg, transparent, rgba(10, 20, 36, .72)); }
.dash-trip .over h3 { margin: 2px 0; font-size: 1.2rem; }
.dash-trip .over p { margin: 0; font-size: .9rem; opacity: .92; }
.dash-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dash-rows a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--look-card, var(--pd-surface)); box-shadow: 0 0 0 1px var(--look-hairline) inset; color: inherit; text-decoration: none; }
.dash-rows a > span:nth-child(2) { min-width: 0; display: grid; }
.dash-rows strong { overflow-wrap: anywhere; }
.ring-mini { width: 46px; height: 46px; border-radius: 50%; display: grid; place-content: center; text-align: center; line-height: 1; background: var(--pd-primary); color: #fff; }
.ring-mini b { font-size: 1.05rem; } .ring-mini i { font-style: normal; font-size: .62rem; opacity: .9; }
.row-ico.watch { width: 46px; height: 46px; border-radius: 50%; display: grid; place-content: center; background: var(--look-hairline); }
.trip-card .drow { margin-top: 10px; }

/* Before you go (3 Nov 2026) */
.visit { display: grid; gap: 12px; }
.vrow { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.vrow > .pd-icon { width: 20px; height: 20px; margin-top: 2px; }
.vrow > div { min-width: 0; display: grid; gap: 2px; }
.vrow b { font-weight: 700; }
.vrow small { display: block; color: var(--pd-text-2, inherit); opacity: .85; }
.vrow small.warn { display: flex; gap: 6px; align-items: center; color: var(--pd-warning, #B4540A); opacity: 1; font-weight: 600; }
.vrow small.warn .pd-icon { width: 16px; height: 16px; flex: none; }
.vrow ul { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px; }
.vrow li { overflow-wrap: anywhere; }
.cams { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 2px 0 0; }

/* Parkday Pro (3 Nov 2026) */
.pro { display: grid; gap: 16px; max-width: 720px; margin-inline: auto; width: 100%; }
.pro-why { display: flex; gap: 8px; align-items: center; margin: 0; font-weight: 600; }
.pro-why .pd-icon { width: 20px; height: 20px; flex: none; }
.pro-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.pro-col { border-radius: 18px; padding: 16px; background: var(--look-card, var(--pd-surface)); box-shadow: 0 0 0 1px var(--look-hairline) inset; min-width: 0; }
.pro-col.on { box-shadow: 0 0 0 2px var(--pd-primary) inset; }
.pro-col h2 { margin: 0 0 4px; font-size: 1.1rem; }
.pro-price { margin: 0 0 8px; font-weight: 700; color: var(--pd-primary); }
.pro-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pro-col li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: start; }
.pro-col li .pd-icon { width: 18px; height: 18px; margin-top: 2px; }

/* Photos (3 Nov 2026): the drawn scene at once, the NPS photo fades in over it. */
.cphoto .cimg, .sphoto .cimg, .dash-trip-art .cimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 500ms var(--look-ease); }
.cphoto .cimg.in, .sphoto .cimg.in, .dash-trip-art .cimg.in { opacity: 1; }
@media (hover: hover) { .ccard:hover .cimg { transform: scale(1.04); transition: opacity 500ms var(--look-ease), transform .8s var(--look-ease); } }
.pcredit { position: absolute; right: 10px; bottom: 6px; z-index: 2; font-size: 11px; color: rgba(255,255,255,.82); text-shadow: 0 1px 4px rgba(0,0,0,.5); max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .cimg { transition: none; } }

/* Park page card stack (3 Nov 2026) */
.now-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.now-tile { display: grid; justify-items: center; gap: 2px; padding: 12px 6px; border-radius: 16px; border: 0; background: var(--look-card, var(--pd-surface)); box-shadow: 0 0 0 1px var(--look-hairline) inset; color: var(--pd-text); font: inherit; cursor: pointer; min-width: 0; }
.now-tile .pd-icon { width: 22px; height: 22px; color: var(--rb-icon, currentColor); }
.now-tile b { font-size: 1.15rem; line-height: 1.1; }
.now-tile span { font-size: 12px; color: var(--pd-text-secondary, inherit); text-align: center; overflow-wrap: anywhere; }
.now-tile.warn { box-shadow: 0 0 0 2px var(--pd-warning, #B4540A) inset; }
.now-tile[class*="aqi-"] b { padding: 0 8px; border-radius: 8px; }
.now-tile.aqi-good b { background: #00e40033; } .now-tile.aqi-moderate b { background: #ffff0040; } .now-tile.aqi-usg b { background: #ff7e0040; }
.now-tile.aqi-unhealthy b { background: #ff000033; } .now-tile.aqi-vunhealthy b { background: #8f3f9740; } .now-tile.aqi-hazardous b { background: #7e002340; }
@media (max-width: 360px) { .now-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.more > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; font-weight: 700; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary small { grid-column: 2; font-weight: 400; color: var(--pd-text-secondary, inherit); }
.more > summary .pd-icon { width: 20px; height: 20px; transition: transform 200ms var(--look-ease); }
.more[open] > summary .pd-icon { transform: rotate(90deg); }
.more[open] { display: grid; gap: 14px; }
/* The sheet's More fold sits under the tiles, nights and weather, a hairline above it. */
.smore { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--pd-border); }
.brief { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.brief li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; }
.brief li .pd-icon { width: 18px; height: 18px; margin-top: 2px; }
.brief li span { min-width: 0; overflow-wrap: anywhere; }
.inline-more { margin-top: 8px; }
.inline-more > summary { cursor: pointer; font-weight: 600; color: var(--pd-primary); }
.inline-more[open] > summary { margin-bottom: 10px; }
.place-photo { border-radius: 22px; aspect-ratio: 16 / 9; }
.place-photo .over h1 { margin: 0; color: #fff; font-size: 28px; line-height: 1.1; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
.place-head { display: grid; gap: 12px; }

/* The search as chips on Results (3 Nov 2026): the row wraps, never scrolls sideways. */
.refine { display: grid; gap: 10px; margin-block: 4px 12px; }
.rrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rchip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; max-width: 100%; padding: 0 14px;
  border-radius: var(--pd-radius-pill); border: 1px solid var(--pd-border-strong); background: var(--pd-surface);
  color: var(--pd-text); font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.rchip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rchip .pd-icon { width: 18px; height: 18px; flex: none; }
.rchip > .pd-icon:last-child:not(:first-child) { width: 14px; height: 14px; transform: rotate(90deg); opacity: .7; transition: transform 200ms var(--look-ease); }
.rchip.is-open > .pd-icon:last-child:not(:first-child) { transform: rotate(-90deg); }
.rchip.is-on, .rchip.is-open { background: var(--pd-primary-soft); border-color: var(--pd-primary); color: var(--pd-on-primary-soft); }
.rchip.ghost { border-style: dashed; font-weight: 500; }
.rchip:focus-visible, .rseg .chip:focus-visible { outline: 3px solid var(--pd-focus); outline-offset: 2px; }
.rseg { display: inline-flex; border: 1px solid var(--pd-border-strong); border-radius: var(--pd-radius-pill); overflow: hidden; }
.rseg .chip { border: 0; border-radius: 0; min-height: 44px; }
.rpanel { display: grid; gap: 12px; padding: 14px; border-radius: 18px; }
.rpanel .dates { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.rpanel .dates label { flex: 1 1 130px; min-width: 0; }

/* Search a park by name on Home (3 Nov 2026). */
.name-search { display: grid; gap: 8px; margin-block: 4px 8px; }
.ns-field { position: relative; display: block; }
.ns-field > .pd-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; opacity: .7; pointer-events: none; }
.ns-field input { padding-left: 44px; min-height: 52px; border-radius: var(--pd-radius-pill); font-size: 17px; }
.park-hits { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.park-hits:empty { display: none; }
.ns-hit { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--pd-surface); border: 1px solid var(--pd-border); color: var(--pd-text); text-decoration: none; }
.ns-hit > span:nth-child(2) { display: grid; min-width: 0; }
.ns-hit strong { overflow-wrap: anywhere; }
.ns-none { padding: 4px 6px; }
.ns-field input[type="search"] { width: 100%; box-sizing: border-box; border: 1px solid var(--pd-border-strong); background: var(--pd-surface); color: var(--pd-text); font: inherit; font-size: 17px; -webkit-appearance: none; appearance: none; }

/* The quiet 'saved' pill (Castings CST-286) in Parkday's colours, under the app bar. */
:root { --ack-top: 64px; --ack-bg: var(--pd-night); --ack-ink: #FFFFFF; --ack-edge: rgba(255, 255, 255, .14); }
.ack-pill { font-weight: 600; box-shadow: 0 8px 24px rgba(11, 20, 38, .25); }

/* Motion (Castings CST-287, 3 Nov 2026): one easing curve (--look-ease) for the app, and every motion
   off for a person who asked their phone for less, whatever the rule above that started it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ================================================================ Redesign step 1 (3 Nov 2026)
   One spacing scale: 16px sides and 16px between cards and sections, everywhere; inside a card 16px. */
:root { --space: 16px; --space-s: 8px; --space-l: 24px; }
main { padding: var(--space); }
@media (min-width: 720px) { main { padding: var(--space-l); } }
.ccards, .dash, .pro { gap: var(--space); }

/* The card is the photo: pills at the top, name, facts and the one action over the foot of it. */
.ccard .cphoto { aspect-ratio: 1 / 1.02; }
.ccard .cphoto::after { background: linear-gradient(180deg, rgba(7,14,28,.45) 0%, rgba(7,14,28,0) 22%, rgba(7,14,28,0) 42%, rgba(7,14,28,.92) 100%); }
.ccard .over { left: var(--space); right: var(--space); bottom: var(--space); gap: 4px; }
.ccard .over h2 { font-size: 24px; }
.ccard .over p { font-size: 14px; line-height: 1.35; }
.ccard .badge { top: var(--space); }
.ccard .badge.l { left: var(--space); } .ccard .badge.r { right: var(--space); }
.ccard .pcredit { top: auto; bottom: auto; }
.ccard .cfoot { padding: 0; margin-top: 10px; background: none; border: 0; }
.ccard .cstate b { color: #fff; font-size: 16px; }
.ccard .cstate span { color: rgba(255,255,255,.82); }
.ccard .cfoot .press { min-height: 44px; }
.ccard .pcredit { position: absolute; right: var(--space); top: calc(var(--space) + 40px); z-index: 1; font-size: 10px; color: rgba(255,255,255,.7); }

/* The foot of every screen: centered, the studio line first. */
.foot { text-align: center; align-items: center; gap: 6px; padding: var(--space-l) var(--space) calc(var(--space-l) + 8px); }
.foot p { margin: 0; max-width: 46ch; }
.foot .by { font-weight: 700; color: var(--pd-text); letter-spacing: .01em; }
.foot .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
.foot .links a { white-space: nowrap; }
.ccard .cstate b { display: inline-flex; align-items: center; gap: 10px; }
.ccard .pcredit { top: calc(var(--space) + 44px); }
.foot .note { font-size: 12px; opacity: .85; }

/* Redesign step 2 (3 Nov 2026): Home per the approved mockup. The promise sits on a park photo with
   the search; Camp and Hike; where you start; your trip, reminders and watches as chips; photo tiles. */
.home2 { gap: var(--space); }
.home2 .hero { width: auto; animation: none; align-items: stretch; padding: 0; position: relative; overflow: hidden; isolation: isolate; margin: calc(var(--space) * -1) calc(var(--space) * -1) 0; min-height: 330px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; }
@media (min-width: 720px) { .home2 .hero { margin: 0; border-radius: 24px; } }
.home2 .hero .cimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 500ms var(--look-ease); z-index: 0; }
.home2 .hero .cimg.in { opacity: 1; }
.home2 .hero .scene { z-index: 0; }
.home2 .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(7,14,28,.15) 0%, rgba(7,14,28,0) 30%, rgba(7,14,28,.88) 100%); }
.home2 .hero .pcredit { top: calc(var(--space) - 4px); bottom: auto; right: var(--space); }
.home2 .hero-in { align-self: stretch; width: auto; max-width: none; margin: 0; position: relative; z-index: 2; display: grid; gap: var(--space-s); padding: var(--space-l) var(--space) var(--space); }
.home2 .hero h1 { margin: 0; color: #fff; font-size: 32px; line-height: 1.08; max-width: 15ch; text-wrap: balance; }
.home2 .hero-in > p { margin: 0 0 var(--space-s); font-size: 16px; color: #E6ECF5; }
.home2 .hero .name-search { margin: 0; }
.home2 .hero .ns-field input[type="search"] { background: rgba(255,255,255,.96); color: #1A2238; border-color: transparent; }
.home2 .hero .ns-field > .pd-icon { color: #4A5268; opacity: 1; }
.home2 .hero .park-hits { background: var(--pd-surface); color: var(--pd-text); border-radius: 18px; padding: 6px; }
.home2 .dash-go .press.big { min-height: 64px; flex-direction: row; gap: 10px; font-size: 18px; }
.home2 .dash-where { margin: 0; justify-content: center; }
.home2 .dash-where span { flex: 0 1 auto; }
.home2 .press.wide { width: 100%; }
.mchips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-s); }
.mchip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--look-card, var(--pd-surface)); box-shadow: 0 0 0 1px var(--look-hairline) inset; color: var(--pd-text); font-weight: 700; font-size: 14px; text-decoration: none; max-width: 100%; }
.mchip .pd-icon { width: 18px; height: 18px; flex: none; }
.home2 .dash-head h2 { font-size: 20px; }
.htiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-s); }
@media (min-width: 720px) { .htiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.htile { position: relative; isolation: isolate; overflow: hidden; display: block; width: 100%; aspect-ratio: 1 / 1.05; border: 0; padding: 0; border-radius: 18px; color: #fff; text-decoration: none; text-align: left; font: inherit; cursor: pointer; background: #131F36; }
.htile .cimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 500ms var(--look-ease); z-index: 0; }
.htile .cimg.in { opacity: 1; }
.htile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(7,14,28,.25) 0%, rgba(7,14,28,0) 30%, rgba(7,14,28,.88) 100%); pointer-events: none; }
.htile .chipst { position: absolute; top: 8px; left: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; max-width: calc(100% - 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.htile .chipst .pd-icon { width: 14px; height: 14px; flex: none; }
.htile .st-open { background: #10302C; color: #86D3C4; }
.htile .st-hike { background: #17284A; color: #A2C3F7; }
.htile .over { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; display: grid; gap: 2px; }
.htile .over b { font-size: 16px; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.htile .over i { font-style: normal; font-size: 12px; color: #D6DEEA; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.htiles-note { display: flex; align-items: center; justify-content: center; gap: 10px; margin: var(--space-s) 0 0; }
.htiles-note .sdot { background: var(--pd-status-open-fg); box-shadow: 0 0 0 4px var(--pd-status-open-bg); animation: pulse 1.2s ease-in-out infinite; }

/* Redesign step 3 (3 Nov 2026): the campground screen. Three answers in large type, Watch, Book and
   Share always in the bar. */
.camp3 { display: grid; gap: var(--space-l); }
.camp3 .ans { display: grid; gap: var(--space-s); min-width: 0; }
.camp3 .ans > h3 { margin: 0; font-size: 20px; line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--pd-text); }
.camp3 .nights { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.camp3 .night b { font-size: 17px; } .camp3 .night span { font-size: 14px; font-weight: 600; }
.likes { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--space-s); }
.like { display: grid; justify-items: center; gap: 2px; padding: 12px 6px; border-radius: 16px; background: var(--rb-card); border: 1px solid var(--rb-line); min-width: 0; text-align: center; }
.like .pd-icon { width: 24px; height: 24px; color: var(--rb-icon); }
.like b { font-size: 19px; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.like span { font-size: 12px; color: var(--rb-ink-2); }
.like.warn { border-color: var(--pd-warning, #B4540A); box-shadow: 0 0 0 1px var(--pd-warning, #B4540A) inset; }
.like.dim b { font-size: 16px; }
.like.aqi-good b { color: #2E8B3E; } .like.aqi-moderate b { color: #9A7A00; } .like.aqi-usg b, .like.aqi-unhealthy b, .like.aqi-vunhealthy b, .like.aqi-hazardous b { color: #C2410C; }
.pills { display: flex; flex-wrap: wrap; gap: var(--space-s); }
.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; background: var(--rb-card); border: 1px solid var(--rb-line); font-size: 14px; font-weight: 600; }
.pill .pd-icon { width: 18px; height: 18px; color: var(--rb-icon); flex: none; }
.pill.no { opacity: .6; text-decoration: line-through; text-decoration-thickness: 1px; }
.bar3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--space-s); width: 100%; }
.bar3 .press { min-height: 52px; font-size: 16px; padding: 0 8px; gap: 6px; flex-direction: row; white-space: nowrap; }
.bar3 .press .pd-icon { width: 20px; height: 20px; flex: none; }
@media (max-width: 360px) { .bar3 .press .pd-icon { display: none; } }
.camp3 .night.wide { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space); }
.camp3 .night.wide span { font-size: 16px; text-align: right; }

/* Share card preview (3 Nov 2026) */
.share-prev { display: grid; place-items: center; min-height: 200px; width: 100%; }
.share-prev img { width: 100%; max-width: 360px; height: auto; border-radius: 16px; box-shadow: 0 8px 28px rgba(11,20,38,.25); }
.done-card .center { text-align: center; }

/* Redesign step 4 (3 Nov 2026): trails as photo cards; the hike screen. */
.trail-card .tpills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.trail-card .tpills span { display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; border-radius: 999px; background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 13px; font-weight: 700; }
.trail-card.wait .over p { opacity: .85; }
.hike3 .stats { margin-bottom: 0; }
.prof { margin: 0; display: grid; gap: 4px; }
.prof svg { width: 100%; height: 88px; display: block; }
.prof-line { stroke: var(--pd-primary, #E8642C); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.prof-fill { fill: color-mix(in srgb, var(--pd-primary, #E8642C) 16%, transparent); }
.prof figcaption { display: flex; justify-content: space-between; }
.dline { display: flex; align-items: center; gap: 12px; font-size: 17px; line-height: 1.35; }
.dline .pd-icon { width: 24px; height: 24px; flex: none; color: var(--rb-icon); }

/* The park page overview (3 Nov 2026, Alex: "Just look how long this scroll is"). */
.place-overview { display: grid; gap: var(--space-l); }
.place .place-head .drow { margin-top: var(--space); }
.headsup { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 14px var(--space); border-radius: 16px; border: 0; cursor: pointer; font: inherit; font-size: 15px;
  background: var(--pd-status-unavailable-bg); color: var(--pd-status-unavailable-fg); }
.headsup .pd-icon { width: 22px; height: 22px; } .headsup b { margin-right: 4px; } .headsup i { font-style: normal; opacity: .8; }
.getin { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.getin li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 15px; line-height: 1.4; }
.getin .pd-icon { width: 20px; height: 20px; color: var(--rb-icon); margin-top: 1px; }
.getin small.pd-caption { display: block; font-size: 13.5px; color: var(--rb-ink-2); }
.fish-more summary { cursor: pointer; list-style: none; font-weight: 600; }
.fish-more summary::-webkit-details-marker { display: none; }
.fish-more summary::after { content: ' ›'; color: var(--rb-icon); }
.fish-more[open] summary::after { content: ' ⌄'; }
.fish-more p { margin: 6px 0 0; color: var(--rb-ink-2); font-size: 14px; line-height: 1.5; }
.moregrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-s); }
.mtile { display: grid; justify-items: center; gap: 6px; padding: 14px 6px; border-radius: 16px; border: 1px solid var(--rb-line); background: var(--rb-card); color: var(--pd-text); font: inherit; font-size: 13px; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; min-width: 0; }
.mtile .pd-icon { width: 24px; height: 24px; color: var(--rb-icon); }
.panel-sheet { display: grid; gap: var(--space); padding-top: 8px; }
.panel-sheet > .panel { margin: 0; box-shadow: none; background: transparent; border: 0; padding: 0; }
.sclose.flat { position: static; justify-self: end; }
.linkish { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--pd-link, var(--pd-primary)); cursor: pointer; text-decoration: underline; }
.headsup.mine-day { background: var(--look-card, var(--pd-surface)); color: var(--pd-text); box-shadow: 0 0 0 1px var(--look-hairline) inset; text-decoration: none; }
.headsup.mine-day .pd-icon { color: var(--rb-icon); }
@media (min-width: 720px) { .place-photo { aspect-ratio: auto; height: 420px; } }
.readings li.gauge { flex-direction: column; align-items: stretch; gap: 10px; }
.readings li.gauge .rd-big { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-s); }
.readings li.gauge .rd-big b { font-size: 24px; }
.readings li.gauge .rd-big span { display: block; margin-top: 4px; }

/* Dates in the campground sheet (3 Nov 2026) */
.dchips { display: flex; flex-wrap: wrap; gap: var(--space-s); }
.dchip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--rb-line); background: var(--rb-card); color: var(--pd-text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.dchip .pd-icon { width: 16px; height: 16px; }
.dchip.on { background: var(--pd-primary); color: var(--pd-on-primary); border-color: transparent; } /* was white on white in dark: --pd-bg never existed (3 Nov 2026) */
.dform { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-s); padding: 12px; border-radius: 16px; background: var(--rb-chip); }
.dform label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.dform input, .dform select { min-height: 40px; border-radius: 10px; border: 1px solid var(--pd-border-strong); background: var(--pd-surface); color: var(--pd-text); font: inherit; padding: 0 10px; }
.nextopen { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 12px 14px; border-radius: 16px; border: 0; font: inherit; cursor: pointer;
  background: var(--pd-status-open-bg); color: var(--pd-status-open-fg); margin: 0; }
.nextopen .pd-icon { width: 22px; height: 22px; }
.nextopen.wait, .nextopen.none { display: flex; background: var(--rb-chip); color: var(--rb-ink-2); cursor: default; }
.nextopen.wait .sdot { animation: pulse 1.2s ease-in-out infinite; }

/* More as tiles in the sheets (3 Nov 2026) */
.smore-tiles { display: grid; gap: var(--space-s); }
.smore-tiles > h3 { margin: 0; font-size: 20px; text-transform: none; letter-spacing: 0; color: var(--pd-text); }
.mtile[aria-expanded="true"] { background: var(--pd-primary); color: var(--pd-on-primary); border-color: transparent; }
.mtile[aria-expanded="true"] .pd-icon { color: inherit; }
.more-sec { padding-top: var(--space-s); }
.more-sec > .ssec:first-child > h3 { margin-top: 0; }

/* The area page (3 Nov 2026) */
.place-photo .crumb { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #E6ECF5; }
.place-photo .crumb .pd-icon { width: 16px; height: 16px; }
.area .place-head .drow { margin-top: var(--space); }
.area .place-head .drow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-s); }
.area .place-head .drow .press { min-width: 0; }

/* Where you are and what is next (3 Nov 2026) */
.bar.top { display: flex; align-items: center; gap: 10px; }
.hback { display: grid; place-items: center; width: 40px; height: 40px; margin-left: -8px; border: 0; border-radius: 12px; background: transparent; color: var(--pd-text); cursor: pointer; flex: none; }
.hback .pd-icon { width: 24px; height: 24px; }
.crumb { min-width: 0; flex: 1 1 auto; font-weight: 700; font-size: 16px; color: var(--pd-text-secondary, var(--pd-text)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumb:not(:empty)::before { content: "›"; margin-right: 8px; opacity: .6; }
.planbar { position: fixed; z-index: 41; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(var(--tabs-h) + var(--safe-bottom) + 8px);
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 16px; text-decoration: none;
  background: var(--pd-text); color: var(--pd-background); box-shadow: 0 8px 24px rgba(11,20,38,.25); font-size: 14px; }
.planbar span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planbar .pd-icon { width: 20px; height: 20px; }
@media (min-width: 760px) { .planbar { left: 50%; right: auto; width: 640px; margin-left: -320px; } }
/* The room under the page for the plan bar is the body's bottom padding (luxe.css, 4 Nov 2026). */
body.sheet-open .planbar { display: none; }
.planline { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 14px; border-radius: 16px; border: 1px dashed var(--pd-border-strong, var(--rb-line)); background: transparent; color: var(--pd-text); font: inherit; font-size: 15px; cursor: pointer; text-decoration: none; }
.planline .pd-icon { width: 22px; height: 22px; color: var(--rb-icon); }
.planline.done { border-style: solid; background: var(--pd-status-open-bg); color: var(--pd-status-open-fg); }
.planline.done .pd-icon { color: inherit; }
.planbar { min-height: 56px; padding-block: 8px; }
.planbar small { display: block; font-size: 12px; opacity: .75; }
.planbar b { margin-right: 4px; }
.screen .list li p, .credits li { overflow-wrap: anywhere; }
/* Home is How Parkday works (3 Nov 2026, Alex): one screen with no scroll, the title on one line,
   Parkday only in the top bar. The screen is exactly the space between the bars; the steps share
   what is left, and only a screen too small for all of it scrolls. */
.guide { --guide-h: calc(100dvh - var(--bar-h) - var(--safe-top) - var(--safe-bottom) - 2 * var(--space));
  display: flex; flex-direction: column; gap: clamp(8px, 1.6dvh, 14px); min-height: var(--guide-h); margin: 0; }
.guide .hero { flex: none; min-height: 0; align-items: flex-end;
  padding: calc(var(--bar-h) + var(--safe-top) + clamp(14px, 3dvh, 28px)) max(20px, env(safe-area-inset-right, 0px)) clamp(14px, 2.6dvh, 24px) max(20px, env(safe-area-inset-left, 0px)); }
.guide .hero-copy { gap: 6px; }
.guide .hero-title { white-space: nowrap; font-size: clamp(28px, 9vw, 48px); line-height: 1.05; }
.guide .hero-lede { margin: 0; font-size: 16px; line-height: 1.4; }
.guide-steps { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: clamp(6px, 1.2dvh, 10px); }
.guide-steps li { flex: 1 1 auto; }
.guide-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: clamp(10px, 1.6dvh, 14px) 14px; border-radius: 16px; background: var(--look-card, var(--pd-surface)); box-shadow: 0 0 0 1px var(--look-hairline) inset; }
.guide-steps .home-ico { width: 40px; height: 40px; }
.guide-steps b { font-size: 16px; line-height: 1.25; } .guide-steps p { margin: 2px 0 0; font-size: 15px; line-height: 1.35; color: var(--pd-text-secondary, inherit); }
.guide .home-cards { margin-top: 0; }
.guide-go { flex: none; display: grid; gap: 8px; justify-items: stretch; }
.guide-go .press { width: 100%; }
.guide-by { margin: 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--pd-text-secondary); }
.trip-photo a { color: inherit; text-decoration: none; display: block; }
.trip-pills { margin-top: var(--space-s); }
.trip-bar { margin-block: var(--space); }
.trip-hero { position: relative; } .trip-hero .cimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 500ms var(--look-ease); z-index: -2; }
.trip-hero .cimg.in { opacity: 1; }
.guide-go .press.big { min-height: 56px; flex-direction: row; gap: 10px; }

/* Home has no tab bar (3 Nov 2026, Alex): Start is the only way on; the bar shows on every other screen. */
body.home-only .bar.tabs, body.home-only .planbar { display: none; }
body.home-only { padding-bottom: var(--safe-bottom); }
/* Shorter phones: the same screen, tighter, so it still fits without scrolling. */
@media (max-height: 760px) {
  .guide .hero { padding-top: calc(var(--bar-h) + var(--safe-top) + 10px); padding-bottom: 12px; }
  .guide .hero-lede { font-size: 15px; line-height: 1.35; }
  .guide-steps li { padding: 8px 12px; gap: 10px; grid-template-columns: 36px 1fr; }
  .guide-steps .home-ico { width: 36px; height: 36px; border-radius: 12px; }
  .guide-steps b { font-size: 15px; } .guide-steps p { font-size: 14px; line-height: 1.3; }
  .guide-go .press.big { min-height: 50px; }
  .guide-by { font-size: 12px; }
}
@media (max-height: 660px) {
  .guide { gap: 6px; } .guide-steps { gap: 5px; } .guide-steps li { padding: 6px 12px; }
  .guide .hero { padding-top: calc(var(--bar-h) + var(--safe-top) + 6px); padding-bottom: 10px; }
}

/* Home, round 2 (3 Nov 2026, Alex): the dawn scene is the whole screen, so its colours run down behind
   the cards; the scene shows between the title and the cards; the cards are compact glass sitting on
   it; the agency line sits under the studio line. */
/* The page under the cards is the header's purple ground, carried down (3 Nov 2026, Alex). */
body.dusk { background: var(--dusk-ground); } /* the scene's purple ground, solid to the foot of the screen (Alex, 3 Nov 2026) */
.guide .hero { flex: 1 1 auto; align-items: flex-start; min-height: 0; }
.guide .hero-art { object-position: 60% 30%; }
.guide .hero-shade { background: linear-gradient(180deg, rgba(11, 20, 38, 0.55) 0%, rgba(11, 20, 38, 0.15) 34%, rgba(11, 20, 38, 0) 60%, color-mix(in srgb, var(--dusk-ground) 70%, transparent) 88%, var(--dusk-ground) 100%); }
.guide .hero-title, .guide .hero-lede { text-shadow: 0 2px 18px rgba(7, 14, 28, 0.55); }
.guide-steps { flex: none; }
.guide-steps li { flex: none; padding: 10px 14px; background: var(--dusk-card); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 0 0 1px var(--dusk-edge) inset, 0 8px 24px rgba(7, 14, 28, 0.22); }
.guide-steps b { color: var(--dusk-ink); } .guide-steps p { color: var(--dusk-ink-2); }
.guide .home-cards .home-card { background: var(--dusk-card); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--dusk-ink); }
.guide-by { color: var(--dusk-ink); }
.guide-note { margin: 0 auto; max-width: 40ch; text-align: center; font-size: 11.5px; line-height: 1.35; color: var(--dusk-ink-2); }
.guide-go { gap: 6px; }
@media (max-height: 760px) { .guide-steps li { padding: 7px 12px; } .guide-note { font-size: 11px; } }
@media (max-height: 660px) { .guide-steps li { padding: 5px 12px; } .guide-note { font-size: 11px; } }
@media (max-height: 660px) { .guide-go { gap: 3px; } .guide .hero { padding-bottom: 4px; } }
/* The invite-only sign-in on How Parkday works (Alex, 5 Nov 2026): a fifth card above Start. All
   five cards are the same height and evenly spaced (one grid, equal rows, one gap), and the send
   button is a tint of the accent, not a second orange button competing with Start. */
.guide.locked .hero { padding-bottom: 6px; }
.guide.locked .guide-steps { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: 8px; }
.guide.locked .guide-steps li { padding: 10px 12px; gap: 10px; grid-template-columns: 34px 1fr; }
.guide.locked .guide-steps .home-ico { width: 34px; height: 34px; border-radius: 11px; }
.guide.locked .guide-steps b { font-size: 15px; } .guide.locked .guide-steps p { font-size: 13.5px; line-height: 1.3; }
.guide-steps li.lock-li { display: block; min-width: 0; }
.lock-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: center; height: 100%; min-width: 0; }
.lock-card p { margin: 0; font-size: 13.5px; line-height: 1.3; color: var(--dusk-ink-2); } .lock-card p b { color: var(--dusk-ink); }
.lock-card .lock-head { font-size: 13.5px; } .lock-card .lock-head b { font-size: 15px; }
.lock-row { display: flex; gap: 8px; min-width: 0; }
.lock-card input { flex: 1 1 auto; width: 0; min-width: 0; box-sizing: border-box; font: inherit; font-size: 16px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--lx-line-2, var(--dusk-edge)); background: var(--lx-card, rgba(255, 255, 255, 0.9)); color: var(--lx-ink, inherit); }
.lock-card #acct-code { font-variant-numeric: tabular-nums; } .lock-card #acct-code:not(:placeholder-shown) { letter-spacing: .25em; }
.lock-card .btn.lock-go { flex: none; white-space: nowrap; min-height: 42px; padding: 0 14px; border-radius: 12px; font-size: 14.5px; font-weight: 750; border: 1px solid color-mix(in srgb, var(--lx-accent, #C2410C) 35%, transparent);
  background: color-mix(in srgb, var(--lx-accent, #C2410C) 12%, transparent); color: var(--lx-accent-ink, #9A3412); box-shadow: none; }
.lock-links { display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: center; } .lock-links:has(.lock-sent) { flex-wrap: nowrap; } .lock-link { flex: none; white-space: nowrap; }
.lock-sent { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--dusk-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lock-sent b { color: var(--dusk-ink); }
.lock-link { background: none; border: 0; padding: 4px 0; font: inherit; font-size: 13px; font-weight: 700; color: var(--lx-accent-ink, inherit); cursor: pointer; }
.lock-card .lock-msg { font-size: 13px; font-weight: 600; color: var(--lx-accent-ink, inherit); } .lock-card .lock-msg:empty { display: none; }
.guide-go > * { min-width: 0; }
@media (max-width: 370px) { .lock-card .btn.lock-go { padding: 0 11px; font-size: 13.5px; } .lock-card input { padding: 9px 10px; } }
/* Bigger cards, set higher (3 Nov 2026, Alex): roomier cards, and part of the spare height now sits
   above Start instead of all of it in the header. Short phones keep their tighter rules below. */
@media (min-height: 761px) {
  .guide-steps { gap: 10px; }
  .guide-steps li { padding: 13px 16px; grid-template-columns: 44px 1fr; gap: 14px; }
  .guide-steps .home-ico { width: 44px; height: 44px; }
  .guide-steps b { font-size: 17px; } .guide-steps p { font-size: 15.5px; line-height: 1.38; }
  .guide .hero { flex-grow: 1; }
  .guide-go { flex-grow: 0.6; display: flex; flex-direction: column; justify-content: flex-end; }
}
@media (min-height: 761px) and (max-width: 399px) {
  .guide-steps li { padding: 13px 14px; } .guide-steps b { font-size: 16px; } .guide-steps p { font-size: 15px; line-height: 1.35; }
}

/* Explore (3 Nov 2026): Home's look carried on. The header photo with one short title on one line and
   the search; Camp and Hike as row buttons; where you start as a pill; photo tiles on the purple. */
.explore .hero { min-height: 300px; }
.explore .hero::after { background: linear-gradient(180deg, rgba(11, 20, 38, 0.5) 0%, rgba(11, 20, 38, 0.1) 30%, color-mix(in srgb, var(--dusk-ground) 55%, transparent) 72%, var(--dusk-ground) 100%); }
.explore .hero h1 { max-width: none; white-space: nowrap; font-size: clamp(28px, 9vw, 48px); line-height: 1.05; letter-spacing: -0.02em; text-shadow: 0 2px 18px rgba(7, 14, 28, 0.55); }
.explore .hero-in { gap: 14px; padding-bottom: 8px; }
.explore .dash-go .press.big { min-height: 60px; flex-direction: row; gap: 10px; }
.where-pill { align-self: center; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 8px 16px; border-radius: 999px; background: var(--dusk-card); box-shadow: 0 0 0 1px var(--dusk-edge) inset; color: var(--dusk-ink); text-decoration: none; font-size: 15px; }
.where-pill .pd-icon { width: 18px; height: 18px; flex: none; color: var(--pd-primary); }
.where-pill span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.where-pill em { font-style: normal; font-weight: 700; color: var(--dusk-link); }
.dusk .explore .dash-head h2 { color: var(--dusk-ink); }

/* Dusk everywhere (3 Nov 2026, Alex: carry the dark blue to purple across every screen). Dark: night
   navy under the bar fading to the scene's purple ground. Light: a pale dawn, cream to soft lavender,
   with white cards and dark text (higher contrast than a designer's default, for easy reading). */
:root { --dusk-ground: #FFF0E1; --dusk-card: rgba(255, 255, 255, 0.95); --dusk-edge: rgba(120, 60, 20, 0.14); --dusk-ink: #141B2E; --dusk-ink-2: #343C52; --dusk-link: #A8410A;
  --look-page: linear-gradient(180deg, #FFF9F2 0%, #FFF4E8 55%, #FFF0E1 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --dusk-ground: #1A1729; --dusk-card: rgba(17, 26, 48, 0.82); --dusk-edge: rgba(255, 255, 255, 0.12); --dusk-ink: #FFFFFF; --dusk-ink-2: rgba(255, 255, 255, 0.84); --dusk-link: #FFB27A;
  --look-page: linear-gradient(180deg, #0B1426 0%, #131A30 50%, #1A1729 100%); } }
:root[data-theme="dark"] { --dusk-ground: #1A1729; --dusk-card: rgba(17, 26, 48, 0.82); --dusk-edge: rgba(255, 255, 255, 0.12); --dusk-ink: #FFFFFF; --dusk-ink-2: rgba(255, 255, 255, 0.84); --dusk-link: #FFB27A;
  --look-page: linear-gradient(180deg, #0B1426 0%, #131A30 50%, #1A1729 100%); }
body { background: var(--look-page), var(--dusk-ground); background-attachment: scroll; }
body.dusk { background: var(--dusk-ground); }

/* The top bar: the brand on the left, light/dark and the menu on the right. */
.bar-end { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.bar-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--pd-text); cursor: pointer; }
.bar-btn:hover, .bar-btn:focus-visible { background: var(--look-hairline); }
.bar-btn .pd-icon { width: 22px; height: 22px; }
.lk-dark, .t-sun { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lk-dark, :root:not([data-theme="light"]) .t-sun { display: inline; } :root:not([data-theme="light"]) .lk-light, :root:not([data-theme="light"]) .t-moon { display: none; } }
:root[data-theme="dark"] .lk-dark, :root[data-theme="dark"] .t-sun { display: inline; }
:root[data-theme="dark"] .lk-light, :root[data-theme="dark"] .t-moon { display: none; }
.menu-rows a { text-decoration: none; color: inherit; }

/* Explore on one screen (3 Nov 2026): a shorter photo and smaller tiles; no footer (the studio line,
   the agency line and the links are in the top bar's menu, and on Home). */
.explore .hero { min-height: clamp(150px, 20dvh, 220px); }
.explore .htile { aspect-ratio: 1 / 0.8; }
.explore-foot { margin: 4px 0 0; display: grid; gap: 4px; text-align: center; }
.explore-foot .by { margin: 0; font-size: 13px; font-weight: 700; color: var(--dusk-ink); }
.explore-foot .note { margin: 0 auto; max-width: 42ch; font-size: 11.5px; line-height: 1.35; color: var(--dusk-ink-2); }
.where-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.where-row .where-pill { align-self: auto; }
.where-row .mchip { min-height: 40px; background: var(--dusk-card); color: var(--dusk-ink); box-shadow: 0 0 0 1px var(--dusk-edge) inset; }

/* Explore, round 2 (3 Nov 2026, Alex): the purple darker and quieter (#1A1729), light mode the pale
   peach around the sun, photo tiles that read as buttons (a thin warm edge, depth, and a press), six
   tiles in the space that was empty, and a When pill beside where you start. */
.htile { box-shadow: 0 0 0 1.5px rgba(255, 155, 82, 0.55), 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 10px 22px rgba(7, 10, 20, 0.45); transition: transform 140ms var(--look-ease), box-shadow 140ms var(--look-ease); }
.htile:hover { transform: translateY(-2px); box-shadow: 0 0 0 1.5px rgba(255, 155, 82, 0.85), 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 14px 28px rgba(7, 10, 20, 0.5); }
.htile:active { transform: translateY(1px) scale(0.985); box-shadow: 0 0 0 1.5px rgba(255, 155, 82, 0.85), 0 4px 10px rgba(7, 10, 20, 0.4); }
:root:not([data-theme="dark"]) .htile { box-shadow: 0 0 0 1.5px rgba(214, 98, 30, 0.55), 0 10px 22px rgba(120, 60, 20, 0.18); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .htile { box-shadow: 0 0 0 1.5px rgba(255, 155, 82, 0.55), 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 10px 22px rgba(7, 10, 20, 0.45); } }
.explore .htiles { gap: 12px; }
.explore .htile { aspect-ratio: 1 / 0.62; }
button.where-pill { border: 0; font: inherit; font-size: 15px; cursor: pointer; }
.where-pill .pd-icon { color: var(--pd-primary); }
.where-pill > .pd-icon:last-child { width: 14px; height: 14px; transform: rotate(90deg); color: var(--dusk-ink-2); }
.where-row > * { min-width: 0; max-width: 100%; }
.explore .htile .over b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.explore .htile .over i { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.explore .htile .chipst { font-size: 11.5px; padding: 3px 9px; }
.dchip small { font-weight: 500; opacity: .8; font-size: 12px; }

.dchip.off { opacity: .5; cursor: not-allowed; }
.night.retry { border: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }

/* Placeholders that hold a tile's place while its data loads, so nothing jumps (3 Nov 2026). */
.htile.skel { cursor: default; background: linear-gradient(100deg, rgba(255,255,255,.04) 30%, rgba(255,255,255,.10) 50%, rgba(255,255,255,.04) 70%) 0 0 / 300% 100%, var(--dusk-card); animation: skel 1.4s linear infinite; box-shadow: 0 0 0 1px var(--dusk-edge) inset; }
@keyframes skel { to { background-position: -150% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .htile.skel { animation: none; } }

/* The place page (3 Nov 2026, Alex: 'Explore, then one place page'). A campground or a trail is a
   page: it fills the space between the top bar and the tabs, opens with a short fade, the top bar
   names it with a back arrow, and its Book, Watch and Share sit just above the tabs. A detail
   (forecast, air, all trails, the menu, dates) stays a window over the screen, as before. */
.scrim.page { display: none !important; }
.sheet.page { top: calc(var(--bar-h) + var(--safe-top)); bottom: calc(var(--tabs-h) + var(--safe-bottom)); max-height: none; border-radius: 0; box-shadow: none;
  transform: none; opacity: 0; transition: opacity .18s ease; background: var(--look-page), var(--dusk-ground); }
.sheet.page.on { opacity: 1; }
@media (min-width: 760px) { .sheet.page { left: 0; width: auto; margin-left: 0; } .sheet.page > div:not(.grab) { max-width: 760px; margin-inline: auto; } }
.sheet.page .grab, .sheet.page .sclose { display: none; }
/* A page has the back arrow in the top bar; a second one on the photo was a double (4 Nov 2026). */
.sheet.page .sback { display: none; }
body.page-open .sbar { bottom: calc(var(--tabs-h) + var(--safe-bottom)); border-top: 1px solid var(--look-hairline); }
body.page-open .bar.tabs { z-index: 43; }
/* A window: sized to what it holds, over a dimmed screen, on the dusk colours. */
.sheet:not(.page) { background: var(--dusk-ground); }
.smore-all { display: grid; gap: 22px; }

.sample-note { margin: 6px 4px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Still, not shaking (3 Nov 2026, Alex: 'that tremor shake'). Every part of a screen used to rise 10 px
   into place each time the screen was drawn, and screens are drawn again as each source answers, so
   the page twitched over and over while it loaded. Nothing moves into place now, the backgrounds
   scroll with the page instead of being pinned behind it, and placeholders do not shimmer. */
.screen > *, .rise, .results > li, .ccard, .soon-list .ccard.fresh { animation: none !important; }
body { background-attachment: scroll !important; }
.htile.skel { animation: none; }

/* Sources as cards (3 Nov 2026). */
.sources-screen .src-lede { margin: 0; font-size: 17px; }
.src-grid { display: grid; gap: 12px; }
@media (min-width: 720px) { .src-grid { grid-template-columns: 1fr 1fr; } }
.src-card { padding: 16px; border-radius: 18px; background: var(--dusk-card); box-shadow: 0 0 0 1px var(--dusk-edge) inset; color: var(--dusk-ink); min-width: 0; display: grid; gap: 8px; }
.src-card h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 18px; }
.src-card h2 .pd-icon { width: 22px; height: 22px; color: var(--pd-primary); flex: none; }
.src-card p { margin: 0; color: var(--dusk-ink-2); }
.src-card ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.src-card details summary { cursor: pointer; font-weight: 700; color: var(--dusk-link); font-size: 14px; }
.src-card details li { overflow-wrap: anywhere; }
/* A heading the app focuses for screen readers shows no outline (the window's title, 3 Nov 2026). */
[tabindex="-1"]:focus, [data-details-heading]:focus { outline: none; }

.stag.soon { background: var(--pd-status-opens-soon-bg); color: var(--pd-status-opens-soon-fg); }
.nextopen.soon { background: var(--pd-status-opens-soon-bg); color: var(--pd-status-opens-soon-fg); }
/* Every photo says whose it is (7 Nov 2026): tiles carry the credit under the name; the trip hero keeps it top right, clear of the name. */
.htile .over .tcredit { font-size: 10px; line-height: 1.2; color: rgba(255,255,255,.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trip-hero .pcredit { top: 10px; bottom: auto; right: 12px; z-index: 1; }