:root {
  --accent: #4560d4;
  --accent-dark: #3549ab;
  --ink: #1b2135;
  --dim: #6b7280;
  --line: #cfd6e8;
  --line-soft: #e5e8f2;
  --bg-soft: #f6f8fd;
  --danger: #b3261e;
  --radius: 10px;
  --shadow: 0 8px 28px rgba(27, 33, 53, .16);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { font-family: var(--font); color: var(--ink); }

#map { position: absolute; inset: 0; }
#map canvas { outline: none; }

body.globe-on #map {
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="260" height="260"><g fill="white"><circle cx="18" cy="34" r="1" opacity=".8"/><circle cx="76" cy="12" r=".7" opacity=".5"/><circle cx="132" cy="58" r=".9" opacity=".7"/><circle cx="203" cy="26" r=".6" opacity=".45"/><circle cx="241" cy="88" r="1.1" opacity=".85"/><circle cx="49" cy="103" r=".6" opacity=".4"/><circle cx="167" cy="119" r=".8" opacity=".6"/><circle cx="222" cy="158" r=".6" opacity=".5"/><circle cx="97" cy="150" r="1" opacity=".75"/><circle cx="28" cy="196" r=".7" opacity=".55"/><circle cx="140" cy="205" r=".6" opacity=".45"/><circle cx="190" cy="232" r=".9" opacity=".7"/><circle cx="66" cy="243" r=".6" opacity=".5"/><circle cx="249" cy="221" r=".7" opacity=".6"/></g></svg>') repeat,
    radial-gradient(ellipse at 50% 42%, #101b3a 0%, #0a1026 45%, #04060f 100%);
}

.maplibregl-ctrl button.globe-toggle { color: #333; }
.maplibregl-ctrl button.globe-toggle svg { display: block; margin: auto; }
.maplibregl-ctrl button.globe-toggle.on {
  background: var(--accent);
  color: #fff;
  border-radius: inherit;
}

.maplibregl-ctrl button.home-btn { color: #333; }
.maplibregl-ctrl button.home-btn svg { display: block; margin: auto; }

button { font-family: var(--font); }


:root { --panel-l: max(12px, env(safe-area-inset-left)); --panel-t: calc(12px + env(safe-area-inset-top)); --panel-w: 355px; }
.panel {
  position: absolute; top: var(--panel-t); left: var(--panel-l); z-index: 30;
  width: var(--panel-w); max-width: calc(100vw - 24px);
  max-height: calc(100% - 12px - var(--panel-t));
  display: flex; flex-direction: column;
  background: #fff; border-radius: 14px; box-shadow: var(--shadow);
  overflow: hidden;
}

.panel-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px;
  padding: 10px 12px 0 14px;
}

.brand {
  display: flex; align-items: center; gap: 6px;
  color: var(--accent); text-decoration: none; white-space: nowrap;
}
.brand b { color: var(--ink); font-size: 15px; }
.brand span { color: var(--dim); font-size: 15px; }
.brand-logo { height: 24px; width: auto; display: block; }

.tabs-row { display: flex; align-items: center; gap: 2px; flex-basis: 100%; order: 3; margin: 2px 0 0 -9px; }
.tabs { display: flex; gap: 2px; }
.tab-tool {
  width: 30px; height: 28px; margin-left: 2px; border: 0; border-radius: 7px; background: none;
  color: var(--dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.tab-tool:hover { color: var(--ink); background: var(--bg-soft); }
.tab-tool.on { color: #fff; background: var(--accent); }
.tab {
  border: 0; background: none; padding: 8px 9px; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--dim);
  border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--ink); }
.tab.on { color: var(--accent); border-bottom-color: var(--accent); }

.head-tools { display: flex; align-items: center; gap: 5px; margin-left: auto; order: 2; }
.head-tool-wrap { position: relative; }
.head-tool {
  width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
  color: var(--accent); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.head-tool:hover { background: var(--bg-soft); }
.head-tool.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.head-tool.danger { color: var(--danger); }
.head-tool.danger:hover { border-color: var(--danger); background: #fdf1f0; }
.head-tool.labeled { width: auto; gap: 5px; padding: 0 10px 0 8px; font: 600 12.5px var(--font); }
.tool-menu {
  position: fixed; z-index: 90; min-width: 124px;
  background: #fff; border: 1px solid var(--line); border-radius: 9px; padding: 4px;
  box-shadow: 0 6px 18px rgba(27, 33, 53, .14); display: flex; flex-direction: column;
}
.tool-menu[hidden] { display: none; }
.tool-menu button {
  border: 0; background: none; text-align: left; padding: 7px 10px; border-radius: 6px;
  font: 600 12.5px var(--font); color: var(--ink); cursor: pointer;
}
.tool-menu button:hover, .tool-menu button.on { background: var(--bg-soft); color: var(--accent); }

.panel-toggle {
  border: 0; background: none; cursor: pointer; padding: 0;
  width: 26px; height: 26px; position: relative; flex: none; order: 2; margin-left: auto;
}
.panel-toggle::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px;
  border-top: 2px solid var(--dim); border-left: 2px solid var(--dim);
  transform: translate(-50%, -25%) rotate(45deg);
}
.panel.collapsed .panel-toggle::before { transform: translate(-50%, -75%) rotate(225deg); }

.lang-switch {
  order: 2; margin-left: auto; display: inline-flex; align-items: center; gap: 1px; padding: 1px;
  border: 1px solid var(--line); border-radius: 7px; background: #fff;
}
.lang-switch + .panel-toggle { margin-left: 0; }
.lang-btn {
  border: 0; background: none; cursor: pointer; min-width: 26px; padding: 3px 6px; border-radius: 5px;
  font: 600 11px/14px var(--font); letter-spacing: .04em; color: var(--dim);
}
.lang-btn:hover { color: var(--ink); background: var(--bg-soft); }
.lang-btn.on { color: var(--accent); background: #eef1fb; cursor: default; }
.lang-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (pointer: coarse) { .lang-btn { min-width: 34px; padding: 7px 8px; } }
.i18n-wait .panel, .i18n-wait .layer-switcher { visibility: hidden; animation: i18n-show 0s linear 3s forwards; }
@keyframes i18n-show { to { visibility: visible; } }

.panel.collapsed .panel-body,
.panel.collapsed .panel-foot { display: none; }

.panel-body { overflow-y: auto; padding: 10px 14px 6px 14px; flex: 1; }

.panel-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px; border-top: 1px solid var(--line-soft); background: var(--bg-soft);
}
.panel-foot { gap: 8px !important; }
.panel-foot .btn { padding: 7px 9px; }
.foot-btn { gap: 5px; }
.foot-link { color: var(--dim); font-size: 12px; text-decoration: none; white-space: nowrap; }
.foot-link:hover { color: var(--accent); }
.foot-link:last-child { margin-left: auto; }
.panel-foot { flex-wrap: wrap; row-gap: 3px; }
.foot-link:last-child { line-height: 16px; margin-bottom: -2px; }


.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 8px; padding: 7px 12px; font: 600 12.5px var(--font);
  cursor: pointer;
}
.btn:hover { background: var(--bg-soft); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-dark); }
.btn.ghost { color: var(--accent); }
.btn.danger { color: var(--danger); }
.btn.mini { padding: 3px 10px; font-size: 12px; }
.btn.tool.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn .ico { font-size: 11px; opacity: .85; }

.row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }

.status { font-size: 11.5px; color: var(--dim); padding: 7px 1px; min-height: 18px; }
.status-action {
  border: 0; padding: 0; background: none; font: inherit; font-weight: 600; color: var(--accent);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.status-action:hover { color: var(--accent-dark); }
.status-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 3px; }
.hint {
  margin: 8px 0; padding: 8px 11px; border-radius: 8px;
  background: #fff6de; border: 1px solid #f0dfae; color: #6d5710; font-size: 12.5px;
}
.hint-actions { display: flex; gap: 6px; margin-top: 7px; }
.status.warn {
  margin: 8px 0; padding: 8px 11px; border-radius: 8px; min-height: 0;
  background: #fff6de; border: 1px solid #f0dfae; color: #6d5710;
}
.note { font-size: 11.5px; color: var(--dim); margin: 6px 0 10px; }

select.pref {
  appearance: auto; border: 1px solid var(--line); background: #fff; color: var(--accent);
  border-radius: 8px; padding: 6px 8px; font: 600 12.5px var(--font); cursor: pointer;
}


.field { position: relative; display: flex; align-items: center; }
.field-ico { position: absolute; left: 10px; color: var(--dim); pointer-events: none; }
.field input {
  width: 100%; padding: 10px 32px 10px 32px;
  border: 1px solid var(--line); border-radius: 9px; font: 14px var(--font);
}
.field input:focus { outline: 2px solid rgba(69, 96, 212, .35); border-color: var(--accent); }
.field-clear {
  position: absolute; right: 6px; border: 0; background: none; cursor: pointer;
  font-size: 17px; color: var(--dim); padding: 4px 8px;
}
.field-clear:hover { color: var(--ink); }

.search-row { display: flex; gap: 7px; align-items: stretch; }
.search-row .field { flex: 1; }
.search-row .btn { flex: none; }

.sugg {
  position: fixed; z-index: 90;
  margin: 0; padding: 0; list-style: none;
  background: #fff; border: 1px solid var(--line); border-radius: 9px;
  box-shadow: 0 6px 18px rgba(27, 33, 53, .14); max-height: 262px; overflow: auto;
}
.sugg li { padding: 8px 11px; cursor: pointer; font-size: 12.5px; display: flex; flex-direction: column; }
.sugg li + li { border-top: 1px solid var(--line-soft); }
.sugg li:hover, .sugg li.on { background: var(--bg-soft); }
.sugg li b { font-size: 13px; }
.sugg li span { color: var(--dim); font-size: 11.5px; }

.results { margin: 0; padding: 0; list-style: none; }
.results li {
  border-radius: 8px;
  display: flex; align-items: center; gap: 4px;
}
.results li:hover { background: var(--bg-soft); }
.results li.on { background: var(--bg-soft); box-shadow: inset 2px 0 0 var(--accent); }
.results .res-main {
  flex: 1; min-width: 0; padding: 8px 4px 8px 10px; border: 0; background: none; cursor: pointer;
  display: flex; flex-direction: column; gap: 1px; text-align: left; font: inherit; color: inherit; border-radius: 8px;
}
.results .res-main:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.results li b { font-size: 13px; }
.results li span { color: var(--dim); font-size: 11.5px; }
.res-nav {
  flex: none; width: 32px; height: 32px; margin-right: 6px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: #e8ecfa; color: var(--accent);
  transition: background .12s, color .12s;
}
.res-nav:hover, .res-nav:focus-visible { background: var(--accent); color: #fff; }
.res-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse) { .res-nav { width: 38px; height: 38px; } }


.stops { margin: 2px 0; padding: 0; list-style: none; }
.stops li {
  display: flex; align-items: center; gap: 7px; margin-bottom: 7px; position: relative;
}
.stops li.stop-insert { margin: -4px 0 3px 0; height: 16px; }
.stops li.stop-insert button {
  margin-left: 22px; width: 18px; height: 18px; border-radius: 50%; padding: 0;
  border: 1px solid var(--line); background: #fff; color: var(--accent);
  font: 700 13px/16px var(--font); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.stops li.stop-insert button:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.stops li.stop-insert span { display: none; }
.stop-grip {
  flex: none; width: 12px; color: var(--line); cursor: grab; touch-action: none; user-select: none;
  font-size: 14px; line-height: 1; letter-spacing: -3px; text-align: center;
}
.stop-grip:hover { color: var(--dim); }
.stops li.dragging { opacity: .45; }
.stops li.drop-before { box-shadow: 0 -3px 0 var(--accent); }
.stops li.drop-after { box-shadow: 0 3px 0 var(--accent); }

.btn.ghost:disabled { color: var(--dim); cursor: default; }
.stops li.picking .stop-input input { outline: 2px dashed var(--accent); }
.stop-token {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  color: #fff; font: 700 12px/24px var(--font); text-align: center;
}
.stop-input { position: relative; flex: 1; min-width: 0; }
.stop-input input {
  width: 100%; padding: 8px 26px 8px 10px; text-overflow: ellipsis;
  border: 1px solid var(--line); border-radius: 8px; font: 13px var(--font);
}
.stop-input input:focus { outline: 2px solid rgba(69, 96, 212, .35); border-color: var(--accent); }
.stop-pick, .stop-remove {
  flex: none; border: 1px solid var(--line); background: #fff; border-radius: 7px;
  height: 30px; cursor: pointer; color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
}
.stop-pick { gap: 3px; padding: 0 7px; font: 600 10.5px var(--font); }
.stop-pick:hover { background: var(--bg-soft); }
.stop-remove { width: 30px; }
.stop-remove { color: var(--danger); font-size: 15px; }
.stop-field { position: relative; display: block; }
.stop-clear {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border: 0; background: none; border-radius: 50%;
  color: var(--dim); font-size: 16px; line-height: 1; cursor: pointer; padding: 0;
}
.stop-clear:hover { color: var(--ink); background: var(--bg-soft); }
.stops li.stop.bad .stop-input input { border-color: var(--danger); background: #fdf1f0; }
.stop-bad { display: none; margin: 3px 0 0 2px; font-size: 11px; font-weight: 600; color: var(--danger); }
.stops li.stop.bad .stop-bad { display: block; }
.stops li.stop.bad { align-items: flex-start; }
.stops li.stop.bad > .stop-grip, .stops li.stop.bad > .stop-token,
.stops li.stop.bad > .stop-pick, .stops li.stop.bad > .stop-remove { margin-top: 3px; }
.route-loop { margin: 0 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--accent); cursor: pointer; gap: 5px; white-space: nowrap; }
.route-actions { gap: 5px; flex-wrap: nowrap; }
.route-actions .route-loop { margin: 0 0 0 auto; }
.route-actions .btn { padding: 7px 9px; }
.route-actions select.pref { padding: 6px 4px 6px 8px; }
.stops li.stop-loopend { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.stops li.stop-loopend .stop-grip { visibility: hidden; }
.stops li.stop-loopend input { background: var(--bg-soft); color: var(--dim); border-style: dashed; cursor: default; }
.route-sub { font-size: 11.5px; color: var(--dim); margin-top: 2px; }
.rt-stop { flex-wrap: nowrap; }
.rt-dwell {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 3px;
  color: var(--dim); border: 1px solid var(--line); border-radius: 12px; padding: 1px 4px 1px 6px; background: #fff;
}
.rt-dwell.on { color: var(--accent); border-color: var(--accent); }
.rt-dwell select { border: 0; background: none; font: 600 11px var(--font); color: inherit; cursor: pointer; padding: 1px 0; }
.stop-pick { touch-action: none; }
.stop-pin-drag { position: fixed; z-index: 95; pointer-events: none; }
.stop-pin-drag .pin-shape { transform: scale(1.18); opacity: 1; }
.stop-pin-drag.off-map { opacity: .45; }
body.pin-dragging, body.pin-dragging * { cursor: grabbing !important; }
.route-actions .route-clear { margin-left: auto; border-color: transparent; background: none; padding: 7px 6px; gap: 5px; }
.route-actions .route-clear:hover { border-color: var(--danger); background: #fdf1f0; }
.route-optimize {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 5px 10px;
  margin: 2px 0 6px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 9px;
}
.opt-note { font-size: 11px; color: var(--dim); font-style: italic; line-height: 1.3; }
.opt-desc { grid-column: 1 / -1; font-size: 11.5px; line-height: 1.35; color: var(--dim); }
.stop-remove:hover { color: var(--danger); border-color: var(--danger); }

.route-summary {
  margin: 6px 0 10px; padding: 10px 12px; border: 1px solid var(--line-soft);
  border-radius: 9px; background: var(--bg-soft);
}
.route-total { display: flex; align-items: baseline; gap: 10px; }
.route-total b { font-size: 17px; }
.route-total span { color: var(--dim); font-size: 12.5px; }
.route-leg {
  display: flex; justify-content: space-between; font-size: 12px; color: var(--dim);
  padding-top: 5px; margin-top: 5px; border-top: 1px dashed var(--line-soft);
}
.leg-token { font-weight: 700; color: var(--ink); }

.route-legs { margin-top: 8px; }
.rt-stop { display: flex; align-items: center; gap: 8px; font-size: 12.5px; min-width: 0; }
.route-legs .stop-token { width: 20px; height: 20px; font: 700 11px/20px var(--font); }
.rt-addr { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-leg {
  font-size: 12px; color: var(--dim);
  margin: 2px 0 2px 9px; padding: 3px 0 3px 19px;
  border-left: 2px dashed var(--line-soft);
}
.rt-note { font-size: 11px; color: var(--dim); margin: 1px 0 0 28px; }

.stop-pin { width: 22px; height: 28px; cursor: grab; }
.pin-shape {
  position: absolute; left: 0; top: 0; width: 22px; height: 22px; box-sizing: border-box;
  border-radius: 50%; border: 2px solid #fff; background: var(--c);
  color: #fff; font: 700 11px/18px var(--font); text-align: center;
  opacity: .9; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
  transform-origin: 50% 125%; transition: transform .12s ease, opacity .12s ease;
}
.pin-shape::before, .pin-shape::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); }
.pin-shape::before { top: 17px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 10px solid #fff; }
.pin-shape::after { top: 17px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 7px solid var(--c); }
.stop-pin:hover .pin-shape { transform: scale(1.18); opacity: 1; }
.stop-pin:hover { z-index: 5; }
.stop-pin.at-dot { display: none; }
.z-low .pin-shape { transform: scale(.8); }
.z-low .stop-pin:hover .pin-shape { transform: scale(1); }
/* !important: .pin-shape kannab --c-d reasiseselt (style), ilma selleta jääks nõel oma värvi */
.stop-pin.bad .pin-shape { --c: #b3261e !important; opacity: 1; animation: badpulse 1.1s ease-in-out infinite; }
@keyframes badpulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(179, 38, 30, .40); }
  50% { box-shadow: 0 0 0 10px rgba(179, 38, 30, .12); }
}
@media (prefers-reduced-motion: reduce) {
  .stop-pin.bad .pin-shape { animation: none; box-shadow: 0 0 0 5px rgba(179, 38, 30, .35); }
}
.stop-ghost {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; background: #4560d4;
  color: #fff; font: 700 13px/16px var(--font); text-align: center; opacity: .75; pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35); box-sizing: border-box;
}


.draw-buttons .tool { flex: 1; justify-content: center; padding: 8px 4px; }

.draw-form {
  margin: 8px 0; padding: 11px 12px; border: 1px solid var(--line-soft);
  border-radius: 9px; background: var(--bg-soft);
}
.draw-form-title { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.frow { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12.5px; }
.frow > span { flex: none; width: 72px; color: var(--dim); }
.frow input[type="text"] {
  flex: 1; min-width: 0; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 7px; font: 13px var(--font);
}
.frow input[type="range"] { flex: 1; accent-color: var(--accent); }
.frow output { width: 34px; text-align: right; font-size: 12px; color: var(--dim); }
.frow.buttons { margin: 10px 0 0; }
.measure-out b { font-size: 13px; }
.coords-row { margin-bottom: 8px; }
.coords-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-bottom: 5px;
}
.coords-label { font-size: 12.5px; color: var(--dim); }
.coords-row input {
  display: block; width: 100%; box-sizing: border-box;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px;
  font: 13px ui-monospace, "SF Mono", Consolas, monospace;
}
.coords-row input:focus { outline: 2px solid rgba(69, 96, 212, .35); border-color: var(--accent); }
.mini-tab:disabled {
  color: #c3c8d4; cursor: not-allowed; background: var(--bg-soft);
}

.swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.swatch {
  width: 22px; height: 22px; border-radius: 6px; border: 2px solid transparent;
  cursor: pointer; padding: 0;
}
.swatch.on { border-color: var(--ink); box-shadow: 0 0 0 2px #fff inset; }

.restore-banner {
  margin: 8px 0; padding: 9px 11px; border-radius: 9px;
  background: var(--bg-soft); border: 1px solid var(--line-soft); font-size: 12.5px;
}
.restore-banner .restore-actions { display: flex; gap: 6px; margin-top: 7px; }

.list-title {
  margin: 12px 0 2px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: var(--dim);
}

.draw-list { margin: 4px 0; padding: 0; list-style: none; }
.draw-list .dot.measure { background: transparent; border: 2px dashed var(--accent); box-sizing: border-box; }
.draw-list li.editing { background: var(--bg-soft); border-radius: 8px; }
.mini-btn.save { color: #1a7f4e; border-color: #1a7f4e; font-weight: 700; }
.mini-btn.save:hover { background: #eaf6ef; color: #1a7f4e; border-color: #1a7f4e; }
.draw-list li {
  display: flex; align-items: center; gap: 9px; padding: 7px 6px;
  border-bottom: 1px solid var(--line-soft);
}
.draw-list li.empty { color: var(--dim); font-size: 12.5px; border: 0; }
.draw-list .dot { flex: none; width: 12px; height: 12px; border-radius: 4px; }
.draw-item-main { flex: 1; min-width: 0; cursor: pointer; display: flex; flex-direction: column; }
.draw-item-main b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draw-item-main span { font-size: 11.5px; color: var(--dim); }
.mini-btn {
  flex: none; border: 1px solid var(--line); background: #fff; border-radius: 6px;
  width: 26px; height: 26px; cursor: pointer; color: var(--dim); font-size: 13px;
}
.mini-btn:hover { color: var(--accent); border-color: var(--accent); }
.mini-btn.danger { color: var(--danger); display: inline-flex; align-items: center; justify-content: center; }
.mini-btn.danger:hover { color: var(--danger); border-color: var(--danger); background: #fdf1f0; }
.confirm-dialog { z-index: 95; }
.confirm-dialog .dialog { width: 380px; }


.measure-kind-row { align-items: center; }
.measure-what { font-size: 12.5px; color: var(--dim); }
.measure-kind { display: flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.mini-tab {
  border: 0; background: #fff; padding: 5px 10px; font: 600 12px var(--font);
  color: var(--dim); cursor: pointer;
}
.mini-tab + .mini-tab { border-left: 1px solid var(--line); }
.mini-tab.on { background: var(--accent); color: #fff; }


.layer-switcher {
  position: absolute; top: var(--panel-t); left: calc(var(--panel-l) + var(--panel-w) + 12px); z-index: 20;
  display: flex; gap: 6px;
}
.layer-btn {
  border: 1px solid var(--line); background: #fff; border-radius: 8px;
  padding: 6px 11px 6px 9px; font: 600 12.5px var(--font); color: var(--ink); cursor: pointer;
  box-shadow: 0 2px 8px rgba(27, 33, 53, .12);
  display: inline-flex; align-items: center; gap: 6px; line-height: 1.15;
}
.layer-btn svg { flex: none; color: var(--accent); }
.layer-btn.on svg { color: #fff; }
.layer-btn small { font-weight: 500; font-size: 9.5px; color: var(--dim); }
.layer-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.layer-btn.soon { color: var(--dim); cursor: default; }


.ctx-popup .maplibregl-popup-content { padding: 11px 12px 8px; border-radius: 12px; min-width: 250px; box-shadow: 0 8px 24px rgba(27, 33, 53, .18); }
.ctx-addr { font-weight: 700; font-size: 13px; line-height: 1.35; margin-bottom: 6px; padding-right: 14px; }
.ctx-addr.dim { color: var(--dim); font-weight: 500; }
.ctx-coords { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.ctx-copy {
  border: 0; background: none; text-align: left; cursor: pointer; padding: 2px 0;
  font: 12px ui-monospace, monospace; color: var(--ink);
}
.ctx-copy:hover { color: var(--accent); }
.ctx-copy small { color: var(--dim); font-family: var(--font); margin-right: 4px; }
.ctx-group { margin-top: 7px; }
.ctx-group-label {
  display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: var(--dim); margin-bottom: 4px;
}
.ctx-group { padding-top: 6px; border-top: 1px solid var(--line-soft); }
.ctx-list { display: flex; flex-direction: column; margin: 0 -4px; }
.ctx-row {
  display: flex; align-items: center; gap: 8px; border: 0; background: none; text-align: left;
  padding: 5px 6px; border-radius: 7px; font: 600 12.5px var(--font); color: var(--ink); cursor: pointer;
}
.ctx-row:hover { background: var(--bg-soft); color: var(--accent); }
.ctx-row .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ctx-row .ico { width: 9px; text-align: center; color: var(--dim); font-size: 10px; flex: none; }


.dialog-backdrop {
  position: fixed; inset: 0; z-index: 60; background: rgba(27, 33, 53, .45);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.dialog {
  background: #fff; border-radius: 13px; box-shadow: var(--shadow);
  width: 460px; max-width: 100%; padding: 14px 16px;
}
.dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dialog-close { border: 0; background: none; font-size: 20px; cursor: pointer; color: var(--dim); }
.check { display: flex; align-items: center; gap: 7px; font-size: 13px; margin-bottom: 8px; }
.check input { accent-color: var(--accent); }
#shareUrl {
  width: 100%; border: 1px solid var(--line); border-radius: 8px;
  font: 11.5px ui-monospace, monospace; padding: 8px; resize: none; color: var(--dim);
}


.dialog-text { margin: 0 0 12px; font-size: 13px; line-height: 1.45; color: var(--ink); }
.check small { color: var(--dim); font-size: 12px; }
.check.disabled { color: var(--dim); }
.btn:disabled { opacity: .55; cursor: default; }
.foot-btn.danger:disabled { color: var(--dim); opacity: .5; background: #fff; border-color: var(--line); }
.foot-btn.danger:disabled:hover { background: #fff; }
.btn.danger-bg:disabled:hover { background: var(--danger); }


.print-row { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; flex-wrap: wrap; }
.print-row > span:first-child { width: 64px; font-size: 13px; color: var(--dim); }
#printTitle {
  flex: 1; min-width: 160px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font: 14px var(--font);
}
#printTitle:focus { outline: 2px solid rgba(69, 96, 212, .35); border-color: var(--accent); }
.print-hint { font-size: 12px; color: var(--dim); margin-bottom: 10px; }
#printStatus { padding: 0 0 0 4px; min-height: 0; }
.print-offscreen { position: fixed; left: -100000px; top: 0; pointer-events: none; }
.print-sheet { display: none; color: #1b2135; font-family: system-ui, sans-serif; }
.print-sheet.measuring {
  display: flex; flex-direction: column; position: fixed; left: -100000px; top: 0; width: var(--ps-w, 277mm); visibility: hidden;
}
.ps-head { flex: none; display: flex; align-items: center; gap: 6mm; height: 14mm; }
.ps-logo { height: 7mm; width: auto; }
.ps-title { min-width: 0; font-size: 15pt; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-map {
  display: block; flex: 1 1 0; min-height: 0; width: 100%; object-fit: contain; object-position: center top;
  border: .2mm solid #8a90a5; box-sizing: border-box;
}
.ps-foot { flex: none; padding-top: 2mm; font-size: 8pt; line-height: 1.35; color: #3a4058; }
.ps-route {
  font-weight: 600; color: #1b2135; overflow: hidden; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.ps-meta, .ps-attr { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media print {
  html, body.printing { height: auto !important; overflow: visible !important; background: #fff !important; }
  html.printing, html.printing body.printing { height: 100% !important; margin: 0 !important; padding: 0 !important; }
  body.printing > *:not(.print-sheet) { display: none !important; }
  body.printing .print-sheet {
    display: flex !important; flex-direction: column; width: 100%; aspect-ratio: var(--ps-ar, 277 / 188); max-height: 100%;
    overflow: hidden; break-inside: avoid; page-break-inside: avoid;
  }
}
.btn.danger-bg { background: var(--danger); border-color: var(--danger); color: #fff; }

.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 70;
  background: var(--ink); color: #fff; border-radius: 9px;
  padding: 9px 16px; font-size: 13px; box-shadow: var(--shadow);
  width: max-content; max-width: calc(100vw - 32px); text-align: center; pointer-events: none;
}


.maplibregl-ctrl-group { border-radius: 9px !important; box-shadow: 0 2px 8px rgba(27, 33, 53, .16) !important; }
.maplibregl-popup-content { font-family: var(--font); }


@media (max-width: 700px) {
  .panel {
    top: auto; bottom: 0; left: 0; right: 0;
    width: 100%; max-width: 100%;
    border-radius: 16px 16px 0 0;
    max-height: 62vh;
    max-height: 62dvh;
    padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
  }
  .panel.collapsed { max-height: none; }
  .panel-head { padding-top: 8px; }
  .panel.collapsed .panel-head { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .panel-foot { padding-bottom: max(9px, env(safe-area-inset-bottom)); }
  .tabs-row { margin-left: -7px; }
  .tab { padding: 8px 7px; font-size: 12.5px; }
  .brand span { display: none; }

  .panel-toggle::before { transform: translate(-50%, -75%) rotate(225deg); }
  .panel.collapsed .panel-toggle::before { transform: translate(-50%, -25%) rotate(45deg); }

  .layer-switcher { bottom: auto; top: calc(12px + env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); gap: 5px; }
  .layer-btn { padding: 6px 8px 6px 7px; gap: 4px; font-size: 12px; }
  .layer-btn svg { width: 15px; height: 15px; }

  .maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right { bottom: var(--sheet-h, 0px); }
  .toast { top: calc(58px + env(safe-area-inset-top)); bottom: auto; }

  #map:not(.rotated) .maplibregl-ctrl-compass { display: none !important; }

  .field input, .stop-input input, .frow input[type="text"], #printTitle, select.pref, #shareUrl { font-size: 16px; }
}
@media (max-width: 370px) {
  .layer-btn:not(.on) .lname { display: none; }
  .layer-btn:not(.on) { padding: 6px 8px; }
}
@media (pointer: coarse) {
  .stop-grip { width: 22px; padding: 8px 0; }
  .stops li.stop-insert { height: 22px; }
  .stops li.stop-insert button { width: 24px; height: 24px; }
  .stop-clear { width: 30px; height: 30px; }
  .panel-toggle { width: 36px; height: 36px; }
  .mini-btn { width: 34px; height: 34px; }
  .tab-tool { width: 36px; height: 34px; }
}

.map-credit {
  position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); z-index: 2;
  font: 10.5px/1.3 var(--font); color: rgba(27, 33, 53, .55); white-space: nowrap; pointer-events: none;
  text-shadow: 0 0 2px rgba(255, 255, 255, .9), 0 0 2px rgba(255, 255, 255, .9);
}
.map-credit.open { z-index: 20; }
.map-credit .credit-info {
  pointer-events: auto; border: 0; background: none; padding: 0 2px; margin: 0; cursor: pointer;
  font: inherit; font-size: 12px; line-height: 1; color: inherit; vertical-align: -1px;
}
.map-credit .credit-info:hover, .map-credit .credit-info[aria-expanded="true"] { color: rgba(27, 33, 53, .9); }
.map-credit .credit-info:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 1px; border-radius: 3px; }
.credit-box {
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 24px); padding: 7px 10px 2px; white-space: normal; text-align: left;
  background: #fff; color: #1b2135; border-radius: 8px; box-shadow: 0 4px 18px rgba(0, 0, 0, .2);
  font: 11.5px/1.4 var(--font); text-shadow: none; pointer-events: auto;
}
.credit-box p { margin: 0 0 5px; }
.credit-box a { color: inherit; text-decoration: underline; }
.credit-box abbr { text-decoration: none; cursor: help; }
@media (max-width: 700px) {
  .map-credit { bottom: calc(var(--sheet-h, 0px) + 3px); font-size: 10px; }
  .maplibregl-ctrl-bottom-left .maplibregl-ctrl-scale { margin-bottom: calc(var(--credit-h, 14px) + 6px); }
}


.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

html, body { overscroll-behavior: none; }
.panel-body, .sugg { overscroll-behavior: contain; }

.sheet-handle { display: none; }
@media (max-width: 700px) {
  .sheet-handle { display: block; flex: none; position: relative; height: 18px; margin-bottom: -8px; cursor: grab; touch-action: none; }
  .sheet-handle::before {
    content: ""; position: absolute; left: 50%; top: 7px; width: 38px; height: 4px; margin-left: -19px;
    border-radius: 2px; background: #c3c9da;
  }
  .panel-head { touch-action: none; }
  .panel.full { height: calc(100vh - 52px); height: calc(100dvh - 52px - env(safe-area-inset-top)); max-height: none; }
  .panel.dragging { transform: translateY(var(--sheet-drag, 0px)); }
  body[data-draw-mode] #drawList, body[data-draw-mode] #tab-draw .draw-io, body[data-draw-mode] #tab-draw > .note { display: none; }
  .draw-form { padding: 8px 10px; margin: 6px 0; }
  .draw-form-title { margin-bottom: 5px; }
  .draw-form .frow { margin-bottom: 6px; }
}

.m-bar { display: none; }
body.m-focus .panel {
  position: fixed; top: var(--vv-top, 0px); bottom: auto; left: 0; right: 0; width: 100%; max-width: 100%;
  height: var(--vvh, 100%); max-height: none; border-radius: 0; transform: none; z-index: 80;
}
body.m-focus .panel-head, body.m-focus .panel-foot, body.m-focus .sheet-handle { display: none; }
body.m-focus .panel-body, body.m-focus .panel.collapsed .panel-body {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 2px; align-items: start; align-content: start;
  overflow: hidden; padding: 6px 14px 0;
}
body.m-focus .m-bar { display: flex; align-items: center; min-height: 44px; margin: -1px 0 0 -10px; }
body.m-focus .m-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.m-back {
  flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.m-back:active, .m-back:hover { background: var(--bg-soft); }
.m-back:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.m-title { font: 600 15px var(--font); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.m-focus .tab-page > * { display: none; }
body.m-focus #tab-search > .search-row { display: block; }
body.m-focus #tab-route > .stops { display: block; }
body.m-focus #stops > li:not(.m-active) { display: none; }
body.m-focus #stops > li.m-active { display: block; margin: 0; }
body.m-focus #stops > li.m-active > :not(.stop-input) { display: none; }
body.m-focus .search-row .btn { display: none; }
body.m-focus .search-row .field { display: block; }
body.m-focus .search-row .field-ico { top: 14px; }
body.m-focus .search-row .field-clear { top: 6px; }
body.m-focus .m-active .sugg {
  position: static; display: block; width: auto; margin: 8px -14px 0 -50px; border: 0; border-top: 1px solid var(--line-soft);
  border-radius: 0; box-shadow: none; overflow-y: auto;
}
body.m-focus .m-active .sugg[hidden] { display: none; }
body.m-focus .m-active .sugg li { padding: 12px 16px; min-height: 52px; justify-content: center; }
body.m-focus .m-active .sugg li b { font-size: 15.5px; }
body.m-focus .m-active .sugg li span { font-size: 13px; }
body.m-focus .toast { top: calc(var(--vv-top, 0px) + 60px); }

.stops .sugg li { align-items: stretch; gap: 1px; margin: 0; }
.sugg li.ac-extra { flex-direction: row; align-items: center; gap: 10px; }
.sugg li.ac-extra .ac-ico {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: #e8f0fe; color: #1a73e8;
}
.sugg li.ac-map .ac-ico { background: #eef1fb; color: var(--accent); }
.sugg li.ac-extra .ac-txt { display: flex; flex-direction: column; min-width: 0; }
.sugg li.ac-me b { color: #1a73e8; }
.sugg li.ac-extra + li:not(.ac-extra) { border-top: 1px solid var(--line); }
.sugg li.disabled { opacity: .55; cursor: default; }
.stop-input input.is-me {
  color: #1a73e8; font-weight: 600; padding-left: 30px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%231a73e8' fill-opacity='.18'/%3E%3Ccircle cx='8' cy='8' r='4.2' fill='%231a73e8' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat 9px 50% / 15px 15px;
}
.stop-input input.is-me:focus { color: var(--ink); font-weight: 400; }
.rt-addr.is-me { color: #1a73e8; font-weight: 600; }
.rt-me-addr { color: var(--dim); font-weight: 400; }
.route-moved {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; padding: 7px 10px;
  border-radius: 8px; background: #e8f0fe; font-size: 12.5px; color: var(--ink);
}

.locate-btn.locate-denied .maplibregl-ctrl-icon { opacity: .45; }
.maplibregl-ctrl button.maplibregl-ctrl-geolocate.locate-compass .maplibregl-ctrl-icon {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 20 20'%3E%3Cpath fill='%231a73e8' d='M10 2.4 13.3 10H6.7z'/%3E%3Cpath fill='%23a3abb8' d='M6.7 10h6.6L10 17.6z'/%3E%3Ccircle cx='10' cy='10' r='1.2' fill='%23fff'/%3E%3C/svg%3E");
}
.myloc { width: 18px; height: 18px; pointer-events: none; outline: none; }
.myloc-dot {
  position: absolute; inset: 0; box-sizing: border-box; border-radius: 50%;
  background: #1a73e8; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  pointer-events: auto; cursor: pointer;
}
.myloc-dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; }
.myloc:focus-visible .myloc-dot { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--accent); }
.myloc.nav .myloc-dot { pointer-events: none; cursor: default; }
.myloc.nav .myloc-dot::before { display: none; }
.myloc.stale .myloc-dot { background: #9aa0a6; }
.myloc-conewrap { width: 18px; height: 18px; pointer-events: none; }
.myloc-cone {
  position: absolute; left: 50%; bottom: 50%; width: 27px; height: 27px; margin-left: -13.5px;
  transform-origin: 50% 100%; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%231a73e8' stop-opacity='.6'/%3E%3Cstop offset='1' stop-color='%231a73e8' stop-opacity='.04'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M50 100 L0 13.4 A100 100 0 0 1 100 13.4 Z' fill='url(%23g)'/%3E%3C/svg%3E") no-repeat center bottom / 100% 100%;
}
.myloc-conewrap.no-heading { display: none; }
.myloc.no-heading .myloc-cone, .myloc.nav .myloc-cone { display: none; }
.myloc-conewrap.wide .myloc-cone { transform: scaleX(2); opacity: .7; }
.myloc-conewrap.stale .myloc-cone { opacity: .35; }
.myloc-popup .maplibregl-popup-content { padding: 11px 12px 10px; border-radius: 12px; box-shadow: 0 8px 24px rgba(27, 33, 53, .18); }
.myloc-card { display: flex; flex-direction: column; gap: 8px; }
.myloc-card-text { font-weight: 600; font-size: 13.5px; line-height: 1.35; padding-right: 22px; color: var(--ink); }
.btn.myloc-off { justify-content: center; min-height: 36px; border-color: var(--line); color: var(--danger); background: #fff; }
.btn.myloc-off:hover { background: #fdecea; }
@media (pointer: coarse) {
  .btn.myloc-off { min-height: 44px; font-size: 14px; }
  .myloc-popup .maplibregl-popup-close-button { width: 36px; height: 36px; font-size: 20px; line-height: 36px; top: 0; right: 0; }
}
.locate-btn { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.myloc-acc {
  width: var(--d, 0px); height: var(--d, 0px); box-sizing: border-box; border-radius: 50%; pointer-events: none;
  background: rgba(26, 115, 232, .13); border: 1px solid rgba(26, 115, 232, .35);
}
.myloc-acc.tiny { display: none; }

body.picking-center .panel { display: none; }
.pick-pin {
  position: fixed; left: 50%; top: 50%; z-index: 25; width: 22px; height: 29px; margin: -29px 0 0 -11px; pointer-events: none;
}
.pick-pin::after {
  content: ""; position: absolute; left: 50%; bottom: -3px; width: 6px; height: 6px; margin-left: -3px;
  border-radius: 50%; background: rgba(27, 33, 53, .45);
}
.pick-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; flex-direction: column; gap: 10px;
  padding: 14px max(16px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: #fff; border-radius: 16px 16px 0 0; box-shadow: var(--shadow);
}
.pick-text { font-size: 14px; line-height: 1.4; color: var(--ink); }
.pick-actions { display: flex; gap: 8px; }
.pick-actions .btn { flex: 1; justify-content: center; min-height: 44px; font-size: 14px; }

@media (max-width: 700px) {
  .maplibregl-ctrl-top-right .maplibregl-ctrl.locate-ctrl {
    position: fixed; margin: 0; float: none; right: max(12px, env(safe-area-inset-right));
    bottom: calc(var(--sheet-h, 0px) + 14px); border-radius: 50% !important;
  }
  .maplibregl-ctrl-group.locate-ctrl button.locate-btn { width: 46px; height: 46px; border-radius: 50%; }
  body.m-focus .locate-ctrl { display: none; }
  .maplibregl-popup.ctx-popup, .maplibregl-popup.pin-label { z-index: 3; }
}
.maplibregl-ctrl-top-right { top: env(safe-area-inset-top); right: env(safe-area-inset-right); }
@media (max-width: 700px) and (pointer: coarse) {
  .nav-ctrl .maplibregl-ctrl-zoom-in, .nav-ctrl .maplibregl-ctrl-zoom-out { display: none !important; }
  #map:not(.rotated) .nav-ctrl { display: none; }
}

@media (pointer: coarse) {
  .field input, .stop-input input, .frow input[type="text"], #printTitle, select.pref, #shareUrl, #drawCoords,
  .rt-dwell select { font-size: 16px; }
  .maplibregl-ctrl-group button { width: 40px; height: 40px; }
  .tab { min-height: 40px; }
  .panel-foot .btn { min-height: 40px; }
  .layer-btn { min-height: 38px; }
  .stops li.stop-insert { height: 30px; }
  .stops li.stop-insert button { width: 30px; height: 30px; }
  .stop-pick, .stop-remove { height: 36px; }
  .stop-remove { width: 36px; }
  .btn.mini { min-height: 34px; padding: 5px 12px; }
  .dialog-close { min-width: 44px; min-height: 44px; }
  .ctx-row { min-height: 40px; font-size: 14px; }
  .ctx-copy { min-height: 32px; }
  .check input { width: 20px; height: 20px; }
  .status { font-size: 13px; }
  .note { font-size: 12.5px; }
  .sugg li { padding: 11px 13px; min-height: 48px; justify-content: center; }
  .sugg li b { font-size: 15px; }
  .sugg li span { font-size: 13px; }
  .mini-tab { min-height: 34px; }
}

@media (min-width: 701px) and (max-height: 500px) and (pointer: coarse) {
  :root { --panel-w: 300px; --panel-t: calc(8px + env(safe-area-inset-top)); }
  .panel { max-height: calc(100% - 8px - var(--panel-t)); }
  .panel-body { padding: 8px 12px 4px; }
  .layer-btn:not(.on) .lname { display: none; }
  .layer-btn:not(.on) { padding: 6px 9px; }
  .maplibregl-ctrl-bottom-left { left: calc(var(--panel-l) + var(--panel-w)); }
}


.nav-start-row { margin: 2px 0 10px; }
.btn.nav-start { width: 100%; justify-content: center; gap: 8px; min-height: 40px; font-size: 14px; }
.nav-start-note { display: block; margin-top: 5px; font-size: 12px; color: var(--danger); }
@media (pointer: coarse) { .btn.nav-start { min-height: 46px; font-size: 15px; } }

body.nav-on .panel, body.nav-on:not(.nav-layers-open) .layer-switcher, body.nav-on .maplibregl-ctrl-top-right,
body.nav-on .maplibregl-ctrl-bottom-left, body.nav-on .pick-bar, body.nav-on .pick-pin,
body.nav-on .maplibregl-popup { display: none !important; }

.nav-side {
  position: fixed; z-index: 36; right: max(10px, env(safe-area-inset-right)); top: var(--nav-side-top, 110px);
  display: flex; flex-direction: column; gap: 10px;
}
.nav-side[hidden] { display: none; }
.nav-side-btn {
  width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #1a73e8;
  box-shadow: var(--shadow); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.nav-side-btn:hover { background: var(--bg-soft); }
.nav-side-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
body.nav-layers-open .nav-layers { background: #e8f0fe; }
.nav-side-btn.north { background: #e8f0fe; box-shadow: var(--shadow), inset 0 0 0 2px #1a73e8; }
.nav-compass { perspective: 90px; }
.nav-needle3d { display: block; width: 34px; height: 34px; pointer-events: none; transform-origin: 50% 50%; }
.nav-needle3d svg { display: block; width: 34px; height: 34px; overflow: visible; }
.nav-needle3d .nd-r { fill: #e53935; }
.nav-needle3d .nd-r2 { fill: #b71c1c; }
.nav-needle3d .nd-w { fill: #fff; }
.nav-needle3d .nd-w2 { fill: #d5d9de; }
.nav-needle3d .nd-edge { fill: none; stroke: #9aa0a6; stroke-width: .9; stroke-linejoin: round; }
.nav-needle3d .nd-pin { fill: #fff; stroke: #9aa0a6; stroke-width: .8; }
.nav-needle3d .nd-n { fill: none; stroke: #1b2135; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.nav-needle3d .nd-needle { transform-origin: 12px 12px; }
.nav-needle3d .nd-needle, .nav-needle3d .nd-n, .nav-needle3d .nd-r2, .nav-needle3d .nd-w2,
.nav-needle3d .nd-w, .nav-needle3d .nd-edge, .nav-needle3d .nd-pin {
  transition: transform .18s ease-out, opacity .18s linear, fill .18s linear;
}
.nav-needle3d .nd-n { transform-origin: 12px 19.2px; }
.nav-needle3d.flat .nd-r2 { fill: #e53935; }
.nav-needle3d.flat .nd-w, .nav-needle3d.flat .nd-w2, .nav-needle3d.flat .nd-edge, .nav-needle3d.flat .nd-pin { opacity: 0; }
.nav-needle3d.flat .nd-needle { transform: translateY(.4px) scale(1.053); }
.nav-needle3d.flat .nd-n { opacity: 1; transform: translateY(-.4px) scale(1.25); }
@media (prefers-reduced-motion: reduce) {
  .nav-needle3d .nd-needle, .nav-needle3d .nd-n, .nav-needle3d .nd-r2, .nav-needle3d .nd-w2,
  .nav-needle3d .nd-w, .nav-needle3d .nd-edge, .nav-needle3d .nd-pin { transition: none; }
}
.nav-needle {
  display: block; width: 34px; height: 34px; pointer-events: none;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5 16 12H8z' fill='%23e53935'/%3E%3Cpath d='M8 12h8l-4 9.5z' fill='%23fff' stroke='%239aa0a6' stroke-width='1' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='1.3' fill='%23fff' stroke='%239aa0a6' stroke-width='.8'/%3E%3C/svg%3E");
}
body.nav-on.nav-layers-open .layer-switcher {
  display: flex !important; position: fixed; z-index: 37; flex-direction: column; gap: 6px;
  top: calc(var(--nav-side-top, 110px) + 58px); right: calc(max(10px, env(safe-area-inset-right)) + 58px); left: auto; bottom: auto;
  padding: 8px; background: #fff; border-radius: 12px; box-shadow: var(--shadow);
}
body.nav-on.nav-layers-open .layer-switcher .layer-btn { min-height: 44px; padding: 8px 14px 8px 11px; box-shadow: none; font-size: 14px; }
body.nav-on.nav-layers-open .layer-switcher .layer-btn .lname { display: inline; }
@media (min-width: 701px) {
  .nav-side { top: var(--panel-t); }
  body.nav-on.nav-layers-open .layer-switcher { top: calc(var(--panel-t) + 58px); }
}
.nav-range { position: relative; color: #1b2135; font: 700 12.5px/1 var(--font); letter-spacing: -.1px; }
.nav-range[hidden] { display: none; }
.nav-range .nr-val { white-space: nowrap; }
.nav-range .nr-ring { position: absolute; left: 0; top: 0; width: 48px; height: 48px; pointer-events: none; display: none; overflow: visible; }
.nav-range .nr-ring circle { fill: none; stroke: #1a73e8; stroke-width: 3; }
.nav-range.temp .nr-val { font-style: italic; color: #5f6b85; }
.nav-range.temp .nr-ring { display: block; animation: nav-range-fade 10s linear forwards; }
@keyframes nav-range-fade { from { opacity: 1; } to { opacity: .25; } }
.nav-range[aria-expanded="true"] { background: #e8f0fe; }
@media (prefers-reduced-motion: reduce) {
  .nav-range.temp .nr-ring { animation: none; }
}
.nav-range-menu {
  position: fixed; z-index: 37; top: 110px; right: 68px; display: flex; flex-direction: column; gap: 2px; min-width: 116px;
  max-height: calc(100% - 16px); overflow-y: auto; padding: 6px; background: #fff; border-radius: 12px; box-shadow: var(--shadow);
}
.nav-range-menu[hidden] { display: none; }
.nav-range-opt {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-height: 44px;
  padding: 6px 14px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: 600 15px/1.15 var(--font);
  text-align: left; cursor: pointer;
}
.nav-range-opt small { font: 400 12px/1.2 var(--font); color: var(--dim); }
.nav-range-opt:hover { background: var(--bg-soft); }
.nav-range-opt:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.nav-range-opt[aria-checked="true"], .nav-range-opt[aria-checked="true"] small { background: #e8f0fe; color: #1a73e8; }
.maplibregl-ctrl button.maplibregl-ctrl-compass { perspective: 70px; }
.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.5L8.7 12L12 12z' fill='%23e53935'/%3E%3Cpath d='M12 3.5L15.3 12L12 12z' fill='%23b71c1c'/%3E%3Cpath d='M8.7 12L12 20.5L12 12z' fill='%23ffffff'/%3E%3Cpath d='M15.3 12L12 20.5L12 12z' fill='%23d5d9de'/%3E%3Cpath d='M8.7 12L12 20.5L15.3 12' fill='none' stroke='%239aa0a6' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E");
}
#map:not(.rotated) .maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4L16.2 12.4L7.8 12.4z' fill='%23e53935'/%3E%3Cpath d='M10.2 21.6v-4.8l3.6 4.8v-4.8' transform='translate(-3 -5.2) scale(1.25)' fill='none' stroke='%231b2135' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body.nav-on .map-credit { bottom: calc(var(--nav-bar-h, 0px) + 3px); }
body.nav-on .toast { top: calc(var(--nav-top-h, 80px) + 10px); bottom: auto; }
body.nav-on .toast {
  left: calc(50% + (16px - max(10px, env(safe-area-inset-right)) - 60px) / 2);
  max-width: calc(100vw - 76px - max(10px, env(safe-area-inset-right)));
}

.nav-top {
  position: fixed; z-index: 35; top: calc(8px + env(safe-area-inset-top));
  left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right));
  background: #1b2135; color: #fff; border-radius: 14px; padding: 10px 14px; box-shadow: var(--shadow);
}
.nav-man { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.nav-man-txt { display: flex; flex-direction: column; min-width: 0; }
.nav-dist { font: 700 26px/1.1 var(--font); letter-spacing: -.2px; }
.nav-dist:empty { display: none; }
.nav-text { font: 500 17px/1.3 var(--font); overflow-wrap: anywhere; }
.nav-then { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 7px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 14px; color: #dfe4f3; }
.nav-note {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 9px -6px -4px; padding: 7px 10px;
  border-radius: 9px; background: #3a4058; color: #fff; font-size: 13.5px; line-height: 1.35;
}
.nav-note .btn.mini { background: #fff; color: var(--ink); border-color: #fff; }

.nav-arrow {
  flex: none; width: 44px; height: 44px; background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2l7 7h-5v13h-4V9H5z'/%3E%3C/svg%3E");
}
.nav-arrow.small { width: 20px; height: 20px; }
.nav-arrow.k-right, .nav-arrow.k-left {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M6 22V12.5A4.5 4.5 0 0 1 10.5 8H15V4l6 6-6 6v-4h-4.5a.5.5 0 0 0-.5.5V22z'/%3E%3C/svg%3E");
}
.nav-arrow.k-keepR, .nav-arrow.k-keepL {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 22v-8.2c0-1 .4-2 1.1-2.7L15.2 5H12V2h8v8h-3V7.1l-5.9 5.9c-.1.1-.1.3-.1.4V22z'/%3E%3C/svg%3E");
}
.nav-arrow.k-sharpR, .nav-arrow.k-sharpL {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M6 22V9a5 5 0 0 1 9.3-2.6l2.9 5 2.2-1.3-.9 7.7-7.1-3.1 2.2-1.3-2.9-5A1 1 0 0 0 10 9v13z'/%3E%3C/svg%3E");
}
.nav-arrow.k-uturn {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M18 22V9a6 6 0 0 0-12 0v6H3l5 6 5-6h-3V9a2 2 0 0 1 4 0v13z'/%3E%3C/svg%3E");
}
.nav-arrow.k-via, .nav-arrow.k-startPt {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2a7 7 0 0 0-7 7c0 5.3 7 13 7 13s7-7.7 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}
.nav-arrow.k-dest, .nav-arrow.k-back {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M5 22V3h12l-1.6 4H20l-2.4 6H11l1.2-3H8v12z'/%3E%3C/svg%3E");
}
.nav-arrow.k-left, .nav-arrow.k-keepL, .nav-arrow.k-sharpL { transform: scaleX(-1); }

.nav-card {
  position: fixed; z-index: 36; top: calc(max(var(--nav-top-h, 80px), env(safe-area-inset-top)) + 8px);
  left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right));
  display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: #fff; color: var(--ink);
  border-radius: 14px; box-shadow: var(--shadow); border-left: 5px solid #1a7f4e;
}
.nav-card-title { font-size: 16px; }
.nav-card-text { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--dim); }
.nav-card-sub { color: var(--ink); font-weight: 600; }
.nav-card .btn { align-self: flex-start; min-height: 44px; padding: 8px 16px; font-size: 14px; }
.nav-card-btns { display: flex; flex-wrap: wrap; gap: 8px; }

.nav-bar {
  position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; background: #fff; color: var(--ink);
  border-radius: 16px 16px 0 0; box-shadow: var(--shadow);
  padding: 10px max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
}
.nav-bar-row { display: flex; align-items: center; gap: 10px; }
.nav-sum {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 48px;
  justify-content: center; border: 0; background: none; padding: 2px 4px; margin-left: -4px; border-radius: 8px;
  cursor: pointer; text-align: left; color: var(--ink); font-family: var(--font);
}
.nav-sum:hover, .nav-sum:focus-visible { background: var(--bg-soft); }
.nav-time { font-size: 22px; color: #1a7f4e; }
.nav-rest { font-size: 13.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.nav-actions { display: flex; gap: 8px; flex: none; }
.nav-actions .btn { min-height: 44px; padding: 8px 14px; font-size: 14px; }
.nav-stops { list-style: none; margin: 8px 0 0; padding: 6px 0 0; border-top: 1px solid var(--line-soft); max-height: 38vh; overflow-y: auto; }
.nav-stop { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.nav-stop + .nav-stop { border-top: 1px solid var(--line-soft); }
.nav-stop .stop-token { flex: none; }
.nav-tok-via { background: #4560d4; }
.nav-tok-start, .nav-tok-back { background: #1a7f4e; }
.nav-tok-dest { background: #b3261e; }
.nav-stop-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nav-stop-addr { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-stop-txt small { font-size: 12px; color: var(--dim); }
.nav-skip { flex: none; }
.nav-next { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--line-soft); }
.nav-next-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nav-next-label { font-size: 13.5px; font-weight: 600; }
.nav-next-addr { font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-next .btn.nav-skip { min-height: 44px; padding: 8px 12px; font-size: 14px; white-space: nowrap; }

.nav-recenter {
  position: fixed; z-index: 35; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-bar-h, 90px) + 14px);
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 16px; border: 0; border-radius: 22px;
  background: #fff; color: #1a73e8; font: 600 14px var(--font); box-shadow: var(--shadow); cursor: pointer;
}

.myloc.nav { width: 40px; height: 40px; transform-style: preserve-3d; }
.myloc-ar { display: none; }
.myloc.nav .myloc-ar { display: block; position: absolute; inset: 0; pointer-events: none; background: no-repeat center / contain; }
.myloc.nav .myloc-ar-sh {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2 19.4 20.4 12 16.9 4.6 20.4z' fill='%23000' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity: .42; filter: blur(2.2px);
}
.myloc.nav .myloc-ar-w {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2 19.4 20.4 12 16.9 4.6 20.4z' fill='%230b3d91' stroke='%230b3d91' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.myloc.nav .myloc-ar-w.w1 { transform: translateZ(1.5px); }
.myloc.nav .myloc-ar-w.w2 { transform: translateZ(3px); }
.myloc.nav .myloc-ar-w.w3 { transform: translateZ(4.5px); }
.myloc.nav .myloc-dot {
  border: 0; border-radius: 0; box-shadow: none; background: no-repeat center / contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2 4.6 20.4 12 16.9z' fill='%235c9cf8'/%3E%3Cpath d='M12 2.2 19.4 20.4 12 16.9z' fill='%231766d1'/%3E%3Cpath d='M12 2.2 19.4 20.4 12 16.9 4.6 20.4z' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E");
  transform: translateZ(6px);
}
body.nav-gps-lost .myloc.nav .myloc-dot, .myloc.nav.stale .myloc-dot,
body.nav-gps-lost .myloc.nav .myloc-ar-w, .myloc.nav.stale .myloc-ar-w { filter: grayscale(1); }
body.nav-gps-lost .myloc.nav .myloc-ar-sh, .myloc.nav.stale .myloc-ar-sh { opacity: .2; }

.choice-row { flex-wrap: wrap; }
@media (pointer: coarse) { .choice-row .btn { min-height: 44px; } }

@media (min-width: 701px) {
  .nav-top, .nav-card, .nav-bar { left: var(--panel-l); right: auto; width: min(360px, 44vw); }
  .nav-top { top: var(--panel-t); }
  .nav-bar { bottom: 12px; border-radius: 14px; }
  .nav-recenter { left: calc(var(--panel-l) + min(360px, 44vw) + 16px); transform: none; bottom: 16px; }
  body.nav-on .map-credit { bottom: 3px; }
}
@media (min-width: 701px) and (max-height: 500px) {
  .nav-top { padding: 7px 12px; }
  .nav-man { min-height: 40px; }
  .nav-dist { font-size: 22px; }
  .nav-text { font-size: 15px; }
  .nav-bar { bottom: max(8px, env(safe-area-inset-bottom)); padding: 6px 12px; }
  .nav-stops { max-height: 30vh; }
}
@media (prefers-reduced-motion: reduce) { .nav-recenter { transition: none; } }
.nav-actions .btn.nav-overview { gap: 6px; padding: 8px 12px 8px 10px; justify-content: center; white-space: nowrap; }
.nav-actions .btn.nav-overview svg { flex: none; }
.nav-rest { white-space: normal; }
.nav-rest > span { white-space: nowrap; }
.nav-bar { container: navbar / inline-size; }
@container navbar (max-width: 352px) {
  .nav-bar-row { gap: 8px; }
  .nav-actions { gap: 6px; }
  .nav-actions .btn.nav-overview { gap: 5px; padding: 8px 9px 8px 8px; font-size: 13.5px; }
  .nav-actions .btn#navExit { padding-left: 11px; padding-right: 11px; }
  .nav-next { gap: 8px; }
  .nav-next-label { font-size: 13px; }
  .nav-next .btn.nav-skip { padding: 8px 10px; font-size: 13.5px; }
}
@container navbar (max-width: 320px) {
  .nav-actions .btn.nav-overview svg { display: none; }
  .nav-actions .btn.nav-overview { padding: 8px 10px; }
  .nav-rest { font-size: 12.5px; }
}


body.m-focus .m-active .sugg li.ac-extra, .sugg li.ac-extra { justify-content: flex-start; }

.m-status { display: none; }
body.m-focus .m-status:not([hidden]) {
  display: block; grid-column: 1 / -1; margin: 10px -14px 0; padding: 12px 16px;
  border-top: 1px solid var(--line-soft); font-size: 14px; line-height: 1.45; color: var(--dim);
}

@media (max-width: 700px) {
  #tab-route:not([hidden]) { display: flex; flex-direction: column; }
  #tab-route > .stops { order: 1; }
  #tab-route > #routeStatus { order: 2; }
  #tab-route > #routeStatus:empty { display: none; }
  #tab-route > #routeMoved { order: 3; }
  #routeSummary { display: contents; }
  body.m-focus #routeSummary { display: none; }
  #routeSummary > .route-total { order: 4; margin: 4px 0 0; padding: 0 2px; }
  #routeSummary > .route-sub { order: 5; padding: 0 2px; }
  #tab-route > #navStartRow { order: 6; margin: 8px 0 10px; }
  #tab-route > .route-actions { order: 7; }
  #routeSummary > .route-legs {
    order: 8; margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 9px; background: var(--bg-soft);
  }
  #tab-route > .route-optimize { order: 9; }
  .route-optimize.few { display: none; }
  body[data-draw-mode] .panel-foot { display: none; }
  body.sheet-full .locate-ctrl, body.sheet-full .maplibregl-ctrl-bottom-left,
  body.sheet-full .maplibregl-ctrl-bottom-right, body.sheet-full .map-credit { display: none; }
}
@media (max-width: 370px) {
  .route-actions { gap: 4px; }
  .route-actions .btn { padding: 7px 7px; }
  .route-actions .route-loop { white-space: normal; text-align: right; line-height: 1.2; }
}

.maplibregl-ctrl-scale { pointer-events: none; }

.draw-list li.list-hint { font-size: 12px; padding-top: 6px; }

.pick-addr { font-size: 13px; line-height: 1.35; color: var(--dim); min-height: 18px; overflow-wrap: anywhere; }
body.picking-center .maplibregl-ctrl-top-right .maplibregl-ctrl.locate-ctrl { bottom: calc(var(--pick-h, 130px) + 14px); }

@media (pointer: coarse) {
  .ctx-popup .maplibregl-popup-close-button { width: 36px; height: 36px; font-size: 20px; line-height: 36px; top: 0; right: 0; }
  .ctx-addr { padding-right: 30px; }
  .pin-label .maplibregl-popup-close-button { width: 36px; height: 36px; line-height: 36px; top: 0; right: 0; }
  .pin-label-text { padding-right: 32px; }
  .pin-nav { min-height: 40px; }
  .field-clear { min-width: 40px; min-height: 40px; }
  .lang-btn { min-height: 36px; }
  .btn.mini { min-height: 40px; }
  .mini-btn { width: 40px; height: 40px; }
  .route-actions .btn, .route-actions select.pref, .route-optimize .btn { min-height: 40px; }
  .stop-pick { font-size: 12px; }
}

@media (min-width: 701px) and (max-height: 500px) and (pointer: coarse) {
  .tabs-row { margin-left: -8px; gap: 0; }
  .tab { padding: 8px 6px; font-size: 12px; }
  .tab-tool { width: 34px; margin-left: 0; }
  .maplibregl-ctrl-bottom-left { bottom: 16px; }
  body.m-focus .m-bar { min-height: 38px; }
  body.m-focus .m-active .sugg li { min-height: 40px; padding: 7px 16px; }
  body.m-focus .m-active .sugg li:not(.ac-extra) { flex-direction: row; align-items: baseline; gap: 8px; }
  body.m-focus .m-active .sugg li:not(.ac-extra) b { flex: none; font-size: 15px; }
  body.m-focus .m-active .sugg li:not(.ac-extra) span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width: 701px) and (max-height: 500px) {
  .nav-rest { white-space: normal; }
}

.api-btn {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--accent);
  padding: 3px 9px 3px 7px; font: 600 11.5px/1.2 var(--font); cursor: pointer; white-space: nowrap;
}
.api-btn:hover { background: var(--bg-soft); border-color: var(--accent); }
.api-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.api-btn-ico { font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: -.5px; }
.pin-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.pin-actions .pin-nav { margin-top: 0; }
.status-row { display: flex; align-items: center; gap: 8px; }
.status-row > .status { flex: 1; min-width: 0; }
.ctx-api { margin: -2px 0 7px; }
.route-total .route-api { margin-left: auto; align-self: center; }
.route-optimize .opt-api { grid-column: 1 / -1; justify-self: start; }
@media (pointer: coarse) {
  .api-btn { min-height: 36px; padding: 6px 12px 6px 10px; font-size: 12.5px; }
}

.api-backdrop {
  position: fixed; inset: 0; z-index: 62; display: flex; align-items: flex-start; justify-content: flex-end;
  padding: 12px; background: rgba(27, 33, 53, .35);
}
.api-panel {
  display: flex; flex-direction: column; gap: 10px; width: 480px; max-width: 100%; max-height: 100%; overflow: auto;
  padding: 14px 16px 16px; background: #fff; border-radius: 13px; box-shadow: var(--shadow); outline: none;
  overscroll-behavior: contain;
}
.api-panel > * { flex-shrink: 0; }
.api-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.api-title { margin: 0; font-size: 16px; line-height: 1.3; color: var(--ink); }
.api-title-ico { font: 700 14px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--accent); }
.api-kind { margin-top: 2px; font-size: 12.5px; color: var(--dim); }
.api-close { flex: none; width: 36px; height: 36px; margin: -6px -8px 0 0; border-radius: 8px; }
.api-close:hover { background: var(--bg-soft); color: var(--ink); }
.api-close:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.api-lead { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.api-tabs { display: flex; border-bottom: 1px solid var(--line-soft); margin-bottom: -4px; }
.api-tab {
  border: 0; border-bottom: 2px solid transparent; background: none; padding: 7px 12px; margin-bottom: -1px;
  font: 600 12.5px var(--font); color: var(--dim); cursor: pointer;
}
.api-tab:hover { color: var(--ink); }
.api-tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.api-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
.api-code {
  margin: 0; padding: 10px 12px; border-radius: 9px; background: #1b2135; color: #e8ecf8;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 200px; overflow: auto;
}
.api-code:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.api-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.api-note { font-size: 12px; color: var(--dim); }
.api-sub { margin: 4px 0 -4px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.api-resp {
  background: var(--bg-soft); color: var(--ink); border: 1px solid var(--line-soft);
  white-space: pre; overflow-wrap: normal; max-height: 240px; font-size: 11.5px;
}
.api-links { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.api-links a, .api-picker a { color: var(--accent); font-weight: 600; text-underline-offset: 2px; }
.api-links a:hover, .api-picker a:hover { color: var(--accent-dark); }
.api-picker { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink); }
.btn.api-cta { justify-content: center; padding: 10px 14px; font-size: 13.5px; text-decoration: none; margin-top: 2px; }
@media (max-width: 700px) {
  .api-backdrop { align-items: flex-end; justify-content: stretch; padding: 0; }
  .api-panel {
    width: 100%; max-height: 88vh; max-height: 88dvh; border-radius: 16px 16px 0 0;
    padding: 12px max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
  .api-code { font-size: 12.5px; }
  .api-resp { font-size: 12px; max-height: 200px; }
  .btn.api-cta { min-height: 44px; font-size: 14.5px; }
  .api-tab { min-height: 40px; }
}
@media (pointer: coarse) {
  .btn.api-cta { min-height: 44px; }
  .api-tab { min-height: 40px; }
  .api-copy { min-height: 40px; }
}


.ctx-card, .pick-bar, .sheet-handle, .panel-head { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media (pointer: coarse) {
  #map { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}
.ctx-card input, .pick-bar input, .panel-head input, #map input, #map textarea { -webkit-user-select: text; user-select: text; }

.map-lost {
  position: fixed; left: 50%; top: calc(58px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 90;
  display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100vw - 24px);
  padding: 8px 8px 8px 16px; background: #fff; border-radius: 12px; box-shadow: var(--shadow);
  font: 600 14px/1.35 var(--font); color: var(--ink);
}
.map-lost .btn { flex: none; min-height: 40px; justify-content: center; }

.diag-dialog .dialog { width: 560px; display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
.diag-dialog .dialog-head { margin-bottom: 0; }
.diag-note { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--dim); }
.diag-log {
  flex: 1 1 auto; min-height: 120px; margin: 0; overflow: auto; padding: 8px 10px; border-radius: 8px;
  background: var(--bg-soft); border: 1px solid var(--line-soft); color: var(--ink);
  font: 11.5px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere;
  -webkit-user-select: text; user-select: text;
}
.diag-dialog .row { margin: 0; }
@media (pointer: coarse) { .diag-dialog .btn { min-height: 44px; } .diag-dialog .dialog-close { min-width: 44px; min-height: 44px; } }
.diag-dialog .dialog:focus { outline: none; }

.ctx-card {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px max(10px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  background: #fff; border-radius: 16px 16px 0 0; box-shadow: var(--shadow); outline: none; color: var(--ink);
}
.ctx-card-head { display: flex; align-items: flex-start; gap: 6px; min-height: 44px; }
.ctx-card .ctx-addr {
  flex: 1; min-width: 0; height: 40px; margin: 2px 0 0; padding: 0;
  font-size: 15px; line-height: 20px; font-weight: 700; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ctx-card .ctx-addr.dim { font-weight: 500; }
.ctx-card .ctx-api { flex: none; margin: 0; min-height: 44px; }
.ctx-card-close {
  flex: none; width: 44px; height: 44px; margin: -2px -8px 0 0; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--dim); font: 26px/44px var(--font); cursor: pointer;
}
.ctx-card-close:hover, .ctx-card-close:active { background: var(--bg-soft); color: var(--ink); }
.ctx-card-close:focus-visible, .ctx-card .ctx-copy:focus-visible, .ctx-card-grid .ctx-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ctx-card-coords { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.ctx-card-coords::-webkit-scrollbar { display: none; }
.ctx-card .ctx-copy.ctx-chip {
  flex: none; box-sizing: border-box; min-height: 44px; padding: 0 10px; border: solid transparent; border-width: 2px 0;
  border-radius: 12px; background: #fff padding-box; box-shadow: inset 0 0 0 1px var(--line);
  display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center;
  font: 12px/15px ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); white-space: nowrap;
}
.ctx-card .ctx-copy.ctx-chip small { margin: 0; font: 600 10px/12px var(--font); color: var(--dim); }
@media (max-width: 359px) { .ctx-card-coords { flex-wrap: wrap; } }
.ctx-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 4px; }
.ctx-card-grid .ctx-row {
  box-sizing: border-box; min-width: 0; min-height: 44px; margin: 0; padding: 0 3px; justify-content: center; gap: 5px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff; font: 600 13px/15px var(--font); color: var(--ink);
  text-align: center; white-space: normal; overflow: hidden;
}
.ctx-card-grid .ctx-row > span:last-child { min-width: 0; overflow: hidden; }
.ctx-card-grid .ctx-row .dot { width: 8px; height: 8px; }
.ctx-card-grid .ctx-row:hover, .ctx-card-grid .ctx-row:active { background: var(--bg-soft); color: var(--ink); }
.ctx-card-grid .ctx-go { grid-column: span 2; background: var(--accent); border-color: var(--accent); color: #fff; }
.ctx-card-grid .ctx-go:hover, .ctx-card-grid .ctx-go:active { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.ctx-row .ico.go { width: 17px; height: 17px; display: inline-flex; color: currentColor; flex: none; font-size: 0; opacity: 1; }
.ctx-card-grid .ctx-row .ico { width: auto; font-size: 11px; }
@media (max-width: 359px) {
  .ctx-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
}
body.ctx-open .panel { display: none; }
@media (max-width: 700px) {
  body.ctx-open .maplibregl-ctrl-top-right .maplibregl-ctrl.locate-ctrl { bottom: calc(var(--ctx-h, 230px) + 14px); }
  body.ctx-open .maplibregl-ctrl-bottom-left, body.ctx-open .maplibregl-ctrl-bottom-right { bottom: var(--ctx-h, 230px); }
  body.ctx-open .map-credit { bottom: calc(var(--ctx-h, 230px) + 3px); }
}
@media (min-width: 701px) and (max-height: 500px) and (pointer: coarse) {
  .ctx-card {
    left: var(--panel-l); right: auto; top: var(--panel-t); bottom: auto; width: var(--panel-w);
    max-height: calc(100% - 8px - var(--panel-t)); overflow-y: auto; overscroll-behavior: contain;
    border-radius: 14px; padding: 8px 12px 10px;
  }
  .ctx-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
  .ctx-card-coords { flex-wrap: wrap; }
}
.ctx-pin { width: 22px; height: 29px; pointer-events: none; }
body.nav-on .ctx-card { display: none !important; }
.search-pin { width: 22px; height: 29px; cursor: pointer; }
.search-pin, .ctx-pin, .pick-pin {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 29'%3E%3Cpath d='M6.86 20.1A10 10 0 1 1 15.14 20.1L11 27Z' fill='%234560d4' stroke='%23fff' stroke-width='2'/%3E%3Ccircle cx='11' cy='11' r='3.5' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45));
}


.btn.copied, .btn.copied:hover, .btn.primary.copied, .btn.primary.copied:hover { background: #1a7f4e; border-color: #1a7f4e; color: #fff; }
.ctx-copy.copied small, .ctx-card .ctx-copy.ctx-chip.copied small { color: #1a7f4e; }
.ctx-card .ctx-copy.ctx-chip.copied { box-shadow: inset 0 0 0 1px #1a7f4e; }

@media (max-width: 700px) { body.m-focus .home-ctrl { display: none; } }
@media (pointer: coarse) { body.sheet-full .home-ctrl { display: none; } }
.maplibregl-ctrl.home-ctrl.home-tight { display: none; }

#printDialog .row .btn { white-space: nowrap; }

@media (pointer: coarse) {
  #shareDialog .row .btn, #printDialog .row .btn, #printDialog .mini-tab { min-height: 44px; }
}


.sugg li.ac-hist { flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; }
.sugg li.ac-hist .ac-ico {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: #eef0f4; color: #5b6275;
}
.sugg li.ac-hist .ac-txt { display: flex; flex-direction: column; min-width: 0; color: var(--ink); font-size: inherit; }
.sugg li.ac-hist .ac-txt > span:not(.sr-only) { color: var(--dim); }
.sugg li.ac-hist + li:not(.ac-hist) { border-top: 1px solid var(--line); }
body.m-focus .m-active .sugg li.ac-hist { justify-content: flex-start; }
@media (min-width: 701px) and (max-height: 500px) and (pointer: coarse) {
  body.m-focus .m-active .sugg li.ac-hist { flex-direction: row; align-items: center; gap: 10px; }
  body.m-focus .m-active .sugg li.ac-hist .ac-ico { overflow: visible; }
}

.foot-btn.foot-settings { padding: 6px 8px; color: var(--dim); position: relative; }
.foot-btn.foot-settings:hover { color: var(--accent); }
.foot-btn.foot-settings svg { display: block; }
@media (pointer: coarse) {
  .foot-btn.foot-settings { min-width: 44px; justify-content: center; }
  .foot-btn.foot-settings::after { content: ""; position: absolute; left: 0; right: 0; top: -3px; bottom: -3px; }
}

.settings-dialog { width: 400px; }
.settings-dialog:focus { outline: none; }
.set-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 44px;
  font-size: 13.5px; cursor: pointer; border-bottom: 1px solid var(--line-soft);
}
.set-label { min-width: 0; line-height: 1.35; }
.set-switch {
  -webkit-appearance: none; appearance: none; flex: none; position: relative; margin: 0; cursor: pointer;
  width: 44px; height: 26px; border-radius: 13px; background: #c3c9d6; transition: background .15s;
}
.set-switch::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(27, 33, 53, .3); transition: transform .15s;
}
.set-switch:checked { background: var(--accent); }
.set-switch:checked::before { transform: translateX(18px); }
.set-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .set-switch, .set-switch::before { transition: none; } }
.set-note { margin: 10px 0 12px; font-size: 12px; line-height: 1.4; color: var(--dim); }
#setHistClear small { color: inherit; font-weight: 400; }
@media (pointer: coarse) {
  .settings-dialog .btn { min-height: 44px; }
}

@media print {
  body.printing .print-sheet.rot > .ps-page {
    display: block; flex: 1 1 0; min-height: 0; width: 100%; height: 100%; object-fit: contain; object-position: center top;
  }
}