/* CYRAHOP — TARA visual language (ref: Cyrahop Rides.dc.html).
   Borrowed: palette, card anatomy, badge system, section rules,
   boarding-pass perforation, driver-inbox layout.
   NOT borrowed: the mockup's canonical-stop copy (§4 replaces it with the
   Mapbox geocoder), its "pod" vocabulary (§3.5 banned word), seat maps,
   QR codes, fare ledgers, counter-offer UI, liability waiver.
   Dark mode is designed, not inverted (§8). */

:root {
  /* brand — #00C9DE is a LIGHT cyan: it carries dark ink, never white text.
     White on #00C9DE is ~1.9:1 and fails WCAG AA outright. */
  --cyan:       #00C9DE;
  --cyan-press: #00A7BC;
  --on-cyan:    #04222A;

  /* surfaces */
  --bg:           #F5FAFB;
  --surface:      #FFFFFF;
  --surface-tint: #EDF9FB;

  /* ink */
  --text:       #04222A;
  --text-muted: #4E6C74;
  --hairline:   #E3EDEF;

  /* status — always paired with a glyph + word, so cards survive grayscale */
  --success:      #0B6B4B;
  --success-tint: #E3F5EC;
  --warning:      #7A3E00;
  --warning-tint: #FFF1DC;
  --error:        #9C2B1E;
  --error-tint:   #FBE6E3;

  /* geometry — radius 8 default, 14 cards, full pills */
  --radius:    14px;
  --radius-sm: 8px;

  /* exactly two elevations */
  --shadow:    0 1px 2px rgba(4,34,42,0.06);
  --shadow-lg: 0 8px 24px rgba(4,34,42,0.10);

  --tap: 48px;

  /* --- back-compat aliases: the component layer below still uses these --- */
  --cyan-dark:  var(--cyan-press);
  --brand:      var(--cyan);
  --cream:      var(--bg);
  --ink:        var(--text);
  --muted:      var(--text-muted);
  --border:     var(--hairline);
  --brown:      var(--warning);
  --brown-dark: var(--warning);
  --pink:       var(--warning-tint);
  --yellow:     var(--warning-tint);
  --blue:       var(--surface-tint);
  /* Hero/trust/footer sit on deep ink; their accent is the light cyan tint
     (#7FE9F4), which is the only cyan that passes AA as text on #04222A. */
  --cyan-deep:  #04222A;
  --earth:      #7FE9F4;
  --sky:        #7FE9F4;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cyan: #00C9DE; --cyan-press: #7FE9F4; --on-cyan: #04222A;
    --bg: #04222A; --surface: #0A2F39; --surface-tint: #10404C;
    --text: #EDF9FB; --text-muted: #9FBAC1; --hairline: rgba(127,233,244,0.14);
    --success: #4ADE9E; --success-tint: #0C3A2C;
    --warning: #F0B95E; --warning-tint: #3A2A10;
    --error: #F09A8E; --error-tint: #3A1714;
    --shadow: 0 1px 2px rgba(0,0,0,0.45); --shadow-lg: 0 8px 24px rgba(0,0,0,0.6);
  }
}
:root[data-theme="dark"] {
  --cyan: #00C9DE; --cyan-press: #7FE9F4; --on-cyan: #04222A;
  --bg: #04222A; --surface: #0A2F39; --surface-tint: #10404C;
  --text: #EDF9FB; --text-muted: #9FBAC1; --hairline: rgba(127,233,244,0.14);
  --success: #4ADE9E; --success-tint: #0C3A2C;
  --warning: #F0B95E; --warning-tint: #3A2A10;
  --error: #F09A8E; --error-tint: #3A1714;
  --shadow: 0 1px 2px rgba(0,0,0,0.45); --shadow-lg: 0 8px 24px rgba(0,0,0,0.6);
}

*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--text); line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
/* Instrument Serif — display/headline moments only (§8: two families max) */
.cy-display { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; letter-spacing: -0.01em; }
/* Tabular figures: every time, code, seat count, peso amount, date, percentage */
.tabular, .cy-row__time, .cy-card-compact__time, .cy-rail__count,
.cy-amount, .cy-code, .cy-seats, .cy-pct, time {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
/* 16px minimum on inputs or iOS zooms the form under the user's thumb */
input, select, textarea { font-size: 16px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
h1, h2, p, ol, ul { margin: 0; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, select { font-family: inherit; }
a { color: var(--cyan); text-decoration: none; }
.tabular { font-variant-numeric: tabular-nums; }
.cy-muted { color: var(--muted); }
.cy-dot { color: var(--muted); margin: 0 .35rem; }
.cy-arrow { color: var(--muted); margin: 0 .3rem; }

/* ---- Header ---- */
.cy-header {
  position: sticky; top: 0; z-index: 40;
  height: 56px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; background: color-mix(in srgb, var(--cream) 95%, transparent);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.cy-header__brand {
  font-weight: 900; font-size: 22px; letter-spacing: -0.02em; color: var(--cyan);
  display: flex; align-items: center; gap: 6px;
}
/* §8 bans emoji in chrome — brand mark is a plain cyan dot. */
.cy-header__brand::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--cyan); flex: 0 0 auto;
}
.cy-header a { min-height: var(--tap); display: inline-flex; align-items: center; }

/* ---- Sticky search ---- */
.cy-searchbar {
  position: sticky; top: 56px; z-index: 30;
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 10px 20px;
}
/* The landing has no fixed app header — its hero carries the nav — so the
   search bar sticks to the very top there instead of clearing 56px. */
body > .cy-searchbar { top: 0; }
.cy-searchbar__field {
  width: 100%; min-height: var(--tap); text-align: left;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--cream); color: var(--muted);
  padding: 0 14px; font-size: 14px;
}
.cy-searchbar__field:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
.cy-searchbar__expanded { display: grid; gap: 10px; padding-top: 10px; }
.cy-searchbar__expanded input, .cy-searchbar__expanded select {
  width: 100%; min-height: var(--tap);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--cream); color: var(--ink); padding: 0 14px; font-size: 14px;
}

/* ============================================================
   TOP NAV + HERO — traced from mockup screen 2a (Web landing,
   1440px): white nav bar, cyan hero band split into copy (left)
   and search card (right). Collapses to the mobile 01 · LANDING
   layout below 1024px (band-only, card stacked under headline).
   ============================================================ */
.cy-nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 20px;
  background: var(--surface); border-bottom: 1px solid var(--hairline);
}
.cy-nav__left { display: flex; align-items: center; gap: 24px; }
.cy-nav__brand {
  display: flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 600; letter-spacing: .13em; color: var(--text);
}
.cy-nav__mark {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--text); box-shadow: inset 0 0 0 4px var(--cyan); flex: 0 0 auto;
}
.cy-nav__links { display: none; }
.cy-nav__link, .cy-nav__links a { color: var(--text-muted); font-size: 14px; font-weight: 500; }
.cy-nav__link--on { color: var(--text); padding-bottom: 2px; border-bottom: 2px solid var(--cyan); }
.cy-nav__right { display: flex; align-items: center; gap: 14px; }
.cy-nav__locale { display: none; font-size: 13px; color: var(--text-muted); }
.cy-nav__signin {
  font-size: 14px; font-weight: 600; color: var(--text);
  min-height: var(--tap); display: inline-flex; align-items: center;
}

/* Mobile-first hero is intentionally short — the search card must land
   within ~1.5 screens (§4.1). Desktop restores the mockup's fuller
   spacing/sizing explicitly at >=1024 below. */
.cy-herowrap {
  background: var(--cyan);
  background-image: radial-gradient(560px 320px at 92% 4%, rgba(255,255,255,.5), transparent 62%);
  padding: 16px 20px 20px; position: relative; overflow: hidden;
}
.cy-herowrap__grid { display: block; }

.cy-herocopy__badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(4,34,42,.9); color: var(--cyan-press, #7FE9F4);
  padding: 5px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
}
.cy-herocopy__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cy-herocopy__h1 {
  margin: 12px 0 0; font-size: 28px; line-height: 1.08;
  letter-spacing: -.02em; color: var(--on-cyan); text-wrap: balance;
}
.cy-herocopy__lead {
  margin: 8px 0 0; max-width: 520px; font-size: 14px; line-height: 1.5;
  color: rgba(4,34,42,.78);
}
.cy-herocopy__stats { margin-top: 12px; display: flex; gap: 16px; flex-wrap: wrap; }
.cy-herocopy__stat { font-size: 17px; color: var(--on-cyan); }
.cy-herocopy__statlabel {
  font-size: 9.5px; font-weight: 500; letter-spacing: .03em;
  color: rgba(4,34,42,.65); margin-top: 2px; max-width: 12ch;
}

/* Card lifted over the band, as in the mobile mockup; on desktop it sits
   in its own grid column instead (see >=1024 below). */
.cy-searchbar { position: static; background: none; border: 0; padding: 0; margin-top: 18px; }
.cy-search {
  background: var(--surface); border-radius: var(--radius); padding: 22px;
  box-shadow: var(--shadow-lg);
}
.cy-search__title {
  font-size: 11.5px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-muted);
}

.cy-search__od { display: flex; gap: 14px; margin-top: 16px; }
.cy-search__odfields { flex: 1; display: grid; gap: 9px; min-width: 0; }
.cy-spine { display: flex; flex-direction: column; align-items: center; padding-top: 18px; }
.cy-spine__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); }
.cy-spine__sq  { width: 9px; height: 9px; background: var(--text); }
.cy-spine__line {
  flex: 1; width: 1px; margin: 5px 0;
  background: repeating-linear-gradient(180deg, var(--text) 0 3px, transparent 3px 7px);
  opacity: .35;
}
/* Focused/filled field state (mockup's "TO" field once typed into). */
.cy-place:focus-within .cy-field__input,
.cy-place:focus-within input {
  border: 1.5px solid var(--cyan); background: var(--surface-lift, var(--surface-tint));
  box-shadow: 0 0 0 4px rgba(0,201,222,.14);
}

/* Stacked below 480px — three equal columns crushed the date value into the
   time range and the seat stepper. From 480px: explicit grid-template-areas,
   not implicit spanning — grid auto-placement runs strictly in DOM order,
   so an auto-placed "Seats" following a spanned "Leave between" gets bumped
   to its own new row instead of sharing one with "Date", wasting half the
   card width on both rows. Named areas place each field deterministically
   regardless of placement order. */
.cy-search__triple { margin-top: 10px; display: grid; grid-template-columns: 1fr; gap: 9px; }
.cy-search__triple > .cy-field { min-width: 0; }

/* Two-row named-area layout is the TABLET layout only — capped at 1023px.
   It used to run from 480px up with no ceiling, while the >=1024 block set
   `grid-template-areas: none` without also clearing the children's
   `grid-area: date|window|seats`. Those names then referred to areas that no
   longer existed, so all three fields resolved into a single cell and printed
   on top of each other on desktop. Bounding the range removes the leak at
   source rather than overriding it further down. */
@media (min-width: 480px) and (max-width: 1023px) {
  .cy-search__triple {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "date seats" "window window";
  }
  .cy-search__triple > .cy-field:nth-child(1) { grid-area: date; }
  .cy-search__triple > .cy-field:nth-child(2) { grid-area: window; }
  .cy-search__triple > .cy-field:nth-child(3) { grid-area: seats; }
}

.cy-seatrow {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 10px 12px;
  margin-top: 4px;
}
.cy-seatrow__n { font-size: 16px; font-weight: 500; }
.cy-seatrow__steps { display: flex; gap: 6px; }
.cy-step {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: var(--surface-tint); color: var(--text);
  font-size: 16px; font-weight: 600; line-height: 1;
}
.cy-step:hover { background: var(--cyan); color: var(--on-cyan); }

.cy-search__go { width: 100%; font-size: 16px; padding: 16px; border-radius: 10px; margin-top: 14px; }
.cy-trust {
  margin: 14px 0 0; text-align: center; font-size: 13px; line-height: 1.5;
  color: var(--text-muted);
}
.cy-savedstops { margin-top: 16px; }
.cy-savedstops__label {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px;
}
.cy-savedstops__list { display: flex; gap: 8px; flex-wrap: wrap; }
.cy-savedstops__chip {
  display: inline-flex; align-items: center; padding: 9px 14px;
  border-radius: 999px; font-size: 13.5px; font-weight: 500;
  background: var(--surface-tint); color: var(--text);
  border: 1px solid var(--hairline);
}
.cy-savedstops__chip:hover { border-color: var(--cyan); color: var(--cyan-press); }

@media (min-width: 1024px) {
  .cy-nav { height: 72px; padding: 0 44px; }
  .cy-nav__brand { font-size: 18px; }
  .cy-nav__mark { width: 24px; height: 24px; box-shadow: inset 0 0 0 5px var(--cyan); }
  .cy-nav__left { gap: 40px; }
  .cy-nav__links { display: flex; gap: 26px; }
  .cy-nav__link, .cy-nav__links a { font-size: 15px; }
  .cy-nav__locale { display: inline; font-size: 14px; }
  .cy-nav__signin { font-size: 15px; }
  .cy-nav__right { gap: 18px; }
  .cy-herowrap {
    padding: 52px 44px 56px;
    background-image: radial-gradient(820px 460px at 94% 4%, rgba(255,255,255,.5), transparent 62%);
  }
  .cy-herowrap__grid {
    display: grid; grid-template-columns: 1fr 520px; gap: 56px; align-items: start;
    max-width: 1440px; margin: 0 auto; position: relative;
  }
  .cy-herowrap__ghost {
    position: absolute; left: -40px; bottom: -160px;
    font: 400 300px/0.8 'Instrument Serif', serif;
    color: rgba(255,255,255,.2); pointer-events: none;
  }
  .cy-herocopy { padding-top: 6px; position: relative; }
  .cy-herocopy__badge { padding: 7px 14px; font-size: 11.5px; gap: 9px; }
  .cy-herocopy__h1 { margin-top: 24px; font-size: 76px; line-height: 0.98; letter-spacing: -.025em; text-wrap: balance; }
  .cy-herocopy__lead { margin-top: 22px; font-size: 17px; line-height: 1.6; max-width: 520px; color: rgba(4,34,42,.75); }
  .cy-herocopy__stats { margin-top: 34px; gap: 36px; }
  .cy-herocopy__stat { font-size: 32px; }
  .cy-herocopy__statlabel { font-size: 12.5px; margin-top: 3px; max-width: 22ch; }
  .cy-searchbar { margin-top: 0; }
  .cy-search {
    padding: 26px; border-radius: 16px;
    box-shadow: 0 30px 70px -34px rgba(4,34,42,.6);
  }
  .cy-search__od { margin-top: 18px; gap: 14px; }
  .cy-search__odfields { gap: 9px; }
  .cy-spine { padding-top: 18px; }
  /* Three equal columns in DOM order: date | leave between | seats.
     The grid-area reset is deliberate belt-and-braces — if the tablet
     named-area block above ever loses its max-width cap again, this keeps
     desktop from collapsing all three fields into one cell. */
  .cy-search__triple { margin-top: 10px; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: none; }
  .cy-search__triple > .cy-field:nth-child(1),
  .cy-search__triple > .cy-field:nth-child(2),
  .cy-search__triple > .cy-field:nth-child(3) { grid-area: auto; }
  .cy-search__go { margin-top: 16px; padding: 18px; font-size: 17px; border-radius: 10px; }
  .cy-trust { margin-top: 14px; font-size: 14px; }
}

/* ---- Search card (§6.1: search is the page, never collapsed) ---- */
.cy-search {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 16px; display: grid; gap: 12px;
}
.cy-search__title {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
}
.cy-search__grid { display: grid; gap: 10px; }
.cy-field { display: grid; gap: 4px; position: relative; }
.cy-field__label {
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted);
}
.cy-field__input, .cy-place input {
  width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
  min-height: var(--tap); font-size: 15.5px; font-weight: 500;
  padding: 0 14px; color: var(--text); background: var(--surface-tint);
  border: 1.5px solid var(--hairline); border-radius: 8px;
}
@media (max-width: 374px) {
  .cy-field__input, .cy-place input { padding: 0 10px; }
}
.cy-field__input:focus, .cy-place input:focus {
  border-color: var(--cyan); background: var(--surface);
  outline: none; box-shadow: 0 0 0 4px rgba(0,201,222,.14);
}
/* Two native time pickers, so the OS wheel/keyboard is used rather than a
   custom widget — no JS, and it degrades to a text field if unsupported. */
/* 16px minimum stays even here — smaller triggers iOS Safari's auto-zoom
   on focus, which is worse than the extra height. */
.cy-timerange { display: flex; align-items: center; gap: 6px; }
.cy-timerange .cy-field__input { flex: 1 1 0; min-width: 0; padding: 0 6px; }
.cy-timerange__sep { color: var(--text-muted); flex: 0 0 auto; }
.cy-search__go { width: 100%; }
.cy-search__note { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
@media (min-width: 1024px) {
  .cy-search { max-width: 900px; margin: 0 auto; padding: 20px; }
  .cy-search__grid { grid-template-columns: 1.4fr 1.4fr 1fr 1fr .7fr; align-items: end; }
  .cy-search__go { width: auto; justify-self: start; padding: 0 28px; }
}

/* ---- Departure-board code strip: loudest accent on a bookable card (§7) ---- */
.cy-code-strip {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  color: var(--cyan); font-weight: 700;
}
/* Filled, not tinted text: #00C9DE as a foreground on white is ~2:1 and
   fails AA. As a fill carrying deep ink it reads louder AND passes. */
.cy-code {
  font-size: 14px; letter-spacing: .14em; font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--cyan); color: var(--on-cyan);
  padding: 3px 8px; border-radius: 4px;
}
.cy-code-strip__rule {
  flex: 1 1 auto; height: 0; border-top: 2px dashed var(--cyan);
}
/* Looking-For carries no code strip and no amount — it is not bookable. */
.cy-row--request .cy-code-strip { display: none; }

/* ---- Chips ---- */
.cy-chips {
  display: flex; gap: 6px; overflow-x: auto; padding: 12px 20px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cy-chips::-webkit-scrollbar { display: none; }
.cy-chip {
  flex: 0 0 auto; min-height: var(--tap); display: inline-flex; align-items: center;
  padding: 0 16px; border-radius: 999px; white-space: nowrap;
  font-size: 14px; font-weight: 600; color: var(--muted);
  background: var(--surface); border: 1px solid var(--border);
  transition: all 0.15s ease;
}
.cy-chip:hover { background: var(--surface-tint); color: var(--text); }
.cy-chip--active { background: var(--cyan); border-color: var(--cyan); color: var(--on-cyan); box-shadow: var(--shadow); }
.cy-chips--time .cy-chip { padding: 0 14px; font-size: 13px; }

/* ---- Section rules (mockup's coloured bar) ---- */
.cy-section { margin: 22px 0; }
.cy-section__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px 12px; gap: 12px;
}
.cy-section__title {
  font-size: 15px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  display: flex; align-items: center; gap: 8px;
}
.cy-section__title::before {
  content: ""; display: inline-block; width: 6px; height: 20px;
  border-radius: 3px; background: var(--cyan); flex-shrink: 0;
}
.cy-section--request .cy-section__title::before { background: var(--brown); }
.cy-section__link { font-size: 13px; color: var(--cyan); font-weight: 600; }

/* ---- Shelf + compact card ---- */
.cy-feed { padding: 4px 0 40px; }
.cy-shelf {
  display: flex; gap: 14px; overflow-x: auto; padding: 2px 20px 8px;
  scroll-snap-type: x proximity; scrollbar-width: none;
}
.cy-shelf::-webkit-scrollbar { display: none; }

.cy-card-compact {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px; overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cy-card-compact__link {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit;
}
.cy-card-compact__link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.cy-card-compact:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.cy-card-compact__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.cy-card-compact__time { font-size: 26px; font-weight: 800; line-height: 1.15; }
.cy-card-compact__seats {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  padding: 5px 10px; border-radius: 999px;
  background: var(--success-tint); color: var(--success);
}
.cy-card-compact__seats.is-scarce {
  background: var(--warning-tint); color: var(--warning);
}
.cy-card-compact__date { font-size: 13px; color: var(--text-muted); }
.cy-card-compact__route {
  font-size: 15px; font-weight: 600; line-height: 1.35; margin-top: 6px;
}
.cy-card-compact__driver {
  display: flex; align-items: center; gap: 10px; margin-top: 8px;
}
.cy-card-compact__avatar { width: 32px; height: 32px; font-size: 11px; }
.cy-card-compact__dname { font-size: 14px; font-weight: 600; }
.cy-card-compact__vehicle { font-size: 12.5px; color: var(--text-muted); }
.cy-card-compact__badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.cy-card-compact__badges .cy-badge { font-size: 11px; padding: 4px 8px; }
.cy-card-compact__cost { font-size: 16px; font-weight: 700; color: var(--text); margin-top: 8px; }
.cy-card-compact__cta {
  display: block; width: 100%; text-align: center; margin-top: auto;
  padding: 13px; border-radius: 10px; font-size: 15px; font-weight: 600;
  background: var(--surface); color: var(--text);
  border: 1.5px solid var(--hairline);
}
.cy-card-compact__cta:hover { border-color: var(--cyan); color: var(--cyan-press); }
.cy-card-compact__note {
  font-size: 12px; color: var(--text-muted); text-align: center; line-height: 1.4;
}
.cy-rating { font-size: 12px; }

/* ---- Looking-For / request card variant ---- */
.cy-card-compact--request {
  border-style: dashed;
  border-color: var(--warning-tint);
  background: color-mix(in srgb, var(--warning-tint) 25%, var(--surface));
}
.cy-card-compact--request .cy-card-compact__seats {
  background: var(--warning-tint); color: var(--warning);
}
.cy-card-compact--request .cy-card-compact__cta {
  border-color: var(--warning); color: var(--warning);
}
.cy-card-compact--request .cy-card-compact__cta:hover {
  background: var(--warning-tint); border-color: var(--warning);
}
.cy-card-compact__kicker {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--warning);
}
.cy-card-compact__amount {
  font-size: 18px; font-weight: 700; color: var(--warning);
}
.cy-stepper {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid var(--hairline); background: var(--surface);
  font-size: 18px; font-weight: 700; color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color 0.15s;
}
.cy-stepper:hover { border-color: var(--cyan); }
.cy-stepper:disabled { opacity: 0.35; cursor: default; border-color: var(--hairline); }

/* ---- Full-width departure-board row ---- */
.cy-list { display: grid; gap: 14px; padding: 0 20px; }
.cy-row {
  position: relative; /* anchors .cy-row__stretched-link */
  display: grid; grid-template-columns: 62px 1fr auto; gap: 14px; align-items: start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cy-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.cy-row__stretched-link { position: absolute; inset: 0; z-index: 0; border-radius: inherit; }
.cy-row__stretched-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
/* Real controls inside the row must sit above the stretched link, or their
   own clicks would be swallowed by it. */
.cy-row__aside a, .cy-row__aside button { position: relative; z-index: 1; }
.cy-row--request { border-color: var(--brown); border-style: dashed; background: var(--pink); }
.cy-row__kicker {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--brown-dark);
}
.cy-row__time { font-size: 19px; font-weight: 800; }
.cy-row__route { font-size: 15px; font-weight: 700; display: flex; flex-wrap: wrap; align-items: center; }
/* Cyan fill moved here from the removed code strip — same treatment
   (filled, not tinted-text, per the AA fix in that strip), now carried by
   the actual area names instead of a derived 3-letter code. */
.cy-row__route .cy-area {
  padding: 3px 8px; border-radius: 6px; font-weight: 700;
  background: var(--cyan); color: var(--on-cyan);
}
.cy-row--request .cy-row__route .cy-area { background: var(--surface); color: var(--text); font-weight: inherit; }
.cy-row__meta, .cy-row__cost, .cy-row__note { font-size: 12px; color: var(--muted); margin-top: 4px; }
.cy-row__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.cy-row__seats { font-size: 13px; font-weight: 700; }

/* ---- Badges: Pending / New / Verified / VIP ---- */
.cy-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.cy-badge--pending  { background: var(--warning-tint); color: var(--warning); }
.cy-badge--new      { background: var(--surface-tint); color: var(--text-muted); }
/* "Verified" renders only where Cyrahop itself verified it (§3.4). */
.cy-badge--verified { background: var(--success-tint); color: var(--success); }
.cy-badge--vip      { background: var(--cyan); color: var(--on-cyan); }

/* Locked pill: cyan tint, never grey/red — must read "more available",
   not "broken" or "disabled" (§5 upsell rule). */
.cy-pill-locked {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 12px; border-radius: 999px;
  background: var(--surface-tint); color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(0,201,222,.5);
  border: none; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
}
.cy-pill-locked::before {
  content: ''; width: 8px; height: 10px; border-radius: 2px;
  background: var(--cyan); flex: 0 0 auto;
}

.cy-t22 { font-size: 22px; font-weight: 700; }

/* ---- §8c social sign-in. Full-width stacked buttons above the email form,
   matching mockup 3a. Neutral surface + hairline, never a brand-coloured
   fill: §8 bans gradient buttons and caps accents at one per card, and the
   provider glyph already carries the brand colour. ---- */
.cy-social { display: grid; gap: 9px; width: 100%; max-width: 420px; margin: 0 auto 6px; }
.cy-social__btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--tap); padding: 0 16px;
  background: var(--surface); color: var(--text);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1.5px var(--hairline);
  font-size: 15px; font-weight: 600;
}
.cy-social__btn:hover { background: var(--surface-tint); color: var(--text); }
.cy-social__btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.cy-social__btn svg { flex: 0 0 auto; }
.cy-social__btn--disabled { opacity: .4; pointer-events: none; cursor: default; }
.cy-social__note {
  max-width: 420px; margin: 8px auto 0;
  font-size: 11.5px; line-height: 1.5; color: var(--text-muted); text-align: center;
}

/* ---- Cyrahop Plus sheet (§5 upsell). A bottom sheet on mobile, a centred
   dialog at >=1024 — the same pattern the rest of the product uses for
   sheets, so nothing here is hover-dependent or desktop-only. Motion stays
   inside the 250ms ease-out budget (§8) and is dropped entirely under
   prefers-reduced-motion by the global rule at the top of this file. ---- */
.cy-sheet__scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(4, 34, 42, 0.55);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
}
.cy-sheet {
  width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
  background: var(--surface); color: var(--text);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 22px 20px 24px;
  box-shadow: var(--shadow-lg);
  animation: cy-sheet-up 200ms ease-out;
}
@keyframes cy-sheet-up { from { transform: translateY(14px); } to { transform: none; } }
.cy-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.cy-sheet__kicker {
  font-size: 11px; font-weight: 600; letter-spacing: .09em;
  color: var(--cyan-press); text-transform: uppercase;
}
.cy-sheet__title { font-size: 24px; line-height: 1.1; margin-top: 6px; }
.cy-sheet__x {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface-tint); color: var(--text);
  font-size: 22px; line-height: 1;
}
.cy-sheet__x:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.cy-sheet__ctx { font-size: 14px; line-height: 1.55; color: var(--text-muted); margin-top: 10px; }
.cy-sheet__list { margin-top: 16px; display: grid; gap: 10px; }
.cy-sheet__item {
  padding: 13px 14px; border-radius: var(--radius-sm);
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--hairline);
}
.cy-sheet__item.is-lead {
  background: var(--surface-tint); box-shadow: inset 0 0 0 1.5px rgba(0, 201, 222, .45);
}
.cy-sheet__itemtitle {
  font-size: 15px; font-weight: 700;
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.cy-sheet__itembody { font-size: 13.5px; line-height: 1.5; color: var(--text-muted); margin-top: 4px; }
.cy-sheet__free { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); margin-top: 14px; }
.cy-sheet__actions { margin-top: 16px; display: flex; gap: 9px; flex-wrap: wrap; }
.cy-sheet__fine { font-size: 11.5px; line-height: 1.55; color: var(--text-muted); margin-top: 12px; }
@media (min-width: 1024px) {
  .cy-sheet__scrim { align-items: center; padding: 24px; }
  .cy-sheet { border-radius: var(--radius); }
}
.cy-t28 { font-size: 28px; font-weight: 700; }

.cy-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-tint); color: var(--cyan-press);
  font-size: 13.5px; font-weight: 600;
}

/* ============================================================
   SEARCH RESULTS — mockup screen 2b: sort/filter rail | results
   list | persistent selected-route pane. Single column on mobile
   (rail below list, pane hidden — the inline per-row form is the
   whole booking action there); 3-column at >=1024px.
   ============================================================ */
/* Cyan search-summary bar, distinct from the plain white .cy-nav site
   header above it — two-tier header per the mockup, not a duplicate. */
.cy-resultsbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--cyan); padding: 14px 20px;
}
@media (min-width: 1024px) {
  .cy-resultsbar { padding: 18px 44px; }
}
.cy-resultsbar__brand {
  display: flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: 14px; letter-spacing: .04em; color: var(--on-cyan);
}
.cy-resultsbar__summary {
  flex: 1 1 auto; display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--on-cyan); min-width: 0; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
}
.cy-resultsbar .cy-dot, .cy-resultsbar .cy-arrow { color: var(--on-cyan); opacity: .7; }
.cy-resultsbar .cy-btn { background: var(--surface); color: var(--text); }

.cy-check { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; cursor: pointer; }
.cy-check input { accent-color: var(--cyan); width: 16px; height: 16px; flex: 0 0 auto; }

/* Inline one-line search inside the cyan bar. The geocoder partial renders
   a stacked label+input; here the label is hidden (the placeholder carries
   it) so From/To/Date/Seats/Find all sit on a single row. */
.cy-searchinline {
  flex: 1 1 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--surface); border-radius: var(--radius-sm); padding: 6px 8px;
}
/* display:flex (not the inherited .cy-field grid) so the field's height is
   exactly its input's — the grid was reserving a row for the hidden label
   and leaving these 8px taller than the date/seats/button beside them. */
.cy-searchinline .cy-place {
  flex: 1 1 180px; min-width: 0; gap: 0;
  display: flex; align-items: center; align-self: center;
}
.cy-searchinline .cy-place > span:first-child { display: none; }
.cy-searchinline .cy-place input { flex: 1 1 auto; width: 100%; }
/* .cy-resultsbar prefix raises specificity above the legacy
   `.cy-field input:not(.cy-field__input)` rule further down the file —
   that rule ties on specificity, wins on source order, and was forcing
   these back to min-height:var(--tap) (48px), leaving the geocoder fields
   taller than everything else on the row. */
.cy-resultsbar .cy-searchinline .cy-place input,
.cy-resultsbar .cy-searchinline .cy-field__input {
  min-height: 40px; height: 40px; border: 0; background: transparent; padding: 0 8px;
}
.cy-searchinline .cy-place input:focus,
.cy-searchinline .cy-field__input:focus {
  outline: 2px solid var(--cyan); outline-offset: -2px; border-radius: var(--radius-sm);
}
.cy-searchinline__date { flex: 0 0 auto; width: auto; }
.cy-searchinline__seats {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding-left: 8px; border-left: 1px solid var(--hairline);
}
.cy-searchinline__seats .cy-step { width: 28px; height: 28px; font-size: 14px; }
/* Every control on the row is the same 40px box and self-centers, so the
   line reads flat regardless of each control's intrinsic height. */
.cy-searchinline > * { align-self: center; }
.cy-searchinline .cy-searchinline__seats { height: 40px; }
.cy-searchinline .cy-btn { flex: 0 0 auto; height: 40px; min-height: 40px; }
/* Suggestion dropdown must escape the bar rather than be clipped by it. */
.cy-searchinline .cy-place__list { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; }
.cy-searchinline .cy-place { position: relative; }

/* Pasakay board on the results page — dashed warning-toned corner, same
   visual language as the front page's Pasakay column. */
.cy-pasakaycorner {
  background: var(--surface-tint); border: 1px dashed var(--warning);
  border-radius: var(--radius); padding: 16px;
}
.cy-pasakaycorner .cy-list { padding: 0; }

.cy-findmore {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  min-height: var(--tap); font-size: 14px; font-weight: 600; color: var(--text);
}
.cy-findmore:hover { color: var(--cyan-press); }
.cy-findmore .cy-muted { font-weight: 400; font-size: 13px; }

/* One true line from tablet up — the fields wrap onto a second flex line
   on narrow screens (correct there), but on desktop the whole search must
   read as a single row. */
/* Grid (not flex) from tablet up: flex was leaving the two geocoder fields
   7px above the other controls despite matching heights and align-self;
   an explicit column grid with align-items:center centers every cell
   deterministically. */
@media (min-width: 768px) {
  .cy-searchinline {
    display: grid; grid-template-columns: 1fr 1fr auto auto auto;
    align-items: center; flex-wrap: nowrap;
  }
  .cy-searchinline > * { align-self: center; }
}

.cy-results { display: flex; flex-direction: column; gap: 20px; }

.cy-resultsrail { display: grid; gap: 18px; }
.cy-resultsrail__group { display: grid; gap: 6px; }
.cy-railsort {
  text-align: left; padding: 11px 13px; border-radius: 8px;
  border: none; background: transparent;
  color: var(--muted); font-size: 15px; font-weight: 500;
}
.cy-railsort.is-active { background: var(--cyan); color: var(--on-cyan); font-weight: 600; }
.cy-resultsrail__group .cy-field__label {
  font-size: 11.5px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
.cy-resultsrail .cy-check { font-size: 15px; font-weight: 500; }
.cy-resultsrail .cy-check input { width: 18px; height: 18px; border-radius: 4px; }
.cy-resultsrail__waitlist {
  border: none; border-radius: 12px;
  padding: 15px; background: var(--surface-tint);
  margin-top: auto;
}
.cy-resultsrail__waitlist .cy-panel__title { font-size: 14.5px; }

.cy-resultsmain { padding: 28px 20px 8px; display: flex; flex-direction: column; gap: 14px; }
.cy-resultslist { display: flex; flex-direction: column; gap: 14px; }
.cy-resultrow {
  display: grid; grid-template-columns: 62px 1fr auto; gap: 14px; align-items: center;
  background: var(--surface); border: none;
  border-radius: 14px; box-shadow: 0 0 0 1px var(--hairline); padding: 16px;
  cursor: pointer; transition: box-shadow .15s ease;
}
.cy-resultrow.is-selected { box-shadow: 0 0 0 2px var(--cyan); }
.cy-resultrow__driver { display: flex; align-items: center; gap: 11px; }
.cy-resultrow__driver > div > div:first-child { font-size: 16px; }
.cy-resultrow__pills { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; }
.cy-resultrow__aside {
  display: flex; flex-direction: column; align-items: stretch; gap: 9px;
  text-align: center; max-width: 190px;
}
.cy-resultrow__aside form { width: 100%; }
.cy-resultrow__aside .cy-btn { width: 100%; }
@media (min-width: 1024px) {
  .cy-resultrow {
    grid-template-columns: 150px 1fr 190px; gap: 20px; padding: 20px;
  }
}

.cy-bookingcard {
  background: var(--surface); border-radius: 14px; box-shadow: 0 0 0 1px var(--hairline);
  padding: 18px; display: flex; flex-direction: column; gap: 12px;
}
.cy-bookingcard__top { display: flex; gap: 16px; }
.cy-bookingcard__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cy-bookingcard__actions .cy-btn { flex: 1; min-width: 120px; text-align: center; font-size: 15px; padding: 14px; border-radius: 10px; }
.cy-bookingcard__actions a { flex: 1; min-width: 120px; text-align: center; font-size: 15px; font-weight: 600; padding: 14px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px var(--hairline); text-decoration: none; color: var(--text); }
.cy-bookingcard__actions form { flex: 1; min-width: 120px; }
.cy-bookingcard__actions button { width: 100%; text-align: center; font-size: 15px; font-weight: 600; padding: 14px; border-radius: 10px; box-shadow: inset 0 0 0 1.5px var(--hairline); background: var(--surface); color: var(--text); border: none; cursor: pointer; }

.cy-routepane {
  display: none;
  background: var(--bg); padding: 22px;
  align-self: start;
}
.cy-routepane__head .cy-field__label {
  font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
}
.cy-routepane__card {
  background: var(--surface); border-radius: 12px; padding: 18px;
}
.cy-routepane__stops { display: flex; gap: 0; margin-top: 12px; overflow-x: auto; }
.cy-routepane__stop { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; text-align: center; position: relative; }
.cy-routepane__stopdot {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 20px; position: relative;
}
.cy-routepane__stopdot::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--hairline);
  flex: 0 0 auto; z-index: 1;
}
.cy-routepane__stopdot::after {
  content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--hairline);
}
.cy-routepane__stop:first-child .cy-routepane__stopdot::after { left: 50%; }
.cy-routepane__stop:last-child .cy-routepane__stopdot::after { right: 50%; }
.cy-routepane__stop.is-pickup .cy-routepane__stopdot::before { background: var(--cyan); }
.cy-routepane__stop.is-dropoff .cy-routepane__stopdot::before { background: var(--text); }
.cy-routepane__stop > div { padding-top: 8px; }
.cy-routepane__stop > div > div:first-child { font-size: 14px; font-weight: 600; }
.cy-routepane__driver { display: flex; align-items: center; gap: 11px; }
.cy-routepane__desc {
  background: var(--surface-tint); border-radius: 12px; padding: 16px;
  font-size: 15px; line-height: 1.55;
}

@media (min-width: 1024px) {
  .cy-resultsmain { padding: 40px 44px 44px; }
  .cy-routepane {
    display: flex; flex-direction: column; gap: 18px;
    background: var(--bg); border: none; border-radius: 0; box-shadow: none;
    border-left: 1px solid var(--hairline);
    padding: 24px 26px; position: static; min-height: 760px;
  }
}

.cy-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0 18px; border-radius: var(--radius-sm);
  background: var(--cyan); color: var(--on-cyan); font-weight: 700; font-size: 14px;
  transition: background 0.15s ease;
}
.cy-btn:hover { background: var(--cyan-press); color: var(--on-cyan); }
.cy-btn--driver { background: var(--surface); color: var(--text); border: 1px solid var(--text); }
.cy-btn--driver:hover { background: var(--surface-tint); color: var(--text); }
/* Accept/Decline are equal weight, never pre-focused, ≥24px apart (§3.1). */
.cy-btn-pair { display: flex; gap: 24px; }
.cy-btn-pair > * { flex: 1 1 0; min-height: var(--tap); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.cy-btn--sm { min-height: 36px; font-size: 13px; padding: 0 12px; }

.cy-empty {
  margin: 16px 20px; padding: 22px; border-radius: var(--radius);
  border: 1px dashed var(--border); background: var(--surface); box-shadow: var(--shadow);
}
.cy-rail { display: none; }
.cy-below { padding: 26px 20px; border-top: 1px solid var(--border); margin-top: 26px; }
.cy-below a { display: inline-flex; align-items: center; min-height: var(--tap); padding-right: 8px; }

/* ---- Boarding pass: the one gradient, after acceptance only ---- */
.cy-pass { max-width: 420px; margin: 20px auto; }
/* Confirmed is ALWAYS green, never cyan (§10). This surface exists only
   after the driver has accepted (§3.8). */
.cy-pass__head {
  background: linear-gradient(135deg, #085239, var(--success));
  color: #FFFFFF; padding: 22px; border-radius: var(--radius) var(--radius) 0 0;
}
.cy-pass__perf {
  height: 26px; background:
    radial-gradient(circle at 0 50%, transparent 13px, var(--surface) 14px) left / 50.5% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent 13px, var(--surface) 14px) right / 50.5% 100% no-repeat;
  position: relative;
}
.cy-pass__perf::after {
  content: ""; position: absolute; left: 18px; right: 18px; top: 50%;
  border-top: 2px dashed var(--border);
}
.cy-pass__body {
  background: var(--surface); padding: 20px 22px 22px;
  border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow);
}
.cy-pass__print {
  display: block; width: 100%; margin-top: 14px; text-align: center;
  font: 600 14.5px 'Plus Jakarta Sans', sans-serif; color: var(--text);
  background: var(--surface-tint); padding: 14px; border-radius: 10px;
}

/* ---- Boarding pass print stylesheet (§9 deliverable): clean A4, no site
   chrome, the confirmed-green header must survive print's default
   background-stripping, and the card must never split across a page break. ---- */
@page { size: A4; margin: 16mm; }
@media print {
  .cy-header, .cy-below, .cy-pass__print { display: none !important; }
  html, body { background: #fff !important; }
  .cy-shell { max-width: none; padding: 0; margin: 0; }
  .cy-pass {
    max-width: none; margin: 0; box-shadow: none;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    break-inside: avoid; page-break-inside: avoid;
  }
  .cy-pass__head {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    background: linear-gradient(135deg, #085239, var(--success)) !important;
    color: #fff !important;
  }
  .cy-pass__body { box-shadow: none; border: 1px solid var(--hairline); border-top: none; }
}

/* ---- Desktop >=1024 ---- */
@media (min-width: 1024px) {
  /* .cy-rail (the old landing sidebar) no longer exists in any view — its
     grid-template-columns:240px 1fr here was squeezing every OTHER page's
     lone <main> child into the 240px first track at desktop widths, since
     an auto-placed grid item just takes the first available track. That's
     the "desktop pages look like mobile" bug: a single-column page rendered
     240px wide with 880px of dead space beside it. */
  .cy-shell { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
  .cy-chips--mobile { display: none; }
  .cy-searchbar__field { max-width: 520px; margin: 0 auto; }
  .cy-shelf { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; padding: 2px 0 8px; }
  .cy-card-compact { width: auto; flex: 1 1 auto; }
  .cy-list, .cy-section__head { padding-left: 0; padding-right: 0; }
  .cy-empty { margin-left: 0; margin-right: 0; }
}

/* ============================================================
   LANDING — hero, boards, value strip, trust, footer
   Hero stays COMPACT on mobile on purpose: §4.1 requires real
   ride cards within 1.5 screens at 360px, so the hero must not
   eat the fold. It grows only where there's room (>=1024).
   ============================================================ */
/* The one gradient per screen (§8). Deep ink → cyan, so display text is
   light on dark rather than white on #00C9DE (which fails AA). */
.hero {
  background: linear-gradient(150deg, #04222A, #0A3A45 55%, #0E5563);
  color: #EDF9FB; padding: 20px 20px 26px;
}
.hero .cy-btn { background: var(--cyan); color: #04222A; }
.hero__nav { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.hero__brand {
  display: flex; align-items: center; gap: 7px;
  font-size: 21px; font-weight: 900; letter-spacing: -0.03em; color: #fff;
}
.hero__brand .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--brown);
  box-shadow: 0 0 0 4px rgba(214,111,41,.22);
}
.hero__brand .hop { color: var(--sky, #92C4C6); }
.hero__links { display: none; gap: 24px; }
.hero__links a { color: rgba(255,255,255,.9); font-weight: 600; font-size: 14px; padding: 4px 0; border-bottom: 2px solid transparent; }
.hero__links a:hover, .hero__links a.on { color: var(--earth, #F3C375); border-bottom-color: var(--earth, #F3C375); }
.hero__cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.hero__cta a { color: #fff; font-weight: 700; font-size: 13px; min-height: var(--tap); display: inline-flex; align-items: center; }

.hero__eyebrow {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--earth, #F3C375);
  border: 1px solid rgba(243,195,117,.35); border-radius: 999px; padding: 4px 10px; margin-bottom: 12px;
}
.hero h1 { font-size: 27px; line-height: 1.18; font-weight: 900; letter-spacing: -0.02em; }
.hero h1 .accent { color: var(--earth, #F3C375); }
.hero__lead { font-size: 14px; color: rgba(255,255,255,.86); margin-top: 10px; max-width: 46ch; }
.hero__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.hero__actions .cy-btn { background: var(--cyan); color: var(--on-cyan); }
.hero__actions .cy-btn:hover { background: var(--earth); color: var(--on-cyan); }
.hero__actions .cy-btn--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.42); }
.hero__actions .cy-btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
.hero__compliance { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hero__compliance span {
  font-size: 11px; color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px; padding: 5px 11px;
}

/* ---- Front-page board (template 2a: "Tomorrow morning, on your corridor") ---- */
.cy-frontfeed {
  padding: 28px 20px 8px; display: flex; flex-direction: column; gap: 20px;
  border-bottom: 1px solid var(--hairline);
}
.cy-frontfeed__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.cy-frontfeed__kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 11.5px 'Plus Jakarta Sans', sans-serif;
  color: var(--cyan-press); letter-spacing: .09em;
}
.cy-frontfeed__kicker::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan);
}
.cy-frontfeed__h2 {
  margin: 12px 0 0; font: 400 28px/1.1 'Instrument Serif', serif;
  color: var(--text); letter-spacing: -.02em;
}
.cy-frontfeed__sub {
  margin: 8px 0 0; font-size: 14px; line-height: 1.55;
  color: var(--text-muted); max-width: 560px;
}
.cy-frontfeed__tabs {
  display: flex; gap: 6px; background: var(--surface-tint);
  padding: 4px; border-radius: 999px; flex: none;
}
.cy-frontfeed__tab {
  font-size: 14px; font-weight: 600; padding: 11px 18px;
  border-radius: 999px; white-space: nowrap; cursor: pointer;
  color: var(--text-muted); background: transparent; border: none;
}
.cy-frontfeed__tab.is-active {
  background: var(--text); color: var(--bg);
  box-shadow: 0 1px 3px rgba(4,34,42,.12);
}
.cy-frontfeed__grid {
  display: grid; grid-template-columns: 1fr; gap: 14px;
}
.cy-frontfeed__col .cy-section__title { padding: 0 0 12px; }
.cy-frontfeed__col .cy-list { padding: 0; }
.cy-frontfeed__more {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 600; color: var(--text);
  background: var(--surface-tint); padding: 14px 20px; border-radius: 10px;
}
.cy-frontfeed__note {
  font-size: 14px; color: var(--text-muted);
}
@media (min-width: 768px) {
  .cy-frontfeed__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .cy-frontfeed {
    max-width: 1440px; margin: 0 auto; padding: 40px 44px 44px;
  }
  .cy-frontfeed__h2 { font-size: 42px; line-height: 1.04; }
  .cy-frontfeed__sub { font-size: 15.5px; }
  .cy-frontfeed__tab { font-size: 14.5px; padding: 11px 22px; }
  .cy-frontfeed__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Waitlist (standalone — no longer nested in the removed feed) ---- */
.cy-waitlist { background: var(--surface-tint); padding: 40px 20px; }
.cy-waitlist__inner { max-width: 560px; margin: 0 auto; text-align: center; }
.cy-waitlist__h2 { font-size: 28px; color: var(--text); }
.cy-waitlist__lead { margin: 10px 0 22px; color: var(--text-muted); font-size: 15px; line-height: 1.5; }
.cy-waitlist__form { display: grid; gap: 10px; text-align: left; }
.cy-waitlist__form .cy-field__input { background: var(--surface); }
.cy-waitlist__success { color: var(--success); font-weight: 600; }
.cy-waitlist__errors { margin: 10px 0 0; padding-left: 18px; color: var(--error); font-size: 13px; }
@media (min-width: 640px) {
  /* Explicit areas, not implicit spanning — auto-placement runs in strict
     DOM order, so the auto-placed "role" select following name/phone would
     land alone in column 1 with column 2 wasted, same bug as the search
     card's Date/Seats row. Classed selectors here (not nth-child) so the
     hidden CSRF token's DOM position can't shift the count. */
  .cy-waitlist__form {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "name phone" "role role" "submit submit";
  }
  .cy-waitlist__name   { grid-area: name; }
  .cy-waitlist__phone  { grid-area: phone; }
  .cy-waitlist__role   { grid-area: role; }
  .cy-waitlist__submit { grid-area: submit; }
}

/* ---- 3-step "how it works" (template 2a numbered row) ---- */
.vstrip { background: var(--surface); border-bottom: 1px solid var(--hairline); }
.vstrip__inner {
  max-width: 1440px; margin: 0 auto; padding: 32px 20px;
  display: grid; grid-template-columns: 1fr; gap: 24px;
}
.vstrip__item { display: flex; flex-direction: column; gap: 8px; }
.vstrip__ic {
  font: 400 32px 'Instrument Serif', serif; color: var(--cyan-press);
  line-height: 1;
}
.vstrip__item h3 { font-size: 16px; font-weight: 600; }
.vstrip__item p { font-size: 14px; color: var(--text-muted); margin-top: 0; line-height: 1.55; }

/* Two-board marketplace */
.board { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 26px; }
.board__label {
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--cyan);
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.board--demand .board__label { border-left-color: var(--brown); background: var(--pink); }
.board__emoji { font-size: 20px; }
.board__name { font-size: 15px; font-weight: 800; margin-top: 2px; }
.board__sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.board__count {
  display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 800;
  font-variant-numeric: tabular-nums; background: var(--cyan); color: #fff;
  border-radius: 999px; padding: 2px 10px;
}
.board--demand .board__count { background: var(--brown); }

/* ---- Dark CTA banner (template 2a: "Drive the trip you already make") ---- */
.cy-drivecta {
  background: #04222A; padding: 32px 20px;
  display: flex; flex-direction: column; gap: 20px;
}
.cy-drivecta__inner {
  max-width: 1440px; margin: 0 auto; width: 100%;
}
.cy-drivecta h3 {
  margin: 0; font: 400 28px/1.1 'Instrument Serif', serif; color: #fff;
}
.cy-drivecta p {
  margin: 12px 0 0; font-size: 15px; line-height: 1.6;
  color: rgba(255,255,255,.7); max-width: 700px;
}
.cy-drivecta__actions {
  display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px;
}
.cy-drivecta__actions .cy-btn {
  font-size: 16px; padding: 17px 24px; border-radius: 10px;
}
.cy-drivecta__actions .cy-btn--ghost {
  background: transparent; color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3);
}
.cy-drivecta__actions .cy-btn--ghost:hover {
  background: rgba(255,255,255,.08);
}
@media (min-width: 1024px) {
  .cy-drivecta {
    padding: 48px 44px;
    flex-direction: row; align-items: center; justify-content: space-between;
    gap: 40px;
  }
  .cy-drivecta h3 { font-size: 40px; }
  .cy-drivecta p { font-size: 16px; }
  .cy-drivecta__actions { flex: none; margin-top: 0; }
}

/* Trust */
.trust { background: var(--cyan-deep, #0F4A4E); color: #fff; padding: 32px 20px; }
.trust__inner { max-width: 1440px; margin: 0 auto; }
.trust h2 { font-size: 21px; font-weight: 900; line-height: 1.25; }
.trust h2 .accent { color: var(--earth, #F3C375); }
.trust__grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 20px; }
.trust__card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 16px; }
.trust__card .ic { font-size: 20px; }
.trust__card h3 { font-size: 14px; font-weight: 800; margin: 6px 0 5px; }
.trust__card p { font-size: 12.5px; color: rgba(255,255,255,.78); line-height: 1.55; }

/* Footer */
.sitefoot { background: var(--cyan-deep, #0F4A4E); color: rgba(255,255,255,.7); padding: 28px 20px 32px; border-top: 1px solid rgba(255,255,255,.1); }
.sitefoot__inner { max-width: 1120px; margin: 0 auto; }
.sitefoot__cols { display: grid; grid-template-columns: 1fr; gap: 22px; }
.sitefoot h4 { color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.sitefoot ul { list-style: none; }
.sitefoot li { margin-bottom: 4px; }
.sitefoot a { color: rgba(255,255,255,.7); font-size: 13px; display: inline-flex; align-items: center; min-height: var(--tap); }
.sitefoot a:hover { color: var(--earth, #F3C375); }
.sitefoot__note { font-size: 12px; line-height: 1.6; margin-top: 8px; }
.sitefoot__bar { border-top: 1px solid rgba(255,255,255,.1); margin-top: 22px; padding-top: 16px; font-size: 11.5px; line-height: 1.6; }

@media (min-width: 700px) {
  .vstrip__inner { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .vstrip__item + .vstrip__item { padding-left: 36px; border-left: 1px solid var(--hairline); }
  .trust__grid { grid-template-columns: repeat(3, 1fr); }
  .sitefoot__cols { grid-template-columns: 2fr 1fr 1fr 1fr; }
}
@media (min-width: 1024px) {
  .hero { padding: 26px 6vw 54px; }
  .hero__links { display: flex; }
  .hero h1 { font-size: 44px; }
  .hero__lead { font-size: 16px; }
  .hero__inner { max-width: 1120px; margin: 0 auto; }
  .vstrip__inner { padding: 44px; }
  .vstrip__item h3 { font-size: 18px; }
  .vstrip__item p { font-size: 15px; }
  .vstrip__ic { font-size: 44px; }
  .board { grid-template-columns: 236px 1fr; gap: 18px; align-items: start; }
  .board__label { position: sticky; top: 120px; }
}

/* ============================================================
   FORMS (shared: auth, onboarding, route create)
   ============================================================ */
.cy-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px; max-width: 520px; margin: 24px auto;
}
.cy-panel--wide { max-width: 720px; }
.cy-panel__title { font-size: 19px; font-weight: 800; margin-bottom: 4px; }
.cy-panel__sub { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.cy-field { display: block; margin-bottom: 14px; }
.cy-field > span { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 5px; }
/* :not(.cy-field__input) — this legacy rule was outranking the newer
   .cy-field__input component (both live inside .cy-field) on font-size,
   dropping search-card time/date inputs to 14px, which risks iOS Safari's
   zoom-on-focus. Scoped off rather than patched per-property. */
.cy-field input:not(.cy-field__input),
.cy-field select:not(.cy-field__input),
.cy-field textarea:not(.cy-field__input) {
  width: 100%; min-height: var(--tap); padding: 10px 14px; font-size: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--cream); color: var(--ink);
}
.cy-field input:not(.cy-field__input):focus,
.cy-field select:not(.cy-field__input):focus,
.cy-field textarea:not(.cy-field__input):focus {
  outline: 2px solid var(--cyan); outline-offset: 1px;
}
.cy-field__hint { font-size: 11px; color: var(--muted); margin-top: 4px; }
.cy-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Mapbox place autocomplete */
.cy-place { position: relative; }
.cy-place > span:first-child { display: block; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 5px; }
.cy-place input[type="text"] {
  width: 100%; min-height: var(--tap); padding: 10px 14px; font-size: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--cream); color: var(--ink);
}
.cy-place input[type="text"]:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
.cy-place__list {
  position: absolute; z-index: 50; left: 0; right: 0; top: 100%; margin-top: 4px;
  list-style: none; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); max-height: 260px; overflow-y: auto;
}
.cy-place__list li {
  padding: 10px 14px; cursor: pointer; min-height: var(--tap);
  display: flex; flex-direction: column; justify-content: center;
  border-bottom: 1px solid var(--border);
}
.cy-place__list li:last-child { border-bottom: none; }
/* Cyan tint, not --pink (which now aliases --warning-tint/amber after the
   TARA palette migration) — amber is reserved for warning states (§8). */
.cy-place__list li.is-active, .cy-place__list li:hover { background: var(--surface-tint); }
.cy-place__name { font-size: 14px; font-weight: 600; }
.cy-place__ctx { font-size: 12px; color: var(--muted); }
.cy-btn--block { width: 100%; border-radius: 10px; padding: 16px; font-size: 15.5px; }
.cy-alert {
  padding: 11px 14px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 14px;
  background: #FDECE7; color: #C0392B; border: 1px solid rgba(194,57,43,.2);
}
.cy-alert--ok { background: #DEF0EA; color: #146650; border-color: rgba(20,102,80,.2); }
.cy-note {
  background: var(--cream); border-left: 4px solid var(--earth, var(--yellow));
  padding: 12px 14px; border-radius: var(--radius-sm);
  font-size: 12px; line-height: 1.5; margin-bottom: 16px;
}
.cy-note__head {
  font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--brown-dark); font-size: 11px; margin-bottom: 6px;
}
.cy-check {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 10px;
  padding: 10px 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 6px; font-size: 12px; cursor: pointer;
}
.cy-check input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--cyan); flex-shrink: 0; }

/* ============================================================
   ADMIN CONSOLE — inverts the public design on purpose:
   desktop-first 1440px, density over whitespace, tables not
   cards, 32px rows, muted chrome, cyan only for primary
   actions and active filters. A KYC queue in cards means fewer
   records per screen, which threatens the 24h review promise.
   ============================================================ */
.adm { max-width: 1440px; margin: 0 auto; padding: 16px 20px 48px; }
.adm__bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--border);
}
.adm__title { font-size: 17px; font-weight: 800; }
.adm__nav { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.adm__nav a {
  padding: 6px 11px; font-size: 12px; font-weight: 600; color: var(--muted);
  border-radius: var(--radius-sm);
}
.adm__nav a:hover { background: var(--cream-2, var(--cream)); color: var(--ink); }
.adm__nav a.is-active { background: var(--cyan); color: #fff; }

.adm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.adm-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }
.adm-stat__num { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.adm-stat__lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; }
.adm-stat--warn .adm-stat__num { color: var(--danger, #C24C4C); }
.adm-stat--ok .adm-stat__num { color: var(--success); }

.adm-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.adm-table th {
  text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); padding: 8px 12px;
  background: var(--cream); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.adm-table td { padding: 0 12px; height: 32px; font-size: 13px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.adm-table tr:last-child td { border-bottom: none; }
.adm-table tr:hover td { background: var(--cream); }
.adm-table .num { font-variant-numeric: tabular-nums; text-align: right; }
.adm-table__empty { padding: 22px 12px; text-align: center; color: var(--muted); font-size: 13px; }
.adm-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.adm-btn {
  min-height: 28px; padding: 0 10px; border-radius: 6px; font-size: 12px; font-weight: 700;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  display: inline-flex; align-items: center;
}
.adm-btn:hover { background: var(--cream); }
.adm-btn--primary { background: var(--cyan); border-color: var(--cyan); color: #fff; }
.adm-btn--primary:hover { background: var(--cyan-dark); color: #fff; }
.adm-btn--danger { color: var(--danger, #C24C4C); border-color: rgba(194,76,76,.35); }
.adm-input {
  min-height: 28px; padding: 0 8px; font-size: 12px;
  border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--ink); max-width: 180px;
}
.adm-form-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.adm-note { font-size: 11px; color: var(--muted); margin-top: 10px; }

@media (max-width: 800px) {
  .adm { padding: 12px; }
  .adm-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ============================================================
   AUTH PAGES — login, signup, verify, password reset
   Dark-first (5:30 AM commuter is primary), 360px mobile-first.
   ============================================================ */
.cy-auth {
  max-width: 480px; margin: 0 auto; padding: 36px 20px 40px;
  display: flex; flex-direction: column; align-items: center;
}
.cy-auth__brand {
  margin-bottom: 24px;
}
.cy-auth__mark {
  display: block; width: 40px; height: 40px; border-radius: 50%;
  background: var(--text); box-shadow: inset 0 0 0 7px var(--cyan);
}
.cy-auth__h1 {
  font-size: 34px; line-height: 1.08; text-align: center;
  margin-bottom: 10px; color: var(--text);
}
.cy-auth__lead {
  font-size: 15px; line-height: 1.55; color: var(--text-muted); text-align: center;
  margin-bottom: 22px; max-width: 36ch;
}
.cy-panel--auth {
  width: 100%; max-width: 480px; margin: 0;
  border-radius: 14px; padding: 24px;
}
.cy-panel--secondary {
  border-style: dashed;
}
.cy-panel--secondary__head {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: var(--text);
  margin-bottom: 4px;
}
.cy-panel--secondary__head svg { color: var(--text-muted); flex: 0 0 auto; }
.cy-auth__links {
  text-align: center; margin-top: 16px; font-size: 13px; line-height: 1;
}
.cy-auth__links a { font-weight: 600; }
.cy-auth__divider {
  width: 100%; max-width: 420px; display: flex; align-items: center;
  gap: 14px; margin: 20px 0;
}
.cy-auth__divider::before,
.cy-auth__divider::after {
  content: ""; flex: 1; height: 1px; background: var(--hairline);
}
.cy-auth__divider span {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em;
}
.cy-auth__disclaimer {
  margin-top: 28px; font-size: 11px; color: var(--text-muted);
  text-align: center; line-height: 1.55; max-width: 36ch;
}
.cy-auth__disclaimer a { font-weight: 600; }

/* Password field with show/hide toggle */
.cy-field__pw {
  position: relative; display: flex; align-items: center;
}
.cy-field__pw input {
  width: 100%; padding-right: 44px;
}
.cy-field__eye {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 44px; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); background: none; border: none; cursor: pointer;
  padding: 0;
}
.cy-field__eye:hover { color: var(--text); }

/* Verification code input — large, tracked, monospace feel */
.cy-field__code {
  letter-spacing: .35em; font-size: 22px; font-weight: 700;
  font-variant-numeric: tabular-nums; text-align: center;
}

/* Outline button variant */
.cy-btn--outline {
  background: var(--surface); color: var(--cyan); border: 1.5px solid var(--cyan);
}
.cy-btn--outline:hover {
  background: var(--surface-tint); color: var(--cyan-press);
  border-color: var(--cyan-press);
}

/* ---- Board offer card (template 2a grid items) ---- */
.cy-offercard {
  border-radius: 14px; padding: 18px;
  box-shadow: 0 0 0 1px rgba(4,34,42,.1);
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface);
}
.cy-offercard__top {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
}
.cy-offercard__time {
  font: 700 26px/1 'Plus Jakarta Sans', sans-serif;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.cy-offercard__day { margin-top: 5px; font-size: 13px; font-weight: 500; color: var(--text-muted); }
.cy-offercard__route { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--text); }
.cy-offercard__driver {
  display: flex; align-items: center; gap: 10px;
  padding-top: 11px; border-top: 1px solid var(--hairline);
}
.cy-offercard__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.cy-offercard__cta {
  margin-top: auto; text-align: center; font-size: 15px; font-weight: 600;
  color: var(--on-cyan); background: var(--cyan); padding: 14px; border-radius: 10px;
}
.cy-offercard__note {
  text-align: center; font-size: 11.5px; color: var(--text-muted);
}

/* ---- Segmented control (template 2c: Upcoming / Pending / Past) ---- */
.cy-seg {
  display: flex; gap: 6px; background: var(--surface-tint);
  padding: 4px; border-radius: 999px;
}
.cy-seg__btn {
  flex: 1; text-align: center; font-size: 14px; font-weight: 600;
  padding: 10px 16px; border-radius: 999px; border: none; cursor: pointer;
  color: var(--text-muted); background: transparent;
}
.cy-seg__btn.is-active {
  background: var(--surface); color: var(--text);
  box-shadow: 0 1px 3px rgba(4,34,42,.12);
}

/* ---- Driver header (template 2d: dark nav with DRIVER badge) ---- */
.cy-driverbar {
  background: #04222A; padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.cy-driverbar__left { display: flex; align-items: center; gap: 16px; }
.cy-driverbar__brand {
  display: flex; align-items: center; gap: 10px;
}
.cy-driverbar__mark {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--cyan); box-shadow: inset 0 0 0 5px #04222A;
}
.cy-driverbar__name {
  font: 600 16px 'Plus Jakarta Sans', sans-serif;
  letter-spacing: .13em; color: #fff;
}
.cy-driverbar__badge {
  font: 600 12px 'Plus Jakarta Sans', sans-serif;
  color: #04222A; background: var(--cyan);
  padding: 4px 9px; border-radius: 5px; letter-spacing: .06em;
}
.cy-driverbar__nav {
  display: flex; gap: 20px; font-size: 15px; font-weight: 500;
  color: rgba(255,255,255,.7);
}
.cy-driverbar__nav a { color: rgba(255,255,255,.7); }
.cy-driverbar__nav a:hover { color: #fff; }
.cy-driverbar__nav .is-active { color: #fff; }
.cy-driverbar__right { display: flex; align-items: center; gap: 14px; }
.cy-driverbar__switch {
  font: 600 13.5px 'Plus Jakarta Sans', sans-serif;
  color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3);
  padding: 9px 13px; border-radius: 999px;
}
@media (min-width: 1024px) {
  .cy-driverbar { padding: 20px 44px; }
  .cy-driverbar__left { gap: 36px; }
  .cy-driverbar__nav { gap: 24px; }
}

/* ---- Driver bar on a phone. It previously had NO rule below 1024px, so the
   desktop row (brand + DRIVER badge + four links + "Switch to rider" + avatar,
   ~660px of content) simply flex-wrapped inside 360px into a ragged stack.
   Restructured into two deliberate rows: identity, then a horizontally
   scrollable link strip.

   Note the nav is a child of __left, not of the bar — so __left is what has to
   wrap for the links to drop onto their own line.

   The links are NOT folded into the bottom bar: that carries four items and
   Permit would become unreachable on mobile. ---- */
@media (max-width: 767px) {
  .cy-driverbar { flex-wrap: nowrap; gap: 10px; padding: 10px 14px; align-items: center; }

  .cy-driverbar__left { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; gap: 8px 10px; }
  .cy-driverbar__right { flex: 0 0 auto; gap: 8px; }

  .cy-driverbar__brand { min-width: 0; flex: 0 1 auto; }
  .cy-driverbar__name { font-size: 13.5px; letter-spacing: .08em; }
  .cy-driverbar__mark { width: 18px; height: 18px; box-shadow: inset 0 0 0 4px #04222A; flex: 0 0 auto; }
  .cy-driverbar__badge { font-size: 10px; padding: 3px 6px; flex: 0 0 auto; }
  .cy-driverbar__switch { font-size: 12px; padding: 7px 10px; white-space: nowrap; }
  .cy-driverbar .cy-nav__avatar { width: 30px; height: 30px; font-size: 12px; flex: 0 0 auto; }

  /* Second row: one scrollable line rather than a wrapping block, so all four
     links stay reachable at any width and the bar's height never reflows. */
  .cy-driverbar__nav {
    flex-basis: 100%; width: 100%;
    flex-wrap: nowrap; overflow-x: auto; gap: 18px;
    font-size: 14px; padding-bottom: 2px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .cy-driverbar__nav::-webkit-scrollbar { display: none; }
  .cy-driverbar__nav a { white-space: nowrap; flex: 0 0 auto; padding-bottom: 3px; }
  .cy-driverbar__nav .is-active { border-bottom: 2px solid var(--cyan); }
}

/* ---- Sidebar panel (template 2c/2d: right column) ---- */
.cy-sidebar {
  background: var(--bg); padding: 24px 20px;
  display: flex; flex-direction: column; gap: 16px;
}
.cy-sidebar__card {
  background: var(--surface); border-radius: 14px; padding: 20px;
  box-shadow: 0 0 0 1px rgba(4,34,42,.07);
}
.cy-sidebar__label {
  font: 600 11.5px 'Plus Jakarta Sans', sans-serif;
  color: var(--text-muted); letter-spacing: .09em;
}

/* ---- KYC step pills (template 3a) ---- */
.cy-kycstep {
  display: flex; align-items: center; gap: 11px;
  background: var(--surface); border-radius: 10px;
  padding: 13px 14px; box-shadow: 0 0 0 1px rgba(4,34,42,.07);
}
.cy-kycstep__dot {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 600 12px 'Plus Jakarta Sans', sans-serif;
}
.cy-kycstep__label { flex: 1; font: 600 14.5px 'Plus Jakarta Sans', sans-serif; color: var(--text); }
.cy-kycstep__state { font: 500 13px 'Plus Jakarta Sans', sans-serif; color: var(--text-muted); }

/* ---- Held-trip card (template 3a: cyan card in sidebar) ---- */
.cy-held {
  background: var(--cyan); border-radius: 14px; padding: 20px;
}
.cy-held__label {
  font: 600 11.5px 'Plus Jakarta Sans', sans-serif;
  color: rgba(4,34,42,.7); letter-spacing: .09em;
}
.cy-held__time {
  margin-top: 10px; font: 700 30px/1 'Plus Jakarta Sans', sans-serif;
  color: var(--on-cyan); font-variant-numeric: tabular-nums;
}
.cy-held__detail {
  margin-top: 8px; font: 500 14.5px 'Plus Jakarta Sans', sans-serif;
  color: rgba(4,34,42,.8);
}

/* ---- Signed-in nav (template 2c: nav with avatar) ---- */
.cy-nav__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: #04222A; color: #7FE9F4;
  display: flex; align-items: center; justify-content: center;
  font: 600 13.5px 'Plus Jakarta Sans', sans-serif;
}
.cy-nav__switch {
  font: 600 13.5px 'Plus Jakarta Sans', sans-serif;
  color: var(--text); background: var(--surface-tint);
  padding: 9px 13px; border-radius: 999px;
}

/* ---- Two-column desk layout (template 2c/2d/3d) ---- */
.cy-desk { display: block; }
@media (min-width: 1024px) {
  .cy-desk {
    display: grid; grid-template-columns: minmax(0, 1fr) 380px;
    min-height: 620px;
    /* Capped and centred rather than edge-to-edge: on a 1990px display an
       uncapped 1fr main column stretched a single empty card across half a
       metre of screen. 1440 matches the reference frame. */
    max-width: 1440px; margin: 0 auto; width: 100%;
  }
  .cy-desk__main {
    min-width: 0;
    padding: 30px 34px; border-right: 1px solid var(--hairline);
  }
  .cy-desk__side {
    min-width: 0;
    padding: 30px; background: var(--bg);
  }
}
@media (min-width: 1440px) {
  /* Beyond the cap the side rail can afford to breathe a little more. */
  .cy-desk { grid-template-columns: minmax(0, 1fr) 400px; }
}

/* ---- Page display heading (template Instrument Serif) ---- */
.cy-page__h1 {
  margin: 0; font: 400 28px 'Instrument Serif', serif; color: var(--text);
}
@media (min-width: 1024px) {
  .cy-page__h1 { font-size: 34px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- Signed-in account menu (nickname top-right + log out). Click-outside
   and Escape both close it; it degrades to a plain /account link with JS off,
   so the menu is never the only path to any of these pages. ---- */
.cy-acct { position: relative; }
.cy-acct__btn {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 40px; padding: 0 10px 0 6px; border-radius: 999px;
  background: var(--surface-tint); color: var(--text);
  font-size: 14px; font-weight: 600;
}
.cy-acct__btn:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline); }
.cy-acct__btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.cy-acct__av {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--text); color: var(--cyan); font-size: 11.5px; font-weight: 700;
}
.cy-acct__nick { max-width: 13ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cy-acct__caret { font-size: 10px; color: var(--text-muted); }
.cy-acct__menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 70;
  min-width: 258px; padding: 6px;
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); border: 1px solid var(--hairline);
}
.cy-acct__head { padding: 11px 12px 12px; border-bottom: 1px solid var(--hairline); margin-bottom: 6px; }
.cy-acct__headnick { font-size: 15px; font-weight: 700; }
.cy-acct__headmail {
  font-size: 12.5px; color: var(--text-muted); margin: 2px 0 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cy-acct__item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; min-height: 42px; padding: 0 12px;
  border-radius: var(--radius-sm);
  font-size: 14.5px; font-weight: 500; color: var(--text);
}
.cy-acct__item:hover { background: var(--surface-tint); color: var(--text); }
.cy-acct__item:focus-visible { outline: 2px solid var(--cyan); outline-offset: -2px; }
.cy-acct__hint { font-size: 11.5px; color: var(--text-muted); font-weight: 400; }
.cy-acct__logout { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--hairline); }
.cy-acct__item--danger { color: var(--error); font-weight: 600; }
.cy-header__right { display: flex; align-items: center; gap: 14px; }
.cy-header__link { font-size: 14px; font-weight: 500; color: var(--text-muted); }

/* ---- Account hub cards ---- */
.cy-acctgrid {
  margin-top: 20px; display: grid; gap: 11px;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.cy-acctcard {
  display: block; padding: 15px 16px; border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.cy-acctcard:hover { background: var(--surface-tint); color: var(--text); box-shadow: inset 0 0 0 1.5px rgba(0,201,222,.4); }
.cy-acctcard:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.cy-acctcard__t { font-size: 15.5px; font-weight: 700; }
.cy-acctcard__s { font-size: 13px; color: var(--text-muted); margin-top: 3px; line-height: 1.45; }
.cy-acctcard__m { font-size: 12px; color: var(--cyan-press); font-weight: 600; margin-top: 7px; }

/* ============================================================
   MOBILE REPAIR (<=767px) + BOTTOM NAV
   .cy-nav is a fixed-height flex row built for 1440px. At 360px it was being
   asked to hold brand + section links + "Switch to driver" + nickname, which
   overflows by ~70px and drags the whole page sideways. Below 768px the
   sections move to .cy-bnav at the bottom and the top bar keeps brand +
   account only.
   ============================================================ */

/* Nothing may establish a horizontal scroll: one overflowing child otherwise
   shifts every fixed/sticky element on the page, which is what read as
   "the header is distorted".
   `clip`, NOT `hidden` — overflow-x:hidden makes body a scroll container in
   several browsers, which silently kills the position:sticky on .cy-header
   and .cy-searchbar. clip contains the overflow without that side effect;
   where it is unsupported we simply lose the guard, and the real overflow
   causes below are fixed anyway. */
html, body { max-width: 100%; }
body { overflow-x: clip; }

@media (max-width: 767px) {
  .cy-nav {
    height: auto; min-height: 56px; padding: 8px 14px;
    gap: 10px; flex-wrap: nowrap;
  }
  .cy-nav__left { gap: 12px; min-width: 0; flex: 1 1 auto; }
  .cy-nav__right { gap: 8px; flex: 0 0 auto; min-width: 0; }
  .cy-nav__brand {
    font-size: 14px; letter-spacing: .08em;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .cy-nav__mark { width: 18px; height: 18px; box-shadow: inset 0 0 0 3px var(--cyan); }
  /* Duplicated by the bottom bar, and the account menu also links to it. */
  .cy-nav__switch { display: none; }
  .cy-header { padding: 0 14px; gap: 10px; }
  .cy-header__brand { font-size: 18px; min-width: 0; }
  .cy-header__right { gap: 8px; min-width: 0; }
  .cy-header__link { display: none; }

  /* Nickname is in the dropdown header; the pill shrinks to the avatar so it
     can never push the bar wider than the screen. */
  .cy-acct__nick, .cy-acct__caret { display: none; }
  .cy-acct__btn { padding: 0; background: transparent; }
  .cy-acct__btn:hover { background: transparent; box-shadow: none; }
  .cy-acct__av { width: 34px; height: 34px; font-size: 12.5px; }
  /* Anchored right, but never wider than the viewport. */
  .cy-acct__menu {
    min-width: 0; width: max-content; max-width: calc(100vw - 20px);
    right: 0; left: auto;
  }

  /* Clear the fixed bottom bar (plus the iPhone home-indicator inset). */
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
  .cy-sheet__scrim { padding-bottom: 0; }
}

/* Bottom bar itself — mobile only. */
.cy-bnav { display: none; }
@media (max-width: 767px) {
  .cy-bnav {
    display: flex; position: fixed; z-index: 50;
    left: 0; right: 0; bottom: 0;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    backdrop-filter: saturate(180%) blur(8px);
    border-top: 1px solid var(--hairline);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .cy-bnav__item {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; min-height: 60px; padding: 6px 2px;
    color: var(--text-muted); font-size: 10.5px; font-weight: 600;
    letter-spacing: .01em; text-align: center;
  }
  .cy-bnav__item.is-on { color: var(--cyan-press); }
  .cy-bnav__item.is-on .cy-bnav__glyph { background: var(--surface-tint); }
  .cy-bnav__item:focus-visible { outline: 2px solid var(--cyan); outline-offset: -3px; }
  .cy-bnav__glyph {
    font-size: 16px; line-height: 1;
    width: 30px; height: 24px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .cy-bnav__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---- Native date/time fields: stop the value overlapping the border ----
   Safari/iOS gives these an intrinsic content width and centres the inner
   ::-webkit-date-and-time-value, so the text rides over the 1.5px border on a
   narrow field regardless of the width:100% already set on .cy-field__input.
   Normalising appearance + the shadow-DOM parts is the only reliable fix. */
input[type="date"], input[type="time"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value {
  text-align: left; margin: 0; padding: 0;
}
input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit {
  padding: 0; overflow: visible; line-height: normal;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  flex: 0 0 auto; margin: 0 0 0 6px; padding: 0;
}
/* Tightest phones: the picker glyph plus 8 date characters will not fit with
   14px side padding, and it is the padding that forces the overlap. */
@media (max-width: 400px) {
  .cy-field__input[type="date"], .cy-field__input[type="time"] { padding: 0 8px; font-size: 15px; }
  .cy-searchinline__date { min-width: 0; }
}

/* ---- Admin: hero-copy editor. Desktop-first and density-first, matching the
   rest of the console (§6.3) rather than the consumer surfaces. ---- */
.adm-flash {
  padding: 11px 14px; border-radius: 6px; margin: 0 0 14px;
  font-size: 13px; font-weight: 600;
}
.adm-flash--ok { background: var(--success-tint); color: var(--success); }
.adm-flash--err { background: var(--error-tint); color: var(--error); }
.adm-lbl {
  display: block; margin: 14px 0 5px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.adm-input--wide { width: 100%; max-width: 720px; }
textarea.adm-input { min-height: 62px; padding: 10px 12px; line-height: 1.5; resize: vertical; }

/* ---- Staff context bar. Deliberately borrows the ADMIN console's dark ink
   rather than the consumer palette: on a rider page it must read as chrome
   belonging to a different system, so a staff session can never be mistaken
   for a rider one. Sits above the sticky header in source order and is not
   itself sticky — it is orientation, not a control surface. ---- */
.cy-staffbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 20px;
  background: #04222A; color: #7FE9F4;
  font-size: 12.5px; line-height: 1.4;
}
.cy-staffbar__tag {
  flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: .1em;
  background: #7FE9F4; color: #04222A; padding: 3px 7px; border-radius: 4px;
}
.cy-staffbar__txt { flex: 1 1 auto; min-width: 0; color: rgba(255,255,255,.82); }
.cy-staffbar__txt strong { color: #fff; font-weight: 600; }
.cy-staffbar__back {
  flex: 0 0 auto; font-weight: 600; color: #04222A;
  background: #7FE9F4; padding: 6px 11px; border-radius: 999px;
}
.cy-staffbar__back:hover { background: #fff; color: #04222A; }
.cy-staffbar__back:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 767px) {
  .cy-staffbar { padding: 7px 14px; gap: 8px; font-size: 11.5px; }
  .cy-staffbar__txt { display: none; }
}

/* ─── Conversion desk (template 3a) ─── */
/* Conversion desk (/request/sign-in) ONLY. This used to be a second
   `.cy-desk` block declared AFTER the grid one above, so it silently won the
   cascade on every page that used .cy-desk — My rides, Account, driver routes
   and driver requests all became flex rows whose __main/__side children had no
   flex sizing, shrank to their content, and huddled into the left half of the
   screen with dead space beside them. Renamed so the two layouts cannot
   collide again. */
.cy-cdesk { display: flex; flex-direction: column; gap: 28px; padding: 28px 20px 40px; }
.cy-cdesk__col--muted { opacity: .4; pointer-events: none; }
.cy-cdesk__col--aside { order: -1; }
.cy-cdesk__label { font-size: 11.5px; font-weight: 600; letter-spacing: .09em; color: var(--cyan); text-transform: uppercase; }
.cy-cdesk__form { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 20px; }
.cy-cdesk__heldcard { background: var(--cyan); color: #fff; border-radius: var(--radius); padding: 22px; }
.cy-cdesk__heldcard .cy-t28 { color: #fff; }
.cy-cdesk__heldlabel { font-size: 11.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; opacity: .85; }
.cy-cdesk__otprow { display: flex; gap: 8px; margin-top: 14px; }
.cy-cdesk__otpbox { width: 42px; height: 50px; border-radius: 8px; border: 1.5px solid var(--hairline); background: var(--surface); }
.cy-cdesk .cy-social { max-width: 100%; }
.cy-cdesk .cy-social__btn { max-width: 100%; }
.cy-cdesk .cy-social__note { text-align: left; }
@media (min-width: 1024px) {
  .cy-cdesk { flex-direction: row; padding: 40px 44px 44px; gap: 32px; align-items: flex-start; }
  .cy-cdesk__col { flex: 1; min-width: 0; }
  .cy-cdesk__col--aside { flex: 0 0 280px; order: 0; position: sticky; top: 24px; }
}

/* ============================================================
   ROUTE COMPOSER (mockup 3c) — rail | main | side at 1440,
   stacking to one column on a phone. Driver-console density:
   the whole thing is one form, so "all eight steps visible at
   once" is literal, and the rail is a jump list rather than a
   multi-step router that could lose input between screens.
   ============================================================ */
.rc { display: block; background: var(--surface); }
.rc__rail { display: none; }
.rc__main { padding: 22px 20px 8px; }
.rc__side { padding: 8px 20px 30px; display: flex; flex-direction: column; gap: 20px; }

.rc__h1 { margin: 0; font-size: 26px; line-height: 1.08; color: var(--text); }
.rc__lead {
  margin: 10px 0 0; max-width: 560px;
  font-size: 14.5px; line-height: 1.55; color: var(--text-muted);
}
.rc__sec { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.rc__seclabel {
  font-size: 11.5px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-muted);
}
.rc__note { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.rc__inline { margin-top: 12px; display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; }

/* ---- Ordered stop rows ---- */
.rc__rows { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.rc__row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 10px;
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--hairline);
}
.rc__rown {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cyan); color: var(--on-cyan);
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.rc__rowsel {
  flex: 1 1 180px; min-width: 0; min-height: 40px; padding: 0 10px;
  font-size: 15px; font-weight: 600; color: var(--text);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px;
}
.rc__rowoff { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); }
.rc__rowoff input {
  width: 68px; min-height: 38px; padding: 0 8px; text-align: right;
  font-size: 14px; color: var(--text);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 8px;
}
.rc__rowctl { flex: 0 0 auto; display: inline-flex; gap: 4px; }
.rc__ctl {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--surface); color: var(--text-muted);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: 14px; line-height: 1;
}
.rc__ctl:hover:not(:disabled) { background: var(--surface-tint); color: var(--text); }
.rc__ctl:disabled { opacity: .35; cursor: not-allowed; }
.rc__ctl:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.rc__ctl--x:hover:not(:disabled) { color: var(--error); }
.rc__add {
  margin-top: 12px; align-self: flex-start;
  font-size: 15px; font-weight: 600; color: var(--text);
  background: var(--surface-tint); padding: 13px 18px; border-radius: 10px;
}
.rc__add:hover { background: var(--cyan); color: var(--on-cyan); }

.rc__days { margin-top: 12px; display: flex; gap: 7px; flex-wrap: wrap; }
.rc__day {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 13px; border-radius: 999px;
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.rc__day input { accent-color: var(--cyan); }
.rc__day:has(input:checked) { background: var(--surface-tint); box-shadow: inset 0 0 0 1.5px var(--cyan); }

.rc__declare {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 12px;
  font-size: 14px; line-height: 1.5; color: var(--text);
}
.rc__declare input { margin-top: 3px; accent-color: var(--cyan); flex: 0 0 auto; }

/* ---- Right column ---- */
.rc__costwrap {
  margin-top: 8px; display: flex; align-items: center; gap: 8px;
  background: var(--surface); border-radius: 8px; padding: 12px 14px;
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.rc__peso { font-size: 17px; font-weight: 700; color: var(--text); }
.rc__cost {
  flex: 1 1 0; min-width: 0; border: none; background: transparent;
  font-size: 17px; font-weight: 700; color: var(--text);
}
.rc__cost:focus { outline: none; }
.rc__perseat { font-size: 14px; color: var(--text-muted); white-space: nowrap; }

.rc__preview {
  margin-top: 10px; background: var(--surface); border-radius: 12px; padding: 16px;
  box-shadow: 0 0 0 1px var(--hairline);
}
.rc__prevtime { font-size: 26px; font-weight: 700; line-height: 1; color: var(--text); }
.rc__prevroute { margin-top: 7px; font-size: 14px; line-height: 1.45; color: var(--text-muted); }
.rc__prevpills { margin-top: 11px; display: flex; gap: 7px; flex-wrap: wrap; }
.rc__prevpill {
  padding: 7px 11px; border-radius: 999px; background: var(--surface-tint);
  font-size: 12.5px; font-weight: 600; color: var(--text);
}
.rc__prevpill--seats { background: var(--success-tint); color: var(--success); }

.rc__gate { background: var(--cyan); border-radius: 14px; padding: 18px; }
.rc__gatekicker {
  font-size: 11.5px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(4,34,42,.7);
}
.rc__gateh { margin: 10px 0 0; font-size: 22px; line-height: 1.14; color: var(--on-cyan); }
.rc__gatep { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: rgba(4,34,42,.78); }
.rc__gatebtns { margin-top: 14px; display: flex; gap: 9px; flex-wrap: wrap; }
.rc__gatebtn {
  flex: 1 1 120px; text-align: center; padding: 14px 12px; border-radius: 9px;
  font-size: 14.5px; font-weight: 600;
  background: rgba(255,255,255,.6); color: var(--on-cyan);
}
.rc__gatebtn:hover { background: #fff; color: var(--on-cyan); }
.rc__gatebtn--dark { background: #04222A; color: #7FE9F4; }
.rc__gatebtn--dark:hover { background: #04222A; color: #fff; }

.rc__actions { display: flex; flex-direction: column; gap: 4px; }
.rc__submit { width: 100%; padding: 17px; font-size: 16px; border-radius: 10px; }
.rc__later {
  text-align: center; padding: 12px; font-size: 15px; font-weight: 600; color: var(--text);
}

@media (min-width: 1024px) {
  .rc {
    display: grid; grid-template-columns: 250px 1fr 400px;
    min-height: 640px; align-items: start;
  }
  .rc__rail {
    display: block; align-self: stretch;
    padding: 26px 22px; background: var(--bg);
    border-right: 1px solid var(--hairline);
  }
  .rc__railhead {
    font-size: 11.5px; font-weight: 600; letter-spacing: .09em;
    text-transform: uppercase; color: var(--text-muted);
  }
  .rc__step {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 0; border-bottom: 1px solid var(--hairline);
    color: var(--text); font-size: 14.5px;
  }
  .rc__step:hover { color: var(--cyan-press); }
  .rc__step:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
  .rc__stepn {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline);
    font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  }
  .rc__main { padding: 30px 34px; border-right: 1px solid var(--hairline); }
  .rc__side { padding: 30px; background: var(--bg); gap: 18px; align-self: stretch; }
  .rc__h1 { font-size: 34px; }
}

/* ============================================================
   ACTIVE RIDE — the highlighted card at the top of the rider's
   landing page. Green, never cyan: "Confirmed" is always green
   (§10) and cyan is reserved for actions.
   ============================================================ */
.cy-active {
  border-radius: var(--radius); overflow: hidden;
  background: var(--surface); box-shadow: 0 0 0 1.5px var(--success), var(--shadow);
}
.cy-active__bar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 10px 18px; background: var(--success-tint);
}
.cy-active__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); flex: 0 0 auto; }
.cy-active__kicker {
  flex: 1 1 auto; font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--success);
}
.cy-active__body { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; padding: 18px; }
.cy-active__when { flex: 0 0 auto; }
.cy-active__time { font-size: 30px; font-weight: 800; line-height: 1; color: var(--text); }
.cy-active__date { font-size: 13.5px; color: var(--text-muted); margin-top: 4px; }
.cy-active__mid { flex: 1 1 220px; min-width: 0; }
.cy-active__route { font-size: 17px; font-weight: 700; color: var(--text); }
.cy-active__meta { font-size: 13.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
.cy-active__pin {
  flex: 0 0 auto; text-align: center; padding: 10px 16px;
  border-radius: 10px; background: var(--surface-tint);
}
.cy-active__pinlabel { font-size: 10px; font-weight: 700; letter-spacing: .07em; color: var(--text-muted); }
.cy-active__pinval { font-size: 26px; font-weight: 800; letter-spacing: .18em; color: var(--text); }
.cy-active__pinnote { font-size: 11px; color: var(--text-muted); }
.cy-active__actions {
  display: flex; gap: 9px; flex-wrap: wrap;
  padding: 0 18px 18px;
}
.cy-active__actions .cy-btn { flex: 1 1 150px; text-align: center; }
.cy-active__alt {
  flex: 1 1 130px; text-align: center; padding: 14px 12px; border-radius: 10px;
  font-size: 15px; font-weight: 600; color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--hairline);
}
.cy-active__alt:hover { background: var(--surface-tint); color: var(--text); }

/* ---- Account page (mockup 3d): identity block + label|value|Manage rows ---- */
.acct__name { margin: 0; font-size: 34px; line-height: 1.05; color: var(--text); }
.acct__sub { margin: 6px 0 12px; font-size: 15px; color: var(--text-muted); }
.acct__pills { display: flex; gap: 7px; flex-wrap: wrap; }
.acct__pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
}
.acct__pill--ok { background: var(--success-tint); color: var(--success); }
.acct__pill--warn { background: var(--warning-tint); color: var(--warning); }

.acct__rows { margin-top: 22px; }
.acct__row {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 0; border-top: 1px solid var(--hairline);
}
.acct__label { flex: 0 0 190px; font-size: 15.5px; font-weight: 600; color: var(--text); }
.acct__val { flex: 1 1 200px; min-width: 0; font-size: 14.5px; color: var(--text-muted); }
.acct__manage { flex: 0 0 auto; font-size: 14px; font-weight: 600; color: var(--cyan-press); }

.acct__danger {
  margin-top: 26px; max-width: 620px; border-radius: 12px; padding: 18px;
  box-shadow: 0 0 0 1.5px rgba(156,43,30,.3);
}
.acct__dangerh { font-size: 15.5px; font-weight: 600; color: var(--error); }
.acct__dangerp { margin: 7px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.acct__dangerbtn {
  margin-top: 12px; padding: 12px 16px; border-radius: 9px;
  font-size: 14.5px; font-weight: 600;
  color: var(--error); background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(156,43,30,.35);
}
.acct__dangerbtn:hover { background: var(--error-tint); }

.acct__alert { display: flex; gap: 11px; padding: 13px 0; border-bottom: 1px solid var(--hairline); }
.acct__alertdot {
  width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none;
  background: var(--cyan);
}
.acct__alertkind {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em;
  color: var(--text-muted);
}
.acct__alerthead { display: block; margin-top: 5px; font-size: 15px; font-weight: 700; color: var(--text); }
.acct__alertbody { display: block; margin-top: 4px; font-size: 13px; color: var(--text-muted); }

@media (max-width: 767px) {
  .acct__name { font-size: 27px; }
  .acct__label { flex: 1 1 100%; }
  .acct__val { flex: 1 1 100%; }
  .cy-active__time { font-size: 26px; }
}

/* ---- Request pending (§6.1): deliberately unfinished. Dashed + warning tone,
   no perforation, nothing that reads as a ticket — a ticket before the driver
   accepts would be a lie (§3.8). ---- */
.cy-pending {
  max-width: 420px; margin: 24px auto; padding: 20px;
  border: 2px dashed var(--warning); border-radius: var(--radius);
  background: var(--warning-tint);
}
.cy-pending__kicker {
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--warning);
}
.cy-pending__time { font-size: 30px; font-weight: 800; margin-top: 6px; color: var(--text); }
.cy-pending__date { font-size: 13.5px; color: var(--warning); }
.cy-pending__route { margin-top: 10px; font-size: 16px; font-weight: 700; color: var(--text); }
.cy-pending__note { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text); opacity: .8; }
.cy-pending__cancel {
  width: 100%; padding: 14px; border-radius: 10px;
  font-size: 15px; font-weight: 600; color: var(--warning);
  background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--warning);
}
.cy-pending__cancel:hover { background: var(--warning); color: var(--surface); }

/* ---- Ticket panels below the pass: sequence, broadcast, contact, SOS ---- */
.cy-tik {
  max-width: 420px; margin: 14px auto 0; padding: 16px 18px;
  background: var(--surface); border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--hairline);
}
.cy-tik--sos { box-shadow: 0 0 0 1.5px rgba(156,43,30,.28); }
.cy-tik__label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted);
}
.cy-tik__note { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); }

.cy-tik__seq { margin-top: 12px; display: flex; flex-direction: column; }
.cy-tik__stop {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--hairline);
}
.cy-tik__stop:last-child { border-bottom: none; }
.cy-tik__dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: var(--hairline); box-shadow: inset 0 0 0 2px var(--surface);
}
.cy-tik__stop.is-mine .cy-tik__dot { background: var(--cyan); }
.cy-tik__stopname { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--text-muted); }
.cy-tik__stop.is-mine .cy-tik__stopname { color: var(--text); font-weight: 700; }
.cy-tik__you {
  display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px;
  background: var(--surface-tint); color: var(--cyan-press);
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
}
.cy-tik__stoptime { flex: 0 0 auto; font-size: 13px; color: var(--text-muted); }

.cy-tik__ping { margin-top: 8px; font-size: 15px; color: var(--text); }

.cy-tik__acts { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.cy-tik__act {
  flex: 1 1 180px; display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; border-radius: 10px; text-align: left;
  background: var(--bg); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.cy-tik__act:hover { background: var(--surface-tint); color: var(--text); }
.cy-tik__act--btn { width: 100%; cursor: pointer; }
.cy-tik__act--btn:disabled { opacity: .55; cursor: not-allowed; }
.cy-tik__act--sos { background: var(--error-tint); box-shadow: inset 0 0 0 1.5px rgba(156,43,30,.3); }
.cy-tik__act--sos .cy-tik__actt { color: var(--error); }
.cy-tik__actt { font-size: 14.5px; font-weight: 700; }
.cy-tik__acts2 { font-size: 11.5px; line-height: 1.4; color: var(--text-muted); }

@media print { .cy-tik, .cy-pending__cancel { display: none !important; } }

/* ---- "How you reach this rider": the driver-side path from a Looking-For
   request to the trip's group chat. Exists because §7 blocks messaging the
   rider from this card and §7/§10 block any counter-offer, so the legitimate
   route to a conversation has to be stated rather than inferred. ---- */
.lfpath {
  margin-top: 18px; padding: 16px 18px; border-radius: var(--radius);
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--hairline);
}
.lfpath__label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted);
}
.lfpath__list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 11px; }
.lfpath__step { display: flex; gap: 11px; align-items: flex-start; }
.lfpath__n {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--text-muted);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.lfpath__step.is-key .lfpath__n { background: var(--cyan); color: var(--on-cyan); box-shadow: none; }
.lfpath__body { flex: 1 1 auto; min-width: 0; }
.lfpath__title { display: block; font-size: 14.5px; font-weight: 700; color: var(--text); }
.lfpath__step.is-key .lfpath__title { color: var(--cyan-press); }
.lfpath__text { display: block; margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.lfpath__note {
  margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--hairline);
  font-size: 12.5px; line-height: 1.5; color: var(--text-muted);
}

/* ---- Driver quick links. "Post a route" is a filled action, not the third
   plain link in a list: it is the job a driver opens the console to do, and on
   a phone this card stacks BELOW the main content, so a text link at the foot
   of a scroll is easy to miss. ---- */
.dql__cta {
  display: flex; align-items: center; gap: 11px;
  margin-top: 12px; padding: 13px 14px; border-radius: 10px;
  background: var(--cyan); color: var(--on-cyan);
}
.dql__cta:hover { background: var(--cyan-press); color: var(--on-cyan); }
.dql__cta:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.dql__ctaplus {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(4, 34, 42, .14); color: var(--on-cyan);
  font-size: 19px; font-weight: 700; line-height: 1;
}
.dql__ctat { display: block; font-size: 15.5px; font-weight: 700; }
.dql__ctas { display: block; font-size: 12px; line-height: 1.4; color: rgba(4, 34, 42, .72); }
.dql__list {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 10px; font-size: 15px;
}
@media (max-width: 767px) {
  /* Stacked below the content on a phone, so give the action a full-width tap
     target and a touch more presence. */
  .dql__cta { padding: 15px 14px; }
  .dql__ctat { font-size: 16px; }
}

/* ---- "Riders cannot see this route yet" on /driver/routes. A route can be
   status='active' and still be filtered out of the feed and search by the
   permit gate, so the driver needs the reason stated where they post. ---- */
.rl__blocker {
  margin-top: 12px; padding: 12px 14px; border-radius: 10px;
  background: var(--warning-tint);
  box-shadow: inset 0 0 0 1.5px rgba(122, 62, 0, .22);
}
.rl__blockerh { font-size: 14px; font-weight: 700; color: var(--warning); }
.rl__blockerp { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text); opacity: .85; }

/* ---- Public thread on a Looking-For request (right panel).
   Not a DM: there is no recipient, guests can read it, and it is deliberately
   plain so nobody mistakes it for the trip's private group chat. The "public"
   line is load-bearing — §3.3 keeps exact pickup points off anything public,
   and this is the one field on the page where a rider could leak one. ---- */
.lfthread { position: sticky; top: 84px; }
.lfthread__label {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-muted);
}
.lfthread__count {
  min-width: 20px; padding: 1px 7px; border-radius: 999px;
  background: var(--surface-tint); color: var(--cyan-press);
  font-size: 11px; letter-spacing: 0; text-align: center;
  font-variant-numeric: tabular-nums;
}
.lfthread__public {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 10px;
  background: var(--warning-tint); color: var(--text);
  font-size: 12.5px; line-height: 1.5;
}
.lfthread__empty { margin: 14px 0 0; font-size: 13px; line-height: 1.5; }
.lfthread__list {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: grid; gap: 10px;
  max-height: 46vh; overflow-y: auto;
}
.lfthread__msg {
  padding: 10px 12px; border-radius: 10px;
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--hairline);
}
.lfthread__msg.is-author { background: var(--surface-tint); box-shadow: none; }
.lfthread__head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lfthread__who { font-size: 13.5px; font-weight: 700; color: var(--text); }
.lfthread__tag {
  padding: 1px 7px; border-radius: 999px;
  background: var(--surface); color: var(--text-muted);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
}
.lfthread__tag--driver { background: var(--cyan); color: var(--on-cyan); box-shadow: none; }
.lfthread__tag--warn { background: var(--warning-tint); color: var(--warning); box-shadow: none; }
.lfthread__when { margin-left: auto; font-size: 11.5px; color: var(--text-muted); }
.lfthread__body { margin: 5px 0 0; font-size: 14px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.lfthread__err { margin: 12px 0 0; font-size: 13px; font-weight: 600; color: var(--error); }
.lfthread__closed { margin: 14px 0 0; font-size: 13px; }
.lfthread__signin { margin-top: 14px; width: 100%; }
.lfthread__form { margin-top: 14px; }
.lfthread__ta {
  display: block; width: 100%; box-sizing: border-box; resize: vertical;
  padding: 10px 12px; border: none; border-radius: 10px;
  background: var(--bg); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-family: inherit; font-size: 15px; line-height: 1.5;
}
.lfthread__ta:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--cyan); }
.lfthread__form .cy-btn { margin-top: 10px; width: 100%; }
@media (max-width: 900px) {
  .lfthread { position: static; }
  .lfthread__list { max-height: none; }
}

/* ---- "A driver posted a route for your request".
   The email that fires on publish is not a prompt — it is gone by the time the
   rider next opens the site. This is the same fact, made durable: on the rider
   home, on their request, and on the route itself. Deliberately loud on the
   rider's own request (--own) and quiet for anyone else reading the same page. ---- */
.lfans {
  display: block; margin: 0 0 16px; padding: 14px 16px; border-radius: var(--radius);
  background: var(--surface-tint); box-shadow: inset 0 0 0 1px var(--hairline);
  text-decoration: none;
}
.lfans--own { background: var(--surface-tint); box-shadow: inset 0 0 0 1.5px var(--cyan); }
.lfans--link { cursor: pointer; }
.lfans--link:hover { box-shadow: inset 0 0 0 1.5px var(--cyan-press); }
.lfans__head { display: flex; align-items: center; gap: 9px; }
.lfans__mark {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cyan); color: var(--on-cyan); font-size: 12px; font-weight: 700;
}
.lfans__title { font-size: 15px; font-weight: 700; color: var(--text); }
.lfans__sub {
  display: block; margin-top: 5px; padding-left: 31px;
  font-size: 13px; line-height: 1.5; color: var(--text-muted);
}
.lfans__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.lfans__link {
  display: block; padding: 10px 12px; border-radius: 10px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline);
  text-decoration: none; color: var(--text);
}
.lfans__link:hover { box-shadow: inset 0 0 0 1.5px var(--cyan); color: var(--text); }
.lfans__who { display: block; font-size: 14.5px; font-weight: 700; }
.lfans__meta { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-muted); }
.lfans__warn {
  display: inline-block; margin-top: 5px; padding: 1px 7px; border-radius: 999px;
  background: var(--warning-tint); color: var(--warning);
  font-size: 10.5px; font-weight: 700;
}
.lfans__note {
  margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--hairline);
  font-size: 12.5px; line-height: 1.5; color: var(--text-muted);
}
/* Same prompt, row-sized, on the rider's own requests list. */
.cy-row__answered {
  display: inline-block; margin-top: 6px; padding: 3px 9px; border-radius: 999px;
  background: var(--cyan); color: var(--on-cyan);
  font-size: 12px; font-weight: 700; text-decoration: none;
}
.cy-row__answered:hover { background: var(--cyan-press); color: var(--on-cyan); }

/* Pending-seat-request count in the driver bar. Sized to stay legible at 360px
   without pushing the nav links onto a second line. */
.cy-nav__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px;
  border-radius: 999px; background: var(--cyan); color: var(--on-cyan);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

/* Per-document review rows in the admin verification queue. Dense on purpose —
   the console inverts the consumer language: tables, not cards. */
.adm-docrow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 0; border-bottom: 1px solid var(--hairline);
}
.adm-docrow:last-child { border-bottom: none; }
.adm-sub { font-size: 12px; color: var(--text-muted); }
.adm-sub--verified { color: #1a7f4b; font-weight: 600; }
.adm-sub--rejected { color: #b3261e; font-weight: 600; }
.adm-sub--pending { color: #8a6d00; }

/* Rider-facing verification checklist. */
.vlist { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.vlist__item {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 14px; border-radius: 10px;
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--hairline);
}
.vlist__item--verified { background: var(--surface-tint); box-shadow: none; }
.vlist__item--rejected { box-shadow: inset 0 0 0 1.5px var(--error); }
.vlist__n {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--text-muted);
  box-shadow: inset 0 0 0 1px var(--hairline);
  font-size: 11.5px; font-weight: 700;
}
.vlist__item--verified .vlist__n { background: var(--cyan); color: var(--on-cyan); box-shadow: none; }
.vlist__body { flex: 1 1 auto; min-width: 0; }
.vlist__label { display: block; font-size: 14.5px; font-weight: 600; color: var(--text); }
.vlist__status { display: block; margin-top: 2px; font-size: 12.5px; color: var(--text-muted); }
.vlist__item--rejected .vlist__status { color: var(--error); font-weight: 600; }

/* Daily trip cap (§1). Shown next to every accept button, per date — a driver
   must see the limit before tapping, not discover it in an error. */
.tripcap {
  display: flex; align-items: baseline; gap: 7px;
  padding: 9px 12px; border-radius: 8px; background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.tripcap--full { background: var(--warning-tint); box-shadow: inset 0 0 0 1.5px rgba(122,62,0,.25); }
.tripcap__n { font-size: 15px; font-weight: 700; color: var(--text); }
.tripcap--full .tripcap__n { color: var(--warning); }
.tripcap__t { font-size: 12.5px; line-height: 1.4; color: var(--text-muted); }
.tripcap__blocked {
  margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--warning); font-weight: 600;
}

/* Time left on a pending seat request (§4, 1-hour TTL). */
.reqttl {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  background: var(--surface-tint); color: var(--cyan-press);
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.reqttl--soon { background: var(--warning-tint); color: var(--warning); }