/* Look tokens and picker styles. Theme-specific compositions follow in theme-layouts.css. */
@font-face { font-family: 'Inter Tight'; src: url('../fonts/inter-tight-latin-wght-normal.woff2') format('woff2'); font-style: normal; font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('../fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2'); font-style: normal; font-weight: 200 800; font-display: swap; }
:root { --nl-number: 'Inter Tight', system-ui, sans-serif; --nl-route: #1F4FE0; --nl-map-filter: none; }
/* (176) Classic is 3.9.149 exactly: its tokens, radii and shadows stay app.css's; only the new looks get the shared shape below. */
:root[data-look]:not([data-look='classic']) {
  --nav-h: 68px;
  --nl-number: 'Inter Tight', system-ui, sans-serif;
  --nl-route: #1F4FE0;
  --nl-map-filter: none;
  --r: 16px; --r-sm: 12px;
  --shadow: none;
  --ok: #1F7A3A;
}
:root[data-look='clearway'] {
  --font: system-ui, -apple-system, sans-serif;
  --bg: #F2F2F7; --surface: #FFFFFF; --surface-2: #E9E9EF;
  --text: #111114; --muted: #59595F; --line: rgba(60,60,67,.18);
  --accent: #1F4FE0; --accent-soft: #E7EDFF; --on-accent: #FFFFFF;
  --ok: #1F7A3A; --nl-route: #1F4FE0;
}
:root[data-look='night-route'] {
  --font: system-ui, -apple-system, sans-serif;
  --nl-number: ui-monospace, 'SF Mono', monospace;
  --bg: #000000; --surface: #141416; --surface-2: #242426;
  --text: #F2F2F2; --muted: #A4A4A9; --line: rgba(255,255,255,.17);
  --accent: #FFB547; --accent-soft: #30230F; --on-accent: #1A1000;
  --ok: #30D158; --nl-route: #FFB547;
}
:root[data-look='recess'] {
  --font: system-ui, -apple-system, sans-serif;
  --nl-number: 'Bricolage Grotesque', system-ui, sans-serif;
  --bg: #F7F2EA; --surface: #FFFDF9; --surface-2: #F1EBE1;
  --text: #17140F; --muted: #655D52; --line: rgba(23,20,15,.19);
  --accent: #B9390A; --accent-soft: #FFE0CE; --on-accent: #FFFFFF;
  --ok: #1F7A3A; --nl-route: #FF5A1F;
}
:root[data-look='clearway'][data-theme='dark'],
:root[data-look='recess'][data-theme='dark'] {
  --bg: #101012; --surface: #1B1B1D; --surface-2: #29292D;
  --text: #F2F2F2; --muted: #B0B0B6; --line: rgba(255,255,255,.16);
  --accent: #9DB5FF; --accent-soft: #1E2A4B; --on-accent: #101827;
  --ok: #60DB8A; color-scheme: dark;
}
:root[data-look='recess'][data-theme='dark'] { --accent: #FFAB80; --accent-soft: #3B251A; --on-accent: #17140F; --nl-route: #FF8A55; }
:root[data-look='night-route'] { color-scheme: dark; }
:root[data-look]:not([data-look='classic']) h1 { font-size: clamp(30px, 8vw, 36px); line-height: 1.08; letter-spacing: -.035em; }
:root[data-look]:not([data-look='classic']) :is(.big, .mo-big, .mo-n2, .mins, .dep .mins, .bus-eta, .h-bus b, .updp-ring) { font-family: var(--nl-number); font-variant-numeric: tabular-nums; }
:root[data-look]:not([data-look='classic']) :is(.card, .list, .sheet, .searchbar) { box-shadow: none; }
:root[data-look]:not([data-look='classic']) :is(.card, .list, .searchbar) { border: 1px solid var(--line); }
:root[data-look]:not([data-look='classic']) :is(.sheet, .upds-card) { border-radius: 22px 22px 0 0; }
:root[data-look]:not([data-look='classic']) :is(.btn, .nav button, .h-actions button) { min-height: 44px; }
:root[data-look]:not([data-look='classic']) .screen:not(.full) { padding-inline: 16px; }
:root[data-look]:not([data-look='classic']) .nav { grid-template-columns: repeat(4, 1fr); background: var(--surface); }
:root[data-look]:not([data-look='classic']) .nav button { font-size: 11px; }
:root[data-look]:not([data-look='classic']) .nav .i { width: 22px; height: 22px; }
:root[data-look]:not([data-look='classic']) .nav .ind { display: none; }
:root[data-look]:not([data-look='classic']) .h-top { margin-block: 6px 18px; }
:root[data-look]:not([data-look='classic']) #h-hero { border-radius: 16px; }
:root[data-look='recess'] #h-hero { background: #FF5A1F; color: #17140F; border-color: #17140F; }
:root[data-look='recess'] #h-hero :is(.label, .muted, .h-kick, .h-status) { color: var(--muted); }
:root[data-look='recess'] #h-hero .btn.primary { background: #17140F; color: #F7F2EA; }
:root[data-look]:not([data-look='classic']) .mo { --mo-bgsolid: var(--bg); --mo-fg: var(--text); --mo-dim: var(--muted); --mo-round: var(--surface-2); --mo-ring: var(--line); --mo-bg: var(--bg); --mo-warm: var(--accent-soft); }
:root[data-look='night-route'] .mo { --mo-fg: #F2F2F2; --mo-dim: #A4A4A9; --mo-bg: #000000; --mo-bgsolid: #000000; }
:root[data-look='recess'] .mo { --mo-bg: #F7F2EA; --mo-bgsolid: #F7F2EA; }
:root[data-look]:not([data-look='classic']) .mv { background: var(--bg); }
:root[data-look]:not([data-look='classic']) :is(.mv-line, .mv-seg) { stroke: var(--nl-route); }
:root[data-look]:not([data-look='classic']) .mv-tile { filter: var(--nl-map-filter); }
:root[data-look]:not([data-look='classic']) .updp-ring, :root[data-look]:not([data-look='classic']) .upd-ring { color: var(--accent); }
:root[data-look]:not([data-look='classic']) .upd { background: var(--bg); color: var(--text); }
:root[data-look]:not([data-look='classic']) .upd-meter span { background: var(--accent); }
:root[data-look]:not([data-look='classic']) .style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root[data-look]:not([data-look='classic']) .style-pick { min-height: 44px; }
:root[data-look]:not([data-look='classic']) .style-pick .sp { aspect-ratio: 3/2; }
.nl-spare { display: block; margin-top: 8px; color: var(--muted); font-size: 13px; font-weight: 500; }
.nl-spare button { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  :root[data-look]:not([data-look='classic']) :is(.big, .mo-big, .mv-marker, .mv-line, .upd-card, .upds-card) { animation: none !important; transition: none !important; }
}
/* Visible OTA states on Today and the update screen. */
#h-update:empty { display: none; }
.nl-update-pill { display: inline-flex; align-items: center; min-height: 32px; margin: 0 0 14px; padding: 0 12px; border-radius: 999px; color: var(--text); background: var(--accent-soft); border: 1px solid var(--line); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nl-update-card { margin: 0 0 16px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.nl-update-card b { display: block; font-size: 17px; }
.nl-update-card p { margin: 5px 0 14px; color: var(--muted); font-size: 14px; }
.nl-update-card .row { gap: 8px; }
.nl-update-card .btn { min-height: 44px; }
.nl-update-msg { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 12px 0 0; font-size: 15px; line-height: 1.35; color: var(--text); }
.nl-update-card .nl-update-msg { margin-top: 12px; color: var(--text); }
.nl-update-msg .btn { min-height: 44px; }
.upd-version { color: var(--muted); margin: 0 0 10px; }
.upd-percent { font: 600 13px var(--nl-number); color: var(--muted); text-align: right; margin: 4px 0 0; }
.upd-features { width: min(100%, 360px); margin: 18px auto; touch-action: pan-y; }
.upd-story-bars { display: flex; gap: 5px; margin-bottom: 12px; }
.upd-story-bars i { flex: 1; height: 3px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.upd-story-bars i.seen, .upd-story-bars i.active { background: var(--accent); }
.upd-feature { min-height: 176px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.upd-feature :is(video,img) { display: block; width: 100%; height: 130px; object-fit: cover; margin: -18px -18px 14px; width: calc(100% + 36px); }
.upd-feature h2 { font-size: 21px; margin: 0 0 5px; }
.upd-feature p { margin: 0; color: var(--muted); font-size: 14px; }
.upd-story-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.upd-story-actions button { min-height: 44px; padding: 0 8px; color: var(--accent); font-weight: 600; }
.nl-welcome .upds-card { max-height: min(85vh, 650px); overflow-y: auto; }
.nl-welcome .upds-card > h2 { font-size: 25px; }
.nl-welcome .upds-card > .btn { margin-top: 8px; }
@media (prefers-reduced-motion: reduce) { .upd-feature, .upd-story-bars i { transition: none !important; animation: none !important; } }
.nl-skeleton { position: relative; min-height: 92px; }
.nl-skeleton .spinner { position: absolute; right: 16px; top: 24px; width: 24px; height: 24px; color: var(--accent); }
.h-freshness.refreshing::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--ok); animation: nlLivePulse 1.5s ease-in-out infinite; }
@keyframes nlLivePulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .h-freshness.refreshing::before { animation: none; } }
:root[data-look]:not([data-look='classic']) .ride-sheet .nl-follow { margin: 0 16px 8px; padding-inline: 12px; background: var(--surface-2); }
:root[data-look]:not([data-look='classic']) .ride-map .map-top .fab { width: 44px; height: 44px; }
/* ---- (176) Me → Appearance: look cards with live mini previews ---- */
.lk-head { display: grid; gap: 4px; margin: 4px 2px 12px; }
.lk-head b { font-size: var(--fs-row, 17px); }
.lk-head small { color: var(--muted); font-size: 14px; line-height: 1.35; }
.lk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.lk-card { position: relative; display: grid; gap: 10px; padding: 10px 10px 12px; text-align: left; border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); transition: transform .18s cubic-bezier(.2,.9,.25,1.05), box-shadow .22s ease; -webkit-tap-highlight-color: transparent; }
.lk-card.wide { grid-column: 1 / -1; }
.lk-card:active { transform: scale(.965); }
.lk-card[aria-checked="true"] { box-shadow: inset 0 0 0 2.5px var(--accent), 0 6px 18px color-mix(in srgb, var(--accent) 18%, transparent); }
.lk-name { display: grid; gap: 2px; padding: 0 4px; }
.lk-name b { font-size: 15px; }
.lk-name small { color: var(--muted); font-size: 12px; line-height: 1.3; }
.lk-card[aria-checked="true"] .lk-name b { color: var(--accent); }
.lk-tick { position: absolute; top: 16px; right: 16px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 3px var(--surface); transform: scale(0); opacity: 0; transition: transform .32s cubic-bezier(.3,1.6,.5,1), opacity .15s; }
.lk-tick svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .3s .12s ease-out; }
.lk-card[aria-checked="true"] .lk-tick { transform: scale(1); opacity: 1; }
.lk-card[aria-checked="true"] .lk-tick svg { stroke-dashoffset: 0; }
.lk-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lk-mini { position: relative; display: flex; flex-direction: column; gap: 5px; height: 150px; padding: 9px 8px 0; border-radius: 14px; overflow: hidden; background: var(--lk-bg); color: var(--lk-text); box-shadow: inset 0 0 0 1px rgba(127,127,127,.18); }
.lk-card.wide .lk-mini { height: 128px; }
.lk-mini i { display: block; font-style: normal; }
.lk-m-hero { display: grid; gap: 2px; padding: 7px 8px; border-radius: 10px; background: var(--lk-hero); color: var(--lk-hero-text); }
.lk-m-kick { font-size: 11px; font-weight: 700; opacity: .75; }
.lk-m-big { font: 800 22px/1 var(--nl-number, system-ui); letter-spacing: -.03em; }
.lk-m-big small { font-size: 11px; font-weight: 700; margin-left: 2px; }
.lk-m-btn { height: 9px; width: 55%; border-radius: 6px; background: var(--lk-accent); }
.lk-m-route { position: relative; height: 10px; margin: 2px 4px; }
.lk-m-line { position: absolute; left: 0; right: 0; top: 4px; height: 3px; border-radius: 3px; background: var(--lk-route); opacity: .9; }
.lk-m-bus { position: absolute; top: 1px; left: 6%; width: 9px; height: 9px; border-radius: 50%; background: var(--lk-surface); box-shadow: 0 0 0 2px var(--lk-route); animation: lkBus 3.6s cubic-bezier(.45,0,.55,1) infinite alternate; }
@keyframes lkBus { to { left: 82%; } }
.lk-m-row { display: flex; align-items: center; gap: 5px; padding: 5px 6px; border-radius: 8px; background: var(--lk-surface); }
.lk-m-badge { width: 16px; height: 9px; border-radius: 3px; background: var(--lk-accent); }
.lk-m-txt { flex: 1; height: 5px; border-radius: 3px; background: var(--lk-muted); opacity: .55; }
.lk-m-txt.short { flex: .6; }
.lk-m-t { font: 700 11px/1 var(--nl-number, system-ui); color: var(--lk-text); }
.lk-m-nav { margin-top: auto; display: flex; justify-content: space-around; padding: 5px 0 6px; background: var(--lk-surface); margin-inline: -8px; }
.lk-m-nav i { width: 9px; height: 9px; border-radius: 3px; background: var(--lk-muted); opacity: .5; }
.lk-m-nav i:first-child { background: var(--lk-accent); opacity: 1; }
/* ---- the "Switching to …" screen, in the new look's colours ---- */
.lk-switch { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: var(--lk-bg); color: var(--lk-text); clip-path: circle(0 at var(--lk-x) var(--lk-y)); transition: clip-path .52s cubic-bezier(.65,0,.25,1); pointer-events: all; }
.lk-switch.on { clip-path: circle(var(--lk-r) at var(--lk-x) var(--lk-y)); }
.lk-switch.out { opacity: 0; transform: scale(1.04); transition: opacity .42s ease, transform .46s cubic-bezier(.2,.8,.2,1); }
.lk-sw-in { display: grid; justify-items: center; gap: 6px; padding: 24px; text-align: center; opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .3s .22s ease, transform .45s .22s cubic-bezier(.2,.9,.25,1.05); }
.lk-switch.on .lk-sw-in { opacity: 1; transform: none; }
.lk-switch.out .lk-sw-in { transform: translateY(-6px); transition: transform .4s ease; }
.lk-logo { width: 76px; height: 76px; margin-bottom: 14px; border-radius: 19px; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.lk-switch.on .lk-logo { animation: lkPop .7s .25s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes lkPop { from { transform: scale(.7) rotate(-8deg); } }
.lk-sw-kick { margin: 0; color: var(--lk-muted); font-size: 15px; font-weight: 600; }
.lk-sw-name { margin: 0; font-size: 30px; letter-spacing: -.03em; font-weight: 800; }
.lk-sw-bar { width: 140px; height: 4px; margin-top: 18px; border-radius: 4px; background: color-mix(in srgb, var(--lk-muted) 30%, transparent); overflow: hidden; }
.lk-sw-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--lk-accent); }
.lk-switch.on .lk-sw-bar i { animation: lkFill 1.1s .2s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes lkFill { to { width: 100%; } }
.lk-switch.calm { clip-path: none; opacity: 0; transition: opacity .18s ease; }
.lk-switch.calm.on { opacity: 1; }
.lk-switch.calm.out { opacity: 0; transform: none; transition: opacity .22s ease; }
.lk-switch.calm .lk-sw-in { opacity: 1; transform: none; transition: none; }
.lk-switch.calm .lk-logo { animation: none; }
.lk-switch.calm .lk-sw-bar i { animation: none; width: 100%; }
/* while the app re-colours under the cover, nothing animates its colours (no half-way flashes) */
html.lk-recolour *, html.lk-recolour *::before, html.lk-recolour *::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .lk-m-bus { animation: none; left: 45%; } .lk-card, .lk-tick, .lk-tick svg { transition: none; } }
.upd-slow { margin: 0 0 8px; color: var(--muted); font-size: 14px; }
/* (176) trip moments in the new looks: the giant number, kicker and buttons take the look's accent (trip v3's coral is for its dark
   ink and is too faint on a light look's background) */
:root[data-look='clearway'] .mo { --nl-mo: #1F4FE0; --accent: #1F4FE0; --on-accent: #FFFFFF; }
:root[data-look='clearway'][data-theme='dark'] .mo { --nl-mo: #9DB5FF; --accent: #9DB5FF; --on-accent: #101827; }
:root[data-look='night-route'] .mo { --nl-mo: #FFB547; --accent: #FFB547; --on-accent: #1A1000; }
:root[data-look='recess'] .mo { --nl-mo: #B9390A; --accent: #B9390A; --on-accent: #FFFFFF; }
:root[data-look='recess'][data-theme='dark'] .mo { --nl-mo: #FFAB80; --accent: #FFAB80; --on-accent: #17140F; }
:root[data-look]:not([data-look='classic']) .mo :is(.mo-big, .mo-kicker, .mo-count b) { color: var(--nl-mo); }
:root[data-look]:not([data-look='classic']) .mo .mo-lookup.warm .mo-big, :root[data-look]:not([data-look='classic']) .mo-lookup.warm .mo-big { color: var(--mo-fg); }