/* 94b: the approved looks change composition. Classic deliberately has no rules here. */
:root[data-look]:not([data-look='classic']) .tl-leave { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-variant-numeric: tabular-nums; }
:root[data-look]:not([data-look='classic']) .tl-leave-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
:root[data-look]:not([data-look='classic']) .tl-leave strong { font: 800 clamp(45px, 14vw, 64px)/1 var(--nl-number); letter-spacing: -.055em; white-space: nowrap; }
:root[data-look]:not([data-look='classic']) .tl-seconds { font: 650 12px/1.2 var(--nl-number); color: var(--muted); white-space: nowrap; }
:root[data-look='classic'] .tl-leave { display: none; }
:root[data-look]:not([data-look='classic']) #h-hero { overflow: hidden; }
:root[data-look]:not([data-look='classic']) #h-hero .h-kick { line-height: 1.35; }
:root[data-look]:not([data-look='classic']) #h-hero .h-actions { min-height: 44px; }

/* Clearway: the leave clock leads a white, list-like card. Supporting facts form quiet rows. */
:root[data-look='clearway'] #home-inner { max-width: 650px; margin-inline: auto; }
:root[data-look='clearway'] #h-hero { display: flex; flex-direction: column; gap: 0; padding: 22px 22px 18px; border-radius: 18px; background: var(--surface); }
:root[data-look='clearway'] #h-hero .tl-leave { order: -2; flex-wrap: wrap; gap: 2px 12px; margin: 12px 0 8px; }
:root[data-look='clearway'] #h-hero .tl-leave-label { width: 100%; }
:root[data-look='clearway'] #h-hero .h-kick { order: -3; }
:root[data-look='clearway'] #h-hero .big { order: -1; font-size: 22px; font-weight: 650; margin: 0 0 22px; color: var(--muted); }
:root[data-look='clearway'] #h-hero .big em { color: var(--text); font-style: normal; }
:root[data-look='clearway'] #h-hero .h-bus { padding: 14px 0; border-block: 1px solid var(--line); }
:root[data-look='clearway'] #h-hero .h-status { margin-top: 14px; }
:root[data-look='clearway'] #h-hero .h-next button { border: 1px solid var(--line); background: transparent; }
:root[data-look='clearway'] .h-near-list, :root[data-look='clearway'] .ns-list { border-radius: 14px; background: var(--surface); overflow: hidden; }
:root[data-look='clearway'] .h-stop { border-bottom: 1px solid var(--line); }
:root[data-look='clearway'] .h-stop:last-child { border: 0; }
:root[data-look='clearway'] .h-stop-head { padding: 14px 16px 12px; }
:root[data-look='clearway'] .nr { min-height: 64px; border-top: 1px solid var(--line); }
:root[data-look='clearway'] .nr-t { font-size: 23px; color: var(--text); }
:root[data-look='clearway'] .nr.is-live .nr-t { color: var(--ok); }
:root[data-look='clearway'] .nav { height: calc(64px + var(--safe-bot)); border-top: 1px solid var(--line); }
:root[data-look='clearway'] .nav button { gap: 3px; }
:root[data-look='clearway'] .nav button[aria-current='page'] { background: var(--accent-soft); border-radius: 12px; margin: 7px 4px; }

/* Night Route: black canvas, amber numbers, almost no chrome, larger touch rows. */
:root[data-look='night-route'] #home-inner { max-width: 650px; margin-inline: auto; }
:root[data-look='night-route'] #h-hero { display: flex; flex-direction: column; background: #000; border: 0; border-radius: 0; padding: 26px 4px 22px; }
:root[data-look='night-route'] #h-hero .h-kick { order: -3; color: var(--muted); }
:root[data-look='night-route'] #h-hero .big { order: -2; font: 600 clamp(43px, 12vw, 56px)/1.05 var(--nl-number); color: var(--accent); margin: 28px 0 6px; }
:root[data-look='night-route'] #h-hero .big em { font-style: normal; }
:root[data-look='night-route'] #h-hero .tl-leave { order: -1; margin-bottom: 24px; }
:root[data-look='night-route'] #h-hero .tl-leave strong { font-size: 28px; color: var(--text); }
:root[data-look='night-route'] #h-hero .h-bus { border-top: 1px solid var(--line); padding: 18px 0 4px; }
:root[data-look='night-route'] #h-hero .h-status { gap: 10px; }
:root[data-look='night-route'] #h-hero .h-strip { margin-top: 20px; }
:root[data-look='night-route'] .h-near-list, :root[data-look='night-route'] .ns-list { background: #000; border: 0; }
:root[data-look='night-route'] .h-stop { border-block: 1px solid var(--line); margin-top: 8px; }
:root[data-look='night-route'] .h-stop-head { padding: 18px 4px 12px; }
:root[data-look='night-route'] .h-stop-routes { display: none; }
:root[data-look='night-route'] .nr { min-height: 74px; padding-inline: 4px; border-top: 1px solid var(--line); }
:root[data-look='night-route'] .nr-t { font: 600 28px/1 var(--nl-number); color: var(--accent); min-width: 90px; }
:root[data-look='night-route'] .nr.is-live .nr-t { color: var(--accent); }
:root[data-look='night-route'] .nav { background: #000; border-top: 1px solid #353535; height: calc(76px + var(--safe-bot)); }
:root[data-look='night-route'] .nav button { color: var(--muted); gap: 5px; }
:root[data-look='night-route'] .nav button[aria-current='page'] { color: var(--accent); border-top: 3px solid var(--accent); }

/* Recess: one warm orange countdown block, playful corner geometry and stacked departures. */
:root[data-look='recess'] #home-inner { max-width: 650px; margin-inline: auto; }
:root[data-look='recess'] #h-hero { display: flex; flex-direction: column; padding: 22px 20px 20px; border: 2px solid #17140F; border-radius: 28px 28px 12px 28px; background: #FF5A1F; color: #17140F; box-shadow: 5px 5px 0 #17140F; }
:root[data-look='recess'][data-theme='dark'] #h-hero { background: #3B251A; color: #F2F2F2; border-color: #FFAB80; box-shadow: 5px 5px 0 #FFAB80; }
:root[data-look='recess'] #h-hero .h-kick { order: -3; color: inherit; }
:root[data-look='recess'] #h-hero .big { order: -2; font: 800 clamp(38px, 11vw, 54px)/1.02 var(--nl-number); margin: 18px 0 4px; color: inherit; }
:root[data-look='recess'] #h-hero .big em { font-style: normal; }
:root[data-look='recess'] #h-hero .tl-leave { order: -1; margin-bottom: 20px; }
:root[data-look='recess'] #h-hero .tl-leave-label, :root[data-look='recess'] #h-hero .tl-seconds { color: inherit; }
:root[data-look='recess'] #h-hero .tl-leave strong { font-size: 27px; }
:root[data-look='recess'] #h-hero .h-bus { border-top: 2px solid currentColor; padding-top: 14px; }
:root[data-look='recess'] #h-hero .h-strip { border-color: currentColor; }
:root[data-look='recess'] #h-hero .h-st, :root[data-look='recess'] #h-hero .h-bus { color: inherit; }
:root[data-look='recess'] .h-near-list, :root[data-look='recess'] .ns-list { border: 0; background: transparent; box-shadow: none; }
:root[data-look='recess'] .h-stop { margin: 0 0 14px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); overflow: hidden; }
:root[data-look='recess'] .h-stop-head { padding: 16px; }
:root[data-look='recess'] .nr { min-height: 76px; margin: 0; padding: 11px 16px; border-top: 1px dashed var(--line); }
:root[data-look='recess'] .nr .grow { align-self: center; }
:root[data-look='recess'] .nr-t { font: 800 26px/1 var(--nl-number); color: var(--accent); }
:root[data-look='recess'] .nav { left: 12px; right: 12px; bottom: calc(8px + var(--safe-bot)); height: 64px; padding-bottom: 0; border: 2px solid var(--text); border-radius: 22px; box-shadow: 4px 4px 0 var(--text); background: var(--surface); }
:root[data-look='recess'] .nav button[aria-current='page'] { background: var(--accent-soft); color: var(--accent); border-radius: 16px; margin: 6px 3px; }

/* The live stop sheet uses the same rows as Today; keep its header and footer in each look. */
:root[data-look='night-route'] .ns-sheet, :root[data-look='night-route'] .ns-foot { background: #000; }
:root[data-look='recess'] .ns-sheet { background: var(--bg); }
:root[data-look='night-route'] .ns-list .nr { border-bottom: 1px solid var(--line); }
:root[data-look='recess'] .ns-list .nr { background: var(--surface); border-radius: 18px; margin-bottom: 10px; }

/* Trip sheet: data, actions, get-off advice and second countdown remain from ride.js. */
:root[data-look='clearway'] .ride-sheet { background: #fff; color: #111114; border-radius: 22px 22px 0 0; }
:root[data-look='clearway'].trip-v3 .ride-sheet { --surface:#fff; --surface-2:#F2F2F7; --text:#111114; --muted:#59595F; --accent:#1F4FE0; --on-accent:#fff; --bg:#fff; background:#fff; background-image:none; color-scheme:light; }
:root[data-look='clearway'].trip-v3 .ride-now .big .tv-num { color:#111114; }
:root[data-look='clearway'].trip-v3 .ride-now .big .tv-num:has(.cd) { color:#1F4FE0; }
:root[data-look='clearway'].trip-v3 .ride-panel .actions, :root[data-look='clearway'].trip-v3 .ride-panel > .tv-sec { background:#fff; }
:root[data-look='clearway'].trip-v3 .ride-now .tv-steps { border-top:1px solid var(--line); padding-top:14px; }
:root[data-look='night-route'] .ride-sheet { background:#000; color:#F2F2F2; border-radius:0; }
:root[data-look='night-route'].trip-v3 .ride-sheet { --surface:#000; --surface-2:#161618; --text:#F2F2F2; --muted:#A4A4A9; --accent:#FFB547; --on-accent:#1A1000; --bg:#000; background:#000; background-image:none; box-shadow:none; }
:root[data-look='night-route'].trip-v3 .ride-now .big .tv-num { font:600 clamp(76px,26vw,110px)/.95 var(--nl-number); color:#FFB547; }
:root[data-look='night-route'].trip-v3 .ride-now .big .tv-tail { color:#F2F2F2; }
:root[data-look='night-route'].trip-v3 .ride-panel .actions, :root[data-look='night-route'].trip-v3 .ride-panel > .tv-sec { background:#000; }
:root[data-look='night-route'].trip-v3 .ride-now .tv-steps { border-top:1px solid #343438; padding-top:16px; }
:root[data-look='night-route'].trip-v3 .ride-panel .actions .btn.primary { background:#FFB547; color:#1A1000; box-shadow:none; }
:root[data-look='recess'] .ride-sheet { background:#FFFDF9; color:#17140F; border-radius:30px 30px 0 0; }
:root[data-look='recess'].trip-v3 .ride-sheet { --surface:#FFFDF9; --surface-2:#F1EBE1; --text:#17140F; --muted:#655D52; --accent:#B9390A; --on-accent:#fff; --bg:#FFFDF9; background:#FFFDF9; background-image:none; color-scheme:light; }
:root[data-look='recess'].trip-v3 .ride-now .phase-row { background:#FF5A1F; color:#17140F; border-radius:18px 18px 6px 18px; padding:10px 14px; }
:root[data-look='recess'].trip-v3 .ride-now .big .tv-num { font-family:var(--nl-number); color:#B9390A; }
:root[data-look='recess'].trip-v3 .ride-panel .actions, :root[data-look='recess'].trip-v3 .ride-panel > .tv-sec { background:#FFFDF9; }
:root[data-look='recess'].trip-v3 .ride-panel .actions .btn.primary { background:#17140F; color:#F7F2EA; border-radius:14px; box-shadow:4px 4px 0 #FF5A1F; }
:root[data-look='recess'].trip-v3 .ride-now .tv-steps { background:#F1EBE1; border-radius:16px; padding:14px; }
:root[data-look='recess'][data-theme='dark'].trip-v3 .ride-sheet { --surface:#1B1B1D; --surface-2:#29292D; --text:#F2F2F2; --muted:#B0B0B6; --accent:#FFAB80; --on-accent:#17140F; --bg:#1B1B1D; background:#1B1B1D; color-scheme:dark; }
:root[data-look='recess'][data-theme='dark'].trip-v3 .ride-panel .actions, :root[data-look='recess'][data-theme='dark'].trip-v3 .ride-panel > .tv-sec { background:#1B1B1D; }

/* Mini previews share the same composition as their full-size look. */
.lk-card[data-look='clearway'] .lk-m-hero { background:#fff; border:1px solid #ddd; }
.lk-card[data-look='clearway'] .lk-m-big { font-size:27px; }
.lk-card[data-look='night-route'] .lk-m-hero { background:#000; border:0; padding-block:15px; }
.lk-card[data-look='night-route'] .lk-m-big { color:#FFB547; font-family:ui-monospace,monospace; font-size:31px; }
.lk-card[data-look='night-route'] .lk-m-route { display:none; }
.lk-card[data-look='recess'] .lk-m-hero { background:#FF5A1F; color:#17140F; border:1px solid #17140F; border-radius:13px 13px 4px 13px; }
.lk-card[data-look='recess'] .lk-m-big { font-family:'Bricolage Grotesque',system-ui; font-size:30px; }
.lk-card[data-look='recess'] .lk-m-row { border-radius:12px; }
.lk-card[data-look='classic'] .lk-m-hero { border-radius:10px; }
@media (max-width:390px) { :root[data-look]:not([data-look='classic']) .tl-leave { flex-wrap:wrap; } :root[data-look='recess'] #h-hero { padding-inline:16px; } }
@media (prefers-reduced-motion:reduce) { :root[data-look]:not([data-look='classic']) #h-hero, :root[data-look]:not([data-look='classic']) .nav { animation:none; transition:none; } }
/* The orange hero keeps every timing and safety line in high-contrast ink. */
:root[data-look='recess'][data-theme='light'] #h-hero :is(.big em, .nl-spare, .nl-spare button, .h-st, .h-st.muted, .h-status, .h-bus, .h-strip, .h-strip b, .h-next .label, .h-onother button, .h-more, .h-st .live) { color:#17140F; }
:root[data-look='recess'][data-theme='light'] #h-hero .h-st.warn, :root[data-look='recess'][data-theme='light'] #h-hero .h-st.bad { background:#17140F; color:#FFFDF9; }
:root[data-look='recess'][data-theme='light'] #h-hero .h-st.warn span, :root[data-look='recess'][data-theme='light'] #h-hero .h-st.bad span { color:#FFFDF9; }
:root[data-look='recess'][data-theme='dark'] #h-hero :is(.big em, .nl-spare, .nl-spare button, .h-st, .h-status, .h-bus, .h-strip, .h-strip b, .h-more) { color:#F2F2F2; }
/* Brief 88's setup step embeds the exact Appearance preview markup via lookPreviewHTML(). */
.setup-v2 .su-look { padding:10px; min-height:230px; overflow:hidden; }
.setup-v2 .su-look .lk-mini { width:100%; height:170px; }
.setup-v2 .su-look .lk-split { width:100%; }
.setup-v2 .su-look .lk-split .lk-mini { height:170px; }
.setup-v2 .su-look strong { display:block; margin:8px 4px 0; color:var(--text); }

/* (180) the switching screen waits with Interchange's arc spinner, in the new look's accent */
.lk-sw-spin { margin-top: 18px; display: grid; place-items: center; opacity: 0; transition: opacity .25s .15s; }
.lk-switch.on .lk-sw-spin { opacity: 1; }
.lk-sw-spin .spinner { width: 34px; height: 34px; }
.lk-sw-spin .spinner circle { stroke: var(--lk-accent); animation: spin-dash 1.4s ease-in-out infinite; }
/* (186) Each look's Home card sets the colour VARIABLES its children read (--text, --muted, --accent, --line, --surface-2) to values
   that hold on THAT card's background, so any line inside it (the future-day timeline, date line, weather credit, late-pattern line,
   (i) button, Walking / Dropped off switch) inherits readable ink, and none is listed one by one. Recess used a fixed near-black ink
   at 74-82% that was fine on the orange card but invisible on the dark-mode brown one. */
:root[data-look='recess'][data-theme='light'] #h-hero { --text:#17140F; --muted:rgba(23,20,15,.86); --accent:#17140F; --line:rgba(23,20,15,.55); --surface-2:rgba(255,253,249,.38); }
:root[data-look='recess'][data-theme='dark'] #h-hero { --text:#F2F2F2; --muted:#E6D2C6; --accent:#FFAB80; --line:rgba(255,171,128,.45); --surface-2:rgba(255,255,255,.14); }
:root[data-look='recess'] #h-hero .h-status, :root[data-look='recess'] #h-hero .h-status * { color: var(--muted); }
/* links and text buttons on the card (Change for today, Take the...) read in the card's ink */
:root[data-look='recess'] #h-hero :is(.link, .h-status a) { color: var(--text); }
/* a warning/bad pill is a dark chip on the orange card: everything in it (its link too) is light ink */
:root[data-look='recess'][data-theme='light'] #h-hero :is(.h-st.warn, .h-st.bad) * { color:#FFFDF9; }
/* the small arrow between steps is part of the timeline, not a faint decoration: full strength in every look */
#h-hero .h-strip .arrow { opacity: 1; }
/* (180) Recess trip: the phase label on the orange band in near-black, readable */
:root[data-look='recess'].trip-v3 .ride-now .phase-row * { color:#17140F; }
/* (180) every look, Classic too: Home card buttons never break their words over two lines (live 178 wrapped "Start trip" and
   "Full plan" once the Full screen pill joined the row at leave time); the row wraps instead */
#h-hero .h-actions { flex-wrap: wrap; row-gap: 8px; }
#h-hero .h-actions > * { white-space: nowrap; }
/* (180) narrow phones: with route tags (BUZ, Express) the stop name no longer squeezes into a one-word column; it drops under them */
#h-hero .h-bus { flex-wrap: wrap; row-gap: 6px; }
#h-hero .h-bus > .grow { min-width: min(100%, 200px); }
/* (u206 harsh review) "Full plan" (33 px tall) reaches 44 px with an invisible hit area that moves nothing. The rest of the small targets
   the audit listed (links, map route chips, the grip, the switches) already carry one (app.css .link::after, .mv-marker::after, .grip::after, .toggle::before). */
.h-more { position: relative; }
.h-more::after { content: ""; position: absolute; inset: -6px -6px; }
/* (u206) the forecast credit prints once: the leave-time line carries it when there is one, so the date line drops its own */
body:has(.h-wx-by) #h-wx-credit { display: none; }