/* ============================================================
   COMPONENTS — Parks Genie
   The canonical component layer. Every reusable primitive (and
   the UI kits) style themselves with THESE classes, which are
   built entirely on the tokens in tokens/*.css. No raw hex here
   except where a token genuinely doesn't exist.

   Convention: every class is prefixed `pg-`. A component sets
   its signal color by writing `--accent: var(--signal-…)` on the
   root element; children read `var(--accent)`.
   ============================================================ */

/* ---- glyph sizing (the inline SF-symbol-style SVGs) ---- */
.pg-glyph { width: 1em; height: 1em; display: inline-block; flex: none; }
.pg-glyph .glyph-stroke,
.pg-glyph [fill="none"] { stroke: currentColor; }
.pg-glyph .glyph-fill { fill: currentColor; }

/* ============================================================
   BUTTON — primary (gold or accent), secondary, ghost, danger
   ============================================================ */
.pg-btn {
  -webkit-appearance: none; appearance: none; border: 0; cursor: pointer;
  font-family: var(--font-sys); font-weight: var(--fw-bold);
  font-size: var(--fs-body); letter-spacing: var(--tracking-tight);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 0 16px; height: 44px; min-height: var(--hit-min);
  border-radius: var(--r-btn); white-space: nowrap;
  transition: transform var(--dur-press) var(--ease-standard),
              filter var(--dur-press) var(--ease-standard),
              background var(--dur-toggle) var(--ease-standard);
  color: #fff; background: var(--accent, var(--pg-blue));
}
.pg-btn .pg-glyph { font-size: 17px; }
.pg-btn:active { transform: scale(var(--press-scale)); }
.pg-btn:disabled { opacity: .4; pointer-events: none; }
.pg-btn--block { width: 100%; }
.pg-btn--lg { height: 52px; font-size: var(--fs-title); border-radius: var(--r-field); padding: 0 22px; }
.pg-btn--sm { height: 36px; font-size: var(--fs-sub); padding: 0 12px; }

/* gold CTA — the brand "make it happen" button (sign-in, confirm add) */
.pg-btn--gold {
  background: linear-gradient(180deg, var(--pg-gold-hi), var(--pg-gold));
  color: var(--pg-blue-deep); box-shadow: var(--shadow-gold);
}
.pg-btn--gold:active { filter: brightness(.97); }

/* secondary — tonal fill of the accent */
.pg-btn--secondary {
  background: color-mix(in oklab, var(--accent, var(--pg-blue)) 14%, transparent);
  color: var(--accent, var(--pg-blue));
}
/* ghost — 1.5px inset accent ring, no fill */
.pg-btn--ghost {
  background: transparent; color: var(--accent, var(--pg-text));
  box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--accent, var(--pg-text-2)) 40%, transparent);
  font-weight: var(--fw-medium);
}
/* quiet — text only, neutral */
.pg-btn--quiet { background: transparent; color: var(--pg-text-2); font-weight: var(--fw-medium); }
.pg-btn--quiet:active { background: color-mix(in oklab, var(--pg-text-3) 16%, transparent); }
/* danger — destructive, tonal red */
.pg-btn--danger {
  background: color-mix(in oklab, var(--signal-alert) 13%, transparent);
  color: var(--signal-alert);
}

/* ============================================================
   CHIP — small status pill. Tints itself with --accent.
   ============================================================ */
.pg-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-chip); font-weight: var(--fw-bold);
  letter-spacing: .01em; line-height: 1;
  padding: 4px 9px 4px 8px; border-radius: var(--r-pill);
  color: var(--accent, var(--pg-text-2));
  background: color-mix(in oklab, var(--accent, var(--pg-text-3)) 14%, transparent);
  white-space: nowrap;
}
.pg-chip .pg-glyph { font-size: 12px; }
.pg-chip--solid { color: #fff; background: var(--accent, var(--pg-blue)); }
.pg-chip--ghost {
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent, var(--pg-text-3)) 40%, transparent);
}
/* the live "now" dot, pulses an expanding ring */
.pg-livedot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--accent, var(--signal-live)); color: var(--accent, var(--signal-live));
}
@media (prefers-reduced-motion: no-preference) {
  .pg-livedot { animation: pg-livepulse 2s var(--ease-standard) infinite; }
}

/* ============================================================
   TYPE CHIP — the ONLY type indicator. Monochrome + labeled.
   Table-service dining gets a filled "strict" variant.
   ============================================================ */
.pg-typechip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-chip); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  padding: 4px 9px 4px 7px; border-radius: var(--r-pill);
  color: var(--pg-text-2);
  background: color-mix(in oklab, var(--pg-text-3) 14%, transparent);
  white-space: nowrap;
}
.pg-typechip .pg-glyph { font-size: 12px; opacity: .9; }
.pg-typechip--strict {
  color: #fff; background: var(--pg-text);
}
[data-theme="dark"] .pg-typechip--strict { color: var(--pg-bg); }

/* ============================================================
   CARD — the workhorse surface. Optionally tinted by --accent.
   ============================================================ */
.pg-card {
  position: relative; overflow: hidden;
  background: var(--pg-surface); color: var(--pg-text);
  border-radius: var(--r-card); padding: var(--sp-4);
  box-shadow: var(--shadow-card);
}
[data-theme="dark"] .pg-card { box-shadow: var(--ring-hairline), var(--shadow-card); }
.pg-card--sm { border-radius: var(--r-card-sm); padding: var(--sp-3); }
.pg-card--lg { border-radius: var(--r-card-lg); padding: var(--sp-5); }
.pg-card--flat { box-shadow: var(--ring-hairline); }

/* tinted card: drop shadow → accent inset ring + radial wash from top-left */
.pg-card--tinted {
  background:
    radial-gradient(120% 90% at 12% 0%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 60%),
    color-mix(in oklab, var(--accent) 7%, var(--pg-surface));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 32%, transparent);
}
[data-theme="dark"] .pg-card--tinted {
  background:
    radial-gradient(120% 90% at 12% 0%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 60%),
    color-mix(in oklab, var(--accent) 12%, var(--pg-surface));
}
/* active/urgent: pulsing accent ring on top (never an alarm flash) */
.pg-card--urgent::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1.6px var(--accent);
}
@media (prefers-reduced-motion: no-preference) {
  .pg-card--urgent::after { animation: pg-ringpulse 1.5s var(--ease-standard) infinite; }
}

/* ============================================================
   STATUS MODULE — the recurring "what's happening now" well.
   Tinted background + 3.5px accent bar + big mono value + line.
   ============================================================ */
.pg-status {
  position: relative; border-radius: var(--r-card-sm);
  padding: 12px 14px 12px 18px;
  background: color-mix(in oklab, var(--accent, var(--signal-neutral)) 10%, var(--pg-surface));
}
.pg-status::before {
  content: ""; position: absolute; left: 7px; top: 12px; bottom: 12px;
  width: 3.5px; border-radius: 3px; background: var(--accent, var(--signal-neutral));
}
.pg-status__eyebrow {
  display: flex; align-items: center; gap: 7px;
  font-size: var(--fs-eyebrow); font-weight: var(--fw-heavy);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--accent, var(--signal-neutral)); margin-bottom: 5px;
}
.pg-status__value {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--fs-countdown); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight); line-height: 1.04; color: var(--accent, var(--pg-text));
  display: flex; align-items: baseline; gap: 8px;
}
.pg-status__value .pg-unit {
  font-family: var(--font-sys); font-size: var(--fs-body); font-weight: var(--fw-medium);
  color: var(--pg-text-2); letter-spacing: 0;
}
.pg-status__line {
  margin-top: 4px; font-size: var(--fs-sub); font-weight: var(--fw-regular);
  color: var(--pg-text-2); line-height: var(--lh-snug);
}
.pg-status__line .pg-em { color: var(--pg-text); font-weight: var(--fw-medium); }

/* ============================================================
   THUMBNAIL — real ride photo (primary) or gradient tile.
   ============================================================ */
.pg-thumb {
  position: relative; border-radius: var(--r-thumb); overflow: hidden;
  width: 62px; height: 62px; flex: none;
  background-size: cover; background-position: center;
  box-shadow: var(--ring-hairline);
}
.pg-thumb--lg { width: 84px; height: 84px; }
.pg-thumb--xl { width: 100%; height: 168px; border-radius: var(--r-card); }
.pg-thumb__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(8,12,24,.5) 100%);
}
/* frosted neutral type badge in the corner */
.pg-thumb__badge {
  position: absolute; left: 6px; bottom: 6px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 7px; border-radius: var(--r-pill);
  font-size: var(--fs-micro); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: #fff; background: rgba(20,24,34,.5);
  -webkit-backdrop-filter: blur(8px) saturate(1.4); backdrop-filter: blur(8px) saturate(1.4);
}
.pg-thumb__badge .pg-glyph { font-size: 11px; }
/* gradient/glyph fallback tiles */
.pg-thumb--tile { display: grid; place-items: center; color: #fff; box-shadow: var(--ring-hairline); }
.pg-thumb--tile .pg-glyph { font-size: 28px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.3)); }
.pg-tile-cosmic { background: linear-gradient(150deg,#3B2E86,#6D4AE0 55%,#9B6BF0); }
.pg-tile-ice    { background: linear-gradient(150deg,#1C6FB0,#36BFEF 60%,#8BE0FF); }
.pg-tile-neon   { background: linear-gradient(150deg,#0E7A6B,#1FA85F 55%,#7BE0A0); }
.pg-tile-warm   { background: linear-gradient(150deg,#C2520C,#E8730C 55%,#F7A823); }
.pg-tile-night  { background: linear-gradient(150deg,#13183A,#2C3A86 60%,#4A63C9); }
.pg-tile-space  { background: linear-gradient(150deg,#0B1430,#1F3A93 55%,#2EA0E0); }

/* ============================================================
   RETURN-WINDOW TIMELINE — the signature 3-segment bar.
   early entry · core window · grace — one blue family.
   ============================================================ */
.pg-timeline { display: flex; flex-direction: column; gap: 7px; }
.pg-tl-track { position: relative; display: flex; gap: 3px; height: 9px; }
.pg-tl-seg {
  height: 100%; border-radius: 3px; min-width: 6px; position: relative; overflow: hidden;
}
.pg-tl-seg.is-early { background: color-mix(in oklab, var(--win-early) 24%, transparent); }
.pg-tl-seg.is-core  { background: color-mix(in oklab, var(--win-core) 24%, transparent); }
.pg-tl-seg.is-grace { background: color-mix(in oklab, var(--win-grace) 24%, transparent); }
.pg-tl-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; }
.pg-tl-seg.is-early .pg-tl-fill { background: var(--win-early); }
.pg-tl-seg.is-core  .pg-tl-fill { background: var(--win-core); }
.pg-tl-seg.is-grace .pg-tl-fill { background: var(--win-grace); }
.pg-tl-seg.is-active {
  box-shadow: 0 0 0 1.6px color-mix(in oklab, var(--win-core) 60%, transparent);
  filter: saturate(1.1);
}
.pg-tl-ticks {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--fs-micro); font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-tight); color: var(--pg-text-3);
}

/* ============================================================
   ATTRACTION CARD — itinerary row: thumb + name + type + status.
   ============================================================ */
.pg-attraction { display: flex; gap: var(--sp-3); align-items: stretch; }
.pg-attraction__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pg-attraction__meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: var(--fs-meta); font-weight: var(--fw-medium); color: var(--pg-text-3);
}
.pg-attraction__name {
  font-size: var(--fs-title); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight); line-height: var(--lh-tight);
  color: var(--pg-text); text-wrap: balance;
}
.pg-attraction__sub {
  font-size: var(--fs-sub); font-weight: var(--fw-regular); color: var(--pg-text-2);
  line-height: var(--lh-snug);
}
.pg-dot-sep { opacity: .5; }

/* ============================================================
   GENIE CARD — an AI suggestion. Violet, deliberately not amber.
   Always reads as PROPOSED, not committed: two actions, dismissible.
   ============================================================ */
.pg-genie {
  --accent: var(--genie);
  position: relative; overflow: hidden; border-radius: var(--r-card);
  padding: var(--sp-4);
  background:
    radial-gradient(120% 90% at 12% 0%, color-mix(in oklab, var(--genie) 18%, transparent), transparent 60%),
    color-mix(in oklab, var(--genie) 8%, var(--pg-surface));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--genie) 32%, transparent);
}
[data-theme="dark"] .pg-genie {
  background:
    radial-gradient(120% 90% at 12% 0%, color-mix(in oklab, var(--genie) 24%, transparent), transparent 60%),
    color-mix(in oklab, var(--genie) 13%, var(--pg-surface));
}
.pg-genie__eyebrow {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-eyebrow); font-weight: var(--fw-heavy);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--genie); margin-bottom: 8px;
}
.pg-genie__body {
  font-size: var(--fs-body); font-weight: var(--fw-regular);
  line-height: var(--lh-body); color: var(--pg-text);
}
.pg-genie__body .pg-em { color: var(--genie); font-weight: var(--fw-bold); }
.pg-genie__actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.pg-genie__actions .pg-btn { flex: 1; }

/* ============================================================
   FIELD — text input, with optional leading glyph + label.
   ============================================================ */
.pg-field { display: flex; flex-direction: column; gap: 7px; }
.pg-field__label {
  font-size: var(--fs-eyebrow); font-weight: var(--fw-heavy);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--pg-text-3);
}
.pg-field__control {
  display: flex; align-items: center; gap: 9px;
  background: var(--pg-surface-2); border-radius: var(--r-field);
  padding: 0 14px; height: 50px; box-shadow: var(--ring-hairline);
  transition: box-shadow var(--dur-toggle) var(--ease-standard);
}
.pg-field__control:focus-within {
  box-shadow: inset 0 0 0 1.5px var(--pg-blue);
}
.pg-field__control .pg-glyph { font-size: 18px; color: var(--pg-text-3); }
.pg-field input, .pg-field textarea {
  flex: 1; border: 0; background: transparent; outline: none; min-width: 0;
  font-family: var(--font-sys); font-size: var(--fs-title); font-weight: var(--fw-medium);
  color: var(--pg-text);
}
.pg-field input::placeholder, .pg-field textarea::placeholder { color: var(--pg-text-3); }

/* ============================================================
   SEGMENTED CONTROL — iOS-style. Active thumb is raised.
   ============================================================ */
.pg-segmented {
  display: flex; gap: 3px; padding: 3px; border-radius: var(--r-field);
  background: var(--pg-surface-2); box-shadow: var(--ring-hairline);
}
.pg-segmented__opt {
  flex: 1; -webkit-appearance: none; appearance: none; border: 0; cursor: pointer;
  font-family: var(--font-sys); font-size: var(--fs-sub); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; border-radius: calc(var(--r-field) - 3px);
  background: transparent; color: var(--pg-text-2);
  transition: background var(--dur-toggle) var(--ease-standard), color var(--dur-toggle) var(--ease-standard);
}
.pg-segmented__opt .pg-glyph { font-size: 15px; }
.pg-segmented__opt.is-active {
  background: var(--pg-surface); color: var(--pg-text); box-shadow: var(--shadow-card);
}

/* ============================================================
   CHECKBOX — square iOS check, for participant lists.
   ============================================================ */
.pg-check {
  width: 24px; height: 24px; border-radius: 7px; flex: none;
  display: grid; place-items: center;
  background: var(--pg-blue); color: #fff;
  transition: background var(--dur-toggle) var(--ease-standard);
}
.pg-check .pg-glyph { font-size: 15px; }
.pg-check.is-off { background: transparent; box-shadow: inset 0 0 0 1.8px var(--pg-text-3); }

/* ============================================================
   TIME FIELD — custom start/end picker with ±15-min nudges.
   ============================================================ */
.pg-timefield { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.pg-timefield__display {
  height: 50px; border-radius: var(--r-field);
  background: var(--pg-surface); box-shadow: var(--ring-hairline);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--fs-title); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight);
  color: var(--pg-text);
}
.pg-timefield__nudge { display: flex; gap: 8px; }
.pg-timefield__nudge button {
  flex: 1; height: 38px; border-radius: var(--r-btn);
  -webkit-appearance: none; appearance: none; border: 0; cursor: pointer;
  background: var(--pg-surface); box-shadow: var(--ring-hairline); color: var(--pg-text);
  font-family: var(--font-sys); font-size: var(--fs-sub); font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums;
  transition: transform var(--dur-press) var(--ease-standard);
}
.pg-timefield__nudge button:active { transform: scale(var(--press-scale)); }

/* ============================================================
   STEPPER / counter row (party size, etc.)
   ============================================================ */
.pg-stepper { display: inline-flex; align-items: center; gap: 2px; }
.pg-stepper__btn {
  -webkit-appearance: none; appearance: none; border: 0; cursor: pointer;
  width: 40px; height: 40px; border-radius: var(--r-btn);
  background: var(--pg-surface-2); color: var(--pg-text);
  display: grid; place-items: center; box-shadow: var(--ring-hairline);
  transition: transform var(--dur-press) var(--ease-standard);
}
.pg-stepper__btn:active { transform: scale(var(--press-scale)); }
.pg-stepper__btn .pg-glyph { font-size: 18px; }
.pg-stepper__val {
  min-width: 48px; text-align: center;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--fs-headline); font-weight: var(--fw-bold); color: var(--pg-text);
}

/* ============================================================
   LIST ROW — for sheets: leading glyph/thumb, label, trailing value/chevron
   ============================================================ */
.pg-row {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; padding: 13px 4px; text-align: left;
  -webkit-appearance: none; appearance: none; border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-sys); color: var(--pg-text);
}
.pg-row + .pg-row { box-shadow: inset 0 1px 0 var(--pg-hairline); }
.pg-row__icon {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: color-mix(in oklab, var(--accent, var(--pg-text-3)) 14%, transparent);
  color: var(--accent, var(--pg-text-2));
}
.pg-row__icon .pg-glyph { font-size: 18px; }
.pg-row__text { flex: 1; min-width: 0; }
.pg-row__label { display: block; font-size: var(--fs-title-sm); font-weight: var(--fw-medium); color: var(--pg-text); }
.pg-row__sub { display: block; font-size: var(--fs-meta); font-weight: var(--fw-regular); color: var(--pg-text-3); margin-top: 1px; }
.pg-row__value {
  font-size: var(--fs-sub); font-weight: var(--fw-medium); color: var(--pg-text-2);
  display: flex; align-items: center; gap: 6px;
}
.pg-row__value .pg-glyph { font-size: 16px; color: var(--pg-text-3); }
.pg-row.is-danger { color: var(--signal-alert); }
.pg-row.is-danger .pg-row__icon { color: var(--signal-alert); background: color-mix(in oklab, var(--signal-alert) 13%, transparent); }
.pg-row.is-danger .pg-row__label { color: var(--signal-alert); }

/* ============================================================
   SHEET — the bottom sheet shell + dimming scrim + grabber.
   The reimagined CRUD surface lives in these.
   ============================================================ */
.pg-scrim {
  position: absolute; inset: 0; background: var(--pg-scrim); z-index: 60;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
@media (prefers-reduced-motion: no-preference) {
  .pg-scrim { animation: pg-scrim-in var(--dur-sheet) var(--ease-out); }
}
.pg-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 61; overflow: hidden;
  background: var(--pg-surface); color: var(--pg-text);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  box-shadow: var(--shadow-sheet);
  padding: 10px var(--gutter) calc(var(--safe-bottom) + 8px);
  display: flex; flex-direction: column; gap: var(--sp-4);
  max-height: 92%;
}
@media (prefers-reduced-motion: no-preference) {
  .pg-sheet { animation: pg-sheet-in var(--dur-sheet) var(--ease-out); }
}
.pg-sheet__grabber {
  width: 38px; height: 5px; border-radius: 3px; flex: none;
  background: var(--pg-text-3); opacity: .4; margin: 2px auto 4px;
}
.pg-sheet__head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.pg-sheet__title {
  font-size: var(--fs-headline); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); color: var(--pg-text);
}
.pg-sheet__eyebrow {
  font-size: var(--fs-eyebrow); font-weight: var(--fw-heavy);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--pg-text-3); margin-bottom: 5px;
}
.pg-sheet__close {
  margin-left: auto; flex: none; -webkit-appearance: none; appearance: none; border: 0; cursor: pointer;
  width: 30px; height: 30px; border-radius: var(--r-pill);
  background: var(--pg-surface-2); color: var(--pg-text-2);
  display: grid; place-items: center;
}
.pg-sheet__close .pg-glyph { font-size: 16px; }
.pg-sheet__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--sp-4); overflow-y: auto; }
.pg-sheet__body > * { flex-shrink: 0; }
.pg-sheet__foot { display: flex; gap: var(--sp-2); padding-top: 2px; }
.pg-sheet__foot .pg-btn { flex: 1; }

/* iOS-standard sheet nav: two circular controls pinned at top + a large title
   that collapses into a centered inline title (with a hairline) on scroll. */
.pg-sheet__nav {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  padding: 2px 0 10px; min-height: 44px;
  transition: box-shadow var(--dur-toggle) var(--ease-standard);
}
.pg-sheet__nav.is-scrolled { box-shadow: 0 1px 0 var(--pg-hairline); }
.pg-sheet__navbtn {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  -webkit-appearance: none; appearance: none; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--pg-surface-2); color: var(--pg-text);
  transition: transform var(--dur-press) var(--ease-standard);
}
.pg-sheet__navbtn:active { transform: scale(var(--press-scale)); }
.pg-sheet__navbtn .pg-glyph { font-size: 18px; }
.pg-sheet__confirm {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  -webkit-appearance: none; appearance: none; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--pg-blue); color: #fff;
  box-shadow: 0 6px 16px -6px color-mix(in oklab, var(--pg-blue) 70%, transparent);
  transition: transform var(--dur-press) var(--ease-standard), filter var(--dur-press) var(--ease-standard);
}
.pg-sheet__confirm:active { transform: scale(var(--press-scale)); }
.pg-sheet__confirm--gold { background: linear-gradient(180deg, var(--pg-gold-hi), var(--pg-gold)); color: var(--pg-blue-deep); box-shadow: var(--shadow-gold); }
.pg-sheet__confirm .pg-glyph { font-size: 22px; }
.pg-sheet__inline-title {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: var(--fs-title); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight);
  color: var(--pg-text); white-space: nowrap; max-width: 62%; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transition: opacity var(--dur-toggle) var(--ease-standard); pointer-events: none;
}
.pg-sheet__nav.is-scrolled .pg-sheet__inline-title { opacity: 1; }
.pg-sheet__bigtitle {
  font-size: var(--fs-countdown); font-weight: var(--fw-heavy);
  letter-spacing: var(--tracking-display); line-height: 1.08;
  color: var(--pg-text); margin: 2px 0 2px; text-wrap: balance;
}

/* ============================================================
   TAB BAR — translucent floating chrome.
   ============================================================ */
.pg-tabbar {
  display: flex; align-items: stretch;
  padding: 8px 6px calc(var(--safe-bottom) - 2px);
  background: var(--pg-tabbar);
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 1px 0 var(--pg-tabbar-line);
}
.pg-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  -webkit-appearance: none; appearance: none; border: 0; background: transparent; cursor: pointer;
  color: var(--pg-text-3); padding: 2px 0;
}
.pg-tab .pg-glyph { font-size: 24px; }
.pg-tab__label { font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: .01em; }
.pg-tab.is-active { color: var(--pg-blue); }
[data-theme="dark"] .pg-tab.is-active { color: var(--signal-live); }

/* the center "Add" affordance — a raised gold button in the bar */
.pg-tab--add { position: relative; }
.pg-tab--add .pg-tab__fab {
  width: 46px; height: 46px; border-radius: 50%; margin-top: -2px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, var(--pg-gold-hi), var(--pg-gold));
  color: var(--pg-blue-deep); box-shadow: var(--shadow-gold);
}
.pg-tab--add .pg-tab__fab .pg-glyph { font-size: 24px; }