/* [hidden] MUST WIN. `.rows{display:grid}` beat the UA's `[hidden]{display:none}`, so the old row
   list stayed laid out in the same grid cell as the cards, invisible but on top — swallowing every
   click that was not on the chevron (founder 07.09: «розкриття тільки при натиску на стрілку»). */
[hidden]{display:none!important}
/* Roadme web widget — the app's cost sheet, in the browser. Shared by every feature page. */
.tool{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:24px;margin:8px 0 40px;backdrop-filter:blur(14px)}
.tool h2{margin:0 0 6px}.tool>p{margin:0 0 14px;color:var(--ink-2)}
.tool form{display:grid;gap:12px}
.field{position:relative;display:grid;gap:4px}
.field>span{font:600 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.field input{width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(127,127,127,.08);color:var(--ink);font:16px/1.3 var(--body)}
.field input:focus{outline:none;border-color:var(--brand)}
.hits{position:absolute;left:0;right:0;top:100%;z-index:5;margin:4px 0 0;padding:6px;list-style:none;background:var(--bg);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.25);max-height:260px;overflow:auto}
.hits li{padding:9px 10px;border-radius:9px;cursor:pointer;font-size:15px;color:var(--ink)}.hits li small{display:block;color:var(--muted);font-size:12px}.hits li:hover{background:rgba(244,69,28,.12)}
/* Outside what we route: shown so the reader knows we understood the word, never selectable. */
.hits li.off{cursor:default;color:var(--ink-2)}.hits li.off:hover{background:transparent}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.chips{display:flex;gap:8px;flex-wrap:wrap}
/* THE WIDGET'S CHIPS STAY PURPLE, AND THAT WAS TRIED BOTH WAYS (founder 25.09).
   They were made coral to match the home page's vehicle chips, seen on the live site, and turned
   back the same day: «поверни назад це, краще як є зараз». The two sets are not the same control —
   the five on the home page are a showcase that answers «which of these are you», the five groups
   here are the form you fill in, and in a form a chosen chip sits beside a coral button you press.
   Purple keeps «what I picked» and «what I press» apart. The home page keeps its coral. */
.chip{padding:9px 14px;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--ink);font:500 14px/1 var(--body);cursor:pointer}
.chip[aria-pressed="true"]{border-color:var(--purple,#7C5CF6);color:var(--purple,#7C5CF6);background:color-mix(in srgb,var(--purple,#7C5CF6) 16%,transparent)}
:root{--purple:#7C5CF6}@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--purple:#A78BFA}}:root[data-theme="dark"]{--purple:#A78BFA}
.opts{gap:8px 18px}
.status{font-size:14px;color:var(--muted)}.status.err{color:var(--brand)}
/* THE RESULT IS ONE LAYOUT (25.09): the road cards, then the sources line — on every page, since every
   page is the /calculator/ block. The old feature pages drew the map INSIDE the result, beside a big
   single figure, with named grid areas for both; those areas are gone with them. */
.result{margin-top:6px;border-top:1px solid var(--line);padding-top:14px;display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.map{height:340px;border-radius:18px;overflow:hidden;margin:0;border:1px solid var(--line);background:rgba(127,127,127,.08)}
@media(max-width:640px){.map{height:280px}}
.map .maplibregl-ctrl-attrib{font-size:10px}
.rows{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.rows li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;background:rgba(127,127,127,.07);font-size:14px}
.rows .t{color:var(--muted);font-variant-numeric:tabular-nums;font-size:13px;min-width:38px}.rows .n{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.rows .free .n{color:var(--muted);font-weight:500}.rows small{color:var(--muted);display:block}
.rows .deps{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}.rows .deps span{font-size:12px;padding:2px 7px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2);font-variant-numeric:tabular-nums}.rows .deps span.next{border-color:var(--accent);color:var(--accent)}
.rows h4{margin:14px 0 4px;font:700 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);grid-column:1/-1}
.result .foot{font-size:12px;color:var(--muted);margin:0}
.hint{font-size:13px;color:var(--muted)}
.line{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line);color:var(--ink-2);text-decoration:none;font-size:14px}
.line:last-child{border:0}.line b{color:var(--ink);font-variant-numeric:tabular-nums;font-size:16px}
.line i{grid-column:1/-1;font-style:normal;font-size:12px;color:var(--muted)}a.line:hover,a.line:hover i{color:var(--accent)}
/* The fuel page: the month's prices, the two knobs, the quick sum. */
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 24px}
@media(max-width:640px){.prices{grid-template-columns:1fr}}
.price{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 18px;display:grid;gap:4px}
.price .k{font:600 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.price b{font:800 clamp(30px,4vw,40px)/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}.price b small{font:600 14px/1 var(--body);color:var(--muted)}
.price .d{font-size:13px;color:var(--ink-2);min-height:1.2em}
.prices .src{grid-column:1/-1;margin:0;font-size:13px;color:var(--muted)}
.knob{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-2)}
.knob input{width:82px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:rgba(127,127,127,.08);color:var(--ink);font:15px var(--body);font-variant-numeric:tabular-nums}
.knob input:focus{outline:none;border-color:var(--brand)}.knob small{color:var(--muted)}
.quick{display:flex;gap:10px 16px;flex-wrap:wrap;align-items:center;padding:12px 14px;border-radius:14px;background:rgba(127,127,127,.07);font-size:14px;color:var(--ink-2)}
.quick input{width:82px;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:15px var(--body)}
.quick b{font:800 24px/1 var(--display);color:var(--accent);font-variant-numeric:tabular-nums}.quick .mil{color:var(--muted)}
/* The optimizer: a list of stops, and what the order saved. */
.stops{display:grid;gap:8px}.field.stop{grid-template-columns:1fr auto;align-items:center;gap:4px 8px}
.field.stop>.lbl{grid-column:1/-1}.field.stop .hits{grid-column:1/-1}.field.stop .ctl{display:flex;gap:4px}
.field.stop .ctl button{width:34px;height:38px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--muted);font:16px/1 var(--body);cursor:pointer}.field.stop .ctl button:hover{color:var(--brand);border-color:var(--brand)}.field.stop .ctl button[hidden]{display:none}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}#opt[hidden]{display:none}
.saved{display:grid;gap:2px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--accent);margin-bottom:10px;text-align:left}
.saved .k{font:600 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}.saved b{font:800 22px/1.1 var(--display);color:var(--ink)}.saved small{color:var(--muted);font-size:13px}
.saved.warn{border-color:var(--muted)}.saved.warn .k{color:var(--muted)}
/* The whole-bill form: the app's settings groups. */
.grp{display:grid;gap:6px;padding:10px 0 4px;border-top:1px solid var(--line)}.grp .lbl{font:600 12px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.grp .hint{font-size:13px;color:var(--muted)}.grp .opts{margin-top:4px}
.plate input{width:150px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(127,127,127,.08);color:var(--ink);font:600 16px/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase}
.plate input:focus{outline:none;border-color:var(--brand)}.plate .btn{padding:9px 16px}
/* The shell — Gowme's geometry for the whole-bill calculator, inside the content width: the inputs in
   a panel on the left, the map on the right of the same card from the first second, the route drawn
   over it when the bill is ready. (Full-bleed was tried and read as a wall on a wide screen — founder 06.09.) */
body:has(.tool.shell) .wrap{max-width:1200px}
.tool.shell{padding:0;display:grid;grid-template-columns:minmax(380px,45%) minmax(0,1fr);height:min(76vh,780px);min-height:560px;overflow:hidden}
.tool.shell .panel{overflow:auto;overscroll-behavior:contain;padding:22px 24px 28px;display:grid;gap:12px;align-content:start;border-right:1px solid var(--line)}
.tool.shell .panel>h2{margin:0}.tool.shell .panel>p{margin:0 0 6px}
.tool.shell .map{height:100%;min-height:0;border-radius:0;border:0;margin:0}
@media(max-width:899px){
  /* A phone: the panel first, the map only once there is a road to show — in flow, clipped, never sticky. */
  /* Relative, not static: static beat MapLibre's own position:relative, and the OSM credit (absolute,
     bottom-right) fell to the foot of the whole card, over the text there (QA 29.09, 360 px). */
  .tool.shell{grid-template-columns:1fr;grid-template-rows:auto;height:auto;min-height:0;overflow:hidden;border-radius:20px}
  .tool.shell .map{display:none}
  .tool.shell.has-route .map{display:block;grid-row:1;position:relative;height:44vh;min-height:280px;border-radius:0}
  /* A charger page is the exception: there the map IS the answer (every fast charger, filtered by
     network), and a phone showed none of it until a route was priced. It opens on top, as a road does. */
  .tool.shell[data-chargers] .map{display:block;grid-row:1;position:relative;height:48vh;min-height:300px;border-radius:0}
  .tool.shell .panel{grid-row:2;border-right:0;overflow:visible;padding:18px 16px 24px}
}
/* The app's field list: a dot in each field, the row under the first one, text buttons, the CTA after the points. */
.field.stop{grid-template-columns:auto 1fr auto;align-items:center;gap:0 10px;padding:0 12px;border-radius:14px;border:1px solid var(--line);background:rgba(127,127,127,.08)}
.field.stop>.lbl{display:none}.field.stop .hits{grid-column:1/-1}.field.stop input{border:0;background:transparent;padding:14px 0;font-size:16px}
.field.stop .dot{width:9px;height:9px;border-radius:50%;background:var(--muted)}.field.stop[data-pos="from"] .dot{background:var(--brand)}.field.stop[data-pos="via"] .dot{background:var(--purple)}
.field.stop .ctl button{width:30px;height:32px;border:0;background:transparent}
.under{display:flex;justify-content:space-between;align-items:center;padding:2px 6px 0}
.textbtn{display:inline-flex;align-items:center;gap:8px;padding:8px 4px;border:0;background:transparent;color:var(--ink-2);font:500 15px/1 var(--body);cursor:pointer}.textbtn:hover{color:var(--ink)}
.textbtn.here{color:#2E7BF6}.textbtn .plus{font-size:18px;line-height:1}.textbtn[hidden]{display:none}
.between{justify-content:space-between;align-items:center}
.when2{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2);font-size:15px}.when2 input{border:0;background:transparent;color:var(--ink);font:15px var(--body);padding:6px 0;max-width:190px}
/* THE CALCULATE BUTTON OWNS ITS OWN BOX (founder 25.09: «зменш відступи від кнопки згори і знизу
   калькуляції, вона зараз розриває все»).

   It was not styled that way by anyone. Every article page carries, in its own <style>, a rule for
   the call-to-action CARD that sits under the text — `.cta{background;border;border-radius:24px;
   padding:26px;margin:40px 0}` — and this button is `class="btn cta"`. `.btn.cta` here is (0,2,0)
   and wins the colours it declares, but it declared no padding, no margin and no radius, so the
   article card handed it 26 px of padding and 40 px of air above and below: a 52 px button drawn
   72 px tall with a 48 px gap to the button above it and 40 px to the panel below.

   So it states its own box, which is also what stops the next page-level rule reaching it. The
   radius is `.btn.tint`'s 14 px, because Plan charging sits directly above it and they are one
   stack. (The pages have been scoped to `.cta:not(.btn)` as well — this is the belt.) */
.actions{display:grid;gap:8px}.btn.cta{justify-content:center;min-height:52px;font-size:16px;border:1px solid var(--brand);color:var(--ink);background:rgba(127,127,127,.06);gap:10px;border-radius:14px;padding:10px 18px;margin:6px 0 10px}.btn.cta svg{color:var(--brand)}.btn.cta:hover{background:color-mix(in srgb,var(--brand) 10%,transparent)}
/* NO RULE ABOVE «Vehicle and fuel» (founder 11.09: «прибери перетинку і зайві відступи по
   висоті, тому що зараз розриває все»). A hairline plus its margins cut the panel in two —
   the form above, the settings below — when they are one form. The summary row is heading
   enough, and the app's own sheet separates them with nothing either. */
details.vehicle{border-top:0;margin-top:0}details.vehicle>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:6px 2px;cursor:pointer;color:var(--ink)}details.vehicle>summary::-webkit-details-marker{display:none}
details.vehicle>summary svg{color:var(--brand);flex:none}details.vehicle>summary b{font-weight:600;font-size:16px;flex:1}details.vehicle>summary .sum{color:var(--muted);font-size:15px}
details.vehicle>summary .chev{width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s;margin:0 4px 4px}details.vehicle[open]>summary .chev{transform:rotate(-135deg);margin:4px 4px 0}
details.vehicle .grp:first-of-type{border-top:0;padding-top:0}
.status:empty{display:none}
details.vehicle{margin-top:0}
.line>span:first-child{color:var(--ink-2)}
.nl.lang{color:var(--muted);font-size:13px;border:1px solid var(--line);border-radius:999px;padding:6px 10px}@media(max-width:820px){.nl.lang{display:inline-flex}}
/* The vehicle section fills its width like the app's sheet: chips share the row equally, the two
   knobs split it in half, the plate field runs edge to edge. */
details.vehicle .chips{display:flex;flex-wrap:wrap;gap:8px}
details.vehicle .chips .chip{flex:1 1 0;min-width:max-content;justify-content:center;text-align:center;padding:11px 10px}
details.vehicle .opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex-wrap:nowrap}
@media(max-width:480px){details.vehicle .opts{grid-template-columns:1fr}}
details.vehicle .knob{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px}
details.vehicle .knob input{width:100%;min-width:0}
details.vehicle .plate{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
details.vehicle .plate input{width:100%;min-width:0}
details.vehicle .grp{padding:12px 0 8px}
/* The other roads: a row per option, badges as the app's, tap to switch. */
@media(min-width:900px){.result:not(.tool.shell .result){grid-template-areas:"map head" "map alts" "map rows" "map foot";grid-template-rows:auto auto 1fr auto}}
/* The app's cost sheet: a card per road, the chosen one open; toll stations and sailings fold out inside. */
.roads{display:grid;gap:8px}
.road{border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden}.road.open{box-shadow:inset 3px 0 0 var(--road,var(--accent))}
.road-h{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"badges saving" "title total" "stats stats";gap:6px 10px;align-items:center;width:100%;text-align:left;padding:12px 14px;border:0;background:transparent;color:var(--ink);font:14px var(--body);cursor:pointer}
.road-h .badges{grid-area:badges}.road-h .saving{grid-area:saving;font-size:12px;color:#22C55E;text-align:right}.road-h .title{grid-area:title;font-weight:500;color:var(--ink)}.road-h>b{grid-area:total}.road-h>i{grid-area:stats;display:flex;gap:12px;flex-wrap:wrap}.road-h>i span{color:var(--ink);font-weight:500;font-size:13px}.road-h>i .slow{color:#F59E0B}.road-h .chev{display:none}
.road-h .badges{display:flex;gap:6px;flex-wrap:wrap}.road-h .badge{font:700 11px/1 var(--body);letter-spacing:.04em;padding:4px 9px;border-radius:999px;border:1.5px solid var(--road,var(--accent));color:var(--ink);background:transparent}
.road-h b{font:800 22px/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}.road-h i{grid-column:1/-1;font-style:normal;font-size:12px;color:var(--muted)}
.road-h .chev{width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin:0 4px 4px}.road.open .road-h .chev{transform:rotate(-135deg);margin:4px 4px 0}
.road-b{padding:0 14px 10px;display:grid}
/* Whose numbers these are, per road — quiet, under everything the road says. */
/* What the total is missing: orange, next to the figure, and spelled out inside the card. */
.road-b .sub summary .warn,.road-b .line .warn{color:#F5A524;font-weight:800;margin-left:4px}
.road-h .warn{display:inline-block;min-width:18px;text-align:center;color:#F5A524;font-weight:800}
.road-b .warnnote{margin:8px 0 0;padding:10px 12px;border-radius:10px;background:rgba(245,165,36,.10);border:1px solid rgba(245,165,36,.35);font-size:12px;line-height:1.5;color:var(--ink-2)}
.road-b .src{margin:8px 0 0;padding-top:8px;border-top:1px solid var(--line);font-size:11px;line-height:1.5;color:var(--muted)}
.road-b .src a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line)}
/* THE RULES OF EACH COUNTRY ON THE ROAD (founder 29.09): a line per country in the card, a few facts
   each. «.rchip», not «.chip»: these are words, not the buttons the form's chips are. */
/* min-width 0: the card's body is a grid, and a wide table would otherwise widen the whole card past its edge. */
.road-b .rules{margin-top:8px;padding:2px 0;border-top:1px solid var(--line);min-width:0}
/* Folded, the block is one line that reads like «Compare the rules →»: same size, colour and arrow;
   the arrow turns down while it is open. \2192 — a glyph in CSS turns to mojibake without the charset. */
.rules>summary{list-style:none;display:flex;align-items:center;gap:.3em;padding:8px 0;cursor:pointer;color:var(--ink-2);-webkit-tap-highlight-color:transparent}
.rules>summary::-webkit-details-marker{display:none}
.rules>summary h5{margin:0;font:500 13.5px/1.3 var(--body);color:inherit}
.rules>summary::after{content:"\2192";font:500 13.5px/1 var(--body);transition:transform .15s ease}
.rules[open]>summary::after{transform:rotate(90deg)}
.rules>summary:hover{color:var(--ink)}
.rules>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.rules .rs{margin:0 0 6px;font-size:12px;color:var(--muted)}
.rules ul{list-style:none;margin:0;padding:0;display:grid}
.rules li{display:grid;grid-template-columns:minmax(64px,auto) 1fr;gap:4px 10px;align-items:baseline;margin:0;padding:6px 0}
.rules li>b{font-size:13.5px;font-weight:600;color:var(--ink)}
.rules .chips{display:flex;flex-wrap:wrap;gap:5px;min-width:0}
.rules .rchip{font-size:12.5px;line-height:1.35;padding:2px 9px;border-radius:99px;border:1px solid var(--line);color:var(--ink-2)}
.rules .rchip.money{border-color:rgba(245,165,36,.55)}
.rules .rl{grid-column:2;font-size:12.5px;line-height:1.5;color:var(--muted)}
.rules .rl a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line)}
.rules .rules-more{padding:8px 0 2px;font-size:13.5px;color:var(--ink-2)}
.rules .rules-more:hover{color:var(--ink)}
/* The comparison: a dialog over the page. The table scrolls inside it both ways, and the topic column
   and the country row stay put — so both are solid, never the glass of a card. */
dialog.rules-dlg{width:min(1100px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;border:1px solid var(--line);border-radius:20px;background:var(--bg);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog.rules-dlg[open]{display:flex;flex-direction:column}
dialog.rules-dlg::backdrop{background:rgba(10,12,16,.55)}
.rules-dlg .dlg-h{display:flex;align-items:baseline;gap:6px 12px;flex-wrap:wrap;padding:16px 56px 12px 20px;border-bottom:1px solid var(--line);position:relative}
.rules-dlg .dlg-h b{font-size:17px}
.rules-dlg .dlg-h span{font-size:13px;color:var(--muted)}
.rules-dlg .x{position:absolute;right:10px;top:9px;width:38px;height:38px;border:0;border-radius:12px;background:transparent;color:var(--ink-2);font-size:18px;cursor:pointer}
.rules-dlg .x:hover{background:rgba(127,127,127,.14);color:var(--ink)}
.rules-dlg .cmp-wrap{overflow:auto;flex:1;min-height:0;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.rules-dlg table.cmp{border-collapse:separate;border-spacing:0;font-size:13.5px;line-height:1.5;min-width:100%}
.rules-dlg .cmp th,.rules-dlg .cmp td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line);text-transform:none;letter-spacing:normal;background:var(--bg)}
.rules-dlg .cmp thead th{position:sticky;top:0;z-index:2;font-weight:600;font-size:14px;white-space:nowrap}
.rules-dlg .cmp th[scope=row]{position:sticky;left:0;z-index:1;width:150px;min-width:150px;font-weight:500;font-size:13px;color:var(--ink-2)}
.rules-dlg .cmp thead th:first-child{left:0;z-index:3}
.rules-dlg .cmp td{min-width:230px;color:var(--ink)}
.rules-dlg .cmp td p{margin:0 0 6px}.rules-dlg .cmp td p:last-child{margin-bottom:0}
.rules-dlg .cmp .s{color:var(--muted);text-decoration:none;font-size:12px}
.rules-dlg .cmp .none{color:var(--muted)}
.rules-dlg .grades{margin:2px 0 8px}.rules-dlg .grades>summary{cursor:pointer;font-size:12.5px;color:var(--ink-2)}
.rules-dlg .grades ol{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.rules-dlg .grades li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:12.5px;align-items:baseline;border-top:1px solid var(--line);padding-top:4px}
.rules-dlg .grades li small{display:block;color:var(--muted);font-size:11.5px}
.rules-dlg .grades li b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:640px){dialog.rules-dlg{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0}.rules-dlg .cmp th[scope=row]{width:100px;min-width:100px}.rules-dlg .cmp td{min-width:210px}}
/* RULES, PHASE 2: the dog box, «Before you go» folded under the lines, and the border tapped on the
   map. The list inside «Before you go» is a plain list — the country lines' two-column grid is not. */
.rules .rdog{display:flex;width:fit-content;align-items:center;gap:8px;margin:6px 0 2px;font-size:13px;color:var(--ink-2);cursor:pointer}
.rules .rdog input{width:16px;height:16px;margin:0;accent-color:var(--brand,#F4451C)}
.rules .rprep{margin:6px 0 0;border-top:1px solid var(--line);padding-top:4px}
.rules .rprep>summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink);padding:4px 0}
.rules .rpc{margin:6px 0 0}
.rules .rpc>b{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:2px}
.rules .rpc ul{display:block;list-style:disc;padding-left:18px}
.rules .rpc li{display:list-item;padding:2px 0;font-size:13px;line-height:1.45;color:var(--ink-2)}
.bpop{display:grid;gap:4px;min-width:0}
.bpop small{font-size:12px;color:var(--muted)}
.bpop strong{font:600 15px/1.3 var(--body);overflow-wrap:anywhere}
.bpop ul{margin:2px 0 0;padding-left:16px;font-size:13px;line-height:1.45;color:var(--ink)}
.bpop li{margin:2px 0}
.bpop .chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.bpop .rchip{font-size:12px;line-height:1.35;padding:2px 8px;border-radius:99px;border:1px solid var(--line);color:var(--ink-2)}
.bpop .rchip.money{border-color:rgba(245,165,36,.55)}
.bpop .rules-more{justify-self:start;padding:6px 0 0;font-size:13px;color:var(--ink-2)}
.road-b .line{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline;padding:9px 0;border-top:1px solid var(--line);border-bottom:0;color:var(--ink-2);font-size:14px}.road-b .line b{color:var(--ink);font-size:16px;font-variant-numeric:tabular-nums}.road-b .line i{grid-column:1/-1;font-style:normal;font-size:12px;color:var(--muted)}
details.sub{border-top:1px solid var(--line)}details.sub>summary>span:first-child{color:var(--ink-2)}/* THE WHOLE ROW OPENS IT, not the arrow (founder 07.09). The chevron auto-placed onto a third
   grid row under the note, so the row read as text with a stray arrow beneath it. Now it sits at the
   end of the value line, the row has a hover and press state, and the tap target is the full width. */
details.sub>summary{list-style:none;display:grid;grid-template-columns:1fr auto auto;gap:2px 10px;align-items:baseline;padding:9px 10px;margin:0 -10px;border-radius:12px;cursor:pointer;color:var(--ink-2);font-size:14px;-webkit-tap-highlight-color:transparent}
details.sub>summary:hover{background:rgba(127,127,127,.10)}details.sub>summary:active{background:rgba(127,127,127,.16)}
details.sub>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}details.sub>summary::-webkit-details-marker{display:none}
details.sub>summary b{color:var(--ink);font-size:16px;font-variant-numeric:tabular-nums}details.sub>summary i{grid-row:2;grid-column:1/-1;font-style:normal;font-size:12px;color:var(--muted)}
details.sub>summary::after{content:"";grid-row:1;grid-column:3;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);align-self:center;margin:-3px 2px 0;transition:transform .15s ease}details.sub[open]>summary::after{transform:rotate(-135deg);margin:2px 2px 0}details.sub>summary:hover::after{border-color:var(--ink)}
details.sub .rows{margin:2px 0 8px;display:grid;gap:6px}
.price b{color:var(--ink)}
.foot a,footer a{color:inherit;text-decoration:underline;text-decoration-color:var(--line)}.foot a:hover,footer a:hover{color:var(--brand)}
/* The phone's chips: at most two rows per group — equal shares, a smaller face, no wrapping inside a chip. */
@media(max-width:899px){
  details.vehicle .chips .chip{font-size:13px;padding:10px 6px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  details.vehicle .chips[data-group="type"] .chip{flex-basis:calc(50% - 4px)}
  details.vehicle .chips[data-group="fuel"] .chip,details.vehicle .chips[data-group="len"] .chip{flex-basis:calc(33.34% - 6px)}
  details.vehicle .chips[data-group="weight"] .chip{flex-basis:calc(50% - 4px)}
  details.vehicle .chips[data-group="pay"] .chip{flex-basis:calc(50% - 4px)}
  footer{flex-direction:column;align-items:center;text-align:center;gap:10px}footer div{width:100%}footer a{margin:0 7px}
}
/* The «better in the app» card at the top of the panel on a phone. */
.appnag{display:grid;gap:8px;padding:14px 16px;border:1.5px solid var(--brand);border-radius:16px;margin-bottom:12px}
.appnag b{font:700 18px/1.1 var(--display)}.appnag>span{font-size:14px;color:var(--ink-2)}.appnag .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.appnag .btn{padding:9px 14px;font-size:14px}.appnag .textbtn{font-size:13px;color:var(--muted)}
/* One badge, a menu on tap: the language switcher. */
.langs{position:relative;margin-left:4px;flex:none}.langs summary{list-style:none;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid var(--line,var(--card-line));border-radius:999px;font:700 12px/1 var(--body);letter-spacing:.06em;color:var(--ink);cursor:pointer}.langs summary::-webkit-details-marker{display:none}
.langs summary i{width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin:-3px 0 0}.langs[open] summary i{transform:rotate(-135deg);margin:3px 0 0}
.langs .menu{position:absolute;right:0;top:calc(100% + 6px);min-width:150px;display:grid;background:var(--bg);border:1px solid var(--line,var(--card-line));border-radius:14px;padding:6px;box-shadow:0 14px 40px rgba(0,0,0,.28);z-index:20}
.langs .menu a{padding:9px 12px;border-radius:9px;font:500 14px/1 var(--body);color:var(--ink);text-decoration:none}.langs .menu a:hover{background:rgba(127,127,127,.12)}.langs .menu a[aria-current]{color:var(--brand);font-weight:700}
/* A COMPONENT OWNS ITS OWN BOX, BECAUSE THE PAGES DO NOT KNOW IT IS THERE.

   Founder 25.09: «прибери нижнє підчіркування під блоком мови, на всіх сторінках щоб зник цей
   баг». Fifty-five article pages style their FAQ accordions with a bare element selector —
   `details{border-bottom:1px solid var(--line);padding:10px 0}` — and a bare element selector
   cannot tell an accordion from the language switcher in the header or the vehicle panel inside
   the widget. Both are `<details>` too. Measured on /calculator/ before this: the language pill
   carried a hairline underneath and stood 49 px tall instead of 28, and the vehicle panel carried
   the same stray line.

   The pages are scoped now (`details:not([class])` — an accordion a page wrote has no class, a
   component always has one), and this line is the belt to that pair of braces: a header written
   once must not depend on seventy pages keeping their selectors to themselves, today or in a
   year. Declared here rather than left to the default so that it OVERRIDES rather than merely
   differs — `details` is (0,0,1) and these are (0,1,0) and (0,1,1). */
.langs,details.vehicle{border:0;padding:0}
/* A button at work: a spinner, no second press. */
.btn.busy{opacity:.85;pointer-events:none}.spin{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;animation:spin .8s linear infinite;margin-right:2px}@keyframes spin{to{transform:rotate(360deg)}}
.status{display:block;margin-top:6px}
.actions.bottom{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.cur{display:inline-flex;align-items:center;gap:7px}.cur select{background:transparent;border:0;color:var(--ink);font:inherit;font-size:14px;padding:2px 0;cursor:pointer;max-width:24ch}
/* THE CURRENCY HAS A NAME, AND THE ROW HAS ROOM FOR IT (founder 17.09: «повну назву валюти, а не
   кастрата, якщо місця вистачає по ширині строки»). 11ch was cut for the narrowest phone and then
   applied to every screen, so a desktop with half the row empty still read «NOK · Norw…». The cap
   is now the desktop one; below 520 px it goes back to the short form, where the row really is
   that tight. */
@media (max-width:520px){.cur select{max-width:11ch}}.cur select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.when2.cur svg,.opt.cur svg{flex:none;color:var(--muted)}

/* ── «Open this route»: a button on the card, a dialog in the middle of the screen ─────────────
   The fold-out it replaces pushed the rest of the page down and, on a phone, opened its rows below
   the fold. The app asks this question in a dialog; so does this now (founder 12.09). */
/* THE LABEL IS WHITE, THE MARK IS CORAL, AND THEY STAND TOGETHER (founder 12.09: «текст кнопки не
   білий, і іконка не біля тексту по центру»). The first cut let the icon float at the far left while
   `flex:1` on the label centred the text in what was left — two elements, each centred in its own
   half. Centring the ROW puts the pair in the middle as one thing, which is what the app does. */
.opennav {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin-top: 4px; padding: 13px 14px; border-radius: 14px; cursor: pointer;
  font: 600 16px/1.2 var(--body); color: var(--ink);
  /* The card already carries its road's colour in --road; the button belongs to the same card and
     was the one thing still painted coral, so a green route offered a coral button (founder 14.09). */
  background: transparent; border: 1.5px solid var(--road, var(--accent, var(--brand)));
}
.opennav svg { flex: none; color: var(--road, var(--accent, var(--brand))) }
.opennav:hover { background: color-mix(in srgb, var(--road, var(--accent, var(--brand))) 10%, transparent) }
.opennav:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px }

.navmodal {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(8, 10, 14, .55); backdrop-filter: blur(3px);
}
body.navopen { overflow: hidden }
.navcard {
  width: min(420px, 100%); max-height: 86vh; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--line); border-radius: 20px; padding: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.navcard h4 { margin: 0 0 6px; font: 700 20px/1.2 var(--display, var(--body)); color: var(--ink) }
.navcard .warn { margin: 0 0 14px; font-size: 13px; line-height: 1.45; color: var(--muted) }
.navcard a {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 10px; margin: 0 -4px; border-radius: 14px; text-decoration: none; color: var(--ink);
  border: 1px solid transparent;
}
.navcard a:hover, .navcard a:focus-visible { background: var(--card); border-color: var(--line) }
.navcard a img { width: 34px; height: 34px; border-radius: 8px; display: block }
.navcard a b { display: block; font: 600 16px/1.25 var(--body) }
.navcard a i { display: block; font: 400 13px/1.35 var(--body); font-style: normal; color: var(--muted) }
.navclose {
  width: 100%; margin-top: 12px; padding: 11px; border-radius: 12px; cursor: pointer;
  font: 600 15px/1 var(--body); color: var(--muted);
  background: transparent; border: 1px solid var(--line);
}
.navclose:hover { color: var(--ink) }

/* The pump-versus-average line: louder than the source credit under it, quieter than the cards
   themselves. It answers the first thing anyone who has just filled up will think (founder 11.09). */
#prices .note {
  grid-column: 1 / -1; margin: 4px 0 0; padding: 10px 12px;
  border-left: 3px solid var(--fuel, var(--brand)); border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--fuel, var(--brand)) 8%, transparent);
  color: var(--ink-2); font-size: 14px; line-height: 1.5;
}

/* ── The ferry index: 126 crossings, county by county, narrowed by one box ─────────────────────── */
.ferrybox { margin: 14px 0 26px }
#ferry-filter {
  width: 100%; padding: 12px 14px; border-radius: 12px; font: 400 16px/1.2 var(--body);
  color: var(--ink); background: var(--card); border: 1px solid var(--line);
}
#ferry-filter:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px }
#ferry-list { list-style: none; margin: 10px 0 0; padding: 0; max-height: 560px; overflow-y: auto; overscroll-behavior: contain }
#ferry-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; padding: 9px 2px; border-bottom: 1px solid var(--line) }
#ferry-list li .o { grid-column: 1; font-size: 13px; color: var(--muted) }
#ferry-list li b { grid-row: 1 / span 2; grid-column: 2; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink) }
#ferry-list li.fy { grid-template-columns: 1fr auto; border-bottom: 0; padding: 16px 2px 4px; position: sticky; top: 0; background: var(--bg) }
#ferry-list li.fy b { grid-row: auto; grid-column: auto; font: 600 12px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
#ferry-list li.fy span { font-size: 12px; color: var(--faint, var(--muted)) }
.ferrybox .empty { margin: 12px 2px; color: var(--muted) }
.ferrybox .src { margin: 10px 2px 0; font-size: 13px; color: var(--muted) }
/* 76 of the 126 cost nothing — the free-ferry policy is the most useful fact on the page, so it is
   not printed as «0» in the price column where it reads like missing data. */
#ferry-list li b.free { color: var(--opt, #0F766E); font-weight: 600 }
.rows .cc{grid-template-columns:1fr auto}.rows .cc .n{font-weight:500;color:var(--muted);font-size:13px;display:flex;align-items:center;gap:5px}.rows .ccp{width:5.4em;text-align:right;font:inherit;font-weight:600;font-size:14px;padding:3px 6px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink);font-variant-numeric:tabular-nums}.rows .ccp:focus{outline:none;border-color:var(--accent)}
.roads h4.found{font:600 14px/1.3 var(--body);letter-spacing:0;text-transform:none;color:var(--ink-2);margin:0 0 2px}
.grp .knob.chk{gap:8px}.grp .knob.chk input{width:18px;height:18px;padding:0;accent-color:var(--brand)}
.road-b a.book{display:inline-block;white-space:nowrap;padding:8px 12px;border:1px solid var(--accent,#F4451C);border-radius:10px;font-size:12px;font-weight:600;line-height:1;color:var(--accent,#F4451C);text-decoration:none}
.road-b a.book:hover{text-decoration:underline}
details.sub>summary b a.book{vertical-align:middle;font-variant-numeric:normal}

/* Crossings block: real departures and fares above the article (19.09). */
.xings{margin:8px 0 34px}
.xings h2{margin:0 0 6px}
.xings>p{margin:0 0 14px;color:var(--ink-2)}
.xchips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 14px}
.xchips .xlab{font:700 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.xlist{list-style:none;padding:0;margin:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.xcard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 18px;display:grid;gap:8px;align-content:start;backdrop-filter:blur(14px);min-width:0;overflow:hidden}
.xcard>*{min-width:0}
.xcard[aria-busy="true"]{opacity:.7}
.xhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.xhead h3{margin:0;font:700 17px/1.2 var(--head,var(--body));min-width:0;overflow-wrap:anywhere}
.xprice{text-align:right;font-variant-numeric:tabular-nums}
.xprice b{font-size:20px;color:var(--ink)}
.xprice i{color:var(--muted);font-style:normal;font-size:14px}
.xprice small{display:block;color:var(--muted);font-size:12px}
.xwhen{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.xnext{font:700 24px/1 var(--head,var(--body));font-variant-numeric:tabular-nums;color:var(--accent,var(--ink))}
.xmeta{color:var(--muted);font-size:13px}
.xmeta .warn,.xcard .warn{color:var(--warn,#C2410C);white-space:nowrap}
/* THE BOARD, as in the app: every sailing its own filled tile, wrapping onto the next line rather
   than running together into one unreadable number (founder 19.09). Wrap, not scroll — a time that
   has wrapped is still on the card; a time that has scrolled out of sight is not. */
.xcard .depsrow{display:grid;gap:5px;min-width:0}
.xcard .depslab{font:700 11px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.xcard .deps{display:flex;gap:8px;flex-wrap:wrap;min-width:0;overflow:hidden}
.xcard .deps span{flex:0 0 auto;font:500 13px/1.5 var(--body);padding:3px 9px;border-radius:8px;background:rgba(127,127,127,.12);color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.xnote{margin:0;font-size:12px;color:var(--ink-2);border-left:2px solid var(--line);padding-left:8px;overflow-wrap:anywhere}
.xcalc{font-size:14px;font-weight:600;text-decoration:none;color:var(--accent,var(--purple,#7C5CF6))}
.xfoot{margin:10px 0 0;font-size:12px;color:var(--muted)}

/* ─── The calculator button owns the right edge ───────────────────────────────────────────────────
   The language chip sat to the RIGHT of the call to action, so the button stopped short of the
   content edge — on a phone (measured 19.09 across all 55 pages: it ended at x=333 where the edge
   is 410) and on a desktop alike (founder 19.09, screenshot at 1280).

   Ordering the BUTTON last is what makes this work at both sizes. Ordering the CHIP first, which is
   what this did at first, is the same thing only while the navigation links are hidden: on a wide
   header it threw the chip past «Bompenger» to the front of the row. The chip stays where it is;
   only the button moves.
   The three front pages do not load this file and carry the same block inline. */
header .btn{order:1}
@media (max-width:820px){
  /* Wrapping is allowed: under ~375 px the button drops to its own row — still flush right,
     because it is now the last thing in the row. Forcing one row made it overhang instead. */
  header nav{gap:10px}
  header .mark{flex:none}
  header .langs{margin-left:0;flex:none}
  header .btn{padding:10px 14px;font-size:14px;white-space:nowrap;flex:none}
  .eyebrow{white-space:normal}
}
/* A menu word that opens a short list (the German «Einreise & Regeln» → Norwegen · Dänemark, founder 29.09):
   the language switcher's menu, dropped under the word; the word turns brand when one of its pages is open. */
.nsub{position:relative}.nsub summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px}.nsub summary::-webkit-details-marker{display:none}.nsub summary i{width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:-3px 0 0}.nsub[open] summary i{transform:rotate(-135deg);margin:2px 0 0}.nsub:has([aria-current]) summary{color:var(--brand)}.nsub .menu{position:absolute;left:-12px;top:calc(100% + 8px);min-width:170px;display:grid;background:var(--bg);border:1px solid var(--line,var(--card-line));border-radius:14px;padding:6px;box-shadow:0 14px 40px rgba(0,0,0,.18);z-index:40}.nsub .menu a{padding:9px 12px;border-radius:9px;font:500 14px/1 var(--body);color:var(--ink);text-decoration:none}.nsub .menu a:hover{background:rgba(127,127,127,.12)}.nsub .menu a[aria-current]{color:var(--brand);font-weight:700}
@media(max-width:820px){.nsub{display:none}}
/* The chevron costs ~10 px: at 1001–1016 the German header broke onto two lines. 7 px between the words
   and 3 px before the chevron keep it on one line from 1006 px — as before the submenu. */
@media(min-width:821px) and (max-width:1180px){header nav:has(.nsub){column-gap:7px}.nsub summary{gap:3px}}

/* ─── Fast chargers on the calculator's map ───────────────────────────────────────────────────────
   The separate widget this replaces had a map of its own, so the charging page asked the reader to
   use one map to find a charger and another to price the drive. It is a layer now; all that is left
   to style is what a charger says when you tap it. */
/* MAPLIBRE'S STYLESHEET LOADS AFTER OURS AND WINS AT EQUAL SPECIFICITY. It comes off a CDN at
   runtime, appended to <head> after the page's own link — so `.maplibregl-popup-content` set here
   lost to theirs and the popup stayed white, with our translucent --card laid over it for a washed
   grey nobody could read (founder 20.09). One extra class in the selector settles it. The background
   is opaque for the same reason: over their white, a translucent one is not a dark popup. */
/* `--bg-2` exists on the three front pages and nowhere else, and an undefined var makes the whole
   declaration invalid — which is a transparent popup, not a dark one. The page ground is the
   token every page has. */
.maplibregl-popup .maplibregl-popup-content{background:var(--bg-2,var(--bg));color:var(--ink);border:1px solid var(--line);
  border-radius:14px;padding:13px 15px;box-shadow:0 18px 50px rgba(0,0,0,.45);font:inherit}
.maplibregl-popup-anchor-top .maplibregl-popup-tip,.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-right .maplibregl-popup-tip{border-bottom-color:var(--bg-2,var(--bg))}
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip{border-top-color:var(--bg-2,var(--bg))}
.maplibregl-popup-anchor-left .maplibregl-popup-tip{border-right-color:var(--bg-2,var(--bg))}
.maplibregl-popup-anchor-right .maplibregl-popup-tip{border-left-color:var(--bg-2,var(--bg))}
.maplibregl-popup .maplibregl-popup-close-button{color:var(--muted);font-size:20px;line-height:1;padding:4px 9px;background:transparent}
.maplibregl-popup .maplibregl-popup-close-button:hover{color:var(--ink);background:transparent}
.chgpop{display:grid;gap:3px;min-width:0}
.chgpop strong{font:600 15px/1.3 var(--body);overflow-wrap:anywhere}
.chgpop span{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.chgpop span.f{color:var(--ink-2)}
.chgpop span.f b{color:var(--ink);font-variant-numeric:tabular-nums}
.chggo{margin-top:8px;justify-self:start;padding:8px 13px;border-radius:999px;border:1.5px solid var(--brand);
       background:transparent;color:var(--brand);font:600 13px/1 var(--body);cursor:pointer}
.chggo:hover{background:var(--brand-btn,#D93610);border-color:var(--brand-btn,#D93610);color:#fff}
.chgnote{font-size:13px;color:var(--muted);margin:0 0 10px}
.chgnote a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.chgnote a:hover{color:var(--ink-2)}
/* THE PURPLE ROW ABOVE "CALCULATE" (the app's setupRow, 25.09): "Optimise the order" and "Plan charging"
   side by side, each a light purple wash with a purple glyph and label - the app's tinted glass button.
   Coral is the drive, purple is everything that sets the drive up. Pressed while a plan rides along. */
.actions .setup{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.btn.tint{justify-content:center;min-height:48px;gap:8px;font-size:15px;font-weight:600;border:1px solid transparent;border-radius:14px;
  color:var(--purple);background:color-mix(in srgb,var(--purple) 14%,transparent);cursor:pointer}
.btn.tint svg{color:var(--purple);flex:none}
.btn.tint:hover{background:color-mix(in srgb,var(--purple) 22%,transparent)}
.btn.tint[aria-pressed="true"]{border-color:var(--purple)}
.actions.bottom .btn.tint{width:100%}
/* THE CHARGING DIALOG - EvPlanModal in a page: head, the five rows (label left, a stepper right),
   the connector chips, then a rule and the two ways out. Built on the "Open this route" dialog. */
.evcard{position:relative;width:min(460px,100%);padding:20px 20px 0;background:#FFFFFF}
/* White on the light theme (founder 25.09: «попап з плануванням зарядки в світлій темі повинен бути
   білим») - a raised surface, not the page ground; the dark theme keeps its own ground. */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .evcard{background:var(--bg)}}
:root[data-theme="dark"] .evcard{background:var(--bg)}
.evcard h4{text-align:center;padding:0 22px}
.evcard .warn{text-align:center}
.evx{position:absolute;top:12px;right:12px;width:32px;height:32px;border:0;border-radius:10px;background:transparent;color:var(--muted);font:22px/1 var(--body);cursor:pointer}
.evx:hover{color:var(--ink);background:rgba(127,127,127,.12)}
.evcard .evrows{display:grid;gap:4px;margin:4px 0 8px}
.evcard .evrow{display:grid;grid-template-columns:minmax(0,1fr) auto 26px;align-items:center;gap:10px;padding:6px 0;font:600 15px/1.25 var(--body);color:var(--ink)}
.evcard .evrow small{color:var(--muted);font:500 13px var(--body)}
.step{display:inline-grid;grid-template-columns:34px 64px 34px;align-items:center;border:1px solid var(--line);border-radius:999px;background:rgba(127,127,127,.08);overflow:hidden}
.step button{height:36px;border:0;background:transparent;color:var(--purple);font:600 18px/1 var(--body);cursor:pointer}
.step button:hover{background:color-mix(in srgb,var(--purple) 14%,transparent)}
.step input{width:100%;min-width:0;height:36px;border:0;background:transparent;color:var(--ink);text-align:center;font:600 16px var(--body);font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.step input::-webkit-outer-spin-button,.step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.step input:focus{outline:none;background:color-mix(in srgb,var(--purple) 10%,transparent)}
.evcard>.lbl{display:block;margin:8px 0 8px;font:600 15px/1.25 var(--body);color:var(--ink)}
.evcard .evplugs{margin-bottom:16px}
.evfoot{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;margin:0 -20px;padding:14px 20px 18px;border-top:1px solid var(--line)}
.evfoot .evskip{padding:14px 12px;color:var(--ink-2)}
.evfoot .evgo{width:100%;min-height:48px;padding-top:10px;padding-bottom:10px;margin:0}/* the page's own .cta block (the call to action under an article) carries margin:40px 0 */
.rows li.evedit{display:block;padding:0;background:none;text-align:right}
.rows li.evedit .textbtn,.line .evchange{padding:4px 0;font-size:13px;color:var(--brand)}
/* THE PAGE'S FOCUS (25.09): every page answers with the same cards; the part of the bill the page is
   about opens first, carries the accent, and its figure is pinned on the card's top line. */
.road-h i .fx{padding:3px 9px;border-radius:999px;font-weight:700;color:var(--accent,var(--brand));background:color-mix(in srgb,var(--accent,var(--brand)) 12%,transparent)}
details.sub.focus>summary>b,.line.focus>b{color:var(--accent,var(--brand))}
/* The plan in the result: numbered as on the map, tap a row and the map goes there. */
.rows li.evs{cursor:pointer}
.rows li.evs:hover{background:rgba(127,127,127,.13)}
.rows li.evs .n{text-align:right}
.rows li.evs .n small{font-weight:500}
.rows .evn{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:7px;border-radius:50%;background:#1B7F4B;color:#FFFFFF;font:700 11px/1 var(--body);vertical-align:1px}
.rows .evalt{margin-top:2px;font-size:12px}
.rows li.evgap{background:rgba(245,165,36,.10);border:1px solid rgba(245,165,36,.30)}
.rows li.evgap span:nth-child(2){color:var(--ink-2)}
/* The recenter button under the zoom buttons - frames the drive, or finds the reader (the app's). Coral, the drive's colour. */
.maplibregl-ctrl-group button.recenter{display:grid;place-items:center;color:var(--brand,#F4451C)}
.maplibregl-ctrl-group button.recenter svg{display:block}
/* The calculator's own description, at the foot of the panel under the calculate buttons (founder
   25.09: «ці описи треба ховати в самий низ під кнопки калькуляції») - the form comes first. */
.tool .about{margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}
.tool .about p{margin:0 0 6px;font-size:14px;line-height:1.5;color:var(--muted)}
.tool .about p:last-child{margin-bottom:0}
/* The networks over the charger map - see brandBar() in roadme-widget.js. One row, scrolled sideways
   rather than wrapped, left of the zoom buttons; the calculator's own chips, on an opaque ground so
   they read over any tile. */
.brandbar{position:absolute;top:10px;left:10px;right:54px;z-index:3;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 4px}
/* Only the chips take the click: three rows cover the top 120 px of the map, and a charger in the gaps between
   them could not be tapped (QA 26.09, 768 px). A sideways swipe that starts on a chip still scrolls the row. */
.brandbar{pointer-events:none}.brandbar>*{pointer-events:auto}
.brandbar::-webkit-scrollbar{display:none}
.brandbar[hidden]{display:none}
.brandbar{--chipbg:#FFFFFF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brandbar{--chipbg:var(--bg,#111419)}}
:root[data-theme="dark"] .brandbar{--chipbg:var(--bg,#111419)}
.brandbar .chip{flex:none;display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 12px;font-size:13px;white-space:nowrap;background:var(--chipbg);box-shadow:0 1px 3px rgba(0,0,0,.18)}
.brandbar .chip small{font-size:11px;opacity:.65}
.brandbar .chip[aria-pressed="true"]{background:color-mix(in srgb,var(--purple,#7C5CF6) 16%,var(--chipbg))}
.brandbar select.chip{appearance:auto;padding:0 8px;background:var(--chipbg);font:500 13px/1 var(--body,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);color:var(--ink)}
/* The second row: power and plug, under the networks. Two groups, a gap between them. */
.brandbar.kwbar{top:50px}
.brandbar.plugbar{top:90px}
/* Booking advised on a crossing (Bodo-Moskenes) - a line under the crossing, and a note on its card. */
.resv{display:block;margin-top:3px;font-size:12.5px;color:var(--brand);text-decoration:none}
.resv:hover{text-decoration:underline}
.xresv b{display:block;color:var(--brand);font-weight:600}
.xresv span{color:var(--muted)}
.xresv a{color:var(--brand);text-decoration:none;font-weight:600;white-space:nowrap}
.xresv a:hover{text-decoration:underline}
/* NEAR ME (founder 26.09) - the app's sixteen tiles under «Vehicle and fuel»; see NEAR ME in the widget.
   Family tones are design.ts TILES from the app, dark and light. ASCII only in this file. */
.near,.near-body{--f-energy:#8B6B42;--f-food:#3E6F78;--f-stay:#6A619B;--f-errand:#5E5E5E;--f-see:#A0523F;--nf:.08;--nb:.16}
.near{border-top:1px solid var(--line);padding-top:14px;display:grid;gap:12px}
.near-body{display:grid;gap:10px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .near,:root:not([data-theme="light"]) .near-body{--f-energy:#C69455;--f-food:#6FA8B8;--f-stay:#9B92C4;--f-errand:#84909E;--f-see:#D08A7E;--nf:.09;--nb:.19}}
:root[data-theme="dark"] .near,:root[data-theme="dark"] .near-body{--f-energy:#C69455;--f-food:#6FA8B8;--f-stay:#9B92C4;--f-errand:#84909E;--f-see:#D08A7E;--nf:.09;--nb:.19}
.near .fam-energy,.near-body .fam-energy{--f:var(--f-energy)}.near .fam-food,.near-body .fam-food{--f:var(--f-food)}.near .fam-stay,.near-body .fam-stay{--f:var(--f-stay)}.near .fam-errand,.near-body .fam-errand{--f:var(--f-errand)}.near .fam-see,.near-body .fam-see{--f:var(--f-see)}
/* A grid item sizes to its content unless told not to: a row of hotel cards pushed the block to 1 600 px on a phone. */
.near,.near>*,.near-body{min-width:0}.near,.near-body,.near-list{grid-template-columns:minmax(0,1fr)}
.near-h{margin:0;font:600 16px/1.2 var(--body);color:var(--ink)}
.near-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:14px}
.near-tile{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;cursor:pointer;color:var(--ink-2);font:500 12.5px/1.2 var(--body);min-width:0}
.near-tile .nt-b{position:relative;width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--f);background:color-mix(in srgb,var(--f) calc(var(--nf)*100%),transparent);border:1px solid color-mix(in srgb,var(--f) calc(var(--nb)*100%),transparent);transition:border-color .15s,background .15s}
.near-tile .nt-l{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.near-tile:hover .nt-b{border-color:var(--f)}
.near-tile[aria-pressed="true"] .nt-b{border:2px solid var(--f);background:color-mix(in srgb,var(--f) 22%,transparent)}
.near-tile[aria-pressed="true"] .nt-l{color:var(--ink);font-weight:700}
.near-tile .star{position:absolute;top:-4px;right:-4px;color:#E8B64C}
.near-body:empty{display:none}
.near-count{margin:0;font-size:12.5px;color:var(--muted)}
.near-note{margin:0;font-size:13.5px;color:var(--muted)}
.near-note.err{color:var(--warn,#E0A100)}
.near-list{list-style:none;margin:0;padding:0;display:grid}
.near-row{width:100%;display:flex;align-items:center;gap:12px;background:none;border:0;border-top:1px solid var(--line);padding:11px 2px;text-align:left;cursor:pointer;color:var(--ink);font:inherit}
.near-list li:first-child .near-row{border-top:0}
.near-row:hover .nr-n b{color:var(--brand)}
.near-row .nr-i{flex:none;display:flex;color:var(--f)}
.near-row .nr-n{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.near-row .nr-n b{font-weight:600;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.near-row .nr-n small{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.near-row .nr-k{flex:none;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.near-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.near-sorts{display:flex;gap:6px;margin-left:auto}
.near-chip{font:600 12.5px/1 var(--body);color:var(--ink-2);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 12px;cursor:pointer}
.near-chip[aria-pressed="true"]{color:var(--purple);border-color:color-mix(in srgb,var(--purple) 45%,transparent);background:color-mix(in srgb,var(--purple) 10%,transparent)}
/* Filter rows (fuel: chains, then what the station has; campsites: what the site has + the dump layer).
   They wrap: a row that scrolled sideways hid its last chip — the dump layer — past the panel's edge. */
.near-filt{gap:6px}
.near-filt .near-chip{white-space:nowrap}
.near-chip small{font-weight:500;opacity:.7}
.near-chip.zero{opacity:.5}
select.near-chip{appearance:auto;padding:5px 8px}
.near-chip.dump-chip i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#2F80C8;box-shadow:0 0 0 1.5px #FFFFFF,0 0 0 2.5px #2F80C8;margin:0 7px 0 2px;vertical-align:0}
.near-dial{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:4px 8px;color:var(--muted)}
.near-dial button{display:flex;background:none;border:0;padding:3px;cursor:pointer;color:var(--purple)}
.near-dial button:disabled{color:var(--line);cursor:default}
.near-dial b{min-width:34px;text-align:center;color:var(--ink);font-size:13.5px;font-variant-numeric:tabular-nums}
.near-dial[aria-busy="true"]{opacity:.6}
.near-cards{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;overscroll-behavior-x:contain}
.near-card{flex:none;width:150px;display:flex;flex-direction:column;gap:4px}
.near-card.stay{width:148px}
.near-card .nc-pic{position:relative;display:block;width:100%;height:112px;border:0;padding:0;border-radius:12px;overflow:hidden;background:var(--bg-2,var(--line));cursor:pointer}
.near-card .nc-pic>img:first-child{width:100%;height:100%;object-fit:cover;display:block}
.near-card .nc-empty{display:block;width:100%;height:100%}
.near-card .nc-rate{position:absolute;top:6px;right:6px;background:#1B7F4B;color:#fff;font:700 11px/1 var(--body);font-style:normal;border-radius:6px;padding:4px 5px}
.near-card .nc-free{position:absolute;left:6px;bottom:6px;background:rgba(11,14,20,.72);color:#fff;font:600 10.5px/1.2 var(--body);font-style:normal;border-radius:6px;padding:3px 6px}
.near-card .nc-logo{position:absolute;right:6px;bottom:6px;height:16px;width:auto;max-width:60px;background:#fff;border-radius:4px;padding:2px 3px;object-fit:contain}
.near-card .nc-name{font-size:13px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.near-card small{font-size:12.5px;color:var(--muted)}
.near-card small b{color:var(--ink);font-weight:700}
.near-btn{display:block;text-align:center;font:600 12.5px/1 var(--body);color:var(--purple);background:none;border:1px solid color-mix(in srgb,var(--purple) 45%,transparent);border-radius:999px;padding:8px 10px;cursor:pointer;text-decoration:none;margin-top:2px}
.near-cards.spots{gap:14px}.near-cards.spots .nc-pic{height:122px}.near-cards.spots .nc-name{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}.near-cards.spots .near-btn{margin-top:auto}.near-cards.spots .near-card{position:relative;width:82px}.near-cards.spots .nc-star{position:absolute;top:7px;left:7px;margin:0;padding:4px;border-radius:999px;background:rgba(11,14,20,.62)}.near-more{justify-self:start;background:none;border:0;padding:4px 0;color:var(--purple);font:600 13.5px/1.3 var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}.near-more:hover{text-decoration-thickness:2px}
.near-btn:hover{background:color-mix(in srgb,var(--purple) 10%,transparent)}
.near-sheet{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;padding:16px}
.near-sheet .ns-box{position:relative;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:18px;max-width:440px;width:100%;max-height:88vh;overflow:auto;padding:18px;display:grid;gap:10px}
.near-sheet img{width:100%;max-height:240px;object-fit:cover;border-radius:12px}
.near-sheet h4{margin:4px 0 0;font:700 18px/1.25 var(--body)}
.near-sheet small{color:var(--muted);font-size:12.5px}
.near-sheet p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.near-sheet dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;font-size:13.5px}
.near-sheet dt{color:var(--muted)}.near-sheet dd{margin:0}
.near-sheet .ns-x{position:absolute;top:10px;right:10px;display:flex;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px;cursor:pointer;color:var(--ink);z-index:1}
/* Sights (card sights-web): the star on a place the travel product builds a trip around, the
   Wikimedia photo's author and licence under it, the way into Gowme with its honest line. */
.nc-star{display:inline-flex;vertical-align:-2px;margin-right:5px;color:var(--brand,#F4451C)}.nc-star svg{fill:currentColor}
.near-card .nc-credit,.near-sheet .nc-credit{display:flex;align-items:center;gap:5px;min-width:0;font-size:11px;line-height:1.3;color:var(--muted);white-space:nowrap;overflow:hidden}
.nc-credit svg{flex:none;opacity:.7}.nc-credit a{color:inherit;overflow:hidden;text-overflow:ellipsis;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:2px}
.near-sheet .ns-gowme{display:flex;align-items:center;justify-content:center;min-height:46px;border:1px solid var(--line);border-radius:14px;color:var(--ink);font:600 15px/1.2 var(--body);text-decoration:none;padding:10px 16px}
.near-sheet .ns-gowme:hover{border-color:var(--brand,#F4451C)}
.near-sheet .ns-paid{font-size:12px;line-height:1.45;margin-top:-4px}
.gowme-card .gc-box{background:linear-gradient(210deg,color-mix(in srgb,var(--brand,#F4451C) 14%,var(--bg)) 0%,var(--bg) 62%)}
.near-sheet .gc-eyebrow{font:700 11px/1 var(--body);letter-spacing:.12em;color:var(--brand,#F4451C)}
.gc-chips{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gc-chips li{display:flex;align-items:center;gap:8px;padding:10px;border:1px solid var(--line);border-radius:12px;font-size:13px;line-height:1.3;color:var(--ink-2)}
.gc-chips svg{flex:none;color:var(--brand,#F4451C)}
.gc-cta{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:12px;background:var(--brand,#F4451C);color:#111;font:700 15px/1 var(--body);text-decoration:none;margin-top:4px}
@media (max-width:899px){.tool.shell[data-near] .map{display:block;grid-row:1;position:relative;height:48vh;min-height:300px;border-radius:0}}
.near-top{display:flex;align-items:center;gap:10px;justify-content:space-between}
.near-me{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:4px 2px;cursor:pointer;color:var(--link,#2F6FEB);font:600 13.5px/1 var(--body)}