/* ── Web fonts ── */
    /* v6.4.57: self-hosted Departure Mono for the flipboard theme. Pixel
       monospace by Helena Zhang, SIL OFL. ~22KB; no FOIT thanks to swap. */
    @font-face {
      font-family: 'Departure Mono';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('/fonts/DepartureMono-Regular.woff2') format('woff2'),
           url('/fonts/DepartureMono-Regular.woff')  format('woff');
    }

    /* ── Design Tokens ── */
    :root {
      --bg:      #0A0A0F;
      --surface: #13131A;
      --raised:  #1C1C26;
      --accent:  #0057B8;
      --mango:   #F5A623;
      --man-col: #E8472A;
      --go-col:  #F5C518;
      --text:    #F0F0F5;
      --dim:     #8888A0;
      --border:  #2A2A38;
      /* Aliases for `var(--card, #262626)` / `var(--fg, #f5f5f5)` fallbacks
         used throughout the stylesheet — without these, those rules render
         the dark fallback even in light mode. */
      --card:    var(--raised);
      --fg:      var(--text);
      /* Card-level outline color. Picks up the mango brand orange so the
         major boxes (header, ETA strip, train card, ride cards, settings
         sections, etc.) are visually anchored. Internal separators —
         table rows, settings dividers, modal sections — keep --border
         so they stay subtle. */
      --card-border: var(--mango);
      /* Soft variant — for stacked inner cards (e.g. multiple settings
         sections on the Settings page) where solid mango borders read as
         visual noise. Keeps the brand tint without shouting. */
      --card-border-soft: rgba(245, 166, 35, 0.28);
      --success: #22C55E;
      --warning: #F59E0B;
      --danger:  #EF4444;
      /* Theme-aware danger surfaces. --danger is fine for short accents
         (text + small icons) but tinted backgrounds and body copy on a
         light tint need lighter/darker variants for AA contrast. */
      --danger-text: #f87171;
      --danger-tint: rgba(220, 38, 38, .12);
      /* Inter-block spacing scale (margin-bottom on cards/sections).
         Padding and gaps stay literal — these are rhythm tokens only. */
      --sp-1: 2px;
      --sp-2: 4px;
      --sp-3: 6px;
      --sp-4: 8px;
      --sp-5: 10px;
      --sp-6: 12px;
      --sp-7: 16px;
      --sp-8: 24px;
    }

    [data-theme="light"] {
      --bg:      #F5F5F7;
      --surface: #FFFFFF;
      --raised:  #EEEEF2;
      --accent:  #0057B8;
      --mango:   #E8960A;
      --man-col: #D03A1E;
      --go-col:  #D4A80E;
      --text:    #1A1A2E;
      --dim:     #6B6B80;
      --border:  #D5D5E0;
      --card:    var(--raised);
      --fg:      var(--text);
      --card-border: var(--mango);
      --success: #16A34A;
      --warning: #D97706;
      --danger:  #DC2626;
      --danger-text: #B91C1C;            /* AA on light surface (~7.5:1) */
      --danger-tint: rgba(220, 38, 38, .08);
      --card-border-soft: rgba(232, 150, 10, 0.30);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; -webkit-touch-callout: none; user-select: none; }
    input, textarea { -webkit-user-select: text; user-select: text; }
    /* Lock the shell to exactly the visible viewport so iOS doesn't show a
       fake-scroll bounce when content fits. Body becomes the scroll container
       (via overflow-y: auto): when content overflows the body, body scrolls
       internally; when content fits, no scroll surface exists at all. */
    html {
      background: var(--bg); transition: background 0.2s;
      height: 100vh; height: 100dvh;
      overflow: hidden;
    }
    body {
      background: var(--bg); color: var(--text);
      font-family: 'DM Sans', system-ui, sans-serif;
      max-width: 480px; margin: 0 auto;
      /* Exact viewport height — not min-height. With min-height the body could
         grow past the viewport on subtle overflow (e.g. iOS toolbar transitions),
         producing a small scroll on views that should fit (Home/Trains/Games). */
      height: 100vh; height: 100dvh;
      overflow-y: auto;
      /* Honor the device's safe-area insets so content doesn't tuck behind a
         notch or Dynamic Island on newer iPhones. */
      padding:
        max(8px, env(safe-area-inset-top))
        max(20px, env(safe-area-inset-right))
        88px
        max(20px, env(safe-area-inset-left));
      overscroll-behavior-y: contain; /* no rubber-band past the top/bottom */
      -webkit-overflow-scrolling: touch;
    }

    /* Accessibility: respect users who've asked for less motion (vestibular
       sensitivity etc.). Strip animations and transitions globally. */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    /* Visible focus ring for keyboard navigation. Touch users never see this
       (no :focus-visible match) but tab/arrow-key users get clear indication
       of which control is active. */
    :focus { outline: none; }
    :focus-visible {
      outline: 2px solid var(--mango);
      outline-offset: 2px;
      border-radius: 4px;
    }
    html { overscroll-behavior-y: none; }

    /* ── Views ── */
    .view { display: none; }
    .view.active { display: block; }

    /* ── A11y helpers ── */
    .skip-link {
      position: absolute; left: 12px; top: -48px; z-index: 1000;
      background: var(--accent); color: #fff; padding: 8px 14px; border-radius: 8px;
      text-decoration: none; font-weight: 600; font-family: 'DM Sans', sans-serif; font-size: 13px;
      transition: top 0.15s ease;
    }
    .skip-link:focus { top: 12px; outline: 2px solid var(--mango); outline-offset: 2px; }
    main#main-content:focus { outline: none; }

    /* ── Update banner ── */
    .update-banner {
      position: sticky; top: 0; z-index: 50;
      margin: -20px -20px 12px; padding: 10px 16px;
      background: var(--accent); color: #fff;
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600;
    }
    .update-banner.hidden { display: none; }
    .update-banner button {
      background: #fff; color: var(--accent);
      border: none; border-radius: 6px; padding: 6px 14px;
      font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
    }
    .update-banner button:disabled { opacity: 0.6; cursor: default; }

    /* ── Loading ── */
    #view-loading { flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; gap: 18px; }
    #view-loading.active { display: flex !important; }

    /* ── Wordmarks ── */
    .load-wordmark   { font-family: 'Bebas Neue', sans-serif; font-size: 64px; letter-spacing: 0.08em; line-height: 1; animation: pulse 1.6s ease-in-out infinite; display: inline-flex; align-items: center; gap: 5px; }
    .wordmark        { font-family: 'Bebas Neue', sans-serif; font-size: 30px; letter-spacing: 0.06em; line-height: 1; cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 2px; }
    .manual-wordmark { font-family: 'Bebas Neue', sans-serif; font-size: 52px; letter-spacing: 0.08em; line-height: 1; display: inline-flex; align-items: center; gap: 4px; }
    .ride-wordmark   { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: 0.06em; line-height: 1; cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 1px; }
    .man { color: var(--man-col); }
    .go  { color: var(--go-col);  }
    /* Compensate for letter-spacing trailing space after N, so N-G gap matches all other letter gaps */
    .wordmark .man      { margin-right: -0.06em; }
    .ride-wordmark .man { margin-right: -0.06em; }
    .manual-wordmark .man { margin-right: -0.08em; }
    .load-wordmark .man   { margin-right: -0.08em; }
    @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.5;} }

    .spinner { width: 28px; height: 28px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.75s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── App header ── */
    .app-header { background: var(--surface); border: 1px solid var(--card-border); border-radius: 16px; padding: 10px 18px; margin-bottom: var(--sp-3); display: flex; align-items: center; justify-content: space-between; }
    .header-left { flex: 1; }
    .station-ctx { font-size: 11px; color: var(--dim); font-weight: 500; margin-top: 3px; letter-spacing: 0.03em; display: flex; align-items: center; gap: 5px; }
    .weather-widget { display: flex; align-items: center; gap: 6px; text-align: right; flex-shrink: 0; }
    .weather-widget img { width: 44px; height: 44px; }

    /* OpenWeather icons are designed for dark backgrounds — soft whites on
       transparent. They wash out on light surfaces. Darken + contrast in
       light mode so the cloud / sun shapes still pop. Targets the URL so
       it covers every weather-icon location (header, manual, modals). */
    [data-theme="light"] img[src*="openweathermap.org"] {
      filter: brightness(0.55) contrast(1.15) saturate(1.2)
              drop-shadow(0 1px 2px rgba(0,0,0,0.12));
    }

    /* v6.4.20: Trains tab cards — one per (line, station). Header carries
       the line pill + station name; body is a list of upcoming arrivals. */
    .trains-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 10px 14px;
      margin-bottom: var(--sp-5);
    }
    .trains-card-hdr {
      display: flex; align-items: center; gap: 8px;
      padding-bottom: 8px; border-bottom: 1px solid var(--border);
      margin-bottom: 6px;
    }
    .trains-card-name {
      font-size: 14px; font-weight: 600; color: var(--text);
    }
    .trains-card-body { padding-top: 4px; }
    .trains-row {
      display: flex; justify-content: space-between; align-items: baseline;
      padding: 6px 0;
      font-size: 13px;
    }
    .trains-row + .trains-row { border-top: 1px dashed var(--border); }
    .trains-row-dest { color: var(--text); }
    .trains-row-eta {
      font-family: 'IBM Plex Mono', ui-monospace, monospace;
      color: var(--mango); font-weight: 600;
      font-variant-numeric: tabular-nums;
    }
    .trains-empty {
      padding: 10px 0; text-align: center;
      font-size: 12px; color: var(--dim);
    }
    /* v6.4.25: pill-shaped "+ Add a train station" button below My stations */
    .trains-add-btn {
      display: block; width: 100%;
      background: transparent;
      color: var(--mango);
      border: 1.5px dashed var(--mango);
      border-radius: 999px;
      padding: 12px 16px;
      font-family: 'DM Sans', sans-serif;
      font-size: 14px; font-weight: 700;
      letter-spacing: 0.02em;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    .trains-add-btn:active { background: var(--mango); color: var(--bg); }
    /* User-added station × button */
    .trains-card-remove {
      margin-left: auto;
      background: transparent; border: none;
      color: var(--dim); font-size: 20px; line-height: 1;
      cursor: pointer; padding: 4px 8px;
      border-radius: 6px;
      -webkit-tap-highlight-color: transparent;
    }
    .trains-card-remove:active { background: var(--border); color: var(--text); }
    .w-temp { font-family: 'IBM Plex Mono', monospace; font-size: 16px; font-weight: 600; color: var(--text); }
    .w-cond { font-size: 10px; color: var(--dim); white-space: nowrap; }
    .w-cached { font-size: 8px; color: var(--warning); opacity: 0.7; }
    .weather-text { text-align: right; }

    /* ── Drive bar (sub-mode B) ── */
    .drive-bar { background: var(--surface); border: 1px solid var(--card-border); border-radius: 16px; padding: 8px 18px; margin-bottom: var(--sp-3); }
    .drive-bar-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); margin-bottom: var(--sp-2); }
    .drive-bar-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
    .drive-bar-main { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--text); }
    .drive-bar-eta  { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--mango); }
    .drive-bar-loading { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--dim); }
    .mini-spin { width: 13px; height: 13px; border: 1.5px solid var(--border); border-top-color: var(--dim); border-radius: 50%; animation: spin 0.75s linear infinite; flex-shrink: 0; }

    /* ── Train card ── */
    .train-card { background: var(--surface); border: 1px solid var(--card-border); border-radius: 16px; overflow: hidden; margin-bottom: var(--sp-3); }
    .card-hdr { padding: 6px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
    .card-hdr-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); }
    .train-table { width: 100%; border-collapse: collapse; table-layout: fixed; overflow-x: auto; display: block; }
    .train-table thead, .train-table tbody { display: table; width: 100%; table-layout: fixed; }
    .train-table thead th { padding: 6px 6px; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--dim); text-align: center; border-bottom: 1px solid var(--border); white-space: nowrap; }
    .train-table td { text-align: center; }
    .train-table thead th:first-child { width: 54px; }
    .train-row { cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .train-row:active td { background: var(--raised); }
    .train-row td { padding: 11px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; text-align: center; transition: background 0.1s; }
    /* Keyboard focus: outline on a `<tr>` is dropped by border-collapse, so
       paint the focus ring via the row's `<td>` cells instead. */
    .train-row:focus { outline: none; }
    .train-row:focus-visible { outline: none; }
    .train-row:focus-visible td { background: rgba(245, 166, 35, 0.18); box-shadow: inset 0 2px 0 var(--mango), inset 0 -2px 0 var(--mango); }
    .train-row:focus-visible td:first-child { box-shadow: inset 0 2px 0 var(--mango), inset 0 -2px 0 var(--mango), inset 2px 0 0 var(--mango); }
    .train-row:focus-visible td:last-child  { box-shadow: inset 0 2px 0 var(--mango), inset 0 -2px 0 var(--mango), inset -2px 0 0 var(--mango); }
    .train-row:last-child td { border-bottom: none; }
    .train-row td:first-child { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; color: var(--mango); width: 54px; }
    .t-time { font-family: 'IBM Plex Mono', monospace; font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; display: block; }
    .t-time.now  { color: var(--danger); font-weight: 600; }
    .t-time.home { color: var(--mango);  font-weight: 600; }
    .badge { display: inline-block; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 7px; border-radius: 20px; white-space: nowrap; }
    .b-ok  { background: rgba(34,197,94,0.12);  color: #22C55E; }
    .b-dly { background: rgba(245,158,11,0.15); color: #F59E0B; }
    .b-app { background: rgba(239,68,68,0.12);  color: #EF4444; }
    .card-msg { padding: 20px 18px; font-size: 13px; color: var(--dim); line-height: 1.5; }
    .card-msg.err { color: var(--danger); font-size: 12px; }
    .footnote { padding: 9px 18px; font-size: 10px; color: var(--dim); border-top: 1px solid var(--border); line-height: 1.4; }

    /* ── Previous (departed) train rows ── */
    .train-row.prev { opacity: 0.55; }

    /* ────────────────────────────────────────────────────────
       FLIPBOARD theme for the Trains tab. Solari-style split-flap
       board — think Catch Me If You Can credits, The Terminal, or
       Grand Central Terminal before 2000. Scoped to #view-trains so
       Home / Games / Settings keep the regular Dark/Light theme.
       Toggle in Settings → Display → Train board.
       ──────────────────────────────────────────────────────── */
    [data-train-board="flipboard"] #view-trains {
      /* Pale amber on near-black — the colors of sodium-vapor station
         lighting and the cream paint on the Solari di Udine boards. */
      --flip-bg:         #0A0907;
      --flip-tile:       #15110A;
      --flip-tile-2:     #1E1A11;
      --flip-amber:      #F4C95D;
      --flip-amber-dim:  #8A7438;
      /* v6.5.6: dedicated tint for schedule-based predictions (isSch=1).
         Sits midway between bright and dim so the row still reads as
         lower-confidence vs tracked rows, but it's no longer hard to read.
         Structural UI elements (header, empty state, add-station button)
         keep --flip-amber-dim. */
      --flip-amber-soft: #BF9F4B;
      --flip-divide:    rgba(0,0,0,0.55);
      --flip-edge:      rgba(0,0,0,0.85);
      /* v6.4.57: Departure Mono (Helena Zhang, SIL OFL) — pixel monospace
         tuned for departure-board aesthetics. Bahnschrift / DIN Alternate
         / Roboto Mono kept as cascade fallbacks until the woff2 lands. */
      --flip-font: 'Departure Mono', 'Bahnschrift', 'DIN Alternate', 'Roboto Mono', 'IBM Plex Mono', ui-monospace, 'Menlo', monospace;
    }
    [data-train-board="flipboard"] #view-trains .train-card {
      background: var(--flip-bg);
      border: 1px solid #000;
      border-radius: 4px;
      box-shadow: inset 0 0 0 1px #2a2418, 0 2px 0 #000;
    }
    [data-train-board="flipboard"] #view-trains .card-hdr {
      background: var(--flip-bg);
      border-bottom: 2px solid #000;
      padding: 8px 14px;
    }
    [data-train-board="flipboard"] #view-trains .card-hdr-lbl {
      color: var(--flip-amber);
      font-family: var(--flip-font);
      letter-spacing: 0.18em;
      font-weight: 700;
      font-size: 10px;
      text-transform: uppercase;
    }
    [data-train-board="flipboard"] #view-trains .train-table thead th {
      background: #000;
      color: var(--flip-amber-dim);
      border-bottom: 1px solid #000;
      letter-spacing: 0.15em;
      font-family: var(--flip-font);
      padding: 6px 4px;
    }
    [data-train-board="flipboard"] #view-trains .train-table td {
      /* Each cell is a flap tile: dark base with a faint horizontal
         hairline at the middle simulating the fold. Slight gradient
         shades top half lighter than bottom (raked station light). */
      background:
        linear-gradient(to bottom,
          var(--flip-tile-2) 0%,
          var(--flip-tile-2) 49.5%,
          var(--flip-divide) 49.5%,
          var(--flip-divide) 50.5%,
          var(--flip-tile) 50.5%,
          var(--flip-tile) 100%);
      border-bottom: 2px solid var(--flip-edge);
      border-right: 1px solid var(--flip-edge);
      color: var(--flip-amber);
      font-family: var(--flip-font);
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      padding: 13px 4px;
      transition: none;
    }
    [data-train-board="flipboard"] #view-trains .train-table td:last-child { border-right: none; }
    [data-train-board="flipboard"] #view-trains .train-row td:first-child {
      color: var(--flip-amber);
      font-weight: 800;
    }
    [data-train-board="flipboard"] #view-trains .t-time {
      color: var(--flip-amber);
      font-family: var(--flip-font);
      font-weight: 700;
      font-size: 15px;
      letter-spacing: 0.06em;
    }
    [data-train-board="flipboard"] #view-trains .t-time.now,
    [data-train-board="flipboard"] #view-trains .t-time.home {
      /* Boarding/departing rows glow warm red like a NOW/BRD indicator. */
      color: #FF7B3E;
      text-shadow: 0 0 6px rgba(255,123,62,0.45);
    }
    [data-train-board="flipboard"] #view-trains .badge {
      background: #000;
      color: var(--flip-amber);
      border: 1px solid var(--flip-amber-dim);
      border-radius: 0;
      letter-spacing: 0.18em;
      font-family: var(--flip-font);
    }
    [data-train-board="flipboard"] #view-trains .b-ok  { color: #6EE787; border-color: #2F5C3A; }
    [data-train-board="flipboard"] #view-trains .b-dly { color: #FFB949; border-color: #6A4A14; }
    [data-train-board="flipboard"] #view-trains .b-app { color: #FF7B3E; border-color: #6A2814; }
    [data-train-board="flipboard"] #view-trains .train-row:active td { background: #2A2412; }
    [data-train-board="flipboard"] #view-trains .train-row.prev { opacity: 0.38; }
    [data-train-board="flipboard"] #view-trains .card-msg,
    [data-train-board="flipboard"] #view-trains .footnote {
      color: var(--flip-amber-dim);
      font-family: var(--flip-font);
      letter-spacing: 0.08em;
      background: var(--flip-bg);
      border-color: #000;
    }
    /* v6.5.8: wordmark deliberately left UNTOUCHED on the flipboard theme.
       The MANGO logo (icon + MAN/GO spans) must look identical across
       Home / Trains / Games / Settings — Bebas Neue, red+yellow, full-color
       mango character. Only the section heading (h2 "TRAINS") gets the
       flipboard mono-amber treatment so the page subtitle keeps the
       Solari feel without changing the brand mark. */
    [data-train-board="flipboard"] #view-trains h2,
    [data-train-board="flipboard"] #view-trains h3 {
      color: var(--flip-amber);
      font-family: var(--flip-font);
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    /* v6.4.55: flipboard styling for the new "My Stations" cards
       (.trains-card / .trains-row). The legacy block above targets the
       old #view-cumberland / #view-cl table-based markup; this block
       carries the same Solari aesthetic onto the div-based cards. */
    [data-train-board="flipboard"] #view-trains .trains-card {
      background: var(--flip-bg);
      border: 1px solid #000;
      border-radius: 4px;
      box-shadow: inset 0 0 0 1px #2a2418, 0 2px 0 #000;
      padding: 0;
    }
    [data-train-board="flipboard"] #view-trains .trains-card-hdr {
      background: #000;
      border-bottom: 2px solid var(--flip-edge);
      padding: 8px 14px;
      margin-bottom: 0;
    }
    [data-train-board="flipboard"] #view-trains .trains-card-name {
      color: var(--flip-amber);
      font-family: var(--flip-font);
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-size: 13px;
    }
    [data-train-board="flipboard"] #view-trains .trains-card-body {
      padding: 0;
    }
    [data-train-board="flipboard"] #view-trains .trains-row {
      background:
        linear-gradient(to bottom,
          var(--flip-tile-2) 0%,
          var(--flip-tile-2) 49.5%,
          var(--flip-divide) 49.5%,
          var(--flip-divide) 50.5%,
          var(--flip-tile) 50.5%,
          var(--flip-tile) 100%);
      border-bottom: 2px solid var(--flip-edge);
      padding: 12px 14px;
      transition: none;
    }
    [data-train-board="flipboard"] #view-trains .trains-row + .trains-row {
      border-top: none;
    }
    [data-train-board="flipboard"] #view-trains .trains-row-dest {
      color: var(--flip-amber);
      font-family: var(--flip-font);
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 13px;
    }
    [data-train-board="flipboard"] #view-trains .trains-row-eta {
      color: var(--flip-amber);
      font-family: var(--flip-font);
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      font-size: 13px;
    }
    /* Boarding/approaching rows glow warm red, mirroring .t-time.now. */
    [data-train-board="flipboard"] #view-trains .trains-row.is-now .trains-row-dest,
    [data-train-board="flipboard"] #view-trains .trains-row.is-now .trains-row-eta {
      color: #FF7B3E;
      text-shadow: 0 0 6px rgba(255,123,62,0.45);
    }
    [data-train-board="flipboard"] #view-trains .trains-empty {
      color: var(--flip-amber-dim);
      font-family: var(--flip-font);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      background: var(--flip-bg);
      padding: 14px;
    }
    [data-train-board="flipboard"] #view-trains .trains-card-remove {
      color: var(--flip-amber-dim);
    }
    [data-train-board="flipboard"] #view-trains .trains-card-remove:active {
      background: var(--flip-tile-2); color: var(--flip-amber);
    }
    [data-train-board="flipboard"] #view-trains .trains-add-btn {
      color: var(--flip-amber);
      border-color: var(--flip-amber-dim);
      background: transparent;
      font-family: var(--flip-font);
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }
    [data-train-board="flipboard"] #view-trains .trains-add-btn:active {
      background: var(--flip-amber); color: var(--flip-bg);
    }

    /* ────────────────────────────────────────────────────────
       v6.4.58 · Real split-flap tiles inside each card body.
       Activated only when the flipboard theme is selected; the
       JS swaps trainsFillCard to build a SplitFlapBoard whose
       host element receives these styles.
       ──────────────────────────────────────────────────────── */
    [data-train-board="flipboard"] #view-trains .trains-card-body.sfb-host {
      /* v6.5.0: bumped tile size — was clamp(7px,2.4vw,13px), too small to
         read at arm's length. Now ~15px on a 390px phone, ~18px capped
         on wider viewports. Row may overflow the card width on phones;
         overflow-x:auto on .sfb-rows lets it scroll horizontally rather
         than shrinking the tiles. */
      --sfb-cell-w:      clamp(13px, 3.8vw, 18px);
      --sfb-cell-h:      calc(var(--sfb-cell-w) * 1.18);
      --sfb-cell-gap:    1px;
      --sfb-col-gap:     clamp(6px, 1.8vw, 12px);
      --sfb-cell-radius: calc(var(--sfb-cell-w) * 0.14);
      --sfb-tile-hi:     #322C28;
      --sfb-tile-lo:     #211D1A;
      --sfb-seam:        rgba(0,0,0,0.55);
      --sfb-bevel:       rgba(255,245,230,0.05);
      --sfb-amber:       var(--flip-amber);
      --sfb-amber-dim:   var(--flip-amber-dim);
      --sfb-flap-ms:      350ms;
      --sfb-flap-half:    175ms;
      --sfb-ease-out: cubic-bezier(0.55, 0.05, 0.85, 0.30);
      --sfb-ease-in:  cubic-bezier(0.20, 0.85, 0.40, 1.06);
      padding: 8px 4px 6px;
    }
    [data-train-board="flipboard"] #view-trains .sfb-rows {
      display: flex; flex-direction: column;
      gap: max(3px, calc(var(--sfb-cell-w) * 0.18));
      /* v6.5.0: allow horizontal scroll if the row of tiles exceeds card
         body width — bigger tiles are worth the trade. Snap to start so
         the destination column always re-anchors after each refresh. */
      overflow-x: auto;
      overflow-y: hidden;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }
    [data-train-board="flipboard"] #view-trains .sfb-rows::-webkit-scrollbar { display: none; }
    [data-train-board="flipboard"] #view-trains .sfb-row {
      display: flex; align-items: center; gap: var(--sfb-col-gap);
      scroll-snap-align: start;
      /* v6.5.0: no fade on empty rows. 4 flipboard rows per station, full
         opacity, blank cells where there's no train. */
    }
    [data-train-board="flipboard"] #view-trains .sfb-row.sfb-row-empty {
      opacity: 1;
    }
    /* v6.5.5: static header row of flipboard tiles. Same chrome as data
       rows so it looks like part of the board, with a thin amber underline
       to mark the boundary. Glyph color dims slightly so the headings read
       as labels rather than data. */
    [data-train-board="flipboard"] #view-trains .sfb-row-header {
      margin-bottom: max(4px, calc(var(--sfb-cell-w) * 0.22));
      padding-bottom: max(3px, calc(var(--sfb-cell-w) * 0.16));
      border-bottom: 1px solid rgba(244, 201, 93, 0.22);
    }
    [data-train-board="flipboard"] #view-trains .sfb-row-header .sfb-cell > div > span {
      /* v6.5.7: bright amber to match the data rows (was --flip-amber-dim).
         Header is still distinguishable via the underline border below. */
      color: var(--flip-amber);
    }
    [data-train-board="flipboard"] #view-trains .sfb-row-col {
      display: flex; gap: var(--sfb-cell-gap); align-items: center;
    }
    [data-train-board="flipboard"] #view-trains .sfb-col-dest { flex: 0 0 auto; }
    [data-train-board="flipboard"] #view-trains .sfb-col-eta  {
      flex: 0 0 auto; margin-left: auto;
    }

    /* Cell — base tile geometry */
    [data-train-board="flipboard"] #view-trains .sfb-cell {
      position: relative;
      width: var(--sfb-cell-w);
      height: var(--sfb-cell-h);
      flex: 0 0 var(--sfb-cell-w);
      background:
        linear-gradient(to bottom,
          var(--sfb-tile-hi) 0%,
          var(--sfb-tile-hi) 49.6%,
          var(--sfb-seam)    49.6%,
          var(--sfb-seam)    50.4%,
          var(--sfb-tile-lo) 50.4%,
          var(--sfb-tile-lo) 100%);
      border-radius: var(--sfb-cell-radius);
      box-shadow:
        inset 0 1px 0 var(--sfb-bevel),
        inset 0 -1px 0 rgba(0,0,0,0.45),
        inset 0 0 0 1px rgba(0,0,0,0.55),
        0 1px 2px rgba(0,0,0,0.35);
      perspective: 420px;
      overflow: hidden;
    }
    [data-train-board="flipboard"] #view-trains .sfb-cell::after {
      content: "";
      position: absolute; inset: 0 0 50% 0;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(255,245,230,0.06) 0%, transparent 100%);
      border-radius: var(--sfb-cell-radius) var(--sfb-cell-radius) 0 0;
    }

    [data-train-board="flipboard"] #view-trains .sfb-cell-static-top,
    [data-train-board="flipboard"] #view-trains .sfb-cell-static-bottom,
    [data-train-board="flipboard"] #view-trains .sfb-cell-flap-out,
    [data-train-board="flipboard"] #view-trains .sfb-cell-flap-in {
      position: absolute; left: 0; width: 100%; height: 50%;
      overflow: hidden;
      will-change: transform;
    }
    [data-train-board="flipboard"] #view-trains .sfb-cell-static-top    { top: 0;   z-index: 1; }
    [data-train-board="flipboard"] #view-trains .sfb-cell-static-bottom { top: 50%; z-index: 1; }
    [data-train-board="flipboard"] #view-trains .sfb-cell-flap-out {
      top: 0; z-index: 3;
      transform-origin: bottom;
      transform: rotateX(0deg);
      backface-visibility: hidden;
      background: linear-gradient(180deg, var(--sfb-tile-hi) 0%, #2B2622 100%);
      border-bottom: 1px solid var(--sfb-seam);
    }
    [data-train-board="flipboard"] #view-trains .sfb-cell-flap-in {
      top: 0; z-index: 2;
      transform-origin: top;
      transform: rotateX(-90deg);
      backface-visibility: hidden;
      background: linear-gradient(180deg, var(--sfb-tile-hi) 0%, #2B2622 100%);
      border-bottom: 1px solid var(--sfb-seam);
    }
    [data-train-board="flipboard"] #view-trains .sfb-cell > div > span {
      position: absolute; left: 0; width: 100%; height: 200%;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--flip-font);
      font-weight: 400;
      font-size: calc(var(--sfb-cell-h) * 0.74);
      line-height: 1;
      letter-spacing: 0;
      color: var(--sfb-amber);
      text-shadow: 0 1px 0 rgba(0,0,0,0.55);
      user-select: none;
    }
    [data-train-board="flipboard"] #view-trains .sfb-cell-static-top > span    { top: 0; }
    [data-train-board="flipboard"] #view-trains .sfb-cell-static-bottom > span { top: -100%; }
    [data-train-board="flipboard"] #view-trains .sfb-cell-flap-out > span      { top: 0; }
    [data-train-board="flipboard"] #view-trains .sfb-cell-flap-in > span       { top: 0; }

    /* Flip animation */
    [data-train-board="flipboard"] #view-trains .sfb-cell.is-flipping .sfb-cell-flap-out {
      animation: sfb-flap-out var(--sfb-flap-half) var(--sfb-ease-out) forwards;
    }
    [data-train-board="flipboard"] #view-trains .sfb-cell.is-flipping .sfb-cell-flap-in {
      animation: sfb-flap-in var(--sfb-flap-half) var(--sfb-flap-half) var(--sfb-ease-in) forwards;
    }
    @keyframes sfb-flap-out {
      0%   { transform: rotateX(0deg); }
      100% { transform: rotateX(-90deg); }
    }
    @keyframes sfb-flap-in {
      0%   { transform: rotateX(-90deg); }
      70%  { transform: rotateX(6deg); }
      100% { transform: rotateX(0deg); }
    }
    [data-train-board="flipboard"] #view-trains .sfb-cell:not(.is-flipping) .sfb-cell-flap-out { transform: rotateX(0deg); opacity: 0; }
    [data-train-board="flipboard"] #view-trains .sfb-cell:not(.is-flipping) .sfb-cell-flap-in  { transform: rotateX(-90deg); opacity: 0; }

    /* Status colorings — match the existing flipboard accent palette */
    [data-train-board="flipboard"] #view-trains .sfb-row[data-status="approaching"] .sfb-cell > div > span,
    [data-train-board="flipboard"] #view-trains .sfb-row[data-status="boarding"]    .sfb-cell > div > span,
    [data-train-board="flipboard"] #view-trains .sfb-row[data-status="due"]         .sfb-cell > div > span {
      color: #FF7B3E;
    }
    [data-train-board="flipboard"] #view-trains .sfb-row[data-status="delayed"]   .sfb-cell > div > span { color: #FFB949; }
    [data-train-board="flipboard"] #view-trains .sfb-row[data-status="scheduled"] .sfb-cell > div > span { color: var(--flip-amber-soft); }

    /* Reduced motion: drop the flap geometry entirely */
    @media (prefers-reduced-motion: reduce) {
      [data-train-board="flipboard"] #view-trains .sfb-cell-flap-out,
      [data-train-board="flipboard"] #view-trains .sfb-cell-flap-in { display: none; }
    }
    .train-row.prev td:first-child { color: var(--dim); }

    /* ── Missed train rows (sub-mode B) ── */
    .train-row.missed { opacity: 0.45; }
    .train-row.missed td:first-child { color: var(--dim); }
    .train-row.missed .t-time { color: var(--dim) !important; }

    /* ── Drive summary (Clark/Lake) ── */
    .drive-summary { background: var(--surface); border: 1px solid var(--card-border); border-radius: 16px; padding: 8px 18px; margin-bottom: var(--sp-3); }
    .ds-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); margin-bottom: 3px; }
    .ds-row { display: flex; align-items: baseline; gap: 6px; }
    .ds-num { font-family: 'IBM Plex Mono', monospace; font-size: 20px; font-weight: 600; color: var(--text); line-height: 1; }
    .ds-unit { font-size: 13px; color: var(--dim); }
    .ds-dist { font-size: 12px; color: var(--dim); margin-left: 4px; }
    .ds-dest { font-size: 11px; color: var(--dim); margin-top: 4px; }

    /* ── Legacy modal overlay (resume ride, train selector, etc.).
       Scoped to #modal-overlay (the unique id at the bottom of index.html)
       so it does NOT collide with the Phase B `.modal-overlay` sheet
       system used for station/line/commute pickers further down. ── */
    #modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 100; display: flex; align-items: flex-end; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
    #modal-overlay.open { opacity: 1; pointer-events: all; }
    .modal-sheet { width: 100%; max-width: 480px; margin: 0 auto; background: var(--surface); border-radius: 20px 20px 0 0; border-top: 1px solid var(--border); padding: 0 0 32px; transform: translateY(100%); transition: transform 0.25s cubic-bezier(0.32,0.72,0,1); max-height: 78vh; overflow-y: auto; overscroll-behavior: contain; }
    #modal-overlay.open .modal-sheet { transform: translateY(0); }
    .modal-handle { width: 36px; height: 4px; background: var(--border); border-radius: 2px; margin: 16px auto 14px; }
    .modal-title { font-size: 15px; font-weight: 700; color: var(--text); padding: 0 20px 14px; border-bottom: 1px solid var(--border); }
    .modal-option { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; cursor: pointer; transition: background 0.1s; border-bottom: 1px solid var(--border); text-decoration: none; }
    .modal-option:last-child { border-bottom: none; }
    .modal-option:active { background: var(--raised); }
    .mo-left { display: flex; flex-direction: column; gap: 4px; }
    .mo-num  { font-size: 10px; color: var(--dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
    .mo-rn   { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--mango); font-weight: 600; }
    .mo-dep  { font-family: 'IBM Plex Mono', monospace; font-size: 16px; color: var(--text); font-weight: 500; }
    .mo-eta  { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--mango); }
    .mo-arrow { color: var(--dim); font-size: 18px; flex-shrink: 0; }

    /* ── Auto-detect toast ── */
    .auto-toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%) translateY(-8px); width: calc(100% - 32px); max-width: 448px; background: var(--raised); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; z-index: 95; box-shadow: 0 4px 24px rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; }
    .auto-toast.show { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0); }
    .toast-msg { font-size: 13px; color: var(--text); line-height: 1.4; flex: 1; }
    .toast-tap { font-size: 12px; font-weight: 700; color: var(--mango); white-space: nowrap; cursor: pointer; }

    /* ── Ride Mode ── */
    #view-riding.active { display: flex; flex-direction: column; min-height: calc(100vh - 40px); }

    .ride-header { background: var(--surface); border: 1px solid var(--card-border); border-radius: 16px; padding: 12px 18px; margin-bottom: var(--sp-5); display: flex; align-items: center; justify-content: space-between; }
    .ride-header-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
    .ride-line-lbl { font-size: 11px; color: var(--dim); font-weight: 500; display: flex; align-items: center; gap: 6px; margin-top: 3px; }
    .ride-dot { width: 8px; height: 8px; background: var(--success); border-radius: 50%; animation: pdot 2s ease-in-out infinite; flex-shrink: 0; }
    @keyframes pdot { 0%,100%{opacity:1;} 50%{opacity:0.35;} }
    .ride-loc-lost { font-size: 10px; color: var(--warning); }
    .ride-elapsed { font-size: 10px; color: var(--dim); }

    .ride-next-card { background: var(--surface); border: 1px solid var(--card-border); border-radius: 16px; padding: 14px 18px; margin-bottom: var(--sp-5); position: relative; }
    .ride-train-badge { position: absolute; top: 12px; right: 16px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600; color: var(--mango); padding: 3px 10px; border: 1px solid var(--mango); border-radius: 999px; line-height: 1; letter-spacing: 0.04em; }
    .ride-next-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); margin-bottom: var(--sp-3); }
    .ride-next-stop { font-family: 'IBM Plex Mono', monospace; font-size: 24px; font-weight: 600; color: var(--text); line-height: 1; margin-bottom: var(--sp-6); }
    .ride-divider { height: 1px; background: var(--border); margin-bottom: var(--sp-5); }
    .ride-stat-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-3); }
    .ride-stat-lbl { font-size: 12px; color: var(--dim); }
    .ride-stops-num { font-family: 'IBM Plex Mono', monospace; font-size: 40px; font-weight: 600; color: var(--mango); line-height: 1; }
    .ride-stops-num.is-next { color: var(--danger); font-size: 28px; letter-spacing: 0.04em; }
    .ride-eta-time  { font-family: 'IBM Plex Mono', monospace; font-size: 22px; font-weight: 600; color: var(--mango); }
    .ride-eta-time.arriving { color: var(--danger); font-size: 16px; }
    .ride-dest-delayed { font-size: 11px; color: var(--mango); margin-top: 8px; text-align: right; }
    .ride-dest-missing { font-size: 11px; color: var(--danger); margin-top: 8px; }

    /* ── 1-stop vibration pulse ── */
    @keyframes redPulse { 0%{color:var(--mango);} 50%{color:var(--danger);} 100%{color:var(--mango);} }
    .ride-stops-num.pulse-red { animation: redPulse 500ms ease; }

    /* ── 1-stop banner ── */
    .one-stop-banner { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); border-radius: 12px; padding: 12px 18px; font-size: 14px; font-weight: 700; color: var(--danger); text-align: center; margin-bottom: var(--sp-6); }

    .ride-stops-card { background: var(--surface); border: 1px solid var(--card-border); border-radius: 16px; overflow: hidden; margin-bottom: var(--sp-5); }
    .ride-stops-hdr { padding: 9px 18px; border-bottom: 1px solid var(--border); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); }
    .ride-stop-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 22px; border-bottom: 1px solid var(--border); }
    .ride-stop-row:last-child { border-bottom: none; }
    .ride-stop-row.dest { background: rgba(245,166,35,0.07); }
    .ride-stop-name { font-size: 13px; color: var(--text); }
    .ride-stop-row.dest .ride-stop-name { color: var(--mango); font-weight: 600; }
    .ride-stop-time { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--dim); min-width: 80px; text-align: right; flex-shrink: 0; }
    .ride-stop-row.dest .ride-stop-time { color: var(--mango); }

    .ride-alert-card { background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.25); border-radius: 16px; padding: 14px 18px; margin-bottom: var(--sp-6); }
    .ride-alert-lbl { font-size: 12px; font-weight: 700; color: var(--warning); margin-bottom: var(--sp-2); }
    .ride-alert-msg { font-size: 12px; color: var(--dim); line-height: 1.5; }

    /* ── Last updated ── */
    .last-updated { text-align: center; font-size: 10px; color: var(--dim); padding: 2px 0 0; letter-spacing: 0.02em; }

    /* ── Manual selection ── */
    .manual-header { text-align: center; padding: 16px 0 10px; }
    .manual-wx { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px 0 10px; }
    .manual-wx img { width: 28px; height: 28px; }
    .manual-wx .w-temp { font-size: 15px; }
    /* ── End Ride button ── */
    .end-ride-btn { width: 100%; background: transparent; border: 1px solid var(--border); border-radius: 12px; padding: 12px; color: var(--dim); font-size: 13px; font-weight: 600; font-family: 'DM Sans', sans-serif; cursor: pointer; margin-top: 4px; }
    .end-ride-btn:active { border-color: var(--dim); color: var(--text); }

    /* ── Animations ── */
    @keyframes fadeInRow { from{opacity:0;transform:translateY(5px);} to{opacity:1;transform:translateY(0);} }
    .train-row { opacity: 0; animation: fadeInRow 200ms ease forwards; }
    .train-row.r0 { animation-delay:   0ms; }
    .train-row.r1 { animation-delay:  50ms; }
    .train-row.r2 { animation-delay: 100ms; }
    .train-row.r3 { animation-delay: 150ms; }
    .train-row.r4 { animation-delay: 200ms; }
    .train-row.no-anim { opacity: 1; animation: none; }
    @keyframes flashVal { 0%{color:var(--mango)!important;} 100%{color:inherit;} }
    .flash { animation: flashVal 600ms ease; }
    .hidden { display: none !important; }

    /* ── Favorite train ── */
    .train-row.fav td:first-child { color: var(--go-col); }
    .train-row.fav td:first-child::before { content: '★ '; font-size: 10px; }
    .fav-btn { background: none; border: none; font-size: 16px; cursor: pointer; padding: 12px; min-width: 44px; min-height: 44px; opacity: 0.4; display: inline-flex; align-items: center; justify-content: center; }
    .fav-btn.active { opacity: 1; }

    /* ── Settings ── */
    .manual-header { position: relative; }
    .settings-view { padding: 0 0 60px; max-width: 480px; margin: 0 auto; }
    /* Lock the outer page on views where everything should fit in the viewport.
       The train card inside Home views has its own internal scroll so longer
       train lists remain accessible without the whole page sliding up. */
    /* view-manual was in this list under v5.x (single fixed train card with
       its own internal scroll). v6 stacks variable-height components on the
       home screen, so the page must be allowed to scroll naturally. */
    body:has(#view-settings.active),
    body:has(#view-cumberland.active),
    body:has(#view-clarklake.active),
    body:has(#view-commute.active),
    body:has(#view-game-mine.active),
    body:has(#view-game-2048.active) { overflow: hidden; height: 100vh; height: 100dvh; }
    body:has(#view-commute.active) { display: flex; flex-direction: column; }
    #view-commute.active { display: flex !important; flex-direction: column; flex: 1; min-height: 0; }
    .commute-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 16px 24px; }
    /* Home views: stack as a flex column and let the train list scroll
       internally so the header / drive bar / footer stay visible and the
       outer page doesn't slide. */
    body:has(#view-cumberland.active),
    body:has(#view-clarklake.active)  { display: flex; flex-direction: column; }
    #view-cumberland.active, #view-clarklake.active {
      display: flex; flex-direction: column;
      flex: 1; min-height: 0;
    }
    #view-cumberland .train-card,
    #view-clarklake  .train-card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
    #view-cumberland #trains-c,
    #view-clarklake  #trains-cl { flex: 1; min-height: 0; overflow-y: auto; }
    .settings-back { background: none; border: none; color: var(--accent); font-size: 14px; font-weight: 600; cursor: pointer; padding: 0; margin-bottom: var(--sp-7); font-family: 'DM Sans', sans-serif; }
    .settings-title { font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: 20px; }
    .settings-section { background: var(--surface); border: 1px solid var(--card-border-soft); border-radius: 14px; padding: 10px 14px; margin-bottom: var(--sp-3); }
    .settings-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dim); margin-bottom: var(--sp-2); }
    .settings-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; gap: 10px; min-height: 44px; }
    .settings-row + .settings-row { border-top: 1px solid var(--border); }

    /* Collapsible details section — styled like settings-section but with a clickable summary. */
    .settings-details > summary {
      cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between;
      margin: 0; padding-right: 18px;
      position: relative;
    }
    .settings-details > summary::-webkit-details-marker { display: none; }
    .settings-details > summary::after {
      content: '›'; color: var(--dim); font-size: 18px; line-height: 1;
      position: absolute; right: 0; top: 50%;
      transform: translateY(-50%) rotate(0deg);
      transition: transform 0.15s ease;
    }
    .settings-details[open] > summary::after { transform: translateY(-50%) rotate(90deg); }
    .settings-lbl { font-size: 14px; color: var(--text); }
    .settings-sub { font-size: 11px; color: var(--dim); margin-top: 2px; }
    /* Default left alignment reads naturally for text fields (commute name,
       address, labels). Numeric inputs (parking/gas/tolls/parking-prompt)
       opt back into right-align via inline style="text-align:right". */
    .settings-input { background: var(--raised); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; color: var(--text); font-size: 14px; font-family: 'DM Sans', sans-serif; width: 160px; text-align: left; }
    .settings-input:focus { outline: none; border-color: var(--accent); }
    /* Toggle switch */
    .toggle { position: relative; width: 44px; height: 26px; flex-shrink: 0; }
    .toggle input { opacity: 0; width: 0; height: 0; }
    .toggle-track { position: absolute; inset: 0; background: var(--raised); border: 1px solid var(--border); border-radius: 13px; cursor: pointer; transition: background 0.2s; }
    .toggle-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: var(--dim); border-radius: 50%; transition: transform 0.2s, background 0.2s; }
    .toggle input:checked + .toggle-track { background: var(--accent); border-color: var(--accent); }
    .toggle input:checked + .toggle-track::after { transform: translateX(18px); background: #fff; }
    /* Stepper */
    .stepper { display: flex; align-items: center; gap: 8px; }
    .stepper-btn { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--border); background: var(--raised); color: var(--text); font-size: 18px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: 'DM Sans', sans-serif; }
    .stepper-btn:active { background: var(--accent); border-color: var(--accent); color: #fff; }
    .stepper-val { font-size: 14px; font-weight: 600; color: var(--text); min-width: 36px; text-align: center; }
    /* Unit toggle */
    .unit-toggle { display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
    .unit-opt { padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; background: var(--raised); color: var(--dim); border: none; font-family: 'DM Sans', sans-serif; }
    .unit-opt.active { background: var(--accent); color: #fff; }

    /* ── Places autocomplete ── */
    .pac-container { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; margin-top: 4px; font-family: 'DM Sans', sans-serif !important; }
    .pac-item { border-top: 1px solid var(--border) !important; color: var(--text) !important; padding: 8px 12px !important; font-size: 13px !important; cursor: pointer; }
    .pac-item:hover, .pac-item-selected { background: var(--raised) !important; }
    .pac-item-query { color: var(--text) !important; font-weight: 600 !important; }
    .pac-icon { display: none !important; }
    .pac-matched { color: var(--accent) !important; }

    /* ── Alert banner ── */
    .alert-banner { background: #3d2f00; border: 1px solid #6b5000; border-radius: 10px; padding: 10px 14px; margin: 0 16px 10px; font-size: 12px; color: var(--warning); display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; }
    .alert-banner-icon { flex-shrink: 0; font-size: 16px; }
    .alert-banner-text { flex: 1; }
    .alert-dismiss { flex-shrink: 0; background: none; border: none; color: var(--warning); font-size: 18px; cursor: pointer; padding: 0; line-height: 1; opacity: 0.6; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
    .alert-dismiss:active { opacity: 1; }
    [data-theme="light"] .alert-banner { background: #fff3cd; border-color: var(--warning); color: #856404; }
    [data-theme="light"] .alert-dismiss { color: #856404; }

    /* ── Leave-by countdown ── */
    .leave-by { text-align: center; padding: 10px 16px; margin: 0 16px 10px; background: var(--surface); border: 1px solid var(--card-border); border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--mango); }
    .leave-by.urgent { color: var(--danger); }

    /* ── Offline banner ── */
    .offline-banner { position: fixed; top: 0; left: 0; right: 0; background: var(--danger); color: #fff; text-align: center; font-size: 12px; font-weight: 600; padding: 6px; z-index: 200; font-family: 'DM Sans', sans-serif; }

    /* ── Collapsed stops ── */
    .collapsed-group { }
    .collapsed-toggle { cursor: pointer; }
    .collapsed-group .collapsed-detail { display: none; }
    .collapsed-group.expanded .collapsed-detail { display: flex; }

    /* ── Progress bar ── */
    .ride-progress { margin: 0 0 12px; background: var(--raised); border-radius: 6px; height: 6px; overflow: hidden; }
    .ride-progress-fill { height: 100%; background: var(--accent); border-radius: 6px; transition: width 0.5s ease; }

    /* ── Stop states ── */
    .ride-stop-row.passed { opacity: 0.35; }
    .ride-stop-row.passed .ride-stop-name::before { content: '✓ '; color: var(--dim); }
    .ride-stop-row.current { background: var(--raised); border-radius: 8px; padding: 7px 22px; margin: 2px 0; }
    .ride-stop-row.current .ride-stop-name { color: var(--accent); font-weight: 700; }
    .ride-stop-row.current .ride-stop-name::before { content: '▶ '; }

    /* ── Countdown chips ── */
    .countdown { display: inline-block; background: var(--accent); color: #fff; font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
    .countdown.soon { background: var(--danger); }

    /* ── Pull to refresh ── */
    .ptr-indicator { text-align: center; height: 0; overflow: hidden; transition: height 0.2s; color: var(--dim); font-size: 12px; display: flex; align-items: center; justify-content: center; gap: 6px; }
    .ptr-indicator.pulling { height: 36px; }
    .ptr-indicator.refreshing { height: 36px; }

    /* ── Stale data badge ── */
    .stale-badge { font-size: 11px; padding: 3px 8px; border-radius: 6px; display: inline-block; }
    .stale-badge.fresh { color: var(--success); }
    .stale-badge.warm { color: #e6a700; }
    .stale-badge.stale { color: var(--warning); }
    .stale-badge.old { color: var(--danger); }

    /* ── Commute stat ── */
    .commute-stat { padding: 6px 16px; font-size: 12px; color: var(--dim); margin-bottom: var(--sp-2); }
    .commute-avg { text-align: center; font-weight: 600; margin-bottom: var(--sp-2); }
    .commute-list { display: flex; flex-direction: column; gap: 2px; }
    .commute-ride { display: flex; justify-content: space-between; padding: 4px 8px; background: var(--surface); border-radius: 6px; font-size: 11px; }
    .commute-ride-date { color: var(--dim); }
    .commute-ride-info { color: var(--text); font-weight: 500; }

    /* ── Commute trend chart ── */
    .trend-chart { display: flex; align-items: flex-end; justify-content: space-between; gap: 4px; height: 40px; padding: 4px 0; }
    .trend-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%; }
    .trend-bar { width: 100%; border-radius: 3px 3px 0 0; background: var(--accent); min-height: 2px; transition: height 0.3s; }
    .trend-bar-wrap .trend-label { font-size: 9px; color: var(--dim); }
    .trend-bar-wrap .trend-val { font-size: 8px; color: var(--text); font-weight: 600; }

    /* ── Share ETA button ── */
    .ride-actions { display: flex; gap: 8px; margin-top: 4px; }
    .ride-actions > button { flex: 1; margin-top: 0 !important; }
    .share-eta-btn { width: 100%; background: transparent; border: 1px solid var(--accent); border-radius: 12px; padding: 12px; color: var(--accent); font-size: 13px; font-weight: 600; font-family: 'DM Sans', sans-serif; cursor: pointer; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 6px; }
    .share-eta-btn:active { background: var(--accent); color: #fff; }

    /* ── Bottom Nav Bar ── */
    .bottom-nav { position: fixed !important; bottom: 0 !important; left: 50% !important; right: auto !important; transform: translateX(-50%); width: 100% !important; max-width: 480px !important; background: var(--surface); border-top: 1px solid var(--border); display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; justify-content: space-around; padding: 6px 0 env(safe-area-inset-bottom, 8px); z-index: 95; }
    /* touch-action: manipulation eliminates the iOS tap-to-zoom delay heuristic
       that was causing some users to need a double-tap to fire the click event
       on these div-as-button nav tabs. */
    .nav-tab { display: flex !important; flex-direction: column !important; align-items: center; gap: 0; padding: 8px 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; text-decoration: none; transition: opacity 0.15s; flex: 1; touch-action: manipulation; user-select: none; }
    .nav-tab:active { opacity: 0.7; }
    .nav-tab-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
    .nav-tab-icon img { width: 30px !important; height: 30px !important; max-width: 30px !important; max-height: 30px !important; object-fit: contain; filter: grayscale(100%) brightness(0.6); transition: filter 0.15s; }
    .nav-tab.active .nav-tab-icon img { filter: none; }
    /* v6.4.21: labels removed — icons-only nav. Class kept on elements in
       case any code reads them by selector. */
    .nav-tab-label { display: none !important; }
    /* Compound-selector overrides — .nav-tab / .bottom-nav both declare `display: flex !important`
       above, which wins over the global `.hidden { display: none !important }` by source order.
       These restore hiding for the Ride tab (shown only during active ride) and the nav on loading. */
    .nav-tab.hidden { display: none !important; }
    .bottom-nav.hidden { display: none !important; }

    /* Active-ride tab — center FAB-style "shutter" button that sits raised above
       the rest of the nav, mirroring the camera shutter pattern in Native Mango. */
    .nav-tab.nav-tab-ride { justify-content: flex-start; }
    .nav-tab.nav-tab-ride .nav-tab-icon {
      width: 52px; height: 52px;
      background: var(--mango);
      border-radius: 50%;
      margin-top: -22px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.28), 0 0 0 4px var(--surface);
      overflow: visible;
      transition: transform 0.15s;
    }
    .nav-tab.nav-tab-ride:active .nav-tab-icon { transform: scale(0.94); }
    .nav-tab.nav-tab-ride .nav-tab-icon img {
      width: 24px !important; height: 24px !important;
      max-width: 24px !important; max-height: 24px !important;
      filter: brightness(0) invert(1) !important;
    }
    .nav-tab.nav-tab-ride.active .nav-tab-icon img { filter: brightness(0) invert(1) !important; }
    /* SVG glyphs (drive/walk/wait phases) inherit currentColor, so paint them
       white against the mango circle to match the train.png filter result. */
    .nav-tab.nav-tab-ride .nav-tab-icon svg { color: #fff; }
    .nav-tab.nav-tab-ride .nav-tab-label { color: var(--mango); font-weight: 700; margin-top: 2px; }
    .nav-tab.nav-tab-ride.active .nav-tab-label { color: var(--mango); }
    .commute-hdr { display: flex; align-items: center; gap: 5px; background: rgba(245,166,35,0.12); border: 1px solid var(--mango); border-radius: 8px; padding: 4px 8px; }
    .commute-hdr.hidden { display: none !important; }

    /* ══════════ Games ══════════ */
    .games-title { text-align: center; padding: 12px 16px 8px; font-size: 22px; font-weight: 700; color: var(--text); }
    .game-card { display: flex; align-items: center; gap: 16px; padding: 16px 20px; margin: 8px 16px; background: var(--surface); border: 1px solid var(--card-border); border-radius: 14px; cursor: pointer; }
    .game-card:active { background: var(--raised); }
    .game-card-icon { font-size: 32px; line-height: 1; flex-shrink: 0; }
    .game-card-text { flex: 1; min-width: 0; }
    .game-card-title { font-size: 17px; font-weight: 600; color: var(--text); }
    .game-card-sub { font-size: 13px; color: var(--dim); margin-top: 2px; }

    .game-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px 8px; border-bottom: 1px solid var(--border); gap: 12px; }
    .game-back, .game-reset {
      background: transparent; border: 1px solid var(--border); color: var(--text);
      font-size: 18px; padding: 6px 12px; cursor: pointer; border-radius: 8px;
      font-family: inherit; line-height: 1; min-width: 40px;
    }
    .game-back:active, .game-reset:active { background: var(--raised); }
    .game-stats { display: flex; gap: 14px; font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: var(--text); }
    .game-help { text-align: center; font-size: 12px; color: var(--dim); padding: 8px 16px 12px; }

    /* ─── Commute view (drive / wait / walk phases) ─── */
    .commute-header {
      display: flex; align-items: center; gap: 12px;
      padding: 12px 16px 8px; border-bottom: 1px solid var(--border);
    }
    .commute-title-wrap { flex: 1; min-width: 0; }
    .commute-title { font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.2; }
    .commute-subtitle { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
    .commute-body { padding: 12px 16px 24px; }

    .commute-drive-card {
      background: var(--surface); border: 1px solid var(--card-border);
      border-radius: 16px; padding: 18px 20px; margin-bottom: 14px;
    }
    .commute-drive-row { display: flex; align-items: baseline; gap: 6px; }
    .commute-drive-num { font-family: 'IBM Plex Mono', monospace; font-size: 42px; font-weight: 700; color: var(--mango); line-height: 1; }
    .commute-drive-unit { font-size: 14px; font-weight: 600; color: var(--dim); }
    .commute-drive-meta { font-size: 13px; color: var(--text); margin-top: 6px; }
    .commute-drive-eta { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--mango); margin-top: 4px; }

    .commute-section-lbl {
      font-size: 11px; color: var(--dim); text-transform: uppercase;
      letter-spacing: 0.5px; font-weight: 600; margin: 4px 4px 8px;
    }
    .commute-trains { display: flex; flex-direction: column; gap: 6px; }
    .commute-train-row {
      display: grid; grid-template-columns: 60px 1fr auto;
      align-items: center; gap: 12px;
      padding: 12px 14px;
      background: var(--surface); border: 1px solid var(--card-border);
      border-radius: 12px; cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .commute-train-row.is-catchable { border-color: var(--success); }
    .commute-train-row:active { transform: scale(0.99); }
    .commute-train-rn { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--dim); font-weight: 600; }
    .commute-train-times { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .commute-train-dep { font-family: 'IBM Plex Mono', monospace; font-size: 16px; color: var(--text); font-weight: 600; }
    .commute-train-office { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--dim); }
    .commute-train-badge {
      font-size: 11px; font-weight: 700;
      padding: 4px 8px; border-radius: 999px; white-space: nowrap;
    }
    .commute-train-badge.ok { background: rgba(34,197,94,0.15); color: var(--success); }
    .commute-train-badge.miss { background: rgba(239,68,68,0.12); color: var(--danger); }
    .commute-train-badge.dim { background: var(--raised); color: var(--dim); }
    .game-ride-banner {
      display: flex; align-items: center; gap: 10px;
      margin: 4px 16px 0; padding: 10px 14px;
      background: linear-gradient(90deg, rgba(245,166,35,0.20), rgba(245,166,35,0.10));
      border: 1px solid var(--mango); border-radius: 12px;
      cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .game-ride-banner.hidden { display: none; }
    .game-ride-banner:active { transform: scale(0.985); }
    .grb-icon { font-size: 16px; line-height: 1; }
    .grb-text { flex: 1; display: flex; flex-direction: column; gap: 2px; line-height: 1.2; min-width: 0; }
    .grb-next { color: var(--text); font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .grb-meta { color: var(--dim); font-size: 11px; font-family: 'IBM Plex Mono', monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .grb-arrow { color: var(--mango); font-size: 18px; font-weight: 700; line-height: 1; }

    .mine-status, .g2048-status { text-align: center; padding: 8px; font-size: 15px; font-weight: 600; color: var(--text); min-height: 24px; }

    /* Grid is sized by the smaller of width or remaining viewport height so the
       minesweeper view never introduces vertical scrolling. ~290px is the
       chrome budget: header + status + help + ride banner + bottom nav. */
    .mine-grid {
      display: grid; gap: 2px; margin: 6px auto; padding: 6px;
      /* Cell size is computed in JS (renderMinesweeper) so cols and rows
         share the same square dimension. Previously aspect-ratio:1 on the
         container + 1fr columns + per-cell aspect-ratio:1 fought each other
         for non-square grids (14×18 Hard), producing uneven rows/cols. */
      touch-action: manipulation;
      justify-content: center;
    }
    /* Minesweeper cell colors are hardcoded per theme rather than reusing the
       global --raised/--surface tokens because those are too close in luminance
       to be distinguishable on a dimmed phone screen. */
    .mine-cell {
      background: #4A4A66; border: 1px solid #08080F;
      border-radius: 4px; display: flex; align-items: center; justify-content: center;
      font-weight: 800; font-size: 16px; cursor: pointer;
      box-shadow: inset 1px 1px 0 rgba(255,255,255,0.14), inset -1px -1px 0 rgba(0,0,0,0.55);
      /* Lock the cell against emoji metrics: 🍹 and 🥭 glyphs have a taller
         line-box than digits, which (combined with grid 1fr + aspect-ratio:1)
         pushes the whole row wider when a flag is placed. Clamping line-height
         and disallowing overflow keeps every cell the same size regardless
         of contents. */
      min-width: 0; min-height: 0;
      line-height: 1;
      overflow: hidden;
    }
    .mine-cell.flagged {
      /* Shrink the flag glyph slightly so the emoji's visual bounding box
         doesn't graze the cell edge on smaller boards. */
      font-size: 14px;
    }
    .mine-cell:active { background: #5A5A7A; }
    .mine-cell.revealed {
      background: #0D0D14; border-color: #08080F; cursor: default;
      box-shadow: none;
    }
    .mine-cell.revealed.mine { background: var(--danger); color: #fff; box-shadow: none; }
    .mine-cell.flagged {
      background: var(--mango); color: var(--bg);
      box-shadow: inset 1px 1px 0 rgba(255,255,255,0.22), inset -1px -1px 0 rgba(0,0,0,0.3);
      font-size: 14px;
    }
    [data-theme="light"] .mine-cell {
      background: #B8B8C8; border-color: #7A7A95;
      box-shadow: inset 1px 1px 0 rgba(255,255,255,0.75), inset -1px -1px 0 rgba(0,0,0,0.22);
    }
    [data-theme="light"] .mine-cell:active { background: #A8A8BC; }
    [data-theme="light"] .mine-cell.revealed {
      background: #FFFFFF; border-color: #C5C5D5;
      box-shadow: none;
    }

    .mine-diff-row { display: flex; gap: 6px; padding: 8px 16px 0; max-width: 420px; margin: 0 auto; }
    .mine-diff-btn {
      flex: 1; padding: 10px 6px; background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; color: var(--text); font-size: 13px; font-weight: 600;
      cursor: pointer; font-family: inherit; line-height: 1.2;
    }
    .mine-modal-section-lbl {
      font-size: 11px; color: var(--dim); margin: 0 0 8px;
      text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600;
    }
    .mine-diff-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
    .mine-diff-btn:active { transform: scale(0.98); }

    .game-flag-btn {
      background: transparent; border: 1px solid var(--border); color: var(--text);
      font-size: 18px; padding: 6px 12px; cursor: pointer; border-radius: 8px;
      font-family: inherit; line-height: 1; min-width: 40px;
    }
    .game-flag-btn.active { background: var(--mango); border-color: var(--mango); color: var(--bg); }
    .game-flag-btn:active { transform: scale(0.96); }

    .mine-scores {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
      padding: 8px 16px; max-width: 420px; margin: 0 auto;
    }
    .mine-score-cell {
      text-align: center; padding: 6px 4px; background: var(--surface);
      border: 1px solid var(--border); border-radius: 8px;
      cursor: pointer; font-family: inherit; color: inherit;
    }
    .mine-score-cell:active { transform: scale(0.97); }
    .mine-score-label { font-size: 9px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.5px; }
    .mine-score-time { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--text); margin-top: 2px; }

    .mine-name-input { width: 100%; text-align: left; }
    .mine-top-list { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; }
    .mine-top-row {
      display: grid; grid-template-columns: 24px 1fr auto auto; align-items: center; gap: 10px;
      padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
    }
    .mine-top-rank { font-size: 13px; font-weight: 700; color: var(--mango); text-align: center; }
    .mine-top-name {
      font-size: 13px; font-weight: 600; color: var(--text);
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .mine-top-time { font-family: 'IBM Plex Mono', monospace; font-size: 16px; color: var(--text); }
    .mine-top-date { font-size: 11px; color: var(--dim); font-family: 'IBM Plex Mono', monospace; }
    .mine-top-row.is-you {
      border-color: var(--mango);
      background: linear-gradient(0deg, rgba(245,166,35,0.12), rgba(245,166,35,0.12)), var(--surface);
    }
    .mine-top-row.is-you .mine-top-rank { color: var(--mango); }

    .mine-over-headline { text-align: center; font-size: 20px; font-weight: 700; color: var(--text); margin-bottom: var(--sp-3); }
    .mine-over-time {
      text-align: center; font-family: 'IBM Plex Mono', monospace;
      font-size: 36px; font-weight: 700; color: var(--mango);
      letter-spacing: 0.04em; margin-bottom: var(--sp-2);
    }
    .mine-over-sub { text-align: center; color: var(--dim); font-size: 13px; margin-bottom: var(--sp-2); }
    .mine-over-actions { display: flex; gap: 10px; margin: 14px 0 4px; }
    .mine-over-btn {
      flex: 1; padding: 12px 14px; border-radius: 10px;
      font-family: inherit; font-size: 14px; font-weight: 600;
      cursor: pointer; border: 1px solid var(--border);
    }
    .mine-over-btn:active { transform: scale(0.98); }
    .mine-over-btn-primary { background: var(--mango); color: var(--bg); border-color: var(--mango); }
    .mine-over-btn-secondary { background: var(--surface); color: var(--text); }

    .g2048-grid { display: grid; gap: 6px; padding: 8px; margin: 8px auto; max-width: min(420px, 92vw); background: var(--raised); border-radius: 8px; touch-action: none; }
    .g2048-tile { aspect-ratio: 1; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 22px; }
    .g2048-v0 { background: var(--surface); }
    .g2048-v2 { background: #eee4da; color: #776e65; }
    .g2048-v4 { background: #ede0c8; color: #776e65; }
    .g2048-v8 { background: #f2b179; color: #fff; }
    .g2048-v16 { background: #f59563; color: #fff; }
    .g2048-v32 { background: #f67c5f; color: #fff; }
    .g2048-v64 { background: #f65e3b; color: #fff; }
    .g2048-v128 { background: #edcf72; color: #fff; font-size: 20px; }
    .g2048-v256 { background: #edcc61; color: #fff; font-size: 20px; }
    .g2048-v512 { background: #edc850; color: #fff; font-size: 20px; }
    .g2048-v1024 { background: #edc53f; color: #fff; font-size: 17px; }
    .g2048-v2048 { background: #edc22e; color: #fff; font-size: 17px; }
    .g2048-v4096, .g2048-v8192, .g2048-v16384, .g2048-v32768, .g2048-v65536, .g2048-v131072 {
      background: #3c3a32; color: #fff; font-size: 14px;
    }

/* ══════════ PHASE B: ONBOARDING (v6.0.1 typography) ══════════ */
#view-onboarding { padding: 16px 16px 80px; font-family: 'DM Sans', system-ui, sans-serif; }
.onb-wrap { max-width: 480px; margin: 0 auto; }
.onb-progress { display: flex; gap: 6px; margin-bottom: var(--sp-7); }
.onb-pdot { flex: 1; height: 3px; background: var(--border, #2a2a2a); border-radius: 2px; transition: background .2s; }
.onb-pdot.active { background: var(--mango, #ff8a3d); }
.onb-screen.hidden { display: none; }
.onb-wordmark { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 8px 0 16px; font-size: 22px; font-weight: 700; }
.onb-title {
  font-family: 'Bebas Neue', system-ui, sans-serif;
  font-size: 28px; letter-spacing: 0.04em; font-weight: 400;
  margin: 4px 0; text-align: center;
}
.onb-sub { font-size: 13px; color: var(--dim, #888); margin: 0 0 18px; text-align: center; }
.onb-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim, #888); margin: 12px 4px 4px; }
.onb-input { width: 100%; padding: 10px 12px; font-size: 14px; border: 1px solid var(--border, #333); background: var(--card, #262626); color: var(--fg, #f5f5f5); border-radius: 8px; box-sizing: border-box; }
.onb-modes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-7); }
.mode-chip {
  display: inline-flex; align-items: center; gap: 4px; line-height: 1.2;
  background: var(--card, #2d2d2d); border: 1px solid var(--border, #3a3a3a);
  border-radius: 999px; padding: 8px 14px; font-size: 13px; color: var(--fg, #ccc);
  cursor: pointer; user-select: none;
}
.mode-chip.on { background: var(--mango, #ff8a3d); color: #1a1a1a; border-color: var(--mango, #ff8a3d); font-weight: 600; }
.onb-primary {
  width: 100%; padding: 12px; margin-top: 12px; background: var(--mango, #ff8a3d); color: #1a1a1a;
  font-size: 15px; font-weight: 700; border: none; border-radius: 10px; cursor: pointer;
}
.onb-primary:disabled { background: var(--border, #444); color: var(--dim, #888); cursor: not-allowed; }
.onb-link { display: block; margin: 12px auto 0; background: none; border: none; color: var(--dim, #888); font-size: 13px; cursor: pointer; }
.onb-error { margin-top: 10px; padding: 8px 12px; background: var(--danger-tint); color: var(--danger-text); border-left: 3px solid var(--danger); border-radius: 6px; font-size: 12px; }

.onb-review { background: var(--card, #262626); border-radius: 12px; padding: 12px; margin: 12px 0; }
.onb-review-header { margin-bottom: var(--sp-4); }
.line-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff; }
.line-pill.line-blue   { background: #1d4ed8; }
.line-pill.line-red    { background: #dc2626; }
.line-pill.line-brown  { background: #b45309; }
.line-pill.line-green  { background: #16a34a; }
.line-pill.line-orange { background: #ea580c; }
.line-pill.line-pink   { background: #ec4899; }
.line-pill.line-purple { background: #7c3aed; }
.line-pill.line-yellow { background: #eab308; color: #1a1a1a; }
.onb-review-row { display: flex; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--border, #2a2a2a); cursor: pointer; }
.onb-review-row:last-of-type { border-bottom: none; }
.onb-review-row[data-onb-row]:hover { background: rgba(255, 138, 61, .05); }
.onb-review-lbl { font-size: 13px; color: var(--dim, #aaa); }
.onb-review-val { flex: 1; text-align: right; font-size: 13px; color: var(--fg, #fff); padding: 0 8px; }
.onb-review-chev { color: var(--mango, #ff8a3d); font-size: 18px; }
.onb-review-total { text-align: right; font-size: 13px; font-weight: 600; color: var(--mango, #ff8a3d); padding-top: 8px; }

/* ══════════ PHASE B: STATION PICKER MODAL ══════════ */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1000; display: flex; align-items: flex-end; justify-content: center; }
.modal-overlay.hidden { display: none; }
.sheet { width: 100%; max-width: 480px; background: var(--bg, #1a1a1a); border-radius: 16px 16px 0 0; padding: 16px; max-height: 80vh; display: flex; flex-direction: column; }
.sheet-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-6); }
.sheet-header h3 { margin: 0; font-size: 16px; font-weight: 600; }
.sheet-close { background: none; border: none; color: var(--dim, #888); font-size: 24px; cursor: pointer; padding: 8px 12px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.sheet-body { overflow-y: auto; flex: 1; }
.sheet-link { background: none; border: none; color: var(--mango, #ff8a3d); font-size: 13px; padding: 12px 0 4px; cursor: pointer; text-align: center; }
.sheet-link.hidden { display: none; }

.sp-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--border, #2a2a2a); cursor: pointer; }
.sp-row:hover { background: rgba(255, 138, 61, .05); }
.sp-row:last-child { border-bottom: none; }
.sp-name { font-size: 14px; font-weight: 500; }
.sp-dist { font-size: 12px; color: var(--dim, #888); }
/* v6.4.26: gold star prefix on stations already tracked (commute or user-added) */
.sp-tracked-star { color: var(--mango); font-size: 14px; margin-right: 2px; }

/* ══════════ PHASE B: SETTINGS — COMMUTE LIST ══════════ */
.commute-card { background: var(--card, #262626); border-radius: 10px; padding: 10px 12px; margin-bottom: var(--sp-3); cursor: pointer; }
.commute-card:hover { background: rgba(255, 138, 61, .05); }
.commute-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-2); }
.commute-name { font-size: 14px; font-weight: 600; }
.commute-edit { font-size: 12px; color: var(--mango, #ff8a3d); }
.commute-card-sub { font-size: 12px; color: var(--dim, #aaa); margin-bottom: var(--sp-1); }
.commute-card-modes { font-size: 12px; color: var(--dim, #888); }
.settings-empty { padding: 12px; font-size: 12px; color: var(--dim, #888); text-align: center; font-style: italic; }
.chev { color: var(--dim, #666); font-size: 16px; }

/* iOS-style switch (used by Transit pass toggle and any new boolean rows) */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; inset: 0; background: var(--border, #444); border-radius: 24px; transition: .2s; }
.slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: .2s; }
input:checked + .slider { background: var(--mango, #ff8a3d); }
input:checked + .slider:before { transform: translateX(18px); }

/* ══════════ PHASE B: COMMUTE EDITOR ══════════ */
.ce-header { display: flex; align-items: center; gap: 12px; margin-bottom: var(--sp-6); }
.ce-header .game-back { background: none; border: none; color: var(--mango, #ff8a3d); font-size: 24px; cursor: pointer; padding: 0; }
.ce-title {
  margin: 0;
  font-family: 'Bebas Neue', system-ui, sans-serif;
  font-size: 22px; letter-spacing: 0.06em; font-weight: 400;
}
.settings-val { color: var(--fg, #fff); font-size: 14px; }
#ce-line-display::before { content: ""; }
.ce-delete {
  width: 100%; padding: 10px; margin-top: 12px; background: transparent; color: var(--danger-text);
  font-size: 13px; font-weight: 500; border: 1px solid var(--danger); border-radius: 10px; cursor: pointer;
}
.ce-delete:hover { background: var(--danger-tint); }

/* ══════════ PHASE C: HOME COMPARISON CARD (v6.0.1 typography + motion) ══════════ */
.home-compare { padding: 8px 14px 0; font-family: 'DM Sans', system-ui, sans-serif; }

.commute-selector { padding: 6px 14px 0; }
.commute-selector.hidden { display: none; }
.commute-selector-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card, #262626); border: 1px solid var(--border, #333);
  border-radius: 999px; padding: 5px 12px; font-size: 12px;
  font-family: 'DM Sans', system-ui, sans-serif; font-weight: 500;
  cursor: pointer; transition: background .15s ease;
}
.commute-selector-pill:hover { background: rgba(255, 138, 61, .08); }

.hc-direction-label {
  /* v6.0.1: punchier — Bebas Neue, larger, with a bigger arrow and
     tighter letter-spacing. Reads as a confident heading instead of
     a corporate dashboard label. */
  font-family: 'Bebas Neue', system-ui, sans-serif;
  font-size: 18px; letter-spacing: 0.08em; line-height: 1;
  color: var(--mango, #ff8a3d);
  padding: 4px 4px 10px;
}

.hc-loading {
  font-size: 13px; color: var(--dim, #888);
  text-align: center; padding: 18px;
  font-family: 'DM Sans', system-ui, sans-serif;
}

.hc-hero {
  /* v6.0.1: subtle gradient (top-left light, bottom-right deep) for depth.
     Deeper orange base hits 5.1:1 contrast on #1a1a1a text. */
  background: linear-gradient(135deg, #ffa05c 0%, #ff7a1f 60%, #ee6a0c 100%);
  color: #1a1a1a;
  border: none;
  width: 100%;
  text-align: left;
  display: block;
  border-radius: 14px; padding: 14px 16px; margin-bottom: var(--sp-5);
  cursor: pointer; user-select: none;
  font-family: 'DM Sans', system-ui, sans-serif;
  box-shadow: 0 1px 0 rgba(255, 200, 150, 0.4) inset, 0 4px 12px rgba(255, 122, 31, 0.15);
  transition: transform .12s ease, box-shadow .2s ease, filter .15s ease;
}
.hc-hero:hover {
  filter: brightness(1.04);
  box-shadow: 0 1px 0 rgba(255, 200, 150, 0.5) inset, 0 6px 18px rgba(255, 122, 31, 0.25);
}
.hc-hero:active { transform: scale(0.985); transition-duration: .04s; }
.hc-hero:focus-visible {
  outline: 3px solid #ffb380;
  outline-offset: 2px;
}
.hc-hero-row { display: flex; justify-content: space-between; align-items: baseline; }
.hc-hero-top { margin-bottom: var(--sp-3); }
/* v6.5.18: bumped from 11px to 22px so the commute name reads as the
   hero card's actual title, balanced against the 32px minute number on
   the right. Caret stays sized down so it reads as an indicator, not
   another character. */
.hc-hero-mode { font-size: 22px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.05; }
.hc-hero-mode .hc-hero-caret { font-size: 16px; opacity: 0.7; margin-left: 2px; }
.hc-hero-switcher { cursor: pointer; }
.hc-hero-switcher:active { opacity: 0.7; }
.hc-hero-time {
  /* IBM Plex Mono for the headline number — lines up nicely across alt
     chips, and tabular figures stay aligned during refresh. */
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 32px; font-weight: 600; line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hc-hero .hc-signal { font-size: 11px; color: rgba(26, 26, 26, .82); font-weight: 500; }
.hc-hero .hc-cost {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 600; color: rgba(26, 26, 26, .92);
  font-variant-numeric: tabular-nums;
}
.hc-hero-bottom { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(26, 26, 26, .18); }
.hc-hero-tap-hint { font-size: 11px; font-weight: 600; color: rgba(26, 26, 26, .8); }
.hc-hero-see-all { font-size: 11px; font-weight: 600; color: rgba(26, 26, 26, .92); cursor: pointer; padding: 2px 8px; border-radius: 4px; background: none; border: none; font-family: inherit; }
.hc-hero-see-all:hover { background: rgba(26, 26, 26, .1); }
.hc-hero-see-all:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 1px; }

.hc-alts { padding-bottom: 8px; }
.hc-alts-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--dim, #888); padding: 4px 4px 6px;
  font-weight: 600;
}
.hc-alts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.hc-alt-chip {
  background: var(--card, #262626);
  border: none;
  text-align: left;
  display: block;
  width: 100%;
  font-family: 'DM Sans', system-ui, sans-serif;
  color: inherit;
  border-radius: 10px;
  /* v6.0.1: top stripe (4px) replaces the subtle 2px left border. The mode
     color is now part of the visual language — easier to scan at a glance. */
  padding: 0;
  overflow: hidden;
  cursor: pointer; user-select: none;
  transition: background .15s ease, transform .08s ease, box-shadow .15s ease;
}
.hc-alt-chip-stripe { height: 3px; width: 100%; }
.hc-alt-chip-body { padding: 8px 10px; }
.hc-alt-chip:hover { background: rgba(255, 138, 61, .08); box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.hc-alt-chip:active { transform: scale(0.985); transition-duration: .04s; }
.hc-alt-chip:focus-visible {
  outline: 2px solid var(--mango, #ff8a3d);
  outline-offset: 2px;
}
.hc-alt-row1 { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 600; }
.hc-alt-row2 { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; color: var(--dim, #888); margin-top: 2px; }
.hc-alt-chip .hc-time {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 600; color: var(--fg, #fff); font-variant-numeric: tabular-nums;
}
.hc-alt-chip .hc-cost {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  color: var(--dim, #aaa); font-variant-numeric: tabular-nums;
}
.hc-alt-chip[data-mode="bike"]    .hc-alt-chip-stripe { background: #16a34a; }
.hc-alt-chip[data-mode="drive"]   .hc-alt-chip-stripe { background: #ea580c; }
.hc-alt-chip[data-mode="walk"]    .hc-alt-chip-stripe { background: #7c3aed; }
.hc-alt-chip[data-mode="transit"] .hc-alt-chip-stripe { background: #1d4ed8; }

/* Upcoming-trains sheet rows */
.ut-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 4px; border-bottom: 1px solid var(--border, #2a2a2a); cursor: pointer;
}
.ut-row:hover { background: rgba(255, 138, 61, .05); }
.ut-row:last-child { border-bottom: none; }
.ut-row-name { font-size: 14px; font-weight: 500; }
.ut-row-eta {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 13px; color: var(--mango, #ff8a3d); font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Commute-picker (multi-commute selector sheet) */
.cp-row {
  display: flex; flex-direction: column; padding: 10px 4px;
  border-bottom: 1px solid var(--border, #2a2a2a); cursor: pointer;
}
.cp-row:hover { background: rgba(255, 138, 61, .05); }
.cp-row:last-child { border-bottom: none; }
.cp-row-name { font-size: 14px; font-weight: 600; }
.cp-row-sub { font-size: 11px; color: var(--dim, #888); margin-top: 2px; }

/* ══════════ PHASE D.2: ACTIVE TRANSIT TIMELINE ══════════ */
#view-active-transit-timeline { padding: 16px 16px 80px; font-family: 'DM Sans', system-ui, sans-serif; }
.tl-wrap { max-width: 480px; margin: 0 auto; }

.tl-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: var(--sp-8);
}
.tl-header .game-back {
  background: none; border: none; color: var(--mango, #ff8a3d);
  font-size: 26px; cursor: pointer; padding: 0 4px; line-height: 1;
}
.tl-direction {
  flex: 1;
  font-family: 'Bebas Neue', system-ui, sans-serif;
  font-size: 22px; letter-spacing: 0.06em; color: var(--mango, #ff8a3d);
}
.tl-eta {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 13px; color: var(--dim, #aaa); font-variant-numeric: tabular-nums;
}

/* Segment row: marker + body. Connecting line between markers via ::after */
.tl-segment {
  display: flex; gap: 14px; padding: 6px 0;
  position: relative;
}
.tl-marker {
  flex: 0 0 14px; width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--border, #444);
  margin-top: 6px;
  transition: background .2s ease, box-shadow .2s ease;
  position: relative; z-index: 2;
}
/* Vertical connecting line between this segment's marker and the next */
.tl-segment:not(:last-of-type) .tl-marker::after {
  content: '';
  position: absolute;
  left: 50%; top: 14px;
  width: 2px; height: calc(100% + 28px);
  background: var(--border, #2a2a2a);
  margin-left: -1px;
  z-index: 1;
}
.tl-segment.past .tl-marker { background: var(--mango, #ff8a3d); }
.tl-segment.past .tl-marker::after { background: var(--mango, #ff8a3d); }
.tl-segment.active .tl-marker {
  background: var(--mango, #ff8a3d);
  box-shadow: 0 0 0 4px rgba(255, 138, 61, 0.25);
}

.tl-body {
  flex: 1;
  padding-bottom: 8px;
  border-radius: 10px;
  transition: padding .2s ease, background .2s ease;
}
.tl-segment.active .tl-body {
  background: var(--card, #262626);
  padding: 12px 14px;
}
.tl-segment.past .tl-body { opacity: 0.55; }
.tl-segment.future .tl-body { opacity: 0.7; }

.tl-title {
  font-size: 14px; font-weight: 600;
}
.tl-segment.active .tl-title { font-size: 15px; }
.tl-detail {
  font-size: 12px; color: var(--dim, #aaa);
  margin-top: 4px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

.tl-advance {
  display: block;
  margin-top: 10px;
  background: transparent;
  border: 1px solid var(--mango, #ff8a3d);
  color: var(--mango, #ff8a3d);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px; font-weight: 600;
  font-family: 'DM Sans', system-ui, sans-serif;
  cursor: pointer;
  transition: background .15s ease;
}
.tl-advance.hidden { display: none; }
.tl-advance:hover { background: rgba(255, 138, 61, 0.1); }
.tl-advance:active { transform: scale(0.985); }

.tl-actions {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 24px;
}

/* ══════════ PHASE D.1: ACTIVE BIKE/WALK/DRIVE VIEW ══════════ */
#view-active-bike { padding: 16px 16px 80px; font-family: 'DM Sans', system-ui, sans-serif; }
.bike-active-wrap { max-width: 480px; margin: 0 auto; }
.bike-active-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
}
.bike-active-header .game-back {
  background: none; border: none; color: var(--mango, #ff8a3d);
  font-size: 26px; cursor: pointer; padding: 0 4px; line-height: 1;
}
.bike-active-mode {
  flex: 1;
  font-family: 'Bebas Neue', system-ui, sans-serif;
  font-size: 22px; letter-spacing: 0.06em; color: var(--mango, #ff8a3d);
}
.bike-active-eta {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 13px; color: var(--dim, #aaa); font-variant-numeric: tabular-nums;
}
.bike-active-time {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 48px; font-weight: 600; line-height: 1; letter-spacing: -0.02em;
  color: var(--fg, #fff); font-variant-numeric: tabular-nums;
  margin: 8px 0 18px;
}
.bike-progress-bar {
  height: 10px; background: var(--card, #262626); border-radius: 999px;
  overflow: hidden; margin-bottom: var(--sp-6);
  box-shadow: 0 1px 0 rgba(0,0,0,.3) inset;
}
.bike-progress-fill {
  height: 100%; background: linear-gradient(90deg, #ffa05c 0%, #ff7a1f 100%);
  border-radius: 999px; transition: width .4s ease;
}
.bike-active-stat-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--dim, #aaa); margin-bottom: var(--sp-8);
}
.bike-active-stat-row span:first-child { color: var(--fg, #ddd); font-weight: 500; }
.bike-active-traffic {
  background: var(--danger-tint); border-left: 3px solid var(--danger);
  padding: 10px 12px; border-radius: 6px; font-size: 12px; color: var(--danger-text);
  margin-bottom: 18px;
}
.bike-active-actions { display: flex; flex-direction: column; gap: 8px; }

/* Reorganization toast (one-time) */
.reorg-toast {
  position: fixed; bottom: 80px; left: 16px; right: 16px;
  background: var(--card, #262626); border-left: 3px solid var(--mango, #ff8a3d);
  border-radius: 8px; padding: 12px 14px; box-shadow: 0 4px 16px rgba(0,0,0,.4);
  z-index: 900; max-width: 480px; margin: 0 auto;
}
.reorg-toast h4 { margin: 0 0 4px; font-size: 13px; font-weight: 600; }
.reorg-toast p { margin: 0; font-size: 12px; color: var(--dim, #aaa); line-height: 1.4; }
.reorg-toast .reorg-toast-close {
  position: absolute; top: 6px; right: 8px; background: none; border: none;
  color: var(--dim, #888); font-size: 20px; cursor: pointer; padding: 0 4px;
}