/* Solovo Route — design tokens (brand guide v2.0 «Apple-first», 29.10.2026) on the
   2.25 iOS system look (Apple HIG, iOS 26/27):
   SF Pro via -apple-system, Dynamic Type sizes in rem (1rem = Body 17 pt,
   follows the iPhone text size), system label/fill/separator colours, the
   interface follows the iPhone appearance; only the map style follows the
   time of day. Brand: Route Blue #2F7DF6 (actions, route, selection), Solovo
   Blue #3491F6, accessible text blue #1456A1, Coral #FF7566 (destination only,
   never instead of alarm red), Ink #1F2430, Light #F3F6FB. Legacy names stay so
   every component follows: --cyan* = blue accent, --navy-* = ink. */
:root {
  --nf-brand-ink: #1F2430;
  --nf-brand-blue: #3491F6;
  --nf-brand-coral: #FF7566;
  --coral: #FF7566;
  --navy-950: #15233D;          /* maneuver card, toasts: dark navy, as in the guide's driving screen */
  --navy-900: #1B2B48;
  --navy-800: #263A5C;
  --cyan: #2F7DF6;
  --cyan-600: #1456A1;
  --cyan-50: rgba(47, 125, 246, .12);
  --on-accent: #FFFFFF;
  --violet: #2F7DF6;
  --orange: #FF9F4D;            /* Sunset: important points, community */
  --orange-50: rgba(255, 159, 77, .16);
  --on-community: #1F2430;
  --red: #FF3B30;
  --red-50: rgba(255, 59, 48, .12);
  --green: #248A3D;
  --green-50: rgba(52, 199, 89, .15);
  --amber: #C93400;
  --info: #007AFF;
  --accent-fill: #2F7DF6;        /* filled accent buttons (white text) */

  /* iOS system colours (light) */
  --canvas: #F3F6FB;            /* Solovo Light */
  --surface: #FFFFFF;           /* secondarySystemGroupedBackground */
  --surface-2: rgba(118, 118, 128, .12);  /* tertiarySystemFill */
  --surface-3: rgba(118, 118, 128, .24);  /* secondarySystemFill */
  --ink: #1F2430;               /* Solovo Ink */
  --muted: rgba(31, 36, 48, .62); /* secondary text, ≥4.5:1 on white */
  --muted-2: rgba(31, 36, 48, .3);
  --line: rgba(60, 60, 67, .29);  /* separator */
  --scrim: rgba(0, 0, 0, .2);
  --glass: rgba(255, 255, 255, .72);
  --glass-strong: rgba(255, 255, 255, .86);
  --glass-edge: rgba(255, 255, 255, .6);
  --glass-blur: blur(24px) saturate(180%);

  --r-btn: 14px;
  --r-card: 20px;
  --r-sheet: 34px;              /* concentric with the iPhone screen corners at an 8 pt inset */
  --r-banner: 26px;
  --touch: 44px;

  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --gut: 12px;
  --inset: 8px;                 /* floating sheet inset from the screen edges */

  --shadow-1: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 16px rgba(0, 0, 0, .08);
  --shadow-2: 0 8px 32px rgba(0, 0, 0, .14);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* Dynamic Type (rem of Body 17) */
  --fs-large: 2rem;      /* Large Title 34 */
  --fs-title1: 1.647rem; /* Title 1 28 */
  --fs-title2: 1.294rem; /* Title 2 22 */
  --fs-title3: 1.176rem; /* Title 3 20 */
  --fs-body: 1rem;       /* Body / Headline 17 */
  --fs-callout: .941rem; /* Callout 16 */
  --fs-sub: .882rem;     /* Subheadline 15 */
  --fs-foot: .765rem;    /* Footnote 13 */
  --fs-cap: .706rem;     /* Caption 1 12 */
  --fs-cap2: .647rem;    /* Caption 2 11 */
  color-scheme: light;
}
:root[data-theme="dark"] {
  --cyan: #6EB4FF;
  --cyan-600: #7DBBFF;
  --cyan-50: rgba(47, 125, 246, .24);
  --on-accent: #FFFFFF;
  --red: #FF453A;
  --red-50: rgba(255, 69, 58, .2);
  --green: #30D158;
  --green-50: rgba(48, 209, 88, .2);
  --amber: #FF9F0A;
  --info: #0A84FF;
  --accent-fill: #2F7DF6;
  --orange-50: rgba(255, 159, 77, .22);
  --canvas: #0B1220;            /* restrained dark blue (brand dark) */
  --surface: #16203A;
  --surface-2: rgba(118, 118, 128, .24);
  --surface-3: rgba(118, 118, 128, .36);
  --ink: #FFFFFF;
  --muted: rgba(235, 235, 245, .6);
  --muted-2: rgba(235, 235, 245, .3);
  --line: rgba(84, 84, 88, .65);
  --scrim: rgba(0, 0, 0, .45);
  --glass: rgba(22, 32, 58, .72);
  --glass-strong: rgba(22, 32, 58, .88);
  --glass-edge: rgba(255, 255, 255, .12);
  --shadow-1: 0 1px 3px rgba(0, 0, 0, .4), 0 6px 16px rgba(0, 0, 0, .3);
  --shadow-2: 0 10px 36px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
/* «Reduce Transparency» (iOS accessibility): solid surfaces instead of glass. */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: #FFFFFF; --glass-strong: #FFFFFF; --glass-blur: none; }
  :root[data-theme="dark"] { --glass: #16203A; --glass-strong: #16203A; }
}
:root.no-glass { --glass: var(--surface); --glass-strong: var(--surface); --glass-blur: none; }
/* Body 17 pt by default; on iOS the system text size (Dynamic Type) sets it. */
html { font-size: var(--fs-body); }
@supports (font: -apple-system-body) { html { font: -apple-system-body; } }

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  position: fixed; inset: 0; overflow: hidden;
  font-family: var(--font); font-size: var(--fs-body); line-height: 1.29; letter-spacing: -.01em; color: var(--ink);
  background: var(--canvas); -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; touch-action: manipulation; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
.ic { display: block; flex: none; }
.noscript { padding: 24px; }

#map { position: fixed; inset: 0; z-index: 0; }
/* Mapbox logo and (i) sit at the very bottom of the screen, under the sheet (user request 30.10). */
.mapboxgl-ctrl-bottom-left { bottom: calc(var(--sab) + 4px); left: calc(var(--sal) + 4px); z-index: 0; }
.mapboxgl-ctrl-attrib.mapboxgl-compact { margin: 0 0 4px 4px; }
.mapboxgl-ctrl-logo { margin: 0 0 4px 4px !important; }

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn {
  min-height: 52px; padding: 0 20px; border-radius: var(--r-btn);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: var(--fs-sub); transition: transform .12s, background .2s, opacity .2s;
}
.btn:active { transform: scale(.98); }
.btn.sm { min-height: 40px; padding: 0 14px; font-size: var(--fs-sub); border-radius: 12px; }
.btn.primary { background: var(--accent-fill); color: #fff; box-shadow: 0 6px 16px rgba(47, 125, 246, .28); min-height: 56px; }
.btn.primary:disabled { opacity: .45; box-shadow: none; }
.btn.soft { background: var(--surface-2); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--muted); min-height: 44px; }
.btn.danger { background: var(--red); color: #fff; }
.btn.block { width: 100%; }
.btn.grow { flex: 1; }
.link { color: var(--cyan-600); font-weight: 700; padding: 8px; min-height: var(--touch); }
:root[data-theme="dark"] .link { color: var(--cyan); }
.icon-btn {
  width: var(--touch); height: var(--touch); border-radius: 14px; display: grid; place-items: center; color: var(--ink); flex: none;
}
.icon-btn.soft { background: var(--surface-2); }
.icon-btn.xs { width: 32px; height: 32px; color: var(--muted); }
.fab {
  width: 52px; height: 52px; border-radius: 18px; display: grid; place-items: center;
  background: var(--glass); color: var(--ink); box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.fab.sm { width: 44px; height: 44px; border-radius: 15px; }
.fab.orange { background: var(--orange); color: #fff; }
.fab[aria-pressed="true"] { color: var(--cyan-600); }
:root[data-theme="dark"] .fab[aria-pressed="true"] { color: var(--cyan); }
.fab:active, .icon-btn:active { transform: scale(.95); }

/* ── Sheets (HIG iOS 26: floating Liquid Glass panel, detents, grabber) ── */
.sheet {
  position: fixed; z-index: 20; left: calc(var(--sal) + var(--inset)); right: calc(var(--sar) + var(--inset)); bottom: var(--inset);
  background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-radius: var(--r-sheet); box-shadow: var(--shadow-2), inset 0 0 0 .5px var(--glass-edge);
  padding: 5px 16px max(calc(var(--sab) - var(--inset) + 4px), 16px);
  max-height: min(78vh, calc(100dvh - var(--sat) - 10px)); overflow-y: auto; overscroll-behavior: contain;
  /* overflow-y:auto makes x scrollable too: a sideways swipe slid the whole sheet content (31.10). */
  overflow-x: hidden;
  transition: max-height .34s cubic-bezier(.2, .9, .25, 1);
}
.sheet[data-detent="small"] { max-height: var(--peek, 120px); overflow: hidden; }
.sheet[data-detent="medium"] { max-height: min(52vh, calc(100dvh - var(--sat) - 10px)); }
.sheet[data-detent="large"] { height: calc(100dvh - var(--sat) - 10px - var(--inset)); max-height: none; }
.sheet.is-dragging { overflow: hidden; user-select: none; }
@media (min-width: 720px) {
  .sheet { left: calc(var(--sal) + 16px); right: auto; width: 400px; bottom: 16px; }
}
.grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--muted-2); margin: 0 auto 8px; touch-action: none; cursor: grab; position: relative; }
.grabber::after { content: ''; position: absolute; inset: -12px -40px; } /* bigger hit area */
.sheet-top { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; }
.sheet-head { display: flex; align-items: flex-start; gap: 12px; padding: 4px 0 6px; }
.sheet-head h2 { font-size: var(--fs-title2); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.sec-title { font-size: var(--fs-title3); font-weight: 700; letter-spacing: -.01em; color: var(--ink); margin: 18px 2px 8px; }
.sec-row { display: flex; align-items: baseline; justify-content: space-between; margin: 18px 2px 8px; gap: 8px; }
.sec-row[hidden] { display: none; }
.sec-row .sec-title { margin: 0; }
.sec-link { font-size: var(--fs-body); font-weight: 400; color: var(--cyan-600); padding: 4px 2px; min-height: 0; background: none; border: 0; }
:root[data-theme="dark"] .sec-link { color: var(--cyan); }
.sec-link[hidden] { display: none; }
.danger-link { color: var(--red) !important; display: block; margin: 10px auto 0; }
.muted { color: var(--muted); font-size: var(--fs-sub); }
.fineprint { font-size: var(--fs-foot); color: var(--muted); margin: 8px 16px; line-height: 1.38; }

/* Lists: inset grouped (rounded group, hairline separators inset to the text) */
.list { list-style: none; margin: 0; padding: 0; }
.list.group { background: var(--surface); border-radius: 12px; overflow: hidden; }
.sheet .list.group, .search-screen .list.group { background: var(--surface); }
.list li { position: relative; }
.list li + li::before { content: ''; position: absolute; top: 0; left: 60px; right: 0; border-top: .5px solid var(--line); z-index: 2; pointer-events: none; }
.row-btn {
  width: 100%; min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 12px; text-align: left;
}
.row-btn:active, .rrow-main:active, .menu-item:active { background: var(--surface-2); }
.row-btn > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-btn b { font-size: var(--fs-body); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-btn small { font-size: var(--fs-sub); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); flex: none; }
.row-ic.cyan { background: var(--cyan); color: #fff; }
.row-end { color: var(--muted); font-size: var(--fs-sub); font-weight: 400; font-variant-numeric: tabular-nums; flex: none; }
.group-row { background: var(--surface); border-radius: 12px; margin-bottom: 10px; }

.banner { display: flex; align-items: center; gap: 10px; border-radius: 16px; padding: 10px 12px; margin-bottom: 12px; font-size: var(--fs-foot); }
.banner > div { flex: 1; display: flex; flex-direction: column; }
.banner b { font-size: var(--fs-sub); }
.banner.warn { background: var(--orange-50); }
.banner.danger { background: var(--red-50); }
.banner .banner-ic { color: var(--orange); }
.banner.danger .banner-ic { color: var(--red); }

/* ── Search screen ─────────────────────────────────────────────────── */
.screen { position: fixed; inset: 0; z-index: 40; background: var(--surface); overflow-y: auto; }
.search-body { padding: 4px 4px 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 40px; padding: 0 16px; border-radius: 20px; background: var(--surface-2); font-weight: 600; font-size: var(--fs-sub); }
.chip.active { background: var(--navy-950); color: #fff; }
:root[data-theme="dark"] .chip.active { background: var(--cyan); color: #04202a; }
.skeleton > div { height: 56px; border-radius: 14px; margin: 10px 0; background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.2s infinite linear; }
@keyframes shimmer { to { background-position: -200% 0; } }
.empty { text-align: center; padding: 40px 12px 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.empty.compact { padding: 12px 4px; }
.empty h2 { font-size: var(--fs-title3); font-weight: 700; }
.empty p { color: var(--muted); font-size: var(--fs-sub); max-width: 300px; }
.empty-ic { width: 72px; height: 72px; border-radius: 22px; background: var(--cyan-50); color: var(--cyan-600); display: grid; place-items: center; }
.empty-ic.red { background: var(--red-50); color: var(--red); }

/* ── Place sheet ───────────────────────────────────────────────────── */
.place-head { display: flex; gap: 12px; align-items: flex-start; }
.place-titles { flex: 1; min-width: 0; }
.place-titles h2 { font-size: var(--fs-title3); font-weight: 700; line-height: 1.2; }
.place-titles p { font-size: var(--fs-foot); color: var(--muted); margin-top: 3px; }
.place-meta { margin: 12px 2px; font-size: var(--fs-sub); color: var(--muted); }
.actions { display: flex; gap: 10px; margin-top: 12px; }

/* ── Plan ──────────────────────────────────────────────────────────── */
.plan-state { margin: 4px 0 12px; }
.spinner-row { display: flex; gap: 12px; align-items: center; padding: 8px 2px; }
.spinner-row div { display: flex; flex-direction: column; }
.spinner-row small { color: var(--muted); font-size: var(--fs-foot); }
.spin { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--cyan-50); border-top-color: var(--cyan); animation: rot .8s linear infinite; flex: none; }
@keyframes rot { to { transform: rotate(360deg); } }
.progress { height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; margin-top: 8px; }
.progress i { display: block; height: 100%; width: 40%; background: var(--cyan); border-radius: 2px; animation: slide 1.1s ease-in-out infinite; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(260%); } }

/* ── Navigation HUD ────────────────────────────────────────────────── */
.nav-top { position: fixed; z-index: 15; top: calc(var(--sat) + 8px); left: calc(var(--sal) + var(--gut)); right: calc(var(--sar) + var(--gut)); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.nav-top > * { pointer-events: auto; }
@media (min-width: 720px) { .nav-top { right: auto; width: 420px; } }
.maneuver-card {
  background: var(--navy-950); color: #fff; border-radius: var(--r-banner); padding: 14px 16px; min-height: 92px;
  display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-2);
}
:root[data-theme="dark"] .maneuver-card { background: var(--navy-900); }
.m-icon { width: 56px; height: 56px; display: grid; place-items: center; color: #fff; flex: none; }
.m-text { flex: 1; min-width: 0; }
.m-dist { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.m-title { font-size: 15px; font-weight: 700; margin-top: 2px; }
.m-road { font-size: 17px; font-weight: 700; color: #fff; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.m-then { font-size: 13px; font-weight: 700; color: var(--cyan); margin-top: 3px; }
.m-exit { flex: none; min-width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .12); display: grid; place-items: center; font-weight: 700; font-size: 18px; }
.maneuver-card.uncertain .m-dist { opacity: .75; }
.lanes { background: var(--navy-950); border-radius: 18px; padding: 8px; display: flex; gap: 6px; box-shadow: var(--shadow-1); }
:root[data-theme="dark"] .lanes { background: var(--navy-900); }
.lane { flex: 1; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .45); }
.lane.on { background: var(--cyan); color: var(--on-accent); }
.notice {
  background: var(--glass); border-radius: 18px; padding: 10px 6px 10px 12px; display: flex; align-items: center; gap: 10px;
  box-shadow: var(--shadow-1); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: var(--fs-foot);
}
.notice-ic { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--cyan-50); color: var(--cyan-600); flex: none; }
.notice.warn .notice-ic { background: var(--orange-50); color: var(--orange); }
.notice.danger .notice-ic { background: var(--red-50); color: var(--red); }
.notice.success .notice-ic { background: var(--green-50); color: var(--green); }
.notice-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.notice-text b { font-size: var(--fs-sub); }
.notice-text span { color: var(--muted); }

.nav-left { position: fixed; z-index: 14; left: calc(var(--sal) + var(--gut)); bottom: calc(var(--dock-h, 96px) + 76px); display: flex; align-items: center; gap: 8px; }
.speed { width: 62px; height: 62px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-1); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.speed b { font-size: 22px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.speed small { font-size: 10px; color: var(--muted); font-weight: 600; }
.speed.over b { color: var(--red); }
.limit { width: 48px; height: 48px; border-radius: 50%; background: #fff; border: 5px solid var(--red); display: grid; place-items: center; box-shadow: var(--shadow-1); color: var(--navy-950); }
.limit b { font-size: 17px; font-weight: 700; }
/* Solovo Route: the limit sign overlaps the speedometer */
.nav-left .limit { margin-left: -18px; position: relative; z-index: 1; }
.speed.nogps b { color: var(--muted); }
.speed.nogps small { letter-spacing: .04em; font-weight: 700; }
/* "После поворота через 180 м держитесь левее ↰" */
.m-next { display: flex; align-items: center; gap: 8px; background: var(--navy-950); color: #fff; border-radius: 16px; padding: 10px 14px; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-1); }
.m-next[hidden] { display: none; }
.m-next-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-next .ic { flex: none; opacity: .9; }
.m-next-ic { flex: none; display: grid; padding-right: 12px; margin-right: 2px; border-right: 1px solid rgba(255, 255, 255, .2); }
.m-next-chev { flex: none; display: grid; opacity: .85; }
.m-next { cursor: pointer; }
/* Rerouting progress (indeterminate) above the dock */
.reroute-bar { position: fixed; z-index: 15; left: calc(var(--sal) + var(--gut)); right: calc(var(--sar) + var(--gut) + 64px); bottom: calc(var(--dock-h, 96px) + 18px); height: 5px; border-radius: 3px; background: rgba(16, 38, 70, .12); overflow: hidden; }
.reroute-bar[hidden] { display: none; }
.reroute-bar i { position: absolute; top: 0; bottom: 0; width: 45%; border-radius: 3px; background: var(--cyan); animation: nf-indet 1.3s ease-in-out infinite; }
@keyframes nf-indet { 0% { left: -45%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .reroute-bar i { animation: none; left: 0; width: 60%; } }
.nav-fabs { position: fixed; z-index: 14; right: calc(var(--sar) + var(--gut)); bottom: calc(var(--dock-h, 96px) + 76px); display: flex; flex-direction: column; gap: 10px; }
.nav-chip {
  position: fixed; z-index: 14; left: 50%; transform: translateX(-50%); bottom: calc(var(--dock-h, 96px) + 34px);
  max-width: calc(100vw - 32px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--navy-950); color: #fff; font-size: 12px; font-weight: 700;
  padding: 8px 12px; border-radius: 14px; box-shadow: var(--shadow-1); text-align: center;
}
.nav-chip.sim { background: var(--violet); }
.dock-traffic { font-size: 12px; color: var(--muted); font-weight: 600; }
.dock-traffic.delay { color: var(--orange); }
:root[data-theme="dark"] #btnTrip { color: var(--cyan); }

/* ── Map markers ───────────────────────────────────────────────────── */
.user-marker { width: 60px; height: 60px; position: relative; pointer-events: none; }
.user-halo { position: absolute; inset: 0; border-radius: 50%; background: rgba(52, 145, 246, .20); transition: transform .4s, opacity .4s; }
.user-marker.is-uncertain .user-halo { transform: scale(1.7); background: rgba(52, 145, 246, .14); }
.user-dot { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px; border-radius: 50%; background: var(--cyan); border: 4px solid #fff; box-shadow: 0 2px 8px rgba(16, 38, 70, .3); }
.user-arrow { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px; border-radius: 50%; background: #2F7DF6; border: 4px solid #fff; color: #fff; display: none; place-items: center; box-shadow: 0 3px 10px rgba(16, 38, 70, .35); }
.user-arrow .ic { width: 24px; height: 24px; }
.user-arrow .ic g { fill: #fff; stroke: #fff; stroke-width: 3; }
.user-marker.is-arrow .user-arrow { display: grid; }
.user-marker.is-arrow .user-dot { display: none; }
/* GL puck draws the dot / arrow (flag map.glPuck): the DOM keeps only car / walker. */
.user-marker.is-gl:not(.is-car) .user-dot, .user-marker.is-gl:not(.is-car) .user-arrow, .user-marker.is-gl:not(.is-car) .user-halo { display: none; }
.user-marker.is-stale .user-arrow, .user-marker.is-stale .user-dot { background: #8a9bb0; }
.user-marker.is-stale .user-halo { background: rgba(138, 155, 176, .2); }
/* Driving view: a car seen from behind instead of the arrow */
.user-car { display: none; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -40px 0 0 -32px; transform-origin: 50% 62%; transition: transform .25s linear; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25)); }
.user-marker.is-car .user-car { display: block; }
.user-marker.is-car .user-arrow, .user-marker.is-car .user-dot { display: none; }
.user-marker.is-car .user-halo { inset: 14px; background: rgba(52, 145, 246, .26); }
.user-marker.is-car.is-stale .user-car { filter: grayscale(1) opacity(.6); }
.dest-marker { width: 54px; height: 74px; pointer-events: none; }
.dest-marker img { display: block; width: 54px; height: 74px; -webkit-user-drag: none; }
.origin-marker { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 5px solid var(--navy-950); }
.report-marker { position: relative; width: 38px; height: 38px; border-radius: 50%; background: var(--rc, var(--orange)); color: #fff; display: grid; place-items: center; border: 3px solid #fff; box-shadow: 0 3px 8px rgba(16, 38, 70, .3); }
.report-marker::after { content: ''; position: absolute; left: 50%; bottom: -9px; margin-left: -6px; border: 6px solid transparent; border-top: 7px solid #fff; border-bottom: 0; }
.report-marker.mine { outline: 2px dashed rgba(255, 255, 255, .8); outline-offset: 2px; }

/* ── Overlays / dialogs ────────────────────────────────────────────── */
.overlay { position: fixed; inset: 0; z-index: 50; background: var(--scrim); }
.overlay.center { display: grid; place-items: center; padding: 20px; }
.modal-sheet { z-index: 51; }
.report-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; margin: 18px 0; }
.report-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: var(--fs-foot); font-weight: 700; background: none; border: 0; color: var(--text); }
.report-tile .rt-c { width: 64px; height: 64px; border-radius: 50%; background: var(--rc); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 12px color-mix(in srgb, var(--rc) 40%, transparent); transition: transform .12s; }
.report-tile:active .rt-c { transform: scale(.92); }
/* 2.59: the drawn warning icons sit on a dark round plate (white strokes in some of them). */
.report-tile .rt-c.art, .report-marker.art, #reportBadge.art, #roadAlertIcon.art { background: #16223A; box-shadow: 0 4px 12px rgba(16, 38, 70, .28); }
.report-tile .rt-c.art .ic-img { width: 46px; height: 46px; }
.report-marker.art .ic-img, #reportBadge.art .ic-img, #roadAlertIcon.art .ic-img { display: block; }
.report-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.report-head h2 { margin: 0; }
.report-badge { width: 52px; height: 52px; border-radius: 50%; background: var(--rc); color: #fff; display: grid; place-items: center; flex: none; }
.report-subs { margin-bottom: 12px; }
.btn.xl { min-height: 58px; font-size: var(--fs-body); }
/* Approaching a community report: "is it still there?" */
.road-alert { position: fixed; z-index: 17; left: calc(var(--sal) + var(--gut)); right: calc(var(--sar) + var(--gut)); bottom: calc(var(--dock-h, 96px) + 14px);
  background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-2); padding: 12px; display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; animation: ra-in .25s ease-out; }
.road-alert[hidden] { display: none; }
@keyframes ra-in { from { transform: translateY(20px); opacity: 0; } }
.road-alert-ic { width: 48px; height: 48px; border-radius: 50%; background: var(--rc, var(--orange)); color: #fff; display: grid; place-items: center; }
.road-alert-text { display: flex; flex-direction: column; min-width: 0; }
.road-alert-text b { font-size: 17px; }
.road-alert-text small { color: var(--muted); font-size: 13px; }
.road-alert-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ra-btn { min-height: 46px; border-radius: 14px; border: 0; font-weight: 700; font-size: 15px; }
.ra-btn.yes { background: var(--cyan); color: var(--on-accent); }
.ra-btn.no { background: var(--surface-2, rgba(16, 38, 70, .07)); color: var(--text); }
/* Over the limit: the speedometer turns red */
.speed.over { background: var(--red); }
.speed.over b, .speed.over small { color: #fff; }
.loc-box { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border-radius: 14px; padding: 12px; margin: 12px 0 4px; font-weight: 600; font-size: var(--fs-sub); }

/* ── Full screens ──────────────────────────────────────────────────── */
.center-screen { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: calc(var(--sat) + 24px) 28px calc(var(--sab) + 24px); }
.center-screen h1 { font-size: var(--fs-title2); font-weight: 700; letter-spacing: -.01em; max-width: 340px; }
.center-screen p { color: var(--muted); font-size: var(--fs-sub); max-width: 340px; margin-bottom: 10px; }
.center-screen .btn { max-width: 340px; }
.page { padding: calc(var(--sat) + 14px) calc(var(--sar) + 16px) calc(var(--sab) + 24px) calc(var(--sal) + 16px); }
.page-inner { max-width: 480px; margin: 0 auto; }
.info-rows { background: var(--surface-2); border-radius: 16px; padding: 4px 14px; }
.info-row { display: flex; align-items: center; gap: 10px; min-height: 46px; font-size: var(--fs-sub); border-top: 1px solid var(--line); }
.info-row:first-child { border-top: 0; }
.info-row > span:nth-child(2) { flex: 1; color: var(--muted); }
.info-row b { font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--fs-foot); }

.token-row { display: flex; gap: 8px; }
.token-row input { flex: 1; min-width: 0; height: 40px; border-radius: 12px; border: 0; background: var(--surface-2); padding: 0 12px; font-family: ui-monospace, Menlo, monospace; font-size: var(--fs-foot); }
.switch { appearance: none; -webkit-appearance: none; width: 50px; height: 30px; border-radius: 15px; background: var(--surface-3); position: relative; flex: none; transition: background .2s; cursor: pointer; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.switch:checked { background: var(--cyan); }
.switch:checked::after { transform: translateX(20px); }

/* ── Toasts ────────────────────────────────────────────────────────── */
.toasts { position: fixed; z-index: 90; left: 50%; transform: translateX(-50%); top: calc(var(--sat) + 64px); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(92vw, 420px); }
.toast { pointer-events: auto; background: var(--navy-950); color: #fff; border-radius: 16px; padding: 10px 14px; font-size: var(--fs-sub); font-weight: 600; box-shadow: var(--shadow-2); display: flex; align-items: center; gap: 10px; animation: toastIn .2s ease-out; }
.toast .link { color: var(--cyan); padding: 4px 6px; min-height: 0; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-6px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .maneuver-card { min-height: 70px; padding: 8px 12px; }
  .m-dist { font-size: 24px; }
  .m-road { -webkit-line-clamp: 1; }
  .sheet { left: auto; right: calc(var(--sar) + 12px); width: min(420px, 50vw); bottom: 8px; border-radius: var(--r-sheet); max-height: calc(100vh - 16px); }
}

/* ── Diagnostics ───────────────────────────────────────────────────── */
.actions.wrap { flex-wrap: wrap; margin: 14px 0 6px; }
.diag-filter { margin: 10px 0 6px; }
.log { list-style: none; margin: 0; padding: 0; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; line-height: 1.4; }
.log li { padding: 7px 2px; border-top: 1px solid var(--line); display: grid; grid-template-columns: auto auto 1fr; gap: 2px 8px; }
.log .lt { color: var(--muted); }
.log .lk { font-weight: 700; }
.log .ld { grid-column: 1 / -1; color: var(--muted); word-break: break-word; }
.log .lv { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: var(--surface-2); text-transform: uppercase; align-self: center; justify-self: end; }
.log .lv.warn { background: var(--orange-50); color: #d4682b; }
.log .lv.error { background: var(--red-50); color: var(--red); }
.danger-text { color: var(--red); }
.center-screen .fineprint { max-width: 340px; margin: 0; }

/* ── 3D driving concept ─────────────────────────────────────────────── */
.maneuver-card { position: relative; }
.maneuver-card .lanes { flex: none; align-self: stretch; align-items: center; background: none; box-shadow: none; border-radius: 0; padding: 0 0 0 10px; margin-left: 2px; border-left: 1px solid rgba(255, 255, 255, .16); gap: 0; max-width: 44%; }
.maneuver-card .lane { flex: none; width: 26px; height: 46px; background: none; color: rgba(255, 255, 255, .35); }
.maneuver-card .lane .ic { width: 24px; height: 24px; }
.maneuver-card:has(.lanes:not([hidden])) .m-title { font-size: 14px; }
.maneuver-card .lane.on { background: none; color: var(--cyan); filter: drop-shadow(0 0 6px rgba(52, 145, 246, .75)); }
@media (max-width: 380px) { .maneuver-card .lane { width: 24px; } }
.fab.hazard { color: var(--orange); }
:root[data-theme="dark"] .dock-center .dock-sub { color: var(--cyan); }

/* Keep the speedometer and buttons visible above a road alert */
body.has-road-alert .nav-left, body.has-road-alert .nav-fabs { bottom: calc(var(--dock-h, 96px) + 168px); transition: bottom .2s; }
body.has-road-alert .nav-chip { display: none; }

/* Faster route offer */
.offer-card { position: fixed; z-index: 18; left: calc(var(--sal) + var(--gut)); right: calc(var(--sar) + var(--gut)); bottom: calc(var(--dock-h, 96px) + 14px);
  background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-2); padding: 12px; display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; animation: ra-in .25s ease-out; border: 2px solid var(--green); }
.offer-card[hidden] { display: none; }
.offer-ic { width: 48px; height: 48px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; }
.offer-card .ra-btn.yes { background: var(--green); }
body.has-offer .road-alert { display: none; }
body.has-offer .nav-left, body.has-offer .nav-fabs { bottom: calc(var(--dock-h, 96px) + 168px); }
/* While driving, toasts never cover the maneuver card */
body[data-screen="nav"] .toasts { top: auto; bottom: calc(var(--dock-h, 96px) + 96px); }
body[data-screen="nav"].has-road-alert .toasts, body[data-screen="nav"].has-offer .toasts { bottom: calc(var(--dock-h, 96px) + 250px); }

/* ── 3D road hazard alerts (camera / police / obstacle), per Solovo Route screens ── */
.hazard { --hz: 255, 72, 84; display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 22px; color: #fff;
  background: linear-gradient(135deg, rgba(122, 16, 28, .94), rgba(58, 12, 20, .94));
  border: 1.5px solid rgba(var(--hz), .8); box-shadow: 0 0 0 1px rgba(0, 0, 0, .2), 0 0 22px rgba(var(--hz), .45), 0 10px 24px rgba(16, 10, 20, .35);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: hz-in .28s ease-out; }
.hazard[hidden] { display: none; }
.hazard.tone-amber { --hz: 255, 160, 60; background: linear-gradient(135deg, rgba(120, 62, 10, .94), rgba(60, 30, 8, .94)); }
@keyframes hz-in { from { transform: translateY(-10px) scale(.98); opacity: 0; } }
.hz-ic { flex: none; width: 60px; height: 60px; display: grid; place-items: center; color: #fff; position: relative; }
.hz-ic.shape-square { border-radius: 16px; background: linear-gradient(160deg, #ff4b55, #d9182a); box-shadow: 0 0 16px rgba(var(--hz), .55); }
.hz-ic.shape-square .ic { background: #fff; color: #111; border-radius: 10px; padding: 4px; width: 38px; height: 38px; }
.hz-ic.shape-circle { border-radius: 50%; background: radial-gradient(circle at 50% 40%, #e3283a, #a40f1f); border: 3px solid rgba(255, 255, 255, .9); box-shadow: 0 0 18px rgba(var(--hz), .6); }
.hz-ic.shape-triangle::before { content: ''; position: absolute; inset: 2px 0 4px; background: rgb(var(--hz)); clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 8px; filter: drop-shadow(0 0 10px rgba(var(--hz), .7)); }
.hz-ic.shape-triangle::after { content: ''; position: absolute; inset: 9px 7px 9px; background: rgba(60, 8, 14, .92); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.hazard.tone-amber .hz-ic.shape-triangle::after { background: rgba(70, 34, 6, .92); }
.hz-ic.shape-triangle .ic { position: relative; z-index: 1; margin-top: 14px; }
/* A drawn road sign (speed bump): the picture itself, no plate behind it. */
.hz-ic.shape-sign .ic-img { display: block; }
.hp-ic .ic-img { display: block; }
.hz-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hz-text b { font-size: 21px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.hz-text span { font-size: 14.5px; color: rgba(255, 255, 255, .78); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hz-text span:empty { display: none; }

/* Hazard on the map: glowing sign on a short pole with the distance pill. */
.hazard-pin { --hz: 255, 72, 84; position: relative; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.hazard-pin.tone-amber { --hz: 255, 160, 60; }
.hp-glow { position: absolute; top: -10px; left: 50%; width: 76px; height: 76px; margin-left: -38px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--hz), .45), rgba(var(--hz), 0) 70%); animation: hp-pulse 1.6s ease-in-out 4; }
@keyframes hp-pulse { 50% { transform: scale(1.25); opacity: .55; } }
.hp-row { position: relative; display: flex; align-items: center; gap: 4px; }
.hp-ic { width: 44px; height: 44px; border-radius: 12px; background: #f4f6f9; color: var(--navy-950); display: grid; place-items: center;
  border: 2.5px solid rgb(var(--hz)); box-shadow: 0 0 14px rgba(var(--hz), .75), 0 4px 10px rgba(0, 0, 0, .3); }
.hp-limit { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 4px solid #e3283a; color: var(--navy-950); font-weight: 700; font-size: 14px; display: grid; place-items: center; box-shadow: 0 3px 8px rgba(0, 0, 0, .25); }
.hp-limit[hidden], .hp-dist[hidden] { display: none; }
.hp-dist { margin-top: 4px; padding: 2px 8px; border-radius: 8px; background: var(--navy-950); color: #fff; font-weight: 700; font-size: 13px; border: 1.5px solid rgba(255, 255, 255, .85); white-space: nowrap; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hazard-pin.art .hp-ic { width: 68px; height: 68px; background: none; border: 0; box-shadow: none; border-radius: 0; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .35)); }
.hazard-pin.art .hp-pole { display: none; }
.hazard-pin.art .hp-glow { top: -6px; width: 90px; height: 90px; margin-left: -45px; }
.hp-pole { width: 4px; height: 16px; background: linear-gradient(#9aa6b5, #5b6878); border-radius: 2px; }
.report-marker.is-hidden { visibility: hidden; }

/* ── Walking mode (Solovo Route walking screens) ── */
.user-walker { display: none; position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.user-marker.is-walker .user-walker { display: block; }
.user-marker.is-walker .user-car, .user-marker.is-walker .user-arrow, .user-marker.is-walker .user-dot { display: none; }
.user-marker.is-walker .user-halo { inset: 10px; background: rgba(47, 125, 246, .18); }
.uw-cone { position: absolute; left: -46px; top: -92px; width: 92px; height: 92px; transform-origin: 50% 100%; transition: transform .3s linear;
  background: radial-gradient(farthest-side at 50% 100%, rgba(47, 125, 246, .5), rgba(47, 125, 246, 0)); clip-path: polygon(50% 100%, 6% 0, 94% 0); }
.uw-base { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; background: #2F7DF6; border: 4px solid #fff; box-shadow: 0 2px 8px rgba(8, 18, 33, .35); }
.uw-pin { position: absolute; left: -24px; top: -66px; width: 48px; height: 48px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #2F7DF6; border: 3px solid #fff;
  display: grid; place-items: center; box-shadow: 0 6px 14px rgba(16, 38, 70, .35); }
.uw-pin .ic { transform: rotate(45deg); color: #fff; }
.user-marker.is-walker.is-stale .uw-pin, .user-marker.is-walker.is-stale .uw-base { background: #8a9bb0; }
.user-marker.is-walker.is-uncertain .uw-cone { opacity: .45; }

/* Walking: planning sheet */
.walk-plan { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.walk-plan[hidden] { display: none; }
.wp-line { margin: -6px 0 0; color: var(--muted); font-size: var(--fs-sub); }
.wp-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 2px; }
.wp-chips::-webkit-scrollbar { display: none; }

/* Walking: navigation */
.m-walker { flex: none; width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, .12); display: grid; place-items: center; color: #fff; }
.m-walker[hidden] { display: none; }
.fab-text { font-weight: 700; font-size: 17px; letter-spacing: .02em; color: var(--ink); }
.fab-text[hidden] { display: none; }
.hazard.tone-walk { --hz: 30, 107, 255; background: var(--glass); color: var(--ink); border: 0; box-shadow: var(--shadow-1); }
.hazard.tone-walk .hz-text span { color: var(--muted); }
.hz-ic.shape-tile { border-radius: 16px; background: var(--surface-2); color: var(--ink); width: 56px; height: 56px; }
.hazard.tone-walk.signals .hz-ic.shape-tile { background: #10233e; color: #fff; }
.hazard.tone-walk .hz-text b { font-size: 19px; }
.almost { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 10px; border-radius: 20px; background: var(--glass); box-shadow: var(--shadow-1); animation: hz-in .28s ease-out; }
.almost[hidden] { display: none; }
.almost-ic { flex: none; width: 64px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--cyan), var(--cyan)); }
.almost-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.almost-text b { font-size: 18px; font-weight: 700; }
.almost-text span { color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#almostSave[aria-pressed="true"], .arr-act[aria-pressed="true"] { color: var(--cyan); }
/* Walking dock: three stats + «Выйти» */

/* Arrival (all modes): top card + finished sheet */

/* Route steps list */

.hazard.tone-walk .hz-text span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Voice settings */
.voice-set { gap: 10px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-2); }
.seg button { min-height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font-weight: 700; font-size: var(--fs-foot); line-height: 1.15; padding: 4px; cursor: pointer; }
.seg button[aria-checked="true"] { background: var(--surface); box-shadow: var(--shadow-1); color: var(--cyan); }
.vs-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--fs-sub); font-weight: 600; }
.vs-row select { min-height: 40px; max-width: 62%; border-radius: 12px; border: 0; background: var(--surface-2); padding: 0 10px; font-weight: 600; color: var(--ink); }
.vs-row input[type="range"] { flex: 1; max-width: 55%; accent-color: var(--cyan); }
.vs-row b { color: var(--cyan); margin-left: 4px; }
#setVoiceTest { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* Walking-only dock parts: hidden in every other mode (after their display rules on purpose). */

/* ── Side-column layout: landscape phones and wide screens ──
   Everything you read (maneuver, alerts, trip info) sits in one column on the
   left; the map with the car fills the rest. Rotating the phone switches
   between this and the portrait layout without a reload. */
@media (min-width: 720px), (max-height: 520px) and (orientation: landscape) {
  :root { --col-w: min(420px, 46vw); --col-l: calc(var(--sal) + 12px); --map-l: calc(var(--col-l) + var(--col-w) + 12px); }
  .nav-top { left: var(--col-l); right: auto; width: var(--col-w); }
  .dock { left: var(--col-l); right: auto; width: var(--col-w); bottom: calc(var(--sab) + 8px); border-radius: var(--r-sheet); padding: 12px 16px; }
  .nav-left { left: var(--map-l); bottom: calc(var(--sab) + 12px); }
  .nav-fabs { bottom: calc(var(--sab) + 12px); }
  .nav-chip { left: calc(var(--map-l) + (100vw - var(--map-l)) / 2); bottom: calc(var(--sab) + 12px); max-width: calc(100vw - var(--map-l) - 240px); }
  .road-alert, .offer-card { left: var(--col-l); right: auto; width: var(--col-w); bottom: calc(var(--dock-h, 96px) + 16px); box-sizing: border-box; }
  body.has-road-alert .nav-left, body.has-road-alert .nav-fabs { bottom: calc(var(--sab) + 12px); }
  body.has-road-alert .nav-chip { display: none; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .nav-top { gap: 6px; }
  .hazard { padding: 8px 12px 8px 8px; gap: 10px; border-radius: 18px; }
  .hz-ic, .hz-ic.shape-tile { width: 46px; height: 46px; }
  .hz-ic.shape-square .ic { width: 30px; height: 30px; }
  .hz-text b { font-size: 17px; }
  .hz-text span { font-size: 13px; }
  .almost { padding: 6px; }
  .almost-ic { width: 48px; height: 40px; }
  .m-walker { width: 44px; height: 44px; }
  .dock-center .dock-sub { font-size: 14px; }
  /* Narrow column: «Выйти» becomes a round icon button so the three numbers fit. */
  .nav-fabs { gap: 8px; }
  .road-alert { padding: 10px; gap: 8px 10px; }
  .ra-btn { min-height: 40px; }
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Map markers must stay absolutely positioned (Mapbox places them by transform).
   Our classes set position: relative for their children, which put each marker
   back into normal flow, stacked under the previous ones: the car was drawn
   tens of pixels away from its real point, more with every pin on the map. */
.mapboxgl-marker { position: absolute; top: 0; left: 0; }

@media (max-width: 400px) {
}

/* Hazard plates by meaning (N-Mark §8): information = ink with violet edge, warning = amber, danger = red. */
.hazard.tone-ink { --hz: 160, 121, 251; background: linear-gradient(135deg, rgba(15, 29, 48, .96), rgba(8, 18, 33, .96)); }
.hazard.tone-ink .hz-ic.shape-square { background: linear-gradient(160deg, #3491F6, #2F7DF6); }
.hazard.tone-ink .hz-ic.shape-circle { background: radial-gradient(circle at 50% 40%, #3A4A66, #1B2940); border-color: rgba(185, 154, 255, .9); }
.hazard.tone-amber { --hz: 217, 131, 21; }
.hazard-pin.tone-ink { --hz: 160, 121, 251; }
.hazard-pin.tone-amber { --hz: 217, 131, 21; }

/* House numbers on a street (place card) */
.houses { margin: 2px 0 12px; }
.houses-t { font-size: var(--fs-foot); color: var(--muted); margin: 0 0 8px; font-weight: 600; }
.houses-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.houses-row::-webkit-scrollbar { display: none; }
.house-chip { flex: none; min-width: 48px; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line, rgba(127,127,127,.25));
  background: var(--soft, rgba(127,127,127,.08)); color: inherit; font: 600 15px/1 inherit; font-variant-numeric: tabular-nums; }
.house-chip[aria-selected="true"] { background: var(--accent, #2F7DF6); border-color: transparent; color: #fff; }
/* Current house number while navigating */
.nav-house { position: absolute; left: 50%; transform: translateX(-50%); z-index: 6; padding: 6px 12px; border-radius: 999px;
  background: rgba(10,16,32,.86); color: #fff; font: 600 13px/1.2 inherit; white-space: nowrap; max-width: 80vw; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.nav-house b { font-size: 15px; font-variant-numeric: tabular-nums; }


/* ── Walking navigation, redesign 2.23 (pedestrian HUD mockups) ─────────────── */
:root { --walk: #2F7DF6; --walk-then: #6EC1FF; }
:root[data-theme="dark"] { --walk: #3491F6; --walk-then: #6EC1FF; }
/* Walk cycle: four frames, one visible at a time; still while standing. */
.walk-anim .wf { opacity: 0; }
.walk-anim .wf1 { opacity: 1; }
@keyframes nf-walk { 0% { opacity: 1; } 25%, 100% { opacity: 0; } }
body.walk-moving .walk-anim .wf { animation: nf-walk .9s steps(1, end) infinite; }
body.walk-moving .walk-anim .wf2 { animation-delay: -.675s; }
body.walk-moving .walk-anim .wf3 { animation-delay: -.45s; }
body.walk-moving .walk-anim .wf4 { animation-delay: -.225s; }
@media (prefers-reduced-motion: reduce) { body.walk-moving .walk-anim .wf { animation: none; } }

/* Maneuver card: big distance, arrow | text divider, bold action, regular street, violet «Затем». */
body.walk-mode .maneuver-card { min-height: 118px; padding: 16px 14px 16px 16px; gap: 13px; border-radius: 26px; }
body.walk-mode .m-icon { width: 50px; height: 76px; padding-right: 13px; border-right: 1px solid rgba(255, 255, 255, .24); }
body.walk-mode .m-icon .ic g { stroke-width: 6.4; }
body.walk-mode .m-dist { font-size: 36px; }
body.walk-mode .m-title { font-size: 18px; font-weight: 700; margin-top: 4px; }
body.walk-mode .m-road { font-size: 18px; font-weight: 500; color: rgba(255, 255, 255, .9); -webkit-line-clamp: 1; }
body.walk-mode .m-then { font-size: 14.5px; font-weight: 700; color: var(--walk-then); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.walk-mode .m-walker { width: 60px; height: 60px; background: rgba(255, 255, 255, .1); align-self: center; }
body.walk-mode .m-next { padding: 10px 14px 10px 16px; border-radius: 18px; font-size: 14px; min-height: 42px; }
body.walk-mode .m-next-text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }

/* User on the map: violet pin with the walking figure over a soft halo. */
.user-marker.is-walker .user-halo { inset: auto; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; background: rgba(47, 125, 246, .14); }
.user-marker.is-walker .uw-cone { display: none; }
.uw-pin { left: -25px; top: -70px; width: 50px; height: 50px; background: var(--walk); }
.uw-pin .walk-anim { transform: rotate(45deg); color: #fff; }
.uw-base { background: var(--walk); }

/* «Рядом: улица, дом» — pill with a violet pin. */
.nav-chip { display: inline-flex; align-items: center; gap: 8px; }
.nav-chip[hidden] { display: none; }
.nc-ic { display: grid; color: var(--walk-then); flex: none; }
.nc-ic[hidden] { display: none; }
body.walk-mode .nav-chip { font-size: 13.5px; padding: 8px 16px 8px 12px; border-radius: 16px; }
#navChipText { overflow: hidden; text-overflow: ellipsis; }

/* Dock: solid violet «Выйти». */
@media (max-width: 380px) {
  body.walk-mode .m-dist { font-size: 30px; }
  body.walk-mode .m-title, body.walk-mode .m-road { font-size: 16px; }
  body.walk-mode .m-walker { width: 52px; height: 52px; }
  body.walk-mode .m-icon { width: 46px; padding-right: 12px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  body.walk-mode .maneuver-card { min-height: 0; padding: 8px 12px; }
  body.walk-mode .m-dist { font-size: 26px; }
  body.walk-mode .m-icon { height: 52px; }
  body.walk-mode .m-walker { width: 44px; height: 44px; }
}

/* ═══════════════ 2.25 · iOS 26 components (Apple HIG) ═══════════════ */
/* Buttons: one filled accent action per screen, no coloured shadow; Body Semibold. */
.btn { min-height: 50px; border-radius: var(--r-btn); font-size: var(--fs-body); font-weight: 600; padding: 0 18px; }
.btn.primary { min-height: 50px; box-shadow: none; }
.btn.soft { background: var(--surface-2); color: var(--cyan-600); }
:root[data-theme="dark"] .btn.soft { color: var(--cyan); }
.btn.ghost { color: var(--cyan-600); font-weight: 400; }
:root[data-theme="dark"] .btn.ghost { color: var(--cyan); }
.btn.danger { background: var(--red); }
.link { font-weight: 400; }
.text-btn { flex: none; min-height: var(--touch); padding: 0 4px 0 8px; font-size: var(--fs-body); color: var(--cyan-600); background: none; border: 0; }
:root[data-theme="dark"] .text-btn { color: var(--cyan); }

/* Glass surfaces shared by floating controls */
.glass { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-1), inset 0 0 0 .5px var(--glass-edge); }

/* Round glass ✕ in a sheet header (HIG close button) */
.close-btn { flex: none; width: 30px; height: 30px; margin: 2px -4px 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); position: relative; }
.close-btn::after { content: ''; position: absolute; inset: -7px; }
.close-btn .ic g { stroke-width: 9; }
.round-btn { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink); }

/* Map controls: one vertical glass capsule, top right */
.map-ctrls { position: fixed; z-index: 10; top: calc(var(--sat) + 10px); right: calc(var(--sar) + var(--inset) + 2px); display: flex; flex-direction: column;
  width: 44px; border-radius: 22px; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-1), inset 0 0 0 .5px var(--glass-edge); overflow: hidden; }
.map-ctrls[hidden] { display: none; }
.mc-btn { width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink); }
.mc-btn + .mc-btn { border-top: .5px solid var(--line); }
.mc-btn:active { background: var(--surface-2); }
.mc-btn[aria-expanded="true"] { color: var(--cyan-600); }
:root[data-theme="dark"] .mc-btn[aria-expanded="true"] { color: var(--cyan); }

/* Search field (looks like a field, not a button) */
.search-field { flex: 1; min-width: 0; height: 40px; border-radius: 12px; background: var(--surface-2); display: flex; align-items: center; gap: 6px; padding: 0 10px; color: var(--muted); font-size: var(--fs-body); text-align: left; }
.sf-ic { display: grid; color: var(--muted); flex: none; }
.sf-ic .ic g { stroke-width: 6.5; }
.sf-ph { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Home sheet */
.home-sheet .banner { margin: 6px 0 2px; }
.fav-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 4px; scroll-padding: 0 16px; }
.fav-row::-webkit-scrollbar { display: none; }
.fav { flex: none; width: 72px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; min-width: 0; }
.fav-c { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--fc, var(--cyan)); color: #fff; }
.fav.add .fav-c { background: var(--surface-2); color: var(--cyan-600); }
:root[data-theme="dark"] .fav.add .fav-c { color: var(--cyan); }
.fav b { max-width: 100%; font-size: var(--fs-foot); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav small { max-width: 100%; margin-top: -3px; font-size: var(--fs-cap); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav:active .fav-c { transform: scale(.94); }

/* Recent places: whole row = one tap (route); swipe left = Delete */
.recents .rrow { overflow: hidden; transition: height .22s ease, opacity .22s ease; }
.rrow-main { position: relative; z-index: 1; width: 100%; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px 8px 12px; text-align: left; background: var(--surface); color: inherit; touch-action: pan-y; transition: transform .25s cubic-bezier(.2, .9, .25, 1); }
.rrow.is-swiping .rrow-main { transition: none; }
.rrow.is-open .rrow-main { transform: translateX(-88px); }
.rrow-ic { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.rrow-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rrow-t b { font-size: var(--fs-body); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rrow-t small { font-size: var(--fs-sub); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swipe-del { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 88px; background: var(--red); color: #fff; font-size: var(--fs-sub); font-weight: 600; display: grid; place-items: center; transition: width .2s; }
.rrow.is-full .swipe-del { width: 100%; justify-items: end; padding-right: 22px; }
.rrow.is-removing { height: 0 !important; opacity: 0; }
.swipe-del { opacity: 0; }
.rrow.is-open .swipe-del, .rrow.is-swiping .swipe-del, .swipe-del:focus { opacity: 1; }
.rrow:has(.swipe-del:focus) .rrow-main { transform: translateX(-88px); }
.swipe-del:focus-visible { outline-offset: -3px; }

/* Search: the sheet raised to full height (map still visible above) */
.search-screen { position: fixed; top: calc(var(--sat) + 10px); bottom: var(--inset); left: calc(var(--sal) + var(--inset)); right: calc(var(--sar) + var(--inset));
  border-radius: var(--r-sheet); background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-2), inset 0 0 0 .5px var(--glass-edge); padding: 5px 16px calc(var(--sab) + 8px); z-index: 40; animation: sheet-up .3s cubic-bezier(.2, .9, .25, 1); }
@keyframes sheet-up { from { transform: translateY(24px); opacity: .6; } }
.search-bar { display: flex; align-items: center; gap: 4px; background: transparent; padding: 0 0 6px; border-radius: 0; position: sticky; top: -5px; z-index: 2; }
.search-input { flex: 1; min-width: 0; height: 40px; border-radius: 12px; background: var(--surface-2); display: flex; align-items: center; gap: 6px; padding: 0 6px 0 10px; }
.search-input input { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; font-size: var(--fs-body); padding: 0; outline: none; }
.search-input input::placeholder { color: var(--muted); }
.search-input input::-webkit-search-cancel-button { display: none; }
.search-input:focus-within { box-shadow: none; }
.clear-btn { flex: none; width: 28px; height: 28px; display: grid; place-items: center; color: var(--surface); }
.clear-btn > span { width: 17px; height: 17px; border-radius: 50%; background: var(--muted); display: grid; place-items: center; }
.clear-btn .ic g { stroke-width: 10; }
.search-body { padding: 0; }
.search-body .sec-title { font-size: var(--fs-title3); }
.cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0 4px; }
.cats[hidden] { display: none; }
.cat { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: var(--fs-foot); color: var(--ink); min-width: 0; }
.cat span:last-child { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-c { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--cc); color: #fff; }
.cat:active .cat-c { transform: scale(.94); }
.empty h2 { font-size: var(--fs-title3); font-weight: 600; }
.empty-ic { background: var(--surface-2); color: var(--muted); border-radius: 50%; }

/* Place sheet */
.place-titles { flex: 1; min-width: 0; }
.place-titles h2 { font-size: var(--fs-title2); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; }
.place-titles p { font-size: var(--fs-sub); color: var(--muted); margin-top: 2px; }
.place-actions { display: flex; gap: 8px; margin: 8px 0 4px; align-items: stretch; }
.place-actions #placeRoute { flex: 1; min-width: 0; justify-content: flex-start; gap: 10px; padding: 0 14px; min-height: 56px; }
.pr-t { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; }
.pr-t b { font-weight: 600; font-size: var(--fs-body); }
.pr-t small { font-size: var(--fs-foot); font-weight: 400; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pr-t small:empty { display: none; }
.act-btn { flex: none; width: 76px; min-height: 56px; border-radius: var(--r-btn); background: var(--surface-2); color: var(--cyan-600); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: var(--fs-cap); font-weight: 500; }
:root[data-theme="dark"] .act-btn { color: var(--cyan); }
.act-btn > span:last-child { color: var(--ink); max-width: 72px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-c { display: grid; }
.place-meta { margin: 8px 2px 4px; font-size: var(--fs-sub); color: var(--muted); }
.houses { margin: 8px 0 4px; position: relative; }
.houses-t { font-size: var(--fs-sub); color: var(--muted); margin: 0 2px 8px; font-weight: 400; }
/* A soft edge says the row scrolls on */
.houses-row { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); padding-right: 30px; }
.house-chip { border: 0; background: var(--surface-2); border-radius: 10px; font: 500 var(--fs-body)/1 var(--font); height: 38px; }
.house-chip[aria-selected="true"] { background: var(--cyan); color: #fff; }

/* ── Menus (context-menu popover) ── */
.menu-layer { position: fixed; inset: 0; z-index: 95; }
.menu-pop { position: fixed; min-width: 230px; max-width: min(300px, calc(100vw - 16px)); padding: 6px 0; border-radius: 14px;
  background: var(--menu-bg, rgba(255, 255, 255, .94)); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .22), inset 0 0 0 .5px var(--glass-edge); opacity: 0; transform: scale(.9); transition: opacity .16s ease, transform .2s cubic-bezier(.2, .9, .25, 1.15); }
.menu-layer.is-open .menu-pop { opacity: 1; transform: none; }
.menu-layer.is-closing .menu-pop { opacity: 0; transform: scale(.96); transition-duration: .12s; }
.mp-row { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 16px; text-align: left; font-size: var(--fs-body); color: var(--ink); }
.mp-row:active, .mp-row:focus-visible { background: var(--surface-2); outline: none; }
.mp-row[disabled] { opacity: .4; }
.mp-row.danger { color: var(--red); }
.mp-check { width: 16px; flex: none; display: grid; color: var(--ink); }
.mp-check .ic g { stroke-width: 8; }
.mp-label { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mp-label small { font-size: var(--fs-foot); color: var(--muted); }
.mp-ic { flex: none; display: grid; color: var(--ink); }
.mp-div { height: 8px; background: rgba(0, 0, 0, .06); margin: 6px 0; }
:root[data-theme="dark"] .mp-div { background: rgba(0, 0, 0, .3); }
:root[data-theme="dark"] { --menu-bg: rgba(30, 42, 70, .96); }
.mp-title { padding: 6px 16px 2px; font-size: var(--fs-foot); color: var(--muted); }

/* ── Alerts and action sheets (browser stand-ins for UIKit) ── */
.sys-layer { position: fixed; inset: 0; z-index: 96; background: rgba(0, 0, 0, 0); transition: background .2s; }
.sys-layer.is-open { background: rgba(0, 0, 0, .3); }
.alert-layer { display: grid; place-items: center; padding: 24px; }
.alert { width: 270px; border-radius: 14px; overflow: hidden; background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); text-align: center;
  transform: scale(1.1); opacity: 0; transition: transform .22s cubic-bezier(.2, .9, .25, 1), opacity .18s; }
.sys-layer.is-open .alert { transform: none; opacity: 1; }
.sys-layer.is-closing .alert { opacity: 0; }
.alert-body { padding: 19px 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.alert-body b { font-size: var(--fs-body); font-weight: 600; }
.alert-body p { font-size: var(--fs-foot); color: var(--ink); line-height: 1.3; }
.alert-btns { display: grid; grid-template-columns: 1fr 1fr; border-top: .5px solid var(--line); }
.alert-btn { min-height: 44px; font-size: var(--fs-body); color: var(--info); }
.alert-btn + .alert-btn { border-left: .5px solid var(--line); }
.alert-btn.strong { font-weight: 600; }
.alert-btn.danger { color: var(--red); font-weight: 600; }
.alert-btn:active { background: var(--surface-2); }
.as-layer { display: flex; align-items: flex-end; justify-content: center; }
.as-wrap { width: 100%; max-width: 420px; padding: 0 calc(var(--sar) + 8px) calc(var(--sab) + 8px) calc(var(--sal) + 8px); display: flex; flex-direction: column; gap: 8px;
  transform: translateY(110%); transition: transform .3s cubic-bezier(.2, .9, .25, 1); }
.sys-layer.is-open .as-wrap { transform: none; }
.sys-layer.is-closing .as-wrap { transform: translateY(110%); }
.as-group { border-radius: 14px; overflow: hidden; background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); display: flex; flex-direction: column; }
.as-cancel { background: var(--surface); }
.as-head { padding: 14px 16px; text-align: center; display: flex; flex-direction: column; gap: 2px; color: var(--muted); font-size: var(--fs-foot); }
.as-head b { font-weight: 600; }
.as-btn { min-height: 56px; font-size: var(--fs-title3); color: var(--info); border-top: .5px solid var(--line); }
.as-head + .as-btn, .as-cancel .as-btn { border-top: 0; }
.as-cancel .as-btn { font-weight: 600; }
.as-btn.danger { color: var(--red); }
.as-btn:active { background: var(--surface-2); }

/* ── Plan sheet ── */
.sheet-title { flex: 1; min-width: 0; font-size: var(--fs-title2); font-weight: 700; letter-spacing: -.02em; }
.od { position: relative; display: flex; flex-direction: column; gap: 0; padding-right: 0; background: var(--surface); border-radius: 12px; }
.od-row { min-height: 48px; border-radius: 0; background: none; display: flex; align-items: center; gap: 12px; padding: 0 52px 0 14px; text-align: left; font-weight: 400; font-size: var(--fs-body); }
.od-row { position: relative; }
.od-row + .od-row::before { content: ''; position: absolute; top: 0; left: 38px; right: 52px; border-top: .5px solid var(--line); }
.od-swap { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--cyan-600); }
:root[data-theme="dark"] .od-swap { color: var(--cyan); }
/* Segmented control (UISegmentedControl): grey track, raised thumb */
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; padding: 2px; margin: 12px 0 10px; border-radius: 10px; background: var(--surface-2); }
.segmented > button { min-height: 44px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--ink); font-size: var(--fs-foot); font-weight: 500; padding: 3px 4px; position: relative; }
.segmented > button + button::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; border-left: .5px solid var(--muted-2); }
.segmented > button[aria-checked="true"]::before, .segmented > button[aria-checked="true"] + button::before { display: none; }
.segmented > button[aria-checked="true"] { background: var(--surface); box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04); font-weight: 600; }
:root[data-theme="dark"] .segmented > button[aria-checked="true"] { background: #34466B; }
.mode-t { font-size: var(--fs-foot); font-variant-numeric: tabular-nums; }
/* Route rows */
.route-list { margin-top: 2px; }
.rr { display: flex; align-items: center; gap: 8px; padding-right: 12px; }
.list li.rr + li.rr::before { left: 14px; }
.rr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 10px 6px 10px 14px; text-align: left; }
.rr-time { font-size: var(--fs-title2); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rr-sub { font-size: var(--fs-sub); color: var(--muted); }
.rr.sel { box-shadow: inset 4px 0 0 var(--cyan); }
.rr-side { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rr-go { min-width: 84px; min-height: 40px; padding: 0 14px; border-radius: 20px; font-size: var(--fs-body); font-weight: 600; background: var(--cyan-50); color: var(--cyan-600); }
:root[data-theme="dark"] .rr-go { color: var(--cyan); }
.rr-go.on { background: var(--cyan); color: var(--on-accent); }
.rr-steps { display: inline-flex; align-items: center; gap: 2px; min-height: 28px; font-size: var(--fs-foot); color: var(--cyan-600); }
:root[data-theme="dark"] .rr-steps { color: var(--cyan); }
.walk-plan { gap: 8px; margin-top: 10px; }
.wp-line { margin: 0 2px; font-size: var(--fs-sub); color: var(--muted); }
.wp-chips { gap: 6px; }
.wp-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 10px; border-radius: 16px; background: var(--surface); font-size: var(--fs-foot); font-weight: 500; white-space: nowrap; }
.wp-chip .ic { color: var(--muted); }
.wp-chip.tone-green .ic { color: var(--green); }
.wp-chip.tone-warn .ic { color: var(--orange); }
.spinner-row b { font-weight: 600; }

/* ── Navigation (2.25) ── */
/* Trip card: floating glass sheet; small = three numbers, medium = actions + End */
.dock { z-index: 16; padding-top: 5px; }
.dock[data-detent="small"] { max-height: var(--peek, 104px); }
.dock[data-detent="medium"] { max-height: min(70vh, calc(100dvh - var(--sat) - 10px)); }
.dock-row { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; padding: 2px 0 4px; text-align: center; touch-action: none; }
.dw-stat { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.dw-stat b { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dw-stat small { font-size: var(--fs-foot); color: var(--muted); }
.dw-stat:first-child b { color: var(--green); }
.dock-traffic { margin: -2px 0 4px; text-align: center; font-size: var(--fs-foot); color: var(--muted); font-weight: 500; }
.dock-traffic:empty { display: none; }
.dock-traffic.delay { color: var(--orange); }
.trip-panel { padding-top: 6px; }
.trip-dest { margin: 0 4px 10px; text-align: center; }
.menu-list { margin-bottom: 14px; }
.menu-item { width: 100%; min-height: 50px; display: flex; align-items: center; gap: 12px; padding: 0 14px; text-align: left; font-size: var(--fs-body); color: var(--ink); background: var(--surface); }
.list li + li::before { left: 54px; }
.mi-ic { flex: none; display: grid; color: var(--cyan-600); }
:root[data-theme="dark"] .mi-ic { color: var(--cyan); }
.mi-t { flex: 1; min-width: 0; }
.mi-val { color: var(--muted); font-size: var(--fs-body); white-space: nowrap; }
.mi-chev { display: grid; color: var(--muted-2); }
.mi-chev .ic g { stroke-width: 9; }
#dockEnd { min-height: 50px; }

/* Map buttons while driving: one glass capsule (Voice · Overview · 2D · Report) */
.nav-fabs { width: 48px; gap: 0; border-radius: 24px; overflow: hidden; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--shadow-1), inset 0 0 0 .5px var(--glass-edge); bottom: calc(var(--dock-h, 96px) + var(--inset) + 12px); }
.nav-fabs .mc-btn { width: 48px; height: 48px; }
.nav-fabs .mc-btn[hidden] { display: none; }
.nav-fabs .mc-btn + .mc-btn { border-top: .5px solid var(--line); }
.mc-btn.voice-alerts { position: relative; }
.mc-btn.voice-alerts::after { content: '!'; position: absolute; top: 7px; right: 8px; width: 14px; height: 14px; border-radius: 50%; background: var(--orange); color: #fff; font: 700 10px/14px var(--font); text-align: center; }
.fab-text { font-weight: 700; font-size: 15px; color: var(--ink); }
.nav-left { bottom: calc(var(--dock-h, 96px) + var(--inset) + 12px); }

/* Maneuver card: the street is the biggest line; the action reads from the arrow */
.maneuver-card { border-radius: var(--r-banner); background: var(--navy-950); padding: 14px 16px; }
:root[data-theme="dark"] .maneuver-card { background: #15233D; box-shadow: 0 0 0 .5px rgba(255,255,255,.12), var(--shadow-2); }
.m-dist { font-size: 30px; font-weight: 700; }
.m-title { font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, .7); margin-top: 1px; }
.m-road { font-size: 22px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.m-text { display: flex; flex-direction: column; }
.m-text .m-dist { order: 0; }
.m-text .m-road { order: 1; }
.m-text .m-title { order: 2; }
.m-text .m-then { order: 3; }
.m-next, .lanes, .nav-chip { background: var(--navy-950); }
.m-then { color: #8FD0FF; font-weight: 600; }

/* Speed: glass pill; limit: a real road sign (red ring) */
.speed { width: 62px; height: 62px; background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-1), inset 0 0 0 .5px var(--glass-edge); }
.speed b { font-weight: 700; }
.limit { border-width: 5px; border-color: #E30613; background: #fff; }
.limit b { font-weight: 700; color: #000; }

/* Modal sheets: same floating glass sheet, scrim, ✕ in the header */
.overlay { background: var(--scrim); }
.modal-sheet { z-index: 51; animation: sheet-up .3s cubic-bezier(.2, .9, .25, 1); }
.back-btn { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--cyan-600); margin: 2px 0 0 -4px; }
.back-btn .ic g { stroke-width: 7; }
:root[data-theme="dark"] .back-btn { color: var(--cyan); }
.report-grid { margin: 10px 0 6px; gap: 16px 8px; }
.report-tile { font-size: var(--fs-foot); font-weight: 500; color: var(--ink); }
.report-tile .rt-c { width: 60px; height: 60px; box-shadow: none; }
.report-head, .sheet-head .report-badge { width: 32px; height: 32px; }
.report-subs { margin: 8px 0 12px; }
.chip { min-height: 36px; padding: 0 14px; border-radius: 18px; font-weight: 500; font-size: var(--fs-sub); }
.chip.active { background: var(--cyan); color: #fff; }
:root[data-theme="dark"] .chip.active { background: var(--cyan); color: #fff; }

/* Steps */
.steps-list { margin: 6px 0 4px; }
.step { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 12px; min-height: 52px; }
.list li.step + li.step::before { left: 56px; }
.step-ic { flex: none; width: 32px; display: grid; place-items: center; color: var(--ink); }
.step b { display: block; font-size: var(--fs-body); font-weight: 400; }
.step small { color: var(--muted); font-size: var(--fs-sub); }

/* Arrival: one sheet */
.arrived-overlay { background: transparent; pointer-events: none; }
.arrived-overlay .sheet { pointer-events: auto; }
.arr-badge { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; margin-top: 2px; }
.arr-kicker { font-size: var(--fs-sub); color: var(--green) !important; font-weight: 600; margin: 0 !important; }
.arr-line { display: flex; align-items: center; gap: 6px; margin: 4px 2px 6px; font-size: var(--fs-body); color: var(--muted); font-variant-numeric: tabular-nums; }
.arr-line > span:first-child { display: grid; }
#arrSave[aria-pressed="true"] .act-c { color: var(--green); }

/* Onboarding: what's new style — logo, three features, Continue at the bottom */
.center-screen { background: var(--canvas); justify-content: flex-start; gap: 0; padding: calc(var(--sat) + 9vh) 28px calc(var(--sab) + 20px); }
.center-screen h1 { font-size: var(--fs-large); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 18px 0 26px; }
.center-screen p { margin: 0 0 18px; }
.onb-logo { width: 72px; height: 72px; border-radius: 16px; }
.onb-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; text-align: left; max-width: 360px; width: 100%; }
.onb-feats li { display: flex; gap: 16px; align-items: flex-start; }
.onb-ic { flex: none; width: 40px; display: grid; place-items: center; color: var(--cyan-600); }
:root[data-theme="dark"] .onb-ic { color: var(--cyan); }
.onb-feats b { display: block; font-size: var(--fs-body); font-weight: 600; }
.onb-feats small { display: block; font-size: var(--fs-sub); color: var(--muted); margin-top: 2px; }
.onb-lang { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; padding: 0 4px 0 12px; min-height: 40px; border-radius: 10px; background: var(--surface-2); color: var(--ink); }
.onb-lang[hidden] { display: none; }
.onb-lang select { min-height: 40px; border: 0; background: transparent; font-size: var(--fs-body); padding: 0 6px; color: var(--ink); }
.onb-foot { margin-top: auto; width: 100%; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 20px; }
.onb-foot .fineprint { text-align: center; margin: 4px 0 0; }
.hero-ic { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--cyan-600); margin-bottom: 8px; }
.hero-ic.red { color: var(--red); }
:root[data-theme="dark"] .hero-ic { color: var(--cyan); }
:root[data-theme="dark"] .hero-ic.red { color: var(--red); }

/* Arrived: the arrival sheet replaces the driving HUD */
body.arrived .nav-top, body.arrived .nav-fabs, body.arrived .nav-left, body.arrived .dock, body.arrived .nav-chip, body.arrived .road-alert, body.arrived .offer-card { display: none !important; }

/* ── Settings and other pages: inset grouped lists (HIG «Settings») ── */
.page { background: var(--canvas); padding: 0 calc(var(--sar) + 16px) calc(var(--sab) + 28px) calc(var(--sal) + 16px); }
.nav-bar { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 44px; margin: 0 calc(-16px - var(--sar)) 0 calc(-16px - var(--sal));
  padding: var(--sat) calc(var(--sar) + 8px) 0 calc(var(--sal) + 8px); box-sizing: content-box; background: color-mix(in srgb, var(--canvas) 82%, transparent); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.nb-title { font-size: var(--fs-body); font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-side { display: flex; align-items: center; min-width: 0; }
.nb-side.end { justify-content: flex-end; }
.text-btn.strong { font-weight: 600; }
.text-btn.back { display: inline-flex; align-items: center; gap: 2px; padding-left: 0; }
.text-btn.back .ic g { stroke-width: 7; }
.large-title { font-size: var(--fs-large); font-weight: 700; letter-spacing: -.02em; margin: 2px 4px 14px; }
.group { background: var(--surface); border-radius: 12px; overflow: hidden; margin-bottom: 8px; }
.group-h { font-size: var(--fs-title3); font-weight: 600; letter-spacing: -.01em; margin: 26px 4px 8px; }
.group-f { font-size: var(--fs-foot); color: var(--muted); margin: 6px 16px 18px; line-height: 1.38; }
.group-f:empty { display: none; }
.cell { position: relative; width: 100%; min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 6px 16px; text-align: left; font-size: var(--fs-body); color: var(--ink); background: var(--surface); }
.cell + .cell::before { content: ''; position: absolute; top: 0; right: 0; left: 16px; border-top: .5px solid var(--line); }
.cell:has(.cell-ic) + .cell::before, .group:has(.cell-ic) .cell + .cell::before { left: 58px; }
button.cell:active, label.cell:active { background: var(--surface-2); }
.cell.col { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 10px; padding-bottom: 12px; }
.cell-row { display: flex; align-items: center; gap: 12px; }
.cell-ic { flex: none; width: 30px; height: 30px; border-radius: 7px; display: grid; place-items: center; background: var(--ic, var(--cyan)); color: #fff; }
.cell-ic .ic g { stroke-width: 5.6; }
.cell-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cell-t small { font-size: var(--fs-foot); color: var(--muted); }
.cell-v { flex: none; max-width: 50%; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-chev { flex: none; display: grid; color: var(--muted-2); }
.cell-chev .ic g { stroke-width: 9; }
.cell.danger .cell-t { color: var(--red); }
.link-cell { color: var(--cyan-600); }
.link-cell .cell-t { color: inherit; }
:root[data-theme="dark"] .link-cell { color: var(--cyan); }
/* Pop-up buttons (native menu on iOS): value + up/down chevrons, no box */
.cell-sel { flex: none; max-width: 58%; position: relative; display: flex; align-items: center; }
.cell-sel select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: var(--muted); font-size: var(--fs-body); text-align: right; text-align-last: right; padding: 8px 18px 8px 0; max-width: 100%; direction: ltr; cursor: pointer; }
.cell-sel::after { content: ''; position: absolute; right: 2px; top: 50%; width: 8px; height: 12px; margin-top: -6px; pointer-events: none; opacity: .5;
  background: linear-gradient(currentColor, currentColor); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1 4.5 4 1.5l3 3M1 7.5l3 3 3-3' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1 4.5 4 1.5l3 3M1 7.5l3 3 3-3' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; color: var(--muted); }
.cell input[type="range"] { width: 100%; accent-color: var(--cyan); }
.token-row input { background: var(--surface-2); }
.fineprint.center { text-align: center; }
#setVersion { cursor: default; user-select: none; -webkit-user-select: none; padding: 6px 0; }
/* UISwitch: 51 × 31 pt, system green-ish tint replaced by the accent */
.switch { width: 51px; height: 31px; border-radius: 16px; background: rgba(120, 120, 128, .16); }
:root[data-theme="dark"] .switch { background: rgba(120, 120, 128, .32); }
.switch::after { top: 2px; left: 2px; width: 27px; height: 27px; box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 3px 1px rgba(0, 0, 0, .06); transition: transform .25s cubic-bezier(.2, .9, .25, 1.1); }
.switch:checked { background: var(--green); }
.switch:checked::after { transform: translateX(20px); }
.switch:disabled { opacity: .45; }
/* Diagnostics, install, map error pages get the same nav bar look */
[data-show="diag"] .page-inner > .icon-btn { margin-top: calc(var(--sat) + 8px); }

/* Filled accent stays saturated with white text in the dark (HIG) */
.btn.primary, .rr-go.on, :root[data-theme="dark"] .rr-go.on { background: var(--accent-fill); color: #fff; }
.row-ic.cyan, .house-chip[aria-selected="true"], .chip.active, :root[data-theme="dark"] .chip.active { background: var(--accent-fill); color: #fff; }
.fav-c { background: var(--fc, var(--accent-fill)); }
:root[data-theme="dark"] .switch:checked { background: var(--green); }
/* Large title → inline title once scrolled (UINavigationBar) */
.nb-title { transition: opacity .18s; }
.page:has(.large-title):not(.scrolled) .nb-title { opacity: 0; }
.page:not(.scrolled) .nav-bar { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.page.scrolled .nav-bar { box-shadow: 0 .5px 0 var(--line); }

/* Trip card raised: the map buttons step aside */
body.trip-open .nav-fabs, body.trip-open .nav-left, body.trip-open .nav-chip, body.trip-open .reroute-bar { display: none !important; }
/* The grabber and the sheet header stay put while the sheet content scrolls (so it can always be dragged) */
.sheet > .grabber { position: sticky; top: -5px; z-index: 4; width: auto; height: 18px; margin: -5px -16px 0; border-radius: 0; background: var(--sheet-head-bg, transparent); }
.sheet > .grabber::before { content: ''; position: absolute; left: 50%; top: 5px; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--muted-2); }
.sheet > [data-sheet-handle] { position: sticky; top: 13px; z-index: 3; background: var(--sheet-head-bg, transparent); }
.sheet.is-scrolled { --sheet-head-bg: var(--glass-strong); }
.sheet.is-scrolled > [data-sheet-handle] { box-shadow: 0 .5px 0 var(--line); margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
.sheet[data-detent="small"]:not(.is-dragging) [data-peek] ~ * { visibility: hidden; }

/* 2.25.1 — walking card: street biggest, as for driving (the 2.23 sizes made the action the headline) */
body.walk-mode .maneuver-card { min-height: 0; padding: 14px 16px; gap: 14px; }
body.walk-mode .m-icon { height: 64px; }
body.walk-mode .m-dist { font-size: 34px; }
body.walk-mode .m-road { font-size: 22px; font-weight: 700; color: #fff; -webkit-line-clamp: 2; }
body.walk-mode .m-title { font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, .7); margin-top: 1px; }
body.walk-mode .m-then { font-size: 15px; margin-top: 4px; }
/* Status chip: centred over the map but never under the map-button capsule on the right */
@media (max-width: 719.98px) and (min-height: 521px) {
  .nav-chip { left: calc(var(--sal) + var(--gut)); right: calc(var(--sar) + var(--gut) + 60px); transform: none; width: fit-content; max-width: none; margin: 0 auto; bottom: calc(var(--dock-h, 96px) + var(--inset) + 12px); }
}
.nav-chip { font-size: 13px; font-weight: 600; background: var(--navy-950); }
/* Trip card collapsed: hug the numbers (the home indicator sits in the bottom inset) */
.dock[data-detent="small"] { padding-bottom: max(calc(var(--sab) - var(--inset) - 10px), 10px); }

/* ── Map sheet: map type cards with small previews ── */
.map-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 14px; }
.map-type { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: var(--fs-foot); font-weight: 500; color: var(--ink); min-width: 0; }
.map-type > span:last-child { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-pic { width: 100%; aspect-ratio: 1.25; border-radius: 12px; border: 2.5px solid transparent; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12); position: relative; overflow: hidden; }
.map-type[aria-checked="true"] .mt-pic { border-color: var(--accent-fill); }
.map-type[aria-checked="true"] > span:last-child { color: var(--cyan-600); font-weight: 600; }
:root[data-theme="dark"] .map-type[aria-checked="true"] > span:last-child { color: var(--cyan); }
/* Drawn previews (no network): flat roads · 3D blocks · imagery */
.mt-simple { background:
  linear-gradient(90deg, transparent 46%, #FFC93C 46%, #FFC93C 54%, transparent 54%),
  linear-gradient(0deg, transparent 38%, #fff 38%, #fff 44%, transparent 44%),
  linear-gradient(35deg, transparent 60%, #fff 60%, #fff 64%, transparent 64%),
  radial-gradient(circle at 22% 78%, #C9EBB5 0 18%, transparent 19%),
  linear-gradient(160deg, #8FD3F4 0 22%, #F4F1EA 22%); }
.mt-3d { background:
  linear-gradient(90deg, transparent 47%, #fff 47%, #fff 53%, transparent 53%),
  linear-gradient(#E8E4DC, #E8E4DC) 14% 30% / 22% 34% no-repeat,
  linear-gradient(#D9D3C8, #D9D3C8) 70% 22% / 20% 46% no-repeat,
  linear-gradient(#E2DDD3, #E2DDD3) 18% 86% / 26% 22% no-repeat,
  linear-gradient(#D5CFC4, #D5CFC4) 74% 84% / 18% 26% no-repeat,
  #F1EEE8; }
.mt-3d::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.0) 40%, rgba(0,0,0,.06)); }
.mt-sat { background:
  linear-gradient(90deg, transparent 47%, rgba(255,255,255,.85) 47%, rgba(255,255,255,.85) 51%, transparent 51%),
  radial-gradient(circle at 25% 30%, #5E7A45 0 16%, transparent 17%),
  radial-gradient(circle at 75% 70%, #4E6B3A 0 20%, transparent 21%),
  radial-gradient(circle at 70% 20%, #A89C83 0 14%, transparent 15%),
  linear-gradient(135deg, #2E5B7A 0 18%, #7C8A6A 18% 55%, #9A9077 55%); }
.group-h.small { font-size: var(--fs-body); margin: 16px 4px 6px; }
.layers-sheet .segmented > button { min-height: 34px; font-size: var(--fs-sub); }
.layers-sheet[data-detent="medium"] { max-height: min(88vh, calc(100dvh - var(--sat) - 10px)); }

/* ── Solovo Route brand (guide v2.0) ── */
.onb-logo { width: 88px; height: 88px; border-radius: 20px; }
.center-screen .onb-word { font-size: var(--fs-large); font-weight: 700; letter-spacing: -.02em; margin: 18px 0 2px; }
.onb-word span { color: var(--accent-fill); }
:root[data-theme="dark"] .onb-word span { color: var(--cyan); }
.center-screen .onb-tag { margin: 0 0 30px; font-size: var(--fs-body); color: var(--muted); }
.dot.red { background: var(--coral); }
/* Accessible action blue on white (#1456A1) for small text links; filled buttons keep Route Blue */
.sec-link, .text-btn, .link, .rr-steps, .btn.ghost, .btn.soft, .act-btn, .mi-ic, .od-swap, .onb-ic, .back-btn, .fav.add .fav-c { color: var(--cyan-600); }
:root[data-theme="dark"] :is(.sec-link, .text-btn, .link, .rr-steps, .btn.ghost, .btn.soft, .act-btn, .mi-ic, .od-swap, .onb-ic, .back-btn, .fav.add .fav-c) { color: var(--cyan); }
.dock-row { color: var(--ink); }

/* ── Driving HUD as in Waze (2.33) ─────────────────────────────────────
   1. The trip card (arrival · minutes · km) is black, like the maneuver card.
   2. A camera / road event pops up at the bottom over the trip card, black, with a
      big «Закрыть», and stays until closed (or until the spot is passed).
   3. Speed limit and current speed sit in the top-right corner, much larger. */
.dock {
  --glass-strong: rgba(17, 20, 26, .95); --surface: #222834; --surface-2: rgba(118, 118, 128, .26);
  --ink: #FFFFFF; --muted: rgba(235, 235, 245, .62); --muted-2: rgba(235, 235, 245, .32); --line: rgba(255, 255, 255, .12);
  --glass-edge: rgba(255, 255, 255, .10); --green: #30D158; --orange: #FF9F0A;
  background: rgba(17, 20, 26, .95); color: #fff;
}
.dock > .grabber { background: transparent; }
.dock > .grabber::before, .dock .grabber { --muted-2: rgba(255, 255, 255, .3); }
.dock .dw-stat small { color: rgba(235, 235, 245, .66); }

.hazard.hz-dock {
  position: fixed; z-index: 19; pointer-events: auto;
  left: calc(var(--sal) + var(--inset)); right: calc(var(--sar) + var(--inset)); bottom: var(--inset);
  min-height: max(var(--dock-h, 96px), 132px); box-sizing: border-box;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text icon" "btn btn"; align-items: center; gap: 10px 14px;
  padding: 16px 16px max(calc(var(--sab) - var(--inset) + 6px), 14px); border-radius: var(--r-sheet);
  background: rgba(17, 20, 26, .97); border: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 0 0 .5px rgba(255, 255, 255, .10);
  animation: hz-up .24s ease-out;
}
@keyframes hz-up { from { transform: translateY(16px); opacity: 0; } }
.hazard.hz-dock .hz-text { grid-area: text; }
.hazard.hz-dock .hz-ic { grid-area: icon; width: 50px; height: 50px; }
.hazard.hz-dock .hz-ic.shape-square .ic { width: 32px; height: 32px; }
.hazard.hz-dock .hz-text b { font-size: 22px; white-space: normal; }
.hazard.hz-dock .hz-text span { font-size: 16px; color: rgba(235, 235, 245, .7); }
.hz-close { grid-area: btn; min-height: 52px; border-radius: 999px; background: #2F7DF6; color: #fff; font-size: 18px; font-weight: 700; }
.hz-close:active { background: #1F6AE0; }
@media (min-width: 720px), (max-height: 520px) and (orientation: landscape) {
  .hazard.hz-dock { left: var(--col-l); right: auto; width: var(--col-w); bottom: calc(var(--sab) + 8px); padding-bottom: 14px; min-height: max(var(--dock-h, 96px), 120px); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .hazard.hz-dock { gap: 8px 12px; padding: 12px 14px; }
  .hazard.hz-dock .hz-text b { font-size: 19px; }
  .hz-close { min-height: 44px; font-size: 17px; }
}

/* Speed: top right, limit sign to the left of the speedometer (as in Waze). */
.nav-left {
  left: auto !important; bottom: auto !important; right: calc(var(--sar) + var(--gut));
  top: calc(var(--navtop-bottom, 180px) + 10px); flex-direction: row-reverse; align-items: center; gap: 0; z-index: 14;
}
.speed { width: 88px; height: 88px; background: rgba(17, 20, 26, .92); -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3), inset 0 0 0 2px rgba(255, 255, 255, .14); position: relative; z-index: 0; }
.speed b { font-size: 36px; color: #fff; letter-spacing: -.02em; }
.speed small { font-size: 12px; color: rgba(235, 235, 245, .7); }
.speed.nogps b { color: rgba(235, 235, 245, .5); }
.speed.over { background: #E30613; }
.limit { width: 72px; height: 72px; border-width: 7px; }
.limit b { font-size: 28px; }
.nav-left .limit { margin: 0 -14px 0 0; z-index: 1; }
@media (min-width: 720px), (max-height: 520px) and (orientation: landscape) {
  .nav-left { top: calc(var(--sat) + 12px); right: calc(var(--sar) + 12px); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .speed { width: 78px; height: 78px; }
  .speed b { font-size: 31px; }
  .limit { width: 64px; height: 64px; border-width: 6px; }
  .limit b { font-size: 25px; }
}
body.arrived .hz-dock, body.trip-open .hz-dock { display: none !important; }

/* 2.60 Waze layout (flag ui.wazeControls → body.waze-ui): no button panel; compass top left, sound top right,
   report bottom right, speed bottom left with a smaller limit sign just above it. Walking keeps the old panel. */
.wz-btn, .wz-hazard { display: none; }
body.waze-ui .nav-fabs { display: none !important; }
body.waze-ui .wz-btn, body.waze-ui .wz-hazard { display: grid; }
body:not([data-screen="nav"]) .wz-btn, body:not([data-screen="nav"]) .wz-hazard,
body.arrived .wz-btn, body.arrived .wz-hazard, body.trip-open .wz-btn, body.trip-open .wz-hazard { display: none !important; }
.wz-btn { position: fixed; z-index: 14; top: calc(var(--navtop-bottom, 180px) + 12px); width: 60px; height: 60px; padding: 0; border: 0; border-radius: 50%;
  background: none; place-items: center; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); -webkit-tap-highlight-color: transparent; }
.wz-btn:active { transform: scale(.94); }
.wz-btn img { width: 60px; height: 60px; display: block; grid-area: 1 / 1; transition: transform .25s linear; }
.wz-compass { left: calc(var(--sal) + var(--gut)); }
.wz-sound { right: calc(var(--sar) + var(--gut)); }
.wz-free { display: none; grid-area: 1 / 1; width: 60px; height: 60px; border-radius: 50%; background: #0b0b0c; color: #fff; place-items: center; }
.wz-compass.free img { visibility: hidden; }
.wz-compass.free .wz-free { display: grid; }
.wz-mute { display: none; grid-area: 1 / 1; width: 4px; height: 40px; border-radius: 2px; background: #FF3B30; transform: rotate(-45deg); box-shadow: 0 0 0 2px #0b0b0c; }
.wz-sound.off .wz-mute { display: block; }
.wz-sound.off img { opacity: .75; }
.wz-hazard { position: fixed; z-index: 14; right: calc(var(--sar) + var(--gut)); bottom: calc(var(--dock-h, 96px) + var(--inset) + 12px);
  width: 72px; height: 72px; border: 0; border-radius: 20px; background: #4A3D12; place-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35); -webkit-tap-highlight-color: transparent; }
.wz-hazard:active { transform: scale(.94); }
body.waze-ui .nav-left { left: calc(var(--sal) + var(--gut)) !important; right: auto; top: auto;
  bottom: calc(var(--dock-h, 96px) + var(--inset) + 12px) !important; flex-direction: row; }
body.waze-ui.has-road-alert .nav-left, body.waze-ui.has-offer .nav-left,
body.waze-ui.has-road-alert .wz-hazard, body.waze-ui.has-offer .wz-hazard { bottom: calc(var(--dock-h, 96px) + 168px) !important; }
/* Waze speedometer: near-black disc, thin grey rim, white digits; red when over the limit. */
body.waze-ui .speed { width: 76px; height: 76px; background: #141518; box-shadow: 0 4px 12px rgba(0, 0, 0, .35), inset 0 0 0 3px #3A3E46; }
body.waze-ui .speed b { font-size: 32px; color: #fff; }
body.waze-ui .speed small { color: #A9AEB8; }
body.waze-ui .speed.over { background: #E8202A; box-shadow: 0 4px 12px rgba(0, 0, 0, .35), inset 0 0 0 3px rgba(255, 255, 255, .35); }
body.waze-ui .speed.over b, body.waze-ui .speed.over small { color: #fff; }
body.waze-ui .nav-left { position: fixed; }
body.waze-ui .nav-left .limit { position: absolute; left: 50px; top: -40px; margin: 0; width: 48px; height: 48px; border-width: 5px; }
body.waze-ui .nav-left .limit b { font-size: 19px; }

/* Developer: feature flags (2.37) */
#devFlags .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }

/* 2.60.1 Waze layout in landscape (flag ui.wazeControls): maneuver card top left (compact: distance +
   street), compass right next to it, sound in the top right corner; the trip info is one full-width bar
   at the bottom («13 мин · 22:50 · 4,8 км»); speed and the report button sit just above that bar. */
@media (max-height: 520px) and (orientation: landscape) {
  body.waze-ui { --wz-col: min(440px, 46vw); --wz-l: calc(var(--sal) + 12px); --wz-r: calc(var(--sar) + 12px); }
  body.waze-ui .nav-top { top: calc(var(--sat) + 8px); left: var(--wz-l); width: var(--wz-col); right: auto; }
  body.waze-ui .maneuver-card { min-height: 0; padding: 10px 14px; gap: 12px; }
  body.waze-ui .m-icon { width: 56px; height: 56px; }
  body.waze-ui .m-dist { font-size: 28px; }
  body.waze-ui .m-road { font-size: 24px; -webkit-line-clamp: 1; }
  body.waze-ui .maneuver-card:has(.m-road:not([hidden])) .m-title { display: none; }
  body.waze-ui .wz-btn { top: calc(var(--sat) + 10px); width: 56px; height: 56px; }
  body.waze-ui .wz-btn img, body.waze-ui .wz-free { width: 56px; height: 56px; }
  body.waze-ui .wz-compass { left: calc(var(--wz-l) + var(--wz-col) + 16px); }
  body.waze-ui .wz-sound { right: var(--wz-r); }
  /* Trip bar: full width, one row, the arrival time in the middle and larger, no captions. */
  body.waze-ui .dock { left: var(--wz-l); right: var(--wz-r); width: auto; bottom: calc(var(--sab) + 6px); padding: 6px 16px 8px; }
  body.waze-ui .dock-row { grid-template-columns: 1fr auto 1fr; gap: 28px; padding: 0; }
  body.waze-ui .dw-stat { flex-direction: row; align-items: baseline; gap: 6px; }
  body.waze-ui .dw-stat:nth-child(1) { order: 2; }
  body.waze-ui .dw-stat:nth-child(1) small { display: none; }
  body.waze-ui .dw-stat:nth-child(1) b { font-size: 34px; }
  body.waze-ui .dw-stat:nth-child(2) { order: 1; justify-self: end; }
  body.waze-ui .dw-stat:nth-child(3) { order: 3; justify-self: start; }
  body.waze-ui .dw-stat:nth-child(2) b, body.waze-ui .dw-stat:nth-child(3) b { font-size: 24px; font-weight: 600; }
  body.waze-ui .dw-stat:nth-child(2) small, body.waze-ui .dw-stat:nth-child(3) small { font-size: 20px; }
  body.waze-ui .dock-traffic { display: none; }
  /* Above the bar: speed to the right of the card column (left of the car), report button in the right corner. */
  body.waze-ui .nav-left { left: calc(var(--wz-l) + var(--wz-col) + 16px) !important; bottom: calc(var(--dock-h, 70px) + var(--sab) + 16px) !important; }
  body.waze-ui .speed { width: 68px; height: 68px; }
  body.waze-ui .speed b { font-size: 28px; }
  body.waze-ui .nav-left .limit { left: 46px; top: -34px; width: 44px; height: 44px; }
  body.waze-ui .nav-left .limit b { font-size: 17px; }
  body.waze-ui .wz-hazard { right: var(--wz-r); bottom: calc(var(--dock-h, 70px) + var(--sab) + 16px) !important; width: 64px; height: 64px; border-radius: 18px; }
  body.waze-ui .nav-chip { left: var(--wz-l); bottom: calc(var(--dock-h, 70px) + var(--sab) + 16px); transform: none; max-width: var(--wz-col); }
  body.waze-ui .road-alert, body.waze-ui .offer-card { left: var(--wz-l); width: var(--wz-col); bottom: calc(var(--dock-h, 70px) + var(--sab) + 14px); }
  body.waze-ui.has-road-alert .nav-chip, body.waze-ui.has-offer .nav-chip { display: none; }
  body.waze-ui.has-road-alert .nav-left, body.waze-ui.has-offer .nav-left { bottom: calc(var(--dock-h, 70px) + var(--sab) + 16px) !important; }
}

/* 2.61.1 Waze text colours (flag ui.wazeControls): the street in the maneuver card and the «then» line
   in the colour of the route band; the trip bar is white only (no green arrival time). */
body.waze-ui { --wz-route: #2F7DF6; }
:root[data-theme="dark"] body.waze-ui { --wz-route: #3491F6; }
body.waze-ui .maneuver-card .m-road { color: var(--wz-route); }
body.waze-ui .m-then, body.waze-ui .m-next-text { color: var(--wz-route); }
body.waze-ui .m-dist { color: #fff; }
body.waze-ui .dock .dw-stat b, body.waze-ui .dock .dw-stat:first-child b { color: #fff; }

/* 2.61.1 Waze typography (flag ui.wazeControls): distance white, the street in the route-line colour and
   larger than the distance, the instruction line only when there is no street; trip numbers all white. */
:root { --wz-route: #2F7DF6; }
:root[data-theme="dark"] { --wz-route: #3491F6; }
body.waze-ui .m-dist { font-size: 30px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
body.waze-ui .m-road { font-size: 34px; font-weight: 800; line-height: 1.08; color: var(--wz-route); -webkit-line-clamp: 2; }
body.waze-ui .maneuver-card:has(.m-road:not([hidden])) .m-title { display: none; }
body.waze-ui .m-title { font-size: 22px; font-weight: 700; color: #fff; }
body.waze-ui .m-then { font-size: 20px; font-weight: 600; color: var(--wz-route); }
body.waze-ui .dw-stat b, body.waze-ui .dw-stat:first-child b { color: #fff; }
body.waze-ui .dw-stat:first-child b { font-size: 34px; font-weight: 700; }
body.waze-ui .dw-stat:nth-child(2) b, body.waze-ui .dw-stat:nth-child(3) b { font-size: 26px; font-weight: 600; }
@media (max-height: 520px) and (orientation: landscape) {
  body.waze-ui .m-dist { font-size: 26px; }
  body.waze-ui .m-road { font-size: 32px; -webkit-line-clamp: 1; }
  body.waze-ui .dw-stat:first-child b { font-size: 36px; }
  body.waze-ui .dw-stat:nth-child(2) b, body.waze-ui .dw-stat:nth-child(3) b { font-size: 24px; font-weight: 500; }
  body.waze-ui .dw-stat:nth-child(2) small, body.waze-ui .dw-stat:nth-child(3) small { font-size: 24px; color: #fff; }
}

:root { --wh-bg: #FFFFFF; --wh-field: #EEF0F3; --wh-text: #111418; --wh-sub: #6B717A; --wh-chip: #D5D9DF; --wh-line: #E6E8EC; --wh-ic: #5B6270; --wh-grab: #C3C8D0; --wh-accent: #0A84D6; }
:root[data-theme="dark"] { --wh-bg: #1F2024; --wh-field: #3A3C41; --wh-text: #FFFFFF; --wh-sub: #A0A4AB; --wh-chip: #4A4D53; --wh-line: #34363B; --wh-ic: #C9CCD1; --wh-grab: #5A5D63; --wh-accent: #33CCFF; }
/* ═══ 2.62 Waze home screen (flag ui.wazeHome → body.waze-home) ═══
   Corners as in Waze: menu + compass top left, sound top right, speed bottom left, the street you are on
   in the middle, the report button bottom right — all just above the sheet. The map-control capsule goes.
   The sheet is Waze-dark: pill search field, outlined quick chips, a quiet «Недавние» list. */
.wh-menu, .wh-btn, .wh-speed, .wh-street, .wh-report { display: none; }
body.waze-home:is([data-screen="home"], [data-screen="place"], [data-screen="plan"]) .map-ctrls { display: none !important; }
body.waze-home:is([data-screen="home"], [data-screen="place"], [data-screen="plan"]) .wh-menu, body.waze-home:is([data-screen="home"], [data-screen="place"], [data-screen="plan"]) .wh-btn,
body.waze-home[data-screen="home"] .wh-speed, body.waze-home[data-screen="home"] .wh-report { display: grid; }
body.waze-home[data-screen="home"] .wh-street:not([hidden]) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
body.waze-home .wh-menu[hidden], body.waze-home .wh-btn[hidden], body.waze-home .wh-speed[hidden], body.waze-home .wh-report[hidden] { display: none !important; }
.wh-menu { position: fixed; z-index: 14; top: calc(var(--sat) + 10px); left: calc(var(--sal) + var(--gut)); width: 60px; height: 60px; border: 0; border-radius: 16px;
  background: #2A2C31; color: #fff; place-items: center; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); -webkit-tap-highlight-color: transparent; }
.wh-btn { position: fixed; z-index: 14; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 50%; background: none; place-items: center;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35)); -webkit-tap-highlight-color: transparent; }
.wh-btn img { width: 60px; height: 60px; display: block; grid-area: 1 / 1; transition: transform .25s linear; }
.wh-btn .wz-mute { grid-area: 1 / 1; }
.wh-sound.off .wz-mute { display: block; }
.wh-sound.off img { opacity: .75; }
.wh-compass { top: calc(var(--sat) + 82px); left: calc(var(--sal) + var(--gut)); }
.wh-sound { top: calc(var(--sat) + 10px); right: calc(var(--sar) + var(--gut)); }
.wh-menu:active, .wh-btn:active, .wh-report:active { transform: scale(.94); }
.wh-speed { position: fixed; z-index: 14; left: calc(var(--sal) + var(--gut)); bottom: calc(var(--sheet-h, 300px) + var(--inset) + 12px);
  width: 72px; height: 72px; border-radius: 50%; background: #141518; box-shadow: 0 4px 12px rgba(0, 0, 0, .35), inset 0 0 0 3px #3A3E46;
  align-content: center; justify-items: center; color: #fff; }
.wh-speed b { font-size: 30px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.wh-speed small { font-size: 11px; font-weight: 600; color: #A9AEB8; }
.wh-street { position: fixed; z-index: 14; left: 50%; transform: translateX(-50%); bottom: calc(var(--sheet-h, 300px) + var(--inset) + 18px);
  max-width: calc(100vw - 2 * (var(--gut) + 92px)); padding: 10px 18px; border-radius: 26px; background: #000; color: #fff;
  font-size: 19px; font-weight: 700; line-height: 1.15; text-align: center; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); overflow: hidden; }
.wh-report { position: fixed; z-index: 14; right: calc(var(--sar) + var(--gut)); bottom: calc(var(--sheet-h, 300px) + var(--inset) + 12px);
  width: 72px; height: 72px; border: 0; border-radius: 20px; background: #4A3D12; place-items: center; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); -webkit-tap-highlight-color: transparent; }
/* Sheet */
body.waze-home .home-sheet { background: var(--wh-bg); -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--wh-text); box-shadow: 0 -2px 16px rgba(0, 0, 0, .35); }
body.waze-home .home-sheet > .grabber { background: var(--wh-bg); }
body.waze-home .home-sheet > .grabber::before { background: var(--wh-grab); }
body.waze-home .home-sheet #btnSettings { display: none; }
body.waze-home .home-sheet .search-field { flex: 1; height: 56px; border-radius: 28px; background: var(--wh-field); color: var(--wh-sub); font-size: 21px; padding: 0 20px; gap: 12px; box-shadow: none; }
body.waze-home .home-sheet .search-field .sf-ic { color: var(--wh-sub); }
body.waze-home .home-sheet .sec-row:has(+ #favRow) { display: none; }
body.waze-home .home-sheet .fav-row { gap: 10px; margin: 14px -16px 4px; padding: 2px 16px 4px; }
body.waze-home .home-sheet .fav { flex: none; flex-direction: row; align-items: center; gap: 10px; width: auto; min-width: 0; height: 56px; padding: 0 18px;
  border: 1.5px solid var(--wh-chip); border-radius: 16px; background: transparent; color: var(--wh-text); }
body.waze-home .home-sheet .fav b { font-size: 19px; font-weight: 700; color: var(--wh-text); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.waze-home .home-sheet .fav small { display: none; }
body.waze-home .home-sheet .fav-c { width: 30px; height: 30px; background: none !important; box-shadow: none; color: var(--fc, #fff); }
body.waze-home .home-sheet .fav.add b, body.waze-home .home-sheet .fav.add .fav-c { color: var(--wh-accent); }
body.waze-home .home-sheet #recentsTitle .sec-title { font-size: 15px; font-weight: 500; color: var(--wh-sub); letter-spacing: 0; }
body.waze-home .home-sheet #recentsMore { color: var(--wh-accent); font-size: 15px; }
body.waze-home .home-sheet .recents.group { background: transparent; box-shadow: none; border-radius: 0; }
body.waze-home .home-sheet .rrow, body.waze-home .home-sheet .rrow-main { background: var(--wh-bg); }
body.waze-home .home-sheet .rrow + .rrow { border-top: 1px solid var(--wh-line); }
body.waze-home .home-sheet .rrow-main { padding: 14px 4px; gap: 18px; }
body.waze-home .home-sheet .rrow-ic { background: none; color: var(--wh-ic); width: 32px; height: 32px; }
body.waze-home .home-sheet .rrow-t b { font-size: 19px; font-weight: 700; color: var(--wh-text); }
body.waze-home .home-sheet .rrow-t small { font-size: 16px; color: var(--wh-sub); }
body.waze-home .home-sheet .banner { color: var(--ink); }
@media (orientation: portrait) and (max-width: 719px) {
  body.waze-home .home-sheet { left: 0; right: 0; bottom: 0; border-radius: 24px 24px 0 0; padding-left: calc(var(--sal) + 16px); padding-right: calc(var(--sar) + 16px); padding-bottom: max(var(--sab), 12px); }
}
body.waze-home .home-sheet .sheet-top { background: var(--wh-bg); }
body.waze-home .home-sheet .fav { height: 54px; padding: 0 14px; gap: 8px; border-radius: 14px; }
body.waze-home .home-sheet .fav b { font-size: 18px; }
body.waze-home .home-sheet .fav-c { width: 26px; height: 26px; }
body.waze-home .wh-speed, body.waze-home .wh-street, body.waze-home .wh-report { --inset: 0px; }

/* 2.62.2 One Waze palette for every sheet and menu (flag ui.wazeHome): neutral greys instead of the brand navy,
   and the place / route sheets sit full width at the bottom like the home sheet. */
:root[data-theme="dark"] body.waze-home { --canvas: #17181B; --surface: #2A2C31; --surface-2: #3A3C41; --surface-3: #4A4D53;
  --glass: #1F2024; --glass-strong: #1F2024; --menu-bg: #2A2C31; --line: #34363B; --sheet-head-bg: #1F2024; }
:root:not([data-theme="dark"]) body.waze-home { --glass: #FFFFFF; --glass-strong: #FFFFFF; --sheet-head-bg: #FFFFFF; }
@media (orientation: portrait) and (max-width: 719px) {
body.waze-home :is(.place-sheet, .plan-sheet) { left: 0; right: 0; bottom: 0; border-radius: 24px 24px 0 0; -webkit-backdrop-filter: none; backdrop-filter: none;
  padding-left: calc(var(--sal) + 16px); padding-right: calc(var(--sar) + 16px); padding-bottom: max(var(--sab), 12px); }
}
body.waze-home :is(.home-sheet, .place-sheet, .plan-sheet) > .grabber { background: var(--wh-bg); }
body.waze-home :is(.home-sheet, .place-sheet, .plan-sheet) > .grabber::before { background: var(--wh-grab); }

/* 2.62.3 Waze: the street you are on as a black tooltip right under the car. */
.user-street { position: absolute; left: 50%; top: calc(50% + 30px); transform: translateX(-50%); width: max-content; max-width: 210px;
  padding: 8px 16px; border-radius: 22px; background: #000; color: #fff; font-size: 18px; font-weight: 700; line-height: 1.15; text-align: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35); white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.user-street[hidden] { display: none; }

/* 2.62.4 Waze type scale (measured from Waze screenshots, iPhone points).
   Maneuver card: distance 25 / street 28 / «затем» 20. Trip bar (portrait): arrival 29 bold centred, «28 мин • 35 км» 20 below.
   Street tooltip 20. Home sheet: search 22, chips 20, recents 21 / 17. Landscape: distance 26 / street 30, bar 33 / 21. */
body.waze-ui .m-dist { font-size: 25px; font-weight: 600; }
body.waze-ui .m-road { font-size: 28px; font-weight: 700; line-height: 1.1; }
body.waze-ui .m-title { font-size: 20px; }
body.waze-ui .m-then { font-size: 20px; }
@media (orientation: portrait) {
  body.waze-ui .dock-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 0; row-gap: 2px; padding: 2px 0 6px; }
  body.waze-ui .dw-stat { flex-direction: row; align-items: baseline; gap: 5px; }
  body.waze-ui .dw-stat:nth-child(1) { flex-basis: 100%; justify-content: center; }
  body.waze-ui .dw-stat:nth-child(1) small { display: none; }
  body.waze-ui .dw-stat:nth-child(1) b { font-size: 29px; font-weight: 700; }
  body.waze-ui .dw-stat:nth-child(2) b, body.waze-ui .dw-stat:nth-child(3) b,
  body.waze-ui .dw-stat:nth-child(2) small, body.waze-ui .dw-stat:nth-child(3) small { font-size: 20px; font-weight: 500; color: #fff; }
  body.waze-ui .dw-stat:nth-child(3)::before { content: '•'; font-size: 20px; color: #fff; margin: 0 10px; }
}
.user-street { font-size: 20px; }
body.waze-home .home-sheet .search-field { font-size: 22px; }
body.waze-home .home-sheet .fav b { font-size: 20px; }
body.waze-home .home-sheet .rrow-t b { font-size: 21px; }
body.waze-home .home-sheet .rrow-t small { font-size: 17px; }
.wh-street { font-size: 20px; }
@media (max-height: 520px) and (orientation: landscape) {
  body.waze-ui .m-dist { font-size: 26px; }
  body.waze-ui .m-road { font-size: 30px; }
  body.waze-ui .dw-stat:first-child b { font-size: 33px; }
  body.waze-ui .dw-stat:nth-child(2) b, body.waze-ui .dw-stat:nth-child(3) b,
  body.waze-ui .dw-stat:nth-child(2) small, body.waze-ui .dw-stat:nth-child(3) small { font-size: 21px; }
}

/* 2.62.5 Waze «затем» strip: attached under the maneuver card on a lighter band, cyan word + the next arrow. */
.m-then-strip { display: none; }
body.waze-ui .m-then-strip:not([hidden]) { display: flex; align-items: center; gap: 14px; margin-top: -8px; padding: 8px 18px 10px;
  background: #1E2C47; border-radius: 0 0 var(--r-banner, 22px) var(--r-banner, 22px); pointer-events: auto; color: #fff; }
:root[data-theme="dark"] body.waze-ui .m-then-strip:not([hidden]) { background: #25272D; }
body.waze-ui .nav-top:has(.m-then-strip:not([hidden])) .maneuver-card { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.mts-t { font-size: 20px; font-weight: 600; color: var(--wz-route, #2F7DF6); }
.mts-ic { display: grid; color: #fff; }
:root[data-theme="dark"] body.waze-ui .maneuver-card { background: #0E0F12; }

/* 2.63.1 UX fixes (screenshots 01.11): the trip bar is one surface — no lighter header block inside it;
   Waze bar colour; the street tooltip never wider than the gap between the corner controls. */
.dock { --sheet-head-bg: transparent; }
body.waze-ui .dock { background: #1C1D21; }
body.waze-ui .dock .dock-row { background: transparent; }
.user-street { max-width: min(220px, calc(100vw - 2 * (var(--gut, 16px) + 96px))); }

/* 3.2 hybrid map (flag map.native): the native map shows through a transparent page; the web map
   element keeps its size (camera maths read it) but draws nothing; HTML markers ride on top. */
html.native-map, html.native-map body { background: transparent !important; }
html.native-map #map { visibility: hidden; }
#nativeMarkers { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
#nativeMarkers > * { pointer-events: none; }

/* 2.64.7 Day / night for the driving cards (report 01.11 «сейчас день — а он в тёмной теме»):
   the trip bar and the road-event card follow the interface theme — white by day, as Waze; dark at night.
   The maneuver card stays dark in both, as in Waze. */
:root:not([data-theme="dark"]) .dock {
  --glass-strong: rgba(255, 255, 255, .97); --surface: #FFFFFF; --surface-2: rgba(118, 118, 128, .12);
  --ink: #1F2430; --muted: rgba(31, 36, 48, .62); --muted-2: rgba(31, 36, 48, .3); --line: rgba(31, 36, 48, .12);
  --glass-edge: rgba(0, 0, 0, .06); --green: #248A3D; --orange: #C25400;
  background: #FFFFFF; color: var(--ink); box-shadow: 0 -2px 18px rgba(0, 0, 0, .14);
}
:root:not([data-theme="dark"]) body.waze-ui .dock { background: #FFFFFF; }
:root:not([data-theme="dark"]) .dock > .grabber::before, :root:not([data-theme="dark"]) .dock .grabber { --muted-2: rgba(31, 36, 48, .25); }
:root:not([data-theme="dark"]) .dock .dw-stat small { color: var(--muted); }
:root:not([data-theme="dark"]) body.waze-ui .dock .dw-stat b,
:root:not([data-theme="dark"]) body.waze-ui .dock .dw-stat:first-child b { color: var(--ink); }
:root:not([data-theme="dark"]) .hazard.hz-dock { background: #FFFFFF; color: #1F2430; box-shadow: 0 10px 30px rgba(0, 0, 0, .18), inset 0 0 0 .5px rgba(0, 0, 0, .06); }
:root:not([data-theme="dark"]) .hazard.hz-dock .hz-text span { color: rgba(31, 36, 48, .62); }
:root:not([data-theme="dark"]) body.waze-ui .dock .dw-stat small,
:root:not([data-theme="dark"]) body.waze-ui .dock .dw-stat::before { color: var(--ink); }

/* 2.66.0 Walking and cycling use the same Waze layout as driving (report 01.11 «в пешеходном режиме
   старый интерфейс»). 2.67: on foot the speedometer (walking pace) and the event button are back, with the walk events. */
body.waze-ui.walk-mode .m-icon { border-right: 0; padding-right: 0; }
body.waze-ui.walk-mode .m-icon .ic g { stroke-width: inherit; }
.report-grid.walk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 4px; }
/* Walk events: the drawn disc is the whole tile, larger (no extra navy ring). */
.report-grid.walk-grid .rt-c.art { width: 64px; height: 64px; background: transparent; box-shadow: 0 4px 12px rgba(0, 0, 0, .22); }
.report-grid.walk-grid .rt-c.art .ic-img { width: 64px; height: 64px; }
.report-grid.walk-grid .report-tile { min-width: 0; }
.report-grid.walk-grid .report-tile span:last-child { font-size: 12.5px; line-height: 1.2; -webkit-hyphens: manual; hyphens: manual; overflow-wrap: anywhere; }