/* MOT Station Finder tool page (/tools/html/mot-station-finder.html).
   A floating panel over a UK map, then the guide sheet. Seeded from the Scottish LEZ pages
   (low-emission-zones/assets/lez-page.css: stage, panel, answer card, map chips, sheet) and the MOT town pages
   (design/v12/assets/v12.css: class pills, result rows, cluster icons, station pop-up). The duplication is
   deliberate for now; a shared sheet is a later job.
   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 and a few 4px-scale gaps.
   Rules: a border is a divider, never the outline of a control (controls get a soft fill). Status colour sits on
   a small dot only. The page is complete HTML without JavaScript; mot-station-finder.js only enhances it. */

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

/* ---------- buttons, pills (the Report's shapes) ---------- */
.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}
.btn:disabled{opacity:.6;cursor:default}
.pillrow{display:flex;flex-wrap:wrap;gap:8px}
/* ReportPills: transparent and muted, chip on hover, solid action blue when pressed */
.pill{display:inline-flex;align-items:center;gap:6px;min-height:var(--spacing-control);padding:0 14px;border:0;border-radius:9999px;background:transparent;color:var(--color-muted);font:600 var(--text-compact)/1.3 Jost,system-ui,sans-serif;white-space:nowrap;cursor:pointer;transition:background-color var(--duration-fast),color var(--duration-fast)}
.pill i{font-size:17px}
.pill:hover{background:var(--color-chip);color:var(--color-ink)}
.pill[aria-pressed="true"]{background:var(--color-action);color:var(--color-surface)}
.pill[aria-pressed="true"]:hover{background:var(--color-action-hover)}
.pill:disabled{opacity:.6;cursor:default}
.spin{animation:mw-spin 1s linear infinite}
@keyframes mw-spin{to{transform:rotate(360deg)}}

/* =========================================================================
   THE TOOL: panel + map. Stacked on phones and tablets, floating panel on desktop.
   ========================================================================= */
.loc{display:grid;gap:12px;padding:0 16px}
.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{flex:none;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{flex:1 1 auto;min-height:0;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;white-space:nowrap}
.nojs-note{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.nojs-note p{font-size:var(--text-compact);line-height:var(--text-compact--line-height);color:var(--color-muted)}

/* the search form */
.finder{display:flex;flex-direction:column;gap:12px;flex:none}
.search-row{display:flex;gap:8px}
.field{position:relative;flex:1 1 auto;min-width:0}
.field input{width:100%;min-height:var(--spacing-control);padding:0 44px 0 42px;border:0;border-radius:var(--radius-row);background:var(--color-row);color:var(--color-ink);font:400 var(--text-body)/1.3 Jost,system-ui,sans-serif;appearance:none}
.field input::placeholder{color:var(--color-faint)}
.field input::-webkit-search-cancel-button{display:none}
.field>i{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:18px;color:var(--color-faint);pointer-events:none}
.field .clear{position:absolute;right:2px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:var(--spacing-control);height:var(--spacing-control);border:0;border-radius:50%;background:transparent;color:var(--color-muted);font-size:16px;cursor:pointer}
.field .clear:hover{background:var(--color-chip);color:var(--color-ink)}
.opts{display:flex;flex-wrap:wrap;align-items:center;gap:4px 2px}
.opts .sep{width:1px;height:20px;margin:0 6px;background:var(--color-row-border)}
.radius{display:flex;flex-wrap:wrap;gap:0}
.radius .pill{padding:0 12px}
/* Vehicle class: one select-style button beside Near me. The menu opens under the row, lists every class with its
   station count (filled in on first open) and picks one at a time; "All classes" removes the filter. */
.opts{position:relative}
.selbtn{display:inline-flex;align-items:center;gap:6px;min-height:var(--spacing-control);margin-left:6px;padding:0 12px 0 14px;border:0;border-radius:9999px;background:var(--color-row);color:var(--color-ink);font:600 var(--text-compact)/1.3 Jost,system-ui,sans-serif;white-space:nowrap;cursor:pointer;transition:background-color var(--duration-fast)}
.selbtn:hover,.selbtn[aria-expanded="true"]{background:var(--color-chip)}
.selbtn i{font-size:17px}
.selbtn .caret{font-size:13px;color:var(--color-muted);transition:transform var(--duration-fast)}
.selbtn[aria-expanded="true"] .caret{transform:rotate(180deg)}
.menu{position:absolute;z-index:8;top:calc(100% + 4px);left:0;width:min(320px,100%);padding:6px;border-radius:var(--radius-card-sm);background:var(--color-surface);box-shadow:var(--shadow-overlay)}
.menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:0 12px;border:0;border-radius:var(--radius-row);background:transparent;color:var(--color-ink);font:600 var(--text-body)/1.3 Jost,system-ui,sans-serif;text-align:left;cursor:pointer}
.menu button:hover,.menu button:focus-visible{background:var(--color-row)}
.menu button[aria-checked="true"]{background:var(--color-brand-tint);color:var(--color-brand-hover)}
.menu button i{font-size:18px}
.menu .n{margin-left:auto;font-weight:500;font-size:var(--text-compact);color:var(--color-muted);font-variant-numeric:tabular-nums}

/* Before a search the list area is a list too: the busiest towns for the picked class, each a one-tap search.
   Counts come from the finder's own text search, so a row's number is what the search then returns. */
.lh{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px var(--spacing-card-x) 11px}
.lh-t{font-size:var(--text-card-title);line-height:1.2;font-weight:700;letter-spacing:-.01em;color:var(--color-ink)}
.lh-s{font-size:var(--text-compact);color:var(--color-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.tw{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;align-items:center;gap:10px;width:100%;min-height:50px;padding:0 16px 0 var(--spacing-card-x);border:0;border-top:1px solid var(--color-row-border);background:transparent;color:var(--color-ink);font:400 var(--text-body)/1.3 Jost,system-ui,sans-serif;text-align:left;cursor:pointer}
li:first-child>.tw{border-top:0}
.tw:hover{background:var(--color-row)}
.tw:focus-visible{outline:var(--focus-ring);outline-offset:-2px}
.tw .tn{font-weight:600}
.tw .tc{font-size:var(--text-compact);color:var(--color-muted);font-variant-numeric:tabular-nums}
.tw i{font-size:15px;color:var(--color-faint)}

/* The answer card: one grey card, status colour on the dot only. */
.verdict{flex:none;border-radius:var(--radius-card-sm);padding:var(--spacing-card-x);background:var(--color-row);display:flex;flex-direction:column;gap:8px}
.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)}
.verdict[data-kind="neutral"] .dot{background:var(--color-brand)}
.verdict[data-kind="unknown"] .dot{background:var(--color-attention-dot)}
.verdict[data-kind="restricted"] .dot{background:var(--color-danger)}
.v-why{font-size:var(--text-body);line-height:var(--text-body--line-height);color:var(--color-muted)}
.v-note{font-size:var(--text-caption);line-height:var(--text-caption--line-height);color:var(--color-mid)}
/* with a list showing, the card is only the count line, evenly spaced between the search and the rows */
.verdict.is-bare{padding-block:12px;gap:2px}
.pn-results:has(.verdict.is-bare){gap:0}
.v-acts{display:flex;flex-wrap:wrap;gap:8px}
.verdict .btn{background:var(--color-surface)}
.verdict .btn:hover{background:var(--color-chip)}

/* the results list. On desktop it scrolls inside the panel; on phones it has a capped height of its own. */
.pn-results{display:flex;flex-direction:column;gap:14px;min-height:0;flex:1 1 auto}
.pn-list{flex:1 1 auto;min-height:0;max-height:clamp(260px,46svh,480px);overflow-y:auto;overscroll-behavior:contain;margin:0 calc(-1 * var(--spacing-card-x));border-top:1px solid var(--color-row-border);scrollbar-width:thin}
.rows{list-style:none;margin:0;padding:0}
.st{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 4px;align-items:center;padding:10px 4px 10px var(--spacing-card-x);border-top:1px solid var(--color-row-border)}
.st:first-child{border-top:0}
.st:hover{background:var(--color-row)}
.st.is-sel{background:var(--color-brand-tint)}
.st .main{min-width:0}
.st .nm{all:unset;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--text-body);font-weight:600;line-height:1.3;letter-spacing:-.005em;color:var(--color-ink);cursor:pointer;text-align:left}
.st .nm:focus-visible{outline:var(--focus-ring);outline-offset:2px;border-radius:4px}
.st .ad{font-size:var(--text-compact);line-height:1.4;color:var(--color-muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st .mt{display:flex;align-items:center;gap:10px;margin-top:2px;font-size:var(--text-compact);line-height:1.4;color:var(--color-muted);font-variant-numeric:tabular-nums}
.st .km{font-weight:600;color:var(--color-ink);white-space:nowrap}
.vt{display:inline-flex;align-items:center;gap:6px;color:var(--color-mid);font-size:16px}
.acts{display:flex;align-items:center}
.ib{display:inline-flex;align-items:center;justify-content:center;width:var(--spacing-control);height:var(--spacing-control);border-radius:50%;color:var(--color-muted);text-decoration:none;border:0;background:none;cursor:pointer;font-size:20px}
.ib:hover{background:var(--color-brand-tint);color:var(--color-brand-hover)}
.ib:focus-visible{outline-offset:-3px}
.more-row{display:flex;justify-content:center;padding:12px var(--spacing-card-x)}

/* 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}
.map-error{position:absolute;z-index:450;left:12px;right:12px;top:64px;max-width:360px;padding:12px 16px;border-radius:var(--radius-card-sm);background:var(--color-surface);box-shadow:var(--shadow-popover);font-size:var(--text-compact);line-height:var(--text-compact--line-height);color:var(--color-ink)}
/* Touch: one finger belongs to the page (touch-action: pan-y, and the script keeps a single touch from Leaflet);
   two fingers move and zoom the map. 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}
.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}
.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}
.map-top{position:absolute;z-index:500;top:12px;left:68px;right:68px;display:flex;justify-content:center;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{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;transition:background-color var(--duration-fast),color var(--duration-fast)}
.mchip:hover{background:var(--color-chip);color:var(--color-ink)}
.mchip i{font-size:16px}
/* Map sources: one icon, one fly-out (the LEZ pages' pattern). A white 44px disc at the top right; the panel opens
   downward under it. The DVSA note is one group, the basemap credits another; once the map loads, Leaflet's own
   attribution control moves into #map-credits. Written open, so with scripting off it is a plain card. */
.map-sources{position:absolute;z-index:1100;right:8px;top:8px}
.map-sources>summary{display:grid;place-items:center;width:var(--spacing-control);height:var(--spacing-control);border-radius:50%;background:var(--color-surface);box-shadow:var(--shadow-popover);color:var(--color-mid);cursor:pointer;list-style:none;font-size:18px;line-height:1;transition:background-color var(--duration-fast),color var(--duration-fast)}
.map-sources>summary i{display:block}
.map-sources>summary::-webkit-details-marker{display:none}
.map-sources>summary:hover,.map-sources[open]>summary{background:var(--color-chip);color:var(--color-ink)}
.map-sources-panel{position:absolute;right:0;top:calc(100% + 8px);width:min(320px,calc(100vw - 48px));display:grid;gap:12px;padding:14px 16px;border-radius:var(--radius-card-sm);background:var(--color-surface);box-shadow:var(--shadow-overlay);font-size:var(--text-body-sm);line-height:var(--text-body-sm--line-height);color:var(--color-muted)}
.map-sources-title{font-weight:600;color:var(--color-ink)}
.map-sources-group{display:grid;gap:4px}
.map-sources-group+.map-sources-group{padding-top:12px;border-top:1px solid var(--color-row-border)}
.map-sources-panel a{color:var(--color-brand-hover);text-decoration:underline}
.map-sources-panel .leaflet-control-attribution{float:none;position:static;max-width:100%;margin:0;padding:0;border-radius:0;font:inherit;line-height:inherit;white-space:normal;overflow:visible;color:inherit;background:transparent!important;box-shadow:none}
html:not(.js) .map-sources>summary{display:none}
html:not(.js) .map-sources-panel{position:static}
html:not(.js) .loc-map{min-height:320px}

/* clusters and pins: token colours */
.marker-cluster{background:none;border:0}
.marker-cluster div{width:100%;height:100%;margin:0;background:var(--color-brand);color:var(--color-surface);border:2px solid var(--color-surface);border-radius:50%;display:flex;align-items:center;justify-content:center;font:600 13px Jost,system-ui,sans-serif;box-shadow:var(--shadow-popover)}
.marker-cluster-large div{background:var(--color-brand-hover);font-size:14px}
.selection-pin{border:3px solid var(--color-ink);border-radius:50%;background:var(--color-brand-hover);box-shadow:0 0 0 2px var(--color-surface)}
.you-pin{border:3px solid var(--color-surface);border-radius:50%;background:var(--color-brand);box-shadow:var(--shadow-popover)}
/* station pop-up */
.leaflet-popup-content-wrapper{border-radius:var(--radius-card-sm);box-shadow:var(--shadow-overlay);padding:0;color:var(--color-ink)}
.leaflet-popup-content{margin:0;width:auto!important;min-width:240px;max-width:280px}
.leaflet-popup-tip{box-shadow:var(--shadow-overlay)}
.leaflet-container a.leaflet-popup-close-button{top:0;right:0;width:var(--spacing-control);height:var(--spacing-control);font-size:20px;line-height:var(--spacing-control);color:var(--color-muted)}
.pop{padding:14px 16px 12px}
.pop-t{font-size:var(--text-body);font-weight:700;line-height:1.25;letter-spacing:-.01em;margin:0 32px 2px 0}
.pop-a{font-size:var(--text-compact);line-height:1.4;color:var(--color-muted)}
.pop-v{display:flex;gap:10px;margin-top:6px;color:var(--color-muted);font-size:var(--text-label);font-weight:600}
.pop-v span{display:inline-flex;align-items:center;gap:4px}
.pop-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.pop-acts a{display:inline-flex;align-items:center;gap:6px;min-height:var(--spacing-control);padding:0 12px;border-radius:9999px;background:var(--color-chip);color:var(--color-ink);text-decoration:none;font-size:var(--text-compact);font-weight:600}
.pop-acts a:hover{background:var(--color-rail)}
.pop-acts a.primary{background:var(--color-action);color:var(--color-surface)}
.pop-acts a.primary:hover{background:var(--color-action-hover)}
.pop-acts i{font-size:16px}

/* "Hide list": the panel keeps its search and drops the answer and the list */
.is-collapsed .pn-results{display:none}


/* 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(640px,calc(100svh - var(--mw-header-height, 72px) - 40px - 36px - 8px - 20px),800px)}
 .loc-map{position:absolute;inset:0;height:auto;border-radius:0;box-shadow:none}
 /* The panel sits at the map's foot at the height of its content (the search, plus any message). Once a list is showing it is the full card; initPanelEase() in the script eases between the two. */
 .panel{position:absolute;z-index:6;left:var(--pad);bottom:16px;width:var(--pw);height:auto;max-height:calc(100% - 32px);border:0;box-shadow:var(--shadow-overlay)}
 .loc:has(#results-section:not([hidden])):not(.is-collapsed) .panel{height:calc(100% - 32px)}
 .panel-body{overflow:hidden;border-radius:0 0 var(--radius-card) var(--radius-card);padding:12px var(--spacing-panel) 0}
 .pano-head{padding:var(--spacing-panel) 8px 0 var(--spacing-panel)}
 .panel-toggle{display:inline-flex}
 .pn-list{max-height:none;margin:0 calc(-1 * var(--spacing-panel))}
 /* no list yet (ready, searching, no results, error): the answer card is the list's own space, so the card never has a gap under it */
 .pn-results:has(.pn-list[hidden]){gap:0}
 .pn-results:has(.pn-list[hidden]) .verdict{flex:1 1 auto;justify-content:center;align-items:flex-start;margin:0 calc(-1 * var(--spacing-panel));padding:0 var(--spacing-panel) var(--spacing-panel);border-radius:0;background:transparent;border-top:1px solid var(--color-row-border)}
 .st{padding-left:var(--spacing-panel)}
 .lh,.tw{padding-left:var(--spacing-panel)}
 .more-row{padding-inline:var(--spacing-panel)}
 .panel-body::after{content:"";flex:none;height:var(--spacing-panel);margin-top:-14px}
 /* ready (nothing searched yet): the search alone, as under "Hide list" */
 .is-idle .pn-results,.is-idle .panel-toggle{display:none}
 /* compact: "Hide list", or no list showing. The card is as tall as its content, so it needs no clipping and its menu opens upward from the map's foot */
 .loc:is(.is-collapsed,:not(:has(#results-section:not([hidden])))) .panel-body{padding-bottom:var(--spacing-panel);overflow:visible}
 .loc:is(.is-collapsed,:not(:has(#results-section:not([hidden])))) .panel-body::after{display:none}
 .loc:is(.is-collapsed,:not(:has(#results-section:not([hidden])))) .menu{top:auto;bottom:calc(100% + 4px)}
 .map-top{left:calc(var(--pad) + 52px);right:calc(var(--pad) + 52px);top:16px}  /* equal insets, so the chip centres on the whole map */
 .map-sources{right:var(--pad);top:16px}
 .map-error{left:var(--gap);top:76px}
 .leaflet-bottom.leaflet-right .leaflet-control{margin:0 var(--pad) 16px 0}  /* zoom: bottom right, the panel's inset from the left */
}
@media(min-width:1024px){.loc{--pad:32px;width:min(1244px,calc(100% - 64px))}}
@media(max-width:899px){.map-top{top:8px;left:60px;right:60px}.leaflet-control-zoom{display:none}}
@media(max-width:420px){.mchip .lbl-long{display:none}.search-row .btn .lbl{display:none}}

/* =========================================================================
   THE SHEET: the four guide sections, kept as they were, in the LEZ rail layout
   ========================================================================= */
main{padding-bottom:72px}
.sheet{padding-top:12px}
/* The contents pills live in the app header (navbar.js #mw-tabnav-strip), moved there by the script through MotorwiseHeader.mountPageTabs;
   the .toc nav in the page is only their hidden source. --stick is the fixed header's height, and is the scroll offset for the sections. */
:root{--stick:0px}
html.js{--stick:var(--mw-header-height,0px)}
html{scroll-padding-top:calc(var(--stick) + 16px)}
.loc{scroll-margin-top:calc(var(--stick) + 8px)}
.toc{display:none}
.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)}}
.bsec{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);padding:24px 0;scroll-margin-top:calc(var(--stick) + 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 40px}
 .bsec-h{position:sticky;top:calc(var(--stick) + 16px);align-self:start;padding-bottom:28px}
 .bsec-h p{max-width:200px}
}
.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}
.prose p{max-width:46rem;font-size:var(--text-prose);line-height:var(--text-prose--line-height);color:var(--color-muted)}
.prose p+p{margin-top:12px}
.prose strong{font-weight:600;color:var(--color-ink)}
.prose.sm p{font-size:var(--text-prose-sm);line-height:var(--text-prose-sm--line-height)}
.note{font-size:var(--text-compact);line-height:var(--text-compact--line-height);color:var(--color-muted)}
.divider{height:1px;margin:28px 0;background:var(--color-card-border)}
.prose a,.callout a,.facts a,.note a{color:var(--color-brand-hover)}

/* Numbered steps: the LEZ pages' timeline (brand-tint circle, row-hairline rail) */
.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 h3{margin-top:4px;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}

/* The Report table (class guide): grey header row, 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)}
.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>*{border-top:1px solid var(--color-row-border)}
.tbl tbody th{width:1%;white-space:nowrap;font-size:var(--text-body);font-weight:700;color:var(--color-ink)}
.tbl td{font-size:var(--text-body);color:var(--color-ink)}
.tbl td strong{font-weight:600}
.tbl td small{display:block;margin-top:2px;font-size:var(--text-body-sm);line-height:var(--text-body-sm--line-height);color:var(--color-muted)}

/* Icon rows (data source): 20px ink icon, bold title, muted body */
.facts{display:grid}
.facts>li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:0 14px;padding:18px 0;border-top:1px solid var(--color-row-border)}
.facts>li:first-child{border-top:0;padding-top:0}
.facts>li:last-child{padding-bottom:0}
.facts>li>i{font-size:20px;color:var(--color-ink)}
.facts h3{font-size:var(--text-card-title);line-height:var(--text-card-title--line-height);font-weight:700;color:var(--color-ink)}
.facts p{margin-top:6px;font-size:var(--text-body);line-height:var(--text-body--line-height);color:var(--color-muted);max-width:44rem}
.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 .btn{margin-top:12px}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
@media(forced-colors:active){
 .btn,.pill,.mchip,.panel-toggle,.pop-acts a,.selbtn{border:1px solid ButtonText}
 .pill[aria-pressed="true"]{border-color:Highlight;outline:2px solid Highlight}
 .map-sources>summary{border:1px solid ButtonText}
 .panel,.rcard,.loc,.map-sources>summary,.map-sources-panel,.verdict,.callout{border:1px solid CanvasText}
}
@media print{
 .mw-header,#mw-footer,.skip,.map-top,.panel-toggle,.loc-map,[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}
 .bsec{break-inside:avoid;padding:24px 0 0}.bsec-h{position:static}
 .rcard{box-shadow:none}
}