/* exp-chrome.css
   Stitch "Soft-Modernist" reskin for the IN-GAME NAVIGATION, SETTINGS and
   UTILITY-STATE screens. Loaded AFTER experience.css so it wins, and additive
   over main.css / themes.css / a11y.css / live.css / platform.css. It reskins:

     - GO TO navigation   the header "Go to" quick-nav sheet   (LIGHT chrome)
     - SETTINGS + A11Y    Easy settings + Themes and settings   (LIGHT chrome)
     - TODAY board        the daily to-do checklist overlay     (LIGHT chrome)
     - SYSTEM alerts      offline pill, toast, notifications     (readable on both)

   Design system (fixed light chrome, per pack accent), identical to the sibling
   exp-social-map.css so the two read as one system:
     - LIGHT surfaces  #F9F9F7 page, #FFFFFF cards, #F1F1EF variant, #E2E8F0 hairline
     - INK             #1E293B, muted slate #64748B  (dark text always kept on light)
     - ACCENT          var(--amber) fill with var(--on-amber) on accent text ONLY
     - Type            Plus Jakarta Sans (head) + Be Vietnam Pro (body)
     - Geometry        24px cards, 9999px pills, gentle lift 0 4px 20px rgba(0,0,0,.05),
                       44px minimum tap targets

   Scope: every rule is keyed on a real in-game component root (quicknav sheet,
   Easy settings screen, theme panel overlay, sound popover, daily agenda overlay,
   notifications panel, toast, offline chip). These are body-level overlays or the
   in-game #screen, never descendants of .platform-screen, so the Stitch platform
   chrome in stitch.css is never touched. Toast + offline pill carry their own
   surface and shadow so they stay legible over a light hub or a dark story.
   No em dashes or en dashes anywhere. */

/* ================================================================== *
 *  Shared light tokens for the in-game chrome roots.
 *  Inherited by each component's children, so nothing is hard coded twice.
 *  (#toast and the offline chip use literal colours: they must not depend on
 *  a themed ancestor, since they float over any screen.)
 * ================================================================== */
.quicknav-card,
.a11y-screen,
.theme-panel-card,
.vol-pop,
.agenda-card,
.notif-panel {
  --exp-surface: #F9F9F7;
  --exp-card: #FFFFFF;
  --exp-ink: #1E293B;
  --exp-muted: #64748B;
  --exp-variant: #F1F1EF;
  --exp-hairline: #E2E8F0;
  --exp-accent: var(--amber, #f59e0b);
  --exp-on-accent: var(--on-amber, #2a1a00);
  --exp-soft: #FFF7EA;
  --exp-radius: 24px;
  --exp-radius-sm: 16px;
  --exp-pill: 9999px;
  --exp-lift: 0 4px 20px rgba(0, 0, 0, 0.05);
  --exp-lift-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --exp-font-head: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --exp-font-body: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ================================================================== *
 *  GO TO NAVIGATION  ~  js/components/quick-nav.js : LIGHT bottom sheet
 *  Root:  .menu-overlay.quicknav-overlay  >  .menu-card.quicknav-card
 *  Inside: .panel-title ("Go to"), .quicknav-section > .menu-section-title,
 *          .quicknav-game(.is-current) [.quicknav-game-name/.quicknav-game-roles],
 *          .quicknav-link(.quicknav-logout), .menu-foot-close.
 *  The .quicknav-overlay carries no base rule of its own, so the sheet frame is
 *  supplied here (robust even when no theme wrapper is present).
 * ================================================================== */
.quicknav-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(15, 23, 42, 0.42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.quicknav-overlay .quicknav-card {
  width: 100%;
  max-width: 460px;
  margin: 0;
  max-height: 88vh;
  max-height: 88dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 18px 20px;
  background: var(--exp-card);
  color: var(--exp-ink);
  border: 1px solid var(--exp-hairline);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -8px 40px rgba(15, 23, 42, 0.18);
  font-family: var(--exp-font-body);
}
/* Grab handle at the top of the sheet, as in the mock. */
.quicknav-overlay .quicknav-card::before {
  content: "";
  display: block;
  width: 40px;
  height: 5px;
  margin: 6px auto 10px;
  border-radius: 9999px;
  background: var(--exp-hairline);
}
.quicknav-overlay .panel-title {
  margin: 2px 0 14px;
  font-family: var(--exp-font-head);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  text-align: center;
  color: var(--exp-ink);
  text-transform: none;
}
/* Small uppercase accent section eyebrows. Hide the collapsible triangle that
   main.css adds to every .menu-section-title (quicknav sections do not collapse). */
.quicknav-overlay .quicknav-section .menu-section-title {
  margin: 16px 4px 8px;
  font-family: var(--exp-font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--exp-accent);
  cursor: default;
}
.quicknav-overlay .menu-section-title::after { content: none; }

/* Each game / quick link is its own white pill card with a chevron. */
.quicknav-overlay .quicknav-game,
.quicknav-overlay .quicknav-link {
  position: relative;
  width: 100%;
  min-height: 60px;
  margin: 0 0 10px;
  padding: 12px 42px 12px 16px;
  text-align: left;
  background: var(--exp-card);
  color: var(--exp-ink);
  border: 1px solid var(--exp-hairline);
  border-radius: 16px;
  box-shadow: var(--exp-lift-sm);
  font-family: var(--exp-font-body);
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}
.quicknav-overlay .quicknav-game::after,
.quicknav-overlay .quicknav-link::after {
  content: "\203A"; /* single right angle quote, not a dash */
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--exp-muted);
  font-size: 22px;
  line-height: 1;
}
.quicknav-overlay .quicknav-game:hover,
.quicknav-overlay .quicknav-link:hover,
.quicknav-overlay .quicknav-game:focus-visible,
.quicknav-overlay .quicknav-link:focus-visible {
  background: var(--exp-soft);
  border-color: var(--exp-accent);
  outline: none;
}
.quicknav-overlay .quicknav-game-name {
  font-family: var(--exp-font-head);
  font-weight: 700;
  font-size: 18px;
  color: var(--exp-ink);
}
.quicknav-overlay .quicknav-game-roles {
  margin-top: 2px;
  font-size: 13px;
  color: var(--exp-muted);
}
.quicknav-overlay .quicknav-link {
  font-weight: 600;
  font-size: 16px;
  color: var(--exp-ink);
}
/* The current game reads as the active nav item: accent tint, ring and name. */
.quicknav-overlay .quicknav-game.is-current {
  background: var(--exp-soft);
  border-color: var(--exp-accent);
  box-shadow: 0 0 0 1px var(--exp-accent), var(--exp-lift-sm);
}
.quicknav-overlay .quicknav-game.is-current .quicknav-game-name { color: var(--exp-accent); }
/* Log out stays a quiet card with a red label. */
.quicknav-overlay .quicknav-logout { color: #B4281E; }
.quicknav-overlay .quicknav-logout::after { color: #B4281E; }
/* Close pill along the foot of the sheet. */
.quicknav-overlay .menu-foot-close {
  display: block;
  width: auto;
  margin: 6px 0 0;
  min-height: 48px;
  background: var(--exp-surface);
  color: var(--exp-ink);
  border: 1.5px solid var(--exp-hairline);
  border-radius: 9999px;
  font-family: var(--exp-font-body);
  font-weight: 700;
}
.quicknav-overlay .menu-foot-close:hover { border-color: var(--exp-accent); background: var(--exp-soft); }

/* ================================================================== *
 *  SETTINGS + ACCESSIBILITY  ~  js/components/accessibility.js : LIGHT screen
 *  Root:  #screen > .panel-wrap > .a11y-screen  (mounted in-game via panelScreen)
 *  Inside: .a11y-group (grouped card) > .panel-sub head + .panel-note +
 *          .a11y-options > .a11y-opt(.chosen)  (segmented pills, e.g. Text size)
 *          .a11y-toggle(.on)  (Reduce motion, High contrast, etc. as switches)
 *          .btn-amber / .btn-small presets, .f-input identity fields.
 *  The whole screen is forced to the warm off-white stage, regardless of the
 *  ambient pack theme, so the cards stay dark-on-light on any pack.
 * ================================================================== */
#screen:has(.a11y-screen) { background: #F9F9F7; }
#screen:has(.a11y-screen) > .btn-small {
  background: #FFFFFF;
  color: #1E293B;
  border: 1.5px solid #E2E8F0;
  border-radius: 9999px;
  min-height: 44px;
  font-weight: 600;
}
.a11y-screen {
  color: var(--exp-ink);
  font-family: var(--exp-font-body);
}
.a11y-screen .panel-title {
  font-family: var(--exp-font-head);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--exp-ink);
  text-transform: none;
}
.a11y-screen .panel-note { color: var(--exp-muted); }

/* Each settings group is a white rounded card with a slate heading. */
.a11y-screen .a11y-group {
  margin-bottom: 16px;
  padding: 16px 16px 18px;
  background: var(--exp-card);
  border: 1px solid var(--exp-hairline);
  border-radius: var(--exp-radius);
  box-shadow: var(--exp-lift);
}
.a11y-screen .a11y-group .panel-sub {
  margin: 0 0 6px;
  font-family: var(--exp-font-head);
  font-weight: 700;
  font-size: 18px;
  color: var(--exp-ink);
}
.a11y-screen .a11y-group .panel-note { margin: 0 0 12px; }

/* Option pills (Text size, spacing, reading speed, colour mode, language...). */
.a11y-screen .a11y-options { display: flex; flex-wrap: wrap; gap: 10px; }
.a11y-screen .a11y-opt {
  min-height: 44px;
  padding: 10px 18px;
  background: var(--exp-card);
  color: var(--exp-ink);
  border: 1.5px solid var(--exp-hairline);
  border-radius: 9999px;
  font-weight: 600;
  font-size: 15px;
}
.a11y-screen .a11y-opt.chosen {
  background: var(--exp-accent);
  color: var(--exp-on-accent);
  border-color: var(--exp-accent);
  font-weight: 700;
}
/* Keep the app-icon picker's column layout (a11y.css) intact under the reskin. */
.a11y-screen .a11y-icon-options .a11y-opt {
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-radius: 16px;
}

/* Toggle rows become a labelled pill switch, accent when on. */
.a11y-screen .a11y-toggle {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: 12px 74px 12px 16px;
  text-align: left;
  background: var(--exp-surface);
  color: var(--exp-ink);
  border: 1.5px solid var(--exp-hairline);
  border-radius: var(--exp-radius-sm);
  font-weight: 600;
  font-size: 15px;
}
.a11y-screen .a11y-toggle::before { /* switch track */
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 28px;
  border-radius: 9999px;
  background: var(--exp-hairline);
  transition: background 0.18s ease;
}
.a11y-screen .a11y-toggle::after { /* switch knob */
  content: "";
  position: absolute;
  right: 38px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.28);
  transition: right 0.18s ease;
}
.a11y-screen .a11y-toggle.on {
  background: var(--exp-soft);
  border-color: var(--exp-accent);
}
.a11y-screen .a11y-toggle.on::before { background: var(--exp-accent); }
.a11y-screen .a11y-toggle.on::after { right: 18px; }

/* Preset buttons: accent primary, light outline secondary. */
.a11y-screen .btn-amber {
  background: var(--exp-accent);
  color: var(--exp-on-accent);
  border: none;
  border-radius: 9999px;
  min-height: 48px;
  font-family: var(--exp-font-body);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(133, 83, 0, 0.18), 0 10px 22px rgba(245, 158, 11, 0.24);
}
.a11y-screen .btn-small {
  background: var(--exp-card);
  color: var(--exp-ink);
  border: 1.5px solid var(--exp-hairline);
  border-radius: 9999px;
  min-height: 44px;
  font-weight: 600;
}
.a11y-screen .btn-small:hover { border-color: var(--exp-accent); background: var(--exp-soft); }

/* Identity fields. */
.a11y-screen .f-input {
  background: var(--exp-card);
  color: var(--exp-ink);
  border: 1.5px solid var(--exp-hairline);
  border-radius: 14px;
}
.a11y-screen .f-input:focus {
  outline: none;
  border-color: var(--exp-accent);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}
.a11y-screen .f-label { color: var(--exp-muted); }
.a11y-screen .help-row .panel-sub { margin: 0; }

/* ---- Themes and settings overlay  ~  js/components/theme-panel.js : LIGHT ----
   Root: .overlay.theme-overlay > .overlay-card.theme-panel-card
   Inside: theme swatch grid, accent dots, language pills, volume slider + music
   toggle, notifications toggle. This is where the mock's Appearance + Audio live. */
.theme-overlay .theme-panel-card {
  background: var(--exp-card);
  color: var(--exp-ink);
  border: 1px solid var(--exp-hairline);
  border-radius: var(--exp-radius);
  box-shadow: var(--exp-lift);
  font-family: var(--exp-font-body);
}
.theme-overlay .panel-title {
  font-family: var(--exp-font-head);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--exp-ink);
  text-transform: none;
}
.theme-overlay .panel-sub {
  margin: 16px 0 8px;
  font-family: var(--exp-font-head);
  font-weight: 700;
  font-size: 16px;
  color: var(--exp-ink);
}
.theme-overlay .panel-note { color: var(--exp-muted); }
/* Theme swatch cards: Auto / Light / Dark and any pack palettes. */
.theme-overlay .theme-card {
  min-height: 56px;
  background: var(--exp-card);
  color: var(--exp-ink);
  border: 1.5px solid var(--exp-hairline);
  border-radius: 16px;
}
.theme-overlay .theme-card.chosen {
  background: var(--exp-soft);
  border-color: var(--exp-accent);
  box-shadow: 0 0 0 2px var(--exp-accent);
}
.theme-overlay .theme-card-name { color: var(--exp-ink); font-weight: 700; }
.theme-overlay .theme-accent-dot { border: 2px solid var(--exp-hairline); }
/* Language + reading option pills. */
.theme-overlay .a11y-opt {
  min-height: 44px;
  background: var(--exp-card);
  color: var(--exp-ink);
  border: 1.5px solid var(--exp-hairline);
  border-radius: 9999px;
  font-weight: 600;
}
.theme-overlay .a11y-opt.chosen {
  background: var(--exp-accent);
  color: var(--exp-on-accent);
  border-color: var(--exp-accent);
  font-weight: 700;
}
/* Notifications toggle (kept as a labelled pill, accent when on). */
.theme-overlay .a11y-toggle {
  width: 100%;
  min-height: 48px;
  text-align: left;
  background: var(--exp-surface);
  color: var(--exp-ink);
  border: 1.5px solid var(--exp-hairline);
  border-radius: var(--exp-radius-sm);
  font-weight: 600;
}
.theme-overlay .a11y-toggle.on { background: var(--exp-soft); border-color: var(--exp-accent); }
/* Sound volume: accent track + thumb, slate labels. */
.theme-overlay .vol-row { color: var(--exp-ink); }
.theme-overlay .vol-slider { accent-color: var(--exp-accent); height: 28px; }
.theme-overlay .vol-value { color: var(--exp-muted); }
.theme-overlay .music-toggle {
  background: var(--exp-card);
  color: var(--exp-ink);
  border: 1.5px solid var(--exp-hairline);
  border-radius: 9999px;
  min-height: 44px;
}
.theme-overlay .music-toggle.on {
  background: var(--exp-accent);
  color: var(--exp-on-accent);
  border-color: var(--exp-accent);
}
.theme-overlay .btn-small {
  background: var(--exp-surface);
  color: var(--exp-ink);
  border: 1.5px solid var(--exp-hairline);
  border-radius: 9999px;
  min-height: 44px;
  font-weight: 600;
}

/* ---- Header sound popover  ~  js/components/volume-popover.js : LIGHT ----
   Root: .vol-pop (with a .vol-pop-backdrop). Music / Voice / Ambient / Effects
   sliders (the mock's Audio group) plus mute and reduce toggles. */
.vol-pop {
  background: var(--exp-card);
  color: var(--exp-ink);
  border: 1px solid var(--exp-hairline);
  border-radius: var(--exp-radius);
  box-shadow: var(--exp-lift);
  font-family: var(--exp-font-body);
}
.vol-pop .vol-pop-title {
  font-family: var(--exp-font-head);
  font-weight: 800;
  color: var(--exp-ink);
}
.vol-pop .vol-pop-label { color: var(--exp-ink); }
.vol-pop .vol-pop-val { color: var(--exp-muted); }
.vol-pop .vol-pop-range { accent-color: var(--exp-accent); }
.vol-pop .vol-pop-toggle,
.vol-pop .vol-pop-mute {
  background: var(--exp-surface);
  color: var(--exp-ink);
  border: 1.5px solid var(--exp-hairline);
  border-radius: 9999px;
  min-height: 44px;
  font-weight: 600;
}
.vol-pop .vol-pop-toggle.on,
.vol-pop .vol-pop-mute.on {
  background: var(--exp-accent);
  color: var(--exp-on-accent);
  border-color: var(--exp-accent);
}

/* ================================================================== *
 *  TODAY BOARD  ~  js/components/daily-agenda.js : LIGHT overlay checklist
 *  Root:  .overlay.agenda-overlay  >  .overlay-card.agenda-card
 *  Inside: .menu-header (.panel-title + .menu-close), .panel-note,
 *          .agenda-body > .agenda-bar > .agenda-bar-fill, .agenda-count,
 *          .agenda-group (+ .agenda-week-head), .agenda-row(.done)
 *          [.agenda-check + .agenda-text].
 *  Complements experience.css: those .today-* rules style the hub's "next step"
 *  card and tiles; this styles the separate daily to-do overlay. Done rows read
 *  as struck-through with a filled accent check, matching the mock's checklist.
 * ================================================================== */
.agenda-overlay .agenda-card {
  background: var(--exp-card);
  color: var(--exp-ink);
  border: 1px solid var(--exp-hairline);
  border-radius: var(--exp-radius);
  box-shadow: var(--exp-lift);
  font-family: var(--exp-font-body);
}
.agenda-overlay .agenda-card .menu-header {
  background: transparent;
  border-bottom: 1px solid var(--exp-hairline);
}
.agenda-overlay .agenda-card .panel-title {
  font-family: var(--exp-font-head);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--exp-ink);
  text-transform: none;
}
.agenda-overlay .agenda-card .menu-close {
  width: 44px;
  height: 44px;
  min-height: 44px;
  border-radius: 9999px;
  border: 1px solid var(--exp-hairline);
  background: var(--exp-surface);
  color: var(--exp-ink);
}
.agenda-overlay .agenda-card .menu-close:hover { background: var(--exp-variant); border-color: var(--exp-accent); }
.agenda-overlay .agenda-card > .panel-note { color: var(--exp-muted); padding: 12px 16px 0; }
.agenda-overlay .agenda-body { padding: 4px 16px 16px; }

/* Progress meter: hairline track, accent fill. */
.agenda-overlay .agenda-bar {
  height: 12px;
  border: none;
  border-radius: 9999px;
  background: var(--exp-hairline);
}
.agenda-overlay .agenda-bar-fill { background: var(--exp-accent); }
.agenda-overlay .agenda-count { color: var(--exp-muted); font-weight: 600; }

/* Group headings: small uppercase accent eyebrows; the weekly head is a divider. */
.agenda-overlay .agenda-group {
  margin: 18px 0 8px;
  font-family: var(--exp-font-body);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--exp-accent);
}
.agenda-overlay .agenda-week-head {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--exp-hairline);
  color: var(--exp-ink);
}

/* Checklist rows. Default = an available task on a white card; the check sits in
   a soft circular chip. */
.agenda-overlay .agenda-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  padding: 12px 14px;
  min-height: 44px;
  background: var(--exp-card);
  border: 1px solid var(--exp-hairline);
  border-radius: 14px;
  box-shadow: var(--exp-lift-sm);
}
.agenda-overlay .agenda-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--exp-variant);
  color: var(--exp-muted);
  font-size: 14px;
  font-weight: 800;
}
.agenda-overlay .agenda-text { color: var(--exp-ink); font-size: 15px; }

/* Done = quiet surface, struck-through label, filled accent check. */
.agenda-overlay .agenda-row.done {
  background: var(--exp-surface);
  border-color: var(--exp-hairline);
  box-shadow: none;
}
.agenda-overlay .agenda-row.done .agenda-check {
  background: var(--exp-accent);
  color: var(--exp-on-accent);
}
.agenda-overlay .agenda-row.done .agenda-text {
  color: var(--exp-muted);
  text-decoration: line-through;
  opacity: 0.9;
}

/* Forward-compatible states from the mock (current = accent, locked = greyed).
   The current daily-agenda JS only sets .done, so these activate only if a
   .current / .locked class is later added to a row (see report). */
.agenda-overlay .agenda-row.current {
  background: var(--exp-soft);
  border: 1px solid var(--exp-accent);
  box-shadow: 0 0 0 1px var(--exp-accent), var(--exp-lift-sm);
}
.agenda-overlay .agenda-row.current .agenda-check { background: var(--exp-accent); color: var(--exp-on-accent); }
.agenda-overlay .agenda-row.current .agenda-text { color: var(--exp-ink); font-weight: 700; }
.agenda-overlay .agenda-row.locked { opacity: 0.6; }
.agenda-overlay .agenda-row.locked .agenda-check { background: var(--exp-variant); color: var(--exp-muted); }

/* ================================================================== *
 *  SYSTEM ALERTS  ~  the offline chip, the toast, and the notifications inbox.
 *  These float over BOTH the light hub and the dark story, so each carries its
 *  own surface + shadow and readable colours (no reliance on a themed ancestor).
 * ================================================================== */

/* Offline banner: the header connection chip in its offline state becomes a
   self-contained rose pill (js/app.js setSyncIndicator -> .status-offline). */
.app-header .sync-indicator.status-offline {
  padding: 4px 12px;
  background: #FDE7EA;
  color: #B4281E;
  border: 1px solid #F6C6CC;
  border-radius: 9999px;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(180, 40, 30, 0.16);
}

/* Toast: a self-contained soft card (js/ui.js #toast), readable on light or dark.
   Only surface, shape and type are set; the base keeps its position + animation. */
#toast {
  background: #FFFFFF;
  color: #1E293B;
  border: 1px solid #E2E8F0;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.18), 0 1px 3px rgba(15, 23, 42, 0.10);
  padding: 13px 18px;
  font-family: var(--exp-font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  font-weight: 600;
}

/* Notifications inbox  ~  js/components/notify-center.js : LIGHT panel.
   Root: .notif-panel (with .notif-backdrop). Unread items carry an accent tint. */
.notif-panel {
  background: var(--exp-card);
  color: var(--exp-ink);
  border: 1px solid var(--exp-hairline);
  border-radius: var(--exp-radius);
  box-shadow: var(--exp-lift);
  font-family: var(--exp-font-body);
}
.notif-panel .notif-panel-title {
  font-family: var(--exp-font-head);
  font-weight: 800;
  color: var(--exp-ink);
}
.notif-panel .notif-empty { color: var(--exp-muted); }
.notif-panel .notif-item {
  background: var(--exp-card);
  border: 1px solid var(--exp-hairline);
  border-radius: 14px;
  box-shadow: var(--exp-lift-sm);
}
.notif-panel .notif-item.unread {
  background: var(--exp-soft);
  border-color: var(--exp-accent);
}
.notif-panel .notif-cat { color: var(--exp-accent); }
.notif-panel .notif-time { color: var(--exp-muted); }
.notif-panel .notif-title { color: var(--exp-ink); }
.notif-panel .notif-body { color: var(--exp-muted); opacity: 1; }
.notif-panel .notif-dismiss { background: transparent; color: var(--exp-muted); }
.notif-panel .notif-foot-btn {
  background: var(--exp-surface);
  color: var(--exp-ink);
  border: 1.5px solid var(--exp-hairline);
  border-radius: 9999px;
  min-height: 40px;
  font-weight: 600;
}
/* Header unread badge reads as a small red count, as in the mock. */
.notif-badge { background: #B4281E; color: #FFFFFF; }

/* ================================================================== *
 *  Motion safety: the small lift transitions added here settle instantly for
 *  players who prefer reduced motion.
 * ================================================================== */
@media (prefers-reduced-motion: reduce) {
  .quicknav-overlay .quicknav-game,
  .quicknav-overlay .quicknav-link,
  .a11y-screen .a11y-toggle::before,
  .a11y-screen .a11y-toggle::after,
  #toast { transition: none; }
}

/* ================================================================== *
 *  Rich toast  ~  js/ui.js toast(msg, ms, { icon, subtitle, onTap }).
 *  An amber icon disc, a bold title and a muted subtitle, as a soft pill.
 *  The plain single-line toast (no opts) keeps the base #toast look above.
 * ================================================================== */
#toast.toast-rich {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 9999px;
  padding: 10px 20px 10px 10px;
  max-width: min(92vw, 30rem);
}
#toast.toast-rich .toast-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 1;
  background: var(--amber, #f59e0b);
  color: var(--on-amber, #4a2e00);
}
#toast.toast-rich .toast-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#toast.toast-rich .toast-title { font-family: var(--exp-font-head, 'Plus Jakarta Sans', system-ui, sans-serif); font-weight: 800; color: #1E293B; }
#toast.toast-rich .toast-sub { font-weight: 500; font-size: 0.88rem; color: #64748B; }
#toast.toast-tappable { cursor: pointer; }

/* ================================================================== *
 *  Full-width offline banner  ~  js/app.js setOfflineBanner().
 *  A rose pill with a cloud-off icon at the top of the screen when the sync
 *  status is offline. Sits above the header; slides in when .show is set.
 * ================================================================== */
.offline-banner {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  left: 12px;
  right: 12px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 9999px;
  background: #FDE7EA;
  color: #B4281E;
  border: 1px solid #F6C6CC;
  box-shadow: 0 8px 24px rgba(180, 40, 30, 0.16);
  font-family: var(--exp-font-body, 'Be Vietnam Pro', system-ui, sans-serif);
  font-weight: 700;
  text-align: center;
  transform: translateY(calc(-100% - 24px));
  opacity: 0;
  pointer-events: none;
  transition: transform 0.28s ease, opacity 0.28s ease;
}
.offline-banner.show { transform: translateY(0); opacity: 1; }
.offline-banner-icon { flex: 0 0 auto; }
.offline-banner-text { line-height: 1.25; }
@media (prefers-reduced-motion: reduce) { .offline-banner { transition: none; } }