/* Option Travel passenger app: Metro-line wayfinding in the Option Travel identity.
   White sign panels with black type and the logo's red rule, Option red as the line, station dots,
   the van riding the line. Logical properties throughout so Arabic (dir=rtl) mirrors without overrides. */

/* ---------- tokens ---------- */

:root {
  --red: #d71921;            /* the logo red */
  --red-deep: #b3131a;       /* red text on light grounds */
  --red-tint: #fbe8e9;
  --red-press: #b3131a;      /* button hover / pressed, white text stays 4.5:1+ */
  --sign: #ffffff;           /* sign panel */
  --sign-raised: #f1f1f2;    /* chips and buttons on a sign */
  --sign-edge: #dcdde0;
  --on-sign: #111214;        /* the logo black */
  --on-sign-2: #5c5d63;
  --select: #111214;         /* selected chips, ink buttons, avatars */
  --on-select: #ffffff;
  --select-hover: #2b2c30;
  --terminal: #111214;       /* the site's square on every line */
  --ground: #eeeeef;
  --surface: #ffffff;
  --surface-2: #f5f5f6;
  --text: #111214;
  --text-2: #4a4b50;
  --text-3: #636469;
  --rule: #dcdde0;
  --rule-strong: #c3c5ca;
  --line-passed: #b1b2b7;
  --notice: #f2c230;         /* notices only */
  --notice-ink: #3a2c00;
  --notice-tint: #fdf3d3;
  --ok: #17784b;
  --call: #17784b;   /* Call keeps this deep green at night too: the white icon needs it */
  --ok-tint: #e3f3ea;
  --focus: #111214;
  --plate-band: #c8cacf;     /* neutral: the band colour would claim a vehicle class */

  --font: "Cairo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --radius-sign: 16px;
  --radius-ctl: 12px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgb(17 18 20 / 0.06), 0 6px 16px rgb(17 18 20 / 0.06);
  --shadow-2: 0 10px 30px rgb(17 18 20 / 0.16), 0 2px 6px rgb(17 18 20 / 0.08);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --tabbar-h: 66px;
  --strip-h: 60px;
  --col: 520px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --red: #e3262e;
    --red-deep: #ff6b70;
    --red-tint: #3a1417;
    --red-press: #b8151c;
    --sign: #1a1a1d;
    --sign-raised: #27282c;
    --sign-edge: #333439;
    --on-sign: #f2f2f3;
    --on-sign-2: #b4b5ba;
    --select: #f2f2f3;
    --on-select: #111214;
    --select-hover: #d6d7da;
    --terminal: #f2f2f3;
    --ground: #0b0b0c;
    --surface: #141416;
    --surface-2: #1b1b1e;
    --text: #f2f2f3;
    --text-2: #b4b5ba;
    --text-3: #9a9ba1;
    --rule: #2a2b2f;
    --rule-strong: #3a3b40;
    --line-passed: #55565b;
    --notice-ink: #fff3c4;
    --notice-tint: #33290a;
    --ok: #4cc58b;
    --ok-tint: #0f2a1e;
    --focus: #f2f2f3;
    --plate-band: #a3a5ab;
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 16px rgb(0 0 0 / 0.3);
    --shadow-2: 0 12px 32px rgb(0 0 0 / 0.5);
    color-scheme: dark;
  }
}

/* ---------- base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  background: var(--ground);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 400;
  color: var(--text);
  background: var(--ground);
  caret-color: var(--red);
  accent-color: var(--red);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* Arabic reads with more leading, set once on the body so components that set their own line-height
   (the countdown numerals, boards, stop names) keep it in both languages. */
html:lang(ar) body { line-height: 1.65; }
:lang(ar) { letter-spacing: 0 !important; }

::selection { background: var(--red); color: #fff; }

* { scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
}

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
/* Fieldsets default to min-width: min-content, which let the day strip widen the whole page. */
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; min-inline-size: 0; }
legend { padding: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
time, .num { font-variant-numeric: tabular-nums lining-nums; }
/* Times and counts take their direction from their own text, so "7:16 AM" never reorders inside Arabic. */
time, small, .num, .stop-time, .board-time, .brow-time { unicode-bidi: plaintext; }

/* Data (names, addresses, routes) and the other-language echo keep their own direction but line up
   with the interface's edge. */
html[dir="ltr"] [dir="auto"], html[dir="ltr"] .echo, html[dir="ltr"] .welcome-echo { text-align: left; }
html[dir="rtl"] [dir="auto"], html[dir="rtl"] .echo, html[dir="rtl"] .welcome-echo { text-align: right; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute; inset-inline-start: 12px; top: 12px; z-index: 50;
  padding: 10px 14px; border-radius: var(--radius-ctl);
  background: var(--surface); color: var(--text);
  transform: translateY(-200%);
}
.skip:focus { transform: none; box-shadow: var(--shadow-2); }

.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .icon.flip { transform: scaleX(-1); }

/* ---------- app shell ---------- */

.app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.app.has-tabbar { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }

.strip {
  position: sticky; top: 0; z-index: 20;
  background: var(--sign);
  color: var(--on-sign);
  padding-top: env(safe-area-inset-top);
  box-shadow: 0 3px 0 var(--red);   /* the red rule under OPTION in the logo */
}
.strip-in {
  max-width: var(--col); margin: 0 auto;
  min-height: var(--strip-h);
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
}
.strip-logo { height: 30px; width: auto; }
.strip-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.strip-title .primary { font-size: 1.1875rem; font-weight: 800; }
.strip-title .echo { font-size: 0.8125rem; font-weight: 600; color: var(--on-sign-2); }
.strip-spacer { flex: 1; }

.strip-btn {
  display: inline-grid; place-items: center;
  min-width: 44px; height: 44px; padding: 0 12px;
  border: 0; border-radius: var(--radius-pill);
  background: var(--sign-raised); color: var(--on-sign);
  font-weight: 700; font-size: 0.9375rem; text-decoration: none;
  transition: background-color 160ms var(--ease-out);
}
.strip-btn:hover { background: var(--sign-edge); }
.strip-btn:active { transform: translateY(1px); }
.strip-btn .icon { width: 22px; height: 22px; }
.strip-btn.lang { font-size: 0.875rem; padding: 0 14px; }
.strip-site {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  font-size: 0.8125rem; font-weight: 700; color: var(--on-sign-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.strip-site .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex: none; }

.page {
  width: 100%; max-width: var(--col); margin: 0 auto;
  padding: 18px 16px 28px;
  display: flex; flex-direction: column; gap: 22px;
  flex: 1;
}

.section { display: flex; flex-direction: column; gap: 12px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 6px; }
.section-head h2 { font-size: 1.1875rem; font-weight: 800; }
.section-head .meta { font-size: 0.875rem; color: var(--text-3); font-weight: 600; }
/* A link in a section head keeps the row height but gets a 44px target. */
.section-head a.meta { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; padding-inline: 8px; margin-inline-end: -8px; }

.greeting { font-size: 1.25rem; font-weight: 800; line-height: 1.3; }
.greeting .name { color: var(--text-2); font-weight: 700; }

/* ---------- tab bar ---------- */

.tabbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 30;
  background: var(--surface);
  border-top: 1px solid var(--rule);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar ul {
  max-width: var(--col); margin: 0 auto;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: var(--tabbar-h);
}
.tabbar a {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: 100%;
  color: var(--text-3); text-decoration: none;
  font-size: 0.75rem; font-weight: 700;
  transition: color 160ms var(--ease-out);
}
.tabbar a .icon { width: 24px; height: 24px; }
.tabbar a:hover { color: var(--text); }
.tabbar a[aria-current="page"] { color: var(--text); }
.tabbar a[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; inset-inline: 28%;
  height: 3px; border-radius: 0 0 3px 3px; background: var(--red);
}
.tabbar a[aria-current="page"] .icon { color: var(--red); }

/* ---------- sign panel ---------- */

.sign {
  position: relative;
  background: var(--sign);
  color: var(--on-sign);
  border-radius: var(--radius-sign);
  box-shadow: inset 0 0 0 1px var(--sign-edge), var(--shadow-1);
  overflow: hidden;
}
.sign-row { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 3px solid var(--red); }
.sign-line { display: block; font-size: 0.8125rem; font-weight: 700; color: var(--on-sign-2); margin-top: 2px; overflow-wrap: anywhere; }
.sign-name { font-weight: 800; font-size: 1.125rem; line-height: 1.2; min-width: 0; }
.sign-name .echo { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--on-sign-2); }
.sign-name .echo-inline { font-size: 0.875rem; font-weight: 600; color: var(--on-sign-2); margin-inline-start: 6px; }
.sign .push { margin-inline-start: auto; }

/* Line bullet: the direction of travel in a roundel, like a metro line number. */
.bullet {
  display: inline-grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--red); color: #fff;
  box-shadow: 0 0 0 2px var(--surface);
}
.sign .bullet { box-shadow: 0 0 0 2px var(--sign); }
.bullet .icon { width: 19px; height: 19px; stroke-width: 2.2; }
.bullet.is-muted { background: var(--sign-raised); color: var(--on-sign); }

/* Status chips */
.status {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 12px;
  border-radius: var(--radius-pill);
  font-size: 0.8125rem; font-weight: 800; white-space: nowrap;
  background: var(--surface-2); color: var(--text-2);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.status .pip { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.status.is-live { background: var(--red); color: #fff; box-shadow: none; }
.status.is-live .pip { background: #fff; animation: pip 1.6s var(--ease-out) infinite; }
.status.is-done { background: var(--ok-tint); color: var(--ok); box-shadow: none; }
.status.is-void { background: var(--red-tint); color: var(--red-deep); box-shadow: none; }
.sign .status { background: var(--sign-raised); color: var(--on-sign); box-shadow: none; }
.sign .status.is-live { background: var(--red); color: #fff; }
@keyframes pip {
  0% { box-shadow: 0 0 0 0 rgb(255 255 255 / 0.7); }
  70% { box-shadow: 0 0 0 7px rgb(255 255 255 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(255 255 255 / 0); }
}

/* ---------- the countdown sign ---------- */

.eta {
  display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 4px 14px;
  padding: 6px 16px 18px;
}
.eta-figure {
  display: flex; align-items: baseline; gap: 6px;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 0.82;
}
.eta-figure .n {
  font-size: 5rem; letter-spacing: -0.03em;
  font-weight: var(--eta-weight, 800);
  transition: font-weight 900ms var(--ease-out);
}
.eta-figure .u { font-size: 1.25rem; font-weight: 800; color: var(--on-sign-2); }
.eta-figure.is-clock .n { font-size: 3.5rem; }
.eta:has(.eta-figure.is-word) { grid-template-columns: 1fr; }
.eta-figure.is-word .n { font-size: 2.75rem; letter-spacing: -0.01em; }
.eta-what { padding-bottom: 6px; min-width: 0; }
.eta-what .place { display: block; font-size: 1.125rem; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.eta-what .when { display: block; font-size: 0.875rem; font-weight: 600; color: var(--on-sign-2); margin-top: 2px; }

/* One reversed field per screen: the live countdown prints white on Option red. */
.sign.is-live .eta { background: var(--red); }
.sign.is-live .eta { color: #fff; }
.sign.is-live .eta .u,
.sign.is-live .eta .when { color: #fff; }

/* ---------- the line ---------- */

.line {
  --dot: 16px;
  --gutter: 44px;
  position: relative;
  padding: 6px 0;
}
.line::before {
  content: ""; position: absolute;
  inset-inline-start: calc(var(--gutter) / 2 - 3px);
  top: var(--track-top, 26px); bottom: var(--track-bottom, 26px); width: 6px; border-radius: 6px;
  background: var(--red);
}
.line .passed-track {
  position: absolute;
  inset-inline-start: calc(var(--gutter) / 2 - 3px);
  top: 18px; width: 6px; border-radius: 6px;
  height: var(--passed, 0px);
  background: var(--line-passed);
  transform-origin: top; transform: scaleY(var(--passed-frac, 0));
  transition: transform 1200ms var(--ease-out);
}
.stop {
  position: relative;
  display: grid; grid-template-columns: var(--gutter) 1fr auto; align-items: center;
  min-height: 64px; gap: 0 10px;
}
.stop-dot {
  position: relative; z-index: 1; justify-self: center;
  width: var(--dot); height: var(--dot); border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--red);
}
.stop-name { font-size: 0.9375rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; padding: 8px 0; }
.stop-time { font-size: 0.875rem; font-weight: 700; color: var(--text-3); white-space: nowrap; }
.stop.is-passed .stop-dot { box-shadow: 0 0 0 4px var(--line-passed); }
.stop.is-passed .stop-name, .stop.is-passed .stop-time { color: var(--text-3); }
.stop.is-you .stop-dot {
  width: 24px; height: 24px;
  box-shadow: 0 0 0 4px var(--red), 0 0 0 8px var(--red-tint);
}
.stop.is-you .stop-dot::after {
  content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--red);
}
.stop.is-you .stop-name { font-weight: 800; font-size: 1rem; }
.stop.is-you .stop-time { color: var(--text); font-weight: 800; }
.stop .you-tag {
  display: inline-block; margin-inline-start: 8px; padding: 0 8px; border-radius: var(--radius-pill);
  background: var(--red); color: #fff; font-size: 0.75rem; font-weight: 800; vertical-align: 2px;
}
.stop.is-terminal .stop-dot {
  width: 22px; height: 22px; border-radius: 5px;
  background: var(--terminal); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--terminal);
}
.stop.has-van .stop-dot { visibility: hidden; }
.stop.is-terminal .stop-name { font-weight: 800; }
/* While a van is on the line, the stretch into the stop the passenger is waiting for is drawn longer,
   so the van glides toward it clear of both stations. */
.line { --approach: 64px; }
.line.has-van .stop.is-approach { margin-top: var(--approach); }
.line.is-compact { --approach: 48px; }
.line.is-compact .stop { min-height: 46px; }
.line.is-compact .stop-name { padding: 5px 0; font-size: 0.875rem; }

/* The van rides the line as a capsule. JS sets --van-y: on a station, gliding between two where the
   stretch leaves room, otherwise waiting at the nearer one. */
.van {
  --van-w: 24px; --van-h: 30px;
  position: absolute; z-index: 2;
  inset-inline-start: calc(var(--gutter) / 2 - var(--van-w) / 2);
  top: 0;
  transform: translateY(calc(var(--van-y, 0px) - var(--van-h) / 2));
  width: var(--van-w); height: var(--van-h); border-radius: 999px;
  display: grid; place-items: center;
  background: var(--red); color: #fff;
  box-shadow: 0 0 0 3px var(--surface), 0 4px 10px rgb(17 18 20 / 0.28);
  transition: transform 1400ms linear;
}
.van .icon { width: 16px; height: 16px; stroke-width: 2.2; }
.line.is-compact .van { --van-w: 18px; --van-h: 26px; }
.line.is-compact .van .icon { width: 12px; height: 12px; }
.van[hidden] { display: none; }

/* ---------- vehicle: plate + driver ---------- */

.vehicle { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-top: 1px solid var(--rule); }

.plate {
  display: inline-flex; flex-direction: column; flex: none;
  min-width: 132px;
  border-radius: 9px; overflow: hidden;
  background: #fff; color: #111214;
  box-shadow: inset 0 0 0 2px #111214, 0 1px 2px rgb(0 0 0 / 0.2);
  font-family: var(--font);
}
.plate-band {
  /* A plate is a physical object: EGYPT stays left and مصر right in either interface language. */
  direction: ltr;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1px 9px 0; height: 17px;
  background: var(--plate-band); color: #111214;
  font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.06em;
  border-bottom: 2px solid #111214;
}
.plate-band [lang="ar"] { letter-spacing: 0; }
.plate-body {
  display: grid; grid-template-columns: 1fr 2px 1fr; align-items: center;
  height: 38px; direction: rtl;
}
.plate-body .sep { width: 2px; height: 100%; background: #111214; }
.plate-body span { text-align: center; font-weight: 800; font-size: 1.25rem; line-height: 1; padding: 0 6px; white-space: nowrap; }
.plate.is-raw .plate-body { grid-template-columns: 1fr; }
.plate.is-small { min-width: 104px; }
.plate.is-small .plate-band { height: 14px; font-size: 0.5625rem; }
.plate.is-small .plate-body { height: 30px; }
.plate.is-small .plate-body span { font-size: 1rem; }

.driver { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.avatar {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: var(--select); color: var(--on-select);
  font-weight: 800; font-size: 1.0625rem;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--rule);
}
.avatar { position: relative; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.driver-name { font-weight: 800; font-size: 1rem; line-height: 1.25; overflow-wrap: anywhere; }
.driver-role { font-size: 0.8125rem; font-weight: 600; color: var(--text-3); }

/* ---------- surfaces ---------- */

.panel {
  background: var(--surface);
  border-radius: var(--radius-sign);
  box-shadow: inset 0 0 0 1px var(--rule), var(--shadow-1);
  overflow: hidden;
}
.panel-pad { padding: 16px; }
.panel .rule { height: 1px; background: var(--rule); margin: 0; border: 0; }

.trip { display: flex; flex-direction: column; gap: 0; }
.trip .sign { border-end-start-radius: 0; border-end-end-radius: 0; box-shadow: inset 0 0 0 1px var(--sign-edge); }
.trip .panel { border-start-start-radius: 0; border-start-end-radius: 0; }
.trip-line { padding: 10px 16px 6px 6px; }
[dir="rtl"] .trip-line { padding: 10px 6px 6px 16px; }
/* On Today the plate and driver come straight under the countdown, so they stay in the first viewport
   however long the trip's line is. */
.trip .panel > .vehicle:first-child { border-top: 0; border-bottom: 1px solid var(--rule); }
.trip-note {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 16px; font-size: 0.875rem; font-weight: 600; color: var(--text-2);
  background: var(--surface-2); border-top: 1px solid var(--rule);
}
.trip-note .icon { color: var(--text-3); margin-top: 2px; }
.trip-actions { display: flex; gap: 10px; padding: 14px 16px 16px; border-top: 1px solid var(--rule); }

.trip.is-dimmed { opacity: 0.86; }
.trip.is-dimmed .sign { background: var(--sign-raised); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 0 20px;
  border: 0; border-radius: var(--radius-ctl);
  background: var(--red); color: #fff;
  font-weight: 800; font-size: 1.0625rem; line-height: 1.2; text-decoration: none; text-align: center;
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.12), 0 4px 12px rgb(17 18 20 / 0.16);
  transition: background-color 160ms var(--ease-out), transform 120ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.btn:hover { background: var(--red-press); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgb(0 0 0 / 0.12); }
.btn .icon { width: 22px; height: 22px; stroke-width: 2.1; }
.btn.is-block { width: 100%; }
.btn.is-quiet {
  background: var(--surface); color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--rule-strong);
}
.btn.is-quiet:hover { background: var(--surface-2); }
.btn.is-ink { background: var(--select); color: var(--on-select); box-shadow: 0 1px 0 rgb(0 0 0 / 0.12), 0 4px 12px rgb(17 18 20 / 0.18); }
.btn.is-ink:hover { background: var(--select-hover); }
.btn.is-danger { background: var(--surface); color: var(--red-deep); box-shadow: inset 0 0 0 1.5px var(--red); }
.btn.is-danger:hover { background: var(--red-tint); }
.btn.is-compact { min-height: 44px; padding: 0 16px; font-size: 0.9375rem; }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--surface-2); color: var(--text-3); box-shadow: inset 0 0 0 1.5px var(--rule); cursor: not-allowed; transform: none;
}
.btn.is-busy { pointer-events: none; }
.btn.is-busy .icon { display: none; }
.btn.is-busy::after {
  content: ""; width: 18px; height: 18px; flex: none;
  border: 2.5px solid currentColor; border-inline-end-color: transparent; border-radius: 50%;
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.call-btn {
  flex: none; display: inline-grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--call); color: #fff; text-decoration: none;
  box-shadow: 0 4px 12px rgb(17 18 20 / 0.2);
  transition: transform 120ms var(--ease-out), filter 160ms var(--ease-out);
}
.call-btn:hover { filter: brightness(1.08); }
.call-btn:active { transform: translateY(1px); }
.call-btn .icon { width: 24px; height: 24px; stroke-width: 2.1; }

/* ---------- forms ---------- */

.form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label, .field .label { font-weight: 800; font-size: 0.9375rem; }
.field .hint { font-size: 0.8125rem; color: var(--text-3); font-weight: 600; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input {
  width: 100%; min-height: 54px; padding: 0 16px;
  border: 1.5px solid var(--rule-strong); border-radius: var(--radius-ctl);
  background: var(--surface); color: var(--text);
  font-size: 1.0625rem; font-weight: 600;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.input::placeholder { color: var(--text-3); font-weight: 500; }
.input:hover { border-color: var(--text-3); }
.input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 1.5px var(--focus); }
.input[aria-invalid="true"] { border-color: var(--red); }
.input-wrap .input { padding-inline-end: 84px; }
.reveal {
  position: absolute; inset-inline-end: 6px;
  height: 44px; padding: 0 12px; border: 0; border-radius: 9px;
  background: var(--surface-2); color: var(--text-2);
  font-weight: 800; font-size: 0.8125rem;
}
.reveal:hover { color: var(--text); }

/* The site at sign-in: one plain list, "Company · Site", in the phone's own picker. It replaced the
   site tiles (2026-10-14): passengers found the tiles confusing. */
.select-wrap { position: relative; display: flex; align-items: center; }
.select-wrap .select-chev { position: absolute; inset-inline-end: 14px; width: 22px; height: 22px; color: var(--text-2); pointer-events: none; }
.select {
  -webkit-appearance: none; appearance: none;
  height: 54px; padding-inline: 16px 48px;
  cursor: pointer; text-overflow: ellipsis; white-space: nowrap;
}
.select:invalid { color: var(--text-3); font-weight: 500; }
.select option { color: var(--text); background: var(--surface); font-weight: 600; }
.select option:disabled { color: var(--text-3); }

/* ---------- banners ---------- */

.banner {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 13px 14px; border-radius: var(--radius-ctl);
  font-weight: 700; font-size: 0.9375rem; line-height: 1.45;
}
.banner .icon { margin-top: 1px; }
.banner.is-ok { background: var(--ok-tint); color: var(--ok); }
.banner.is-error { background: var(--red-tint); color: var(--red-deep); }
.banner.is-notice { background: var(--notice-tint); color: var(--notice-ink); box-shadow: inset 0 0 0 1.5px var(--notice); }
.banner p { color: inherit; }
.banner .close { margin-inline-start: auto; border: 0; background: none; color: inherit; padding: 0 2px; opacity: 0.8; }

.offline {
  position: fixed; inset-inline: 12px; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 10px); z-index: 40;
  max-width: var(--col); margin: 0 auto;
}

/* ---------- empty states ---------- */

.empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 22px 18px;
}
.empty .end-line { display: flex; align-items: center; gap: 0; margin-bottom: 4px; }
.empty .end-line i { display: block; width: 52px; height: 6px; background: var(--rule-strong); border-radius: 6px; }
.empty .end-line b { display: block; width: 18px; height: 18px; border-radius: 5px; background: var(--terminal); margin-inline-start: -2px; }
.empty .end-line .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 4px var(--rule-strong); margin-inline-end: -2px; }
.empty h2 { font-size: 1.25rem; font-weight: 800; }
.empty p { color: var(--text-2); font-weight: 600; }

/* ---------- booking ---------- */

.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); padding: 4px 0 2px; }
.steps::before {
  content: ""; position: absolute; top: 13px; inset-inline: 12.5%; height: 4px; border-radius: 4px; background: var(--rule-strong);
}
.steps .done-track {
  position: absolute; top: 13px; inset-inline-start: 12.5%; height: 4px; border-radius: 4px; background: var(--red);
  width: calc(var(--done, 0) * 25%);
}
.steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 800; color: var(--text-3); text-align: center; }
.steps li a { color: inherit; text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; min-height: 44px; }
.steps .s-dot { position: relative; z-index: 1; width: 20px; height: 20px; margin-top: 5px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 4px var(--rule-strong); }
.steps li.is-done { color: var(--text-2); }
.steps li.is-done .s-dot { background: var(--red); box-shadow: 0 0 0 4px var(--red); }
.steps li.is-current { color: var(--text); }
.steps li.is-current .s-dot { box-shadow: 0 0 0 4px var(--red), 0 0 0 9px var(--red-tint); }

.choice-recap { display: flex; flex-wrap: wrap; gap: 8px; }
.recap {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px;
  border-radius: var(--radius-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule);
  font-size: 0.875rem; font-weight: 700; color: var(--text-2); text-decoration: none;
}
.recap .icon { width: 16px; height: 16px; color: var(--red); }

.days { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; margin: 0 -2px; scroll-snap-type: x mandatory; }
.day { position: relative; flex: none; scroll-snap-align: start; }
.day input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.day label {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  width: 74px; min-height: 92px; border-radius: 14px;
  background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--rule-strong);
  cursor: pointer; transition: box-shadow 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.day .wd { font-size: 0.8125rem; font-weight: 800; color: var(--text-3); }
.day .dn { font-size: 1.75rem; font-weight: 800; line-height: 1.05; }
.day .mo { font-size: 0.75rem; font-weight: 700; color: var(--text-3); }
.day .marks { display: flex; gap: 4px; height: 6px; margin-top: 4px; }
.day .marks i { width: 6px; height: 6px; border-radius: 50%; background: var(--terminal); }
.day .marks i.dep { background: var(--red); }
.day input:checked + label { background: var(--select); box-shadow: 0 6px 14px rgb(17 18 20 / 0.2); }
.day input:checked + label .wd, .day input:checked + label .mo { color: var(--on-select); opacity: 0.78; }
.day input:checked + label .dn { color: var(--on-select); }
.day input:checked + label .marks i { background: var(--on-select); }
.day input:checked + label .marks i.dep { background: var(--red); }
.day input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
/* A day with no shift left to book (the site's shifts don't run then) stays on the strip, greyed out. */
.day input:disabled { cursor: not-allowed; }
.day input:disabled + label { opacity: 0.42; cursor: not-allowed; box-shadow: inset 0 0 0 1.5px var(--rule); }

.directions { display: grid; gap: 10px; }
.direction { position: relative; }
.direction input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.direction label {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  min-height: 78px; padding: 12px 16px;
  border-radius: var(--radius-sign); background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--rule-strong);
  cursor: pointer; transition: box-shadow 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.direction .d-name { font-size: 1.125rem; font-weight: 800; display: block; line-height: 1.25; }
.direction .d-hint { font-size: 0.875rem; font-weight: 600; color: var(--text-3); }
.direction .mini-line { display: flex; align-items: center; width: 74px; }
.direction .mini-line i { flex: 1; height: 4px; background: var(--red); }
.direction .mini-line b { width: 12px; height: 12px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 3px var(--red); flex: none; }
.direction .mini-line s { width: 13px; height: 13px; border-radius: 3px; background: var(--terminal); flex: none; }
.direction input:checked + label { box-shadow: inset 0 0 0 2.5px var(--red); background: var(--red-tint); }
.direction input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.direction input:disabled + label { cursor: not-allowed; opacity: 0.62; }
.direction .taken { font-size: 0.75rem; font-weight: 800; color: var(--red-deep); }
.direction .closed { font-size: 0.75rem; font-weight: 800; color: var(--text-2); }

.board { display: flex; flex-direction: column; }
.board-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  min-height: 66px; padding: 8px 16px;
  color: var(--text); text-decoration: none;
  border-top: 1px solid var(--rule);
  transition: background-color 140ms var(--ease-out);
}
.board-row:first-child { border-top: 0; }
.board-row:hover { background: var(--surface-2); }
.board-row:active { background: var(--red-tint); }
.board-time { display: flex; align-items: baseline; gap: 5px; min-width: 104px; }
.board-time .n { font-size: 1.75rem; font-weight: 800; line-height: 1; letter-spacing: -0.01em; }
.board-time .m { font-size: 0.875rem; font-weight: 800; color: var(--text-3); }
.board-what { font-size: 0.9375rem; font-weight: 700; color: var(--text-2); min-width: 0; overflow-wrap: anywhere; }
.board-what.is-note { font-size: 0.8125rem; font-weight: 700; color: var(--text-3); }
.board-go { color: var(--red); }
.board-go .icon { width: 22px; height: 22px; }

.route-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; min-height: 70px; padding: 10px 16px; border-top: 1px solid var(--rule); color: inherit; text-decoration: none; }
.route-row:first-child { border-top: 0; }
.route-row:hover { background: var(--surface-2); }
.route-name { font-weight: 800; font-size: 1.0625rem; line-height: 1.3; overflow-wrap: anywhere; }
.route-meta { font-size: 0.8125rem; font-weight: 700; color: var(--text-3); }
.route-roundel {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); box-shadow: inset 0 0 0 5px var(--red);
  font-weight: 900; font-size: 0.875rem; color: var(--text);
}

.search { position: relative; }
.search .icon { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.search .input { padding-inline-start: 44px; }

/* Picking your station on the route line */
.pick-line .stop { cursor: pointer; border-radius: 12px; grid-template-rows: minmax(64px, auto); padding-inline-end: 12px; }
.pick-line .stop input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pick-line .stop label { display: contents; cursor: pointer; }
.pick-line .stop:has(> input:hover) .stop-name { text-decoration: underline; text-decoration-thickness: 1px; }
.pick-line .stop:has(input:checked) .stop-dot { width: 24px; height: 24px; box-shadow: 0 0 0 4px var(--red), 0 0 0 9px var(--red-tint); }
.pick-line .stop:has(input:checked) .stop-dot::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--red); }
.pick-line .stop:has(input:checked) .stop-name { font-weight: 800; color: var(--text); }
.pick-line .stop:has(input:focus-visible) .stop-name { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.pick-line .stop.is-hidden { display: none; }

/* A point's time in brackets after its name (here, on Today and in Bookings) stays in one piece. */
.point-at { white-space: nowrap; }

/* Where a point is: its Map button opens the street map in place under the row, the line running on
   beside it, so the passenger can check the spot before choosing it. */
.stop-map {
  position: relative; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 44px; padding-inline: 10px 13px;
  border: 0; border-radius: var(--radius-pill);
  background: var(--surface); color: var(--text-2);
  box-shadow: inset 0 0 0 1.5px var(--rule-strong);
  font-size: 0.8125rem; font-weight: 800; text-decoration: none; white-space: nowrap;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.stop-map .icon { width: 18px; height: 18px; color: var(--red); }
.stop-map:hover { background: var(--surface-2); color: var(--text); }
.stop-map:active { transform: translateY(1px); }
.stop-map[aria-expanded="true"] { background: var(--select); color: var(--on-select); box-shadow: none; }
.stop-map[aria-expanded="true"] .icon { color: currentColor; }

.stop-extra {
  grid-column: 2 / -1; grid-row: 2;
  position: relative; z-index: 3; cursor: auto;
  display: flex; flex-direction: column; gap: 10px;
  padding-bottom: 16px;
}
.point-map-frame {
  position: relative; isolation: isolate; overflow: hidden;
  height: clamp(200px, 58vw, 280px);
  border-radius: var(--radius-ctl);
  background: var(--surface-2);
}
.point-map { position: absolute; inset: 0; z-index: 0; }
/* The keyline sits over the tiles, so the map keeps its edge on either ground. */
.point-map-frame::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--rule-strong); pointer-events: none;
}
.point-map-note { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; padding: 12px; }
.point-map-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.point-map-actions .btn { flex: 1 1 auto; }
/* A tapped marker's name, in Google's white bubble whatever the scheme. */
.point-map-label { max-width: 220px; font-family: var(--font); font-size: 0.9375rem; font-weight: 600; line-height: 1.35; color: #111214; }

.confirm-bar {
  position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 10px); z-index: 15;
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 14px 14px; border-radius: var(--radius-sign);
  background: var(--sign); color: var(--on-sign);
  box-shadow: inset 0 4px 0 var(--red), inset 0 0 0 1px var(--sign-edge), var(--shadow-2);
  transform: translateY(0); opacity: 1;
  transition: transform 260ms var(--ease-out), opacity 200ms var(--ease-out);
}
.confirm-bar.is-waiting { transform: translateY(8px); opacity: 0; pointer-events: none; }
.confirm-bar .c-line { font-size: 1rem; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.confirm-bar .c-note { font-size: 0.8125rem; font-weight: 600; color: var(--on-sign-2); }
.confirm-bar .c-detail { display: flex; align-items: flex-start; gap: 8px; font-size: 0.9375rem; font-weight: 700; color: var(--on-sign-2); line-height: 1.4; }
.confirm-bar .c-detail .icon { margin-top: 2px; color: var(--on-sign-2); }
.confirm-bar .c-detail span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.confirm-bar .c-detail.is-strong { color: var(--on-sign); font-weight: 800; font-size: 1.0625rem; }
.confirm-bar .c-detail.is-strong .icon { color: var(--red); }

/* ---------- bookings & history lists ---------- */

/* Bookings as one board per section: date, time and direction, the point, a fixed status slot. */
.brows { display: flex; flex-direction: column; }
.brow {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 2px 12px; align-items: start;
  padding: 14px 16px; border-top: 1px solid var(--rule);
}
.brow:first-child { border-top: 0; }
.brow-date { grid-row: 1 / span 3; display: flex; flex-direction: column; align-items: center; line-height: 1.05; padding-top: 2px; }
.brow-date .wd { font-size: 0.75rem; font-weight: 800; color: var(--text-3); }
.brow-date .dn { font-size: 1.75rem; font-weight: 800; }
.brow-date .mo { font-size: 0.75rem; font-weight: 700; color: var(--text-3); }
.brow-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.brow-time { font-size: 1.375rem; font-weight: 800; line-height: 1.1; }
.brow-time small { font-size: 0.8125rem; color: var(--text-3); font-weight: 800; margin-inline-start: 3px; }
.brow-dir { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 0.875rem; color: var(--text-2); }
.brow-dir .bullet { width: 24px; height: 24px; box-shadow: none; }
.brow-dir .bullet .icon { width: 14px; height: 14px; }
.brow-status { grid-column: 3; grid-row: 1; justify-self: end; }
.brow-where { grid-column: 2 / 4; font-size: 0.9375rem; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.brow-where .via { display: block; font-size: 0.8125rem; color: var(--text-3); font-weight: 700; }
/* An upcoming booking's actions under a dashed rule: Cancel (confirmed in place) and the point on
   Google Maps at the far end. While the cancel question is open it has the row to itself. */
.brow-actions {
  grid-column: 2 / 4;
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0 12px;
  border-top: 1px dashed var(--rule-strong); padding-top: 8px;
}
.brow-actions .confirm-inline { border-top: 0; padding-top: 0; }
.brow-actions .confirm-inline[open] { flex-basis: 100%; }
.brow-actions:has(.confirm-inline[open]) .brow-map { display: none; }
.brow-map {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--text); font-weight: 800; font-size: 0.9375rem; text-decoration: none;
}
.brow-map .icon { color: var(--red); }
.brow-map:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.brow.is-closed .brow-date .dn,
.brow.is-closed .brow-time,
.brow.is-closed .brow-where { color: var(--text-3); }
.brow.is-closed .bullet { background: var(--sign-raised); color: var(--text-3); }

/* Today: Track live stays within thumb reach while the trip card is on screen. */
/* Track live stays in thumb reach above the tab bar, on a band of ground colour that runs down to the
   tab bar so the trip never shows through beneath the button. */
.trip-cta {
  position: sticky; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); z-index: 6;
  margin-top: 2px; padding: 10px 0;
  background: linear-gradient(to bottom, transparent, var(--ground) 10px);
}
.trip-cta .btn { box-shadow: var(--shadow-2); }
.confirm-inline { border-top: 1px dashed var(--rule-strong); padding-top: 8px; }
.confirm-inline summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  color: var(--red-deep); font-weight: 800; font-size: 0.9375rem; min-height: 44px; padding: 0;
}
.confirm-inline summary::-webkit-details-marker { display: none; }
.confirm-inline summary.row { display: flex; width: 100%; min-height: 60px; padding: 8px 16px; gap: 12px; font-size: 1rem; }
.confirm-inline summary.row .icon { color: currentColor; }
.confirm-inline[open] summary { color: var(--text-2); }
.confirm-inline .confirm-box { display: flex; flex-direction: column; gap: 10px; padding: 6px 0 4px; }
.confirm-inline .confirm-box p { font-weight: 800; }
.confirm-inline .confirm-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.trip-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--rule); }
.trip-row:first-child { border-top: 0; }
.trip-row .tr-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.trip-row .tr-time { font-weight: 800; font-size: 1rem; }
.mini-route { display: grid; grid-template-columns: 14px 1fr; gap: 2px 10px; align-items: center; }
.mini-route .md { width: 10px; height: 10px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 3px var(--red); justify-self: center; }
.mini-route .md.sq { border-radius: 3px; background: var(--terminal); box-shadow: none; width: 11px; height: 11px; }
.mini-route .mv { width: 3px; height: 12px; background: var(--red); justify-self: center; border-radius: 3px; }
.mini-route .mt { font-size: 0.875rem; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.mini-route .mt small { color: var(--text-3); font-weight: 700; margin-inline-start: 6px; }
.trip-row .tr-driver { font-size: 0.8125rem; color: var(--text-3); font-weight: 700; margin-top: 8px; }
/* Status and plate share one slot at the row's end, so the status sits in the same place on every row. */
.trip-row .tr-side { align-self: start; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.day-head { font-size: 0.875rem; font-weight: 800; color: var(--text-3); padding: 2px 4px; }

/* ---------- account ---------- */

.profile { display: flex; align-items: center; gap: 14px; padding: 18px 16px; }
.profile .avatar { width: 58px; height: 58px; font-size: 1.25rem; background: var(--red); color: #fff; box-shadow: 0 0 0 3px var(--sign), 0 0 0 5px var(--sign-edge); }
.profile-name { font-size: 1.25rem; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.profile-meta { font-size: 0.875rem; font-weight: 600; color: var(--on-sign-2); }
.rows { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 16px;
  border-top: 1px solid var(--rule); color: var(--text); text-decoration: none; background: none; border-inline: 0; border-bottom: 0; width: 100%; text-align: start;
}
.row:first-child { border-top: 0; }
.row:hover { background: var(--surface-2); }
.row .r-label { flex: 1; font-weight: 800; }
.row .r-value { font-weight: 700; color: var(--text-3); font-size: 0.9375rem; }
.row .icon { color: var(--text-3); }
.row .chev { width: 20px; height: 20px; }
.lang-switch { display: inline-flex; padding: 3px; border-radius: var(--radius-pill); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--rule); }
.lang-switch a { min-width: 64px; height: 44px; display: grid; place-items: center; border-radius: var(--radius-pill); font-weight: 800; font-size: 0.875rem; color: var(--text-2); text-decoration: none; padding: 0 12px; }
.lang-switch a[aria-current="true"] { background: var(--select); color: var(--on-select); }

/* ---------- welcome & sign-in ---------- */

.welcome { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; background: var(--ground); }
.poster {
  position: relative; max-width: var(--col); width: 100%; margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 14px) 16px 0;
}
.poster-frame {
  position: relative; overflow: hidden;
  border-radius: 22px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--rule), var(--shadow-1);
  aspect-ratio: 1 / 1;
}
.poster-frame img { width: 100%; height: 100%; object-fit: cover; }
.poster-lang { position: absolute; top: calc(env(safe-area-inset-top) + 26px); inset-inline-end: 28px; z-index: 2; }
.poster-lang .strip-btn { background: var(--select); color: var(--on-select); box-shadow: var(--shadow-1); }
.welcome-sign { max-width: var(--col); width: 100%; margin: -36px auto 0; padding: 0 28px; position: relative; z-index: 2; }
.welcome-sign .sign { padding: 22px 18px 18px; display: flex; flex-direction: column; gap: 14px; box-shadow: inset 0 4px 0 var(--red), inset 0 0 0 1px var(--sign-edge), var(--shadow-2); }
.welcome-title { font-size: 1.75rem; font-weight: 900; line-height: 1.15; letter-spacing: -0.01em; }
.welcome-echo { font-size: 1rem; font-weight: 700; color: var(--on-sign-2); }
.welcome-body { font-size: 1rem; font-weight: 600; color: var(--on-sign-2); line-height: 1.5; }
.welcome-actions { max-width: var(--col); width: 100%; margin: 0 auto; padding: 20px 28px calc(env(safe-area-inset-bottom) + 28px); display: flex; flex-direction: column; gap: 12px; }

.signin-head { display: flex; flex-direction: column; gap: 6px; }
.signin-head p { color: var(--text-2); font-weight: 600; }
.signin-logo { height: 34px; width: auto; margin-bottom: 10px; align-self: flex-start; }
.help { font-size: 0.875rem; color: var(--text-3); font-weight: 600; text-align: center; }

/* ---------- live map ---------- */

.map-page { position: relative; height: 100vh; height: 100dvh; overflow: hidden; background: var(--ground); }
#map { position: absolute; inset: 0; background: var(--surface-2); }
.map-fallback {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-start;
  padding: calc(env(safe-area-inset-top) + 84px) 16px 0; overflow-y: auto;
}
.map-top {
  position: absolute; z-index: 5; inset-inline: 0; top: 0;
  padding: calc(env(safe-area-inset-top) + 12px) 12px 0;
  display: flex; align-items: center; gap: 8px; pointer-events: none;
}
.map-top > * { pointer-events: auto; }
.map-chip {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 14px 6px 8px;
  border-radius: var(--radius-pill); background: var(--sign); color: var(--on-sign);
  box-shadow: var(--shadow-2); font-weight: 800; font-size: 0.9375rem; min-width: 0;
}
.map-chip .bullet { width: 32px; height: 32px; }
.map-chip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.round-btn {
  display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none;
  border-radius: 50%; border: 0;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-2); text-decoration: none;
}
.round-btn .icon { width: 22px; height: 22px; }
.map-top .grow { flex: 1; }

.map-sheet {
  position: absolute; z-index: 6; inset-inline: 0; bottom: 0;
  max-width: var(--col); margin: 0 auto;
  padding: 0 10px calc(env(safe-area-inset-bottom) + 10px);
}
.map-sheet .sheet {
  border-radius: 22px; overflow: hidden;
  background: var(--surface); box-shadow: var(--shadow-2), inset 0 0 0 1px var(--rule);
  max-height: 72vh; max-height: 72dvh; overflow-y: auto; overscroll-behavior: contain;
}
.map-sheet .sign { border-radius: 0; box-shadow: none; }
.sheet-flag { padding: 12px 16px 0; }
.sign.is-live .sheet-flag { background: var(--red); }
.sheet-live { display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 800; color: var(--on-sign-2); }
.sign.is-live .sheet-live { color: #fff; }
.vehicle.is-tight { gap: 10px; }
.vehicle.is-tight .avatar { display: none; }
.vehicle.is-tight .driver-name { font-size: 0.9375rem; }
.map-page.is-fallback { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; }
.map-page.is-fallback .map-fallback { position: static; padding-bottom: 12px; }
.map-page.is-fallback .map-sheet { position: static; padding-top: 0; }
.map-page.is-fallback .stops-toggle { display: none; }
.sheet-live .pip { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sign.is-live .sheet-live:not(.is-stale) .pip { animation: pip 1.6s var(--ease-out) infinite; }
.sheet-live.is-stale .pip { background: var(--notice); box-shadow: 0 0 0 3px rgb(242 194 48 / 0.25); }
.sheet-actions { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 12px 16px 16px; border-top: 1px solid var(--rule); }
.stops-toggle { border-top: 1px solid var(--rule); }
.stops-toggle summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  min-height: 52px; padding: 0 16px; font-weight: 800;
}
.stops-toggle summary::-webkit-details-marker { display: none; }
.stops-toggle summary .icon { transition: transform 200ms var(--ease-out); }
.stops-toggle[open] summary .icon { transform: rotate(180deg); }
.stops-toggle .trip-line { padding-top: 0; }

/* ---------- desktop ---------- */

@media (min-width: 720px) {
  .page { padding-top: 26px; }
  .tabbar { inset-inline: 0; }
  .welcome .poster-frame { aspect-ratio: 4 / 3; }
}

/* ---------- motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}