/* All colors, radii, spacing and shadows come from tokens.css (generated from design/TOKENS.json). */
@font-face { font-family: Inter; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Inter; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-cyrillic-wght-normal.woff2) format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: Inter; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 15px; line-height: 1.25; letter-spacing: -0.1px;
  color: var(--c-text-primary); background: var(--c-surface-base); font-weight: 500; overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--c-accent-primary); outline-offset: 2px; }
#map { position: fixed; inset: 0; background: var(--c-surface-field); }
#ui { position: fixed; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }
.icon { width: 24px; height: 24px; flex: none; } /* geometry, stroke width and caps come from the Figma export, not CSS */

.pill { position: absolute; top: var(--margin); left: var(--margin); width: min(400px, calc(100% - 2 * var(--margin))); height: 56px; /* G1: 400 x 56, radius 28, SemiBold 16 */
  display: flex; align-items: center; gap: var(--s-md); padding: 0 var(--s-lg); background: var(--c-surface-raised); border-radius: var(--r-pill);
  box-shadow: var(--elev-1); font-size: 16px; font-weight: 600; text-align: left; }
.pill .icon { color: var(--c-accent-primary); }

.panel { position: absolute; top: var(--margin); left: var(--margin); bottom: var(--margin); width: min(var(--panel-w), calc(100% - 2 * var(--margin)));
  display: flex; flex-direction: column; gap: var(--s-md); padding: var(--s-lg); background: var(--c-surface-raised); border-radius: var(--panel-r); box-shadow: var(--elev-1); overflow: auto; }
@media (max-width: 1100px) { .panel { width: min(var(--panel-w-tablet), calc(100% - 2 * var(--margin))); } }
@media (max-width: 640px) { .panel { top: 32%; left: 0; right: 0; bottom: 0; width: auto; border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--elev-2); } }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-md); }
.panel-head h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.3px; }

.round { width: var(--touch); height: var(--touch); border-radius: var(--r-pill); display: grid; place-items: center; background: var(--c-surface-raised); box-shadow: var(--elev-1); }
.round.flat { background: var(--c-surface-field); box-shadow: none; }
.fab .round, .zoom button { width: 52px; height: 52px; } /* G2 */
.fab { position: absolute; right: var(--margin); bottom: var(--margin); display: flex; flex-direction: column; gap: var(--s-sm); align-items: flex-end; }
.zoom { display: flex; flex-direction: column; border-radius: var(--r-pill); background: var(--c-surface-raised); box-shadow: var(--elev-1); }
.zoom button { display: grid; place-items: center; }

.field { display: flex; align-items: center; gap: var(--s-md); min-height: var(--touch); padding: 0 var(--s-lg); background: var(--c-surface-field); border-radius: var(--r-md); }
.field.typed { background: var(--c-surface-raised); box-shadow: inset 0 0 0 2px var(--c-accent-primary); } /* frame only while there is text (W02); empty = no frame (W08) */
.field input:focus-visible { outline: none; }
.field input::-webkit-search-cancel-button { display: none; }
.field .clear { width: 28px; height: 28px; display: grid; place-items: center; flex: none; margin-right: -6px; } .field .clear .icon { width: 20px; height: 20px; color: var(--c-text-primary); }
.field input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: inherit; height: var(--touch); }
.field .icon { color: var(--c-text-tertiary); }
.row { display: flex; align-items: center; gap: var(--s-md); min-height: var(--touch); width: 100%; text-align: left; padding: var(--s-sm) 0; }
.row .ico, .addr .ico { width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--c-accent-soft); color: var(--c-accent-primary); display: grid; place-items: center; flex: none; }
.row .ico.field, .addr .ico.field { background: var(--c-surface-field); color: var(--c-text-primary); } .row .ico .icon, .addr .ico .icon { width: 20px; height: 20px; }
.row .txt, .addr .txt { flex: 1; min-width: 0; }
.ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .dist { flex: none; font-size: 13px; font-weight: 600; color: var(--c-text-secondary); } .row .val { flex: none; font-size: 13px; font-weight: 600; color: var(--c-text-secondary); } .row > .icon { width: 20px; color: var(--c-text-tertiary); }
.row.place { padding: 10px 0; } .row.place .title { font-size: 15px; }
#search-body { display: flex; flex-direction: column; gap: var(--s-sm); flex: 1; min-height: 0; } #search-body > .list { flex: 1; min-height: 0; overflow: auto; }
.res-card { margin-top: auto; flex: none; display: flex; flex-direction: column; gap: var(--s-sm); padding: var(--s-lg); border-radius: var(--r-lg); background: var(--c-surface-field); }
.res-card .title { font-size: 15px; } .res-actions { display: flex; gap: var(--s-md); margin-top: var(--s-xs); } .res-actions .btn:not(.text) { min-width: 120px; } .res-actions .btn.text { flex: 1; }
.addr { display: flex; align-items: center; gap: var(--s-md); }
.title { font-weight: 600; } .sub { color: var(--c-text-secondary); font-size: 13px; overflow-wrap: anywhere; }
.section { color: var(--c-text-secondary); font-size: 13px; font-weight: 600; margin-top: var(--s-sm); } /* G4: normal case */

.shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-sm); }
.chip { display: inline-flex; align-items: center; gap: var(--s-sm); white-space: nowrap; }
.chip .icon { width: 18px; height: 18px; }
.shortcuts .row { background: var(--c-surface-field); border-radius: var(--r-md); padding: var(--s-sm) var(--s-md); }

.btn { min-height: var(--touch); padding: 0 var(--s-xl); border-radius: var(--r-md); font-weight: 600; background: var(--c-accent-primary); color: var(--c-text-on-accent); }
.btn.secondary { background: var(--c-accent-soft); color: var(--c-accent-primary); }
.btn.text { background: none; color: var(--c-accent-primary); }
.btn[disabled] { opacity: .6; cursor: default; }
.btn.loading::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 8px; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.banner { display: flex; align-items: center; gap: var(--s-md); padding: var(--s-md) var(--s-lg); border-radius: var(--r-md); }
.banner.info { background: var(--c-accent-soft); } .banner.warn { background: var(--c-status-warn-soft); } .banner.error { background: var(--c-status-danger-soft); }
.banner .txt { flex: 1; } .banner .link { color: var(--c-accent-primary); font-weight: 600; min-height: var(--touch); padding: 0 var(--s-sm); }
/* W01c: white card to the right of the pill: height 56, radius 20, alert icon in a 40 circle (status/warn-soft), title 15, subtitle 13, action at the right */
.map-banner { position: absolute; top: var(--margin); left: calc(var(--margin) + 400px + var(--s-lg)); width: min(480px, calc(100% - 400px - 3 * var(--margin))); min-height: 56px; display: flex; align-items: center; gap: var(--s-md); padding: 8px; border-radius: var(--r-lg); box-shadow: var(--elev-1); background: var(--c-surface-raised); }
.map-banner .txt { flex: 1; min-width: 0; } .map-banner .title { font-size: 15px; font-weight: 600; } .map-banner .sub { font-size: 13px; font-weight: 500; }
.map-banner .mb-ico { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--c-status-warn-soft); color: var(--c-status-warn); display: grid; place-items: center; } .map-banner .mb-ico .icon { width: 22px; height: 22px; }
.map-banner .link { color: var(--c-accent-primary); font-weight: 600; font-size: 14px; min-height: 40px; padding: 0 var(--s-md); }
@media (max-width: 900px) { .map-banner { top: calc(var(--margin) + 56px + var(--s-sm)); left: var(--margin); width: min(400px, calc(100% - 2 * var(--margin))); } }

.empty { display: flex; flex-direction: column; align-items: center; gap: var(--s-sm); padding: var(--s-3xl) var(--s-lg); text-align: center; color: var(--c-text-secondary); }
.empty .title { color: var(--c-text-primary); }
.skel { height: 44px; border-radius: var(--r-md); background: linear-gradient(90deg, var(--c-surface-field), var(--c-accent-soft), var(--c-surface-field)); background-size: 200% 100%; animation: sh 1.2s linear infinite; margin-bottom: var(--s-sm); }
@keyframes sh { to { background-position: -200% 0; } }

.route { display: block; width: 100%; text-align: left; padding: var(--s-md) var(--s-lg); border-radius: var(--r-md); background: var(--c-surface-field); border: 2px solid transparent; }
.route.sel { background: var(--c-accent-soft); border-color: var(--c-accent-primary); }
.route .big { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; } .route .name { color: var(--c-text-secondary); margin-left: var(--s-sm); font-size: 13px; }

.seg { display: flex; background: var(--c-surface-field); border-radius: var(--r-md); padding: 3px; }
.seg button { flex: 1; min-height: 38px; border-radius: var(--r-sm); font-weight: 600; color: var(--c-text-secondary); }
.seg button[aria-pressed="true"] { background: var(--c-surface-raised); color: var(--c-text-primary); box-shadow: var(--elev-1); }
.toggle { width: 48px; height: 28px; border-radius: var(--r-pill); background: var(--c-border-subtle); position: relative; flex: none; }
.toggle[aria-checked="true"] { background: var(--c-accent-primary); }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .15s; }
.toggle[aria-checked="true"]::after { transform: translateX(20px); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-sm); }
.chip { min-height: 36px; padding: 0 var(--s-lg); border-radius: var(--r-pill); background: var(--c-surface-field); font-weight: 600; }
.chip[aria-pressed="true"] { background: var(--c-accent-soft); color: var(--c-accent-primary); } /* selected: brand-soft fill */
textarea { width: 100%; min-height: 88px; padding: var(--s-md); border-radius: var(--r-md); border: 0; background: var(--c-surface-field); font: inherit; color: inherit; resize: vertical; }
.toast { position: absolute; top: var(--margin); left: 50%; transform: translateX(-50%); padding: var(--s-md) var(--s-xl); border-radius: var(--r-pill); background: var(--c-status-ok-soft); color: var(--c-status-ok); font-weight: 600; box-shadow: var(--elev-1); }
/* W05: place marker at the map centre: blue circle 40, crosshair icon, white outline */
.center-pin { position: fixed; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; background: var(--c-accent-primary); color: var(--c-text-on-accent); border: 3px solid #fff; display: grid; place-items: center; box-shadow: var(--elev-1); pointer-events: none !important; }
.center-pin .icon { width: 22px; height: 22px; }
/* W02 result pins (numbered), W03 time labels on the route lines */
.pin-result { display: block; width: 36px; height: 36px; padding: 0; filter: drop-shadow(0 6px 10px rgba(16,20,38,.18)); } .pin-result:not(.sel) svg { transform: scale(.67); } .pin-result.sel { z-index: 2; }
/* Time badge (CD): height 26, padding 5/10, radius 999, SemiBold 13; selected = accent/primary fill + on-accent text, others = surface/raised + text/primary */
.route-time { height: 26px; display: flex; align-items: center; padding: 5px 10px; border-radius: 999px; background: var(--c-surface-raised); color: var(--c-text-primary); font-size: 13px; font-weight: 600; line-height: 1; box-shadow: var(--elev-1); white-space: nowrap; } .route-time.sel { background: var(--c-accent-primary); color: var(--c-text-on-accent); }
/* Start marker (Figma "Start"): 20x20, accent/primary, white outline 4, Elevation/1 */
.route-origin { width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%; background: var(--c-accent-primary); border: 4px solid #fff; box-shadow: var(--elev-1); pointer-events: none; }
/* W04 layer chips (CD): height 40, padding 10/16/10/14, gap 8, icon 20, label SemiBold 15; selected = accent/soft + accent/primary, unselected = surface/field + text/primary */
.chips.layers { gap: 8px; } .chip.layer { height: 40px; min-height: 40px; padding: 10px 16px 10px 14px; gap: 8px; font-size: 15px; } .chip.layer .icon { width: 20px; height: 20px; }
.explainer { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--c-overlay-scrim) 45%, transparent); }
.explainer .card { width: min(440px, calc(100% - 2 * var(--margin))); padding: var(--s-2xl); border-radius: var(--r-xl); background: var(--c-surface-raised); display: flex; flex-direction: column; gap: var(--s-md); box-shadow: var(--elev-1); }
.explainer h2 { margin: 0; font-size: 20px; letter-spacing: -0.4px; }
.ex-ico { width: 56px; height: 56px; border-radius: 50%; background: var(--c-surface-field); color: var(--c-accent-primary); display: grid; place-items: center; } .ex-ico .icon { width: 28px; height: 28px; }
.attrib { position: absolute; left: var(--margin); bottom: 4px; font-size: 11px; color: var(--c-text-tertiary); pointer-events: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- W07 active navigation: design/assets/specs/W07-LAYOUT.md (Figma 22:7492). Sizes in px as in the mockup. ---------- */
.panel.nav { padding: 16px 0; gap: 12px; border-radius: 20px; }
.panel.nav > * { flex: none; }
.nv-wrap { padding: 0 16px; }
.panel.nav > .nv-wrap:has(.nv-speed) { margin-top: auto; }
.nv-banner { display: flex; align-items: center; gap: 16px; width: 100%; min-height: 104px; padding: 16px 20px; border-radius: 20px; background: var(--c-nav-banner); color: var(--c-nav-on-banner); box-shadow: var(--elev-1); }
.nv-banner > .icon { width: 56px; height: 56px; color: var(--c-nav-arrow); }
.nv-banner > .icon * { vector-effect: non-scaling-stroke; stroke-width: 3px; } /* contour 3 at 56 px */
.nv-banner-txt { min-width: 0; }
.nv-dist { font-size: 44px; font-weight: 700; line-height: 1.08; }
.nv-street { font-size: 22px; font-weight: 600; line-height: 1.08; overflow-wrap: anywhere; }
.nv-alert { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 76px; padding: 14px 18px 14px 14px; border-radius: 20px; background: var(--c-status-danger-banner); color: #fff; box-shadow: var(--elev-1); }
.nv-alert-ico { width: 48px; height: 48px; flex: none; border-radius: 50%; background: #fff; color: var(--c-status-danger-banner); display: grid; place-items: center; }
.nv-alert-ico .icon { width: 26px; height: 26px; }
.nv-alert-title { font-size: 16px; font-weight: 600; line-height: 1.25; } .nv-alert-sub { font-size: 13px; font-weight: 600; line-height: 1.25; }
.nv-head { padding: 0 16px; font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--c-text-secondary); }
.nv-list { display: flex; flex-direction: column; }
.nv-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 16px; }
.nv-row-ico { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--c-surface-field); color: var(--c-text-primary); display: grid; place-items: center; }
.nv-row-ico .icon { width: 20px; height: 20px; }
.nv-row-txt { flex: 1; min-width: 0; } .nv-row-title { font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--c-text-primary); overflow-wrap: anywhere; }
.nv-row-dist { font-size: 13px; font-weight: 600; line-height: 1.25; color: var(--c-text-secondary); white-space: nowrap; }
.nv-speed { display: flex; align-items: center; gap: 12px; min-height: 72px; }
.limit-shadow { display: block; width: 64px; height: 64px; flex: none; border-radius: 50%; box-shadow: var(--elev-1); } .limit-sign { display: block; }
.nv-chip { width: 72px; height: 72px; flex: none; border-radius: 20px; background: var(--c-surface-raised); box-shadow: var(--elev-1); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.nv-chip-val { font-size: 36px; font-weight: 700; line-height: 1.08; } .nv-chip-val.over { color: var(--c-status-danger); }
.nv-chip-unit { font-size: 11px; font-weight: 600; line-height: 1.25; color: var(--c-text-secondary); }
.nv-eta { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 12px 14px 12px 20px; border-radius: 28px; background: var(--c-surface-field); }
.nv-eta-txt { flex: 1; min-width: 0; } .nv-eta-main { font-size: 22px; font-weight: 700; line-height: 1.08; color: var(--c-text-primary); }
.nv-eta-sub { font-size: 13px; font-weight: 500; line-height: 1.25; color: var(--c-text-secondary); }
.nv-btn { width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--c-surface-raised); color: var(--c-text-primary); }
.nv-btn .icon { width: 22px; height: 22px; } .nv-btn.end { background: var(--c-status-danger-soft); color: var(--c-status-danger); }
.nv-row-sub { font-size: 13px; font-weight: 500; line-height: 1.25; color: var(--c-text-secondary); }