/* [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}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:640px){.fields{grid-template-columns:1fr}}
.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}
.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}.opt{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2)}.opt small{color:var(--muted)}
.opt input[type=checkbox]{width:18px;height:18px;accent-color:var(--brand)}
.when input{padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:rgba(127,127,127,.08);color:var(--ink);font:14px var(--body)}
.status{font-size:14px;color:var(--muted)}.status.err{color:var(--brand)}
/* Every named area exists in every layout: an item whose `grid-area` names a track the grid does
   not have is auto-placed into a column the grid invents, off the right edge of a phone. */
.result{margin-top:18px;border-top:1px solid var(--line);padding-top:16px;display:grid;gap:14px;grid-template-columns:1fr;grid-template-areas:"head" "map" "alts" "rows" "foot"}
@media(min-width:900px){
  /* Gowme's shell at widget scale: the map fills the left, the content sits in a column on the right. */
  .result{grid-template-columns:minmax(0,1fr) 380px;grid-template-rows:auto 1fr auto;grid-template-areas:"map head" "map alts" "map rows" "map foot";gap:0 18px}
  .result .map{height:100%;min-height:520px;margin:0}
  .result .head{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 18px;display:block}
  .result .head .tot{text-align:left;margin-top:10px;line-height:1.5}
  .result .rows{margin-top:12px;max-height:420px;overflow:auto;padding-right:4px}
}
.result .head{grid-area:head;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.result .map{grid-area:map}.result .rows{grid-area:rows}.result .foot{grid-area:foot}
.big{font:800 clamp(40px,7vw,64px)/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.sub{color:var(--ink-2);font-size:14px;margin-top:4px}
.tot{font-size:14px;color:var(--ink-2);text-align:right;line-height:1.7}.tot b{color:var(--ink);font-variant-numeric:tabular-nums;font-size:16px}
.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}
.tool .stores{margin-top:16px;align-items:center;display:flex;gap:10px;flex-wrap:wrap}.hint{font-size:13px;color:var(--muted)}
/* The whole bill on a feature page, and the features from the whole bill. */
.full{display:grid;gap:4px;justify-items:start;text-align:left;padding:14px 16px;border-radius:16px;border:1.5px solid var(--brand);min-width:230px}
.full .k{font:600 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.full b{font:800 30px/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.full small{color:var(--muted);font-size:13px}.full .btn{margin-top:8px;padding:9px 14px;font-size:14px}
@media(max-width:899px){.result .head .full{flex-basis:100%}}
.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)}
.tot:has(.line){text-align:left;line-height:1.4}
@media(min-width:900px){
  .result .head{display:block}
  /* the list scrolls inside the column: fade the cut-off row instead of chopping it */
  .result .rows{-webkit-mask-image:linear-gradient(#000 calc(100% - 28px),transparent);mask-image:linear-gradient(#000 calc(100% - 28px),transparent);padding-bottom:20px}
}
/* 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}
.tool.shell .result{margin-top:6px;padding-top:14px;display:grid;gap:12px;grid-template-columns:1fr;grid-template-areas:"head" "alts" "rows" "foot";grid-template-rows:auto}
.tool.shell .result .head{display:block;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 18px}
.tool.shell .result .head .tot{text-align:left;margin-top:10px}
.tool.shell .result .rows{max-height:none;overflow:visible;padding:0;-webkit-mask-image:none;mask-image:none;margin:0}
.tool.shell .stores{margin-top:8px}
@media(max-width:899px){
  /* A phone: the panel first, the map only once there is a road to show — in flow, clipped, never sticky. */
  .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:static;height:44vh;min-height:280px;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}
.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}.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. */
.alts{grid-area:alts;display:grid;gap:6px;margin-bottom:10px}.alts[hidden]{display:none}.alts h4{margin:4px 0 2px;font:700 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.alt{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;text-align:left;padding:10px 12px;border-radius:14px;border:1px solid var(--line);background:rgba(127,127,127,.06);color:var(--ink);font:14px var(--body);cursor:pointer}
.alt[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}.alt:hover{border-color:var(--ink-2)}
.alt .badges{min-width:0;display:flex;gap:6px;flex-wrap:wrap}.alt .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)}.alt[aria-pressed="true"]{border-color:var(--road,var(--accent))}
.alt b{font:800 18px/1 var(--display);font-variant-numeric:tabular-nums}.alt i{grid-column:1/-1;font-style:normal;font-size:12px;color:var(--muted)}
.tool.shell .result{grid-template-areas:"head" "alts" "rows" "foot"}.alts{grid-area:alts}
@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{grid-area:rows;display:grid;gap:8px}
.road{border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden}.road.open{border-color:var(--road,var(--accent));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)}
.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}
.tool.shell .result .head[hidden]{display:none}.result .head[hidden]{display:none}
.alt b,.full b,.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 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)}
.rows 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}
.rows a.book:hover{text-decoration:underline}

/* 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}
}

/* ─── 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)}