/* Option A: the regional floating panel and a live UK map. All rules stay inside the hub. */
.hub-hero{display:grid;gap:12px;margin:16px 0 24px;font:400 var(--text-body)/var(--text-body--line-height) Jost,system-ui,sans-serif;color:var(--color-ink)}
.hub-hero *{box-sizing:border-box}
.hub-hero :is(h1,h2,h3,p,ul,dl,dd){margin:0}
.hub-hero ul{padding:0;list-style:none}
.hub-hero [hidden]{display:none!important}
.hub-hero a{color:var(--color-brand-hover);text-underline-offset:2px}
.hub-hero :is(a,summary,button,input,select):focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset)}
.hub-hero button{font-family:inherit;cursor:pointer}
.hub-hero .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hub-hero .panel{background:var(--color-surface);border-radius:var(--radius-card);box-shadow:var(--shadow-card);display:flex;flex-direction:column;min-width:0}
.hub-hero .pano-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;padding:var(--spacing-panel) 12px 0 var(--spacing-card-x)}
.hub-hero .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)}
.hub-hero .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-size:var(--text-compact);font-weight:600;margin-top:-6px;transition:background-color var(--duration-fast),color var(--duration-fast)}
.hub-hero .panel-toggle i{font-size:16px;transition:transform var(--duration-fast)}
.hub-hero .panel-toggle:hover{background:var(--color-chip);color:var(--color-ink)}
.hub-hero.is-collapsed .panel-toggle i{transform:rotate(180deg)}
.hub-hero .panel-body{display:flex;flex-direction:column;gap:14px;padding:12px var(--spacing-card-x) var(--spacing-panel);min-width:0}
.hub-hero .lede{font-size:var(--text-prose-sm);line-height:var(--text-prose-sm--line-height);color:var(--color-muted)}
.hub-hero .lede strong{color:var(--color-ink);font-weight:600;white-space:nowrap}
.hub-hero .plate-label{display:block;margin-bottom:8px;font-size:var(--text-body-sm);color:var(--color-muted)}
.hub-hero .tool-plate{display:flex;align-items:stretch;gap:8px;width:264px;max-width:100%;height:auto;margin-inline:auto;padding:10px;background:var(--color-surface);border:0;border-radius:var(--radius-card);box-shadow:var(--shadow-card)}
.hub-hero .tool-plate-stripe{display:flex;flex:none;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)}
.hub-hero .tool-plate-stripe span{font-size:var(--text-fine);font-weight:600}
.hub-hero .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;box-shadow:none}
.hub-hero .tool-plate .plate-input::placeholder{color:var(--color-plate-text);opacity:.6}
.hub-hero .tool-plate:focus-within{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset)}
.hub-hero .verdict{border-radius:var(--radius-card-sm);padding:var(--spacing-card-x);background:var(--color-row);display:flex;flex-direction:column;gap:12px;min-width:0}
.hub-hero .v-stack,.hub-hero .v-results{display:grid}
.hub-hero .v-results{grid-area:1 / 1;min-width:0}
.hub-hero .v-state{grid-area:1 / 1;min-width:0;display:flex;flex-direction:column;gap:12px;visibility:visible;animation:none}
/* Inactive states stay measured, and disappear from keyboard and accessibility navigation. */
.hub-hero .v-state.hidden{display:flex!important;visibility:hidden!important}
.hub-hero .v-results.hidden{display:grid!important;visibility:hidden}
.hub-hero .v-results.hidden .v-state{visibility:hidden!important}
.hub-hero .v-head{display:flex;gap:10px;align-items:center}
.hub-hero .v-head i{font-size:20px}
.hub-hero .v-label{font-size:var(--text-body-sm);color:var(--color-muted)}
.hub-hero .v-title{display:flex;gap:10px;align-items:center}
.hub-hero .v-title :is(h2,.v-t){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)}
.hub-hero .v-state.ghost{visibility:hidden!important;pointer-events:none}
/* Hidden copies of every wording share the cell, so the card keeps one height whatever the selection says. */
.hub-hero .v-big.is-empty{visibility:hidden}
/* A map-selected scheme replaces the London verdict in the card; the checker's own result states stay untouched underneath. */
.hub-hero #ulez-results[data-zone-view] .v-results>.v-state:not(#result-zone){visibility:hidden!important}
.hub-hero .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)}
.hub-hero .v-rows>div:first-child{border-top:0;padding-top:0}
.hub-hero .v-rows dt{color:var(--color-muted);font-size:var(--text-body-sm)}
.hub-hero .v-rows dd{font-weight:600;text-align:right;max-width:75%}
.hub-hero .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);font-variant-numeric:tabular-nums}
.hub-hero .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}
.hub-hero .v-why{font-size:var(--text-body);color:var(--color-muted);overflow-wrap:anywhere}
.hub-hero .v-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.hub-hero .btn,.hub-hero .reset{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--spacing-control);padding:var(--spacing-pill-y) var(--spacing-pill-x);border:0;border-radius:9999px;background:var(--color-surface);color:var(--color-ink);font:600 var(--text-compact)/1 Jost,sans-serif;text-decoration:none}
.hub-hero .btn:hover,.hub-hero .reset:hover{background:var(--color-chip)}
.hub-hero .reset{padding-inline:10px;background:transparent;color:var(--color-muted)}
.hub-hero .reset[hidden]{display:inline-flex!important;visibility:hidden}
.hub-hero .fine{font-size:var(--text-caption);line-height:var(--text-caption--line-height);color:var(--color-mid)}
.hub-hero .loc-map{position:relative;isolation:isolate;height:clamp(440px,74svh,560px);border-radius:var(--radius-card);overflow:hidden;background:var(--color-rail);box-shadow:var(--shadow-card);margin:0}
.hub-hero #zone-map-canvas{position:absolute;z-index:0;inset:0;width:100%;height:100%;background:var(--color-rail);font-family:inherit}
.hub-hero .map-fallback{position:absolute;z-index:1;inset:128px 24px 24px;display:grid;place-items:center;text-align:center;color:var(--color-muted);pointer-events:none}
.hub-hero .map-fallback a{pointer-events:auto}
.hub-hero .loc-map[data-map-state="ready"] .map-fallback{display:none}
.hub-hero .map-top{position:absolute;z-index:500;top:8px;left:8px;right:8px;display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;pointer-events:none}
.hub-hero .map-top>*{pointer-events:auto}
.hub-hero .seg{display:inline-flex;gap:2px;padding:4px;border-radius:9999px;background:var(--color-surface);box-shadow:var(--shadow-popover)}
.hub-hero .seg button{min-height:36px;padding:0 11px;border:0;border-radius:9999px;background:transparent;color:var(--color-muted);font:600 var(--text-compact)/1 Jost,sans-serif;white-space:nowrap;transition:background-color var(--duration-fast),color var(--duration-fast)}
.hub-hero .seg button:hover{background:var(--color-chip);color:var(--color-ink)}
.hub-hero .seg button[aria-pressed="true"]{background:var(--color-action);color:var(--color-surface);text-decoration:none}
.hub-hero .nearby{position:relative}
.hub-hero .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;cursor:pointer;white-space:nowrap;list-style:none}
.hub-hero .nearby>summary::-webkit-details-marker{display:none}
.hub-hero .nearby>summary:hover,.hub-hero .nearby[open]>summary{background:var(--color-chip);color:var(--color-ink)}
.hub-hero .nearby[open]>summary .car{transform:rotate(180deg)}
/* This single positioning rule owns the pop-down; the list can also sit in a side pop-out. */
.hub-hero .nearby-panel{position:absolute;top:calc(100% + 8px);left:0;z-index:10;width:320px;max-width:calc(100vw - 48px);max-height:min(440px,60svh);overflow:auto;overscroll-behavior:contain;scrollbar-width:none;padding:8px;border-radius:var(--radius-card-sm);background:var(--color-surface);box-shadow:var(--shadow-overlay)}
.hub-hero .nearby-panel::-webkit-scrollbar{display:none}
.hub-hero .zgrp{padding:10px 12px 4px;font-size:var(--text-label);line-height:1.3;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-mid)}
.hub-hero .zrow{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:52px;padding:6px 12px;border:0;border-radius:var(--radius-row);background:transparent;color:var(--color-ink);font:inherit;text-align:left;text-decoration:none}
.hub-hero .zrow:hover{background:var(--color-chip)}
.hub-hero .zrow b{display:block;font-size:var(--text-body);line-height:1.25;font-weight:600}
.hub-hero .zrow small{display:block;margin-top:2px;font-size:var(--text-body-sm);line-height:1.3;color:var(--color-muted)}
.hub-hero .zrow .end{display:flex;align-items:center;gap:8px;flex:none}
.hub-hero .zrow .end i{font-size:16px;color:var(--color-faint)}
.hub-hero .badge{display:inline-flex;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}
.hub-hero .badge.here{background:var(--color-brand-tint);color:var(--color-brand-hover)}
/* The legend lives in the primary card: one quiet row of swatches, a faint note, and a grey info chip for sources. */
.hub-hero .panel-key{--kx:var(--spacing-card-x);position:relative;display:flex;align-items:flex-start;gap:8px;margin-top:-8px;padding:0 var(--kx) 16px;font-size:var(--text-caption);line-height:var(--text-caption--line-height);color:var(--color-muted)}
.hub-hero .lg{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:4px 12px;color:var(--color-muted);font-weight:400}
.hub-hero .lg span{display:flex;align-items:center;gap:7px;min-height:20px;white-space:nowrap}
/* The summary keeps the site's 44px hit area; negative margins let its 18px icon sit flush with the row. */
.hub-hero .map-sources>summary{display:grid;place-items:center;flex:none;width:var(--spacing-control);height:var(--spacing-control);margin:-12px -13px -12px -4px;border-radius:50%;color:var(--color-mid);cursor:pointer;list-style:none;font-size:18px;line-height:1;transition:color var(--duration-fast)}
.hub-hero .map-sources>summary i{display:block}
.hub-hero .map-sources>summary::-webkit-details-marker{display:none}
.hub-hero .map-sources>summary:hover,.hub-hero .map-sources[open]>summary{color:var(--color-ink)}
.hub-hero .map-sources-panel{position:absolute;z-index:10;left:var(--kx);right:var(--kx);bottom:calc(100% + 2px);display:grid;gap:6px;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)}
.hub-hero .map-sources-title{font-weight:600;color:var(--color-ink)}
.hub-hero .map-sources-note{color:var(--color-muted)}
.hub-hero .map-sources-link{display:inline-flex;align-items:center;justify-self:start;min-height:32px;text-decoration:underline}
.hub-hero .map-sources-panel .leaflet-control-attribution{float:none;position:static;max-width:100%;margin:0;padding:0;border-radius:0;font:inherit;white-space:normal;overflow:visible;color:inherit;background:transparent}
.hub-hero .map-sources-panel a{color:var(--color-brand-hover);text-decoration:underline}
.hub-hero .key,.hub-hero .sw{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--color-mid);flex:none}
.hub-hero .st{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:var(--color-mid)}
.hub-hero :is(.key,.st).charge,.hub-hero [data-kind="charge"] .sw{background:var(--color-brand-hover)}
.hub-hero :is(.key,.st).restricted,.hub-hero [data-kind="restricted"] .sw{background:var(--color-danger-strong)}
.hub-hero :is(.key,.st).compliant,.hub-hero :is(.key,.st).exempt,.hub-hero :is([data-kind="compliant"],[data-kind="exempt"]) .sw{background:var(--color-accent-deep)}
.hub-hero :is(.key,.st).pilot,.hub-hero [data-kind="pilot"] .sw{background:var(--color-surface);box-shadow:inset 0 0 0 2.5px var(--color-brand-hover)}
.hub-hero :is(.key,.st).unknown{background:var(--color-muted)}
.hub-hero .map-messages{position:absolute;z-index:460;top:116px;left:12px;right:12px;pointer-events:none}
.hub-hero .map-messages p{width:fit-content;max-width:100%;padding:8px 12px;border-radius:var(--radius-panel);background:var(--color-surface);box-shadow:var(--shadow-popover);font-size:var(--text-body-sm);color:var(--color-muted)}
/* A 16px dot inside a real 44px button, clustered at 26 screen pixels. */
.hub-hero .marker-shell{background:none;border:0}
.hub-hero .mk{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;transition:opacity var(--duration-fast)}
.hub-hero .mk .dot{display:grid;place-items:center;flex:none;width:16px;height:16px;border-radius:50%;background:var(--color-brand-hover);color:var(--color-surface);font:700 var(--text-label)/1 Jost,sans-serif;box-shadow:0 0 0 3px var(--color-surface),var(--shadow-popover);transition:transform var(--duration-fast)}
.hub-hero .mk[data-kind="restricted"] .dot{background:var(--color-danger-strong)}
.hub-hero .mk[data-kind="free"] .dot{background:var(--color-mid)}
.hub-hero .mk[data-kind="unknown"] .dot{background:var(--color-muted)}
.hub-hero .mk:is([data-kind="compliant"],[data-kind="exempt"]) .dot{background:var(--color-accent-deep)}
.hub-hero .mk[data-kind="pilot"] .dot{background:var(--color-surface);box-shadow:inset 0 0 0 3px var(--color-brand-hover),0 0 0 3px var(--color-surface),var(--shadow-popover)}
.hub-hero .mk[data-kind="cluster"] .dot{width:26px;height:26px;background:var(--color-ink)}
.hub-hero .mk:hover .dot,.hub-hero .mk.is-sel .dot{transform:scale(1.25)}
.hub-hero .mk.is-dim{opacity:.4}
.hub-hero .mk:focus-visible{outline:none}
.hub-hero .mk:focus-visible .dot{outline:var(--focus-ring);outline-offset:3px}
.hub-hero .mk-l{position:absolute;left:calc(50% + 14px);top:50%;transform:translateY(-50%);display:none;padding:4px 9px;border-radius:9999px;background:var(--color-surface);box-shadow:var(--shadow-popover);color:var(--color-ink);font-size:var(--text-caption);line-height:1.3;font-weight:600;white-space:nowrap;pointer-events:none}
.hub-hero .mk[data-kind="cluster"] .mk-l{left:calc(50% + 18px)}
.hub-hero .show-labels .mk-l,.hub-hero .mk:hover .mk-l,.hub-hero .mk:focus-visible .mk-l,.hub-hero .mk.is-sel .mk-l{display:block}
.hub-hero .mcard{position:absolute;z-index:480;width:284px;max-width:calc(100% - 24px);max-height:calc(100% - 100px);overflow:auto;padding:14px 16px;border-radius:var(--radius-card-sm);background:var(--color-surface);box-shadow:var(--shadow-overlay)}
.hub-hero .mc-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.hub-hero .mc-h p{font-size:var(--text-body-sm);color:var(--color-muted);font-weight:600}
.hub-hero .mc-x{display:grid;place-items:center;width:32px;height:32px;margin:-6px -8px 0 0;flex:none;border:0;border-radius:50%;background:transparent;color:var(--color-muted)}
.hub-hero .mc-x:hover{background:var(--color-chip);color:var(--color-ink)}
.hub-hero .cz{padding:10px 0;border-top:1px solid var(--color-card-border)}
.hub-hero .cz:first-of-type{border-top:0;padding-top:2px}
.hub-hero .cz-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hub-hero .cz-h b{font-size:var(--text-lede);line-height:1.15;letter-spacing:-.02em;font-weight:700}
.hub-hero .cz-s{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:var(--text-body);font-weight:600}
.hub-hero .cz-l{display:flex;gap:16px;margin-top:8px;font-size:var(--text-body-sm);font-weight:600}
.hub-hero .cz-l a{display:inline-flex;align-items:center;min-height:28px;text-decoration:none}
.hub-hero .cz-l a:hover{text-decoration:underline}
.hub-hero .cz-note{margin-top:6px;font-size:var(--text-caption);color:var(--color-muted)}
.hub-hero .leaflet-container a{color:var(--color-brand-hover)}
.hub-hero .leaflet-bar{border:0!important;border-radius:var(--radius-row);overflow:hidden;box-shadow:var(--shadow-popover)}
.hub-hero .leaflet-bar a{width:44px;height:44px;line-height:44px;border-bottom-color:var(--color-card-border);color:var(--color-ink);background:var(--color-surface);font-size:20px}
.hub-hero .leaflet-bar a:hover{background:var(--color-chip)}
.hub-hero .leaflet-bar a:focus-visible{outline-offset:-4px}
.hub-hero .leaflet-container:focus-visible{outline:var(--focus-ring);outline-offset:-3px}
.hub-hero .leaflet-container.leaflet-touch-drag.leaflet-touch-zoom{touch-action:pan-y}
@media(min-width:640px){.hub-hero .tool-plate{margin-inline:0}}
@media(min-width:640px) and (max-width:899px){
 .hub-hero .panel-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 24px;align-items:start}
 .hub-hero .panel-body>.verdict{grid-column:2;grid-row:1 / span 3}
}
@media(min-width:900px){
 .hub-hero{display:block;position:relative;--pad:24px;--pw:448px;--gap:calc(var(--pad) + var(--pw) + 12px);height:clamp(780px,calc(100svh - 120px),880px);min-height:var(--hub-panel-height,780px);border-radius:var(--radius-card);overflow:hidden;background:var(--color-rail);box-shadow:var(--shadow-card)}
 .hub-hero .loc-map{position:absolute;inset:0;height:auto;border-radius:0;box-shadow:none}
 .hub-hero .panel{position:absolute;z-index:6;left:var(--pad);bottom:16px;width:var(--pw);box-shadow:var(--shadow-overlay)}
 .hub-hero .pano-head{padding:var(--spacing-panel) 8px 0 var(--spacing-panel)}
 .hub-hero .panel-body{padding:12px var(--spacing-panel) var(--spacing-panel)}
 .hub-hero .panel-toggle{display:inline-flex}
 .hub-hero .panel-key{--kx:var(--spacing-panel);padding-bottom:18px}
 .hub-hero.is-collapsed .panel-key{margin-top:0}
 .hub-hero.is-collapsed .panel-body{display:none}
 .hub-hero.is-collapsed .pano-head{padding-bottom:14px}
 .hub-hero .map-top{left:0;right:0;top:16px;flex-wrap:nowrap;justify-content:center}
 .hub-hero .seg button{padding:0 14px}
 .hub-hero .map-messages{top:120px;left:var(--gap);right:72px}
 .hub-hero .map-fallback{left:var(--gap)}
 .hub-hero .mcard{max-height:calc(100% - 132px)}
 .hub-hero .loc-map .leaflet-control-zoom{margin:0}
 .hub-hero .leaflet-bottom.leaflet-right{margin:0 24px 16px 0}
}
@media(min-width:1024px){.hub-hero{--pad:32px}}
@media(min-width:1200px){.hub-hero{--pw:468px}}
@media(max-width:899px){
 .hub-hero .leaflet-control-zoom{display:none}
 .hub-hero .nearby-panel{left:0;right:auto;max-height:calc(66svh - 164px)}
}
@media(prefers-reduced-motion:reduce){.hub-hero *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{
 .hub-hero{display:block;height:auto;min-height:0;overflow:visible}
 .hub-hero .panel{position:static;width:auto;box-shadow:none}
 .hub-hero .panel-body{display:flex!important}
 .hub-hero .loc-map{position:relative;height:220px}
 .hub-hero #zone-map-canvas{height:220px!important;max-height:none!important}
 .hub-hero :is(.panel-toggle,.map-top,.mcard,.map-messages,.leaflet-control-zoom,.reset){display:none!important}
 .hub-hero .map-sources>summary{display:none}
 .hub-hero .map-sources-panel{position:static;display:block!important;padding:0;box-shadow:none;font-size:var(--text-fine)}
 .hub-hero .map-sources-title,.hub-hero .map-sources-link,.hub-hero .map-sources-library{display:none}
}