/* ══════════════════════════════════════════════════════════════════════════
   AHOY'S OWN DESIGN SYSTEM, inside the Rides wing.

   Read from the live repository (Ridesharing, main @ a53b64c):
   src/design/tokens.css — which is one of exactly two design-system files
   there, and the only file where raw hex and px are legal (its L-02). That
   law is kept here: everything below the token block goes through a var().

   ITS DIRECTION, in its own words: "The Quiet Card — white page, one strong
   blue, soft grey cards, read in a second." The blue holds NAMED JOBS and is
   never wallpaper; status is words, never badges; one radius; four sizes, two
   weights; nothing a person must read goes below 15px.

   SCOPED to `.w-ahoy`, set on the body by paint(), so this product's own
   system is untouched elsewhere and the two never bleed.
   ══════════════════════════════════════════════════════════════════════════ */
.w-ahoy {
  /* ground and ink */
  --d-ground: #ffffff; --d-card: #f4f5f7;
  --d-ink: #101317; --d-ink-soft: #6b7280; --d-rule: #e3e5e9;
  /* THE SETTLED INK — the blue ruled across five July rounds and confirmed by
     the governor on variant A, 2026-08-04: "This is the one." (#1f5fd8 read
     "sickly"). Its named jobs: the hero block, the primary action, the live
     time and seat words — nothing else. */
  --d-accent: #27408b; --d-accent-deep: #1b2e63; --d-accent-on: #ffffff;
  --d-radius: 16px;
  --a-sans: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  --d-size-title: 28px; --d-size-entry: 20px; --d-size-body: 17px; --d-size-small: 15px;
  --d-weight-normal: 400; --d-weight-strong: 700;
  --c-ok: #1f6a44; --c-warn: #7a5200; --c-danger: #a33327;
  --shadow-1: 0 1px 2px rgba(16, 19, 23, 0.05), 0 4px 14px rgba(16, 19, 23, 0.08);

  /* the semantic layer — what its src/ consumes */
  --c-brand: var(--d-accent); --c-brand-deep: var(--d-accent-deep);
  --c-ink: var(--d-ink); --c-ink-soft: var(--d-ink-soft);
  --c-bg: var(--d-ground); --c-surface: var(--d-card); --c-line: var(--d-rule);
  --c-focus: var(--d-accent-deep);
  --t-title: var(--d-weight-strong) var(--d-size-title)/1.25 var(--a-sans);
  --t-section: var(--d-weight-strong) var(--d-size-entry)/1.3 var(--a-sans);
  --t-body: var(--d-weight-normal) var(--d-size-body)/1.5 var(--a-sans);
  --t-small: var(--d-weight-normal) var(--d-size-small)/1.45 var(--a-sans);
  --t-time: var(--d-weight-strong) var(--d-size-entry)/1.2 var(--a-sans);
  --s1: 4px; --s2: 10px; --s3: 16px; --s4: 20px; --s5: 28px; --s6: 40px;
  --r1: var(--d-radius); --r-pill: 999px; --tap-min: 44px; --m-fast: 120ms ease;
  --rail: 60px;

  background: var(--c-bg); color: var(--c-ink); font: var(--t-body);
  padding: var(--s4) var(--s4) var(--s6);
  display: flex; flex-direction: column; gap: var(--s4);
}
@media (prefers-reduced-motion: reduce) { .w-ahoy { --m-fast: 0ms; } }
/* THE SHELL IS THE SCROLL CONTAINER, SO NOTHING IN HERE MAY SHRINK.
   Ahoy's own root is a page that scrolls; here it is `#body`, which the shell
   gives a fixed height. A flex column inside a fixed height shrinks its
   children — `flex-shrink` is 1 by default — so every block on every Ahoy
   screen was squashed to a fraction of its content and the content spilled out
   the bottom of its own box. Found on Ustaad's directory at phone width and
   swept as a class: both wings that set `display: flex` on their scope had it.
   Gated in wing-design.js check 10. */
.w-ahoy > * { flex: none; }
.w-ahoy * { box-sizing: border-box; overflow-wrap: anywhere; }
.w-ahoy ul, .w-ahoy ol { list-style: none; margin: 0; padding: 0; }
.w-ahoy button, .w-ahoy input, .w-ahoy select, .w-ahoy textarea { font: var(--t-body); color: var(--c-ink); }

/* ── surfaces: soft grey cards on the white page ── */
.w-ahoy .card { background: var(--c-surface); border-radius: var(--r1);
  padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); border: 0; }
.w-ahoy .card-tap { cursor: pointer; text-align: left; font: var(--t-body); color: var(--c-ink); width: 100%; }
/* THE HERO — the next journey as ONE accent block, blue's first named job;
   everything inside speaks white. The inked surface rides here and on the
   primary action, and nowhere else: "the same blue, the same texture". */
.w-ahoy .card-hero {
  background-color: var(--c-brand);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0) 60%);
  color: var(--d-accent-on);
}
.w-ahoy .card-hero .entry-to, .w-ahoy .card-hero .t-section,
.w-ahoy .card-hero .route-stop, .w-ahoy .card-hero .jc-value { color: var(--d-accent-on); }
.w-ahoy .card-hero .t-small, .w-ahoy .card-hero .status, .w-ahoy .card-hero .jc-label,
.w-ahoy .card-hero .entry-who { color: var(--d-accent-on); opacity: 0.92; }
.w-ahoy .note { background: var(--c-surface); border-left: 3px solid var(--c-ink-soft);
  border-radius: var(--r1); padding: var(--s3) var(--s4); font: var(--t-small); color: var(--c-ink); }

/* ── buttons: ONE blue action per page; everything else is quiet words ── */
.w-ahoy .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--tap-min); min-width: var(--tap-min); padding: 0 var(--s4);
  border-radius: var(--r1); border: 1px solid transparent;
  font: var(--d-weight-strong) var(--d-size-body)/1 var(--a-sans); cursor: pointer;
  background: none; color: var(--c-ink);
  transition: background var(--m-fast), border-color var(--m-fast), color var(--m-fast); }
.w-ahoy .btn-primary { background-color: var(--c-brand);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.34), rgba(255,255,255,0) 60%);
  color: var(--d-accent-on); }
.w-ahoy .btn-quiet { background: none; color: var(--c-brand); border: 0; padding: 0 var(--s1); }
.w-ahoy .btn-danger { background: none; color: var(--c-danger); border: 0; padding: 0 var(--s1); }
/* A momentarily unavailable control keeps its shape and dims its WORDS — no
   pale fill: a disabled action is stated in words or absent. */
.w-ahoy .btn:disabled { cursor: not-allowed; color: var(--c-ink-soft); background: none; border-color: var(--c-line); }
.w-ahoy .btn.busy { opacity: .6; pointer-events: none; }
.w-ahoy .btn-row { display: flex; gap: var(--s2); flex-wrap: wrap; }
.w-ahoy .btn:focus-visible, .w-ahoy .card-tap:focus-visible, .w-ahoy .chip:focus-visible,
.w-ahoy .field-in:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }

/* the contained input chip — an OPTION a thumb can see. Selected = filled ink. */
.w-ahoy .chip { display: inline-flex; align-items: center; justify-content: center; min-height: 40px;
  padding: 0 var(--s3); border: 1.5px solid var(--c-line); border-radius: var(--r-pill);
  background: var(--c-bg); cursor: pointer; white-space: nowrap;
  font: var(--d-weight-strong) var(--d-size-small)/1 var(--a-sans); color: var(--c-ink); }
.w-ahoy .chip-on { background: var(--c-brand); border-color: var(--c-brand); color: var(--d-accent-on); }

/* ── THE JOURNEY OBJECT — pickup joined to destination by the route spine ── */
.w-ahoy .jc { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--r1);
  box-shadow: var(--shadow-1); padding: var(--s2) var(--s4); }
.w-ahoy .jc-row { display: flex; align-items: center; gap: var(--s3); min-height: 52px; }
.w-ahoy .jc-row + .jc-row { border-top: 1px solid var(--c-line); }
.w-ahoy .jc-mark { width: 14px; display: flex; flex-direction: column; align-items: center; align-self: stretch; }
.w-ahoy .jc-dot { width: 10px; height: 10px; border-radius: 50%; border: 2.5px solid var(--c-ink-soft); margin-top: 21px; }
.w-ahoy .jc-pin { width: 10px; height: 10px; border-radius: 50%; background: var(--c-brand); margin-top: 21px; }
.w-ahoy .jc-spine-wrap { position: relative; }
.w-ahoy .jc-spine { position: absolute; left: calc(var(--s4) + 6px); top: 44px; bottom: 44px; width: 0;
  border-left: 2px dotted var(--c-line); }
.w-ahoy .jc-body { flex: 1; min-width: 0; }
.w-ahoy .jc-label { font: var(--d-weight-strong) 12px/1.3 var(--a-sans); letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--c-ink-soft); }
.w-ahoy .jc-value { font: var(--d-weight-strong) var(--d-size-body)/1.4 var(--a-sans); color: var(--c-ink); }

/* the one-row answers: each question is ONE tappable row, never a strip of tiles */
.w-ahoy .fr { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 52px; }
.w-ahoy .fr + .fr, .w-ahoy .jc-row + .fr, .w-ahoy .jc-spine-wrap + .fr { border-top: 1px solid var(--c-line); }
.w-ahoy .fr-label { font: var(--d-weight-normal) var(--d-size-small)/1.4 var(--a-sans); color: var(--c-ink-soft); }
.w-ahoy .fr-val { border: 0; background: none; cursor: pointer; padding: var(--s1) 0; text-align: right;
  min-height: var(--tap-min); font: var(--d-weight-strong) var(--d-size-body)/1.4 var(--a-sans);
  color: var(--c-ink); font-variant-numeric: tabular-nums; }
.w-ahoy .fr-tap { background: none; cursor: pointer; width: 100%; font: inherit; text-align: left;
  border: 0; border-top: 1px solid var(--c-line); }
.w-ahoy .fr-tap:first-child { border-top: 0; }

/* the seats ticker */
.w-ahoy .step { display: inline-flex; align-items: center; border: 1.5px solid var(--c-line); border-radius: var(--r-pill); }
.w-ahoy .step-btn { width: var(--tap-min); min-height: var(--tap-min); border: 0; background: none; cursor: pointer;
  font: var(--d-weight-strong) 20px/1 var(--a-sans); color: var(--c-brand); }
.w-ahoy .step-val { min-width: 28px; text-align: center;
  font: var(--d-weight-strong) var(--d-size-body)/1 var(--a-sans); font-variant-numeric: tabular-nums; }

/* ── the board's own pieces ── */
.w-ahoy .folio { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.w-ahoy .folio-date { font: var(--d-weight-strong) 13px/1.4 var(--a-sans); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--c-ink-soft); white-space: nowrap; }
.w-ahoy .folio-place { font: var(--d-weight-normal) 13px/1.4 var(--a-sans); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--c-ink-soft); }
.w-ahoy .sect { font: var(--d-weight-strong) 13px/1.4 var(--a-sans); letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--c-ink-soft); margin-top: var(--s2); }
/* A BOARD ROW IS AN OPERABLE CARD: white, hairlined, carrying depth — the same
   surface as the journey object, because tapping it is an act. */
.w-ahoy .entry { display: flex; flex-wrap: wrap; align-items: baseline; background: var(--c-bg);
  border: 1px solid var(--c-line); box-shadow: var(--shadow-1);
  border-radius: var(--r1); padding: var(--s3) var(--s4); width: 100%; text-align: left; cursor: pointer; }
.w-ahoy li.entry + li.entry, .w-ahoy .entry + .entry { margin-top: var(--s2); }
/* the live time — blue's third named job, tabular, bold */
.w-ahoy .entry-t { min-width: var(--rail); flex: none; font: var(--t-time); color: var(--c-brand);
  font-variant-numeric: tabular-nums; padding-right: var(--s2); }
.w-ahoy .entry-t.entry-day { font: var(--d-weight-strong) var(--d-size-small)/1.3 var(--a-sans); }
.w-ahoy .entry-day { font: var(--d-weight-strong) var(--d-size-small)/1.3 var(--a-sans);
  font-variant-numeric: tabular-nums; }
.w-ahoy .entry-body { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: var(--s3); text-align: left; background: none; border: 0; padding: 0; }
.w-ahoy .entry-to { font: var(--d-weight-strong) var(--d-size-entry)/1.3 var(--a-sans);
  color: var(--c-ink); letter-spacing: -0.01em; }
.w-ahoy .entry-side { margin-left: auto; font: var(--d-weight-strong) var(--d-size-small)/1.45 var(--a-sans);
  color: var(--c-brand); white-space: nowrap; }
.w-ahoy .entry-who { flex-basis: 100%; font: var(--t-small); color: var(--c-ink-soft); margin-top: 3px; }
/* ANY button placed inside a board entry loses its fill. The rule cannot be
   forgotten because nothing has to remember it. */
.w-ahoy .entry .btn-primary { background: none; color: var(--c-brand); border: 0; padding: 0; }
.w-ahoy .entry-acts { flex-basis: 100%; display: flex; align-items: center; gap: var(--s5); margin-top: var(--s2); }
.w-ahoy .entry-acts .btn { padding: 0; border: 0; font: var(--t-body); }

/* ── status is WORDS. Badges are refused. ── */
.w-ahoy .status { font: var(--t-small); color: var(--c-ink-soft); }
.w-ahoy .status-strong { font: var(--d-weight-strong) var(--d-size-small)/1.5 var(--a-sans); color: var(--c-ink); }
.w-ahoy .status-danger { font: var(--d-weight-strong) var(--d-size-small)/1.5 var(--a-sans); color: var(--c-danger); }
.w-ahoy .again { font: var(--d-weight-strong) var(--d-size-small)/1.4 var(--a-sans); color: var(--c-brand); }
.w-ahoy .voice { font: var(--t-body); color: var(--c-ink-soft); }
.w-ahoy .foot-voice { font: var(--t-small); color: var(--c-ink-soft); text-align: center; margin: 0; }
.w-ahoy .time { font: var(--t-time); color: var(--c-brand); font-variant-numeric: tabular-nums; }
.w-ahoy .t-title { font: var(--t-title); margin: 0; }
.w-ahoy .t-section { font: var(--t-section); margin: 0; }
.w-ahoy .t-small { font: var(--t-small); color: var(--c-ink-soft); }
.w-ahoy .t-fact { font: var(--t-small); color: var(--c-ink-soft); display: flex;
  gap: var(--s2); align-items: baseline; flex-wrap: wrap; }
.w-ahoy .route-stop { color: var(--c-ink);
  font: var(--d-weight-strong) var(--d-size-body)/1.4 var(--a-sans); }

/* ── fields ── */
.w-ahoy .field { display: flex; flex-direction: column; gap: var(--s1); }
.w-ahoy .field-label { font: var(--d-weight-strong) var(--d-size-small)/1.4 var(--a-sans); color: var(--c-ink-soft); }
.w-ahoy .field-help { font: var(--t-small); color: var(--c-ink-soft); }
.w-ahoy .field-in { min-height: var(--tap-min); border: 1px solid var(--c-line); border-radius: var(--r1);
  padding: var(--s2) var(--s3); font: var(--t-body); color: var(--c-ink); background: var(--c-surface); width: 100%; }
.w-ahoy .field-error { font: var(--t-small); color: var(--c-danger); }
.w-ahoy .empty-line { font: var(--t-body); color: var(--c-ink-soft); }

.w-ahoy .note-warn { border-left-color: var(--c-warn); }
.w-ahoy .note-danger { border-left-color: var(--c-danger); }

/* ── layout, Ahoy's own three words ── */
.w-ahoy .stack { display: flex; flex-direction: column; gap: var(--s4); }
.w-ahoy .stack-tight { display: flex; flex-direction: column; gap: var(--s2); }
.w-ahoy .row-between { display: flex; align-items: baseline; gap: var(--s2);
  justify-content: space-between; }