:root {
  color-scheme: light;
  --ink: #152539;
  --muted: #506174;
  --line: #d9e2eb;
  --paper: #ffffff;
  --canvas: #f2f5f8;
  --accent: #174a84;
  --accent-surface: #eaf3ff;
  --lime: #d9f99d;
  --orange: #ff7a45;
  font: -apple-system-body;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); min-height: 100vh; }
button, input, select { font: inherit; }
button {
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.78);
  background: linear-gradient(155deg, rgba(255,255,255,.82), rgba(233,246,238,.50));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.96), inset 0 -1px 2px rgba(26,58,39,.12), 0 4px 14px rgba(20,34,24,.17);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  backdrop-filter: blur(14px) saturate(145%);
}
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.app-shell { width: min(100%, 430px); min-height: 100vh; margin: 0 auto; padding: calc(20px + env(safe-area-inset-top)) 18px calc(56px + env(safe-area-inset-bottom)); background: var(--canvas); }
.network-status { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 7px; margin-bottom: 8px; padding: 9px 12px; border-radius: 13px; background: #fff1e9; color: #793a24; font-size: 0.75rem; }
.network-status[hidden] { display: none; }
.network-status > span { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.network-status small { justify-self: end; color: #9b624e; }
.eyebrow { margin: 0 0 8px; font-size: 0.6875rem; font-weight: 800; letter-spacing: .14em; color: #66806f; }
.search-panel { position: relative; z-index: 10; background: var(--paper); padding: 12px; border: 1px solid var(--line); border-radius: 20px; }
.navigation-header { display: none; }
.field { min-height: 64px; border-radius: 12px; background: var(--canvas); border: 1px solid var(--line); }
.location-field { display: flex; align-items: center; padding: 12px 14px; gap: 12px; }
.field-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--accent); background: var(--lime); font-size: 1.375rem; }
.field-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.field-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 750; }
.field-copy strong { overflow-wrap: anywhere; font-size: 0.9375rem; }
.radius-pill { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; background: #e8eee8; color: var(--accent); font-size: 0.6875rem; font-weight: 800; }
.text-button { color: var(--accent); font-size: 0.8125rem; font-weight: 750; padding: 8px 10px; border-radius: 11px; }
.language-picker { position: relative; flex: 0 0 auto; }
.language-picker summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 48px;
  min-height: 44px;
  padding-inline: 5px;
  border-radius: 10px;
  background: var(--accent-surface);
  color: var(--accent);
  font-size: .75rem;
  font-weight: 850;
  list-style: none;
  cursor: pointer;
}
.language-picker summary::-webkit-details-marker { display: none; }
.language-picker summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.language-options {
  position: absolute;
  inset-block-start: calc(100% + 5px);
  inset-inline: 0;
  z-index: 1;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 5px 18px #15253924;
}
.language-picker .language-options button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  padding: 5px 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  text-align: center;
  font-size: .75rem;
  font-weight: 750;
}
.language-picker .language-options button:is(:hover, [aria-current="true"]) {
  background: var(--accent-surface);
  color: var(--accent);
}
.language-options button[aria-current="true"] { box-shadow: inset 0 0 0 1px var(--accent); }
.route-search-fields { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px; }
.input-field { min-width: 0; margin-top: 8px; display: flex; flex-direction: column; justify-content: center; padding: 10px 14px; }
.input-field input { width: 100%; min-width: 0; border: 0; padding: 5px 22px 0 0; outline: none; background: transparent; color: var(--ink); font-size: 1.125rem; font-weight: 720; }
.departure-picker select { width: 100%; min-width: 0; margin-top: 5px; color: var(--ink); background: transparent; border: 0; font-size: 0.875rem; font-weight: 650; text-overflow: ellipsis; }
.departure-picker select:disabled { color: var(--muted); }
.input-field:focus-within { border-color: var(--accent); background: var(--paper); }
.primary-button { width: 100%; min-height: 58px; padding: 0 18px; border-radius: 16px; display: flex; justify-content: space-between; align-items: center; color: var(--accent); font-weight: 750; }
.primary-button:active { transform: translateY(1px); }
.show-more-routes { justify-content: center; margin-top: 12px; }
.show-more-routes[hidden] { display: none; }
.map-panel { position: relative; height: 216px; margin-top: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #dce6dd; transition: height .28s ease, box-shadow .28s ease; }
.map-panel.route-open { height: min(62vh, 470px); box-shadow: 0 18px 45px rgba(28,49,34,.14); }
.map-frame { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; border: 0; background: #dce6dd; }
.map-frame[hidden] { display: none; }
.map-canvas { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.map-canvas.active { pointer-events: auto; }
.maplibregl-ctrl-attrib { max-width: 68%; font-size: 0.5rem !important; }
.maplibregl-map { font-family: inherit; background: #dce6dd; }
.user-arrow { width: 38px; height: 42px; display: grid; place-items: center; background: transparent; filter: drop-shadow(0 3px 4px rgba(20,34,24,.42)); transform-origin: 50% 50%; }
.user-arrow[hidden] { display: none; }
.user-arrow svg { display: block; width: 100%; height: 100%; overflow: visible; }
.user-arrow path { fill: #173f2a; stroke: #fff; stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.navigation-route-arrow { width: 18px; height: 22px; display: grid; place-items: center; background: transparent; filter: drop-shadow(0 2px 2px rgba(20,34,24,.32)); }
.navigation-route-arrow svg { display: block; width: 100%; height: 100%; overflow: visible; }
.navigation-route-arrow path { fill: #d9f99d; stroke: #173f2a; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.stop-dot { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 3px solid white; border-radius: 12px; background: #142218; color: white; box-shadow: 0 4px 12px rgba(20,34,24,.28); font-size: 0.75rem; font-weight: 850; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
.destination-dot { width: 18px; height: 18px; border: 4px solid white; border-radius: 50%; background: #d9f99d; box-shadow: 0 3px 10px rgba(20,34,24,.3); }
.route-arrow { display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid white; border-radius: 50%; background: #173f2a; color: white; box-shadow: 0 3px 10px rgba(20,34,24,.28); font-size: 1.25rem; font-weight: 900; }
.map-fallback { position: absolute; z-index: 3; inset: 0; display: grid; place-content: center; justify-items: center; gap: 5px; color: #506257; background: radial-gradient(circle at 25% 20%, rgba(255,255,255,.8), transparent 24%), linear-gradient(135deg, #e3ebe2 25%, #d3dfd5 25%, #d3dfd5 50%, #e3ebe2 50%, #e3ebe2 75%, #d3dfd5 75%); background-size: auto, 44px 44px; text-align: center; }
.map-fallback[hidden] { display: none; }
.map-fallback span:last-child { max-width: 220px; font-size: 0.6875rem; line-height: 1.35; }
.map-pin { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50% 50% 50% 10%; transform: rotate(-45deg); background: var(--accent); color: var(--lime); }
.map-pin::first-letter { transform: rotate(45deg); }
.map-footer { position: absolute; z-index: 5; inset: auto 10px 24px; display: grid; justify-items: start; gap: 6px; pointer-events: none; }
.map-scope { overflow-wrap: anywhere; padding: 7px 10px; border-radius: 999px; background: var(--paper); backdrop-filter: blur(10px); font-size: 0.6875rem; font-weight: 800; }
.map-offline-badge { position: absolute; z-index: 5; top: 10px; right: 10px; padding: 7px 10px; border-radius: 999px; background: rgba(20,34,24,.86); color: white; backdrop-filter: blur(10px); font-size: 0.625rem; font-weight: 800; }
.map-offline-badge[hidden] { display: none; }
.speed-signs { position: absolute; z-index: 6; top: 14px; left: 14px; display: grid; gap: 10px; pointer-events: none; }
.speed-limit-badge { width: max(52px, 3.25rem); height: max(52px, 3.25rem); display: grid; place-content: center; justify-items: center; border: 5px solid #e33131; border-radius: 50%; background: rgba(255,255,255,.96); color: #111; box-shadow: 0 5px 18px rgba(20,34,24,.25); }
.speed-limit-badge[hidden] { display: none; }
.speed-limit-unknown { border-color: #737a76; }
.speed-limit-badge strong { font-size: 1.25rem; line-height: .9; font-variant-numeric: tabular-nums; }
.speed-limit-badge span { margin-top: 3px; font-size: 0.5rem; font-weight: 800; }
.map-controls {
  position: absolute;
  z-index: 5;
  right: 10px;
  bottom: 10px;
  display: none;
  gap: 10px;
  transition: opacity .22s ease, visibility .22s;
}
.map-controls button {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  color: var(--accent);
  font-size: 1.625rem;
  line-height: 1;
  font-weight: 550;
  border-color: var(--line);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: blur(3px) saturate(135%);
  backdrop-filter: blur(3px) saturate(135%);
  box-shadow: 0 3px 12px #0e284025;
}
#mapCompass, #zoomIn, #zoomOut { touch-action: manipulation; }
#mapCompass { display: grid; place-items: center; }
#mapCompass[aria-pressed="true"]:not(:disabled) { background: var(--accent-surface); border-color: var(--accent); }
#mapCompass:disabled { opacity: .6; cursor: default; }
.compass-needle { transform: rotate(var(--compass-rotation, 0deg)); transform-origin: 14px 14px; }
.map-controls button:active { transform: scale(.94); }
#navigationMode { display: grid; place-items: center; margin-bottom: 7px; }
#navigationMode svg { width: 27px; height: 27px; }
.map-controls button.active {
  background: var(--accent-surface);
  border-color: var(--accent);
}
body.navigation-active.map-controls-idle .map-controls { opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .map-controls { transition: none; } }
.results { margin-top: 20px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.scope-note { margin: -8px 0 14px; color: var(--muted); font-size: 0.75rem; }
h2 { font-size: 1.5625rem; letter-spacing: -.035em; margin: 0; }
.count-pill { min-width: 34px; min-height: 28px; display: grid; place-items: center; padding: 0 10px; border-radius: 999px; background: var(--accent-surface); color: var(--accent); font-size: 0.8125rem; font-weight: 750; }
.route-list { display: grid; gap: 10px; }
.route-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 12px; cursor: pointer; transition: transform .18s, border-color .18s; }
.route-card:hover { transform: translateY(-2px); border-color: #bac6bc; }
.route-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.route-badge { min-width: 52px; min-height: 52px; max-width: 4.25rem; padding: 4px; border-radius: 15px; display: flex; align-items: center; justify-content: center; overflow-wrap: anywhere; background: var(--accent-surface); color: var(--accent); font-size: 1.125rem; font-weight: 850; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; }
.route-info { min-width: 0; }
.route-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.route-info h3 { margin: 0; font-size: 0.9375rem; overflow-wrap: anywhere; }
.route-status { padding: 3px 6px; border-radius: 6px; background: #eef1ed; color: var(--muted); font-size: 0.5625rem; font-weight: 800; text-transform: uppercase; }
.route-status.past { color: #9b3e1f; background: #fff0e9; }
.route-direction { margin: 4px 0 7px; color: var(--muted); overflow-wrap: anywhere; font-size: 0.8125rem; }
.route-meta { color: var(--muted); font-size: 0.75rem; display: flex; flex-wrap: wrap; gap: 6px; }
.departure { display: flex; flex-direction: column; text-align: center; align-items: center; width: max(84px, 5.4rem); padding: 8px 5px; border: 0; background: var(--accent-surface); color: var(--ink); border-radius: 12px; pointer-events: none; }
.departure.past { background: #ffe8e6; color: #8b2f28; }
.departure.soon { background: #def3d8; color: #185b2b; }
.departure:active { background: #edf1ec; }
.departure strong { font-size: 1.3125rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.departure span { color: var(--muted); margin-top: 3px; font-size: 0.6875rem; overflow-wrap: anywhere; }
.empty { padding: 30px 18px; border: 1px dashed #c8d1c9; border-radius: 18px; color: var(--muted); text-align: center; }
.loading { animation: pulse 1.2s ease-in-out infinite alternate; }
.data-credit { margin-top: 22px; color: #7d8981; font-size: 0.625rem; line-height: 1.5; text-align: center; }
body.navigation-active { min-height: 0; overflow: hidden; background: var(--canvas); }
body.navigation-active .app-shell {
  position: fixed;
  inset: var(--navigation-viewport-top, 0px) 0 0;
  width: 100%;
  height: var(--navigation-viewport-height, auto);
  min-height: 0;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
body.navigation-active .network-status,
body.navigation-active .search-panel,
body.navigation-active .results,
body.navigation-active .data-credit { display: none; }
body.navigation-active .navigation-header {
  position: relative;
  z-index: 30;
  padding: calc(8px + env(safe-area-inset-top, 0px)) calc(12px + env(safe-area-inset-right, 0px)) 8px calc(12px + env(safe-area-inset-left, 0px));
  display: grid;
  grid-template-columns: 44px 32px minmax(0, max-content) max-content max-content minmax(0, 1fr);
  grid-template-areas: "back logo region route departure destination";
  align-items: center;
  gap: 2px 8px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
#closeNavigation { grid-area: back; width: 44px; height: 44px; background: var(--accent-surface); border: 0; box-shadow: none; border-radius: 13px; color: var(--ink); font-size: 1.5rem; }
.navigation-logo { grid-area: logo; width: 32px; height: 32px; }
#navigationRegion { grid-area: region; }
#navigationRoute { grid-area: route; text-align: center; }
#navigationDeparture { grid-area: departure; text-align: center; }
#navigationDestination { grid-area: destination; }
#navigationRegion, #navigationDestination { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#navigationRegion, #navigationRoute, #navigationDeparture, #navigationDestination { white-space: nowrap; }
#navigationRegion, #navigationRoute, #navigationDeparture { font-size: .875rem; }
.navigation-route-number { padding: 4px 6px; border-radius: 7px; background: var(--canvas); }
#navigationDeparture, #navigationDestination { color: var(--muted); }
#navigationDestination { font-size: .75rem; }
body.navigation-active .map-panel { position: relative; z-index: 20; min-height: 0; width: 100%; height: auto; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
body.navigation-active .map-controls { display: grid; right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
@media (max-height: 430px) and (orientation: landscape) {
  body.navigation-active .map-controls { grid-auto-flow: column; bottom: calc(86px + env(safe-area-inset-bottom)); }
  body.navigation-active #navigationMode { margin: 0 7px 0 0; }
}
body.navigation-active .map-footer {
  left: calc(10px + env(safe-area-inset-left, 0px));
  right: calc(84px + env(safe-area-inset-right, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}
body.navigation-active .speed-signs { left: calc(14px + env(safe-area-inset-left, 0px)); }
@keyframes pulse { to { opacity: .55; } }
@media (max-width: 520px) {
  .app-shell { padding-top: calc(16px + env(safe-area-inset-top)); }
  .route-card { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 12px; }
  .route-badge { min-width: 48px; min-height: 48px; }
  .route-status { display: none; }
  .location-field .field-copy { flex-basis: 160px; }
  .network-status { grid-template-columns: auto 1fr; }
  .network-status small { grid-column: 2; justify-self: start; }
}

.join-route { pointer-events: auto; min-height: 44px; padding: 8px 14px; border-radius: 12px; color: var(--accent); font: inherit; font-size: 0.8125rem; font-weight: 750; }

body.navigation-active .town-speed-badge { animation: town-speed-pulse 1s ease-in-out infinite alternate; }
@keyframes town-speed-pulse { from { transform: scale(1); } to { transform: scale(1.12); box-shadow: 0 0 0 5px rgba(227,49,49,.24); } }
@media (prefers-reduced-motion: reduce) { body.navigation-active .town-speed-badge { animation: none; } }

.settings-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 11px;
  color: var(--accent);
  font-size: 1.4375rem;
  line-height: 1;
}
.location-field { gap: 8px; }
.location-field .field-copy { flex: 1 1 0; }
.location-field .field-icon { flex: 0 0 34px; width: 34px; height: 34px; }
.settings-dialog {
  width: min(calc(100% - 32px), 400px);
  max-height: calc(100% - 48px);
  padding: 20px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 20px 70px #10191555;
}
.settings-dialog::backdrop { background: #10191566; backdrop-filter: blur(4px); }
.settings-heading, .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-heading h2 { font-size: 1.375rem; }
.settings-theme { min-width: 0; margin: 18px 0 0; padding: 0; border: 0; }
.settings-theme legend { padding: 0; margin-bottom: 8px; color: var(--muted); font-size: 0.8125rem; font-weight: 700; }
.settings-row.theme-slider { justify-content: flex-start; gap: 12px; }
.theme-slider:has(:disabled) { color: var(--muted); }
.theme-slider :disabled { opacity: .65; }
.settings-dialog input { accent-color: var(--accent); }
.settings-row { min-height: 48px; border-bottom: 1px solid var(--line); }
.settings-row input { width: 18px; height: 18px; margin: 0; }
.settings-row .settings-switch {
  appearance: none;
  position: relative;
  width: 42px;
  height: 25px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--line);
}
.settings-switch::before { content: ''; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0004; }
.settings-row .settings-switch:checked { background: #207753; border-color: #207753; }
.settings-switch:checked::before { transform: translateX(17px); }
.settings-links { display: grid; gap: 8px; margin-top: 15px; }
.settings-links a { display: block; padding: 10px 12px; color: var(--accent); border: 1px solid var(--line); border-radius: 11px; font-weight: 650; text-decoration: none; }
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e3e9f1;
  --muted: #a8b5c5;
  --line: #414d5d;
  --paper: #1b222d;
  --canvas: #131922;
  --field-surface: #242d3a;
  --accent: #a9ccfa;
  --accent-surface: #293d59;
}
html[data-theme="dark"] button:where(:not(.map-controls button, .language-options button)) {
  background: var(--field-surface);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: none;
}
html[data-theme="dark"] :is(.field:not(.location-field), .route-status) { background: var(--field-surface); }
html[data-theme="dark"] .input-field:focus-within { background: var(--paper); }
html[data-theme="dark"] .input-field input::placeholder { color: var(--muted); opacity: 1; }
html[data-theme="dark"] .map-pin { background: var(--accent-surface); color: var(--accent); }
html[data-theme="dark"] .data-credit { color: var(--muted); }
html[data-theme="dark"] :is(.map-panel, .map-fallback, .map-frame, .maplibregl-map) { background: #202b3a; color: var(--muted); }
html[data-theme="dark"] .settings-dialog::backdrop { background: #0c111bb3; }
html[data-theme="dark"] .settings-row .settings-switch:checked { background: #3d6394; border-color: #7296c5; }
html[data-theme="dark"] .empty { border-color: var(--line); }
html[data-theme="dark"] :is(.route-status.past, .departure.past) { background: #492b34; color: #ffd3d6; }
html[data-theme="dark"] .departure.soon { background: var(--accent-surface); color: var(--accent); }
html[data-theme="dark"] :is(.departure.past, .departure.soon) span { color: inherit; }

.legal-page { width: min(100%, 720px); min-height: 100vh; margin: auto; padding: 28px 20px 50px; background: var(--canvas); line-height: 1.65; }
.legal-page nav { margin-bottom: 16px; }
.legal-page time { color: var(--muted); }
.legal-summary { padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.legal-page h1 { line-height: 1.2; margin: 0 0 14px; }
.legal-page h2 { font-size: 1.1875rem; margin-top: 22px; }
.legal-page a { color: var(--accent); overflow-wrap: anywhere; }
html:not([lang="ru"]) .legal-ru, html[lang="ru"] .legal-de { display: none; }

@media (max-width: 400px) {
  .location-field { padding-inline: 10px; gap: 6px; }
}

.shift-mode { justify-content: center; min-height: 44px; margin-top: 8px; border: 1px solid var(--line); }
.shift-panel { margin-top: 14px; padding: 10px; background: var(--paper); border: 1px solid var(--line); border-radius: 24px; }
.shift-date { margin-top: 0; min-height: 56px; }
.shift-date input { padding-right: 0; }
.shift-row { display: grid; grid-template-columns: minmax(72px, .7fr) minmax(0, 1.5fr) auto; gap: 6px; align-items: stretch; }
.shift-row .input-field { padding-inline: 8px; }
.shift-row input { padding-right: 0; }
.shift-row-actions { display: flex; flex-direction: column; justify-content: center; gap: 4px; margin-top: 8px; }
.shift-row-actions button { min-width: 40px; min-height: 36px; border-radius: 10px; font-size: 1.1875rem; color: var(--accent); }
.shift-actions { display: grid; gap: 8px; margin-top: 12px; }
.shift-actions button { justify-content: center; min-height: 48px; }
.shift-actions .shift-start { background: var(--accent); color: var(--paper); box-shadow: none; }
html[data-theme="dark"] .shift-actions .shift-start { background: var(--accent); color: var(--canvas); }
#shiftMessage { margin: 10px 4px 0; color: var(--muted); font-size: 0.8125rem; }
body.shift-editor .route-search-fields,
body.shift-editor .results,
body.shift-editor .data-credit,
body.navigation-active .shift-panel { display: none; }
body.shift-editor:not(.navigation-active) .map-panel { position: absolute; top: 0; left: 50%; width: min(100%, 430px); transform: translateX(-50%); visibility: hidden; pointer-events: none; }

.close-shift-trip { pointer-events: auto; min-height: 44px; padding-inline: 16px; color: var(--ink); }
.close-shift-trip[hidden] { display: none; }

.location-field { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; padding: 0; border: 0; background: transparent; }
.header-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.header-actions > button { min-width: 44px; min-height: 44px; background: var(--accent-surface); border-color: transparent; box-shadow: none; }
.location-field .city-button {
  align-items: start; justify-content: center; padding: 4px 6px; min-height: 48px;
  border: 1px solid transparent; border-radius: 12px; text-align: left;
  background: var(--paper); box-shadow: none;
}
.city-button-name { display: flex; align-items: center; gap: 4px; color: var(--ink); }
.city-button-name strong { min-width: 0; }
.city-button-name svg { flex: 0 0 16px; color: var(--accent); }
.city-selection { margin: 8px 0 12px; color: var(--muted); overflow-wrap: anywhere; }
.city-selection:empty { display: none; }
.route-search-fields .input-field { padding-inline: 10px; }
.city-dialog .primary-button { min-height: 46px; justify-content: center; }
.city-dialog .input-field { min-height: 62px; }
.city-results { display: grid; gap: 5px; max-height: min(42vh, 300px); overflow-y: auto; margin-top: 8px; }
.city-results button { min-height: 44px; text-align: left; padding: 7px 12px; border-radius: 10px; color: var(--ink); }
.city-results button[aria-current="true"] { border: 1px solid var(--accent); font-weight: 750; }
#cityMessage { color: var(--muted); font-size: 0.8125rem; margin: 9px 2px; }

.header-logo { width: 44px; height: 44px; border-radius: 12px; }
.navigation-logo { border-radius: 9px; }
.settings-row .settings-switch { flex-shrink: 0; }


.search-panel, .results, .shift-panel, .app-shell { container-type: inline-size; }
.field-label, .primary-button, .settings-heading h2, .settings-row, .city-results button,
.settings-links a, .section-heading h2, .shift-trip-summary {
  overflow-wrap: anywhere;
}
.settings-heading form, .settings-row input { flex-shrink: 0; }
.settings-row, .primary-button { padding-block: 8px; }
.input-field input { padding-right: 0; }
.shift-trip-summary { margin-top: 6px; color: var(--muted); font-size: .8125rem; line-height: 1.35; }
.shift-trip-summary:empty { display: none; }

@container (max-width: 21rem) {
  .route-card { grid-template-columns: auto minmax(0, 1fr); }
  .route-card .departure { grid-column: 2; justify-self: start; }
  .shift-row { grid-template-columns: minmax(0, 1fr) auto; }
  .shift-row .departure-picker { grid-column: 1 / -1; grid-row: 2; }
  .shift-row-actions { grid-column: 2; grid-row: 1; flex-direction: row; align-items: center; }
}

@container (max-width: 17rem) {
  .location-field { grid-template-columns: 44px minmax(0, 1fr); }
  .location-field .city-button { grid-column: 1 / -1; grid-row: 2; }
}

@container (max-width: 20rem) {
  body.navigation-active .navigation-header {
    grid-template-columns: 44px 32px minmax(0, 1fr) max-content max-content;
    grid-template-areas: "back logo region route departure";
    gap: 5px;
  }
  #navigationDestination { display: none; }
}

#countrySelect { min-width: 0; max-width: 75%; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 7px; }

.navigation-notice { margin: 10px 4px 2px; color: var(--muted); font-size: .875rem; overflow-wrap: anywhere; }

.approach-stop { color: var(--muted); overflow-wrap: anywhere; }
.approach-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.approach-actions .primary-button { justify-content: center; min-height: 44px; }