/* UI revamp phase 2 (UI-PHASE2.md, 8 Oct): ranks 1, 2, 5 and 6 of UI-REVAMP.md.
   Loaded after every other sheet except lite.css. The tokens themselves live in app.css :root; this file holds the few
   rules that need more than a token: one card, one primary button, links that don't compete, the calm safety shield,
   and the get-off moment. */

/* ---- 1. Tokens pass: one card style (surface, 24 radius, 16 padding), pill buttons, 44 px targets ---- */
.card { padding: var(--card-pad); border-radius: var(--r-card); }
.btn { border-radius: var(--r-pill); }
.btn.sm { border-radius: var(--r-pill); }
.fab { border-radius: var(--r-pill); }

/* ---- 2. One primary: the accent pill, 52 px, the same in light and dark. Sign-in (.si-page .si-go) keeps its ink button. ---- */
.btn.primary:not(.sm), .lp-actions .btn.primary, .ride-panel .actions .btn.primary, .wz .btn.primary.wz-main {
  min-height: var(--btn-h); padding: 0 var(--sp-6); border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent); font-size: var(--fs-row); font-weight: 700;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 22%, transparent);
}
.btn.primary.sm { background: var(--accent); color: var(--on-accent); }
.btn.primary:disabled, .wz-foot .wz-main:disabled { opacity: .45; box-shadow: none; }
:root[data-theme="dark"] .btn.primary { box-shadow: 0 6px 18px rgba(0, 0, 0, .45); }
/* the arc spinner inside a primary follows the label colour */
.btn.primary .spinner { color: var(--on-accent); }

/* Accent text links are retired: a link is a quiet text button in text-2, so the one primary wins the screen.
   Links inside running text keep a hairline underline so they still read as tappable. */
.link { color: var(--text-2); font-weight: 700; }
.link:not(.block) .i { color: var(--text-3); }
p .link, .sub .link, .muted .link, .alight-link { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.alight-link { color: inherit; }

/* ---- 5. Calm safety control: Get home safe and Alert contacts are one shield capsule in the trip header.
   Neutral like the other map buttons; red (--sos) only while Get home safe is armed or Help is on. ---- */
.map-top > .sg-trip { pointer-events: auto; gap: 0; align-items: center; height: 50px; padding: 0; border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow); }
.sg-trip .sg-pill, .sg-trip .sg-helptap { display: grid; place-items: center; width: 50px; min-width: 0; height: 50px; padding: 0; border: 0; border-radius: var(--r-pill); background: transparent; box-shadow: none; color: var(--muted); font-size: 0; }
.sg-trip .sg-pill .i, .sg-trip .sg-helptap .i { width: 22px; height: 22px; color: inherit; }
.sg-trip .sg-pill + .sg-helptap { position: relative; }
.sg-trip .sg-pill + .sg-helptap::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--line); }
.sg-trip .sg-pill.on, .sg-trip .sg-helptap.live { background: var(--sos); color: #fff; box-shadow: none; }
.sg-trip .sg-pill.on + .sg-helptap::before, .sg-trip .sg-helptap.live::before { display: none; }
.sg-trip .sg-helptap.live { box-shadow: 0 0 0 3px color-mix(in srgb, var(--sos) 35%, transparent); }

/* ---- 6. The get-off moment: the trip sheet turns into a full-bleed accent sheet, pulses once (600 ms) as it starts,
   then holds still. ride.js marks it with .big.getoff ("Get ready"); the buzz comes from the get-off alert (notifyNow /
   the lock-screen trip). Replaces the 1.4 s infinite colour pulse. ---- */
:root { --go-bg: #C0352A; --go-fg: #FFFFFF; }
:root[data-theme="dark"] { --go-bg: #FF7A66; --go-fg: #2B0D05; }
.ride-sheet:has(.ride-now .big.getoff) {
  --surface: var(--go-bg); --surface-2: color-mix(in srgb, var(--go-fg) 16%, var(--go-bg)); --surface-3: color-mix(in srgb, var(--go-fg) 24%, var(--go-bg));
  --text: var(--go-fg); --muted: color-mix(in srgb, var(--go-fg) 84%, var(--go-bg)); --text-2: var(--muted); --text-3: var(--muted);
  --accent: var(--go-fg); --on-accent: var(--go-bg); --accent-soft: color-mix(in srgb, var(--go-fg) 16%, var(--go-bg));
  --ok: var(--go-fg); --warn: var(--go-fg); --bad: var(--go-fg); --line: color-mix(in srgb, var(--go-fg) 28%, transparent);
  background: var(--go-bg); color: var(--go-fg); box-shadow: 0 -10px 40px color-mix(in srgb, var(--go-bg) 45%, transparent);
  animation: go-pulse .6s cubic-bezier(.2, 0, 0, 1) 1;
}
.ride-sheet:has(.ride-now .big.getoff) .grip-bar { background: color-mix(in srgb, var(--go-fg) 45%, transparent); }
.ride-now .big.getoff { color: var(--go-fg); font-size: clamp(40px, 12vw, 52px); line-height: 1.02; letter-spacing: -.035em; animation: go-big .6s cubic-bezier(.2, 0, 0, 1) 1; transform-origin: left center; }
.ride-sheet:has(.ride-now .big.getoff) .phase { color: var(--go-fg); }
@keyframes go-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--go-bg) 70%, transparent); } 45% { box-shadow: 0 -18px 0 10px color-mix(in srgb, var(--go-bg) 30%, transparent); } 100% { box-shadow: 0 -10px 40px color-mix(in srgb, var(--go-bg) 45%, transparent); } }
@keyframes go-big { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }
/* the Big view's get-off glow breathes once, not forever */
.mo-getoff[data-s="one"] .mo-glow { animation: mo-breathe .6s cubic-bezier(.2, 0, 0, 1) 1; }
@media (prefers-reduced-motion: reduce) { .ride-sheet:has(.ride-now .big.getoff), .ride-now .big.getoff { animation: none; } }
html.lite .ride-sheet:has(.ride-now .big.getoff), html.lite .ride-now .big.getoff { animation: none !important; }
/* Home's "Full plan ›" is a quiet text button too */
.h-more { color: var(--text-2); }