:root {
  /* Palette - washed-out, white-text-readable dark mode. Tones chosen to read
     as trustworthy/reliable and to stay DISTANT from SJTA's bold line colors so
     UI chrome never competes with the routes. Light/high-contrast mode = later. */
  --bg: #14181f;          /* app background (darker grey shell, restored by request) */
  --bg-raised: #1c222b;   /* cards / panels (and the top/bottom menu bars) */
  --bg-panel: #0e1116;    /* map popout menu: darker grey to contrast the bars */
  --bg-sheet: #1b212b;    /* detail sheet */
  --line: #2c333e;        /* borders */
  /* Design rule: NEVER grey text on any background (light OR dark). Secondary
     text uses a warm sand tone, not grey, and stays high-contrast for older
     riders. Larger, obvious UI is the default. */
  --text: #d6cec7;
  --text-dim: #c8b893;       /* warm sand, deliberately not grey */
  --accent: #587e95;      /* palette 1 - primary actions */
  --nav-active: #8fc0e0;  /* lighter blue for the selected nav + page header */
  --signal: #e26048;      /* palette 2 - the ROUTES drawer handle + booking notices ONLY; selected states wear --accent (design pass 2026-08-26) */
  --ok: #117b68;          /* palette 3 - save / confirm */
  --danger: #a04b4c;      /* palette 4 - delays / alerts */
  /* Left rail width, in ONE place: the drawer, the map's left edge and the stop
     dock all read it, so they can never drift apart. Widened from 252px when
     the line list went in: "Pureland East/West Community" overflowed its row. */
  --rail-w: 296px;
  --warn: #8b8137;        /* palette 5 */
  --radius: 16px;
  --nav-h: 84px;
  --appbar-h: calc(56px + env(safe-area-inset-top));
  /* Lato, with the Black (900) weight for headings/tabs/buttons. Default
     tracking (no negative letter-spacing) so type breathes, not taut. */
  --font: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-family: var(--font);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }   /* keep the attribute authoritative over .class display rules */
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-size: 17px; }
body { overscroll-behavior: none; }

/* ---------- Global top bar ---------- */
.appbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 700; height: var(--appbar-h);
  display: flex; align-items: center; gap: 10px;
  padding: env(safe-area-inset-top) 14px 0; background: var(--bg-raised); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: baseline; white-space: nowrap; font-size: 18px; color: var(--text); flex: none; }
.brand b { font-weight: 900; }
.appbar-search { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.search-ic { position: absolute; left: 11px; width: 18px; height: 18px; color: var(--text-dim); pointer-events: none; }
.appbar-search input {
  width: 100%; background: var(--bg); border: 1px solid var(--line); color: var(--text);
  border-radius: 11px; padding: 11px 36px 11px 36px; font-size: 15px; font-family: inherit; font-weight: 600;
}
.appbar-search input::placeholder { color: var(--text-dim); }
.search-clear { position: absolute; right: 6px; background: none; border: none; color: var(--text-dim); padding: 6px; display: flex; }
.search-clear .ic { width: 16px; height: 16px; }
.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50; max-height: 60vh; overflow-y: auto;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.5);
}
.sr-item { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); cursor: pointer; }
.sr-item:first-child { border-top: none; }
.sr-swatch { width: 18px; height: 18px; border-radius: 5px; flex: none; }
.sr-name { text-wrap: pretty;  font-size: 14px; font-weight: 700; }
.sr-sub { font-size: 12px; font-weight: 700; color: var(--text-dim); }
.sr-empty { padding: 14px; color: var(--text-dim); font-size: 14px; }
.icon-btn { background: none; border: none; color: var(--text-dim); padding: 6px; display: flex; flex: none; }
.icon-btn .ic { width: 25px; height: 25px; }

/* ---------- Screens ---------- */
.screen { display: none; position: fixed; top: var(--appbar-h); bottom: var(--nav-h); left: 0; right: 0; flex-direction: column; }
.screen.is-active { display: flex; }
.screen-body { flex: 1; overflow-y: auto; padding: 20px; }
/* Page header (under the search bar): icon + page name, shows where you are. */
.page-head { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 20px 10px; }
.page-head .ic { width: 27px; height: 27px; color: var(--nav-active); flex: none; }
.page-head span { font-size: 23px; font-weight: 900; color: #fff; }

/* Minimalist hollow line icons */
.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Home ---------- */
.eyebrow { color: var(--text-dim); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; margin: 4px 0 12px; }
.hero-card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 22px; }
.hero-empty { text-align: center; }
.hero-empty-art { color: var(--accent); margin-bottom: 10px; }
.hero-empty-art .ic { width: 40px; height: 40px; stroke-width: 1.4; }
.hero-empty h2 { font-size: 24px; margin: 6px 0 10px; }
.hero-empty p { color: var(--text-dim); font-size: 17px; line-height: 1.5; margin: 0 0 22px; }
.btn-primary { background: var(--accent); color: #fff; border: none; border-radius: 14px; padding: 16px 20px; font-size: 18px; font-weight: 700; width: 100%; }
.muted-note { color: var(--text-dim); font-size: 15px; text-align: center; margin-top: 18px; }

/* ---------- Stop detail: Street View + amenities ---------- */
.sv-img { width: 100%; height: 170px; object-fit: cover; border-radius: 12px; margin: 4px 0 14px; display: block; background: var(--bg-raised); }
/* Reserved slot while the metadata check decides photo vs placeholder (no layout jump). */
.sv-loading { width: 100%; height: 170px; border-radius: 12px; margin: 4px 0 14px; background: var(--bg-raised); }
.sv-placeholder { width: 100%; min-height: 90px; display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--bg-raised); border: 1px dashed var(--line); border-radius: 12px; color: var(--text-dim); font-size: 13px; font-weight: 700; padding: 16px; margin: 4px 0 14px; }
.av-yes { color: #3fcf6a; }
.av-likely { color: #6fa8c7; }
.av-no { color: #e0564a; }
.av-unk { color: var(--text-dim); }

/* ---------- Home: Schedule a Pickup CTA ---------- */
.schedule-cta { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  background: var(--signal); color: #fff; border: none; border-radius: 12px; padding: 18px; font-size: 15px; font-weight: 900;
  font-family: inherit; margin-bottom: 22px; box-shadow: 0 4px 14px rgba(226,96,72,.35); }
.schedule-cta .ic { width: 26px; height: 26px; }

/* ---------- Pickup wizard ---------- */
.wizard { position: fixed; inset: 0; z-index: 1300; background: var(--bg); display: none; flex-direction: column; }
.wizard.is-open { display: flex; }
.wiz-head { display: flex; align-items: center; justify-content: space-between; padding: max(14px, env(safe-area-inset-top)) 16px 14px; border-bottom: 1px solid var(--line); }
.wiz-title { font-size: 19px; font-weight: 900; }
.wiz-x { background: var(--bg-raised); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 8px; display: flex; }
.wiz-x .ic { width: 22px; height: 22px; }
.wiz-body { flex: 1; overflow-y: auto; padding: 22px 18px; }
.wiz-intro p { font-size: 18px; line-height: 1.55; margin: 0 0 16px; }
.wiz-intro a, .wiz-note a, .wiz-done a { color: var(--accent); font-weight: 800; }
.wiz-field { display: block; margin-bottom: 18px; }
.wiz-label { display: block; font-size: 14px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); margin-bottom: 8px; }
.wiz-field input { width: 100%; background: var(--bg-raised); border: 1px solid var(--line); color: var(--text); border-radius: 12px; padding: 16px; font-size: 18px; font-family: inherit; }
.wiz-sub { font-size: 17px; font-weight: 800; margin: 0 0 14px; }
.wiz-line { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--bg-raised); border: 2px solid var(--line); color: var(--text); border-radius: 12px;
  padding: 14px; font-size: 16px; font-weight: 700; font-family: inherit; margin-bottom: 8px; }
.wiz-line.is-sel { border-color: #fff; background: color-mix(in srgb, var(--accent) 22%, var(--bg-raised)); }
.wiz-line-sw { width: 18px; height: 18px; border-radius: 5px; flex: none; }
.wiz-check { display: flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 700; margin-bottom: 18px; }
.wiz-check input { width: 26px; height: 26px; accent-color: var(--accent); }
.wiz-summary { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 12px; padding: 6px 14px; margin-bottom: 16px; }
.ws-row { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line); font-size: 16px; }
.ws-row:first-child { border-top: none; }
.wiz-note { font-size: 15px; line-height: 1.5; color: var(--text-dim); }
.wiz-foot { display: flex; gap: 10px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.wiz-foot .btn-primary { flex: 1; }
.btn-ghost { flex: none; background: var(--bg-raised); border: 1px solid var(--line); color: var(--text); border-radius: 14px; padding: 16px 22px; font-size: 17px; font-weight: 800; font-family: inherit; }
.wiz-done { text-align: center; padding-top: 30px; }
.wiz-check-art { width: 70px; height: 70px; margin: 0 auto 14px; border-radius: 50%; background: var(--ok); display: flex; align-items: center; justify-content: center; }
.wiz-check-art .ic { width: 40px; height: 40px; stroke-width: 2.6; color: #fff; }
.wiz-done h2 { font-size: 23px; margin: 4px 0 10px; }
.wiz-done p { font-size: 17px; line-height: 1.5; color: var(--text-dim); }

/* ---------- Saved Routes (Home) ---------- */
/* Home sections: My Routes + Saved Trips */
/* Home sub-tabs (Saved / Learn More / Feedback / Blog / App Info) */
.home-tabs { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 18px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.home-tabs::-webkit-scrollbar { display: none; }
.ht-tab { flex: none; background: var(--bg-raised); border: 1px solid var(--line); color: var(--text); border-radius: 999px; padding: 10px 18px; font-size: 15px; font-weight: 900; font-family: inherit; white-space: nowrap; }
.ht-tab.is-active { background: var(--accent); border-color: #fff; color: #fff; }
.home-panel { display: none; }
.home-panel.is-active { display: block; }

/* Info / link cards shared by Learn More, Blog, App Info */
.info-card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px; margin-bottom: 12px; }
.ic-title { font-size: 21px; font-weight: 900; color: #fff; margin: 0 0 10px; }
.ic-sub { font-size: 17px; font-weight: 900; color: #fff; margin: 0 0 8px; }
.ic-version { font-size: 14px; font-weight: 800; color: var(--accent); margin: -4px 0 10px; }
.info-card p { font-size: 16px; line-height: 1.55; margin: 0 0 10px; }
.info-card p:last-child { margin-bottom: 0; }
.ic-fine { font-size: 13px; color: var(--text-dim); }
.link-card { display: flex; align-items: center; gap: 12px; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-bottom: 10px; text-decoration: none; color: var(--text); }
.lc-main { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.lc-main b { text-wrap: pretty;  font-size: 15px; font-weight: 900; color: #fff; }
.lc-sub { font-size: 13px; font-weight: 700; color: var(--text-dim); }
.lc-go { font-size: 20px; font-weight: 900; color: var(--accent); line-height: 1; }

/* Feedback form */
.fb-toggle { display: flex; gap: 8px; margin-bottom: 12px; }
.fb-half { flex: 1; min-width: 0; background: var(--bg-raised); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 12px 6px; font-size: 12.5px; font-weight: 800; font-family: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-half.is-active { background: var(--accent); border-color: #fff; color: #fff; }
.fb-help { font-size: 15px; line-height: 1.5; color: var(--text); margin: 0 0 12px; }
.fb-msg { width: 100%; box-sizing: border-box; background: var(--bg); border: 1px solid var(--line); color: var(--text); border-radius: 12px; padding: 14px; font-size: 16px; font-family: inherit; line-height: 1.5; resize: vertical; margin-bottom: 12px; }
.fb-alt { font-size: 14px; font-weight: 700; color: var(--text-dim); margin: 12px 0 0; }
.fb-alt a, .info-card a, .link-card a { color: var(--accent); }
/* Guided feedback wizard */
.fb-back { background: none; border: none; color: var(--accent); font-size: 16px; font-weight: 900; font-family: inherit; padding: 4px 0; margin-bottom: 4px; }
.fb-trail { font-size: 13px; font-weight: 800; color: var(--text-dim); margin: 0 0 12px; line-height: 1.4; }
.fb-cats { display: flex; flex-direction: column; gap: 10px; }
.fb-cat { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; background: var(--bg-raised); border: 1px solid var(--line); color: #fff; border-radius: 14px; padding: 16px 18px; font-size: 17px; font-weight: 900; font-family: inherit; }
.fb-prompt { font-size: 17px; font-weight: 900; color: #fff; margin: 0 0 12px; line-height: 1.4; }
.fb-prompt.fb-sub { font-size: 15px; margin-top: 16px; }
.fb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.fb-chip { background: var(--bg-raised); border: 1px solid var(--line); color: var(--text); border-radius: 999px; padding: 10px 16px; font-size: 15px; font-weight: 800; font-family: inherit; }
.fb-chip.is-on { background: var(--accent); border-color: #fff; color: #fff; }
.fb-dtl { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 800; color: var(--text); margin-bottom: 12px; }
.fb-dt { background: var(--bg); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 12px; font-size: 16px; font-family: inherit; }
.fb-dt::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }
.fb-step { margin-bottom: 14px; }
/* Line / stop pickers in feedback: rectangular, left-justified, brand-colored
   to match the List section. */
.fb-line-list { display: flex; flex-direction: column; gap: 8px; }
.fb-line { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; font-family: inherit; }
.fb-line .fb-sw { width: 14px; height: 14px; border-radius: 4px; flex: none; background: var(--c); }
.fb-line-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fb-line-name { text-wrap: pretty;  font-size: 16px; font-weight: 800; color: var(--text); line-height: 1.25; }
.fb-line-sub { font-size: 12px; font-weight: 700; color: var(--text-dim); }
.fb-line .fb-check { width: 22px; height: 22px; flex: none; border-radius: 6px; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; color: transparent; font-size: 15px; font-weight: 900; }
.fb-line.is-on { border-color: var(--c); background: color-mix(in srgb, var(--c) 20%, var(--bg-raised)); }
.fb-line.is-on .fb-line-name { color: #fff; }
.fb-line.is-on .fb-check { background: var(--c); border-color: var(--c); color: #fff; }

/* Avoid 1-2 word orphans on the last line of explanatory copy app-wide. */
.coach-title, .info-card p, .ic-fine, .lc-sub, .fb-help, .fb-prompt, .hs-help,
.placeholder-note, .connect-note, .dp-foot, .wiz-note { text-wrap: pretty; }
/* First-session coach overlay - explains the bottom nav on first open */
.coach { position: fixed; inset: 0; z-index: 1500; background: rgba(8,10,14,.84);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 16px calc(86px + env(safe-area-inset-bottom)); }
.coach-card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 18px; padding: 20px 20px 16px; box-shadow: 0 14px 40px rgba(0,0,0,.6); }
.coach-title { font-size: 23px; font-weight: 900; color: #fff; margin: 0 0 6px; }
.coach-intro { font-size: 15px; line-height: 1.5; color: var(--text); margin: 0 0 14px; text-wrap: pretty; }
.coach-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.coach-list li { display: flex; align-items: baseline; gap: 10px; }
.coach-k { flex: none; min-width: 96px; font-size: 15px; font-weight: 900; color: var(--nav-active); }
.coach-v { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.4; text-wrap: pretty; }
.coach-go { width: 100%; }
.coach-arrow { display: flex; justify-content: center; margin-top: 8px; animation: coachBounce 1.1s ease-in-out infinite; }
.coach-arrow svg { width: 30px; height: 30px; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@keyframes coachBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
/* Spotlight the nav above the scrim while the coach is showing */
.bottom-nav.coach-lit { z-index: 1600; box-shadow: 0 0 0 2px var(--accent), 0 -8px 28px rgba(0,0,0,.7); }

.home-sec { margin-bottom: 24px; }
.home-sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.hs-title { text-wrap: pretty;  font-size: 19px; font-weight: 900; color: #fff; }
.hs-dot { width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, #fff 55%, var(--bg)); flex: none; }
.hs-adjust { background: none; border: 1px solid var(--line); color: #fff; border-radius: 9px; padding: 6px 14px; font-size: 14px; font-weight: 900; font-family: inherit; }
.hs-help { font-style: italic; font-size: 13px; font-weight: 600; color: color-mix(in srgb, #fff 70%, var(--bg)); margin: 0 0 12px; }
.home-empty { background: var(--bg-raised); border: 1px dashed var(--line); border-radius: 12px; padding: 16px; }
.home-empty p { margin: 0 0 12px; font-size: 15px; line-height: 1.5; color: #fff; text-wrap: pretty; }
/* Solid, clearly-a-button add/save action (the app's green = add/save). */
.home-add { width: 100%; background: var(--ok); color: #fff; border: none; border-radius: 12px;
  padding: 15px 16px; font-size: 15px; font-weight: 900; font-family: inherit; margin-top: 2px;
  box-shadow: 0 3px 10px rgba(17,123,104,.4); }

/* Route card (a whole line): color-filled like the List view's route header,
   so the saved route keeps its color + typography cues. */
.route-card { display: flex; align-items: center; gap: 11px; background: var(--c); border: none;
  border-radius: 12px; padding: 15px 14px; margin-bottom: 9px; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.rc-name { text-wrap: pretty;  flex: 1; min-width: 0; font-size: 17px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.rc-go { font-size: 20px; font-weight: 900; color: #fff; flex: none; line-height: 1; }

/* Trip card (stop to stop on one line) */
.trip-card { display: flex; align-items: center; gap: 11px; background: var(--bg-raised); border: 1px solid var(--line);
  border-left: 6px solid var(--c); border-radius: 12px; padding: 12px 14px; margin-bottom: 9px; cursor: pointer; }
.tc-main { flex: 1; min-width: 0; }
.tc-route { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 900; color: #fff; }
.tc-sw { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.tc-od { font-size: 16px; font-weight: 800; color: #fff; margin-top: 4px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.tc-arrow { color: var(--c); font-weight: 900; }

/* Edit-mode tools (reorder + remove) */
.edit-tools { display: flex; gap: 6px; flex: none; }
.et-btn { width: 38px; height: 38px; border-radius: 9px; background: #0b0d11; border: 1px solid var(--line); color: #fff; font-size: 15px; font-weight: 900; font-family: inherit; display: flex; align-items: center; justify-content: center; }
.et-btn:disabled { opacity: .35; }
.et-del { border-color: var(--signal); color: var(--signal); }

/* Route picker rows */
.rp-row { display: flex; align-items: center; gap: 11px; width: 100%; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; margin-bottom: 8px; font-family: inherit; }
.rp-tag { margin-left: auto; font-size: 14px; font-weight: 900; color: var(--signal); flex: none; }
.rp-row.is-have { opacity: .55; } .rp-row.is-have .rp-tag { color: #fff; }
.btn-save.is-saved { background: var(--text-dim); }

/* ---------- Trip Planner ---------- */
.planner .tp-fieldrow { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.tp-flabel { width: 96px; flex: none; padding-right: 6px; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); }
.tp-field { flex: 1; text-align: left; background: var(--bg-raised); border: 1px solid var(--line); color: var(--text-dim); border-radius: 11px; padding: 14px 14px; font-size: 16px; font-weight: 700; font-family: inherit; }
.tp-field.is-set { color: var(--text); border-color: var(--accent); }
.tp-remove { flex: none; background: none; border: none; color: var(--text-dim); font-size: 22px; line-height: 1; padding: 0 4px; }
.tp-add { width: 100%; background: none; border: 1px dashed var(--line); color: var(--text); border-radius: 11px; padding: 12px; font-size: 14px; font-weight: 800; margin-bottom: 16px; }
.tp-result { margin-top: 6px; }
.tp-leg { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 8px; }
.tp-leg-head { background: var(--c); color: #fff; font-size: 16px; font-weight: 800; padding: 10px 12px; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.tp-leg-body { padding: 11px 12px; font-size: 15px; line-height: 1.5; }
.tp-transfer { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; padding: 10px 4px 10px 8px; font-size: 14px; font-weight: 800; color: var(--text-dim); }
.tp-tdot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--text-dim); margin-top: 3px; flex: none; }
.tp-transfer .node-conns { flex-basis: 100%; margin-top: 0; }
/* Wait stage between legs: hollow square marker so it reads as "stand by",
   warm sand text (never grey-on-grey). */
.tp-wait { padding-top: 0; }
.tp-wait .tp-tdot { border-radius: 3px; }
/* Walk legs (to/from a typed address) + the "closest you can get" note. */
.tp-walk .tp-leg-head { background: #5a6473; }
.tp-walknote { background: var(--bg-raised); border: 1px solid var(--line); border-left: 5px solid #5a6473; border-radius: 12px; padding: 11px 13px; font-size: 14px; font-weight: 700; line-height: 1.5; margin-bottom: 8px; color: var(--text); }

/* When-controls: Depart at / Arrive by + date + time. */
.tp-when { margin-bottom: 16px; }
.tp-whenmode { display: flex; gap: 6px; margin-bottom: 8px; }
.twm { flex: 1; background: var(--bg-raised); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 12px; font-size: 12.5px; font-weight: 900; font-family: inherit; }
.twm.is-active { background: var(--accent); border-color: #fff; color: #fff; }
.tp-whenrow { display: flex; gap: 8px; }
.tp-dt { flex: 1; min-width: 0; background: var(--bg-raised); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 12px; font-size: 16px; font-weight: 700; font-family: inherit; }
/* Make the native calendar/clock icons white (they default to black = invisible
   on the dark shell) and as large as the box comfortably allows. */
.tp-dt::-webkit-calendar-picker-indicator {
  filter: invert(1); opacity: 1; cursor: pointer;
  width: 26px; height: 26px; transform: scale(1.25); margin-left: 4px;
}

/* Timed itinerary: summary band + per-leg times. */
.tp-summary { background: var(--bg-raised); border: 1px solid var(--accent); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; }
.tp-sum-time { font-size: 22px; font-weight: 900; color: #fff; }
/* Times reconstructed by the plausibility guard carry the hedge on the card
   head too, not only inside the steps (audit, 2026-08-28). */
.tp-sum-est { font-size: 13px; font-weight: 800; color: var(--text-dim); }
.tp-sum-meta { font-size: 13px; font-weight: 700; color: color-mix(in srgb, #fff 72%, var(--bg)); margin-top: 3px; }
.tp-leg-time { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px 0; }
.tpt-board { font-size: 18px; font-weight: 900; color: #fff; }
.tpt-arr { font-size: 13px; font-weight: 800; color: var(--text-dim); }  /* warm sand, never grey-on-grey */

/* Flexible-time popup (rendered into the detail sheet). */
.flex-pop { padding: 4px 2px 8px; }
.flex-ico { width: 42px; height: 42px; border-radius: 50%; background: var(--signal); color: #fff; font-size: 26px; font-weight: 900; display: flex; align-items: center; justify-content: center; margin: 2px 0 12px; }
.flex-msg { font-size: 17px; font-weight: 700; line-height: 1.45; color: #fff; margin: 0 0 18px; }
.flex-actions { display: flex; flex-direction: column; gap: 9px; }
.flex-actions .btn-primary { margin: 0; }
.flex-actions .btn-ghost { width: 100%; }

/* ---------- Stop picker ---------- */
.picker-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 1100; }
.picker-backdrop.is-open { opacity: 1; pointer-events: auto; }
.picker { position: fixed; left: 0; right: 0; bottom: 0; top: 20vh; z-index: 1200; background: var(--bg); border-radius: 18px 18px 0 0; border-top: 1px solid var(--line);
  transform: translateY(100%); transition: transform .26s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; }
/* Mobile: dynamic viewport units track the URL bar / keyboard, so the sheet
   never rides up past the top of the visible screen. */
@supports (height: 1dvh) {
  .picker { top: max(20dvh, env(safe-area-inset-top)); }
}
.picker.is-open { transform: none; }
.picker-head { display: flex; gap: 8px; padding: 14px; border-bottom: 1px solid var(--line); }
.picker-head input { flex: 1; background: var(--bg-raised); border: 1px solid var(--line); color: var(--text); border-radius: 11px; padding: 13px 14px; font-size: 16px; font-family: inherit; }
.picker-close { background: var(--bg-raised); border: 1px solid var(--line); color: var(--text); border-radius: 11px; padding: 0 12px; display: flex; align-items: center; }
.picker-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.picker-item { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-top: 1px solid var(--line); cursor: pointer; }
.pk-sw { width: 16px; height: 16px; border-radius: 5px; flex: none; }
.pk-name { text-wrap: pretty;  font-size: 14px; font-weight: 700; }
.pk-sub { font-size: 12px; font-weight: 700; color: var(--text-dim); }
.pk-pin { width: 16px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--accent); }
.pk-pin .ic { width: 18px; height: 18px; }
.picker-addr .pk-name { color: var(--accent); }
/* My Places in the picker + Settings (2026-08-29). */
.picker-item > span:nth-child(2) { flex: 1; min-width: 0; }
.pk-star { flex: none; background: transparent; border: 0; color: var(--text-dim); font-size: 20px;
  font-family: inherit; cursor: pointer; padding: 4px 6px; }
.pk-star.is-on { color: #e8a3c0; }
.pk-del { flex: none; background: transparent; border: 0; color: var(--text-dim); font-size: 20px;
  font-weight: 900; font-family: inherit; cursor: pointer; padding: 4px 8px; }
.pk-pin-home { color: #7fdcba; }
.picker-group { border-top: 1px solid var(--line); }
.picker-group > details > summary { display: flex; align-items: center; gap: 8px; padding: 13px 14px;
  cursor: pointer; font-size: 14px; font-weight: 800; color: #fff; list-style: none; }
.picker-group > details > summary::-webkit-details-marker { display: none; }
.picker-group > details > summary::after { content: '\203A'; margin-left: auto; color: var(--text-dim); font-weight: 900; }
.picker-group > details[open] > summary::after { content: '\2304'; }
.picker-nested { list-style: none; margin: 0; padding: 0; }
.mp-row { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-top: 1px solid var(--line); }
.mp-lab { flex: none; font-size: 13px; font-weight: 900; color: #fff; min-width: 52px; }
.mp-star { color: #e8a3c0; min-width: 20px; }
.mp-name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--text);
  line-height: 1.35; text-wrap: pretty; }
.mp-del { flex: none; background: transparent; border: 0; color: var(--text-dim); font-size: 19px;
  font-weight: 900; font-family: inherit; cursor: pointer; padding: 2px 7px; }
.mp-adds { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.mp-add { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 999px;
  color: #fff; font-size: 12.5px; font-weight: 800; font-family: inherit; cursor: pointer; padding: 7px 12px; }
.picker-place .pk-sub { white-space: normal; }
.picker-loading { padding: 16px 14px; font-size: 14px; font-weight: 700; color: var(--text-dim); border-top: 1px solid var(--line); }

/* ---------- Lens tabs ---------- */
/* Scrollable so 5 tabs stay big and readable; swipe horizontally. */
.lens-tabs { display: flex; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.lens-tabs::-webkit-scrollbar { display: none; }
/* All tabs share the normal text color; the selected one is marked by the accent
   fill PLUS a white ring floating a few px off the pill ("you've chosen this"). */
.lens-tab { position: relative; flex: none; white-space: nowrap; background: var(--bg-raised); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 12px 16px; font-size: 16px; font-weight: 900; }
.lens-tab.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.lens-tab.is-active::after { content: ''; position: absolute; inset: -5px; border: 2px solid #fff; border-radius: 14px; pointer-events: none; }

.lens-panel { display: none; flex: 1; min-height: 0; position: relative; }
.lens-panel.is-active { display: flex; flex-direction: column; }

/* ---------- Map + side panel ---------- */
.map-split { position: relative; flex: 1; min-height: 0; }
#map { position: absolute; inset: 0; background: var(--bg); }
.leaflet-container { background: var(--bg) !important; font-family: inherit; }

/* "Near me" crosshair on the map (replaces the old Near Me tab) */
.map-locate {
  position: absolute; z-index: 1010; right: 12px; bottom: 12px;
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--bg-raised); border: 1px solid var(--line); color: var(--accent);
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.45);
}
.map-locate .ic { width: 26px; height: 26px; }
.map-locate.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
/* The classic blue location dot. It was a SPAN with no display:block, so the
   sizes were ignored and the white border rendered as a bare oval (Cris,
   2026-08-28, on his phone). */
.user-dot { display: block; width: 18px; height: 18px; border-radius: 50%; background: #2a8cff;
  border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(42,140,255,.28), 0 1px 8px rgba(0,0,0,.55);
  animation: userPulse 2.4s ease-in-out infinite; }
@keyframes userPulse { 0%,100% { box-shadow: 0 0 0 6px rgba(42,140,255,.28), 0 1px 8px rgba(0,0,0,.55); }
  50% { box-shadow: 0 0 0 11px rgba(42,140,255,.12), 0 1px 8px rgba(0,0,0,.55); } }
.near-kinds { display: flex; gap: 6px; padding: 8px 10px; background: var(--bg-raised); border-bottom: 1px solid var(--line); }
.near-kinds .tp-pref { flex: 1 1 0; padding: 8px 6px; }
/* Demo-mode simulated shuttles (?demo=1): route-colored dot with a white ring
   and a soft pulse so it reads as "moving vehicle", not another stop. */
.demo-bus { display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--c);
  border: 3px solid #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.25); animation: demo-bus-pulse 1.8s ease-in-out infinite; }
@keyframes demo-bus-pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(255,255,255,.25); } 50% { box-shadow: 0 0 0 8px rgba(255,255,255,.08); } }
.demo-badge { position: absolute; top: 12px; right: 12px; z-index: 800; background: #e26048; color: #fff;
  font-weight: 900; font-size: 12px; letter-spacing: .4px; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; border: 2px solid #fff; pointer-events: none; }
/* Stop-card "Next Shuttle (Demo)" arrivals board: rows reuse the live-strip
   look (white text, green time, pulsing dot). */
.demo-eta .dp-live-row { padding: 6px 0; font-size: 14px; color: #fff; }
.demo-eta .dp-live-dot { display: inline-block; vertical-align: baseline; margin-right: 2px; }

/* Conventional zoom in/out control (top-left, under the header) - large, dark,
   high-contrast for elderly riders. Overrides Leaflet's small white default. */
/* Lift the dark basemap a bit (streets/landmarks read better for older riders)
   and make the overlaid street-name labels brighter and crisper. */
.basemap-tiles { filter: brightness(1.45) contrast(0.92) saturate(1.05); }
.basemap-labels { filter: brightness(1.7) contrast(1.1); }
.leaflet-control-zoom.leaflet-bar { margin: 0 12px 74px 0; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.45); overflow: hidden; }
.leaflet-control-zoom a {
  width: 46px; height: 46px; line-height: 46px; font-size: 28px; font-weight: 700;
  background: var(--bg-raised); color: var(--text); border: none;
}
.leaflet-control-zoom a:hover { background: var(--line); color: #fff; }
.leaflet-control-zoom a.leaflet-disabled { background: var(--bg-raised); color: var(--text-dim); opacity: .5; }
.leaflet-control-zoom-in { border-bottom: 1px solid var(--line) !important; }

/* Nearest-stops list overlay (map <-> list toggle) */
.near-list {
  position: absolute; z-index: 1020; left: 10px; right: 10px; bottom: 74px;
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 8px 28px rgba(0,0,0,.5);
}
.near-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: var(--bg-raised); border-bottom: 1px solid var(--line); }
.near-title { font-size: 14px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; }
.near-close { background: none; border: none; color: var(--text); display: flex; padding: 4px; }
.near-close .ic { width: 20px; height: 20px; }
.near-row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-top: 1px solid var(--line); cursor: pointer; }
.near-row:first-child { border-top: none; }
.near-swatch { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.near-name { text-wrap: pretty;  font-size: 14px; font-weight: 700; }
.near-sub { font-size: 12px; font-weight: 700; color: var(--text-dim); }
.near-dist { margin-left: auto; font-size: 13px; font-weight: 900; color: var(--accent); white-space: nowrap; }

/* ---------- Left rail: the one place you choose what the map shows ----------
   Mobile-first: an off-canvas drawer with a permanent grab tab at the screen's
   left edge; docked open from 900px up. Replaces the old horizontally-scrolling
   system pills and the bottom-left filter box (Cris, 2026-08-17). */
.map-rail { position: absolute; z-index: 1060; top: 0; bottom: 0; left: 0;
  width: var(--rail-w); max-width: 84vw; display: flex; pointer-events: none;
  transform: translateX(-100%); transition: transform .22s ease; }
.map-rail.is-open { transform: none; }
.rail-scroll { pointer-events: auto; flex: 1; min-width: 0; overflow-y: auto; overscroll-behavior: contain;
  background: rgba(11,13,17,.97); border-right: 1px solid var(--line);
  padding: 10px 0 calc(28px + env(safe-area-inset-bottom)); box-shadow: 8px 0 26px rgba(0,0,0,.55); }
.rail-tab { pointer-events: auto; position: absolute; left: 100%; top: 96px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--signal); color: #fff; border: 2px solid #fff; border-left: none;
  border-radius: 0 14px 14px 0; padding: 14px 7px; cursor: pointer; font-family: inherit;
  font-size: 11px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase;
  box-shadow: 3px 3px 12px rgba(0,0,0,.5); }
.rail-tab .ic { width: 20px; height: 20px; }
.rail-tab-txt { writing-mode: vertical-rl; }
.map-rail.is-open .rail-tab { background: var(--bg-raised); }

.rail-sec { border-bottom: 1px solid var(--line); padding: 6px 0 10px; }
.rail-sec:last-child { border-bottom: none; }
.rail-head, .rail-sum { display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; font-size: 12px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase;
  color: var(--text-dim); }
.rail-sum { cursor: pointer; list-style: none; }
.rail-sum::-webkit-details-marker { display: none; }
.rail-caret { font-size: 15px; transition: transform .15s; }
details[open] > .rail-sum .rail-caret { transform: rotate(90deg); }
.rail-group { display: flex; flex-direction: column; gap: 4px; padding: 2px 8px; }
.rail-indent { padding-left: 18px; }

/* Every rail line item is a CHECKBOX row: tap on, tap off. Big tap target,
   never grey-on-grey. */
.rail-row { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: rgba(255,255,255,.04); border: 1.5px solid transparent; color: var(--text);
  border-radius: 10px; padding: 9px 10px; font-family: inherit; font-size: 14px; font-weight: 800;
  cursor: pointer; min-height: 44px; }
.rail-row .rr-box { flex: none; width: 19px; height: 19px; border-radius: 6px; border: 2px solid var(--text-dim);
  display: flex; align-items: center; justify-content: center; }
.rail-row .rr-box svg { width: 14px; height: 14px; fill: none; stroke: #0b0d11; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.rail-row.is-on { border-color: #fff; background: color-mix(in srgb, var(--accent) 32%, #0b0d11); color: #fff; }
.rail-row.is-on .rr-box { background: #fff; border-color: #fff; }
/* Some, not all: a dash rather than a tick. */
.rail-row.is-part { border-color: color-mix(in srgb, #fff 55%, transparent); }
.rail-row.is-part .rr-box { background: color-mix(in srgb, #fff 62%, transparent); }
.rail-row .rr-txt { flex: 1; min-width: 0; line-height: 1.2; text-wrap: pretty; }
.rail-row .rr-meta { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  font-size: 12px; font-weight: 900; color: var(--text-dim); }
/* Fixed columns: the LIVE badge and the count each keep their own slot, so a
   long line name can never shove them out of line. Cris, 2026-08-19. */
.rr-live-slot { flex: none; width: 34px; display: flex; justify-content: flex-end; }
.rr-n { flex: none; min-width: 20px; text-align: right; font-variant-numeric: tabular-nums; }
.rail-row.is-on .rr-meta { color: #fff; }
.rail-row .rr-sw { width: 13px; height: 13px; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.18); }
.rail-row .rr-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--sc, #fff); }
.rr-live { font-size: 9px; font-weight: 900; letter-spacing: .5px; padding: 1px 5px; border-radius: 5px;
  background: var(--ok); color: #fff; }
.rail-count { font-size: 11px; font-weight: 800; color: var(--text-dim); text-transform: none; letter-spacing: 0; }
.rail-clear { width: 100%; margin-top: 4px; background: none; border: 1px dashed var(--text-dim); color: var(--text);
  border-radius: 9px; padding: 8px; font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.rail-note { margin: 6px 2px 0; font-size: 12px; font-weight: 700; line-height: 1.35; color: var(--text-dim); text-wrap: pretty; }

/* Everything about shuttles hangs off the one "Shuttles on the map" switch, so
   the sub-tree gets a guide line down its left edge and the whole block reads as
   "these belong to that". Added for Cris 2026-08-19. */
.rail-nest { margin: 4px 0 0 17px; padding-left: 9px; border-left: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); }
.rail-nest .rail-group { padding: 2px 8px 2px 0; }
.rail-nest .rail-sum { padding-left: 2px; padding-right: 6px; }
.rail-sublabel { margin: 9px 0 3px 2px; font-size: 11px; font-weight: 900; letter-spacing: .6px;
  text-transform: uppercase; color: var(--text-dim); }
.rail-sublabel:first-child { margin-top: 2px; }
.rail-off { margin: 8px 10px 2px; color: #fff; }

/* A system row carries its own caret, so it both filters (the checkbox) and
   opens (the caret) without one gesture stealing the other. Its lines sit one
   level deeper behind their own guide line. Cris, 2026-08-19. */
.rail-sysrow { display: flex; align-items: stretch; gap: 4px; }
.rail-sysrow .rail-row { flex: 1; min-width: 0; }
.rail-syscaret { flex: none; width: 30px; background: rgba(255,255,255,.04); border: 1.5px solid transparent;
  border-radius: 10px; color: var(--text); font: 900 17px/1 Lato, system-ui, sans-serif; cursor: pointer;
  transition: transform .15s; }
.rail-syscaret.is-open { transform: rotate(90deg); background: color-mix(in srgb, var(--accent) 32%, #0b0d11); color: #fff; }
.rail-lines { margin: 4px 0 6px 14px; padding-left: 9px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.rail-lines .rail-row { font-size: 12.5px; padding: 8px 9px; }
/* The LIVE badge is an attribute of the row, not a word in the name: never let
   it wrap onto a line of its own. */
.rr-live { white-space: nowrap; }
.rail-clear-all { margin: 10px 8px 2px; width: calc(100% - 16px); border-style: solid; border-color: var(--signal); color: #fff; }

/* Two halves, one tap apart. Buses used to sit at the bottom of a long scroll,
   so you could not see them and the trains at the same time. Cris, 2026-08-19. */
.rail-tabs { display: flex; gap: 6px; padding: 4px 8px 10px; position: sticky; top: -10px; z-index: 3;
  background: rgba(11,13,17,.97); }
.rail-tabs { gap: 5px; }
.rail-tabbtn { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05); border: 1.5px solid transparent; border-radius: 11px; padding: 11px 4px;
  color: var(--text); font: 900 13px/1.15 Lato, system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.rail-tabbtn.is-on { background: color-mix(in srgb, var(--accent) 38%, #0b0d11); border-color: #fff; color: #fff; }

/* "Clear all" / "Select all" sits on the list's own label. */
.rail-sublabel { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
/* Operator group headers in the Other tab: identity dot + name, left-aligned. */
.rail-oplabel { justify-content: flex-start; align-items: center; gap: 7px; margin-top: 12px; }
.rail-oplabel .rr-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--sc, #fff); }
.rail-uptop { margin-top: 6px; border-style: solid; border-color: var(--accent); color: #fff; }
/* The live-tracking option refines the two cost options above it, so it sits one
   step in under them rather than reading as a third, unrelated choice. */
.rail-refine { position: relative; margin-left: 16px; padding-left: 10px;
  border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.rail-alltoggle { background: none; border: none; padding: 0; color: var(--nav-active);
  font: 900 11px/1 Lato, system-ui, sans-serif; letter-spacing: .4px; text-transform: uppercase; cursor: pointer; }

/* ONE scroller. The pick lists used to scroll inside the rail, which scrolls
   inside the screen: two nested scrollers meant the last few systems sat under
   the bottom nav and a normal swipe would not bring them up. Cris, 2026-08-19. */
.rail-list { padding-right: 4px; }
.rail-busfilter { padding: 2px 8px 6px; }
.rail-busfilter input { width: 100%; box-sizing: border-box; background: rgba(255,255,255,.06);
  border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 11px; color: #fff;
  font: 800 14px/1 Lato, system-ui, sans-serif; }
.rail-busfilter input::placeholder { color: var(--text-dim); }
.rail-busfilter input:focus { outline: none; border-color: var(--nav-active); }

/* A bus row names the route AND where it runs, from the published headsigns. */
.rr-num { font-size: 14px; font-weight: 900; color: #fff; }
.rr-ends { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 700; color: var(--text-dim);
  line-height: 1.25; text-wrap: pretty; }
.rail-row.is-on .rr-ends { color: #edf3f7; }
.rr-op { display: block; margin-top: 3px; font-size: 11px; font-weight: 800; color: var(--nav-active); line-height: 1.25; }
.rail-row.is-on .rr-op { color: #fff; }
.rail-syscaret.is-go { font-size: 15px; }
.rail-sub { margin-top: 4px; }

/* A drawn NJ Transit bus line announces itself, and the same badge hides it. */
.busline-badge { position: absolute; z-index: 1030; top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; background: #587e95; color: #fff; border: 2px solid #fff;
  border-radius: 999px; padding: 8px 8px 8px 14px; font-family: inherit; font-size: 14px; font-weight: 900;
  box-shadow: 0 4px 16px rgba(0,0,0,.5); cursor: pointer; }
.blb-x { background: rgba(0,0,0,.35); border-radius: 999px; padding: 4px 10px; font-size: 12px; }
.bus-stop-pin { display: block; width: 11px; height: 11px; border-radius: 50%; background: var(--bc);
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.6); }

/* "?" tip button, top-right of the map (opens the one-time map tip again). */
.map-tip-btn { position: absolute; z-index: 1010; top: 12px; right: 12px; width: 40px; height: 40px;
  border-radius: 50%; background: var(--bg-raised); border: 1px solid var(--line); color: var(--text);
  font: 900 20px/1 var(--font); box-shadow: 0 4px 14px rgba(0,0,0,.45); cursor: pointer; }
.map-panel.is-open ~ .map-tip-btn { display: none; }

/* One-time map tip modal */
.tip-modal { position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,.72);
  display: flex; align-items: center; justify-content: center; padding: 22px; }
.tip-card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 18px;
  padding: 22px 20px; max-width: 420px; width: 100%; box-shadow: 0 18px 50px rgba(0,0,0,.6); }
.tip-title { margin: 0 0 12px; font-size: 23px; font-weight: 900; color: #fff; text-wrap: balance; }
.tip-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tip-list li { display: flex; gap: 11px; align-items: flex-start; }
.tip-n { flex: none; width: 25px; height: 25px; border-radius: 50%; background: var(--accent); color: #fff;
  font-size: 14px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.tip-v { flex: 1; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--text); text-wrap: pretty; }
/* Connection-point pins (diamonds, distinct from round route dots) */
.conn-pin { display: block; width: 14px; height: 14px; transform: rotate(45deg); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
/* Rail / light-rail station markers. Were 14px crosses, which read as noise at
   statewide zoom (Cris, 2026-08-25): now the railway convention, a small hollow
   ring in the line's color. Distinct from road stops (filled dots) and quiet. */
.rail-x { display: block; width: 9px; height: 9px; --xc: #ece6da; border-radius: 50%;
  border: 2px solid var(--xc); background: #0e1116; box-shadow: 0 0 0 1px rgba(0,0,0,.6); }

/* Station / stop name labels, shown when a line is tapped or focused
   (2026-08-29). Near-white text on a dark pill, keyed to the line's color. */
.stn-label { position: absolute; left: 9px; top: 0; transform: translateY(-50%);
  white-space: nowrap; background: rgba(11,13,17,.9); color: #f2f5f9;
  font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 7px 4px;
  border-radius: 5px; border-left: 3px solid var(--lc, #7a8ea3);
  box-shadow: 0 1px 4px rgba(0,0,0,.5); pointer-events: none; }
/* Tappable labels open the station's card, same as its pin (2026-08-29). */
.stn-label-anchor.is-tap .stn-label { pointer-events: auto; cursor: pointer; }
/* 28px station pin hit area, ring centered: the bare 9px ring was
   untappable on a phone (build 22 ride test, 2026-08-29). */
.rail-pin { display: flex; align-items: center; justify-content: center; background: none; border: 0; }

/* ---------- Route panel: system card -> route home card -> one direction ----------
   Back and close both live INSIDE the header now, so nothing on the map can
   cover them (the old floating X sat under the system pills). Cris, 2026-08-17. */
.map-panel { position: absolute; z-index: 1100; top: 0; right: 0; bottom: 0;
  width: min(100%, 400px); display: none; flex-direction: column; min-height: 0;
  background: var(--bg-panel); border-left: 1px solid var(--line); box-shadow: -8px 0 28px rgba(0,0,0,.45); }
.map-panel.is-open { display: flex; }
.map-panel-head { display: flex; align-items: center; gap: 8px; padding: 11px 10px; min-height: 64px;
  background: var(--rc, var(--signal)); box-shadow: inset 0 0 0 3px #fff; }
.map-panel-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 17px; font-weight: 900; line-height: 1.2;
  color: var(--rt, #fff);   /* near-black on a light line color, white on a dark one */
  text-align: center; text-wrap: balance;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.panel-back, .panel-close { flex: none; width: 44px; height: 44px; border-radius: 12px;
  border: 2px solid #fff; color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; background: rgba(0,0,0,.34); }
.panel-close { background: rgba(190,52,52,.62); }
.panel-back .ic, .panel-close .ic { width: 24px; height: 24px; stroke-width: 2.6; }
.panel-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }


/* Grab handle: only shown in the phone bottom-sheet layout. */
.panel-grab { display: none; width: 46px; height: 5px; border-radius: 3px; background: var(--line);
  border: none; margin: 8px auto 4px; flex: none; cursor: pointer; }

/* Phones: the route panel is a bottom sheet, so the map (and the direction the
   route is highlighted in) stays visible above it. Cris, 2026-08-17. */
@media (max-width: 899px) {
  .map-panel { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 58%;
    border-left: none; border-top: 1px solid var(--line); border-radius: 18px 18px 0 0;
    box-shadow: 0 -12px 32px rgba(0,0,0,.6); overflow: hidden; }
  .map-panel.is-tall { height: calc(100% - 8px); }
  .panel-grab { display: block; }
  .map-panel-head { min-height: 56px; padding: 8px 10px 11px; }
  .panel-back, .panel-close { width: 42px; height: 42px; }
}

/* --- system card (a service with more than one route) --- */
.sys-card { padding: 14px; }
.sc-lede { font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--text); margin: 0 0 14px; text-wrap: pretty; }
.sc-routes { display: flex; flex-direction: column; gap: 8px; }
.sc-route { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  background: var(--bg-raised); border: 1px solid var(--line); border-left: 6px solid var(--c);
  border-radius: 12px; padding: 12px 12px; font-family: inherit; color: var(--text); }
.sc-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 900; color: #fff; line-height: 1.25; text-wrap: pretty; }
.sc-meta { display: block; font-size: 12px; font-weight: 800; color: var(--text-dim); margin-top: 3px; }
.sc-go { flex: none; font-size: 20px; font-weight: 900; color: var(--text-dim); }

/* --- route home card --- */
.rc { padding: 10px 0 20px; }
.rc-sys { display: flex; align-items: center; gap: 8px; padding: 0 14px 8px; }
.rc-sys-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 900; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-dim); }
.rc-web { flex: none; display: inline-flex; align-items: center; gap: 5px; background: var(--accent);
  color: #fff; border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 900; text-decoration: none; }

.rc-eyebrow { margin: 0 14px 8px; font-size: 12px; font-weight: 900; letter-spacing: .7px;
  text-transform: uppercase; color: var(--text-dim); }

/* One dense strip of facts, wrapped, so the whole card reads without scrolling. */
/* The route card's facts, and its connections, share ONE frame: a bordered box
   of equal rows, label left in sand, value right in white, hairline dividers.
   Replaced seven rounded pills of seven different widths that wrapped into
   ragged rows and left a lone "Curb pickup" orphan on the last one.
   Cris, 2026-08-19: "take it away". */
.rc-facts { margin: 0 14px 12px; padding: 0; border: 1px solid var(--line); border-radius: 12px;
  background: var(--bg-raised); overflow: hidden; }
.rc-fact { display: flex; align-items: baseline; gap: 12px; padding: 7px 12px;
  border-top: 1px solid var(--line); }
.rc-fact:first-child { border-top: none; }
.rc-fact dt { flex: none; width: 104px; font-size: 12.5px; font-weight: 800; color: var(--text-dim);
  line-height: 1.3; }
.rc-fact dd { flex: 1; min-width: 0; margin: 0; text-align: right; font-size: 13.5px; font-weight: 900;
  color: #fff; line-height: 1.3; text-wrap: pretty; }
/* Line color stays attached to a connection's name without becoming a chip. */
.rc-cdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px;
  vertical-align: 1px; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.rc-sep { color: var(--text-dim); }
/* Connections: named services are rows like every other line list in the app;
   bus numbers stay a compact strip because there can be a dozen. */
.rc-conns { margin: 0 14px 14px; }
.rc-cnk { font-size: 11px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; color: var(--text-dim); }
.rc-cnk-head { margin: 12px 2px 6px; }
.rc-conn-num { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg-raised); }
.rc-conn-num .rc-cnk { flex: none; }
.rc-conn-num .rc-nums { width: 100%; }
.rc-nums { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 5px 10px; justify-content: flex-start; }
/* These chips are <button>s: without a background reset the UA default paints
   them light grey under the white number, illegible on dark (Cris's phone,
   2026-08-28). Same slate identity block as .svc-row .rr-num everywhere else. */
.rc-nums .rc-num-tap { border: 0; cursor: pointer; font-family: inherit;
  background: #587e95; border-radius: 6px; padding: 4px 8px; }
.rc-conn-list { display: flex; flex-direction: column; gap: 5px; }
.rc-conn-row { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 11px; padding: 10px 11px;
  color: #fff; font-family: inherit; font-size: 14px; font-weight: 800; }
.rc-conn-row[data-connroute], .rc-conn-row[data-rcbus] { cursor: pointer; }
.rc-conn-name { flex: 1; min-width: 0; line-height: 1.25; text-wrap: pretty; }
.rc-conn-go { flex: none; font-size: 18px; font-weight: 900; color: var(--text-dim); }

/* The route overview says which way it is reading, and can be flipped. */
.rd-head { display: flex; align-items: center; gap: 10px; padding: 0 14px 8px; }
.rd-way { flex: 1; min-width: 0; font-size: 13px; font-weight: 900; color: #fff; line-height: 1.25;
  text-wrap: pretty; }
.rd-flip { flex: none; background: var(--bg-raised); border: 1px solid var(--line); color: #fff;
  border-radius: 18px; padding: 6px 13px; font: 900 12px/1 Lato, system-ui, sans-serif; cursor: pointer; }

/* "Route Map" sits beside "Website" so it needs no scrolling. */
.rc-web-map { border: none; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 6px; }
.rc-web-map .ic { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }

/* "You are looking at one line" chip above the Connections results. */
/* The services switch, repeated on the results. */
.tp-svc-inline { display: flex; gap: 6px; margin: 10px 0 4px; }
.tp-svc-inline .fb-half { flex: 1; min-width: 0; }

/* Preference chips (planner form + results). Buttons get an explicit dark
   background: the UA default is light and would sit light-on-light here. */
.tp-prefwrap { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.tp-prefwrap + .tp-prefwrap { margin-top: 2px; }
/* Planner Filters: one collapsed row; open = a vertical left-justified
   option list with the sliders inside (Cris, 2026-08-29: the chip cloud
   took half the screen). */
.tp-filters { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-raised); margin: 10px 0; }
.tp-filters summary { display: flex; align-items: center; gap: 9px; padding: 13px; cursor: pointer;
  list-style: none; font-size: 14px; font-weight: 900; color: var(--text); }
.tp-filters summary::-webkit-details-marker { display: none; }
.tp-filters summary .ic { flex: none; }
.tpf-sum { margin-left: auto; text-align: right; font-size: 12px; font-weight: 700;
  color: color-mix(in srgb, #fff 72%, var(--bg)); }
.tpf-caret { flex: none; font-size: 19px; line-height: 1; transition: transform .15s; }
.tp-filters[open] .tpf-caret { transform: rotate(90deg); }
.tpf-body { display: flex; flex-direction: column; padding: 0 13px 13px; }
.tpf-h { margin: 10px 0 2px; font-size: 11px; font-weight: 900; letter-spacing: .8px;
  text-transform: uppercase; color: color-mix(in srgb, #fff 66%, var(--bg)); }
.tpf-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  text-align: left; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.08);
  border-radius: 0; color: var(--text); font: 800 14px/1.3 Lato, system-ui, sans-serif;
  padding: 11px 2px; cursor: pointer; }
.tpf-body .tpf-row:last-of-type { border-bottom: 0; }
.tpf-row .tpf-c { color: var(--ok); font-size: 15px; font-weight: 900; }
.tpf-row.is-on .tpf-k { color: #fff; }
.tp-pref { flex: 1 1 auto; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.22);
  border-radius: 999px; padding: 9px 13px; color: var(--text);
  font: 700 12.5px/1.15 Lato, system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.tp-pref.is-on { background: var(--accent); border-color: #fff; color: #fff; font-weight: 900; }
.tp-prefinline { margin: 10px 0 4px; }
.tp-sum-fare { color: #fff; }
/* Bulleted, one clause per line (Cris, 2026-08-29): the pipe-run wrapped
   mid-clause. ul + p forms share the class (the coverage note is a p). */
.tp-farenote { margin: 10px 2px 2px; font-size: 12px; font-weight: 700; color: var(--text-dim); text-wrap: pretty; }
ul.tp-farenote { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; }
ul.tp-farenote li::before { content: '\2022'; margin-right: 7px; color: var(--nav-active); }
.tp-farenote a { color: var(--nav-active); }

.conn-filter { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; padding: 10px 12px;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 12px; }
.cf-dot { flex: none; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.25); }
.cf-txt { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: #fff; line-height: 1.3; text-wrap: pretty; }
.cf-txt b { font-weight: 900; }
.cf-x { flex: none; background: var(--accent); border: none; color: #fff; border-radius: 18px;
  padding: 7px 13px; font: 900 12.5px/1 Lato, system-ui, sans-serif; cursor: pointer; }

/* Live PATH arrivals in a station popup. */
.path-board { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; padding: 22px; }
.pb-card { background: #fff; color: #14181f; border-radius: 14px; padding: 16px 18px; max-width: 340px; width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,.5); }
.pb-x { margin-top: 12px; width: 100%; background: var(--accent); border: none; color: #fff;
  border-radius: 10px; padding: 11px; font: 900 15px/1 Lato, system-ui, sans-serif; cursor: pointer; }

.path-live { margin: 7px 0 5px; display: flex; flex-direction: column; gap: 5px; }
.path-row { display: flex; align-items: center; gap: 7px; }
.path-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.path-to { flex: 1; min-width: 0; font: 800 13px/1.25 Lato, system-ui, sans-serif; color: #14181f; }
.path-in { flex: none; font: 900 13px/1 Lato, system-ui, sans-serif; color: #14181f; }

/* Departure times run VERTICALLY, one per line, indented under their
   direction header (Cris, 2026-08-28: a wrapping pill row strands "1:32 AM"
   alone on a ragged last line; "just in line departures running vertically").
   Do not put this back to a wrapping row. */
.bsp-dir { margin-top: 7px; font: 800 11.5px/1.3 Lato, system-ui, sans-serif; color: #14181f; text-wrap: pretty; }
/* Labeled fact rows in the bus/carrier stop popup: one row per fact, never a
   text block (Cris, 2026-08-28). Same grid inside the light Leaflet popup and
   the dark departures sheet, so colors come from where it sits. */
.bsp-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 10px;
  margin: 8px 0 2px; }
/* Each row contributes its label and value straight into the grid columns. */
.bsp-row { display: contents; }
.bsp-k { font: 900 10.5px/1.5 Lato, system-ui, sans-serif; letter-spacing: .04em;
  text-transform: uppercase; color: #5a6472; }
.bsp-v { font: 700 12px/1.35 Lato, system-ui, sans-serif; color: #14181f;
  text-wrap: pretty; }
.dp .bsp-facts { margin: 10px 0 4px; }
.dp .bsp-k { color: var(--text-dim); }
.dp .bsp-v { color: var(--text); }
/* The diagram's tapped-stop chart lives on a DARK card: same override the
   dark sheets carry, or bsp-v's popup near-black lands dark-on-dark
   (Cris's phone, 2026-08-29). */
.rd-open .bsp-k { color: var(--text-dim); }
.rd-open .bsp-v { color: #fff; }
.rd-open .bsp-v a { color: #8fc0e0; font-weight: 900; }
.rdo-route { display: block; margin: 1px 0; }
.rdo-route .rr-sw { display: inline-block; width: 11px; height: 11px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }

.busline-num { display: inline-block; transform: translate(-50%, -50%);
  background: var(--bc); color: #fff; border: 1.5px solid #fff; border-radius: 5px;
  padding: 1px 5px; font: 900 11px/1.35 Lato, system-ui, sans-serif;
  box-shadow: 0 1px 4px rgba(0,0,0,.65); white-space: nowrap; }

.cr-listed { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 700; color: var(--text-dim); }

.node-approx { margin-top: 6px; font-size: 12px; font-weight: 700; line-height: 1.35;
  color: var(--text-dim); text-wrap: pretty; }

.rc-fine { margin: -9px 14px 12px; font-size: 12px; font-weight: 700; line-height: 1.4;
  color: var(--text-dim); text-wrap: pretty; }

.rc-dirs { display: flex; flex-direction: column; gap: 6px; padding: 0 14px 14px; }
/* Direction pickers in the app's row grammar: identity | primary + secondary
   | caret, standard height, quiet border (Cris, 2026-08-28: the big
   white-framed cards were "poorly formatted" and towered over the facts). */
.rc-dir { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px;
  text-align: left; cursor: pointer; background: rgba(255,255,255,.04);
  border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 10px;
  padding: 8px 11px; font-family: inherit; color: #fff; }
.rc-dir::after { content: '›'; flex: none; color: var(--text-dim); font-weight: 900; }
.rc-dir-arrow { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--c);
  color: var(--ct, #fff); display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; }
.rc-dir-txt { flex: 1; min-width: 0; }
.rc-dir-k { display: block; font-size: 13.5px; font-weight: 900; line-height: 1.25; }
.rc-dir-v { display: block; font-size: 12px; font-weight: 700; color: var(--text-dim); margin-top: 2px;
  line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.rc-note { margin: 0 14px 14px; padding: 11px 12px; border-radius: 12px; font-size: 13px; font-weight: 700;
  line-height: 1.4; color: #fff; background: color-mix(in srgb, var(--signal) 26%, var(--bg-panel));
  border: 1px solid var(--signal); text-wrap: pretty; }

/* --- left-to-right route diagram --- */
.rd-wrap { position: relative; padding-top: 2px; -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 34px), transparent 100%); overflow-x: auto; overflow-y: hidden; padding: 4px 0 10px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.rd-track { display: flex; align-items: flex-start; width: max-content; padding: 0 14px; }
.rd-stop { position: relative; flex: none; width: 106px; padding: 0 0 4px; background: none; border: 0;
  font-family: inherit; color: var(--text); cursor: pointer; }
.rd-stop::before { content: ''; position: absolute; left: 0; right: 0; top: 24px; height: 6px; background: var(--c); }
.rd-stop:first-child::before { left: 50%; }
.rd-stop:last-child::before { right: 50%; }
.rd-dot { position: relative; z-index: 1; display: block; width: 15px; height: 15px; margin: 20px auto 0;
  border-radius: 50%; background: #0b0d11; border: 4px solid var(--c); }
.rd-stop.is-end .rd-dot { width: 21px; height: 21px; margin-top: 17px; background: var(--c); box-shadow: 0 0 0 3px #fff; }
.rd-stop.is-on .rd-dot { box-shadow: 0 0 0 4px #fff; }
.rd-lab { display: block; min-height: 30px;   /* payload never truncates (2026-08-26): long names wrap, the strip grows */
  margin-top: 9px; padding: 0 5px; font-size: 12px; font-weight: 800;
  line-height: 1.25; color: var(--text); text-wrap: pretty; }
.rd-stop.is-on .rd-lab { color: #fff; }
.rd-t { display: block; margin-top: 4px; font-size: 11px; font-weight: 900; color: var(--text-dim); }
.rd-cap { display: block; margin: 0 auto 2px; width: fit-content; padding: 2px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 900; letter-spacing: .5px; background: var(--c); color: var(--ct, #fff); }

/* stop mini-card under the diagram */
.rd-open { margin: 0 14px 14px; background: var(--bg-raised); border: 1px solid var(--line);
  border-left: 6px solid var(--c); border-radius: 12px; padding: 12px 13px; }
.rdo-name { font-size: 16px; font-weight: 900; color: #fff; line-height: 1.25; text-wrap: pretty; }
.rdo-city { font-size: 12px; font-weight: 800; color: var(--text-dim); margin-top: 2px; }
.rdo-k { font-size: 11px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase;
  color: var(--text-dim); margin: 11px 0 5px; }
.rdo-times { display: flex; flex-wrap: wrap; gap: 6px; }
.rdo-t { background: #0b0d11; border: 1px solid var(--line); border-radius: 7px; padding: 5px 9px;
  font-size: 13px; font-weight: 900; color: #fff; }
.rdo-t.is-next { background: var(--c); color: var(--ct, #fff); border-color: #fff; }
.rdo-runs { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; }
.rdo-run { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 800; color: var(--text); }
.rdo-run b { color: #fff; font-size: 15px; }
.rdo-more { margin-top: 12px; width: 100%; background: var(--accent); color: #fff; border: none;
  border-radius: 10px; padding: 11px; font-family: inherit; font-size: 14px; font-weight: 900; cursor: pointer; }

/* direction view header strip */
.dv-bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--bg-raised);
  border-bottom: 1px solid var(--line); }
.dv-k { flex: 1; min-width: 0; font-size: 15px; font-weight: 900; color: #fff; line-height: 1.25; text-wrap: pretty; }
.dv-swap { flex: none; background: var(--accent); color: #fff; border: none; border-radius: 10px;
  padding: 9px 12px; font-family: inherit; font-size: 13px; font-weight: 900; cursor: pointer; }

.line-stops { list-style: none; margin: 0; padding: 16px 0 24px; overflow-y: auto; flex: 1; }
.panel-empty { color: var(--text-dim); font-size: 16px; line-height: 1.5; padding: 18px 16px; }

/* Trip-save guidance banner + the chosen first stop's animated dotted ring */
.trip-banner { list-style: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 12px 12px 6px; padding: 13px 14px; border-radius: 12px; font-size: 15px; line-height: 1.4; font-weight: 700;
  color: #fff; background: color-mix(in srgb, var(--signal) 30%, var(--bg-panel)); border: 1px solid var(--signal); }
.trip-banner.is-flash { background: color-mix(in srgb, var(--ok) 26%, var(--bg-panel)); border-color: var(--ok); }
.trip-banner span { flex: 1; min-width: 140px; }
.trip-cancel { flex: none; background: #fff; color: #14181f; border: none; border-radius: 9px; padding: 9px 14px; font-size: 14px; font-weight: 900; font-family: inherit; }
.stop-node.is-trip-pick .node-card { outline: 3px dashed var(--signal); outline-offset: 2px; border-radius: 12px; animation: tripPulse 1.1s ease-in-out infinite; }
@keyframes tripPulse { 0%,100% { outline-color: var(--signal); } 50% { outline-color: rgba(226,96,72,.25); } }

/* Each stop = a timeline node (colored rail + dot) plus an organized card. */
.stop-node { display: flex; gap: 12px; padding: 0 14px; cursor: pointer; }
.node-marker { position: relative; width: 18px; flex: none; }
.node-marker::before { content: ''; position: absolute; left: 7px; top: 0; bottom: 0; width: 4px; background: var(--c); }
.stop-node:first-child .node-marker::before { top: 20px; }
.stop-node:last-child .node-marker::before { bottom: calc(100% - 20px); }
.node-dot { position: absolute; left: 0; top: 13px; width: 18px; height: 18px; border-radius: 50%; background: var(--c); border: 3px solid var(--bg-panel); box-sizing: border-box; z-index: 1; }
.stop-node.is-end .node-dot { width: 20px; height: 20px; left: -1px; top: 12px; box-shadow: 0 0 0 2px var(--c); }
/* Request stops: hollow white dot, faint red card, italic note */
.stop-node.is-request .node-dot { background: #fff; }

.node-card { flex: 1; min-width: 0; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
.stop-node.is-request .node-card { border-color: rgba(226,96,72,.6); }
.stop-node.is-request .node-info { background: color-mix(in srgb, #e26048 9%, var(--bg-raised)); }
/* Header band carries the stop name; tinted dark (matches the active direction
   pill), softer than pure black. Context follows below. */
.node-head { background: color-mix(in srgb, var(--c) 22%, #000); padding: 9px 12px; }
/* Stop names are the payload: they wrap in full, never shrink or clip
   (payload-first principle 1, swept 2026-08-25). */
.node-name { font-size: 16px; font-weight: 800; line-height: 1.25; color: #fff; text-wrap: pretty; }
/* White ORIGIN / DESTINATION band: a second header (origin) or footer (dest) */
.terminus-band { background: #fff; text-align: center; font-size: 16px; font-weight: 900; letter-spacing: .6px; padding: 7px 12px; }
.node-info { padding: 10px 12px; }
.node-city { font-size: 12px; font-weight: 800; color: var(--text-dim); }
.nc-city { text-transform: uppercase; letter-spacing: .5px; }
.node-ctx { font-style: italic; font-weight: 600; color: var(--text-dim); }
.node-request { font-size: 13px; font-style: italic; color: #ec9c8f; margin-top: 4px; }
.track-ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

/* Connection chips: colored by transit mode; shuttle lines get the shuttle icon */
.node-conns { display: flex; flex-direction: column; gap: 8px; margin-top: 0; }
/* Each mode group: a kind label (Bus / Rail / Shuttles) then its chips. */
.conn-group { display: flex; gap: 9px; align-items: baseline; }
.conn-kind { flex: none; min-width: 54px; font-size: 11px; font-weight: 900; color: #fff;
  text-transform: uppercase; letter-spacing: .5px; padding-top: 3px; }
/* flex-wrap + the time chip's 100% basis: the NAME owns the first line and
   the next-departure time always sits on its own line beneath, so a time
   can never squeeze the name into an orphan (Cris, 2026-08-29: "put the
   names on one line and the time beneath"). */
.conn-row b { font-weight: 900; opacity: .95; }
.shuttle-ico { display: inline-block; width: 16px; height: 16px; background-color: var(--cc);
  -webkit-mask: url(shuttle_icon.png) center/contain no-repeat; mask: url(shuttle_icon.png) center/contain no-repeat; }

/* This stop's own departure times: a clear left-to-right row of time pills.
   Next upcoming departure today is flagged with the signal color. */
.dep-label, .conn-label { display: block; font-size: 11px; font-weight: 900; text-transform: uppercase;
  letter-spacing: .6px; margin-bottom: 9px; color: color-mix(in srgb, var(--c) 45%, #fff); }

/* "Connections" labelled block around the chips */
.conn-block { margin-top: 11px; }
.conn-block .node-conns { margin-top: 0; }
.conn-tappable { cursor: pointer; }
/* "PATCO times" call-to-action: a squared box so it stands out on the dark tile */
/* Selected-service results group: blue left line + indent ties it to the choice above */
.connect-group { border-left: 3px solid var(--nav-active); padding-left: 14px; margin-top: 16px; }

/* Connections: nested picker (List grammar) + the picked service's overview. */
.svc-row.is-active { border-color: var(--nav-active); box-shadow: 0 0 0 1.5px var(--nav-active);
  background: color-mix(in srgb, var(--nav-active) 14%, rgba(255,255,255,.04)); }
.conn-active { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--nav-active);
  border-radius: 12px; padding: 11px 12px; background: color-mix(in srgb, var(--nav-active) 10%, var(--bg-raised));
  width: 100%; text-align: left; cursor: pointer; font-family: inherit; }
.conn-active-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 900; color: #fff; text-wrap: pretty; }
.conn-change { flex: none; background: var(--bg-raised); border: 1px solid var(--line); color: var(--text);
  border-radius: 9px; padding: 8px 13px; font: 800 12.5px/1 Lato, system-ui, sans-serif; cursor: pointer; }
.cso { border: 1px solid var(--line); border-left: 4px solid var(--c, var(--line)); border-radius: 12px;
  padding: 12px; margin: 10px 0 14px; background: rgba(255,255,255,.03); }
.cso-dir { display: flex; flex-direction: column; gap: 2px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.cso-dir:first-child { padding-top: 0; }
.cso-dir b { font-size: 13.5px; color: #fff; text-wrap: pretty; }
.cso-dir span { font-size: 12.5px; font-weight: 700; color: var(--text); }
.cso-sts-wrap { margin-top: 9px; border: 1px solid var(--line); border-radius: 10px; }
.cso-sts-wrap > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 10px 11px; font: 900 12.5px/1.2 Lato, system-ui, sans-serif; color: var(--text); }
.cso-sts-wrap > summary::-webkit-details-marker { display: none; }
.cso-sts-wrap > summary::after { content: '›'; margin-left: auto; transition: transform .15s; }
.cso-sts-wrap[open] > summary::after { transform: rotate(90deg); }
.cso-sts { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 11px 11px; }
.cso-st { background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 11px; font: 800 12px/1.2 Lato, system-ui, sans-serif; color: #fff; }
button.cso-st-tap { border-color: var(--nav-active); color: var(--nav-active); cursor: pointer; font-family: inherit; }
.cso-hint { margin: 6px 0 0; font-size: 11.5px; font-weight: 700; color: var(--text-dim); }
.cso-k { margin: 0 0 8px; font: 900 11px/1.2 Lato, system-ui, sans-serif; text-transform: uppercase;
  letter-spacing: .6px; color: var(--text-dim); }
.cso-back { display: block; background: none; border: none; padding: 0 0 9px; cursor: pointer;
  font: 900 13px/1.2 Lato, system-ui, sans-serif; color: var(--nav-active); font-family: inherit; text-align: left; }
.cso-dirswitch { display: flex; gap: 8px; margin: 0 0 10px; }
.cso-dirswitch .bsw-half { min-width: 0; font-size: 13px; padding: 10px 6px; text-wrap: pretty; }
/* The route diagram, in the app's standard vertical affect: a colored spine,
   a dot per stop, ends emphasized. */
.cso-line { position: relative; margin: 8px 0 2px; }
.cso-stop { display: flex; align-items: center; gap: 10px; padding: 6px 0; position: relative; }
.cso-stop::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 3px;
  background: color-mix(in srgb, var(--c) 65%, transparent); }
.cso-stop.is-first::before { top: 50%; }
.cso-stop.is-last::before { bottom: 50%; }
.cso-dot { z-index: 1; flex: none; width: 11px; height: 11px; border-radius: 50%; background: var(--c);
  border: 2px solid #fff; margin-left: 0; }
.cso-stop.is-first .cso-dot, .cso-stop.is-last .cso-dot { width: 15px; height: 15px; margin-left: -2px; }
.cso-stop-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 800; color: #fff; text-wrap: pretty;
  background: none; border: none; padding: 0; text-align: left; font-family: inherit; }
button.cso-stop-name { cursor: pointer; color: var(--nav-active); text-decoration: underline dotted; text-underline-offset: 3px; }
/* Station connection chips: every other service within a real walk. */
.cso-stop-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.cso-stop.has-conn { align-items: flex-start; }
.cso-stop.has-conn .cso-dot { margin-top: 4px; }
.cso-conn { display: flex; flex-wrap: wrap; gap: 4px; padding-bottom: 2px; }
.cc-chip { background: rgba(255,255,255,.07); border: 1px solid var(--line); border-radius: 7px;
  padding: 2px 7px; font-size: 11px; font-weight: 800; color: var(--text); white-space: nowrap; }
.cc-rail { background: color-mix(in srgb, var(--c) 28%, #0b0d11); border-color: color-mix(in srgb, var(--c) 55%, #0b0d11); color: #fff; }
.cc-shu { border-color: #2e7d5b; }
.cc-ind { border-color: #a8842c; }
.cc-more { background: var(--bg-raised); border: 1px solid var(--nav-active); border-radius: 7px;
  padding: 2px 7px; font-size: 11px; font-weight: 900; color: var(--nav-active);
  cursor: pointer; font-family: inherit; }
.cc-rest:not([hidden]) { display: contents; }
.cc-rest[hidden] { display: none; }
.cso-links { display: flex; gap: 8px; margin-top: 10px; }
.cso-link { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 9px; padding: 9px 13px;
  font: 800 12.5px/1 Lato, system-ui, sans-serif; color: var(--nav-active); text-decoration: none; cursor: pointer; }
.cso-board { background: #fff; color: #14181f; border-radius: 12px; padding: 14px; }
.cso-board a { color: #1a5f9e; }
/* Popup HTML reused on a white sheet: its dim-on-dark accents need dark ink. */
.cso-board .pop-dep-to, .cso-board small { color: #4a5563; }
.cso-board .pop-dep b { color: #14181f; }
/* Onward-by-PATCO cross-reference card in the trip planner */
.onward-card { background: var(--bg-raised); border: 1px solid var(--c); border-left: 5px solid var(--c); border-radius: 12px; padding: 12px 14px; margin-top: 10px; }
.onward-head { font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; color: color-mix(in srgb, var(--c) 45%, #fff); margin-bottom: 8px; }
.onward-row { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; }
.onward-dir { flex: 1; min-width: 0; font-size: 14px; font-weight: 800; color: #fff; }
.onward-time { font-size: 16px; font-weight: 900; color: #fff; }
.onward-gap { font-size: 12px; font-weight: 800; color: color-mix(in srgb, #fff 72%, var(--bg)); }

/* Connecting-route departures popup (rendered into the detail sheet) */
.dp-context { display: flex; flex-direction: column; gap: 2px; padding: 0 2px; margin-bottom: 8px; }
/* Inside a board the context is a flat eyebrow, part of one header region. */
.dp .dp-context { border: 0; background: none; }
.dpc-kicker { font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--text-dim); }
.dpc-from { font-size: 17px; font-weight: 900; color: #fff; line-height: 1.2; }
.dp-head { padding: 2px 2px 12px; }
.dp-line { font-size: 19px; font-weight: 900; color: #fff; line-height: 1.15; }
.dp-stop { font-size: 13px; font-weight: 700; color: #fff; opacity: .9; margin-top: 3px; }
/* Equal-cell day grid: every chip the same size, no horizontal scroll, no
   truncation, position independent of the label (constitution, 2026-08-29). */
.dp-days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.dp-day { text-align: center; background: var(--bg-raised); border: 1px solid var(--line); color: #fff;
  border-radius: 10px; padding: 9px 13px; font-size: 14px; font-weight: 800; font-family: inherit; white-space: nowrap; }
.dp-day.is-active { background: var(--accent); border-color: #fff; }
.dp-body { max-height: 52vh; overflow-y: auto; }
/* Live NJT departures strip (real-time from /api/njt), shown above today's
   schedule. Green = live, distinct from the signal orange "next scheduled". */
.dp-live { margin-bottom: 12px; border-radius: 12px; padding: 11px 13px;
  background: color-mix(in srgb, #31d158 12%, #0b0d11); border: 1px solid color-mix(in srgb, #31d158 55%, #0b0d11); }
.dp-live-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 900;
  letter-spacing: .04em; text-transform: uppercase; color: #7ce89a; margin-bottom: 8px; }
.dp-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #31d158; animation: dp-live-pulse 1.6s ease-in-out infinite; }
@keyframes dp-live-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(49,209,88,.55); } 55% { box-shadow: 0 0 0 6px rgba(49,209,88,0); } }
.dp-live-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 6px 0; font-size: 15px; font-weight: 700; color: #fff; }
.dp-live-row + .dp-live-row { border-top: 1px solid rgba(255,255,255,.12); }
.dp-live-dest { min-width: 0; text-wrap: pretty; }   /* destination is payload: wraps, never clips */
.dp-live-when { flex: none; font-weight: 900; color: #7ce89a; }
.dp-live-wait { font-size: 13px; font-weight: 700; color: #fff; }
.dp-live-note { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.45; }
.dp-holiday { margin: 8px 0 0; padding: 8px 11px; border-radius: 9px; font-size: 12.5px; font-weight: 800;
  color: #ffd98a; background: rgba(255, 200, 90, .12); border: 1px solid rgba(255, 200, 90, .35); text-wrap: pretty; }
/* Live status line stamped onto a trip-planner leg (enhancePlanLive) */
.tp-live { display: flex; align-items: center; gap: 7px; margin: 4px 0 2px;
  font-size: 13px; font-weight: 800; color: #7ce89a; flex-wrap: wrap; }
/* Live connection verdict under the leg's live time (transfer legs only). */
.tp-conn { flex-basis: 100%; font-size: 12px; font-weight: 800; line-height: 1.4; }
.tp-conn-ok { color: #7ce89a; }
.tp-conn-tight { color: #ffcf6e; }
.tp-conn-miss { color: #ff9d94; }
/* Each direction is a tile: a WHITE header (line-colored title + arrow), then
   AM and PM section headers over their time grids. */
.dp-dir { margin-bottom: 14px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.dp-dir-h { display: flex; align-items: center; gap: 8px; background: #fff; padding: 11px 13px; }
/* Darken the line color on the white header so light line colors stay legible. */
.dp-arrow { font-size: 20px; font-weight: 900; color: color-mix(in srgb, var(--c) 68%, #000); line-height: 1; }
.dp-dir-name { text-wrap: pretty;  font-size: 16px; font-weight: 900; color: color-mix(in srgb, var(--c) 68%, #000); }
.dp-grid { background: rgba(255,255,255,.03); }
/* SYSTEMIZED departures (Cris's constitution, 2026-08-29): every departure
   is ONE ROW in the same three-column grid (time | status | action),
   stacked vertically like the PATH board. Never a wrap-dependent pill
   cloud; an element's place never depends on how long a word is. */
.dp-rows { display: flex; flex-direction: column; padding: 4px 13px 11px; }
.dp-row { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 8px;
  width: 100%; text-align: left; padding: 10px 6px; margin: 0; border: 0; border-radius: 0;
  border-bottom: 1px solid rgba(255,255,255,.09); background: none; color: #fff;
  font-family: inherit; font-size: 15px; }
.dp-rows .dp-row:last-child { border-bottom: 0; }
.dpr-t { font-weight: 900; white-space: nowrap; }
.dpr-s { font-size: 12px; font-weight: 800; color: color-mix(in srgb, #fff 76%, var(--bg)); }
.dpr-a { font-size: 12px; font-weight: 900; color: #fff; justify-self: end; white-space: nowrap; }
button.dp-row .dpr-a { border: 1.5px solid color-mix(in srgb, var(--c) 60%, #fff); border-radius: 999px; padding: 3px 11px; }
.dp-row.is-past { opacity: .4; }
.dp-row.is-past .dpr-t { text-decoration: line-through; }
.dp-row.is-next { background: var(--c); border-radius: 10px; border-bottom-color: transparent; }
.dp-row.is-next .dpr-s { color: #fff; }
.dp-row.is-next .dpr-a { background: #fff; color: #14181f; border-color: #fff; }
.dp-empty { color: #fff; font-size: 14px; font-weight: 600; line-height: 1.5; }
/* NJT bus line chooser (one stop serves several routes) */
.njt-pick { display: flex; flex-direction: column; gap: 8px; }
.njt-pick-row { display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: var(--bg-raised); border: 1px solid var(--line); color: #fff; border-radius: 11px;
  padding: 15px 14px; font-size: 14px; font-weight: 900; font-family: inherit; }
.njt-pick-row .rc-go { font-size: 22px; color: color-mix(in srgb, #fff 55%, var(--bg)); }
.dp-foot { color: color-mix(in srgb, #fff 74%, var(--bg)); font-size: 12px; font-weight: 600; margin-top: 12px; line-height: 1.4; }
/* Fact lists: every pipe-separated note renders as a LEFT-JUSTIFIED list,
   one line per fact, never a run-on text blob (Cris's constitution,
   2026-08-29). The companion class (dp-foot, pop-foot, ...) keeps carrying
   the surface's color and size. */
ul.fact-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; text-align: left; }
ul.fact-list li { position: relative; padding-left: 14px; }
ul.fact-list li::before { content: ''; position: absolute; left: 0; top: .42em; width: 5px; height: 5px;
  border-radius: 2px; background: currentColor; opacity: .65; }
ul.fact-list.dp-holiday li::before { background: #ffd98a; }

/* Stop detail docked over the map area (left of the panel), so the stop list
   stays visible and you can hop stop to stop without losing the panel. */
.stop-dock {
  position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1150;
  background: var(--bg-panel); border-right: 1px solid var(--line);
  transform: translateX(-100%); transition: transform .24s cubic-bezier(.2,.8,.2,1), visibility 0s linear .24s;
  display: flex; flex-direction: column; overflow: hidden;
  /* CLOSED means gone, not merely slid aside. Once the rail docks, this box
     starts at left:var(--rail-w), so translateX(-100%) parked it over the rail
     instead of off screen: an opaque panel at z-index 1150 sat on top of the
     filters, so they were invisible AND unclickable at any width from 900px up,
     and no reload could bring them back. Cris caught it 2026-08-19. */
  visibility: hidden; pointer-events: none;
}
.stop-dock.is-open { transform: none; visibility: visible; pointer-events: auto;
  transition: transform .24s cubic-bezier(.2,.8,.2,1), visibility 0s; }
.dock-close {
  display: flex; align-items: center; gap: 6px; align-self: flex-end; margin: 12px;
  background: var(--bg-raised); border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 8px 14px 8px 10px; font-size: 14px; font-weight: 900;
}
.dock-close .ic { width: 18px; height: 18px; stroke-width: 2.4; }
.dock-body { flex: 1; overflow-y: auto; padding: 0 18px 24px; }
.dock-body h2 { font-size: 21px; margin: 4px 0 2px; }

/* ---------- Search / lists ---------- */
.search-input {
  width: 100%; background: var(--bg-raised); border: 1px solid var(--line); color: var(--text);
  border-radius: 12px; padding: 15px 16px; font-size: 17px; margin: 14px; width: calc(100% - 28px);
}
.result-list, .browse-list { list-style: none; margin: 0; padding: 0 14px 14px; overflow-y: auto; }
.result-item { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; margin-bottom: 8px; }
.result-item { padding: 15px 16px; }
.result-item .r-name { font-size: 17px; font-weight: 600; }
.result-item .r-sub { font-size: 15px; color: var(--text-dim); margin-top: 3px; }
.placeholder-note { color: var(--text-dim); font-size: 16px; padding: 18px; line-height: 1.55; }

/* Browse: county > line accordion. White header fill, near-black text for contrast. */
.browse-county { margin-bottom: 4px; }
.browse-county > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff; color: #16191e; border-radius: 10px; margin: 8px 0;
  font-size: 19px; font-weight: 800; padding: 16px 14px; cursor: pointer; list-style: none;
}
.browse-county > summary::-webkit-details-marker { display: none; }
.browse-county[open] > summary { color: #16191e; }
.county-meta { display: flex; align-items: center; gap: 8px; color: #16191e; font-size: 14px; font-weight: 700; flex: none; }
.county-count { white-space: nowrap; }
.caret { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.browse-county[open] > summary .caret { transform: rotate(180deg); }

/* List view: mode switcher (by Route / by County) */
#lens-browse { flex-direction: column; }
.browse-switch { display: flex; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex: none; }
.bsw-half { flex: 1; background: var(--bg-raised); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 12px 8px; font-size: 15px; font-weight: 900; }
.bsw-half.is-active { background: var(--accent); border-color: #fff; color: #fff; }
.browse-list { flex: 1; }

/* Each line is expandable; its stops nest underneath. */
.line-group { border-top: 1px solid var(--line); }
/* "By route" view: the header is filled with the route color, lettering within. */
.line-group.by-route { border-top: none; margin: 8px 14px 0; border-radius: 10px; overflow: hidden; }
.line-group.by-route > summary.route-fill { background: var(--rc); padding: 14px; }
.line-group.by-route .browse-line-name { text-wrap: pretty;  color: var(--rt, #fff); font-weight: 800; text-shadow: 0 1px 3px rgba(0,0,0,.25); }
.line-group.by-route .line-swatch { display: none; }
.line-group.by-route .caret { color: var(--rt, #fff); }
.line-group.by-route .lg-map { background: rgba(0,0,0,.28); }
.line-group.by-route .line-stops { background: var(--bg); }
.line-group > summary.browse-line { list-style: none; }
.line-group > summary::-webkit-details-marker { display: none; }
.browse-line {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 14px 10px 16px; background: none; border: none; text-align: left; cursor: pointer;
}
.browse-line-name { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.2; flex: 1; min-width: 0; }
/* Swatch framed: larger than the text it precedes, prominent per line */
.line-swatch { width: 30px; height: 30px; border-radius: 7px; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.lg-meta { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.lg-map { font-size: 12px; font-weight: 900; color: #fff; background: var(--accent); border-radius: 6px; padding: 5px 10px; }
/* Route-picker "+ Add" control: white with dark text so it stays legible on
   every route color (green-on-green was hard to read). */
.lg-add { font-size: 13px; font-weight: 900; color: #14181f; background: #fff; border-radius: 7px; padding: 7px 13px; box-shadow: 0 1px 5px rgba(0,0,0,.4); white-space: nowrap; }
.lg-add.is-have { background: #0b0d11; color: #fff; }
/* Route-picker title */
.rp-title { font-size: 18px; font-weight: 900; color: #fff; line-height: 1.35; text-align: left; margin: 2px 2px 14px; padding-right: 36px; }
.line-group[open] > summary .caret { transform: rotate(180deg); }


/* ---------- Make a Connection ---------- */
.connect-scroll { flex: 1; overflow-y: auto; padding: 16px 14px 24px; }
.connect-prompt { font-size: 20px; font-weight: 700; margin: 4px 4px 14px; color: var(--text); }
/* The Connections rework (2026-08-28): the two-path home, the bucket list's
   top bar and live filter, and the service board's live/favorite bar. */
.conn-paths { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.conn-path { display: flex; flex-direction: column; gap: 5px; text-align: left;
  background: var(--card, #1b212b); border: 1.5px solid #3a4453; border-radius: 14px;
  padding: 14px 16px; cursor: pointer; }
.conn-path .cp-t { font: 900 16px/1.25 Lato, system-ui, sans-serif; color: var(--text); }
.conn-path .cp-s { font: 700 12.5px/1.4 Lato, system-ui, sans-serif; color: var(--text-dim); text-wrap: pretty; }
.conn-sec { margin: 14px 4px 6px; font: 900 11px/1 Lato, system-ui, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.conn-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.conn-rt { display: flex; align-items: center; gap: 8px; background: transparent; border: 0;
  padding: 4px 2px; cursor: pointer; }
.conn-rt .rt-lab { font: 900 12px/1 Lato, system-ui, sans-serif; color: var(--text-dim);
  letter-spacing: .02em; }
.conn-rt.is-on .rt-lab { color: #fff; }
.conn-rt .rt-track { position: relative; width: 36px; height: 21px; border-radius: 999px;
  background: #3a4453; transition: background .15s; flex: none; }
.conn-rt .rt-knob { position: absolute; top: 2.5px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #aab4c0; transition: transform .15s, background .15s; }
.conn-rt.is-on .rt-track { background: #1f8a5f; }
.conn-rt.is-on .rt-knob { transform: translateX(14px); background: #fff; }
.svc-row.is-dim, .svc-sub.is-dim > summary { opacity: .45; }
.conn-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 2px 0 6px; }
.conn-live { display: flex; align-items: center; gap: 7px; font: 800 12.5px/1.35 Lato, system-ui, sans-serif;
  color: var(--text); min-width: 0; }
.conn-live.is-sched { color: var(--text-dim); }
.conn-live-map { background: transparent; border: 0; padding: 0; font: 900 12.5px/1.35 Lato, system-ui, sans-serif;
  color: #7fb2e5; cursor: pointer; }
.conn-favbtn { background: transparent; border: 1.5px solid #3a4453; border-radius: 999px;
  padding: 6px 12px; font: 900 12px/1 Lato, system-ui, sans-serif; color: var(--text-dim);
  cursor: pointer; white-space: nowrap; }
.conn-favbtn.is-on { border-color: #ff7ba6; color: #ff9dbc; }
.conn-how { margin: 0 2px 10px; font: 700 12px/1.4 Lato, system-ui, sans-serif;
  color: var(--text-dim); text-wrap: pretty; }
/* Catchable rows are real buttons; the UA button chrome is reset by
   .dp-row, only the cursor is added here. */
button.dp-catch { cursor: pointer; }
button.bsp-catch { cursor: pointer; border: 1.5px solid #587e95; border-radius: 6px;
  background: transparent; padding: 3px 10px; font: 900 13px/1.3 Lato, system-ui, sans-serif; color: #14181f; }
.connect-results { margin-top: 18px; }
.connect-results .eyebrow { color: var(--text-dim); }
/* Connection result tiles: same header/body aesthetic as the route stop tiles */
/* Collapsible per-line grouping of connection results */
.cr-route { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--text); }
.cr-swatch { width: 13px; height: 13px; border-radius: 4px; flex: none; }

/* ---------- Detail sheet ---------- */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 900; }
.sheet-backdrop.is-open { opacity: 1; pointer-events: auto; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  background: var(--bg-sheet); border-radius: 20px 20px 0 0; border-top: 1px solid var(--line);
  transform: translateY(100%); transition: transform .26s cubic-bezier(.2,.8,.2,1);
  /* Height follows content: a short stop card opens just tall enough; a long one
     grows up to just under the top bar (then the content scrolls inside). */
  max-height: calc(100dvh - 56px); display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom);
}
.sheet.is-open { transform: translateY(0); }
.sheet-grab { display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--line); border: none; margin: 10px auto 4px; }
/* Obvious labelled X close (elderly riders may not know tap-off-to-dismiss) */
.sheet-x { position: absolute; top: 10px; right: 14px; display: flex; align-items: center; gap: 5px; background: color-mix(in srgb, #e26048 28%, var(--bg-raised)); border: 1px solid #e26048; color: #fff; border-radius: 10px; padding: 7px 13px 7px 9px; font-size: 14px; font-weight: 900; }
.sheet-x .ic { width: 18px; height: 18px; stroke-width: 2.4; }
.sheet-content { overflow-y: auto; padding: 8px 20px 24px; }
.sheet-content h2 { font-size: 22px; margin: 6px 0 2px; }
.sheet-content .s-cross { color: var(--text-dim); font-size: 16px; margin: 0 0 14px; }
.s-row { display: flex; gap: 10px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 16px; }
.s-row .k { color: var(--text-dim); width: 120px; flex: none; }
.btn-save { background: var(--ok); color: #fff; border: none; border-radius: 14px; padding: 15px 10px; font-size: 15px; font-weight: 800; line-height: 1.2; width: 100%; margin-top: 18px; font-family: inherit; white-space: nowrap; overflow: hidden; }

/* Stop detail: the top of the card IS the line. Line-color fill, white frame,
   same bold name styling as the line headers. */
/* One card skin for every place card (constitution, 2026-08-29): neutral
   surface, the line's color carried by the top strip alone, not flooding
   the card with thick colored gutters. */
.sd-top { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 16px; padding: 14px; margin: 4px 0 18px; }
/* Near-black on a light line color, white on a dark one (never white-on-light). */
.sd-line { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: calc(100% + 28px); box-sizing: border-box; font-size: 21px; font-weight: 900; color: var(--ct, #fff);
  line-height: 1.12; letter-spacing: .2px; background: var(--c); margin: -14px -14px 12px; padding: 13px 14px;
  border: 0; border-radius: 15px 15px 0 0; text-align: left; text-wrap: pretty; }
/* Each section is a dark box for consistent stop-to-stop structure: a small
   line-tinted label header, then the value. */
.sd-box { background: #0e1116; border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px; margin-bottom: 10px; }
.sd-box:last-child { margin-bottom: 0; }
.sd-k { display: block; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .6px;
  color: color-mix(in srgb, var(--c) 42%, #fff); margin-bottom: 5px; }
.sd-val { font-size: 16px; font-weight: 800; color: #fff; line-height: 1.35; }
.sd-name { font-size: 20px; text-wrap: pretty; }   /* the stop name wraps in full, never shrinks */
.sd-note { font-size: 13px; font-style: italic; color: #ec9c8f; margin-top: 5px; }
.sd-photo { margin-bottom: 10px; }
.sd-photo .sv-img, .sd-photo .sv-placeholder, .sd-photo .sv-loading { margin: 0; }
.sd-photo .sv-placeholder { color: #fff; border-color: rgba(255,255,255,.55); background: rgba(0,0,0,.18); }
.sd-box .node-conns { margin-top: 0; }
.eyebrow-spaced { margin-top: 4px; }
.s-cc { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cc-book { display: inline-flex; align-items: center; gap: 7px; background: var(--signal); color: #fff; border: none; border-radius: 10px; padding: 9px 14px; font-size: 14px; font-weight: 900; font-family: inherit; }
.cc-book .ic { width: 18px; height: 18px; flex: none; }

/* ---------- Bottom nav ---------- */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; height: var(--nav-h);
  display: flex; background: var(--bg-raised); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom); z-index: 800;
}
.nav-item { flex: 1; background: none; border: none; color: var(--text-dim); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 14px; font-weight: 800; padding-top: 6px; }
.nav-item .ic { width: 30px; height: 30px; }
.nav-item.is-active { color: var(--nav-active); }

/* ---------- Mobile pass ---------- */
.bsw-half { line-height: 1.15; }

@media (max-width: 600px) {
  .appbar .brand { display: none; }          /* give the search bar room */
  .nav-item { font-size: 11px; gap: 3px; }
  .nav-item .ic { width: 27px; height: 27px; }
  .nav-item span:last-child { white-space: nowrap; }

  .stop-dock { right: 0; }
  .map-panel-head h2 { font-size: 17px; }

  /* Text that was overflowing pills/boxes */
  .bsw-half { font-size: 13px; padding: 12px 6px; }
  .cs-mode { font-size: 15px; line-height: 1.25; }
  .connect-service { gap: 10px; }
  .lens-tab { font-size: 15px; }
  .schedule-cta { font-size: 18px; }
  .browse-line-name { font-size: 17px; }
  .county-name { font-size: 18px; }
  .sv-head, .cr-head, .node-name, .tp-leg-head { font-size: 15px; }
}

/* Trip option cards */
.tp-card { border: 1px solid var(--line); border-radius: 12px; margin-top: 12px; background: var(--bg-raised); overflow: hidden; }
.tp-card-head { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 0; color: var(--text); padding: 12px 14px; font-family: inherit; cursor: pointer; }
.tp-card-sum { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tp-card .tp-sum-time { font-size: 17px; }
.tp-card .tp-sum-meta { font-size: 13px; color: var(--text-dim); }
.tp-badge { flex: none; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; border: 1px solid var(--line); color: var(--text-dim); white-space: nowrap; }
.tp-badge-sh { border-color: var(--accent); color: var(--accent); }
.tp-caret { flex: none; width: 8px; height: 8px; border-right: 2px solid var(--text-dim); border-bottom: 2px solid var(--text-dim); transform: rotate(45deg); transition: transform .15s; }
.tp-card.is-open .tp-caret { transform: rotate(225deg); }
.tp-card-body { display: none; padding: 0 14px 14px; }
.tp-card.is-open .tp-card-body { display: block; }
.tp-est { font-style: normal; font-size: 11px; color: var(--text-dim); }
.tp-svc { margin: 0 0 16px; }

/* Estimated times marker (community GTFS interior loop stops). Added 2026-08-16. */
.dp-approx { font-size: 12px; font-weight: 700; color: color-mix(in srgb, var(--c) 45%, #000); margin-left: 4px; }

/* Live NJT vehicle positions (real, via /api/njt getVehicleLocations). Added 2026-08-16. */
.mf-live { grid-column: 1 / -1; }
.mf-live-meta { margin-left: auto; font-size: 12px; font-weight: 800; color: #cfd6de; }
.mf-chip.is-active .mf-sw-live { box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 0 0 4px rgba(88,126,149,.35); animation: livepulse 1.6s ease-in-out infinite; }
@keyframes livepulse { 0%,100% { box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 0 0 3px rgba(88,126,149,.35); } 50% { box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 0 0 7px rgba(88,126,149,0); } }
.njt-veh { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 18px; padding: 0 5px;
  border-radius: 5px; background: #587e95; color: #fff; font: 900 11px/1 Lato, system-ui, sans-serif; letter-spacing: .2px;
  border: 1.5px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.6); white-space: nowrap;
  /* --stack lifts vehicles that would otherwise sit on top of each other, so
     each one can be tapped (see declutterVehicles). */
  transform: translate(-50%, calc(-50% - var(--stack, 0) * 21px)); }
.njt-veh.is-rl { background: #117b68; }
/* NO text-wrap:pretty here: it collapses Leaflet's popup width measurement to a
   one-word-per-line column (seen 2026-08-20). Keep popup lines orphan-free by
   wording, not CSS. */
.veh-pop b { font-size: 15px; }
.veh-pop .veh-late { font-weight: 800; }
.veh-pop .veh-late.is-late { color: #b3261e; }
.veh-pop .veh-late.is-ok { color: #1b6b3a; }

/* Pickup wizard preview banner (not connected to dispatch). Added 2026-08-16. */
.wiz-notice { background: color-mix(in srgb, var(--signal) 22%, #0b0d11); border: 1px solid var(--signal); color: #fff;
  border-radius: 12px; padding: 10px 12px; font-size: 14px; line-height: 1.4; margin: 0 0 16px; text-wrap: pretty; }
.wiz-notice a { color: #fff; font-weight: 900; }
.njt-veh.is-agency { border-color: #fff; }

/* Live vehicles: quiet pulsing dots by default; numbered pills only for focused
   routes (selected line's connections, or picked in the route row). Added 2026-08-16. */
.live-dot { display: block; width: 11px; height: 11px; border-radius: 50%; background: var(--lc); border: 2px solid #fff;
  margin-top: calc(var(--stack, 0) * -14px);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--lc) 70%, transparent); transform: translate(-50%, -50%); animation: livedot 2s ease-out infinite; }
@keyframes livedot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lc) 75%, transparent); } 70% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--lc) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lc) 0%, transparent); } }
.map-filters.is-min .mf-live-routes { display: none; }
.mf-live-routes { display: flex; gap: 6px; align-items: center; overflow-x: auto; padding: 0 10px 10px; max-width: 100%; scrollbar-width: thin; }
.mf-lr-label { flex: none; font-size: 12px; font-weight: 900; color: #cfd6de; text-transform: uppercase; letter-spacing: .4px; }
.mf-lr { flex: none; border: 1.5px solid var(--lc); background: rgba(255,255,255,.04); color: #fff; border-radius: 8px; padding: 5px 9px; font: 900 13px/1 Lato, system-ui, sans-serif; cursor: pointer; }
.mf-lr small { font-weight: 700; opacity: .8; margin-left: 3px; }
.mf-lr.is-on { background: var(--lc); color: var(--lt, #fff); }
.mf-lr.is-on small { opacity: 1; }

/* Stop dots hide at state-level zooms so the map reads as lines, not blobs;
   the selected line always keeps its dots. Added 2026-08-16. */
.zoom-far path.stop-dot:not(.is-sel-dot) { display: none; }

/* Routes whose agency publishes live vehicle positions. Added 2026-08-16. */
.live-tag { display: inline-block; vertical-align: middle; margin-left: 8px; font-size: 10px; font-weight: 900; letter-spacing: .6px; padding: 2px 6px; border-radius: 6px;
  background: rgba(0,0,0,.35); color: #fff; border: 1px solid rgba(255,255,255,.55); }

/* Official NJT rail line pictograms in chips / popups. Added 2026-08-16. */
.rail-logo { width: 18px; height: 18px; vertical-align: -4px; margin-right: 5px; border-radius: 50%; background: #fff; }

/* Live-route chips row, inside the rail's "Moving Right Now" bucket. */
.mf-live-routes { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 2px 2px; }
.mf-lr-label { width: 100%; font-size: 11px; font-weight: 900; color: var(--text-dim); text-transform: uppercase; letter-spacing: .4px; }

/* Docked rail + narrower panel once there is room for both. */
@media (min-width: 900px) {
  .map-rail { transform: none; }
  .map-rail:not(.is-open) { transform: translateX(-100%); }
  .map-panel { width: 400px; }
  .map-panel.is-open ~ .stop-dock { right: 400px; }
  .map-rail.is-open ~ .stop-dock { left: var(--rail-w); }
}

/* ---------- route map mode: one route, alone, with its direction shown ---------- */
.rc-mapbtn { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 28px);
  margin: 0 14px 12px; background: var(--accent); border: none; border-radius: 12px; padding: 13px 14px;
  color: #fff; font: 900 16px/1 Lato, system-ui, sans-serif; cursor: pointer; }
.rc-mapbtn .ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linejoin: round; }

.routemap-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1200;
  background: var(--bg-panel); border-top: 1px solid var(--line);
  box-shadow: 0 -8px 28px rgba(0,0,0,.5); padding-bottom: env(safe-area-inset-bottom); }
.rmb-head { display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  background: var(--c); color: var(--ct); }
.rmb-name { flex: 1; min-width: 0; font-size: 17px; font-weight: 900; line-height: 1.2; text-wrap: balance; }
.rmb-x { flex: none; background: rgba(0,0,0,.28); border: 2px solid currentColor; color: inherit;
  border-radius: 20px; padding: 7px 15px; font: 900 14px/1 Lato, system-ui, sans-serif; cursor: pointer; }
.rmb-dirs { display: flex; gap: 8px; padding: 10px 12px 12px; }
.rmb-dir { flex: 1; min-width: 0; text-align: left; background: var(--bg-raised);
  border: 2px solid var(--line); border-radius: 12px; padding: 9px 11px; color: var(--text);
  font-family: inherit; cursor: pointer; }
.rmb-dir.is-on { border-color: #fff; background: color-mix(in srgb, var(--accent) 34%, #0b0d11); color: #fff; }
.rmb-k { display: block; font-size: 14px; font-weight: 900; line-height: 1.2; }
.rmb-v { display: block; margin-top: 2px; font-size: 12px; font-weight: 800; color: var(--text-dim);
  line-height: 1.25; text-wrap: pretty; }
.rmb-dir.is-on .rmb-v { color: #edf3f7; }
.rmb-note { margin: 0; padding: 11px 13px 13px; font-size: 13px; font-weight: 700; color: #fff; }

/* Arrowheads along the line, so the direction reads even when nothing moves. */
/* Bigger, and outlined, so an arrowhead reads against a busy street map. */
.route-arrow { display: block; width: 0; height: 0; transform: translate(-50%, -50%) rotate(var(--rot));
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-bottom: 14px solid #fff;
  filter: drop-shadow(0 0 1px #0b0d11) drop-shadow(0 0 3px rgba(0,0,0,.9)); }

/* Direction flow: a white dashed line marching along the route the way the
   rider picked, drawn over the selected line. Added 2026-08-17. */
.flow-line { animation: flowmarch 1.1s linear infinite; }
@keyframes flowmarch { to { stroke-dashoffset: -18; } }

/* At-a-glance line under a route name in the List view (trips each way + days). */
.lg-glance { display: block; margin-top: 3px; font-size: 12px; font-weight: 800; opacity: .85; }

/* The map element gives up the space the panel (and, on desktop, the rail)
   occupies, so every fitBounds frames the route inside what the rider can
   actually see. Padding tricks put the route behind the sheet. Cris 2026-08-17. */
@media (max-width: 899px) {
  #lens-map:has(.map-panel.is-open) #map { bottom: 58%; }
  #lens-map:has(.map-panel.is-open) .map-locate { bottom: calc(58% + 12px); }
  #lens-map:has(.map-panel.is-open.is-tall) #map { bottom: calc(100% - 8px); }
  #lens-map:has(.map-panel.is-open.is-tall) .map-locate,
  #lens-map:has(.map-panel.is-open.is-tall) .map-tip-btn { display: none; }
}
@media (min-width: 900px) {
  #lens-map:has(.map-panel.is-open) #map { right: 400px; }
  #lens-map:has(.map-panel.is-open) .map-locate { right: 412px; }
  #lens-map:has(.map-rail.is-open) #map { left: var(--rail-w); }
}

/* Curb pickup / route deviation: a sentence, not a chip, plus the booking
   button where the operator actually takes reservations. Added 2026-08-17. */
.rc-curb { margin: 0 14px 16px; padding: 12px 13px; border-radius: 12px;
  background: var(--bg-raised); border: 1px solid var(--line); }
.rc-curb.is-yes { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 16%, var(--bg-raised)); }
.rc-curb .rc-fk { margin: 0 0 5px; }
.rc-curb-v { font-size: 15px; font-weight: 800; color: #fff; line-height: 1.4; text-wrap: pretty; }
.rc-book { margin: 0 14px 14px; width: calc(100% - 28px); background: var(--signal); color: #fff; border: none;
  border-radius: 12px; padding: 12px; font-family: inherit; font-size: 15px; font-weight: 900; cursor: pointer; }
.rc-curb-n { margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.4; text-wrap: pretty; }

/* ---------- Rebuilt trip planner (2026-08-17) ---------- */
.tp-lede { margin: 0 0 14px; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--text); text-wrap: pretty; }
.tp-whennote { margin: 8px 2px 0; font-size: 13px; font-weight: 700; color: var(--text-dim); text-wrap: pretty; }
.tp-whenmode .twm { flex: 1; }
.tp-ends { margin: 4px 0 12px; font-size: 16px; font-weight: 800; color: #fff; line-height: 1.35; text-wrap: pretty; }
.tp-endnote { display: block; margin-top: 3px; font-size: 12px; font-weight: 700; color: var(--text-dim); }
.tp-rolled { margin: 4px 0 12px; padding: 12px 13px; border-radius: 12px; font-size: 14px; font-weight: 700;
  line-height: 1.4; color: #fff; background: color-mix(in srgb, var(--signal) 26%, var(--bg-raised));
  border: 1px solid var(--signal); text-wrap: pretty; }
.tp-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 6px; }
.tp-chip { background: var(--c); color: #fff; border-radius: 6px; padding: 3px 7px; font-size: 11px; font-weight: 900;
  text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.tp-chip-sep { color: var(--text-dim); font-weight: 900; }

/* Journey legs */
.tl-row { display: flex; gap: 11px; padding: 11px 0; border-top: 1px solid var(--line); }
.tl-row:first-child { border-top: none; }
.tl-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.06); color: var(--text-dim); }
.tl-ico.tl-ride { background: var(--c); color: #fff; }
.tl-ico .ic { width: 20px; height: 20px; }
.tl-body { flex: 1; min-width: 0; }
.tl-k { font-size: 15px; font-weight: 900; color: #fff; line-height: 1.25; text-wrap: pretty; }
.tl-v { font-size: 14px; font-weight: 700; color: var(--text); margin-top: 3px; line-height: 1.3; text-wrap: pretty; }
.tl-v b { color: #fff; font-weight: 900; margin-right: 4px; }
.tl-sub { font-size: 12px; font-weight: 800; color: var(--text-dim); margin-top: 4px; }
.tl-walk .tl-k { font-weight: 800; color: var(--text); }

.tp-save { width: 100%; margin-top: 14px; background: var(--ok); color: #fff; border: none; border-radius: 12px;
  padding: 14px; font-family: inherit; font-size: 15px; font-weight: 900; cursor: pointer; }
.tp-save:disabled { background: var(--bg-raised); color: var(--text-dim); border: 1px solid var(--line); }

/* ===== Alerts (behind the gear). Buttons get explicit dark backgrounds: the
   UA default is light and would sit light-on-light in this shell. ===== */
/* No max-width here: .screen-body is a flex item and a width cap forced it to
   560px inside a 393px phone, overflowing the frame. Phone-first, full width. */
.alerts-body { padding: 14px; }
.al-card { display: flex; align-items: center; gap: 11px; background: var(--bg-raised, rgba(255,255,255,.05));
  border: 1px solid var(--line); border-radius: 13px; padding: 12px; margin-bottom: 9px; }
.al-toggle { flex: none; width: 44px; height: 26px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.08); cursor: pointer; position: relative; }
.al-toggle::after { content: ''; position: absolute; top: 2px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; opacity: .55; transition: transform .15s, opacity .15s; }
.al-toggle.is-on { background: var(--ok); border-color: var(--ok); }
.al-toggle.is-on::after { transform: translateX(17px); opacity: 1; }
.al-main { flex: 1; min-width: 0; }
.al-name { font-size: 15px; font-weight: 900; color: #fff; text-wrap: pretty; }
.al-sub { font-size: 12px; font-weight: 800; color: var(--text-dim); margin-top: 2px; }
.al-del { flex: none; width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.06);
  border: none; color: var(--text); font: 900 20px/1 Lato, system-ui, sans-serif; cursor: pointer; }
.al-perm { width: 100%; margin-top: 10px; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 12px; padding: 12px; color: #fff; font: 900 14px/1.2 Lato, system-ui, sans-serif; cursor: pointer; }
.al-fine { margin-top: 12px; font-size: 12px; font-weight: 700; color: var(--text-dim); text-wrap: pretty; }
.al-build-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.al-build-head b { font-size: 17px; color: #fff; }
.al-cancel { background: none; border: 1.5px solid rgba(255,255,255,.3); border-radius: 999px; padding: 7px 13px;
  color: var(--text); font: 800 12.5px/1 Lato, system-ui, sans-serif; cursor: pointer; }
.al-slider { display: block; margin: 12px 0; font-size: 13.5px; font-weight: 800; color: var(--text); }
.al-slider b { color: #fff; }
.al-slider input { width: 100%; margin-top: 7px; accent-color: var(--accent); }
.al-svcs { margin-bottom: 14px; }
.al-svc { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: rgba(255,255,255,.04); border: 1.5px solid transparent; border-radius: 11px;
  padding: 10px 11px; margin-bottom: 6px; color: var(--text); cursor: pointer; font-family: inherit; }
.al-svc.is-on { border-color: #fff; background: color-mix(in srgb, var(--accent) 28%, #0b0d11); }
.al-svc-sw { flex: none; width: 12px; height: 12px; border-radius: 4px; }
.al-svc-name { font-size: 14px; font-weight: 900; color: #fff; text-wrap: pretty; }
.al-svc-dir { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--text-dim);
  text-wrap: pretty; }   /* service name and direction are payload: both wrap in full */
.al-svc-tick { flex: none; width: 18px; color: #fff; font-weight: 900; }
#alertToasts { position: fixed; left: 12px; right: 12px; bottom: 78px; z-index: 3000;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.al-toast { display: flex; align-items: center; gap: 9px; background: #0e1116; border: 1.5px solid rgba(255,255,255,.35);
  border-radius: 12px; padding: 12px 13px; color: #fff; font-size: 13.5px; font-weight: 800;
  box-shadow: 0 6px 24px rgba(0,0,0,.5); text-wrap: pretty; }
.al-toast-sw { flex: none; width: 12px; height: 12px; border-radius: 50%; }

/* ===== Home value card (statewide only, injected by app.js). The pitch in
   computed numbers plus real tappable trips. Explicit dark backgrounds on
   buttons (UA default is light). ===== */
.vc { background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px; margin-bottom: 16px; }
.vc-head { font: 900 17px/1.2 Lato, system-ui, sans-serif; color: #fff; text-wrap: balance; }
.vc-line { margin-top: 6px; font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.45; text-wrap: pretty; }
.vc-line b { color: #fff; }
.vc-list { margin: 8px 0 0; padding: 0; list-style: none; }
.vc-list li { padding: 4px 0 4px 2px; font-size: 13.5px; font-weight: 700; color: var(--text); text-wrap: pretty; }
.vc-list li::before { content: '•'; color: var(--nav-active); margin-right: 8px; }
.vc-list li b { color: #fff; font-size: 14px; font-variant-numeric: tabular-nums; }
/* Minimized welcome (Cris, 2026-08-25): one collapsed row, counts inside. */
.vc-min { padding: 0; margin-bottom: 16px; }
.vc-min > summary { display: flex; align-items: center; gap: 10px; list-style: none;
  cursor: pointer; padding: 12px 13px; }
.vc-min > summary::-webkit-details-marker { display: none; }
.vc-min > summary::after { content: '›'; flex: none; color: var(--text-dim);
  font-weight: 900; font-size: 15px; transition: transform .15s; }
.vc-min[open] > summary::after { transform: rotate(90deg); }
.vc-min .vc-head { flex: 1; min-width: 0; font-size: 14.5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.vc-total { flex: none; font-size: 12.5px; font-weight: 800; color: var(--text-dim); }
.vc-total b { color: #fff; }
.vc-min .vc-list { margin: 0; padding: 0 13px 12px; }

/* ---------- Statewide home (NJ All Rides) ---------- */
.brand-gold { color: var(--nav-active); letter-spacing: .8px; }
.home-switch { display: flex; gap: 5px; margin: 12px 0; padding-bottom: 2px; }
/* Six tabs must fit a 393px phone: sized so the longest label (Current)
   stays inside its pill, and the pill never lets text spill (Cris,
   2026-08-26: "popping out of their boundaries"). */
.home-switch .hsw { flex: 1 1 0; min-width: 0; font-size: 12.5px; letter-spacing: -.2px;
  padding: 11px 2px; white-space: nowrap; overflow: hidden; }
.ha-panel { min-height: 120px; }
.ha-about { display: block; width: 100%; margin: 18px 0 8px; background: var(--bg-raised);
  border: 1px solid var(--line); border-radius: 12px; padding: 14px; text-align: left;
  font: 900 14.5px/1.2 Lato, system-ui, sans-serif; color: var(--text); cursor: pointer; font-family: inherit; }
.ha-cta { margin-top: 12px; }
.ha-stoprow { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.04);
  border: 1.5px solid var(--line); border-left: 5px solid var(--c, var(--line)); border-radius: 12px;
  padding: 11px 12px; margin-bottom: 8px; cursor: pointer; }
.ha-stoprow .rr-sw { flex: none; width: 12px; height: 12px; border-radius: 4px; }
.ha-stopname { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ha-stopname b { font-size: 14.5px; color: #fff; text-wrap: pretty; }
.ha-stopname span { font-size: 12px; font-weight: 700; color: var(--text-dim); text-wrap: pretty; }
.about-card .ab-note { font-size: 14.5px; line-height: 1.55; color: var(--text); margin: 0 0 12px; text-wrap: pretty; }
.sd-actions { display: flex; gap: 8px; margin-top: 10px; }
.btn-half { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 12px; padding: 13px 8px;
  font: 800 13.5px/1.2 Lato, system-ui, sans-serif; color: #fff; cursor: pointer; font-family: inherit; }
.btn-half .ic { width: 15px; height: 15px; }
.rc-alert { display: inline-flex; align-items: center; gap: 5px; background: var(--bg-raised);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; margin-left: 8px;
  font: 800 11.5px/1.2 Lato, system-ui, sans-serif; color: var(--text); cursor: pointer; font-family: inherit; white-space: nowrap; }
.rc-alert.has-alerts { border-color: #e3c34c; color: #e3c34c; }
.rc-alert .ic { width: 13px; height: 13px; }
button.rc-web.rc-alert { border: 0; margin-left: 0; }

/* Alerts: pause + day-of-week */
.al-paused-banner { background: #b7791f; color: #14181f; border-radius: 12px; padding: 12px 14px;
  font: 900 13.5px/1.35 Lato, system-ui, sans-serif; margin-bottom: 12px; text-wrap: pretty; }
.al-pause { display: block; width: 100%; margin-top: 10px; background: var(--bg-raised);
  border: 1.5px solid var(--line); border-radius: 12px; padding: 13px; font: 900 14px/1.2 Lato, system-ui, sans-serif;
  color: var(--text); cursor: pointer; font-family: inherit; }
.al-pause.is-paused { background: #b7791f; border-color: #b7791f; color: #14181f; }
.al-pausepick { display: flex; gap: 7px; margin-top: 8px; }
.al-pausepick button { flex: 1; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 4px; font: 800 12px/1.2 Lato, system-ui, sans-serif; color: #fff; cursor: pointer; font-family: inherit; }
.al-days { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.al-day, .al-dayset { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 12px; font: 800 12px/1.2 Lato, system-ui, sans-serif; color: var(--text); cursor: pointer; font-family: inherit; }
.al-day.is-on { background: var(--accent); border-color: #fff; color: #fff; }
.al-dayset { border-style: dashed; }

/* Issues rows */
.iss { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; background: rgba(255,255,255,.03); }
.iss > summary { display: flex; align-items: center; gap: 9px; list-style: none; cursor: pointer; padding: 11px 12px; }
.iss > summary::-webkit-details-marker { display: none; }
.iss-routes { flex: none; display: flex; gap: 4px; flex-wrap: wrap; max-width: 40%; }
.iss-routes b { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 7px;
  padding: 3px 8px; font: 900 11.5px/1.2 Lato, system-ui, sans-serif; color: #fff; white-space: nowrap; }
.iss-head { flex: 1; min-width: 0; font-size: 13px; font-weight: 800; color: #fff; text-wrap: pretty; }
.iss-desc { margin: 0; padding: 0 12px 12px; font-size: 13px; line-height: 1.5; color: var(--text); text-wrap: pretty; }
.iss-desc + .iss-desc { padding-top: 0; margin-top: -4px; }
/* Per-line groups inside an operator; greyed rows where no feed exists. */
.iss-line { margin: 0 8px 8px; }
.iss-line .iss { margin: 0 8px 8px; }
.iss-linename { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 800; color: #fff; text-wrap: pretty; }
.iss-none { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px; opacity: .55; }
.iss-nolabel { flex: none; font-size: 13.5px; font-weight: 800; color: var(--text); }
.iss-nonote { min-width: 0; font-size: 11.5px; font-weight: 700; color: var(--text-dim);
  text-align: right; text-wrap: pretty; }
.vc-try { margin: 11px 0 5px; font-size: 11px; font-weight: 900; letter-spacing: .6px;
  text-transform: uppercase; color: var(--text-dim); }
.vc-trips { display: flex; flex-wrap: wrap; gap: 6px; }
.vc-trip { flex: 1 1 auto; background: color-mix(in srgb, var(--accent) 30%, #0b0d11);
  border: 1.5px solid rgba(255,255,255,.3); border-radius: 999px; padding: 9px 12px;
  color: #fff; font: 800 12.5px/1.15 Lato, system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.vc-net { width: 100%; margin-top: 9px; background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.25); border-radius: 12px; padding: 11px;
  color: #fff; font: 900 13px/1.2 Lato, system-ui, sans-serif; cursor: pointer; }

/* Ticket links on a plan card, one row, deduped by operator. */
.tl-tix { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 13px; font-weight: 800; color: var(--text); }
.tl-tix a { color: var(--nav-active); text-decoration: none; white-space: nowrap; }

/* Amtrak popup live status. */
.pop-ontime { color: #35c08e; font-weight: 800; }
.pop-late { color: #e2a04a; font-weight: 800; }
.pop-dep { margin: 3px 0; }
.pop-dep-to { color: var(--text-dim); }
/* Tappable departure rows (SEPTA popups, 2026-08-28): full button reset, the
   popup is light so text stays near-black; each row is time | train | line. */
.pop-deps { display: flex; flex-direction: column; gap: 2px; margin: 8px 0 4px; }
.pop-dep-btn { display: flex; align-items: baseline; gap: 7px; width: 100%;
  background: #f0f2f5; border: 0; border-radius: 8px; padding: 6px 9px;
  font: 700 12.5px/1.3 Lato, system-ui, sans-serif; color: #14181f;
  text-align: left; cursor: pointer; }
.pop-dep-btn b { font-size: 13px; }
.pop-dep-btn .pop-dep-no { font-weight: 900; color: #33566b; white-space: nowrap; }
.pop-dep-btn .pop-dep-to { color: #4a5563; flex: 1; min-width: 0; }
.pop-dep-btn .pop-dep-go { font-size: 16px; font-weight: 900; color: #33566b; align-self: center; }

/* First-open banner over the map (statewide, once). */
.net-intro { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 1200;
  display: flex; align-items: center; gap: 10px; background: #0e1116;
  border: 1.5px solid rgba(255,255,255,.4); border-radius: 13px; padding: 12px 14px;
  color: #fff; font: 800 14px/1.35 Lato, system-ui, sans-serif; text-wrap: pretty;
  box-shadow: 0 8px 28px rgba(0,0,0,.55); }
.net-intro span { flex: 1; min-width: 0; }
.net-intro button { flex: none; width: 30px; height: 30px; border-radius: 9px;
  background: rgba(255,255,255,.08); border: none; color: #fff;
  font: 900 17px/1 Lato, system-ui, sans-serif; cursor: pointer; }

/* Personal limits sliders inside the preference block. */
.tp-limits { margin: 4px 0 8px; padding: 10px 12px; background: rgba(255,255,255,.04);
  border: 1px solid var(--line); border-radius: 12px; }
.tp-limits .al-slider { margin: 8px 0; }

/* Option flags on a plan card: neutral facts, amber for a near-miss against
   the rider's own limits. */
.tp-flagrow { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.tp-flag { background: rgba(255,255,255,.07); border-radius: 8px; padding: 4px 8px;
  font-size: 11.5px; font-weight: 800; color: var(--text); text-wrap: pretty; }
.tp-flag-amber { background: rgba(226,160,74,.16); border: 1px solid rgba(226,160,74,.55); color: #f0c186; }

/* A wait between rides is a real part of the trip: its own row, clock icon. */
.tl-wait .tl-k { color: #f0c186; }

/* Rail line identity bullets (Trains list, Connections): official line color
   with a short code, text color computed for contrast. */
.rr-bullet { flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; padding: 3px 6px; border-radius: 6px;
  font: 900 10px/1.2 Lato, system-ui, sans-serif; letter-spacing: .4px; white-space: nowrap; }

/* Working-backwards facts on a connection row: the service's own day at this
   point, both directions. */
.cr-facts { display: flex; flex-direction: column; gap: 3px; margin-top: 5px; }
.cr-dir { font-size: 12px; font-weight: 700; color: var(--text); line-height: 1.35; text-wrap: pretty; }
.cr-dir b { color: #fff; }

/* ===== Services directory (List tab). Closed-by-default nested groups. ===== */
.svc-cat, .svc-sub { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px;
  background: rgba(255,255,255,.03); overflow: hidden; }
.svc-cat > summary, .svc-sub > summary { display: flex; align-items: center; gap: 8px; cursor: pointer;
  list-style: none; padding: 13px 14px; font: 900 15px/1.2 Lato, system-ui, sans-serif; color: #fff; }
.svc-sub > summary { font-size: 13.5px; padding: 11px 12px; }
.svc-cat > summary::-webkit-details-marker, .svc-sub > summary::-webkit-details-marker { display: none; }
.svc-cat > summary::after, .svc-sub > summary::after { content: '›'; margin-left: auto;
  color: var(--text-dim); font-size: 17px; transition: transform .15s; }
.svc-cat[open] > summary::after, .svc-sub[open] > summary::after { transform: rotate(90deg); }
/* Count pills read clearly against the dark boxes: light pill, near-black
   number (Cris, 2026-08-29: "almost the same color as the box"). */
.svc-n { background: #aebdc9; border-radius: 999px; padding: 2px 8px;
  font-size: 11px; font-weight: 900; color: #14181f; }
.svc-sub { margin: 0 8px 8px; }
.svc-cat > .svc-row { margin: 0 8px 6px; }
.svc-row { display: flex; align-items: center; gap: 9px; width: calc(100% - 16px); margin: 0 8px 6px;
  text-align: left; background: rgba(255,255,255,.04); border: 1.5px solid transparent; border-radius: 10px;
  padding: 10px 11px; color: var(--text); cursor: pointer; font-family: inherit; }
.svc-row:active { border-color: #fff; }
.svc-row .rr-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--sc, #fff); }
.svc-row .rr-sw { flex: none; width: 12px; height: 12px; border-radius: 4px; }
.svc-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 800; color: #fff; text-wrap: pretty; }
.svc-ends { font-weight: 700; color: var(--text); font-size: 12px; }
.svc-row .rr-num { flex: none; font: 900 13px/1 Lato, system-ui, sans-serif; color: #fff;
  background: #587e95; border-radius: 6px; padding: 4px 7px; }
.svc-go { flex: none; color: var(--text-dim); font-weight: 900; }
.svc-sub > summary .rr-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--sc, #fff); }

/* Comparative winner labels on plan options. */
.tp-flag-best { background: rgba(17,123,104,.22); border: 1px solid rgba(53,192,142,.6); color: #7fdcba; }

/* ===== Row standardization (Cris, 2026-08-25): one grammar everywhere a
   service is listed. A fixed-width identity slot so every name starts at the
   same x regardless of icon shape; single-line primary text with ellipsis so
   name length never reshapes a row; uniform row heights. ===== */
/* Four tracks: id | name | badge | caret. Rows without a badge child let the
   auto track collapse to nothing, so three-child rows keep their old shape;
   the Connections LIVE slot broke onto a second grid row before this
   (Cris, 2026-08-28: "the framing of stuff on the buttons is a mess"). */
.svc-row { display: grid; grid-template-columns: 48px 1fr auto 16px; align-items: center;
  gap: 8px; min-height: 48px; }
.svc-row > :nth-child(2):last-child { grid-column: 2 / -1; }
.svc-row > .svc-go:nth-child(3) { grid-column: 4; }
.svc-row .rr-live-slot { width: auto; justify-content: flex-end; }
.svc-id { display: flex; align-items: center; justify-content: center; min-width: 0; }
/* white-space LAST: text-wrap (set to pretty in the earlier rule) and
   white-space share the text-wrap-mode longhand in Chrome, so a later
   text-wrap declaration silently undoes nowrap. */
.svc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rr-bullet { width: 44px; min-width: 44px; max-width: 44px; padding: 3px 2px; justify-content: center; }
.rail-logo { width: 24px; height: 24px; object-fit: contain; }
.svc-row .rr-num, .rr-id .rr-num { display: inline-flex; justify-content: center; width: 44px;
  box-sizing: border-box; padding: 4px 2px; }

/* Drawer rows (Buses / Other tabs): fixed number slot + stacked one-line text. */
.rr-id { flex: none; width: 48px; display: flex; justify-content: center; }
.rr-id .rr-sw { width: 14px; height: 14px; border-radius: 4px; }
.rr-lines { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rr-lines .rr-name { font-weight: 900; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-lines .rr-ends, .rr-lines .rr-op { display: block; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; min-width: 0; }
.rail-row { align-items: center; }

/* The winner banner across a plan card's top. */
.tp-card { overflow: hidden; }
.tp-card-banner { background: linear-gradient(90deg, #117b68, #1b9b83); color: #fff;
  font: 900 12px/1.2 Lato, system-ui, sans-serif; letter-spacing: .5px; text-transform: uppercase;
  padding: 8px 14px; }

/* ===== The itinerary system (Cris, 2026-08-25): Trip Overview container,
   numbered colored step cards, white wait interludes, fixed slots. ===== */
.ov { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 13px;
  padding: 13px 14px; margin-bottom: 12px; }
.ov-title { font: 900 11px/1 Lato, system-ui, sans-serif; letter-spacing: .7px; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 9px; }
.ov-row { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 8px;
  padding: 6px 0; border-top: 1px solid rgba(255,255,255,.06); }
.ov-row:first-of-type { border-top: none; }
.ov-k { font-size: 12px; font-weight: 800; color: var(--text-dim); text-transform: uppercase; letter-spacing: .4px; }
.ov-row b { font-size: 14.5px; color: #fff; }
/* Services as a vertical list in the app's row grammar (2026-08-29);
   the look-alike mode tiles are gone. */
.ov-svcs { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.ov-row-col { grid-template-columns: 1fr; align-items: start; }
.ov-svc-row { display: grid; grid-template-columns: 48px 1fr auto; align-items: start; gap: 8px; }
/* The name IS the payload here (what to board): it WRAPS, never truncates
   (Cris, 2026-08-29: "we cant tell what to board because it is cut off").
   List rows elsewhere keep one-line ellipsis because their tap opens the
   full card; these rows open nothing. */
.ov-svc-name { font-size: 13.5px; font-weight: 800; color: #fff; min-width: 0; line-height: 1.3; text-wrap: pretty; }
.ov-svc-row .svc-id { margin-top: 1px; }
.ov-svc-mode { margin-top: 3px; }
.ov-svc-mode { font-size: 10.5px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase; color: var(--text-dim); }

/* Issue strip: a reported problem rides the board or plan card it affects
   (2026-08-29). Amber, expandable, alert-gold convention. */
.iss-strip { margin: 8px 0 0; border: 1px solid rgba(255, 200, 90, .45); border-radius: 9px;
  background: rgba(255, 200, 90, .12); }
.iss-strip > summary { list-style: none; cursor: pointer; padding: 8px 11px;
  font-size: 12.5px; font-weight: 900; color: #ffd98a; }
.iss-strip > summary::-webkit-details-marker { display: none; }
.iss-strip > summary::after { content: ' \203A'; }
.iss-strip[open] > summary::after { content: ' \2304'; }
.iss-strip-p { margin: 0 11px 9px; font-size: 12.5px; font-weight: 700; color: #fff;
  line-height: 1.45; text-wrap: pretty; }
.tp-card .iss-strip { margin: 8px 12px 0; }

/* Offline banner (2026-08-29): fixed above the nav, high contrast. */
#offlineBanner { position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  z-index: 3000; background: #c8b893; color: #14181f; font-size: 12.5px; font-weight: 900;
  text-align: center; padding: 8px 12px; letter-spacing: .3px; }

/* Countdown chip beside the next departure ("In 7 Min"): the signature of
   the 2026-08-29 design pass, one look answers the only question that
   matters at a stop. */
.dep-in { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: #7fdcba; color: #14181f; font-size: 10.5px; font-weight: 900; letter-spacing: .3px; }

/* Near Me Now, Home's live board (2026-08-29). Explicit colors: a bare
   <button> inherits UA text colors that render dim on dark. */
.hn-row { width: 100%; background: transparent; border: 0; font-family: inherit; text-align: left; cursor: pointer; color: #fff; }
.hn-row .near-name { color: #fff; font-weight: 800; }
.hn-row .near-sub { color: var(--text-dim); }
.hn-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hn-right { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.hn-next { font-size: 13.5px; font-weight: 900; color: #fff; }
.hn-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* Reverse controls (2026-08-29). */
.tc-rev { flex: none; background: transparent; border: 1px solid var(--line); border-radius: 9px;
  color: #fff; font-size: 16px; font-weight: 900; font-family: inherit; cursor: pointer; padding: 5px 9px; margin-right: 4px; }
.tp-swap { display: block; margin: 2px 0 0 auto; background: transparent; border: 0; color: var(--nav-active);
  font-size: 12.5px; font-weight: 800; font-family: inherit; cursor: pointer; padding: 4px 0; }

/* Trip Options summary: contrast header, thicker white frame, one tappable
   row per option, expandable service comparison (Cris, 2026-08-29). */
.tp-summary { margin: 12px 0 4px; border: 2.5px solid #fff; border-radius: 14px; overflow: hidden; background: var(--bg-raised); }
.tp-summary-head { background: #c8b893; color: #14181f; font-size: 13px; font-weight: 900;
  letter-spacing: .6px; text-transform: uppercase; padding: 9px 13px; }
.tp-sumopt { border-top: 1px solid var(--line); }
.tp-sumopt:first-of-type { border-top: none; }
.tp-sumrow { display: grid; grid-template-columns: 30px 1fr auto 14px; align-items: center; gap: 9px;
  width: 100%; padding: 11px 13px 7px; background: transparent; border: 0; text-align: left;
  font-family: inherit; cursor: pointer; }
.tp-sumn { width: 24px; height: 24px; border-radius: 50%; background: #aebdc9; color: #14181f;
  font-size: 13px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; }
.tp-sumlab { font-size: 13.5px; font-weight: 800; color: #fff; min-width: 0; text-wrap: pretty; }
.tp-sumarr { font-size: 12.5px; font-weight: 900; color: #7fdcba; white-space: nowrap; }
.tp-sumsvc { padding: 0 13px 10px 52px; }
.tp-sumsvc > summary { list-style: none; cursor: pointer; font-size: 11px; font-weight: 900;
  letter-spacing: .4px; text-transform: uppercase; color: var(--text-dim); }
.tp-sumsvc > summary::-webkit-details-marker { display: none; }
.tp-sumsvc > summary::after { content: ' \203A'; }
.tp-sumsvc[open] > summary::after { content: ' \2304'; }
.tp-sumsvc[open] > summary { margin-bottom: 8px; }

/* The options ride sideways: one full-width card per slide, snap scrolling,
   dots above. Height follows the active card via JS. The swipe zone is its
   own shaded block behind a divider so the dots read as the CARDS' control,
   never the summary's (Cris, 2026-08-29). */
.tp-swipezone { margin-top: 16px; padding: 10px 8px 12px; border-radius: 16px;
  background: rgba(255, 255, 255, .045); border-top: 2px solid var(--line); }
/* The results announce themselves; planTrip scrolls here (2026-08-29). */
.tp-results-head { margin: 16px 0 2px; padding-top: 14px; border-top: 2px solid var(--line);
  font-size: 17px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; color: #fff; }
.tp-dots { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 10px; }
.tp-dots-label { font-size: 10.5px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase;
  color: var(--text-dim); margin-right: 6px; }
.tp-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.28);
  border: 0; padding: 0; cursor: pointer; }
.tp-dot.is-on { background: #fff; }
.tp-carousel { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none; transition: height .2s ease; }
.tp-carousel::-webkit-scrollbar { display: none; }
.tp-carousel > .tp-card { flex: 0 0 100%; min-width: 100%; scroll-snap-align: start; }
.ov-tile { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 8px; }
.ov-tile .ic { width: 17px; height: 17px; }
.ov-map { width: 100%; margin-top: 10px; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 10px; padding: 10px; color: #fff; font: 900 13px/1.2 Lato, system-ui, sans-serif; cursor: pointer; }

.stp { display: block; width: 100%; text-align: left; background: rgba(255,255,255,.04);
  border: 1px solid var(--line); border-radius: 12px; margin-bottom: 9px; padding: 0 0 6px;
  color: var(--text); cursor: pointer; font-family: inherit; overflow: hidden; }
.stp-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
  padding: 9px 12px 9px 8px; font: 900 14px/1.2 Lato, system-ui, sans-serif; }
.stp-n { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 50%; background: rgba(0,0,0,.25); font-size: 13px; }
.stp-wait .stp-n { background: none; width: 24px; }
.stp-n .ic { width: 16px; height: 16px; }
.stp-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stp-map { font-size: 11.5px; font-weight: 900; opacity: .85; white-space: nowrap; }
.stp-row { display: grid; grid-template-columns: 74px 74px 1fr; align-items: baseline; gap: 8px;
  padding: 5px 12px; }
.stp-row .stp-k { font-size: 11px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; color: var(--text-dim); }
.stp-row b { font-size: 14px; color: #fff; white-space: nowrap; }
.stp-at { min-width: 0; font-size: 13px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stp-what { display: block; font-size: 13.5px; font-weight: 800; color: #fff; text-wrap: pretty; }
/* Wait interludes: always white with dark text, never numbered. */
.stp-wait { background: #f2ede2; border-color: #d9d2c2; cursor: default; }
.stp-wait .stp-head { color: #14181f; padding-bottom: 2px; }
.stp-wait .stp-row .stp-k { color: #5a5344; }
.stp-wait .stp-row b { color: #14181f; }

/* ===== Trip Viewer modal ===== */
#tripViewer { position: fixed; inset: 0; z-index: 4000; display: none; background: rgba(5,7,10,.72);
  align-items: center; justify-content: center; padding: 12px; }
#tripViewer.is-open { display: flex; }
.tv-card { width: min(560px, 100%); height: min(84vh, 700px); display: flex; flex-direction: column;
  background: #0e1116; border: 1px solid rgba(255,255,255,.25); border-radius: 16px; overflow: hidden; }
/* Header carries the CURRENT STEP's color (set inline); title never changes. */
.tv-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #14181f;
  font: 900 15px/1.2 Lato, system-ui, sans-serif; color: #fff; transition: background .18s; }
.tv-head .tv-title { flex: 1; min-width: 0; }
.tv-x { flex: none; width: 34px; height: 34px; border-radius: 10px; background: rgba(0,0,0,.25);
  border: 1px solid currentColor; color: inherit; font: 900 20px/1 Lato, system-ui, sans-serif; cursor: pointer; }
.tv-sub { padding: 8px 14px; background: #0e1116; border-bottom: 1px solid var(--line);
  font: 800 13px/1.35 Lato, system-ui, sans-serif; color: #fff; text-wrap: pretty; }
#tvMap { flex: 1; min-height: 0; background: #0b0d11; }
.tv-controls { display: grid; grid-template-columns: 52px 1fr 52px; gap: 8px; align-items: center;
  padding: 10px 12px; }
.tv-controls button { background: rgba(255,255,255,.07); border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 10px; padding: 10px 12px; color: #fff; font: 900 16px/1 Lato, system-ui, sans-serif; cursor: pointer; }
#tvPos { text-align: center; font: 800 13px/1.2 Lato, system-ui, sans-serif; color: var(--text); }

/* Operator logo tiles: white chip behind marks drawn for light backgrounds. */
.sys-logo { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 24px;
  background: #fff; border-radius: 6px; padding: 2px; }
.sys-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

/* Collapsed card head: three fixed fact slots, label over value. */
.tp-sum-grid { display: grid; grid-template-columns: 1fr 1.35fr .95fr 1fr; gap: 8px; margin-top: 6px; }
.tp-sum-cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tp-sum-cell .tp-sum-k { font-size: 10.5px; font-weight: 900; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-dim); }
.tp-sum-cell b { font-size: 13.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Preference chips: squared and uniform like every other button, three fixed
   equal slots per row so no pill resizes with its text. */
.tp-prefwrap { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.tp-pref { border-radius: 11px; padding: 10px 6px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; text-align: center; min-width: 0; }
/* The fare footnote is a labeled bullet list, not narrative. */
.tp-farenote { list-style: none; padding: 10px 2px 0; margin: 8px 0 0; border-top: 1px solid var(--line); }
.tp-farenote li { position: relative; padding-left: 14px; margin: 4px 0; font-size: 12px;
  font-weight: 800; color: var(--text); }
.tp-farenote li::before { content: ''; position: absolute; left: 0; top: .5em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--text-dim); }

/* Step card rework (Cris, 2026-08-25): the stop name is the payload, so it
   gets its own full-width line and wraps, never truncates. Direction rides
   directly under the header in the service's color. */
/* The line's color, pulled toward white so a dark line (River Line navy)
   can never sit unreadable on the dark card. */
.stp-dir { margin: 8px 12px 2px; font-size: 13px; font-weight: 900;
  color: color-mix(in srgb, var(--c, #fff) 55%, #fff); }
.stp-fact { display: flex; align-items: baseline; gap: 10px; padding: 6px 12px 0; }
.stp-fact .stp-k { font-size: 11px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase;
  color: var(--text-dim); min-width: 62px; }
.stp-fact b { font-size: 14px; color: #fff; white-space: nowrap; }
.stp-place { padding: 1px 12px 4px 84px; font-size: 14.5px; font-weight: 800; color: #fff;
  line-height: 1.3; text-wrap: pretty; }
/* A shuttle-stop endpoint links to its full stop card (photo, connections). */
.stp-place-link { cursor: pointer; }
/* Bare chevron: the place name is the tap target, no pill (2026-08-29). */
.stp-place-go { display: inline-block; margin-left: 7px;
  font: 900 14px/1 Lato, system-ui, sans-serif; color: var(--text-dim);
  white-space: nowrap; vertical-align: 2px; }
.stp-meta { border-top: 1px solid rgba(255,255,255,.08); margin-top: 6px; padding-top: 8px;
  flex-wrap: wrap; }
.stp-meta .stp-k { min-width: 0; }
/* Compact live and connection chips. */
.tp-live { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 4px 12px 6px;
  font-size: 13px; font-weight: 800; color: #fff; }
.tp-conn { border-radius: 8px; padding: 3px 8px; font-size: 11.5px; font-weight: 900; }
.tp-conn-ok { background: rgba(17,123,104,.25); color: #7fdcba; }
.tp-conn-tight { background: rgba(226,160,74,.2); color: #f0c186; }
.tp-conn-miss { background: rgba(200,60,60,.25); color: #f0a0a0; }

/* ===== Alerts v2 + Current (Cris's spec, 2026-08-25) ===== */
.al2-crumb { margin: 2px 0 12px; font-size: 13px; font-weight: 700; color: var(--text); text-wrap: pretty; }
.al2-crumb b { color: #fff; }
.al2-sec { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 10px;
  background: rgba(255,255,255,.03); }
.al2-sec.is-dead { opacity: .5; }
.al2-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.al2-sec-head > span { font-size: 14px; font-weight: 900; color: #fff; }
.al2-sec-body { margin-top: 8px; }
.al2-note { margin: 8px 0 0; font-size: 12.5px; font-weight: 700; color: var(--text-dim); text-wrap: pretty; }
.al2-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0; }
.al2-chip { background: rgba(255,255,255,.06); border: 1.5px solid var(--line); border-radius: 11px;
  padding: 8px 12px; font: 800 12.5px/1.2 Lato, system-ui, sans-serif; color: var(--text);
  cursor: pointer; font-family: inherit; }
.al2-chip.is-on { background: var(--accent); border-color: #fff; color: #fff; }
.al2-line { margin-top: 4px; max-height: 340px; overflow-y: auto; }
.al2-stop { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font-family: inherit; }
.al2-stopname { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 800; color: var(--text); text-wrap: pretty; }
.al2-stop.is-on .al2-stopname { color: #fff; }
.al2-mine .al2-stopname b { color: #fff; }
.al2-away { flex: none; font-size: 11px; font-weight: 800; color: var(--text-dim); }
.al2-stop.is-on .al2-away { color: var(--ok); }
.al2-nav { display: flex; gap: 9px; margin-top: 14px; }
.al2-nav .btn-primary { flex: 1; }
.al2-back { flex: none; background: var(--bg-raised); border: 1px solid var(--line); border-radius: 11px;
  padding: 12px 16px; font: 900 14px/1 Lato, system-ui, sans-serif; color: var(--text);
  cursor: pointer; font-family: inherit; }
.al-card-v2 { cursor: pointer; flex-wrap: wrap; }
.al-line { display: flex; align-items: center; gap: 7px; margin: 3px 0; font-size: 12.5px; font-weight: 800; color: #fff; text-wrap: pretty; }
.al-edit-hint { flex: none; font-size: 11.5px; font-weight: 900; color: var(--nav-active); }
.al-cur-row { border-color: var(--signal); flex-wrap: wrap; }
.al-cur-acts { display: flex; gap: 7px; width: 100%; }
.al-cur-acts button { flex: 1; background: rgba(255,255,255,.06); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 4px; font: 800 12px/1 Lato, system-ui, sans-serif;
  color: var(--text); cursor: pointer; font-family: inherit; }
.cur-leg { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; overflow: hidden;
  background: rgba(255,255,255,.03); padding-bottom: 10px; }
.cur-leg .stp-row, .cur-leg .stp-place, .cur-leg .al2-note, .cur-leg .al2-chips,
.cur-leg .cur-live, .cur-leg .cur-vehlabel, .cur-leg .al2-line, .cur-leg .hs-help,
.cur-leg .cur-sec { margin-left: 12px; margin-right: 12px; }
.cur-leg-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 8px; }
.cur-leg-head span { font-size: 13px; font-weight: 900; opacity: .85; }
.cur-leg-head b { font-size: 14.5px; text-wrap: pretty; }
.cur-live { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 13px; font-weight: 800; color: #7fdcba; text-wrap: pretty; }
.cur-live-idle { color: var(--text-dim); }
.cur-vehlabel { display: block; margin-top: 10px; font-size: 12.5px; font-weight: 800; color: var(--text); }
.cur-veh { display: block; width: 100%; margin-top: 5px; background: rgba(255,255,255,.06);
  border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px;
  font: 700 14px/1.2 Lato, system-ui, sans-serif; color: #fff; font-family: inherit; }
.cur-veh::placeholder { color: color-mix(in srgb, #fff 45%, transparent); }
.cur-sec { margin-top: 12px; }
.cur-confirm .ic-title { margin-bottom: 8px; }
.cur-check { display: flex; align-items: center; gap: 9px; margin: 14px 0; font-size: 14.5px; font-weight: 800; color: #fff; }
.cur-check input { width: 20px; height: 20px; accent-color: var(--accent); }
.cur-confirm .btn-primary { width: 100%; }
.ov-cur { margin-top: 8px; border: 1.5px solid var(--ok); color: #fff; }

/* ===== My Stats + trip ratings ===== */
.ms-rate .ic-title, .ms-stats .ic-title { margin-bottom: 6px; }
.ms-leg { border: 1px solid var(--line); border-radius: 12px; margin: 10px 0; overflow: hidden; padding-bottom: 8px; background: rgba(255,255,255,.03); }
.ms-leg .cur-leg-head { margin-bottom: 4px; }
.ms-whole { background: var(--bg-raised); color: #fff; }
.ms-raterow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; }
.ms-raterow > span:first-child { font-size: 13.5px; font-weight: 800; color: var(--text); }
.ms-dots { display: flex; gap: 4px; }
.ms-dots button { background: none; border: 0; cursor: pointer; font-size: 20px; line-height: 1;
  color: rgba(255,255,255,.22); padding: 2px; font-family: inherit; }
.ms-dots button.is-on { color: var(--accent); }
.ms-rate .btn-primary { width: 100%; margin-top: 12px; }
.ms-skip, .ms-del { display: block; width: 100%; margin-top: 9px; text-align: center; }
.ms-del { border-color: #a04b4c; color: #f0a0a0; }
.ms-stats .ov { margin-top: 8px; }

/* ===== 2026-08-26 review round: preview labels, service bullets, sticky options ===== */
/* Named endpoints on the Trip Preview map. */
.tv-lbl { position: absolute; transform: translate(-50%, -170%); white-space: nowrap;
  max-width: 230px; overflow: hidden; text-overflow: ellipsis;
  background: #fff; color: #14181f; border-radius: 8px; padding: 4px 9px;
  font: 800 11.5px/1.2 Lato, system-ui, sans-serif;
  box-shadow: 0 1px 6px rgba(0,0,0,.55); pointer-events: none; }
.tv-lbl-b { transform: translate(-50%, 70%); }
.tv-lbl-a::after, .tv-lbl-b::before { content: ''; }
/* Service bullets are tappable; official marks sit on white tiles. */
button.ov-tile { border: 0; cursor: pointer; font-family: inherit; padding: 0; }
.ov-tile-logo { background: #fff; display: inline-flex; align-items: center; justify-content: center; }
.ov-tile-logo img { width: 78%; height: 78%; object-fit: contain; }
.ov-svcpop { display: flex; align-items: center; gap: 9px; margin-top: 8px;
  background: rgba(255,255,255,.07); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 11px; }
.ov-svcpop[hidden] { display: none; }
.ov-svcpop-t { flex: 1; min-width: 0; font-size: 13px; font-weight: 800; color: #fff; text-wrap: pretty; }
.ov-svcpop-x { flex: none; background: none; border: 0; color: var(--text-dim);
  font-size: 19px; line-height: 1; cursor: pointer; font-family: inherit; padding: 0 2px; }
/* Numbered options with a head that pins while its steps scroll. */
/* Non-winner options get their own slate header so every option reads as a
   tappable, scroll-anchoring header, not a flat card (Cris, 2026-08-26). */
.tp-opt-plain { background: linear-gradient(90deg, #3f5a74, #587e95); color: #fff; }
.tp-card-top { cursor: pointer; }
.tp-card { position: relative; }
/* Sticky needs overflow visible on the OPEN card; the top strip carries its
   own clip so the banner's corners stay rounded. top is -20px because the
   scroller's own 20px padding is scrollable space: pinned at 0 the header
   floated 20px down and steps slid visibly past ABOVE it (Cris,
   2026-08-26, "stuff scrolling up above the header"). */
.tp-card.is-open { overflow: visible; }
.tp-card.is-open .tp-card-top { position: sticky; top: -20px; z-index: 6; }
.tp-card-top { background: var(--bg-raised); overflow: hidden; border-radius: 12px 12px 0 0; }
.tp-card-top.is-stuck { box-shadow: 0 4px 14px rgba(0,0,0,.5); }
/* Slim smoothly while pinned: a display:none snap shifted the whole list. */
.tp-card-top .tp-sum-time, .tp-card-top .tp-sum-grid, .tp-card-top .tp-flagrow {
  max-height: 90px; transition: max-height .25s ease, opacity .18s ease, margin .25s ease; overflow: hidden; }
.tp-card-top.is-stuck .tp-sum-time, .tp-card-top.is-stuck .tp-sum-grid,
.tp-card-top.is-stuck .tp-flagrow { max-height: 0; opacity: 0; margin: 0; }
.tp-card-top.is-stuck .tp-card-head { padding-top: 6px; padding-bottom: 6px; min-height: 0; }
/* Issues delivery rows: full width, nothing to orphan. */
.iss-dlv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; margin-bottom: 8px;
  background: rgba(255,255,255,.03); }
.iss-dlv-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.iss-dlv-txt b { font-size: 13.5px; color: #fff; }
.iss-dlv-txt span { font-size: 11.5px; font-weight: 700; color: var(--text-dim); text-wrap: pretty; }
/* Stop card: copyable full address; the shown corner never orphans. */
.sd-addr { text-wrap: pretty; }
.sd-copy { display: block; margin-top: 8px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.35); border-radius: 9px; padding: 8px 12px;
  font: 800 12.5px/1 Lato, system-ui, sans-serif; color: #fff; cursor: pointer; font-family: inherit; }

/* ===== About: PCC cross-promo banner + contact form (Cris's copy, 2026-08-26) ===== */
.ab-promo { display: flex; flex-direction: column; gap: 3px; margin-bottom: 16px;
  background: linear-gradient(90deg, #8a7420, #c4a82b); border-radius: 12px;
  padding: 13px 14px; text-decoration: none; }
.ab-promo-t { font: 900 14.5px/1.3 Lato, system-ui, sans-serif; color: #14181f; text-wrap: pretty; }
.ab-promo-s { font: 800 12.5px/1.3 Lato, system-ui, sans-serif; color: #14181f; opacity: .85; text-wrap: pretty; }
.ab-sign { margin: 14px 0 18px; font-style: italic; font-weight: 800; color: #fff; }
.contact-form { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 16px; }
.contact-form label { display: flex; flex-direction: column; gap: 4px;
  font: 800 12.5px/1.2 Lato, system-ui, sans-serif; color: var(--text-dim); }
.contact-form input, .contact-form textarea { background: rgba(255,255,255,.06);
  border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px;
  font: 700 14px/1.3 Lato, system-ui, sans-serif; color: #fff; font-family: inherit; }
.contact-form textarea { min-height: 110px; resize: vertical; }
.contact-form button:disabled { opacity: .6; }
.ab-honeypot { position: absolute; left: -9999px; }
.form-note { font-size: 12.5px; font-weight: 700; color: var(--text-dim); text-wrap: pretty; margin: 0; }
.form-note.ok { color: #7fdcba; }
.form-note.error { color: #f0a0a0; }
.about-card a { color: var(--nav-active); }

/* Fat vehicle touch targets (Cris, 2026-08-26: on Princeton it is nearly
   impossible to tap a vehicle instead of the line). The pseudo expands each
   vehicle's hit box to ~44px without changing how it looks; markers ride the
   marker pane, so inside this halo the vehicle always beats the line. */
.live-dot, .njt-veh { position: relative; }
.live-dot::after { content: ''; position: absolute; inset: -17px; border-radius: 50%; }
.njt-veh::after { content: ''; position: absolute; inset: -13px -12px; border-radius: 12px; }

/* About legibility pass (Cris, 2026-08-26): near-white body text, bigger
   line, brighter fine print and form labels. No grey walls. */
.about-card .ab-note { font-size: 15px; line-height: 1.6; color: #f2eee9; }
.about-card .ab-sign { color: #fff; font-size: 15px; }
.about-card .ic-fine { font-size: 13px; line-height: 1.5; color: #c9c2ba; }
.about-card .contact-form label { color: #e6e0da; font-size: 13px; }
.about-card .form-note { color: #c9c2ba; }
.about-card .rail-sublabel { margin-top: 4px; }


/* ===== Design pass 2026-08-26 ===== */
/* The planner CTA is a go action: green, like every go. */
#tpPlan { background: var(--ok); }
/* NEXT tag on the highlighted departure chip, in the START/END cap style. */
/* Stacked line-color dots on a deduped picker row (one row per PLACE). */
.pk-swstack { display: inline-flex; gap: 3px; flex: none; align-items: center; }
.pk-swstack .pk-sw { width: 11px; height: 11px; border-radius: 4px; }
/* State-zoom calm: at the whole-state view the network reads as coverage,
   not spaghetti; full weight returns as the rider closes in. */
.zoom-state .leaflet-overlay-pane path.rt-line { stroke-width: 1.75; }
.zoom-state .leaflet-overlay-pane path.rt-line:not(.rt-mute) { stroke-opacity: .55; }
.zoom-state .leaflet-overlay-pane path.rr-line { stroke-width: 2; stroke-opacity: .6; }
/* Map attribution, styled for the dark shell (a license term, always shown). */
.leaflet-control-attribution { background: rgba(14,17,22,.72) !important; color: var(--text-dim) !important; font-size: 10px; padding: 1px 6px; }
.leaflet-control-attribution a { color: var(--text-dim) !important; font-weight: 700; }
/* Settings rows: full-width and left-aligned inside the sheet. */
.about-card .link-card { width: 100%; text-align: left; font-size: inherit; }
/* At the whole-state view the rail STATION dots come off too: the lines
   carry the story; stations return as the rider closes in (2026-08-26). */
.zoom-state .rail-x { display: none; }
/* The line strip atop a stop card is a button back to the line (2026-08-26). */
.sd-line-link { cursor: pointer; font-family: inherit; }
.sd-line-go { flex: none; font-size: 20px; line-height: 1; opacity: .9; }
/* One-level-up back button in the top bar (2026-08-28). */
.appbar-back { flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--bg-raised);
  border: 1px solid var(--line); color: var(--text); display: flex; align-items: center; justify-content: center;
  cursor: pointer; margin-right: 2px; }
.appbar-back .ic { width: 21px; height: 21px; }
/* Curb-pickup booking terms live inside their own grid row (2026-08-28). */
.rc-curb-note { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-dim); margin-top: 3px; }
.rc-curb-note a { color: #8fc0e0; font-weight: 900; white-space: nowrap; }
/* County view: compact service rows + section labels (2026-08-28). */
.cty-sec { margin: 10px 4px 4px; font-size: 12.5px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; color: var(--text-dim); }
.cty-row { display: flex; align-items: center; gap: 10px; padding: 10px 8px; border-top: 1px solid var(--line); cursor: pointer; }
.cty-row .browse-line-name { flex: 1; min-width: 0; }

/* Connections strips as standard rows (Cris, 2026-08-28: one grammar; the
   row is the action, the meets line is data). */

/* Drawn-route badge wrapper + the direction switch beneath it. */
.busline-wrap { position: absolute; z-index: 1030; top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: min(92%, 420px); }
.busline-wrap .busline-badge { position: static; transform: none; }
.busdir-bar { display: flex; gap: 4px; background: rgba(11,13,17,.88); border: 1px solid #3a4453;
  border-radius: 999px; padding: 3px; }
.bdb-half { border: 0; background: transparent; border-radius: 999px; padding: 6px 11px;
  font: 900 11.5px/1 Lato, system-ui, sans-serif; color: var(--text-dim); cursor: pointer;
  white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.bdb-half.is-active { background: #fff; color: #0b0d11; }

/* ===== Nested station strips (Cris, 2026-08-28: rows all the way down;
   expand a station -> its board inline + every connecting service as a
   standard row that expands to ITS board; nothing pops over the page). ===== */
.cso-stop-x { border: 0; margin: 0; }
.cso-stop-x > summary { list-style: none; cursor: pointer; }
.cso-stop-x > summary::-webkit-details-marker { display: none; }
.cso-stop-x > summary .svc-go { transition: transform .15s; }
.cso-stop-x[open] > summary .svc-go { transform: rotate(90deg); }
.cso-stop { width: 100%; }
.cso-stop .crt-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 800; color: #fff; text-wrap: pretty; }
.cso-x-body { margin: 4px 0 10px 24px; display: flex; flex-direction: column; gap: 6px; }
.cso-x-body .svc-row { width: 100%; margin: 0; }
.cso-svc { border: 0; }
.cso-svc > summary { list-style: none; cursor: pointer; }
.cso-svc > summary::-webkit-details-marker { display: none; }
.cso-svc[open] > summary .svc-go { transform: rotate(90deg); }
.cso-svc > .cso-inline { margin: 6px 0 8px 0; }
.cso-inline .cso-board { margin: 0; }
.cso-walk { font: 800 11px/1 Lato, system-ui, sans-serif; color: var(--text-dim); white-space: nowrap; }
.cso-wait { font: 700 12px/1.4 Lato, system-ui, sans-serif; color: var(--text-dim); margin: 4px 0; }
.cso-none { font: 700 12.5px/1.45 Lato, system-ui, sans-serif; color: #4a5563; margin: 6px 0 2px; }
.cso-full { display: block; margin-top: 10px; background: transparent; border: 0; padding: 0;
  font: 900 12.5px/1 Lato, system-ui, sans-serif; color: #1a5f9e; cursor: pointer; }
.conn-bar-l { display: flex; align-items: center; gap: 7px; min-width: 0; }
.conn-live-map { display: flex; align-items: center; gap: 7px; background: transparent; border: 0;
  padding: 4px 0; font: 900 12.5px/1.35 Lato, system-ui, sans-serif; color: #7fb2e5; cursor: pointer; }
.conn-tag { font: 900 10.5px/1 Lato, system-ui, sans-serif; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-dim); border: 1px solid #3a4453; border-radius: 6px; padding: 4px 7px; }
.pop-live { display: inline-flex; align-items: center; gap: 5px; }
.pop-live .dp-live-dot { width: 7px; height: 7px; flex: none; }
.path-row .dp-live-dot { width: 7px; height: 7px; flex: none; margin-left: auto; }
.path-row .path-in { flex: none; margin-left: 0; }
.pop-late { color: #b3261e; font-weight: 900; }
.pop-ontime { color: #1f8a5f; font-weight: 900; }

/* Route card head: no wrapped agency name, links not pills (Cris, 2026-08-28). */
.rc-sys-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-web { background: transparent; color: #8fc0e0; border-radius: 0; padding: 6px 4px; }
button.rc-web.rc-alert { background: transparent; }
.rc-curb-note { font-size: 11.5px; }
/* Diagram: the START/END cap must not push the dot off the rail line, and
   stop names balance their wraps instead of stranding a word. */
.rd-stop { position: relative; }
.rd-cap { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); margin: 0; }
.rd-lab { text-wrap: balance; }

/* Saved routes as standard rows (Cris, 2026-08-28): identity | name + agency
   sub | bell | caret; the save picker's rows and search. */
.route-card { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.route-card .svc-id { flex: none; width: 48px; }
.rc-saved { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rc-saved .rc-name { font-size: 14px; font-weight: 900; color: #fff; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.rc-sub { font-size: 12px; font-weight: 700; color: var(--text-dim); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.rp-search { width: 100%; margin: 10px 0; background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 12px; color: #fff; font: 700 14px/1.2 Lato, system-ui, sans-serif; }
.rp-search::placeholder { color: var(--text-dim); }
.rp-row2 .svc-name { display: flex; flex-direction: column; gap: 2px; }
.svc-row .lg-glance { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


/* NJT bus chooser rows (had no styles at all: light UA buttons on the dark
   sheet, 2026-08-28 audit P0). Standard row grammar. */
.njt-pick { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.njt-pick-row { display: flex; gap: 6px; }
.npr-main { flex: 1; display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 11px; color: #fff; font: 900 14px/1.2 Lato, system-ui, sans-serif;
  cursor: pointer; text-align: left; min-height: 48px; }
.npr-sub { font: 700 11.5px/1.2 Lato, system-ui, sans-serif; color: var(--text-dim); }
.npr-map { flex: none; background: transparent; border: 1px solid var(--line); border-radius: 10px;
  padding: 0 12px; color: #8fc0e0; font: 900 12px/1.2 Lato, system-ui, sans-serif; cursor: pointer; }
/* Route-map bar directions match the card's compact direction rows. */
.rmb-dir { border-width: 1px; border-color: rgba(255,255,255,.55); border-radius: 10px; padding: 7px 10px; }
.rmb-dir .rmb-k { font-size: 12px; }
.rmb-dir .rmb-v { font-size: 11.5px; }
.rmb-note { font-size: 11.5px; font-weight: 800; }
/* Non-action data chips read flat; only buttons carry borders (audit (c)). */
.rdo-t { border: 0; }
.dp-alert { display: flex; align-items: center; gap: 7px; margin-top: 10px; background: transparent;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; width: 100%;
  justify-content: center; color: #8fc0e0; font: 900 12.5px/1 Lato, system-ui, sans-serif; cursor: pointer; }
.dp-alert .ic { width: 14px; height: 14px; }
.cso-facts { margin: 8px 0 10px; }
.cso-facts .bsp-k { color: var(--text-dim); }
.cso-facts .bsp-v { color: #fff; }
.dp-actions { display: flex; gap: 8px; margin-top: 10px; }
.dp-actions .dp-alert { margin-top: 0; flex: 1; }
.dp-actions-pop .dp-alert { color: #1a5f9e; border-color: #cdd6df; }
/* Alert stop-picker sheet list (had no rule at all). */
.ha-pickstops { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.ha-pickstops .svc-row { width: 100%; margin: 0; }

/* ===== Board card polish (Cris, 2026-08-29) ===== */
/* One shell: colored header band + the strip, a single bordered card. */
.cso-shell { border: 1px solid var(--line); border-left: 4px solid var(--c, var(--line));
  border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.03); }
.cso-shell .cso { border: 0; border-radius: 0; margin: 0; background: transparent; }
.cso-head { display: flex; align-items: center; gap: 8px; padding: 11px 12px;
  background: var(--c, #3a4453); color: var(--ct, #fff); }
/* The service's NAME is the payload: it wraps, never "ATLANTIC CITY RAIL
   LI…" (the truncation rule, 2026-08-29). */
.csoh-name { flex: 1; min-width: 0; font: 900 14px/1.25 Lato, system-ui, sans-serif;
  text-transform: uppercase; letter-spacing: .04em; text-wrap: pretty; }
.csoh-act { flex: none; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px; padding: 6px 11px; color: var(--ct, #fff);
  font: 900 12px/1 Lato, system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
.cso-subbar { display: flex; align-items: center; padding: 8px 12px 0; }
/* Compact direction halves: the switch was towering over the facts. */
.cso-dirswitch { display: flex; gap: 6px; margin: 10px 0 2px; }
.cso-dirswitch .bsw-half { flex: 1; padding: 8px 10px; font-size: 12px; line-height: 1.25;
  border-radius: 10px; min-height: 0; }
.cso-links { margin: 4px 0 2px; }
/* Departure row anatomy: time+train left column, destination + live line
   in the middle, caret right. Nothing wraps into a dangling word. */
.pop-dep-btn { align-items: center; }
.pd-l { flex: none; width: 86px; display: flex; flex-direction: column; gap: 2px; }
.pd-l b { font-size: 13.5px; }
.pd-l .pop-dep-no { white-space: nowrap; }
.pd-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pd-dest { font: 800 12.5px/1.3 Lato, system-ui, sans-serif; color: #14181f; text-wrap: pretty; }
.pd-live { display: flex; align-items: center; gap: 5px; }
.pd-live .dp-live-dot { width: 7px; height: 7px; flex: none; }
.pop-foot { margin: 9px 0 0; font: 800 11px/1.5 Lato, system-ui, sans-serif; color: #4a5563;
  text-wrap: pretty; }
.pop-link { display: inline-block; margin-top: 4px; font: 900 12px/1.2 Lato, system-ui, sans-serif; }
/* ONE action color convention app-wide: Save is the heart pink, Alert is
   the bell gold (Cris, 2026-08-29: "consistent colors for save and alert
   throughout the app"). */
.act-save { color: #ff7ba6 !important; border-color: #a3486a !important; }
.act-save.is-on { color: #ff9dbc !important; border-color: #ff7ba6 !important; }
.act-alert { color: #e3c34c !important; border-color: #8a793a !important; }
.dp-actions-pop .act-save { color: #c2185b !important; border-color: #e5b6c6 !important; }
.dp-actions-pop .act-alert { color: #8a6d00 !important; border-color: #e0d3a0 !important; }
.csoh-act.act-save { color: var(--ct, #fff) !important; border-color: rgba(255,255,255,.4) !important; }
.csoh-act.act-save.is-on { background: rgba(255,255,255,.9); color: #c2185b !important; }

/* The stop card's box already says "Departures Today"; the row's own
   label would say it twice (2026-08-29). */

/* ===== Systemization sweep, 2026-08-29 (constitution pass) ===== */
/* Connection rows on cards: fixed columns (identity | name | next | go),
   the same data chips carry as tags on tiles, in row form. */
.conn-rows { display: flex; flex-direction: column; }
.conn-row { display: grid; grid-template-columns: auto 1fr auto 14px; align-items: center; gap: 9px;
  width: 100%; text-align: left; background: none; border: 0; border-radius: 0;
  border-bottom: 1px solid rgba(255,255,255,.09);
  color: #fff; font: 800 13.5px/1.3 Lato, system-ui, sans-serif; padding: 10px 4px 10px 2px; cursor: pointer; }
.conn-rows .conn-row:last-child { border-bottom: 0; }
.conn-row .cr-id { display: inline-flex; align-items: center; gap: 5px; font-weight: 900; }
.conn-row .cr-id:empty { display: none; }
.conn-row .cr-name { min-width: 0; }
.conn-row .cr-next { font-size: 12px; font-weight: 800; white-space: nowrap;
  color: color-mix(in srgb, #fff 76%, var(--bg)); }
.conn-row .cr-go { font-size: 16px; font-weight: 900; opacity: .8; justify-self: end; }
/* Tile's single next-departure line: label, time, countdown, one row. */
.dep-next { display: flex; align-items: baseline; gap: 8px; margin-top: 9px; font-size: 13px; color: #fff; }
.dep-next .dpr-k { font-size: 10.5px; font-weight: 900; letter-spacing: .6px; text-transform: uppercase;
  color: color-mix(in srgb, #fff 65%, var(--bg)); }
.dep-next .dpr-t { font-weight: 900; }
.dep-next .dpr-s { font-size: 12px; font-weight: 800; color: color-mix(in srgb, #fff 76%, var(--bg)); }
/* Card-embedded departure rows: same grid as the boards, tighter frame. */
.dp-rows-card { padding: 0; }
.dp-rows-card .dp-row { padding: 8px 4px; font-size: 14px; }
/* Bus chooser rows are EXACTLY the Services row form; the map cell is a
   fixed icon column, same place on every row. */
.svc-map { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 34px;
  border: 1px solid var(--line); border-radius: 9px; color: #cfe0ee; background: none; cursor: pointer; }
.svc-map .ic { width: 17px; height: 17px; }

/* Empty connections state: a plain labeled line, not a fake chip. */
.conn-none { margin: 4px 0 0; font-size: 13px; font-weight: 700; color: color-mix(in srgb, #fff 72%, var(--bg)); }
/* Connection rows inside stop tiles: slightly tighter than the card's. */
.node-info .conn-row { padding: 8px 3px 8px 8px; font-size: 13px; }

/* Connection identity swatch: fixed size, fixed place, every row. */
.conn-row .rr-sw { width: 12px; height: 12px; border-radius: 4px; flex: none; }
/* Planner: the Directions banner between the trip overview and its steps,
   and the Step label ahead of every step number (Cris, 2026-08-29). */
.tp-directions-h { margin: 16px 0 10px; padding: 10px; text-align: center; background: var(--bg-raised);
  border: 1px solid var(--line); border-radius: 10px; font-size: 15px; font-weight: 900;
  letter-spacing: 2px; text-transform: uppercase; color: #fff; }
.stp-id { display: inline-flex; align-items: center; gap: 5px; }
.stp-step { font-size: 11px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; opacity: .85; }