/* Low emission zone pages (/low-emission-zones/<city>/). Shared by every city page; written by scripts/lez_page.py.
   Map first: breadcrumb, a tool card (floating panel with H1, registration plate and verdict over a real map), a
   sticky contents strip, then the sheet (At a glance card, one SectionCard per topic).
   Every colour, radius, shadow, type size and card padding is a variable from shared/css/tokens.css; the only
   literals are layout measures (widths, map heights, breakpoints), the 9999px pill radius (the app has no token
   for it) and a few 4px-scale gaps. Components follow the Report's.
   Rules: a border is a divider, never the outline of a control (controls get a soft fill). Green is for positive
   verdicts only. Every state of the verdict is stacked in one grid cell, so the card never changes height.
   The page is complete HTML without JavaScript; lez-page.js only enhances it. */

@font-face{font-family:'Jost';src:url('/fonts/jost-latin.woff2') format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:'UK-VRM';src:url('/fonts/uk-vrm.woff2') format('woff2');font-display:swap}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font:400 var(--text-body)/var(--text-body--line-height) Jost,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--color-ink);background:var(--color-page)}
a{color:var(--color-brand-hover);text-underline-offset:2px}
a:focus-visible,summary:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset)}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
i.ph,i.ph-bold,i.ph-fill{line-height:1;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--color-surface);padding:8px 12px;border-radius:var(--radius-row);z-index:99}
.skip:focus{left:8px}
.wrap{max-width:1244px;margin:0 auto;padding:0 16px}
@media(min-width:768px){.wrap{padding:0 24px}}
@media(min-width:1024px){.wrap{padding:0 32px}}
.muted{color:var(--color-muted)}
.num{font-variant-numeric:tabular-nums}
html:not(.js) [data-js]{display:none!important}
html.js .nojs{display:none!important}
[hidden]{display:none!important}

/* header: static stand-in for the JS-built bar, as on the MOT place pages */
.mw-static{flex-wrap:wrap;gap:0 12px}
.mw-static .mw-logo{margin-right:auto}
.static-nav{display:flex;flex-wrap:wrap;gap:0 4px}
.static-nav a{display:inline-flex;align-items:center;min-height:var(--spacing-control);padding:0 14px;border-radius:9999px;color:var(--color-muted);text-decoration:none;font-size:var(--text-compact);font-weight:600;transition:background-color var(--duration-fast),color var(--duration-fast)}
.static-nav a:hover{background:var(--color-chip);color:var(--color-ink)}
.static-nav a[aria-current]{background:var(--color-action);color:var(--color-surface)}

/* breadcrumb */
.crumbs{font-size:var(--text-compact);line-height:var(--text-compact--line-height);color:var(--color-muted);padding:10px 0 4px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:0 8px}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--color-faint)}
.crumbs a{color:var(--color-muted);display:inline-flex;align-items:center;min-height:32px;text-decoration:none}
.crumbs a:hover{color:var(--color-ink);text-decoration:underline}
.crumbs [aria-current]{color:var(--color-ink);font-weight:600}

/* ---------- buttons, pills, badges (the Report's shapes) ---------- */
/* BTN_BASE + BTN_PRIMARY_FLAT: 44px, 18x9 padding, 13.5px semibold, fully round, no border.
   The quiet and secondary variants keep the soft-fill rule: idle chip, hover rail. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--spacing-control);min-width:var(--spacing-control);padding:var(--spacing-pill-y) var(--spacing-pill-x);border:0;border-radius:9999px;background:var(--color-chip);color:var(--color-ink);font:600 var(--text-compact)/1 Jost,sans-serif;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color var(--duration-fast),color var(--duration-fast)}
.btn:hover{background:var(--color-rail)}
.btn.primary{background:var(--color-action);color:var(--color-surface)}
.btn.primary:hover{background:var(--color-action-hover)}
.btn i{font-size:16px}
.pillrow{display:flex;flex-wrap:wrap;gap:8px}
/* AttentionBadge: rounded-badge, bold label size, 9x4 padding. neutral is the default; info marks local items. */
.badge{display:inline-flex;align-items:center;gap:6px;background:var(--color-chip);color:var(--color-muted);border-radius:var(--radius-badge);padding:4px 9px;font-size:var(--text-label);line-height:var(--text-label--line-height);font-weight:700;white-space:nowrap}
.badge.here{background:var(--color-brand-tint);color:var(--color-brand-hover)}

/* =========================================================================
   THE TOOL: panel + map. Stacked on phones and tablets, floating panel on desktop.
   ========================================================================= */
.loc{display:grid;gap:12px;padding:0 16px}
/* In flow (phone, tablet) the panel is a Report card. Floating over the map it takes the overlay shadow instead. */
.panel{background:var(--color-surface);border:1px solid var(--color-card-border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);display:flex;flex-direction:column;min-width:0}
.pano-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:var(--spacing-panel) 12px 0 var(--spacing-card-x)}
.pano-head h1{font-size:var(--text-display);line-height:var(--text-display--line-height);letter-spacing:var(--text-display--letter-spacing);font-weight:var(--text-display--font-weight);color:var(--color-ink)}
/* BTN_QUIET */
.panel-toggle{display:none;align-items:center;gap:4px;flex:none;min-height:var(--spacing-control);padding:var(--spacing-pill-y) 12px;border:0;border-radius:9999px;background:transparent;color:var(--color-muted);font:600 var(--text-compact)/1 Jost,sans-serif;cursor:pointer;margin-top:-6px;transition:background-color var(--duration-fast),color var(--duration-fast)}
.panel-toggle:hover{background:var(--color-chip);color:var(--color-ink)}
.panel-toggle i{font-size:16px;transition:transform var(--duration-fast)}
.is-collapsed .panel-toggle i{transform:rotate(180deg)}
.panel-body{display:flex;flex-direction:column;gap:14px;padding:12px var(--spacing-card-x) var(--spacing-panel);min-width:0}
.panel-body .lede{font-size:var(--text-prose-sm);line-height:var(--text-prose-sm--line-height);color:var(--color-muted)}
.panel-body .lede strong{color:var(--color-ink);font-weight:600}

/* The registration input: the tool pages' plate, copied from tool-scaffold.css (.tool-plate, .tool-plate-stripe,
   .plate-input) and their markup (mot-checker.html, ulez-checker.html). A white card-shaped plate with a blue GB
   stripe and a bare UK-VRM field. There is no Check button on the tool pages either: a full plate (7 characters)
   checks itself after 500 ms, Enter checks, paste checks. Focus shows only the caret, as on the tool pages. */
.check{display:flex;flex-direction:column}
.plate-label{display:block;margin-bottom:8px;font-size:var(--text-body-sm);line-height:var(--text-body-sm--line-height);font-weight:400;color:var(--color-muted)}
.tool-plate{display:flex;align-items:stretch;gap:8px;width:264px;max-width:100%;height:auto;margin-inline:auto;padding:10px;overflow:visible;background:var(--color-surface);border:1px solid var(--color-card-border);border-radius:var(--radius-card);box-shadow:var(--shadow-card)}
@media(min-width:640px){.tool-plate{margin-inline:0}}
.tool-plate-stripe{display:flex;flex:none;flex-direction:column;align-items:center;justify-content:center;width:auto;padding:0 12px;border-radius:var(--radius-row);background:var(--color-plate-stripe);color:var(--color-surface);user-select:none}
.tool-plate-stripe span{font-size:11px;font-weight:600;line-height:1.5}
.tool-plate .plate-input{flex:1 1 auto;width:auto;min-width:0;min-height:0;height:48px;padding:0 10px;background:transparent;border:0;outline:none;color:var(--color-plate-text);font:700 24px/1 'UK-VRM',monospace;letter-spacing:.08em;text-align:start;text-transform:uppercase}
.tool-plate .plate-input::placeholder{color:var(--color-plate-text);opacity:.6;letter-spacing:.08em}
.tool-plate:focus-within{outline:none}
.tool-plate .plate-input:focus,.tool-plate .plate-input:focus-visible{outline:none;box-shadow:none}
.plate-hint{margin-top:12px;font-size:var(--text-body-sm);line-height:var(--text-body-sm--line-height);color:var(--color-muted)}
.plate-hint a{color:var(--color-action);text-decoration:underline}
.nojs-check{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.nojs-check p{font-size:var(--text-compact);color:var(--color-muted)}

/* The verdict: one card, built like the Report's SummaryCard on a grey ReportCallout surface. Icon and quiet
   label, a status dot beside the answer, receding detail. Status colour stays on the dot and the map; the
   surface stays neutral.
   Steady height, by construction: every state (what it takes, each outcome, the error) is a .v-state, and all
   of them sit in the same grid cell. The cell is as tall as the tallest state at the current width, so the card,
   the panel and the page never change height when a result appears or changes. Nothing is truncated, scrolled
   or hidden, and there is no magic number to tune per breakpoint. The inactive states are visibility:hidden
   (out of sight, out of the accessibility tree, still measured). Without JavaScript only the first state exists. */
.verdict{border-radius:var(--radius-card-sm);padding:var(--spacing-card-x);background:var(--color-row);display:grid}
.v-state{grid-area:1 / 1;min-width:0;display:flex;flex-direction:column;gap:12px;visibility:hidden}
.v-state[data-active],html:not(.js) .v-state{visibility:visible}
.v-head{display:flex;gap:10px;align-items:center;min-width:0}
.v-head i{font-size:20px;color:var(--color-ink)}
.v-label{font-size:var(--text-body-sm);line-height:var(--text-body-sm--line-height);color:var(--color-muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-title{display:flex;gap:10px;align-items:center;font-size:var(--text-card-h);line-height:var(--text-card-h--line-height);letter-spacing:var(--text-card-h--letter-spacing);font-weight:var(--text-card-h--font-weight);color:var(--color-ink)}
.dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--color-faint)}
.v-state[data-kind="compliant"] .dot{background:var(--color-accent)}
.v-state[data-kind="restricted"] .dot{background:var(--color-danger)}
.v-state[data-kind="unknown"] .dot{background:var(--color-attention-dot)}
.v-state[data-kind="charge"] .dot{background:var(--color-attention-dot)}
.v-state[data-kind="free"] .dot{background:var(--color-accent)}
.v-state[data-kind="neutral"] .dot{background:var(--color-brand)}
.v-rows{display:grid;gap:0}
.v-rows>div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-top:1px solid var(--color-card-border);font-size:var(--text-body);line-height:var(--text-body--line-height)}
.v-rows>div:first-child{border-top:0;padding-top:0}
.v-rows dt{color:var(--color-muted);font-size:var(--text-body-sm)}
.v-rows dd{font-weight:600;text-align:right;color:var(--color-ink)}
.v-big{font-size:var(--text-stat);line-height:var(--text-stat--line-height);letter-spacing:var(--text-stat--letter-spacing);font-weight:var(--text-stat--font-weight);color:var(--color-ink)}
.v-big small{display:block;font-size:var(--text-body-sm);line-height:var(--text-body-sm--line-height);font-weight:400;letter-spacing:0;color:var(--color-muted);margin-top:4px}
.v-why{font-size:var(--text-body);line-height:var(--text-body--line-height);color:var(--color-muted)}
.v-acts{display:flex;flex-wrap:wrap;gap:8px}
.v-state .btn:not(.primary){background:var(--color-surface)}
.v-state .btn:not(.primary):hover{background:var(--color-chip)}
.v-state .fine{font-size:var(--text-caption);line-height:var(--text-caption--line-height);color:var(--color-mid);margin-top:auto}

/* the map */
.loc-map{position:relative;isolation:isolate;height:clamp(300px,52svh,420px);border-radius:var(--radius-card);overflow:hidden;background:var(--color-rail);box-shadow:var(--shadow-card)}
.map-canvas{position:absolute;inset:0}
/* Touch: one finger belongs to the page. The browser scrolls vertically over the map (touch-action: pan-y) and
   v4.js stops a single touch reaching Leaflet, so a swipe never pans the map. Two fingers move and zoom it. */
/* Leaflet sets touch-action:none with a three-class selector, so this one matches it and wins by coming later. */
.loc-map .leaflet-container,.loc-map .leaflet-container.leaflet-touch-drag.leaflet-touch-zoom{touch-action:pan-y}
/* The hint appears over the map the first time a one-finger swipe crosses it, then goes. It is an overlay, so it
   cannot move anything. */
.map-hint{position:absolute;z-index:600;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;max-width:calc(100% - 32px);padding:10px 16px;border-radius:9999px;background:var(--color-ink);color:var(--color-surface);font-size:var(--text-compact);line-height:1.3;font-weight:600;text-align:center;box-shadow:var(--shadow-overlay);pointer-events:none;opacity:0;transition:opacity var(--duration-fast)}
.map-hint i{font-size:18px}
.map-hint.is-on{opacity:1}
.map-fallback{position:absolute;inset:16px 16px 56px;display:flex}
.map-fallback svg{width:100%;height:100%}
.map-fallback path{fill:var(--color-brand-tint);stroke:var(--color-brand);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.loc-map.has-map .map-fallback{display:none}
.loc-map[data-kind="compliant"] .map-fallback path{fill:var(--color-accent-tint);stroke:var(--color-accent)}
.loc-map[data-kind="restricted"] .map-fallback path{fill:var(--color-danger-tint);stroke:var(--color-danger-strong)}
.loc-map[data-kind="unknown"] .map-fallback path,.loc-map[data-kind="charge"] .map-fallback path{fill:var(--color-attention-bg);stroke:var(--color-attention-dot)}
.loc-map[data-kind="free"] .map-fallback path{fill:var(--color-accent-tint);stroke:var(--color-accent)}
.zone-label{position:absolute;z-index:3;left:50%;top:46%;transform:translate(-50%,-50%);background:var(--color-surface);border-radius:9999px;padding:6px 12px;font-size:var(--text-compact);line-height:1.3;font-weight:600;box-shadow:var(--shadow-popover);white-space:nowrap;pointer-events:none}
.loc-map.has-map .zone-label{display:none}
.leaflet-container{font-family:Jost,system-ui,sans-serif;background:var(--color-rail);outline:0}
.leaflet-container a{color:var(--color-brand-hover)}
.leaflet-bar{border:0!important;border-radius:var(--radius-panel)!important;box-shadow:var(--shadow-popover)!important;overflow:hidden}
.leaflet-bar a{width:var(--spacing-control)!important;height:var(--spacing-control)!important;line-height:var(--spacing-control)!important;color:var(--color-ink)!important;border-bottom-color:var(--color-row-border)!important;font-size:var(--text-lede);transition:background-color var(--duration-fast)}
.leaflet-bar a:hover{background:var(--color-chip)}
.leaflet-bar a:focus-visible{outline-offset:-4px}
.leaflet-control-attribution{font-size:var(--text-fine);background:var(--color-surface)!important}
.leaflet-container:focus-visible{outline:var(--focus-ring);outline-offset:-3px}
.leaflet-tooltip.zone-tip{background:var(--color-surface);border:0;border-radius:9999px;padding:6px 12px;font:600 var(--text-compact)/1.3 Jost,sans-serif;color:var(--color-ink);box-shadow:var(--shadow-popover)}
.leaflet-tooltip.zone-tip::before{display:none}
.map-top{position:absolute;z-index:500;top:12px;left:12px;right:68px;display:flex;gap:8px;align-items:flex-start;pointer-events:none}
.map-top>*{pointer-events:auto}
/* floating map chips: a white pill with the popover shadow (the soft fill would vanish on the map) */
.mchip,.nearby>summary{display:inline-flex;align-items:center;gap:6px;min-height:var(--spacing-control);padding:var(--spacing-pill-y) var(--spacing-pill-x);border-radius:9999px;background:var(--color-surface);box-shadow:var(--shadow-popover);color:var(--color-muted);font-size:var(--text-compact);line-height:1;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap;list-style:none;transition:background-color var(--duration-fast),color var(--duration-fast)}
.mchip:hover,.nearby>summary:hover,.nearby[open]>summary{background:var(--color-chip);color:var(--color-ink)}
.mchip i,.nearby>summary i{font-size:16px}
.nearby{position:relative}
.nearby>summary::-webkit-details-marker{display:none}
.nearby>summary .car{transition:transform var(--duration-fast)}
.nearby[open]>summary .car{transform:rotate(180deg)}
.nearby-panel{position:absolute;top:calc(100% + 8px);left:0;z-index:10;width:260px;max-width:calc(100vw - 48px);padding:8px;border-radius:var(--radius-card-sm);background:var(--color-surface);box-shadow:var(--shadow-overlay)}
.nearby-panel a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--spacing-control);padding:0 12px;border-radius:var(--radius-row);color:var(--color-ink);text-decoration:none;font-size:var(--text-body);font-weight:600;transition:background-color var(--duration-fast)}
.nearby-panel a:hover{background:var(--color-chip)}
.nearby-panel a small{font-size:var(--text-body-sm);font-weight:500;color:var(--color-muted)}
.nearby-panel a.all{border-top:1px solid var(--color-row-border);border-radius:0 0 var(--radius-row) var(--radius-row);margin-top:4px;color:var(--color-brand-hover)}
.map-cap{position:absolute;z-index:450;left:12px;bottom:12px;max-width:min(330px,calc(100% - 150px));display:flex;gap:8px;align-items:flex-start;background:var(--color-surface);border-radius:var(--radius-panel);padding:8px 10px;font-size:var(--text-caption);line-height:var(--text-caption--line-height);color:var(--color-muted);box-shadow:var(--shadow-popover)}
.map-cap i{font-size:16px;margin-top:1px}
.map-live-caption{display:none}
.has-map .map-live-caption{display:inline}
.has-map .map-static-caption{display:none}

/* two columns on tablets: heading and check on the left, the answer on the right */
@media(min-width:640px) and (max-width:899px){
 .panel-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 24px;align-items:start}
 .panel-body>.verdict{grid-column:2;grid-row:1 / span 3}
}

/* desktop: the panel floats on the column's left edge, the map is the card behind it */
@media(min-width:900px){
 .loc{display:block;position:relative;--pad:24px;--pw:min(420px,calc(100% - 2 * var(--pad)));--gap:calc(var(--pad) + var(--pw) + 12px);
  width:min(1244px,calc(100% - 48px));margin:8px auto 0;padding:0;border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-card);background:var(--color-rail);
  height:clamp(708px,calc(100svh - 72px - 40px - 36px - 8px - 20px),800px)}  /* 708px floor: the panel (674px) plus its 16px margins, so it never scrolls inside itself */
 .loc-map{position:absolute;inset:0;height:auto;border-radius:0;box-shadow:none}
 .panel{position:absolute;z-index:6;left:var(--pad);top:16px;width:var(--pw);max-height:calc(100% - 32px);border:0;box-shadow:var(--shadow-overlay)}
 .panel-body{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;border-radius:0 0 var(--radius-card) var(--radius-card)}
 .panel-body::-webkit-scrollbar{display:none}
 .pano-head{padding:var(--spacing-panel) 8px 0 var(--spacing-panel)}
 .panel-body{padding:12px var(--spacing-panel) var(--spacing-panel)}
 .panel-toggle{display:inline-flex}
 .is-collapsed .panel-body{display:none}
 .is-collapsed .pano-head{padding-bottom:14px}
 .map-fallback{inset:76px 72px 72px var(--gap)}
 .map-top{left:var(--gap);right:72px;top:16px}
 .map-cap{left:var(--gap);bottom:16px}
 .leaflet-top.leaflet-right{margin:16px 24px 0 0}
 .leaflet-bottom.leaflet-right{margin:0 12px 4px 0}
 .zone-label{left:calc((100% + var(--gap) - 72px) / 2);top:calc(50% + 10px)}
}
@media(min-width:1024px){.loc{--pad:32px;width:min(1244px,calc(100% - 64px))}}
@media(max-width:899px){.leaflet-top.leaflet-right{margin-top:8px}.map-top{top:8px;left:8px;right:64px}.map-cap{left:8px;bottom:8px;max-width:calc(100% - 128px);font-size:var(--text-meta);line-height:var(--text-meta--line-height);padding:6px 8px}.map-cap .long{display:none}}
@media(max-width:420px){.mchip .lbl-long{display:none}}

/* =========================================================================
   THE SHEET
   ========================================================================= */
main{padding-bottom:72px}
.sheet{padding-top:12px}
/* The contents strip: ReportTabNav as a page nav. Sticky under the tool, full width on the nav surface (white,
   bottom hairline), a 55px row like the Report's, ReportPills inside: transparent and muted, chip on hover,
   solid action blue when current (aria-current="location"). Pill geometry is shell.css/ReportTabNav.css: 44px
   target, a 36px painted pill (4px transparent block border), 14px inline padding, 16px icon (the filled glyph
   when current). On phones the strip scrolls sideways, with a chevron at an edge that has more. Sticky is plain
   CSS, so it works with scripting off; the active state is the enhancement. --nav-h is also the scroll offset. */
:root{--nav-h:56px}
html{scroll-padding-top:calc(var(--nav-h) + 8px)}
.toc{position:sticky;top:0;z-index:40;margin-top:16px;min-height:var(--nav-h)}
.toc .mw-nav-container{min-height:calc(var(--nav-h) - 1px)}
.toc-wrap{position:relative;display:flex;flex:1 1 0%;min-width:0;align-self:stretch;margin-inline:-4px}
.toc-strip{position:relative;display:flex;align-items:center;flex:1 1 0%;min-width:0;min-height:calc(var(--nav-h) - 1px);gap:8px;padding:5px 4px;overflow-x:auto;overscroll-behavior-x:contain;scroll-padding-inline:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.toc-strip::-webkit-scrollbar{display:none}
.toc a{box-sizing:border-box;display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;gap:8px;min-height:var(--spacing-control);padding:3px 14px;border:0;border-block:4px solid transparent;background:transparent;background-clip:padding-box;border-radius:9999px;color:var(--color-muted);font-size:var(--text-compact);line-height:1.3;font-weight:600;text-decoration:none;white-space:nowrap;transition:background-color var(--duration-fast),color var(--duration-fast)}
.toc a i{font-size:16px;line-height:1}
.toc a:hover{background:var(--color-chip);background-clip:padding-box;color:var(--color-ink)}
.toc a[aria-current]{background:var(--color-action);background-clip:padding-box;color:var(--color-surface)}
.toc a[aria-current]:hover{background:var(--color-action-hover);background-clip:padding-box}
.toc a:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset)}
.toc a[aria-current]:focus-visible{box-shadow:inset 0 0 0 2px var(--color-surface)}
.toc-wrap::before,.toc-wrap::after{content:"";position:absolute;top:calc(50% - 3px);z-index:11;width:6px;height:6px;border-top:2px solid var(--color-muted);border-right:2px solid var(--color-muted);pointer-events:none;opacity:0}
.toc-wrap::before{left:2px;transform:rotate(-135deg)}
.toc-wrap::after{right:2px;transform:rotate(45deg)}
.toc-wrap.can-scroll-left::before,.toc-wrap.can-scroll-right::after{opacity:1}
.toc-wrap:focus-within::before,.toc-wrap:focus-within::after{opacity:0}

/* The report card: REPORT_CARD. White, hairline, card shadow, token radius, token padding. */
.rcard{min-width:0;background:var(--color-surface);border:1px solid var(--color-card-border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:var(--spacing-panel) var(--spacing-card-x)}
@media(min-width:1024px){.rcard{padding:var(--spacing-card-y) var(--spacing-card-x-lg)}}
.divider{height:1px;margin:28px 0;background:var(--color-card-border)}

/* At a glance: SummaryCard cells in a SummaryRow inside one report card.
   20px ink icon, quiet label, 22px/700 value (stat-sm), receding detail. */
.glance{margin-top:20px}
.glance dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}
.glance .g{min-width:0;padding:4px 0}
.glance .g:last-child:nth-child(odd){grid-column:1 / -1}
.glance dt{display:flex;gap:10px;align-items:center;font-size:var(--text-body-sm);line-height:var(--text-body-sm--line-height);color:var(--color-muted)}
.glance dt i{font-size:20px;color:var(--color-ink)}
.glance dd{margin-top:8px;font-size:var(--text-stat-sm);line-height:1.15;letter-spacing:var(--text-stat-sm--letter-spacing);font-weight:var(--text-stat-sm--font-weight);color:var(--color-ink);font-variant-numeric:tabular-nums}
.glance dd small{display:block;margin-top:6px;font-size:var(--text-body-sm);line-height:var(--text-body-sm--line-height);font-weight:400;letter-spacing:0;color:var(--color-muted)}
@media(min-width:900px){.glance dl{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px 32px}.glance .g:last-child:nth-child(odd){grid-column:auto}}

/* A section: SectionCard. The rail (28px title, short summary) sits on the grey page; callouts and the
   white card are the body. Stacked on phones, 240px rail and 40px gap from 1024px. */
.bsec{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);padding:24px 0;scroll-margin-top:calc(var(--nav-h) + 16px)}
.glance+.bsec{margin-top:16px}
.bsec-h h2{font-size:var(--text-h2);line-height:var(--text-h2--line-height);letter-spacing:var(--text-h2--letter-spacing);font-weight:var(--text-h2--font-weight);color:var(--color-ink)}
.bsec-h p{margin-top:8px;font-size:var(--text-compact);line-height:1.45;color:var(--color-muted)}
.bsec-b{min-width:0;display:grid;gap:16px;align-content:start}
@media(min-width:1024px){
 .bsec{grid-template-columns:240px minmax(0,1fr);gap:40px;padding:28px 0 64px}
 .bsec-h{position:sticky;top:calc(var(--nav-h) + 16px);align-self:start;padding-bottom:28px}
 .bsec-h p{max-width:200px}
 .glance+.bsec{padding-top:28px}
}
/* the prose inside cards */
.prose p{max-width:46rem;font-size:var(--text-prose);line-height:var(--text-prose--line-height)}
.prose p+p{margin-top:12px}
.prose strong{font-weight:600}
.prose.sm p{font-size:var(--text-prose-sm);line-height:var(--text-prose-sm--line-height);color:var(--color-muted)}
.note{font-size:var(--text-compact);line-height:var(--text-compact--line-height);color:var(--color-muted)}
.card-acts{margin-top:24px}

/* ReportCallout: lives on the grey page above the card. Grey, warning and danger tones. A small filled
   mark (18px circle, 11px glyph), a bold row title, muted body. */
.callout{display:grid;grid-template-columns:18px minmax(0,1fr);align-items:start;gap:10px;border-radius:var(--radius-card-sm);padding:14px 16px;background:var(--color-row)}
.callout .mark{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-top:1px;border-radius:50%;background:var(--color-action);color:var(--color-surface)}
.callout .mark i{font-size:11px}
.callout .t{font-size:var(--text-row-title);line-height:var(--text-row-title--line-height);font-weight:700;color:var(--color-ink)}
.callout .b{font-size:var(--text-body);line-height:1.45;color:var(--color-muted);max-width:46rem}
.callout .t+.b{margin-top:2px}
.callout.warn{background:var(--color-attention-bg)}
.callout.warn .mark{background:var(--color-attention-dot);color:var(--color-ink)}

/* Subhead + SpecItem: 16px bold with a 20px ink icon, then quiet label / semibold value pairs */
.subhead{display:flex;align-items:center;gap:8px;margin-bottom:16px;font-size:var(--text-card-title);line-height:1;font-weight:700;color:var(--color-ink)}
.subhead i{font-size:20px;font-weight:400}
.spec{display:grid;grid-template-columns:minmax(0,1fr);gap:22px 32px}
@media(min-width:640px){.spec{grid-template-columns:repeat(3,minmax(0,1fr))}}
.spec>div{min-width:0}
.spec dt{font-size:var(--text-body-sm);line-height:1.35;color:var(--color-muted)}
.spec dd{margin-top:2px;font-size:var(--text-body);line-height:1.35;font-weight:600;color:var(--color-ink);overflow-wrap:anywhere}
.spec dd small{display:block;margin-top:4px;font-size:var(--text-body-sm);line-height:var(--text-body-sm--line-height);font-weight:400;color:var(--color-muted)}

/* The Report table (ComparisonMileageChart): grey header row, semibold ink headers, row hairlines */
.tblwrap{overflow-x:auto;border-radius:var(--radius-row)}
table.tbl{width:100%;border-collapse:collapse;font-size:var(--text-body-sm);line-height:var(--text-body-sm--line-height);font-variant-numeric:tabular-nums}
.tbl caption{text-align:left;font-size:var(--text-body-sm);color:var(--color-muted);padding:12px 0 0;caption-side:bottom}
.tbl th,.tbl td{text-align:left;padding:12px;vertical-align:baseline}
.tbl thead th{background:var(--color-row);font-weight:600;color:var(--color-ink);padding:8px 12px}
.tbl thead th:first-child{border-radius:var(--radius-row) 0 0 var(--radius-row)}
.tbl thead th:last-child{border-radius:0 var(--radius-row) var(--radius-row) 0}
.tbl tbody tr+tr>*,.tbl tbody tr:first-child>*{border-top:1px solid var(--color-row-border)}
.tbl tbody tr:first-child>*{border-top:0}
.tbl tbody th{font-weight:400;color:var(--color-ink)}
.tbl tbody th small{display:block;margin-top:2px;font-size:var(--text-label);line-height:var(--text-label--line-height);color:var(--color-muted)}
.tbl td{color:var(--color-ink)}
.tbl td.r,.tbl th.r{text-align:right;white-space:nowrap}
.tbl td.big{font-size:var(--text-stat-sm);line-height:1.1;letter-spacing:var(--text-stat-sm--letter-spacing);font-weight:var(--text-stat-sm--font-weight)}
.tbl td.off{color:var(--color-muted)}
.tbl td.yes{color:var(--color-accent-deep);font-weight:600}

/* Icon rows: Subhead-sized title, 20px ink icon, muted body, divided by row hairlines */
.rows{display:grid}
.rows>li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:0 14px;padding:18px 0;border-top:1px solid var(--color-row-border)}
.rows>li:first-child{border-top:0;padding-top:0}
.rows>li:last-child{padding-bottom:0}
.rows>li>i{font-size:20px;margin-top:0;color:var(--color-ink)}
.rows h3{font-size:var(--text-card-title);line-height:var(--text-card-title--line-height);font-weight:700;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;color:var(--color-ink)}
.rows p{margin-top:6px;font-size:var(--text-body);line-height:var(--text-body--line-height);color:var(--color-muted);max-width:44rem}

/* Penalty notice: a three-step timeline. The app has none, so it is built from the info badge tone
   (brand-tint with brand-hover text) and the row hairline colour. */
.tl{display:grid;counter-reset:s}
.tl li{position:relative;display:grid;grid-template-columns:2rem minmax(0,1fr);gap:0 14px;padding:0 0 24px}
.tl li:last-child{padding-bottom:0}
.tl li::before{counter-increment:s;content:counter(s);width:2rem;height:2rem;border-radius:50%;background:var(--color-brand-tint);color:var(--color-brand-hover);font-size:var(--text-body);font-weight:700;display:flex;align-items:center;justify-content:center}
.tl li::after{content:"";position:absolute;left:calc(1rem - 1px);top:2.5rem;bottom:.5rem;width:2px;background:var(--color-row-border)}
.tl li:last-child::after{display:none}
.tl .when{display:block;font-size:var(--text-body-sm);line-height:var(--text-body-sm--line-height);font-weight:600;color:var(--color-muted)}
.tl h3{margin-top:2px;font-size:var(--text-card-title);line-height:1.3;font-weight:700;color:var(--color-ink)}
.tl p{margin-top:4px;font-size:var(--text-body);line-height:var(--text-body--line-height);color:var(--color-muted);max-width:42rem}

/* Questions: the Report's details row (44px summary, caret, row hairline) */
details.q{border-top:1px solid var(--color-row-border)}
details.q:first-of-type{border-top:0}
details.q>summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:var(--spacing-control);padding:12px 0;font-size:var(--text-card-title);line-height:1.35;font-weight:600;color:var(--color-ink);transition:color var(--duration-fast)}
details.q>summary::-webkit-details-marker{display:none}
details.q>summary i{color:var(--color-muted);font-size:16px;transition:transform var(--duration-fast)}
details.q[open]>summary i{transform:rotate(180deg)}
details.q>summary:hover{color:var(--color-brand-hover)}
details.q .a{padding:0 0 16px;color:var(--color-muted);max-width:44rem;font-size:var(--text-body);line-height:var(--text-body--line-height)}

/* Other zones and sources: the Report's ActionLink row (20px icon, bold label, muted helper, arrow). */
.links{display:grid}
.links>li+li{border-top:1px solid var(--color-row-border)}
.link{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:start;gap:12px;padding:14px 16px;margin:0 -16px;border-radius:var(--radius-row);color:var(--color-ink);text-decoration:none;transition:background-color var(--duration-fast)}
.link:hover{background:var(--color-chip)}
.link>i:first-child{margin-top:1px;font-size:18px;color:var(--color-ink);transition:color var(--duration-fast)}
.link>i:last-child{margin-top:2px;font-size:14px;color:var(--color-muted);transition:color var(--duration-fast)}
.link b{display:block;font-size:var(--text-body);line-height:1.3;font-weight:700;letter-spacing:-.02em;color:var(--color-ink);transition:color var(--duration-fast)}
.link>span{min-width:0}
.link b+span{display:block;margin-top:2px;font-size:var(--text-compact);line-height:1.45;color:var(--color-muted)}
.link:hover b,.link:hover>i{color:var(--color-action)}
.review{margin-top:0;font-size:var(--text-compact);line-height:var(--text-compact--line-height);color:var(--color-muted)}
.review strong{color:var(--color-ink);font-weight:600}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
@media(forced-colors:active){
 .btn,.mchip,.nearby>summary,.toc a,.panel-toggle,.link{border:1px solid ButtonText}
 .panel,.rcard,.loc,.nearby-panel,.map-cap,.verdict,.callout{border:1px solid CanvasText}
}
@media print{
 .mw-header,#mw-footer,.skip,.toc,.map-top,.panel-toggle,[data-js]{display:none!important}
 body{background:var(--color-surface)}
 .loc{display:block;height:auto;box-shadow:none;overflow:visible;width:auto;margin:0}
 .panel{position:static;box-shadow:none;max-height:none}
 .loc-map{display:none}
 .bsec{break-inside:avoid;padding:24px 0 0}.bsec-h{position:static}
 .rcard{box-shadow:none}
}