/* Layout: phone = one column (form, map, routes); ≥900px = form+map left, routes right. Gantry diamonds and money colours carry the ERP story. */
:root {
  --bg: #f4f8f7; --surface: #ffffff; --muted: #e8efee; --line: #d5e0de; --fg: #15232a; --fg-2: #56676e;
  --accent: #0f6b66; --accent-fg: #ffffff; --accent-soft: #dcefec;
  --toll: #c4520e; --toll-soft: #fbe9dc; --free: #17844f; --free-soft: #def3e6; --warn: #b42318;
  --net: #c3d0ce; --net-art: #dde6e4;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --r: 14px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #10181c; --surface: #172226; --muted: #1f2c31; --line: #2a3a40; --fg: #e8f0ef; --fg-2: #9db0b4;
  --accent: #4fc2b7; --accent-fg: #0d1a1d; --accent-soft: #1b3533;
  --toll: #f2a05e; --toll-soft: #3a2a1d; --free: #5fd394; --free-soft: #173426; --warn: #ff8a7a;
  --net: #34474d; --net-art: #253539; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #10181c; --surface: #172226; --muted: #1f2c31; --line: #2a3a40; --fg: #e8f0ef; --fg-2: #9db0b4;
  --accent: #4fc2b7; --accent-fg: #0d1a1d; --accent-soft: #1b3533;
  --toll: #f2a05e; --toll-soft: #3a2a1d; --free: #5fd394; --free-soft: #173426; --warn: #ff8a7a;
  --net: #34474d; --net-art: #253539; color-scheme: dark }
* { box-sizing: border-box }
[hidden] { display: none !important }
html { -webkit-text-size-adjust: 100% }
body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--fg); font: 15px/1.45 var(--sans); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: max(14px, env(safe-area-inset-top, 0px)) max(40px, env(safe-area-inset-bottom, 0px)) }
.tnum { font-variant-numeric: tabular-nums }
.wrap { max-width: 1120px; margin: 0 auto; display: grid; gap: 16px }
header { display: flex; align-items: center; gap: 12px }
header h1 { font-size: 18px; margin: 0; letter-spacing: -0.01em; text-wrap: balance }
header p { margin: 0; color: var(--fg-2); font-size: 12.5px }
.layout { display: grid; gap: 16px }
@media (min-width: 900px) { .layout { grid-template-columns: 390px minmax(0, 1fr); align-items: start } .left { position: sticky; top: calc(12px + env(safe-area-inset-top, 0px)) } }
.left, .right { display: grid; gap: 14px; min-width: 0 }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px }
form { display: grid; gap: 12px }
.places { position: relative; display: grid; gap: 8px }
.field { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; background: var(--surface) }
.field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }
.field .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; border: 2.5px solid var(--accent) }
.field .dot.d { background: var(--accent) }
.field label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-2); width: 34px; flex: none }
.combo { position: relative; min-width: 0 }
form > *, .places > * { min-width: 0 }
.combo input { font: inherit; color: var(--fg); background: transparent; border: 0; height: 46px; flex: 1 1 0; width: 0; min-width: 0; outline: none; font-size: 16px; text-overflow: ellipsis }
.codes { display: inline-flex; gap: 3px; flex: none; margin-right: 26px }
.code { font: 600 10px/1 var(--mono); color: #fff; background: var(--lc); padding: 3px 4px; border-radius: 4px }
.list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; max-height: 290px; overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgb(0 0 0 / .18) }
.list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px; border-radius: 8px; cursor: pointer; font-size: 15px }
.list li.on, .list li:hover { background: var(--muted) }
.list li .codes { margin: 0 }
.list li small { display: block; font-size: 12.5px; color: var(--fg-2) }
.code.postal { background: var(--fg-2) }
.list li.none { cursor: default; color: var(--fg-2); font-size: 14px } .list li.none:hover { background: none }
select, input[type=datetime-local] { font: inherit; color: var(--fg); background: transparent; border: 0; height: 46px; width: 100%; min-width: 0; outline: none; font-size: 16px }
.swap { position: absolute; right: -6px; z-index: 3; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--fg-2); font-size: 16px; cursor: pointer }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; background: var(--muted); border-radius: 10px; padding: 3px }
.seg button { font: inherit; font-size: 14px; font-weight: 500; height: 38px; border: 0; border-radius: 8px; background: transparent; color: var(--fg-2); cursor: pointer; white-space: nowrap }
.seg button[aria-checked="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 2px rgb(0 0 0 / .12) }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.row > span { font-size: 14px; font-weight: 500 }
.select { border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; max-width: 64%; flex: 1 }
.lbl { font-size: 13px; font-weight: 500; margin-bottom: -6px }
.opt { display: flex; gap: 10px; align-items: center; font-size: 14px }
.opt input { width: 18px; height: 18px; accent-color: var(--accent) }
.go { display: flex; gap: 8px }
.primary { flex: 1; height: 48px; border: 0; border-radius: 11px; background: var(--accent); color: var(--accent-fg); font: 600 16px var(--sans); cursor: pointer }
.star { width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--fg-2); font-size: 20px; cursor: pointer }
.star[aria-pressed="true"] { color: var(--toll); border-color: var(--toll) }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px }
.chip { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 99px; background: var(--muted); font-size: 13px }
.chip button { border: 0; background: none; color: var(--fg); font: inherit; padding: 5px 4px 5px 11px; cursor: pointer }
.chip button + button { padding: 5px 10px 5px 4px; color: var(--fg-2) }
.eyebrow, .k { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--fg-2); margin: 0 0 6px }
.map { padding: 0; overflow: hidden }
.map svg { display: block; width: 100%; height: auto; max-width: 100% }
.net-exp { stroke: var(--net); stroke-width: 6; stroke-linecap: round }
.net-art { stroke: var(--net-art); stroke-width: 3; stroke-linecap: round }
.rt-alt { fill: none; stroke: var(--fg-2); stroke-opacity: .35; stroke-width: 6; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 2 12 }
.rt-casing { fill: none; stroke: var(--surface); stroke-width: 16; stroke-linejoin: round; stroke-linecap: round }
.rt-sel { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linejoin: round; stroke-linecap: round }
.pin-o { fill: var(--surface); stroke: var(--accent); stroke-width: 5 } .pin-d { fill: var(--accent); stroke: var(--surface); stroke-width: 4 }
.pin-l { font: 600 24px var(--sans); fill: var(--fg); text-anchor: middle; paint-order: stroke; stroke: var(--surface); stroke-width: 6 }
.gm-toll { fill: var(--toll); stroke: var(--surface); stroke-width: 3 } .gm-free { fill: var(--free); stroke: var(--surface); stroke-width: 3 }
.gm-t { font: 600 12px var(--mono); fill: #fff; text-anchor: middle }
.legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 8px 14px 10px; font-size: 12px; color: var(--fg-2) }
.legend i { display: inline-block; width: 10px; height: 10px; transform: rotate(45deg); margin-right: 6px; border-radius: 2px }
.lead { margin: 0; font-size: 15.5px } .sub { margin: 4px 0 0; color: var(--fg-2); font-size: 13px } .note { margin: 8px 0 0; font-size: 13px; color: var(--accent) }
.free-t { color: var(--free) } .toll-t { color: var(--toll) } .muted { color: var(--fg-2) }
#error { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--toll-soft); color: var(--warn); font-size: 14px }
.cards { display: grid; gap: 12px }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden }
.card.is-sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }
.card.is-over { opacity: .8 }
.card-main { display: block; width: 100%; text-align: left; background: none; border: 0; color: inherit; font: inherit; padding: 14px; cursor: pointer }
.card-text { min-width: 0 }
.badges { display: flex; flex-wrap: wrap; gap: 6px; min-height: 20px; margin-bottom: 6px }
.badge { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; background: var(--accent-soft); color: var(--accent) }
.badge.free { background: var(--free-soft); color: var(--free) } .badge.warn { background: var(--toll-soft); color: var(--warn) }
.price { font: 600 38px/1.05 var(--mono); letter-spacing: -0.03em; display: flex; align-items: baseline; gap: 8px }
.price span { font: 500 12px var(--sans); color: var(--fg-2); letter-spacing: .04em }
.facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 14px; color: var(--fg-2) } .facts b { color: var(--fg) }
.via { margin-top: 3px; font-size: 14px; color: var(--fg-2) }
.tip { margin: 0 14px 12px; padding: 9px 12px; border-radius: 10px; background: var(--free-soft); color: var(--free); font-size: 14px }
details { border-top: 1px solid var(--line) }
summary { list-style: none; cursor: pointer; padding: 11px 14px; font-size: 14px; font-weight: 500; display: flex; justify-content: space-between }
summary::-webkit-details-marker { display: none }
summary::after { content: "▾"; color: var(--fg-2) } details[open] summary::after { content: "▴" }
.gantries { list-style: none; margin: 0; padding: 0 14px 10px; display: grid; gap: 10px }
.gantries li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start }
.gno { font: 600 11px var(--mono); width: 28px; height: 22px; display: grid; place-items: center; border-radius: 6px; margin-top: 2px }
.gno.toll { background: var(--toll-soft); color: var(--toll) } .gno.free { background: var(--free-soft); color: var(--free) }
.gname { font-size: 14px; font-weight: 500 } .gwarn { font-size: 12.5px; color: var(--toll) } .gmeta { font-size: 12.5px; color: var(--fg-2) } .gamt { font: 600 14px var(--mono) }
.actions { display: grid; gap: 6px; padding: 10px 14px 14px; border-top: 1px solid var(--line) }
.btn { display: flex; align-items: center; justify-content: center; height: 38px; border: 1px solid var(--line); border-radius: 10px; color: var(--fg); text-decoration: none; font-size: 13.5px; font-weight: 500 }
.foot { font-size: 12px; color: var(--fg-2); margin: 0; max-width: 70ch }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important } }

.code.postal { background: var(--fg-2) }
.code.address { background: var(--accent) ; color: var(--accent-fg) }
.list li.group { cursor: default; padding: 8px 10px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--fg-2) }
.list li.group:hover { background: none }
.list li .sname { min-width: 0 }
.list li small { overflow-wrap: anywhere }
.gps { flex: none; width: 34px; height: 34px; margin-right: 22px; border: 0; border-radius: 8px; background: transparent; color: var(--accent); cursor: pointer; display: grid; place-items: center }
.gps:hover { background: var(--accent-soft) }
.gps[aria-busy="true"] svg { animation: spin 1s linear infinite }
.gps + .codes, #from-field .codes { margin-right: 0 }
@keyframes spin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .gps[aria-busy="true"] svg { animation: none } }
.foot a { color: inherit }
.maps-hint { margin: 0; font-size: 12.5px; color: var(--fg-2); text-align: center }

/* Google-style place fields: name on top, address underneath */
.inwrap { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; min-height: 54px; padding-block: 5px }
.inwrap input { height: 28px; flex: none; width: 100% }
.addr { display: block; font-size: 12.5px; line-height: 1.3; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.field .gps { margin-right: 26px }
.list li { justify-content: flex-start; align-items: flex-start }
.list li .pin { flex: none; margin-top: 2px; color: var(--fg-2) }
.list li.on .pin { color: var(--accent) }

/* New-rates warning */
.rates-banner { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px 11px 14px; border-radius: 12px; background: var(--toll-soft); color: var(--fg); border: 1px solid color-mix(in oklab, var(--toll) 35%, transparent) }
.rates-banner > svg { flex: none; margin-top: 1px; color: var(--toll) }
.rates-banner p { margin: 0; flex: 1; min-width: 0; font-size: 14px }
.rates-banner a { color: var(--toll); font-weight: 600 }
.rb-close { flex: none; width: 28px; height: 28px; margin: -3px -2px 0 0; border: 0; border-radius: 8px; background: transparent; color: var(--fg-2); font-size: 20px; line-height: 1; cursor: pointer }
.rb-close:hover { background: color-mix(in oklab, var(--toll) 15%, transparent) }

/* Car + fuel cost */
.car-dot { border-radius: 3px !important; border-color: var(--fg-2) !important }
.energy { border: 1px solid var(--line); border-radius: 10px; background: var(--surface) }
.energy summary { padding: 10px 12px; font-size: 13px; color: var(--fg-2); gap: 10px; align-items: center }
.energy summary::after { content: none }
.energy summary #energySummary { min-width: 0 }
.energy .edit { flex: none; color: var(--accent); font-weight: 600 }
.energy[open] .edit { visibility: hidden }
.energy-body { display: grid; gap: 8px; padding: 2px 12px 12px }
.egroup { display: grid; gap: 8px }
.erow { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px }
.erow > span:first-child { color: var(--fg-2); flex: none }
.erow select, .erow input { font: inherit; font-size: 16px; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; height: 38px; padding: 0 8px; min-width: 0 }
.erow select { flex: 0 1 230px; height: 38px }
.erow .num { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-2) }
.erow .num input { width: 86px; text-align: right }
.enote { margin: 2px 0 0; font-size: 12px; color: var(--fg-2) }
.linkbtn { border: 0; background: none; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer }
.price { color: var(--fg) }
.split { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 4px; font-size: 14px; color: var(--fg-2) }
.split b { font-family: var(--mono); font-weight: 600; color: var(--fg) }
.split b.toll-t { color: var(--toll) } .split b.free-t { color: var(--free) }

/* Parking */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.parking { display: grid; gap: 10px }
.park-head { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.park-head h2 { margin: 0; font-size: 16px; min-width: 0; overflow-wrap: anywhere }
.park-dur select { font: inherit; font-size: 15px; color: var(--fg); background: var(--surface); border: 1px solid var(--line); border-radius: 8px; height: 36px; padding: 0 8px }
.parking h3 { margin: 6px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--fg-2); font-weight: 600 }
.park-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.park-item { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between }
.park-building { padding-top: 2px }
.pi-main { min-width: 0 }
.pi-name { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere }
.pi-meta { font-size: 12.5px; color: var(--fg-2) }
.pi-cost { font: 600 17px var(--mono); flex: none }
.pi-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px }
.pi-tags span { font-size: 11px; padding: 2px 7px; border-radius: 99px; background: var(--muted); color: var(--fg-2) }
.rate-text { margin: 0; font-size: 13px; color: var(--fg); background: var(--muted); border-radius: 8px; padding: 8px 10px; overflow-wrap: anywhere }
.pi-note, .pi-src { margin: 0; font-size: 12.5px; color: var(--fg-2) }
.pi-src a { color: inherit }
.park-total { margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px }
.park-total b { font-family: var(--mono) }

/* Cost breakdown on route cards */
.costs { margin: 2px 0 10px; display: grid; gap: 3px }
.costs > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px }
.costs dt { margin: 0; font-size: 14px; color: var(--fg-2); min-width: 0 }
.costs dt small { display: block; font-size: 12px; color: var(--fg-2); opacity: .85; overflow-wrap: anywhere }
.costs dd { margin: 0; font: 600 15px var(--mono); color: var(--fg); text-align: right; white-space: nowrap }
.costs dd .muted { font: 500 13px var(--sans) }
.costs .total { margin-top: 4px; padding-top: 7px; border-top: 1px solid var(--line) }
.costs .total dt { font-size: 15px; font-weight: 600; color: var(--fg) }
.costs .total dd { font-size: 26px; letter-spacing: -0.02em }
/* Parking chooser */
.park-list li { list-style: none }
.park-opt { width: 100%; display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; text-align: left; font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer }
.park-opt.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft) }
.park-opt:disabled { cursor: default; opacity: .75 }
.park-opt .pi-main { display: grid; gap: 2px }
.park-opt .pi-name, .park-opt .pi-meta, .park-opt .pi-note { display: block }
.rate-details { border: 0 }
.rate-details summary { padding: 4px 0; font-size: 13px; color: var(--accent); justify-content: flex-start; gap: 6px }
.rate-details summary::after { content: none }