/* Palette and type. System fonts only: a web font from someone else's origin is a
   third-party request, and the privacy page's claim about that is machine-checked.
   The display face is the system serif, which ships with every device. */
:root{
  --bg:#f5f4ef;--surface:#fff;--fg:#10221c;--muted:#5d6b63;--line:#e0ded4;--line-strong:#cbc8ba;
  --ink:#0f3b2e;--accent:#0f3b2e;--accent-soft:#17604a;--hot:#e2603c;--cta:#cdee5c;--cta-ink:#132a10;
  --tint:#eceee4;--ring:#7fa891;--on-ink:#fff;--on-hot:#1c0b04;
  --warn-bg:#fdf6e5;--warn-line:#e0bc6a;--on:#9a4308;--off:#0f5c38;
  --shadow:0 1px 2px rgba(16,34,28,.05),0 10px 30px rgba(16,34,28,.07);
  --serif:ui-serif,Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0e1512;--surface:#141d19;--fg:#eaf0ec;--muted:#93a49a;--line:#22302a;--line-strong:#32433b;
  --ink:#d7e9df;--accent:#8fd3b4;--accent-soft:#b2e3cb;--hot:#f0866a;--cta:#cdee5c;--cta-ink:#132a10;
  --tint:#17231e;--ring:#3f6a57;--on-ink:#0e1512;--on-hot:#1c0b04;
  --warn-bg:#2a2414;--warn-line:#6f5a24;--on:#f0a866;--off:#7fd0a3;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 12px 34px rgba(0,0,0,.4);
}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16.5px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.wrap{max-width:64rem;margin:0 auto;padding:0 1.5rem 3rem}
/* Body copy keeps a readable measure even though the shell is wide. */
.wrap p,.wrap ul.plain,.wrap dl,.wrap ol{max-width:48rem}
a{color:var(--accent)}
/* Underlines earn their keep in prose, where a link has to be findable mid-sentence. In a list
   or a grid every row is a link, so the underlines stop distinguishing anything and become
   texture — 44 of them in the country grid alone. Colour plus hover carries it there. */
ul.plain > li > a, ul.countries a, ul.schemes > li > a, .topnav > a, .crumbs a{text-decoration:none}
ul.plain > li > a:hover, ul.countries a:hover, ul.schemes > li > a:hover, .topnav > a:hover, .crumbs a:hover{text-decoration:underline}
h1{text-wrap:balance;font-family:var(--serif);font-size:3.1rem;line-height:1.04;letter-spacing:-.022em;
  margin:.1rem 0 .5rem;font-weight:600;color:var(--ink)}
h2{font-family:var(--serif);font-size:1.9rem;line-height:1.15;letter-spacing:-.016em;
  margin:2.8rem 0 .7rem;font-weight:600;color:var(--ink)}
h3{font-size:1.02rem;letter-spacing:.01em;margin:1.7rem 0 .35rem;font-weight:700}
p{margin:.75rem 0}
.sub{font-size:1.1rem;line-height:1.55;color:var(--muted)}
/* The small capitalised label above a heading, as on any editorial page. */
.eyebrow{display:block;font-size:.73rem;font-weight:750;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-soft);margin:0 0 .5rem}
@media (max-width:760px){h1{font-size:2.15rem}h2{font-size:1.5rem}}
.sub{color:var(--muted);margin:0 0 1.25rem}
.fact{border-top:1px solid var(--line);padding:1rem 0}
.compare{border-collapse:collapse;margin:.6rem 0 1rem;font-size:.92rem;display:block;overflow-x:auto;max-width:100%}
.compare th,.compare td{border-bottom:1px solid var(--line);padding:.4rem .7rem;text-align:left;vertical-align:top}
.compare th{font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.kinds dt{font-weight:700;margin-top:.7rem}
.kinds dd{margin:.15rem 0 0}
.fact dt{font-weight:700;font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.fact dd{margin:.3rem 0 0}
.unconfirmed{color:var(--muted);font-style:italic}
.src{display:block;font-size:.78rem;color:var(--muted);margin-top:.35rem}
/* Sits inline with the amount it qualifies: a floor price and its caveat are one fact. */
.qualifier{color:var(--muted)}
.navlinks{display:flex;align-items:center;gap:.3rem}
.topnav span.navlinks a:not(.navcta){padding:.45rem .7rem;border-radius:.5rem;color:var(--fg);font-weight:600;font-size:.95rem;text-decoration:none}
.topnav span.navlinks a:not(.navcta):hover{background:var(--tint);color:var(--ink)}
.topnav a[aria-current="page"]:not(.navcta){color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink);border-radius:0}
.topnav span.navlinks a.navcta{margin-right:.4rem;padding:.5rem 1rem}
details.navmenu{display:none;position:relative}
details.navmenu > summary{list-style:none;cursor:pointer;padding:.5rem .9rem;border:1px solid var(--line-strong);border-radius:.6rem;font-weight:600;background:var(--surface)}
details.navmenu > summary::-webkit-details-marker{display:none}
details.navmenu > summary::before{content:"☰  "}
.navmenu-list{position:absolute;right:0;top:calc(100% + .4rem);z-index:20;min-width:13rem;display:flex;flex-direction:column;padding:.4rem;background:var(--surface);border:1px solid var(--line);border-radius:.8rem;box-shadow:var(--shadow)}
.navmenu-list a{padding:.65rem .8rem;border-radius:.5rem;color:var(--fg);font-weight:600;text-decoration:none}
.navmenu-list a:hover, .navmenu-list a[aria-current="page"]{background:var(--tint);color:var(--ink)}
@media (max-width:760px){.navlinks a:not(.navcta){display:none!important}details.navmenu{display:block}.topnav{flex-wrap:nowrap}.topnav > a span{font-size:.98rem}}
/* Phones: the logo and one Menu button on a single line; the planner is the menu's first entry. */
@media (max-width:560px){.navlinks{display:none!important}.topnav{gap:.5rem}details.navmenu{margin-left:auto}.navmenu-list{right:0;left:auto;min-width:min(15rem,calc(100vw - 2rem))}}
.topnav{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;justify-content:space-between;align-items:center;
  padding:1.1rem 0 1rem;margin-bottom:2.2rem;border-bottom:1px solid var(--line);font-size:.9rem}
.topnav > a{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.05rem;letter-spacing:-.017em;color:var(--fg)}
.topnav > a .mark{flex:0 0 auto;color:var(--on-ink);background:var(--ink);border-radius:50%;padding:5px}
.topnav span{color:var(--muted);display:flex;flex-wrap:wrap;gap:.2rem .9rem}
.topnav span a{color:var(--muted);font-weight:500}
.topnav span a:hover{color:var(--accent)}
.topnav span{align-items:center}
.topnav span a.navcta{color:var(--cta-ink);background:var(--cta);font-weight:700;padding:.35rem .8rem;border-radius:999px;text-decoration:none}
.topnav span a.navcta:hover{color:var(--cta-ink);filter:brightness(.95)}
.crumbs{margin:.2rem 0 1rem}
.crumbs p{margin:0}
.country{margin:1.4rem 0 0;padding-top:1rem;border-top:1px solid var(--line)}
.country h3{margin:0 0 .15rem}
.country .src{display:block;margin-bottom:.5rem}
.country ul{margin:.3rem 0 0;padding-left:1.1rem}
.notice{background:var(--warn-bg);border:1px solid var(--warn-line);border-left:4px solid var(--warn-line);
  border-radius:.6rem;padding:.9rem 1.05rem;margin:1.3rem 0}
/* The verdict is the answer the reader came for, so it gets the weight. Everything under it
   is support: same words as before, visibly secondary, and tighter so five paragraphs of it
   stop reading as a wall. */
.when .verdict{font-size:1.05rem;font-weight:600;margin:0 0 .45rem}
.when .verdict .when-at{display:block;margin-top:.2rem;font-size:.8rem;font-weight:400;color:var(--muted)}
.when > p.src, .when > ul{font-size:.86rem;line-height:1.5;margin:.55rem 0 0}
.when > ul li{margin:.25rem 0}
.notice > .when + p.src{margin-top:.8rem;padding-top:.55rem;border-top:1px solid var(--warn-line);font-size:.8rem}
/* Counters, not list markers: a warning is not a manoeuvre and must not take a number,
   or the first instruction reads as step 2 of a drive that has not started. */
.directions{margin:1rem 0;padding:0;list-style:none;counter-reset:step}
/* Direct children only. A nested list inside a warning is scheme links, not manoeuvres,
   and letting it increment the counter made the first instruction read as step 2. */
.directions > li{position:relative;margin:.35rem 0;padding-left:2.3rem;counter-increment:step}
.directions > li::before{content:counter(step) ".";position:absolute;left:0;top:0;color:var(--muted);font-variant-numeric:tabular-nums}
.directions > li.warn{counter-increment:none;padding:.7rem .9rem;margin:.9rem 0;background:var(--warn-bg);border:1px solid var(--warn-line);border-left-width:4px;border-radius:.5rem}
.directions > li.warn::before{content:none}
.directions li.warn ul{margin:.4rem 0 0;padding-left:1.1rem;list-style:disc}
.directions li.warn ul li{margin:.2rem 0}
.directions li.warn p{margin:.35rem 0 0}
.notice p{margin:.3rem 0}
.badge{display:inline-block;font-size:.7rem;font-weight:750;letter-spacing:.055em;text-transform:uppercase;
  padding:.16rem .5rem;border-radius:999px;border:1px solid currentColor;vertical-align:.08em}
.badge.on{color:var(--on)}
.badge.off{color:var(--off)}
.badge.unk{color:var(--muted)}
/* A boundary answer and a city answer are different claims with different evidence behind
   them, so they must not look alike. The solid left rule marks the ones where we tested the
   driver's actual roads against a published polygon; everything else stays visually plain,
   which is the honest signal that we are naming a city, not a route. */
.geo{border-left:3px solid var(--on);padding-left:.6rem;margin:.35rem 0}
.geo.miss{border-left-color:var(--muted)}
.geo p{margin:.2rem 0}
input,select,button{font:inherit;max-width:100%}
form input:not([type]){width:100%;max-width:24rem;padding:.55rem .7rem;border:1px solid var(--line-strong);
  border-radius:.45rem;background:var(--bg);color:var(--fg)}
form input:focus-visible,form select:focus-visible,button:focus-visible,a:focus-visible{
  outline:2px solid var(--ring);outline-offset:2px}
input[type=datetime-local],select{padding:.3rem;margin:.15rem .35rem .15rem 0}
.when{margin:.45rem 0 0}
.when ul{margin:.3rem 0 0;padding-left:1.1rem;list-style:disc}
/* The collapsed sourced summary on a country hub: readable as a control, quiet when shut. */
details.rule{margin:.45rem 0 0}
details.rule > summary{cursor:pointer;color:var(--accent);font-size:.88rem}
details.rule > p{margin:.4rem 0 0;padding-left:.8rem;border-left:2px solid var(--line)}
/* Schemes under a city: each one a block a reader can scan, not a run-on line. */
.schemes{list-style:none;margin:.4rem 0 0;padding:0}
.schemes > li{margin:.55rem 0 0;padding:.5rem 0 0;border-top:1px dotted var(--line)}
.schemes > li > a{font-weight:500}
/* The city groups the schemes under it, so it has to read as the heavier of the two. Both were
   bold links, which left the country page with no visible grouping at all. */
ul.plain > li > a > strong{font-size:1.06rem;letter-spacing:-.01em}
/* The home page's ask: the site's one tool, not a sentence pointing at it. */
form.ask{background:var(--surface);border:1px solid var(--line);border-radius:1rem;
  box-shadow:var(--shadow);padding:1.5rem 1.5rem 1.1rem;margin:0}
form.ask label{font-size:.72rem;font-weight:750;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
form.ask p{margin:.2rem 0 .7rem}
form.ask label{font-weight:600;font-size:.9rem}
/* Every submit button, not only the home page's. The route page's own form carries no class,
   so its "Check my route" rendered as the browser default — 31px tall, grey, square — while the
   identical action on the home page was a large blue button (D-260). */
button[type=submit]{display:block;width:100%;padding:.85rem 1.2rem;border-radius:.6rem;
  border:1px solid var(--cta);background:var(--cta);color:var(--cta-ink);font-weight:750;font-size:1rem;
  letter-spacing:-.005em;cursor:pointer;text-align:left}
button[type=submit]:hover{filter:brightness(1.04)}
/* The planner (2026-10-01): one component, pins A, 1-3, B on a dotted line, a reverse button. */
form.planner{display:flex;flex-direction:column;gap:.9rem;background:var(--surface);border:1px solid var(--line);
  border-radius:1rem;box-shadow:var(--shadow);padding:1.3rem 1.3rem 1.2rem;margin:1rem 0;max-width:52rem}
form.planner .go{order:9;text-align:center;font-size:1.05rem}
form.planner .legs{order:1;display:grid;grid-template-columns:1fr auto;gap:0 .6rem;align-items:center}
form.planner .legs-col{position:relative;display:flex;flex-direction:column;gap:.75rem}
form.planner .legs-col::before{content:"";position:absolute;left:.82rem;top:2.6rem;bottom:1.2rem;border-left:2px dotted var(--line-strong)}
form.planner .leg{position:relative;display:grid;grid-template-columns:1.65rem 1fr;grid-template-rows:auto auto;column-gap:.6rem;align-items:center}
form.planner .leg label{grid-column:2;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.2rem}
form.planner .leg input{grid-column:2;max-width:none;padding:.7rem .8rem;border-radius:.6rem;background:var(--bg)}
form.planner .pin{grid-column:1;grid-row:2;position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;
  width:1.65rem;height:1.65rem;border-radius:50%;font-size:.78rem;font-weight:800;color:var(--on-ink);background:var(--ink)}
form.planner .pin-b{background:var(--hot);color:var(--on-hot)}
form.planner .pin-via{background:var(--surface);color:var(--ink);border:2px solid var(--ink);font-size:.72rem}
form.planner details.stops{display:block}
form.planner details.stops > summary{cursor:pointer;margin-left:2.25rem;font-size:.92rem;font-weight:600;color:var(--accent);list-style:none}
form.planner details.stops > summary::-webkit-details-marker{display:none}
form.planner details.stops > summary .src{display:inline;font-weight:400}
form.planner details.stops > summary::before{content:"+ "}
form.planner details.stops[open] > summary::before{content:"− "}
form.planner details.stops[open] > .leg{margin-top:.75rem}
form.planner .swap{display:flex;align-items:center;justify-content:center;width:2.6rem;height:2.6rem;border-radius:50%;
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer;padding:0;margin-top:1.4rem}
.rule-text p{margin:.45rem 0;line-height:1.6;max-width:48rem}
p.official{margin:-.2rem 0 1rem;color:var(--muted);font-size:.95rem;line-height:1.5;max-width:52rem}
p.official .cost-l{display:block;margin-bottom:.15rem}
.stats{max-width:52rem;margin:1.2rem 0 1.6rem}
ul.checks{max-width:52rem;padding-left:1.2rem}
ul.checks li{margin:.55rem 0;line-height:1.55}
details.table-wrap{max-width:52rem;margin:.6rem 0 1.4rem;border:1px solid var(--line);border-radius:.7rem;background:var(--surface)}
details.table-wrap > summary{cursor:pointer;padding:.7rem .9rem;font-weight:600;color:var(--accent)}
.scroll-x{overflow-x:auto}
table.data{border-collapse:collapse;width:100%;font-size:.9rem}
table.data th, table.data td{text-align:left;vertical-align:top;padding:.5rem .7rem;border-top:1px solid var(--line)}
table.data th{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
table.data tr:nth-child(even) td{background:var(--tint)}
figure.routemap{margin:.8rem 0 1rem;max-width:52rem}
figure.routemap img.area{aspect-ratio:800/500}
/* The route summary's tools, in one row with the distance above them. */
p.sub.trip{display:inline-block;margin:0 .8rem .9rem 0;vertical-align:middle}
.trip-tools{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 .9rem;vertical-align:middle}
.trip-tools .units{margin-left:0}
a.toolbtn{display:inline-flex;align-items:center;gap:.3rem;padding:.35rem .8rem;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);color:var(--ink);font-size:.88rem;font-weight:600;text-decoration:none}
a.toolbtn:hover{background:var(--tint)}
/* Link rows at the foot of a page are buttons, not a line of underlined text. */
p.linkrow{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.4rem 0;max-width:none}
p.linkrow a{display:inline-flex;align-items:center;padding:.5rem .95rem;border:1px solid var(--line-strong);border-radius:.6rem;background:var(--surface);color:var(--ink);font-size:.92rem;font-weight:600;text-decoration:none}
p.linkrow a:hover{background:var(--tint)}
p.linkrow a:first-child{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
/* Ad slots: no space until an ad is actually served, and an unfilled one disappears. */
.ad-slot{margin:1.6rem 0;max-width:52rem}
.ad-slot ins.adsbygoogle{display:block}
.ad-slot ins.adsbygoogle[data-ad-status="unfilled"]{display:none!important}
.ad-slot:has(ins[data-ad-status="unfilled"]){display:none}
/* Trip cost: the card on a result and the calculator page. */
.costcard{max-width:52rem;background:var(--surface);border:1px solid var(--line);border-radius:1rem;box-shadow:var(--shadow);padding:1rem 1.2rem;margin:1rem 0 1.4rem}
.costcard h3{margin:0 0 .6rem}
.costgrid, .tc-result{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.8rem}
.costgrid > div, .tc-result > div{display:flex;flex-direction:column;gap:.15rem;padding:.6rem .7rem;background:var(--tint);border-radius:.6rem}
.cost-l{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cost-v{font-size:1.35rem;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums}
a.cta{display:inline-block;margin-top:.4rem;padding:.75rem 1.1rem;border-radius:.6rem;background:var(--cta);color:var(--cta-ink);font-weight:750;text-decoration:none}
a.cta:hover{filter:brightness(1.04)}
form.tripcost{max-width:52rem;background:var(--surface);border:1px solid var(--line);border-radius:1rem;box-shadow:var(--shadow);padding:1.2rem;display:flex;flex-direction:column;gap:.9rem;margin:1rem 0 1.6rem}
form.tripcost .tc-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.7rem;align-items:end}
form.tripcost label{display:flex;flex-direction:column;gap:.25rem;font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
form.tripcost input:not([type]), form.tripcost input[inputmode], form.tripcost select{width:100%;max-width:none;padding:.6rem .7rem;border-radius:.6rem;border:1px solid var(--line-strong);background:var(--bg);color:var(--fg);font-size:1rem;text-transform:none;letter-spacing:0;font-weight:400;margin:0}
form.tripcost label.tc-check{flex-direction:row;align-items:center;gap:.4rem;text-transform:none;letter-spacing:0;font-size:.95rem;font-weight:600;color:var(--fg)}
form.tripcost button[type=submit]{text-align:center}
html.js form.tripcost button[type=submit]{display:none}
figure.routemap img{display:block;width:100%;height:auto;border-radius:.8rem;border:1px solid var(--line);background:var(--tint);aspect-ratio:800/420}
/* Directions (2026-10-01): striped rows, a manoeuvre icon, the distance right-aligned. */
ol.directions{list-style:none;padding:0;margin:.8rem 0;max-width:52rem;border:1px solid var(--line);border-radius:.8rem;overflow:hidden;counter-reset:step}
ol.directions > li.step{display:grid;grid-template-columns:2.2rem 1fr auto;gap:.6rem;align-items:center;padding:.6rem .8rem;margin:0}
/* The icon is the step's marker now; the old number sat outside the stripe. */
ol.directions > li.step::before{content:none}
ol.directions > li.warn{border-radius:0;border-left-width:4px;border-right:0}
ol.directions > li.step:nth-child(even){background:var(--tint)}
ol.directions > li.step .mv{display:inline-flex;align-items:center;justify-content:center;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--surface);border:1px solid var(--line);color:var(--ink)}
ol.directions > li.step .step-dist{font-size:.88rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
ol.directions > li.warn{margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* Units: both are in the markup, one is shown. Without the script, kilometres. */
.u-i{display:none}
html[data-units=imperial] .u-m{display:none}
html[data-units=imperial] .u-i{display:inline}
.units{display:none;margin-left:.6rem;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden;vertical-align:middle}
html.js .units{display:inline-flex}
.units button{border:0;background:transparent;padding:.2rem .65rem;font-size:.85rem;font-weight:600;color:var(--muted);cursor:pointer}
html:not([data-units=imperial]) .units button[data-units-set=metric], html[data-units=imperial] .units button[data-units-set=imperial]{background:var(--ink);color:var(--on-ink)}
/* Progress while planning. */
form.planner .progress{order:10;display:flex;align-items:center;gap:.6rem;font-size:.92rem;color:var(--muted)}
form.planner .progress[hidden]{display:none}
.spinner{width:1.1rem;height:1.1rem;border-radius:50%;border:2px solid var(--line-strong);border-top-color:var(--ink);animation:spin .8s linear infinite;flex:0 0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
form.busy .go{opacity:.75;cursor:progress}
ol.steps{max-width:48rem;padding-left:1.3rem}
ol.steps li{margin:.45rem 0;line-height:1.55}
dl.faq{max-width:48rem}
dl.faq dt{font-weight:700;margin-top:1rem}
dl.faq dd{margin:.3rem 0 0;line-height:1.6}
ul.examples li, ul.natlist li{margin:.5rem 0}
ul.examples li > a + .src{display:block;font-size:.85rem;margin-top:.1rem}
ul.sources > li{margin:.55rem 0}
details.cite > summary{cursor:pointer;font-size:.85rem;color:var(--muted)}
details.cite > p{font-size:.88rem;color:var(--muted);margin:.3rem 0 0;padding-left:.8rem;border-left:2px solid var(--line)}
/* The city and country pages' route invitation: one card, field and button with a gap between. */
form.invite{display:grid;grid-template-columns:1fr auto;gap:.6rem .8rem;align-items:end;max-width:48rem;
  background:var(--surface);border:1px solid var(--line);border-radius:1rem;box-shadow:var(--shadow);padding:1.1rem 1.2rem;margin:.8rem 0 1.4rem}
form.invite .invite-field{display:flex;flex-direction:column;gap:.25rem}
form.invite label{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
form.invite input{max-width:none;padding:.7rem .8rem;border-radius:.6rem}
form.invite button[type=submit]{width:auto;text-align:center;padding:.75rem 1.1rem;white-space:nowrap}
form.invite .src{grid-column:1/-1;margin:0}
@media (max-width:520px){form.invite{grid-template-columns:1fr}form.invite button[type=submit]{width:100%}}
form.planner .swap:hover{background:var(--tint)}
form.planner details.opts{order:2;border-top:1px solid var(--line);padding-top:.7rem}
form.planner details.opts > summary{cursor:pointer;font-size:.92rem;font-weight:600;color:var(--accent)}
form.planner .opts-body{padding-top:.6rem}
form.planner .opt-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
form.planner .opt-row label{font-weight:600;font-size:.9rem}
form.planner.compact{margin:0}
/* Label above, left edge and width matched to the place fields below (pin column + gap on the
   left, the reverse button's column on the right), so the whole form reads as one column. */
form.planner .mode-row{order:0;display:flex;flex-direction:column;gap:.2rem;padding-left:2.25rem;padding-right:3.2rem}
form.planner .mode-row label{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
form.planner .mode-row select{width:100%;padding:.7rem .8rem;border-radius:.6rem;border:1px solid var(--line-strong);background:var(--bg);color:var(--fg);margin:0;font-size:1rem}
a.printlink{margin-left:.6rem;font-weight:600;white-space:nowrap}
figure.elev{margin:.6rem 0 1.2rem;max-width:48rem}
figure.elev svg{width:100%;height:auto;display:block;background:var(--surface);border:1px solid var(--line);border-radius:.6rem}
.elev-area{fill:var(--tint)}
.elev-line{fill:none;stroke:var(--ink);stroke-width:2}
.elev-t{font-size:11px;fill:var(--muted);font-family:var(--sans)}
@media print{.topnav,footer,form.planner,a.reverse,a.printlink,.noprint,.crumbs{display:none!important}
  body{background:#fff}.wrap{max-width:none}}
.planner-note{margin-top:.6rem}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a.reverse{margin-left:.6rem;font-weight:600;white-space:nowrap}
/* Footer columns and copyright. */
footer .fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:1.6rem 2rem;margin-bottom:1.6rem}
footer .fbrand a{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.05rem;color:#fff;text-decoration:none}
footer .fbrand .mark{color:#0f221c;background:#eaf0ec;border-radius:50%;padding:5px}
footer h2{font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;color:#8ba096;margin:0 0 .6rem;font-family:var(--sans)}
footer nav ul{list-style:none;margin:0;padding:0}
footer nav li{margin:.4rem 0}
footer nav a{text-decoration:none}
footer nav a:hover{text-decoration:underline}
footer .fnote{color:#8ba096;border-top:1px solid #2a3d36;padding-top:1.2rem}
footer .copy{color:#8ba096;margin-top:.4rem}
@media (max-width:760px){footer .fgrid{grid-template-columns:1fr 1fr}footer .fabout{grid-column:1/-1}}
/* Countries by continent: a grid, so 44 of them stay one glance rather than one scroll. */
.continents > li{border-top:1px solid var(--line);padding:1rem 0 .9rem}
.continents > li > strong{font-size:1.06rem;letter-spacing:-.01em}
ul.countries{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.1rem .8rem;list-style:none;margin:.45rem 0 0;padding:0}
/* Name left, count right, on one row: at two columns a long name wrapped and left its count
   stranded on a line of its own. */
ul.countries li{font-size:.95rem;display:flex;gap:.4rem;justify-content:space-between;align-items:baseline;
  padding:.18rem .5rem;border-radius:.4rem}
ul.countries li:hover{background:var(--tint)}
.count{color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums}
/* The home page's opening: copy on the left, the tool on the right, one column on a phone. */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:2.5rem 3rem;align-items:start;
  margin:1rem 0 1rem}
.hero .lede p{max-width:32rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0 0;padding:0;list-style:none}
.chips li{font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line-strong);border-radius:999px;padding:.42rem .8rem}
@media (max-width:900px){.hero{grid-template-columns:1fr;gap:1.8rem}}
/* A numbered editorial list, for the "what to check" kind of section. */
ol.steps{list-style:none;counter-reset:s;margin:1.2rem 0 0;padding:0;max-width:52rem}
ol.steps > li{counter-increment:s;display:grid;grid-template-columns:2.6rem 1fr;gap:.2rem 1rem;
  padding:1rem 0;border-top:1px solid var(--line)}
ol.steps > li::before{content:"0" counter(s);font-family:var(--serif);font-style:italic;font-size:1.05rem;
  color:var(--hot);line-height:1.5}
ol.steps h3{margin:0 0 .15rem}
ol.steps p{margin:0;color:var(--muted)}
/* The route's planning options: a quiet block of controls, not a form within a form. */
fieldset.prefs{border:1px solid var(--line);border-radius:.6rem;padding:.7rem .9rem .3rem;margin:1rem 0}
fieldset.prefs legend{font-size:.72rem;font-weight:750;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);padding:0 .35rem}
fieldset.prefs label{display:inline-flex;align-items:center;gap:.4rem;margin:0 1rem .5rem 0;font-size:.95rem}
ul.plain{list-style:none;padding:0}
/* Direct children only. As a descendant selector this reached the country grid nested inside
   the same list, so every one of the 44 grid cells drew its own rule and carried .7rem of
   vertical padding — the striped, loose look on the home page had nothing to do with the grid's
   own styles. */
ul.plain > li{border-top:1px solid var(--line);padding:.7rem 0}
/* A dark band. The footer sits OUTSIDE the content container and carries its own, so it spans
   the window without the box-shadow/clip-path trick, which was fragile and hard to verify. */
footer{margin-top:4.5rem;padding:2.4rem 0 2.8rem;font-size:.88rem;color:#b9c8c0;background:#0f221c}
footer .wrap{padding-bottom:0}
footer a{color:#eaf0ec}
footer p{max-width:52rem}
footer .src{color:#8ba096}
footer .src a{color:#cfe0d7}
/*
 * The phone, measured rather than assumed (D-257).
 *
 * At 375px nothing overflowed horizontally on any page — the failure mode that usually breaks a
 * site on a phone simply was not there. What was there: on the home page 61 of 64 links, and on
 * a scheme page 34 of 40, were under 24 CSS pixels tall, which is the minimum target size WCAG
 * 2.2 asks for (2.5.8). The nav and the breadcrumbs were the worst at 15-18px, and those are
 * standalone controls rather than links inside a sentence, so the exception for inline text does
 * not cover them.
 *
 * Only standalone links are grown. A link inside a paragraph is deliberately left alone: padding
 * it would space out the prose to no benefit, and WCAG exempts it for exactly that reason.
 */
@media (max-width:520px){
  .topnav > a, .topnav span a, .crumbs a, ul.plain > li > a, ul.plain > li > strong > a,
  ul.countries a,
  .schemes > li > a, footer a, details.rule > summary,
  /* The route result has link shapes of its own: the city is a <strong><a>, and each scheme
     under it is an <a> opening an <li>. Both were 19px — missed by the first pass because it
     was written against the pages I had looked at, and the route result was not one of them. */
  .directions > li.warn > strong > a, .directions li.warn ul > li > a{
    display:inline-block;min-height:24px;line-height:24px
  }
  /* Two columns fit at 375px and one was being shown: 11rem could not pair up inside a 349px
     content box, so 43 countries became 43 rows of half-empty screen. */
  ul.countries{grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr))}
  /* The logo link is an icon beside a name; the tap-target rule above made it inline-block and
     the name fell under the icon (seen on a phone, 2026-10-01). */
  .topnav > a{display:inline-flex}
}
@media (max-width:400px){.wrap{padding:1rem .8rem 3rem}h1{font-size:1.5rem}}