/* UX-V3 (#151): self-hosted Inter (latin subset covers English and Spanish), SIL OFL 1.1 - see assets/fonts/Inter-OFL.txt */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url("../assets/fonts/inter-latin-wght-normal.woff2") format("woff2")}
:root{
  /* K5 tokens are rem so one root multiplier (reading size, issue #102) scales
     all seven roles. Baseline at the standard 16px root: 28/20/16/14/12/11/10px. */
  --t-display:1.75rem;
  --t-title:1.25rem;
  --t-figure:1rem;
  --t-body:.875rem;
  --geo-search-field-min:260px;
  --geo-search-field-max:480px;
  --t-label:.75rem;
  --t-meta:.6875rem;
  --t-micro:.625rem;
  --s-1:4px;
  --s-2:8px;
  --s-3:12px;
  --s-4:16px;
  --r-small:8px;
  --r-large:16px;
  --bg:#08101a; --panel:rgba(8,16,27,.92); --panel2:rgba(13,24,39,.90);
  --line:rgba(255,255,255,.10); --line2:rgba(255,255,255,.18);
  --text:#f3f7ff; --muted:#a9bbcf; --text-meta:#9fb1c5; --a:#f7fbff; --b:#43d7ff;
  /* T-a3 identity roles. Dark values preserve the shipped appearance. The
     appearance-scoped Light values below remain dormant until a later,
     separately approved theme activation. Map glyphs stay on their shipped
     values until their tile-dependent legibility gate is passed. */
  --ta3-badge-neutral-text:#16222f;
  --ta3-badge-neutral-background:#f2f4f7;
  --ta3-badge-neutral-border:#c7ced7;
  --ta3-badge-register-text:#bdd6ef;
  --ta3-badge-register-background:rgba(143,189,232,.12);
  --ta3-badge-register-border:rgba(143,189,232,.26);
  --ta3-badge-licence-text:#aebed0;
  --ta3-badge-licence-background:rgba(162,178,198,.085);
  --ta3-badge-licence-border:rgba(162,178,198,.2);
  --ta3-badge-planning-text:#d4dde7;
  --ta3-badge-planning-background:rgba(174,184,196,.1);
  --ta3-badge-planning-border:rgba(174,184,196,.3);
  --ta3-badge-observed-text:#ff9abb;
  --ta3-badge-observed-background:rgba(255,122,162,.08);
  --ta3-badge-observed-border:rgba(255,122,162,.25);
  --ta3-badge-statistics-text:#9fd4c2;
  --ta3-badge-statistics-background:rgba(126,196,178,.1);
  --ta3-badge-statistics-border:rgba(126,196,178,.22);
  --ta3-badge-model-text:#ffc36d;
  --ta3-badge-model-background:rgba(255,176,74,.12);
  --ta3-badge-model-border:rgba(255,176,74,.2);
  --ta3-badge-snapshot-text:#c2cedb;
  --ta3-badge-snapshot-background:rgba(151,166,183,.14);
  --ta3-badge-snapshot-border:rgba(151,166,183,.24);
  --ta3-lens-a-text:#eef5fc;
  --ta3-lens-a-area-text:#e9f1fb;
  --ta3-lens-a-control-text:#fff;
  --ta3-lens-a-control-background:rgba(255,255,255,.08);
  --ta3-lens-a-control-border:rgba(255,255,255,.38);
  --ta3-lens-b-text:#43d7ff;
  --ta3-lens-b-control-text:#74e3ff;
  --ta3-lens-b-control-background:rgba(67,215,255,.08);
  --ta3-lens-b-control-border:rgba(67,215,255,.45);
  --ta3-bridge-a-graphic:#9ccdff;
  --ta3-bridge-a-tag-background:#9ccdff;
  --ta3-bridge-a-tag-text:#07202f;
  --ta3-bridge-b-graphic:#43d7ff;
  --ta3-bridge-b-outline:#0a3a49;
  --ta3-bridge-b-tag-background:#43d7ff;
  --ta3-bridge-b-tag-text:#07202f;
  --ta3-map-center-a:#fff;
  --ta3-map-center-b:#43d7ff;
  --ta3-map-halo-a:#f7fbff;
  --ta3-map-halo-b:#43d7ff;
  /* T-a1 shared-chrome roles. These resolve to the existing dark values;
     evidence/category identities and map-owned colours remain separate. */
  --chrome-page-background:var(--bg);
  --chrome-header-surface:rgba(6,12,21,.90);
  --chrome-panel-surface:var(--panel);
  --chrome-card-surface:rgba(255,255,255,.02);
  --chrome-control-group-surface:rgba(255,255,255,.03);
  --chrome-form-surface:#0c1826;
  --chrome-text-primary:var(--text);
  --chrome-text-metadata:var(--text-meta);
  --chrome-text-brand-subtle:#94a7bc;
  --chrome-text-section:#788ba2;
  --chrome-text-control-label:#6f849b;
  --chrome-text-control-value:#d9e4ef;
  --chrome-text-control-caption:#adbdce;
  --chrome-text-control-strong:#fff;
  --chrome-text-card-title:#aab9ca;
  --chrome-border:var(--line);
  --chrome-mobile-control-border:rgba(142,164,187,.36);
  --chrome-mobile-control-surface:#0b1a29;
  --chrome-mobile-control-text:#e4f2ff;
  --chrome-mobile-control-open-border:#6fbaff;
  --chrome-mobile-control-open-surface:#12304a;
  --chrome-divider:rgba(255,255,255,.07);
  --chrome-drawer-surface:#08101a;
  --chrome-drawer-border:var(--line2);
  --chrome-drawer-divider:var(--chrome-border);
  --chrome-drawer-control-surface:rgba(255,255,255,.06);
  --chrome-drawer-record-surface:rgba(255,255,255,.025);
  --chrome-drawer-neutral-surface:rgba(255,255,255,.04);
  --chrome-drawer-share-surface:rgba(13,24,39,.55);
  --chrome-drawer-backdrop:rgba(2,6,12,.5);
  --chrome-drawer-provenance-divider:rgba(255,255,255,.08);
  --chrome-drawer-edition-border:rgba(183,197,212,.14);
  --chrome-focus-ring-color:#9bd5ff;
  --chrome-focus-separation-color:#08101a;
  --chrome-focus-ring-subtle-color:rgba(87,184,255,.75);
  --chrome-focus-inline-indicator-color:rgba(160,180,205,.7);
  /* T-a4 application-owned map chrome. Preserve shipped Dark base values
     except the attribution-text and disabled-zoom state corrections. */
  --map-fallback-surface:#09111c;
  --map-attribution-surface:rgba(5,8,12,.75);
  --map-attribution-text:#aab9ca;
  --map-attribution-link:#b9c7d7;
  --map-zoom-surface:#0b1521;
  --map-zoom-text:#fff;
  --map-zoom-edge:#25364a;
  --map-zoom-hover-surface:#0b1521;
  --map-zoom-disabled-text:#fff;
  --map-zoom-disabled-opacity:.56;
  --map-zoom-shadow:0 8px 24px rgba(0,0,0,.24);
  --map-tooltip-surface:#09131f;
  --map-tooltip-text:#fff;
  --map-tooltip-edge:#31465d;
  --map-tooltip-arrow:#31465d;
  --map-tooltip-shadow:0 10px 28px rgba(0,0,0,.4);
  --map-label-surface:rgba(9,18,30,.9);
  --map-label-text:#e8f0fa;
  --map-label-edge:rgba(178,203,228,.42);
  --map-label-shadow:0 6px 18px rgba(0,0,0,.45);
  --map-label-b-edge:rgba(67,215,255,.45);
  /* UX-V1 (#149) cluster chip. Surface/edge/text resolve per appearance; the
     outer halo is the opposite tone of the edge so the chip is findable on
     light, dark and satellite basemaps alike. Category colour stays the
     inset ring only; identity is carried by the glyph, not by hue. */
  --map-cluster-surface:rgba(12,22,36,.95);
  --map-cluster-edge:#ffffff;
  --map-cluster-halo:#04080e;
  --map-cluster-text:#fff;
  --map-label-b-text:var(--ta3-lens-b-text);
  /* Reserved for future planning geometry. The neutral family is deliberately
     separate from Lens A/B and carries no order, progress or judgement. */
  --planning-neutral:#aeb8c4;
  --licence-neutral:#c0794f;
  --planning-origin:#c4b8cf;
  --planning-unresolved:#bdb7aa;
  --museum:#9d72ff; --info:#c79cff; --stay:#3da8ff; --bike:#54e2b5; --rail:#ffd166;
  --activity:#ff7aa2; --park:#70dea4; --hospitality:#d08cff; --heat:#ffb04a; --green:#70dea4;
  --safe-top:env(safe-area-inset-top,0px);
  /* Viewport-y of the institutional header's bottom edge. js/app.js keeps it in
     sync with the rendered header; the value here is only the pre-JS fallback. */
  --header-bottom:calc(16px + 60px + var(--safe-top));
  /* The header height GUARANTEED by this breakpoint, independent of any
     measurement. --header-bottom is written inline by syncHeaderBottom() and
     therefore overrides every media-query value; after a viewport change it
     holds the PREVIOUS viewport's height until the ResizeObserver callback is
     delivered, which is at least one frame later. Map chrome positioned from
     it alone is drawn over the header for that frame. Taking the max of the
     measurement and this floor makes that impossible, while still letting a
     header that is TALLER than the breakpoint assumes push the chrome down. */
  --header-bottom-floor:calc(16px + 60px + var(--safe-top));
  --header-chrome-top:max(var(--header-bottom), var(--header-bottom-floor));
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
}
*{box-sizing:border-box}
html{font-size:calc(100% * var(--text-scale,1))}
:root[data-text-size="comfortable"]{--text-scale:1.12}
:root[data-text-size="large"]{--text-scale:1.25}
html,body,#map{height:100%;margin:0}
@supports (height:100dvh){html,body,#map{height:100dvh}}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--chrome-page-background);color:var(--chrome-text-primary);overflow:hidden;overscroll-behavior:none}
#map{position:absolute;inset:0;background:var(--map-fallback-surface)}
.leaflet-container{font:inherit;background:var(--map-fallback-surface)}
.leaflet-control-attribution{background:var(--map-attribution-surface)!important;color:var(--map-attribution-text)!important}
.leaflet-control-attribution a{color:var(--map-attribution-link)!important;text-decoration:underline;text-underline-offset:2px}
/* Explicit flex geometry prevents the global touch-link rule from turning
   Leaflet's vertical +/- stack into wide, uncentred inline links. */
.leaflet-control-zoom{display:flex;flex-direction:column;overflow:hidden;margin:0!important;box-shadow:var(--map-zoom-shadow)!important;border-radius:var(--r-small)}
.leaflet-control-zoom a{display:flex!important;align-items:center;justify-content:center;box-sizing:border-box;padding:0!important;text-indent:0!important;width:36px!important;height:36px!important;line-height:1!important;background:var(--map-zoom-surface)!important;color:var(--map-zoom-text)!important;border-color:var(--map-zoom-edge)!important}
.leaflet-control-zoom a:hover{background:var(--map-zoom-hover-surface)!important}
.leaflet-control-zoom a.leaflet-disabled{color:var(--map-zoom-disabled-text)!important;opacity:var(--map-zoom-disabled-opacity);cursor:default}
.leaflet-top.leaflet-left{top:calc(90px + var(--safe-top));left:calc(254px + var(--safe-left))}
.leaflet-bottom.leaflet-right{right:auto;left:calc(254px + var(--safe-left));bottom:calc(18px + var(--safe-bottom))}
.leaflet-control-attribution{max-width:min(46vw,520px);border-radius:7px;padding:2px 5px!important;line-height:1.25}
.leaflet-tooltip{background:var(--map-tooltip-surface);border:1px solid var(--map-tooltip-edge);color:var(--map-tooltip-text);border-radius:10px;box-shadow:var(--map-tooltip-shadow);font-size:var(--t-meta);padding:7px 9px}
.leaflet-tooltip-top:before{border-top-color:var(--map-tooltip-arrow)}

header{
  position:absolute;z-index:1100;left:calc(18px + var(--safe-left));right:calc(18px + var(--safe-right));top:calc(16px + var(--safe-top));min-height:60px;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-2);box-sizing:border-box;pointer-events:auto;
  border:1px solid var(--chrome-border);border-radius:var(--r-large);background:var(--chrome-header-surface);backdrop-filter:blur(20px);box-shadow:0 12px 35px rgba(0,0,0,.28)
}
.brand{
  display:flex;align-items:center;gap:var(--s-2);min-width:0;padding:var(--s-1) var(--s-2);border-radius:var(--r-small)
}
.brand-copy{min-width:0}
.logo{flex:0 0 30px;width:30px;height:30px;position:relative}
.logo:before,.logo:after{content:"";position:absolute;inset:3px 14px 3px 2px;border-radius:5px 1px 5px 5px;background:linear-gradient(150deg,#51e0b5,#37a2cc);transform:skewY(-28deg)}
.logo:after{inset:3px 2px 3px 14px;transform:skewY(28deg);opacity:.75}
.brand-title{font-size:var(--t-figure);font-weight:760;letter-spacing:-.02em;line-height:1.05}
.brand-sub{font-size:var(--t-micro);color:var(--chrome-text-brand-subtle);margin-top:var(--s-1);letter-spacing:.02em}

.left{
  position:absolute;z-index:1000;left:calc(18px + var(--safe-left));top:calc(90px + var(--safe-top));width:222px;padding:var(--s-3);border:1px solid var(--chrome-border);
  max-height:calc(100vh - 108px - var(--safe-top) - var(--safe-bottom));max-height:calc(100dvh - 108px - var(--safe-top) - var(--safe-bottom));overflow:auto;overscroll-behavior:contain;
  border-radius:var(--r-large);background:var(--chrome-panel-surface);backdrop-filter:blur(18px);box-shadow:0 14px 40px rgba(0,0,0,.28)
}
.left[hidden]{display:none!important}
.mobile-layers-button{display:none;position:absolute;z-index:1101;left:calc(10px + var(--safe-left));top:calc(var(--header-chrome-top) + 10px);min-height:44px;min-width:44px;box-sizing:border-box;align-items:center;justify-content:center;gap:var(--s-2);padding:0 var(--s-3);border:1px solid var(--chrome-mobile-control-border);border-radius:var(--r-small);background:var(--chrome-mobile-control-surface);color:var(--chrome-mobile-control-text);font-size:var(--t-label);font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.28);cursor:pointer}
.mobile-layers-button[aria-expanded="true"]{border-color:var(--chrome-mobile-control-open-border);background:var(--chrome-mobile-control-open-surface)}
.left h3,.panel h3{font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--chrome-text-section);margin:0 0 var(--s-2)}
.left h3~h3{margin-top:var(--s-3)}
.rail-group{margin:0;border:0}
.rail-group+.rail-group{margin-top:var(--s-3)}
.rail-group>summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s-2);min-height:22px;margin:0 0 var(--s-2);padding:0 var(--s-4);color:var(--chrome-text-section);cursor:default;list-style:none}
.rail-group>summary::-webkit-details-marker{display:none}
.rail-group>summary:before{display:none}
.rail-group-copy{grid-column:1;grid-row:1;min-width:0;font-size:var(--t-micro);font-weight:650;letter-spacing:.12em;line-height:1.25;text-transform:uppercase}
.rail-group-badge{display:none;grid-column:2;grid-row:1;max-width:82px;padding:var(--s-1) var(--s-2);border:1px solid rgba(142,164,187,.2);border-radius:var(--r-small);background:rgba(142,164,187,.07);color:#a9bbcf;font-size:var(--t-micro);font-weight:650;letter-spacing:0;line-height:1.15;text-align:center;text-transform:none;font-variant-numeric:tabular-nums}
.rail-group-content{min-width:0}
.rail-group-note{margin:0 0 var(--s-1);color:#8fa5bb;font-size:var(--t-micro);line-height:1.35}
.map-display{margin:0 0 var(--s-2);padding-bottom:var(--s-2);border-bottom:1px solid var(--chrome-divider)}
.basemap-control,.map-control,.language-control{margin:0 0 var(--s-2)}
.map-display>*:last-child{margin-bottom:0}
.basemap-control label,.map-control label,.language-control label{display:block;margin-bottom:var(--s-1);font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;color:var(--chrome-text-control-label)}
.basemap-control select,.map-control select,.language-control select{width:100%;padding:var(--s-2);font-size:var(--t-micro);background:var(--chrome-form-surface);color:var(--chrome-text-control-value);border:1px solid var(--chrome-border);border-radius:var(--r-small)}
.map-control select:disabled{opacity:.55;cursor:not-allowed}
.stay-filter{margin:0 0 var(--s-1);padding:var(--s-1) 0 var(--s-2) var(--s-4);border-bottom:1px solid rgba(255,255,255,.05)}
.stay-filter label{display:block;margin-bottom:var(--s-1);font-size:var(--t-micro);letter-spacing:.07em;text-transform:uppercase;color:var(--chrome-text-control-label)}
.stay-filter select{width:100%;min-width:0;padding:var(--s-2);font-size:var(--t-micro);background:var(--chrome-form-surface);color:var(--chrome-text-control-value);border:1px solid var(--chrome-border);border-radius:var(--r-small)}
.stay-filter select:disabled{opacity:.55;cursor:not-allowed}
/* The label owns the flexible column; the toggle retains a separate fixed
   tap target even when English/Spanish copy wraps or text is enlarged. */
.layer{display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:center;column-gap:var(--s-2);min-height:44px;padding:var(--s-1) 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:var(--t-label);line-height:1.35}
.layer:last-of-type{border-bottom:0}
.layer-left{display:flex;align-items:center;gap:var(--s-2);min-width:0;overflow-wrap:anywhere}
.layer-left>span{min-width:0}
.dot{width:8px;height:8px;flex:0 0 8px;border-radius:50%;box-shadow:0 0 10px currentColor}
.dot-museum,.bar-museum{color:var(--museum);background:var(--museum)}
.dot-stay,.bar-stay{color:var(--stay);background:var(--stay)}
.dot-bike,.bar-bike{color:var(--bike);background:var(--bike)}
.dot-rail{color:var(--rail);background:var(--rail)}
.dot-info,.bar-info{color:var(--info);background:var(--info)}
.dot-pedestrian{color:var(--activity);background:var(--activity)}
.dot-park{color:var(--park);background:var(--park)}
.dot-heat{color:var(--heat);background:var(--heat)}
.dot-licence{color:var(--licence-neutral);background:var(--licence-neutral)}
.dot-inline{display:inline-block;margin-right:var(--s-1)}
/* #152: rail dots for the five operational layers are clipped to the same silhouette the map marker draws (clip-path set from js/marker-shapes.js). The glow is dropped because clip-path would crop it. */
.layer-left>.dot-shaped{width:10px;height:10px;flex:0 0 10px;border-radius:0;box-shadow:none}
@media(forced-colors:active){.layer-left>.dot-shaped{background-color:CanvasText}}
.switch{position:relative;width:27px;height:15px;flex:0 0 auto}.switch input{position:absolute;width:1px;height:1px;opacity:0}.switch span{position:absolute;inset:0;background:#253344;border-radius:10px;cursor:pointer;transition:.2s}
.switch span:after{content:"";position:absolute;width:11px;height:11px;left:2px;top:2px;border-radius:50%;background:#8da0b7;transition:.2s}
.switch input:checked+span{background:#1f5472}.switch input:checked+span:after{left:14px;background:#eaf8ff}
.switch input:focus-visible+span{outline:2px solid var(--chrome-focus-ring-color);outline-offset:3px}
/* Operational provenance, collapsed by default: one status per group,
   not a long list of repeated deployment labels below the final layer. */
.layer-source-note{margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px solid var(--chrome-divider);font-size:var(--t-micro);line-height:1.45}
.layer-source-disclosure{min-width:0;border:1px solid var(--chrome-border);border-radius:var(--r-small);background:var(--chrome-form-surface)}
.layer-source-disclosure>summary{position:relative;display:flex;flex-direction:column;justify-content:center;gap:var(--s-1);min-width:0;min-height:44px;padding:var(--s-2) var(--s-4) var(--s-2) var(--s-2);cursor:pointer;list-style:none}
.layer-source-disclosure>summary::-webkit-details-marker{display:none}
.layer-source-disclosure>summary:after{content:"▸";position:absolute;top:50%;right:var(--s-2);transform:translateY(-50%);color:var(--chrome-text-control-label)}
.layer-source-disclosure[open]>summary:after{content:"▾"}
.layer-source-disclosure>summary:focus-visible{outline:2px solid var(--chrome-focus-ring-color);outline-offset:2px;border-radius:var(--r-small)}
.layer-source-heading{color:var(--chrome-text-control-value);font-weight:700;font-size:var(--t-label)}
.layer-source-preview{color:var(--chrome-text-control-label);font-size:var(--t-micro);line-height:1.35;overflow-wrap:anywhere}
.layer-source-body{display:grid;gap:var(--s-2);padding:var(--s-2);border-top:1px solid var(--chrome-divider);color:var(--chrome-text-control-value)}
.layer-source-group,.layer-source-context{min-width:0;padding:0 0 var(--s-2);border-bottom:1px solid var(--chrome-divider)}
.layer-source-status{display:inline-block;max-width:100%;padding:var(--s-1);border:1px solid var(--chrome-border);border-radius:var(--r-small);background:var(--chrome-panel-surface);color:var(--chrome-text-control-value);font-size:var(--t-micro);font-weight:650;line-height:1.35;overflow-wrap:anywhere}
.layer-source-names{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-2);margin:var(--s-1) 0 0;padding:0;list-style:none}
.layer-source-names li{min-width:0;overflow-wrap:anywhere}
.layer-source-names li:not(:last-child):after{content:" ·";color:var(--chrome-text-control-label)}
.layer-source-context-label{display:block;margin-bottom:var(--s-1);color:var(--chrome-text-control-value);font-weight:650}
.layer-source-group p,.layer-source-context p,.layer-source-render-note{margin:var(--s-1) 0 0;color:var(--chrome-text-control-label);line-height:1.45;overflow-wrap:anywhere}
.layer-source-render-note{margin:0}
.activity-divider,.context-divider,.research-divider{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);margin:var(--s-3) 0 var(--s-1);padding-top:var(--s-2);border-top:1px solid rgba(255,255,255,.09)}
.activity-divider span,.context-divider span,.research-divider span{font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;color:#9aaec4}
.activity-divider small,.context-divider small,.research-divider small{font-size:var(--t-micro);padding:var(--s-1) var(--s-2);border-radius:999px}
.activity-divider small{border:1px solid rgba(255,122,162,.2);background:rgba(255,122,162,.06);color:#ff9abb}
.context-divider small{border:1px solid rgba(112,222,164,.2);background:rgba(112,222,164,.06);color:#91e8b8}
.administrative-divider{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);margin:var(--s-3) 0 var(--s-1);padding-top:var(--s-2);border-top:1px solid rgba(255,255,255,.09)}
.administrative-divider span{font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;color:#9aaec4}
.administrative-divider small{font-size:var(--t-micro);padding:var(--s-1) var(--s-2);border-radius:999px;border:1px solid rgba(192,121,79,.3);background:rgba(192,121,79,.08);color:#d99a6e}
.research-divider small{border:1px solid rgba(255,176,74,.2);background:rgba(255,176,74,.06);color:#ffc570}
.activity-layer,.context-layer,.research-layer{border-bottom:0}
.hospitality-layer{align-items:flex-start}
.hospitality-layer .layer-left{min-width:0;line-height:1.35}
.hospitality-dot{color:var(--hospitality);background:var(--hospitality);margin-top:var(--s-1);flex:0 0 auto}
.hospitality-controls{margin:0 0 var(--s-2);padding:0 0 var(--s-2);border-bottom:1px solid rgba(255,255,255,.06)}
.hospitality-controls[hidden]{display:none}
.hospitality-controls label{display:block;margin-bottom:var(--s-1);font-size:var(--t-micro);letter-spacing:.07em;text-transform:uppercase;color:#6f849b}
.hospitality-select-wrap{position:relative;min-height:32px;border:1px solid var(--line);border-radius:var(--r-small);background:#0c1826}
.hospitality-select-wrap:focus-within{outline:2px solid var(--chrome-focus-ring-color);outline-offset:2px}
.hospitality-select-value{display:block;padding:var(--s-2) calc(4 * var(--s-2)) var(--s-2) var(--s-2);font-size:var(--t-micro);line-height:1.35;color:#d9e4ef;overflow-wrap:anywhere}
.hospitality-controls select{position:absolute;inset:0;width:100%;height:100%;padding:0;font-size:var(--t-figure);background:transparent;color:transparent;border:0;border-radius:var(--r-small);cursor:pointer}
.hospitality-controls select option{background:#0c1826;color:#d9e4ef}
.hospitality-controls select:focus-visible{outline:0}
.language-control select:focus-visible{outline:2px solid var(--chrome-focus-ring-color);outline-offset:2px}
.hospitality-scale[hidden]{display:none}
.hospitality-scale{margin-top:var(--s-2);font-size:var(--t-micro);color:#8296ac;font-variant-numeric:tabular-nums}
.hospitality-legend-title{margin-bottom:var(--s-1)}
.hospitality-legend-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-1)}
.hospitality-legend-list li{display:flex;align-items:center;gap:var(--s-2)}
.hospitality-legend-swatch{width:14px;height:10px;border:1px solid rgba(255,255,255,.35);flex:none}
.hospitality-legend-note{margin:var(--s-2) 0 0;line-height:1.35}
.hospitality-selector-hint{margin:var(--s-4) 0 0;font-size:var(--t-micro);line-height:1.45;color:#71869d}
.heat-scale{margin:var(--s-3) 0 var(--s-1);height:5px;border-radius:6px;background:linear-gradient(90deg,#63d3b1,#ffc765,#ff875d,#ef4c58)}
.scale-labels{display:flex;justify-content:space-between;font-size:var(--t-micro);color:#76889e}
.evidence-note{margin-top:var(--s-3);padding:var(--s-2);border:1px solid rgba(255,176,74,.18);border-radius:var(--r-small);background:rgba(255,176,74,.05);font-size:var(--t-micro);line-height:1.4;color:#aebccd}
.evidence-note b{color:#ffc570}

.panel{
  position:absolute;z-index:1050;right:calc(18px + var(--safe-right));top:calc(90px + var(--safe-top));
  width:var(--analysis-panel-width,min(480px,calc(100vw - 300px - var(--safe-left) - var(--safe-right))));
  min-width:390px;max-width:min(680px,calc(100vw - 276px - var(--safe-left) - var(--safe-right)));
  height:var(--analysis-panel-height,calc(100vh - 108px - var(--safe-top) - var(--safe-bottom)));
  height:var(--analysis-panel-height,calc(100dvh - 108px - var(--safe-top) - var(--safe-bottom)));
  min-height:360px;max-height:calc(100vh - 108px - var(--safe-top) - var(--safe-bottom));max-height:calc(100dvh - 108px - var(--safe-top) - var(--safe-bottom));
  /* Mode switching moves the area section and restores an app-owned scrollTop. */
  overflow:auto;overflow-anchor:none;overscroll-behavior:contain;padding:var(--s-4);border:1px solid var(--chrome-border);border-radius:var(--r-large);background:var(--chrome-panel-surface);
  backdrop-filter:blur(22px);box-shadow:0 18px 55px rgba(0,0,0,.38)
}
/* Fixed to the visible panel corner by JS. The 28px visual is quieter than
   the 44px touch/keyboard target, and never scrolls over evidence text. */
.panel-resize-handle{
  position:fixed;z-index:1052;left:-100px;top:-100px;visibility:hidden;
  display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;
  border-radius:var(--r-large);background:transparent;cursor:nesw-resize;touch-action:none
}
.panel-resize-handle.is-positioned{visibility:visible}
.panel-resize-handle::before{
  content:"";position:absolute;inset:8px;border:1px solid var(--chrome-border);
  border-radius:var(--r-small);background:var(--chrome-form-surface);
  box-shadow:0 3px 12px rgba(0,0,0,.18)
}
.panel-resize-handle svg{
  position:relative;z-index:1;width:16px;height:16px;fill:none;
  stroke:var(--chrome-text-metadata);stroke-width:1.9;stroke-linecap:round
}
.panel-resize-handle:hover::before,.panel-resize-handle:active::before,
.panel-resize-handle:focus-visible::before{border-color:var(--chrome-focus-ring-subtle-color)}
.panel-resize-handle:focus-visible{outline:2px solid var(--chrome-focus-ring-color);outline-offset:1px}
.panel.panel-resizing{user-select:none}
.panel::-webkit-scrollbar{width:6px}.panel::-webkit-scrollbar-thumb{background:#2c4055;border-radius:9px}
/* Kept as the shared live-source pill style; the deployment totals no longer
   render this status anywhere in the analysis panel. */
.live{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--t-micro);padding:var(--s-2);border:1px solid rgba(84,226,181,.16);background:rgba(84,226,181,.07);color:#71e9bf;border-radius:999px}
.live i{width:6px;height:6px;border-radius:50%;background:#71e9bf;box-shadow:0 0 8px #71e9bf}
.live.mixed{border-color:rgba(255,176,74,.22);background:rgba(255,176,74,.07);color:#ffc570}
.live.mixed i{background:#ffc570;box-shadow:0 0 8px #ffc570}
.title{font-size:var(--t-display);letter-spacing:-.04em;font-weight:780;margin:0;line-height:1.04}

/* Section rhythm. The panel answers three different questions about three
   different geometries; these labels are what keep them apart for the reader. */
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-2);margin:var(--s-4) 0 var(--s-2)}
.section-head span{font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:#8ba0b7;font-weight:620}
.section-head small{min-width:0;font-size:var(--t-micro);letter-spacing:.03em;color:#7a8ea5;overflow-wrap:anywhere;text-align:right}

/* Keep these three territorial surfaces distinct while keeping their evidence
   icon visually quiet. Coarse pointers retain a real 44px button target; only
   the small information mark is drawn inside it. */
.place-circle-summary-head>.evidence-link,
.area .section-head>.evidence-link,
.planning .section-head>.evidence-link{position:relative;flex:0 0 22px;width:22px;height:22px;min-width:22px;min-height:22px}
.area .section-head,.planning .section-head{align-items:center}
@media(pointer:coarse){
  .place-circle-summary-head,.area .section-head,.planning .section-head{min-height:44px}
  .place-circle-summary-head>.evidence-link,
  .area .section-head>.evidence-link,
  .planning .section-head>.evidence-link{flex-basis:44px;width:44px;height:44px;min-width:44px;min-height:44px;border-color:transparent;background:transparent}
  .place-circle-summary-head>.evidence-link>span,
  .area .section-head>.evidence-link>span,
  .planning .section-head>.evidence-link>span{display:inline-grid;width:22px;height:22px;place-items:center;border:1px solid var(--line2);border-radius:var(--r-large);background:var(--chrome-card-surface)}
}

/* Administrative area of the lens centre. A reference surface, deliberately
   distinct from the measurement cards below it. */
.area .section-head{margin-top:var(--s-1)}
.area-identity{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-2);margin:var(--s-1) 0}
.area-context{font-size:var(--t-meta);color:#a9bbcf;min-width:0;overflow-wrap:anywhere}
.area-codes{font-size:var(--t-micro);letter-spacing:.05em;color:#8195ab;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;text-align:right}
.area-figure{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s-3);align-items:center;padding:var(--s-2);border:1px solid var(--line);border-radius:var(--r-small);background:rgba(255,255,255,.028)}
.area-value{font-size:var(--t-display);font-weight:780;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.area-value-label{font-size:var(--t-micro);letter-spacing:.09em;text-transform:uppercase;color:#8ba0b7;margin-top:var(--s-1)}
.area-period{font-size:var(--t-micro);color:#8195ab;margin-top:var(--s-1);font-variant-numeric:tabular-nums}
.area-scope{border-left:1px solid var(--line);padding-left:var(--s-3);min-width:0}
.area-scope p{margin:var(--s-1) 0 0;font-size:var(--t-micro);line-height:1.4;color:#95a9be;overflow-wrap:anywhere}
/* Where no residential figure can exist at all — outside Madrid, or with the
   geography unavailable — the figure slot is removed rather than filled with a
   meaningless dash beside a "registered residents" label. */
.area:not([data-residents="available"]):not([data-residents="unavailable"]) .area-figure{grid-template-columns:1fr}
.area:not([data-residents="available"]):not([data-residents="unavailable"]) .area-figure-value{display:none}
.area:not([data-residents="available"]):not([data-residents="unavailable"]) .area-scope{border-left:0;padding-left:0}
.area:not([data-residents="available"]):not([data-residents="unavailable"]) .area-scope p{margin:0}
.area-identity[hidden]{display:none}
.area-identity[hidden]+.area-figure{margin-top:var(--s-2)}
.badge.register{background:var(--ta3-badge-register-background);color:var(--ta3-badge-register-text);border:1px solid var(--ta3-badge-register-border);margin-left:0;max-width:100%;overflow-wrap:anywhere}
.area:not([data-residents="available"]) .badge.register{display:none}
/* Licensed VUT context: the second administrative figure for the same whole
   barrio. Deliberately quieter than the resident figure above it - a lighter
   surface, a smaller number - because the place identity leads and this is
   context attached to it. It is also deliberately unlike the lens metric cards
   below, which measure the circle.

   The palette is NEUTRAL AT EVERY VALUE. There is no scale, no class break, no
   amber and no red, because a barrio with more licensed VUT units is not a
   worse barrio and this product does not imply that it is. Nothing here is
   conveyed by colour: every figure is named in text beside it. */
.area-vut{margin-top:var(--s-1);padding:var(--s-1) var(--s-2);border:1px solid rgba(255,255,255,.075);border-radius:var(--r-small);background:rgba(255,255,255,.012)}
.area-vut[hidden]{display:none}
.area-vut-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}
.area-vut-title{font-size:var(--t-micro);letter-spacing:.09em;text-transform:uppercase;color:#8ba0b7;font-weight:620}
.area-vut-figure{display:flex;align-items:baseline;gap:var(--s-2);margin-top:var(--s-1);flex-wrap:wrap}
.area-vut-value{font-size:var(--t-title);font-weight:740;letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums}
.area-vut-unit{font-size:var(--t-micro);color:#95a9be}
.area-vut-secondary{margin-top:var(--s-1);font-size:var(--t-micro);line-height:1.5;color:#a4b7cb;font-variant-numeric:tabular-nums}
.area-vut-secondary:empty{display:none}
.area-vut-state{margin-top:var(--s-1);font-size:var(--t-micro);line-height:1.45;color:#8195ab}
.area-vut-state:empty{display:none}
/* An abstaining figure keeps no unit label: "Unavailable licensed VUT units"
   would read as a quantity of something. */
.area-vut:not([data-state="available"]) .area-vut-unit{display:none}
.area-vut:not([data-state="available"]) .badge.licence{display:none}
.badge.licence{flex:0 0 auto;margin-left:0;font-size:var(--t-micro);padding:var(--s-1) var(--s-2);background:var(--ta3-badge-licence-background);color:var(--ta3-badge-licence-text);border:1px solid var(--ta3-badge-licence-border)}
/* The other lens's area: one line, never a second profile card. Two centres in
   one barrio point at one statistic, and the copy says so instead of repeating
   the figure. */
.area-other{display:flex;align-items:baseline;gap:var(--s-2);margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px solid var(--line);font-size:var(--t-micro);line-height:1.45;color:#93a6bb}
.area-other:empty{display:none}
.area-other-lens{flex:0 0 auto;font-size:var(--t-micro);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8ba0b7}
.area-other-lens-a{color:var(--ta3-lens-a-area-text)}
.area-other-lens-b{color:var(--ta3-lens-b-text)}
.area-other-body{min-width:0;font-variant-numeric:tabular-nums}
.area-other-body b{color:#dbe6f3;font-weight:650}
.area-source-toggle{margin-top:var(--s-2);padding:0;border:0;background:transparent;color:#7d92a9;font-size:var(--t-micro);letter-spacing:.05em;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(125,146,169,.45)}
.area-source-toggle:hover{color:#b3c5d8}
.area-source-toggle:focus-visible{outline:1px solid var(--chrome-focus-ring-subtle-color);outline-offset:3px;border-radius:var(--r-small)}
.area-source-toggle[aria-expanded=true]:after{content:" ▴"}
.area-source-toggle[aria-expanded=false]:after{content:" ▾"}
.area-source-details{margin-top:var(--s-2);padding:var(--s-2);border:1px solid var(--line);border-radius:var(--r-small);background:rgba(255,255,255,.02);display:flex;flex-direction:column;gap:var(--s-1);font-size:var(--t-micro);line-height:1.55;color:#8fa3b8}
.area-source-details[hidden]{display:none}
/* Two NAMED groups, not one list: the numerator and the denominator are
   different sources with different universes and different temporal semantics,
   and the headings are what stop a reader carrying the Padron's reference date
   across to a source that declares none. */
.area-source-group{display:flex;flex-direction:column;gap:var(--s-1)}
.area-source-group+.area-source-group{margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px solid var(--line)}
.area-source-group-title{margin:0;font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;color:#7d92a9;font-weight:700}
/* Available to assistive technology, absent from the visual layout: it names
   the quantity a compact figure leaves implicit. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;z-index:3000;top:calc(8px + var(--safe-top));left:calc(8px + var(--safe-left));width:auto;height:auto;margin:0;padding:var(--s-3) var(--s-4);overflow:visible;clip:auto;white-space:normal;border:2px solid var(--chrome-focus-ring-color);border-radius:var(--r-small);background:#08101a;color:#fff;font-size:var(--t-body);font-weight:700}

/* ===== PLANNING ÁMBITO EVIDENCE (K6, #68) ===================================
   A second lead-level evidence object in PLACE, deliberately distinct from the
   administrative-area surface above it: the ámbito, the barrio and the Lens
   circle are three different analytical objects.

   The four published phase fields receive NEUTRAL CATEGORICAL distinctions only
   (K5). They never form a light-to-dark, red/amber/green, cold-to-warm or
   progressively-heavier sequence, carry no ordinal number, no arrow and no
   completion bar, and no single element summarises the four. The three
   reserved planning hues are paired with a distinct border STYLE and a text
   label, so colour alone never carries a distinction. */
.planning{margin:var(--s-2) 0 0;padding-top:var(--s-1);border-top:1px solid var(--line)}
.planning[hidden]{display:none}
.planning .section-head{margin-top:0}
.planning-identity[hidden]{display:none}
.planning-denomination{margin:0;font-size:var(--t-title);font-weight:760;letter-spacing:-.03em;line-height:1.12;color:#f3f7ff;overflow-wrap:anywhere}
.planning-identity-row{display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap;margin-top:var(--s-1)}
/* The kind label is what stops a reader taking this for the barrio. */
.planning-kind{flex:0 0 auto;padding:var(--s-1) var(--s-2);border:1px solid rgba(174,184,196,.3);border-radius:var(--r-small);background:rgba(174,184,196,.1);color:#d4dde7;font-size:var(--t-micro);letter-spacing:.09em;text-transform:uppercase;font-weight:650}
.planning-code-wrap{min-width:0;display:flex;align-items:baseline;gap:var(--s-1);flex-wrap:wrap}
.planning-code-label{font-size:var(--t-micro);letter-spacing:.09em;text-transform:uppercase;color:#8ba0b7}
/* The EXACT official code, including any -RP suffix. Never abbreviated. */
.planning-code{font-size:var(--t-meta);font-weight:700;letter-spacing:.05em;color:#e3ecf6;font-variant-numeric:tabular-nums;word-break:break-word}
.planning-distinction{margin:var(--s-1) 0 0;font-size:var(--t-label);line-height:1.4;color:#9fb1c5}
/* The edition reference date sits with the evidence, not only in the drawer. */
.planning-edition{margin:var(--s-1) 0 0;padding-left:var(--s-2);border-left:2px solid var(--planning-neutral);font-size:var(--t-meta);line-height:1.4;color:#bccddf;font-variant-numeric:tabular-nums}
.planning-edition:empty{display:none}
.planning-outside{margin:var(--s-1) 0 0;padding:var(--s-2);border:1px dashed var(--line2);border-radius:var(--r-small);font-size:var(--t-label);line-height:1.45;color:#a9bbcf;overflow-wrap:anywhere}
.planning-outside[hidden]{display:none}
.planning-explorer{margin-top:var(--s-3);padding:var(--s-3);border:1px solid var(--chrome-border);border-left:3px solid var(--planning-neutral);border-radius:var(--r-small);background:var(--chrome-card-surface)}
.planning-explorer-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}
.planning-explorer-head>span{font-size:var(--t-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--chrome-text-primary)}
.planning-explorer-close{min-height:44px;padding:var(--s-1) var(--s-2);border:1px solid var(--chrome-drawer-border);border-radius:var(--r-small);background:transparent;color:var(--chrome-text-control-caption);font:inherit;font-size:var(--t-meta);cursor:pointer}
.planning-explorer-label{display:block;margin-top:var(--s-2);font-size:var(--t-micro);letter-spacing:.05em;color:var(--chrome-text-metadata)}
.planning-explorer-query{box-sizing:border-box;width:100%;min-height:44px;margin-top:var(--s-1);padding:var(--s-2);border:1px solid var(--chrome-drawer-border);border-radius:var(--r-small);background:var(--chrome-form-surface);color:var(--chrome-text-control-value);font:inherit;font-size:var(--t-body)}
.planning-explorer-query:focus-visible,.planning-explorer-close:focus-visible,.planning-explorer-result:focus-visible,.planning-explorer-map:focus-visible,.planning-explorer-evidence-toggle:focus-visible,.planning-explorer-evidence>summary:focus-visible{outline:2px solid var(--planning-neutral);outline-offset:2px}
.planning-explorer-query:disabled{opacity:.65;cursor:not-allowed}
.planning-explorer-status{margin:var(--s-2) 0 0;font-size:var(--t-meta);line-height:1.45;color:var(--muted)}
.planning-explorer-results{list-style:none;margin:var(--s-2) 0 0;padding:0;display:grid;gap:var(--s-1)}
.planning-explorer-results:empty{display:none}
.planning-explorer-result{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-2);width:100%;min-height:38px;padding:var(--s-2);border:1px solid var(--chrome-border);border-radius:var(--r-small);background:var(--chrome-control-group-surface);color:var(--chrome-text-primary);text-align:left;font:inherit;cursor:pointer}
.planning-explorer-result:hover{border-color:var(--planning-neutral);background:var(--chrome-drawer-neutral-surface)}
.planning-explorer-result code{flex:none;color:var(--chrome-text-primary);font:inherit;font-size:var(--t-meta);font-weight:700;letter-spacing:.04em}
.planning-explorer-result span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:var(--t-meta)}
.planning-explorer-card{margin-top:var(--s-2);padding:var(--s-2) var(--s-3);border:1px solid var(--chrome-drawer-border);border-radius:var(--r-small);background:var(--chrome-drawer-share-surface)}
.planning-explorer-card[hidden]{display:none}
.planning-explorer-card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}
.planning-explorer-denomination{margin:var(--s-2) 0 0;color:var(--chrome-text-primary);font-size:var(--t-label);line-height:1.3}
.planning-explorer-scope,.planning-explorer-edition{margin:var(--s-1) 0 0;color:var(--muted);font-size:var(--t-meta);line-height:1.45}
.planning-explorer-evidence{margin-top:var(--s-2);border-top:1px solid var(--chrome-drawer-border)}
.planning-explorer-evidence>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:var(--chrome-text-primary);font-size:var(--t-meta);font-weight:700}
.planning-explorer-section{margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px solid var(--chrome-drawer-border)}
.planning-explorer-section[hidden]{display:none}
.planning-explorer-section h4{margin:0;color:var(--chrome-text-primary);font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase}
.planning-explorer-evidence-toggle{min-height:44px;margin-top:var(--s-2);padding:var(--s-2) var(--s-3);border:1px solid var(--chrome-drawer-border);border-radius:var(--r-small);background:transparent;color:var(--chrome-text-primary);font:inherit;font-size:var(--t-meta);font-weight:700;cursor:pointer}
.planning-explorer-evidence-toggle:hover{background:var(--chrome-drawer-control-surface)}
.planning-explorer-map{min-height:40px;margin-top:var(--s-2);padding:var(--s-2) var(--s-3);border:1px solid var(--planning-neutral);border-radius:var(--r-small);background:var(--chrome-drawer-neutral-surface);color:var(--chrome-text-primary);font:inherit;font-size:var(--t-meta);font-weight:700;cursor:pointer}
.planning-explorer-map:hover{background:var(--chrome-drawer-control-surface)}
.planning-block{margin-top:var(--s-3);padding:var(--s-3);border:1px solid var(--line);border-radius:var(--r-small);background:rgba(255,255,255,.022)}
.planning-block[hidden]{display:none}
.planning-block-head{font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:#8ba0b7;font-weight:620}
.planning-block-note{margin:var(--s-2) 0 0;font-size:var(--t-body);line-height:1.5;color:#95a9be}
.planning-absent{margin:var(--s-2) 0 0;padding:var(--s-2) var(--s-3);border-left:2px dashed var(--planning-unresolved);font-size:var(--t-meta);line-height:1.5;color:#a9bbcf}
.planning-absent[hidden]{display:none}

/* Four independent rows. No numbering, no arrows, no bar, no shared summary. */
.planning-phases{list-style:none;margin:var(--s-2) 0 0;padding:0;display:grid;gap:var(--s-2)}
.planning-phases>li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-1) var(--s-2);align-items:baseline;padding-left:var(--s-2);border-left:3px solid var(--planning-neutral)}
.planning-phase-field{min-width:0;font-size:var(--t-label);line-height:1.4;color:#9fb1c5}
.planning-phase-value{font-size:var(--t-body);font-weight:700;line-height:1.4;color:#eaf1fa;text-align:right}
.planning-phase-mark{margin-right:var(--s-1);color:#cfdae6}
.planning-phase-note{grid-column:1/-1;margin:0;font-size:var(--t-meta);line-height:1.45;color:#9cb0c4}
/* Structure, not only hue: a dashed rule and a marked label for the value whose
   meaning the publisher never defined, a dotted rule for a plan-of-origin
   marker. Neither is an ordering cue and neither sits in a sequence. */
.planning-phases>li[data-kind="UNRESOLVED_MEANING"]{border-left-style:dashed;border-left-color:var(--planning-unresolved)}
.planning-phases>li[data-kind="PLAN_ORIGIN_MARKER"]{border-left-style:dotted;border-left-color:var(--planning-origin)}

/* Characteristic use, published surface and the edition's own district. Named
   fields, not a concatenated place string. */
.planning-attributes{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-1) var(--s-3);margin:var(--s-3) 0 0}
.planning-attributes[hidden]{display:none}
.planning-attributes dt{font-size:var(--t-label);letter-spacing:.06em;color:#9fb1c5}
.planning-attributes dd{margin:0;font-size:var(--t-body);line-height:1.4;color:#e3ecf6;font-variant-numeric:tabular-nums}

/* Available buildability. Every figure carries its unit and its whole-ámbito
   scope, so it can never be read as a Lens-circle or barrio quantity. */
.planning-scope-note{display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap;margin:var(--s-2) 0 0;font-size:var(--t-meta);line-height:1.5;color:#a9bbcf}
.badge.planning-scope-badge{flex:0 0 auto;margin-left:0;background:var(--ta3-badge-planning-background);color:var(--ta3-badge-planning-text);border:1px solid var(--ta3-badge-planning-border)}
.planning-build-row{margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px solid var(--line)}
.planning-build-row:first-child{margin-top:var(--s-2);padding-top:0;border-top:0}
.planning-situacion{margin:0 0 var(--s-1);font-size:var(--t-meta);line-height:1.45;color:#9cb0c4}
.planning-uses{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-1)}
.planning-uses>li{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-2);flex-wrap:wrap}
.planning-use-label{min-width:0;font-size:var(--t-label);color:#9fb1c5}
.planning-use-figure{display:flex;align-items:baseline;gap:var(--s-1);flex-wrap:wrap;text-align:right}
.planning-use-value{font-size:var(--t-figure);font-weight:740;letter-spacing:-.02em;color:#eaf1fa;font-variant-numeric:tabular-nums}
.planning-use-unit{font-size:var(--t-meta);color:#a4b7cb}
/* A blank published cell and a published 0 are different facts, and read
   differently: the absent value says so in words and never shows a number. */
.planning-uses>li[data-value-state="NOT_PUBLISHED"] .planning-use-value,
.planning-uses>li[data-value-state="NOT_PUBLISHED_NON_NUMERIC"] .planning-use-value{font-size:var(--t-meta);font-weight:600;color:#a9bbcf;letter-spacing:0}

.planning-citizen{margin-top:var(--s-3);border:1px solid var(--line);border-radius:var(--r-small);background:rgba(255,255,255,.02)}
.planning-citizen>summary{padding:var(--s-2) var(--s-3);font-size:var(--t-label);letter-spacing:.06em;color:#cfe0f0;cursor:pointer}
.planning-citizen>p{margin:0;padding:0 var(--s-3) var(--s-2);font-size:var(--t-body);line-height:1.55;color:#a9bbcf}
.planning-citizen>p:first-of-type{padding-top:var(--s-1)}
.planning-cannot{border-top:1px solid var(--line)}
.planning-citizen>p.planning-cannot{padding-top:var(--s-2);color:#b7c8da}
.planning-ceiling{margin:var(--s-3) 0 0;font-size:var(--t-body);line-height:1.55;color:#9fb1c5}
.planning-source-toggle{margin-top:var(--s-2);padding:0;border:0;background:transparent;color:#7d92a9;font-size:var(--t-micro);letter-spacing:.05em;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(125,146,169,.45)}
.planning-source-toggle:hover{color:#b3c5d8}

/* K7 official-edition comparison. Secondary to K6's current published values,
   with neutral borders and side labels instead of directional colour or marks. */
.planning-change{margin-top:var(--s-3);border:1px solid rgba(183,197,212,.22);border-radius:var(--r-small);background:rgba(255,255,255,.018)}
.planning-change[hidden]{display:none}
.planning-change>summary,.planning-change-analyst>summary{display:flex;align-items:center;min-height:44px;padding:var(--s-2) var(--s-3);font-size:var(--t-label);letter-spacing:.04em;color:#d1dce8;cursor:pointer}
.planning-change-intro,.planning-change-scope{margin:0;padding:0 var(--s-3) var(--s-2);font-size:var(--t-meta);line-height:1.5;color:#9fb1c5}
.planning-change-dates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2);margin:0 var(--s-3);padding:var(--s-2) 0;border-top:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09)}
.planning-change-dates>div{display:grid;gap:var(--s-1);min-width:0}
.planning-change-dates span,.planning-change-numeric-values small{font-size:var(--t-micro);line-height:1.35;color:#879bb0;overflow-wrap:anywhere}
.planning-change-dates strong{font-size:var(--t-label);line-height:1.35;color:#edf3f9;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.planning-change-scope{padding-top:var(--s-2)}
.planning-change-outcomes{display:grid;gap:var(--s-2);padding:0 var(--s-3)}
.planning-change-outcome,.planning-change-numeric-row{min-width:0;padding:var(--s-2);border:1px solid rgba(183,197,212,.16);border-radius:var(--r-small);background:rgba(255,255,255,.018)}
.planning-change-outcome h3,.planning-build-comparison h3,.planning-change-analyst h3{margin:0 0 var(--s-1);font-size:var(--t-meta);font-weight:650;line-height:1.4;color:#b9c8d8}
.planning-change-label{margin:0;font-size:var(--t-label);line-height:1.45;color:#edf3f9}
.planning-change-values{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-1) var(--s-2);margin-top:var(--s-2);font-size:var(--t-meta);line-height:1.45;overflow-wrap:anywhere}
.planning-change-values>span:first-child{grid-column:1/-1;color:#a9bbcf}
.planning-change-values small{font-size:var(--t-micro);color:#8296ab}
.planning-change-detail,.planning-change-caveat{margin:var(--s-1) 0 0;font-size:var(--t-meta);line-height:1.5;color:#a9bbcf;overflow-wrap:anywhere}
.planning-change-caveat{padding:var(--s-1) var(--s-2);border-left:2px solid #8999aa;color:#d0d8e0}
.planning-build-comparison{display:grid;gap:var(--s-2);margin:var(--s-3) var(--s-3) 0;padding-top:var(--s-2);border-top:1px solid rgba(255,255,255,.09)}
.planning-build-comparison h3{margin:0}
.planning-change-numeric-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2);margin-top:var(--s-1);font-size:var(--t-meta);line-height:1.45;color:#edf3f9;font-variant-numeric:tabular-nums}
.planning-change-numeric-values>div{display:grid;gap:var(--s-1);min-width:0;overflow-wrap:anywhere}
.planning-change-cell{margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px solid rgba(255,255,255,.07)}
.planning-change-cell strong{font-size:var(--t-meta);font-weight:620;color:#bac8d7}
.planning-change-analyst{margin:var(--s-3);border-top:1px solid rgba(255,255,255,.09)}
.planning-change-analyst>summary{padding-left:0;padding-right:0;font-size:var(--t-meta)}
.planning-change-analyst h3{margin-top:var(--s-1)}
.planning-change-provenance{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}
.planning-change-provenance-edition{padding:var(--s-2);border:1px solid rgba(183,197,212,.14);border-radius:var(--r-small);font-size:var(--t-micro);line-height:1.5;color:#a9bbcf;overflow-wrap:anywhere}
.planning-change-provenance-edition strong{color:#e1e8ef}
.planning-change-provenance-edition p{margin:var(--s-1) 0 0;overflow-wrap:anywhere}
.planning-change-analyst-data{max-height:28rem;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;padding:var(--s-2);border:1px solid rgba(183,197,212,.14);border-radius:var(--r-small);font-size:var(--t-micro);line-height:1.45;color:#a9bbcf}
.drawer-change-provenance{margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px solid var(--chrome-drawer-provenance-divider)}
.drawer-change-provenance h5{margin:0 0 var(--s-2);font-size:var(--t-meta);color:#d4deea}
.drawer-change-edition{margin-top:var(--s-2);padding:var(--s-2);border:1px solid var(--chrome-drawer-edition-border);border-radius:var(--r-small);overflow-wrap:anywhere}
.drawer-change-edition h6{margin:0;font-size:var(--t-meta);color:#ecf2f8}
.drawer-change-edition>p{margin:var(--s-2) 0 var(--s-1);font-size:var(--t-micro);color:#a9bbcf}

/* Lens ∩ ámbito: a MEMBERSHIP list. It carries no quantity, so there is no
   number here that could be read as a share of an ámbito's figures. */
.planning-touched{list-style:none;margin:var(--s-2) 0 0;padding:0;display:grid;gap:var(--s-1);font-size:var(--t-body);line-height:1.5;color:#a9bbcf}
.planning-touched>li{display:flex;align-items:baseline;gap:var(--s-2);flex-wrap:wrap}
.planning-touched-code{font-size:var(--t-meta);font-weight:700;letter-spacing:.04em;color:#e3ecf6;font-variant-numeric:tabular-nums}
.planning-touched-centre{font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase;color:#8ba0b7}

/* Detail-only Lens ∩ ámbito list: span the two-column .mix layout instead of
   leaving an empty right-hand column. Keep every code/name, but cap the long
   list so its card never dominates PLACE (especially in the mobile bottom sheet). */
#planningTouchedCard{grid-column:1/-1;min-width:0}
#planningTouchedList{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  align-content:start;
  gap:var(--s-1) var(--s-2);
  max-height:15rem;
  overflow-y:auto;
  overscroll-behavior:contain;
}
#planningTouchedList>li{
  display:flex;align-items:baseline;flex-wrap:wrap;
  gap:var(--s-1) var(--s-2);
  min-width:0;padding:var(--s-1) var(--s-2);
  border:1px solid var(--chrome-border);
  border-radius:var(--r-small);
  background:var(--chrome-card-surface);
  overflow-wrap:anywhere;
}
#planningTouchedList>li>span:not(.planning-touched-code):not(.planning-touched-centre){min-width:0}
#planningTouchedList:focus-visible{outline:2px solid var(--chrome-focus-ring-color);outline-offset:2px}


/* MEMBERSHIP (P0-a, #95), promoted into the always-visible planning section.
   It sits visually SEPARATE from the containment answer above (its own ruled
   block in the reserved neutral family) because it answers a different question
   at a different scope — which ámbitos the circle touches, never a share. */
.planning-membership{margin-top:var(--s-3);padding:var(--s-3) var(--s-3) var(--s-2);border:1px solid var(--line);border-left:2px solid var(--planning-neutral);border-radius:var(--r-small);background:rgba(255,255,255,.022)}
.planning-membership[hidden]{display:none}
.planning-membership-count{margin:0;font-size:var(--t-body);line-height:1.5;color:#cfe0f0}
.planning-membership[data-state="updating"] .planning-membership-count{color:#9fb3c8;font-style:italic}
.planning-membership-chips{list-style:none;margin:var(--s-2) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-1)}
.planning-membership-chip{display:inline-flex;align-items:baseline;gap:var(--s-1);max-width:100%;padding:var(--s-1) var(--s-2);border:1px solid var(--line2);border-radius:var(--r-small);background:rgba(255,255,255,.03)}
.planning-membership-chip .planning-touched-code{flex:none}
.planning-membership-chip-name{min-width:0;font-size:var(--t-meta);color:#a9bbcf;overflow-wrap:anywhere}
.planning-membership-seeall{margin:var(--s-2) 0 0;padding:var(--s-1) var(--s-2);border:1px solid var(--line2);border-radius:var(--r-small);background:transparent;color:#cfe0f0;font:inherit;font-size:var(--t-meta);cursor:pointer}
.planning-membership-seeall[hidden]{display:none}
.planning-membership-seeall:hover{border-color:var(--planning-neutral)}
.planning-membership-seeall:focus-visible{outline:2px solid var(--planning-neutral);outline-offset:2px}

/* The containing ámbito on the map: its own reserved neutral family, never a
   Lens hue, and never a hue that encodes a phase. */
.admin-active-pane .planning-ambito-label,.planning-ambito-label{background:rgba(8,16,27,.9);border:1px solid var(--planning-neutral);color:#e6eef8;font-size:var(--t-micro);letter-spacing:.05em}

/* Hospitality & Commercial is a selectable administrative barrio layer. Its
   value-driven fill is suspended (the hospitality fill-hold doc); the
   card is text-complete without it, and any future purple scale must keep
   avoiding evaluative red/amber/green semantics. */
/* Granted urban licences (K9, #71). Opt-in ADDRESS_POINT register rendered in a
   reserved administrative-neutral hue, visually distinct from the Lens A/B
   identities and from the planning-neutral ámbito. Three per-family figures are
   kept visually separate so no single "urban licences" total can be read. */
.licences{margin:var(--s-3) 0 0;padding-top:var(--s-2);border-top:1px solid var(--line)}
.licences[hidden]{display:none}
.licences .section-head{margin-top:0}
.lic-block-head{font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:#8ba0b7;font-weight:620}
.lic-state{margin:var(--s-2) 0 0;padding:var(--s-3);border:1px dashed var(--line2);border-radius:var(--r-small);font-size:var(--t-body);line-height:1.55;color:#bda089}
.lic-state[hidden]{display:none}
.lic-nomatches{border-color:rgba(192,121,79,.35);background:rgba(192,121,79,.05)}
#licBody[hidden]{display:none}
.lic-window{margin-top:var(--s-3);padding:var(--s-3);border:1px solid var(--line);border-radius:var(--r-small);background:rgba(255,255,255,.022)}
.lic-window-controls{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-2)}
.lic-window-field{display:flex;flex-direction:column;gap:var(--s-1);flex:1 1 120px;font-size:var(--t-micro);color:#9aaec4}
.lic-window-field input{width:100%;padding:var(--s-2);font-size:var(--t-micro);background:#0c1826;color:#d9e4ef;border:1px solid var(--line);border-radius:var(--r-small);font-variant-numeric:tabular-nums}
.lic-window-field input:focus-visible{outline:2px solid var(--chrome-focus-ring-color);outline-offset:2px}
.lic-window-applied{margin:var(--s-2) 0 0;font-size:var(--t-meta);line-height:1.5;color:#cdb79f;font-variant-numeric:tabular-nums}
.lic-window-clamped{margin:var(--s-1) 0 0;font-size:var(--t-micro);color:#d99a6e}
.lic-window-clamped[hidden]{display:none}
.lic-family-head{margin-top:var(--s-3);font-size:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:#8ba0b7;font-weight:620}
.lic-families{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2);margin-top:var(--s-2)}
.lic-family{padding:var(--s-3);border:1px solid var(--line);border-left:3px solid var(--licence-neutral);border-radius:var(--r-small);background:rgba(192,121,79,.045);min-width:0}
.lic-family-name{font-size:var(--t-micro);color:#aebdcd;line-height:1.3}
.lic-family-count{font-size:var(--t-title);font-weight:780;letter-spacing:-.04em;margin-top:var(--s-2);line-height:1;color:#f3f7ff;font-variant-numeric:tabular-nums}
.lic-family-unit{font-size:var(--t-micro);color:#8699ae;margin-top:var(--s-1);line-height:1.35}
.lic-coverage,.lic-unmatched{margin-top:var(--s-3)}
.lic-coverage-line,.lic-unmatched-line{margin:var(--s-1) 0 0;font-size:var(--t-body);line-height:1.5;color:#bccddf;font-variant-numeric:tabular-nums}
.lic-residual{list-style:none;margin:var(--s-2) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--s-1);font-size:var(--t-micro);color:#95a9be}
.lic-residual li{padding-left:var(--s-2);border-left:2px solid var(--line2);font-variant-numeric:tabular-nums}
.lic-ceiling{margin-top:var(--s-3);padding:var(--s-3);border:1px solid rgba(192,121,79,.28);border-radius:var(--r-small);background:rgba(192,121,79,.05)}
.lic-ceiling-line{margin:var(--s-2) 0 0;font-size:var(--t-body);line-height:1.5;color:#cdb79f}
.lic-ceiling-line:first-of-type{color:#e7cdb4;font-weight:600}
.lic-citizen,.lic-provenance{margin-top:var(--s-3);border:1px solid var(--line);border-radius:var(--r-small);background:rgba(255,255,255,.02)}
.lic-citizen summary,.lic-provenance summary{padding:var(--s-2) var(--s-3);cursor:pointer;font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase;color:#9aaec4}
.lic-citizen p,.lic-provenance p{margin:0;padding:0 var(--s-3) var(--s-2);font-size:var(--t-body);line-height:1.5;color:#a9bbcf}
.lic-provenance p+p{border-top:1px solid var(--line);padding-top:var(--s-2)}
@media(max-width:480px){.lic-families{grid-template-columns:1fr}.lic-window-field{flex:1 1 100%}}
.hospitality-context{margin:var(--s-3) 0 var(--s-1);padding-top:var(--s-2);border-top:1px solid var(--line)}
.hospitality-context[hidden]{display:none}
.hospitality-context .section-head{margin-top:0}
.hospitality-context-card{padding:var(--s-3);border:1px solid rgba(208,140,255,.18);border-radius:var(--r-small);background:rgba(208,140,255,.035)}
.hospitality-context-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-2)}
.hospitality-field-label{display:block;font-size:var(--t-micro);letter-spacing:.09em;text-transform:uppercase;color:#8195ab;margin-bottom:var(--s-1)}
.hospitality-area-name{margin:0;font-size:var(--t-figure);line-height:1.15;color:#ecf3fb}
.hospitality-clear{width:26px;height:26px;border:1px solid var(--line);border-radius:var(--r-small);background:rgba(255,255,255,.025);color:#a9bbcf;cursor:pointer;font-size:var(--t-figure);line-height:1}
.hospitality-clear:focus-visible{outline:2px solid var(--chrome-focus-ring-color);outline-offset:2px}
.hospitality-field{margin-top:var(--s-2);color:#a9bbcf;font-size:var(--t-micro);line-height:1.4}
.hospitality-field strong{font-weight:620;color:#c8d5e4}
.hospitality-value-row{display:flex;align-items:baseline;gap:var(--s-2);margin-top:var(--s-2);flex-wrap:wrap}
.hospitality-value{font-size:var(--t-display);font-weight:780;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.hospitality-unit{font-size:var(--t-micro);line-height:1.4;color:#96a9bd}
.hospitality-meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2);margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px solid rgba(255,255,255,.07)}
.hospitality-meta-grid>div{font-size:var(--t-micro);line-height:1.4;color:#a3b5c8;min-width:0}
.hospitality-dual-date,.hospitality-interpretation,.hospitality-state{margin:var(--s-2) 0 0;font-size:var(--t-micro);line-height:1.5;color:#93a7bc}
.hospitality-dual-date{color:#c5d2e0;font-weight:620}
.hospitality-state{color:#c3a7d8}
.hospitality-state:empty{display:none}
.hospitality-methodology-link{display:inline-block;margin-top:var(--s-2);color:#aabfd3;font-size:var(--t-micro);text-underline-offset:3px}
.hospitality-barrio-selected{filter:drop-shadow(0 0 2px rgba(255,255,255,.72))}

.lensbar{display:flex;gap:var(--s-2);margin:var(--s-1) 0 var(--s-3)}.lensbtn{flex:1;border:1px solid var(--line);background:rgba(255,255,255,.025);color:#9aacbf;border-radius:var(--r-small);padding:var(--s-2) var(--s-3);font-size:var(--t-micro);cursor:pointer}
.lensbtn.active.a{color:var(--ta3-lens-a-control-text);border-color:var(--ta3-lens-a-control-border);background:var(--ta3-lens-a-control-background)}
.lensbtn.active.b{color:var(--ta3-lens-b-control-text);border-color:var(--ta3-lens-b-control-border);background:var(--ta3-lens-b-control-background)}

.metrics{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.metric{min-width:0;padding:var(--s-3);border:1px solid var(--line);background:rgba(255,255,255,.025);border-radius:var(--r-small);min-height:73px}
.metric-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-2);font-size:var(--t-micro);color:#9eb0c4}.metric-head .dot{width:6px;height:6px}.metric-head .badge{margin-left:0;max-width:100%;overflow-wrap:anywhere}
.metric-value{font-size:var(--t-title);font-weight:780;letter-spacing:-.04em;margin-top:var(--s-2);line-height:1}
.metric-foot{font-size:var(--t-micro);color:#74879c;margin-top:var(--s-1)}.metric-value small{font-size:var(--t-micro);color:#94a6ba;font-weight:550;letter-spacing:0}
.place-circle-summary{display:none}
.place-circle-summary-head{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:var(--s-2);margin-bottom:var(--s-1);color:#d9e8f5;font-size:var(--t-label);font-weight:700}
.place-circle-summary-head>span:nth-child(2){color:#a9bbcf;font-size:var(--t-meta);font-weight:600;font-variant-numeric:tabular-nums}
.place-circle-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-1)}
.place-circle-reading{min-width:0;padding:var(--s-1) var(--s-2);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-small);background:rgba(255,255,255,.025)}
.place-circle-reading>span,.place-circle-reading>small{display:block;overflow-wrap:anywhere}
.place-circle-reading>span{min-height:2.3em;color:#8fa5bb;font-size:var(--t-micro);line-height:1.15}
.place-circle-reading>strong{display:block;margin-top:var(--s-1);color:#f0f7ff;font-size:var(--t-figure);line-height:1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.place-circle-reading>strong.abstain{color:#94a6ba;font-size:var(--t-meta);line-height:1.15}
.place-circle-reading>small{margin-top:var(--s-1);color:#9eb0c4;font-size:var(--t-micro);line-height:1.35}
.abstain{font-size:var(--t-body)!important;letter-spacing:-.01em!important;color:#a8b6c7!important}

.controlbox{margin-top:var(--s-2);padding:var(--s-3);border:1px solid var(--chrome-border);border-radius:var(--r-small);background:var(--chrome-card-surface)}
.controltop{display:flex;justify-content:space-between;align-items:center;font-size:var(--t-micro);color:var(--chrome-text-control-caption);margin-bottom:var(--s-2)}.controltop b{color:var(--chrome-text-control-strong);font-size:var(--t-meta)}
.activity-card{margin-top:var(--s-2);padding:var(--s-3);border:1px solid rgba(255,122,162,.2);border-radius:var(--r-small);background:rgba(255,122,162,.045);display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,.7fr);gap:var(--s-3);align-items:center}
.activity-card[hidden]{display:none}
.activity-card-title{display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-micro);color:#aebdcd}
.activity-card-title .dot{width:6px;height:6px}
.activity-card-value{font-size:var(--t-title);font-weight:780;letter-spacing:-.035em;margin-top:var(--s-2)}
.activity-card-foot{font-size:var(--t-micro);color:#7d90a5;margin-top:var(--s-1)}
.activity-card-note{font-size:var(--t-micro);line-height:1.4;color:#8fa1b7;border-left:1px solid rgba(255,122,162,.16);padding-left:var(--s-2)}
.badge.observed{border:1px solid var(--ta3-badge-observed-border);background:var(--ta3-badge-observed-background);color:var(--ta3-badge-observed-text)}
input[type=range]{width:100%;margin-inline:0;accent-color:#57b8ff}
.row-controls{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);margin-top:var(--s-2)}
select,.smallbtn{width:100%;border:1px solid var(--line);background:#0c1826;color:#d9e4ef;border-radius:var(--r-small);padding:var(--s-2);font-size:var(--t-micro);outline:none}
/* Native option popups paint their own opaque surface; the translucent header select background is not inherited, leaving light text on white. */
.header-tools select option{background:var(--chrome-form-surface);color:var(--chrome-text-control-value)}
.header-tools select option:disabled{color:#8fa3b8}
.smallbtn{cursor:pointer}.smallbtn:hover{border-color:var(--line2)}

.mix{margin-top:var(--s-3);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,max(10rem,calc(50% - var(--s-1)))),1fr));gap:var(--s-2)}
.card{border:1px solid var(--chrome-border);border-radius:var(--r-small);padding:var(--s-3);background:var(--chrome-card-surface)}
.card-title{font-size:var(--t-micro);color:var(--chrome-text-card-title);margin-bottom:var(--s-2)}
.mix-label{font-size:var(--t-micro);color:#ffc570;margin:calc(-1 * var(--s-1)) 0 var(--s-2);line-height:1.3}
.mix-label:empty{display:none}
.mixrow{display:grid;grid-template-columns:6.5em minmax(0,1fr) 34px;gap:var(--s-2);align-items:center;margin:var(--s-2) 0;font-size:var(--t-micro);color:#8699ae}
.mixrow>span{min-width:0;overflow-wrap:anywhere}
.bar{height:5px;background:#1d2b3b;border-radius:6px;overflow:hidden}.bar i{display:block;height:100%;border-radius:6px}
.nearest{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--s-2)}
.nearest li{min-width:0;font-size:var(--t-micro);color:#aebdcd;overflow-wrap:anywhere}.nearest em{font-style:normal;color:var(--text-meta);margin-left:var(--s-1);white-space:nowrap}
.compareline{margin-top:var(--s-1);padding-top:var(--s-1)}
.comparison-radius-readout{margin:var(--s-1) var(--s-1) var(--s-1);padding:var(--s-2);border:1px solid rgba(255,255,255,.09);border-radius:var(--r-small);background:rgba(255,255,255,.025);font-size:var(--t-micro);font-weight:650;color:#d7e5f2;font-variant-numeric:tabular-nums}
.comparison-mode-cue{margin:0 var(--s-1) var(--s-1);font-size:var(--t-micro);line-height:1.4;color:#a9bacb}
.halo-toggle{display:flex;align-items:center;gap:var(--s-2);min-height:36px;padding:var(--s-1) var(--s-2);margin:var(--s-1) 0 var(--s-1);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-small);background:rgba(255,255,255,.02);font-size:var(--t-micro);color:#c5d3e1;cursor:pointer}
.halo-toggle input{width:17px;height:17px;margin:0;accent-color:#dcefff}
.halo-toggle input:focus-visible{outline:2px solid var(--chrome-focus-ring-color);outline-offset:2px}
.halo-toggle small{margin-left:auto;font-size:var(--t-micro);color:#7e93a9}
.halo-legend{font-size:var(--t-micro);line-height:1.4;color:#8194a9;margin:0 var(--s-1) var(--s-2)}
/* COMPARISON BRIDGE: the focused reading of one metric. An analytical
   instrument, not a KPI card — no gauges, trophies, winner/loser arrows or
   traffic-light colours. Lens A keeps its near-white identity and Lens B its
   cyan one, but every meaning is carried by text as well as colour. The
   relationship sits BETWEEN the two lenses; "Withheld" is a neutral word, never
   a red/green verdict. */
.comparison-bridge{margin:0 var(--s-1) var(--s-2);padding:var(--s-2);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-small);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012))}
.cb-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-1);margin:0 0 var(--s-2)}
.cb-picker-button{min-width:0;min-height:44px;padding:var(--s-1);border:1px solid var(--line2);border-radius:var(--r-small);background:rgba(255,255,255,.025);color:#b8c8d8;font:inherit;font-size:var(--t-micro);font-weight:650;line-height:1.15;cursor:pointer;overflow-wrap:anywhere}
.cb-picker-button:hover{color:#fff;border-color:rgba(120,190,255,.45)}
.cb-picker-button:focus-visible{outline:2px solid var(--chrome-focus-ring-color);outline-offset:2px}
.cb-picker-button[aria-pressed="true"]{color:#fff;border-color:rgba(120,190,255,.65);background:#102a43;box-shadow:inset 0 -2px 0 #4bafff}
.comparison-bridge-empty{margin:0;font-size:var(--t-micro);line-height:1.45;color:#93a6bb;text-align:center}
.comparison-bridge-metric[hidden]{display:none}
.cb-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);margin-bottom:var(--s-2)}
.cb-metric-name{font-size:var(--t-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#dce9f6}
.cb-lock{font-size:var(--t-micro);font-weight:720;letter-spacing:.09em;text-transform:uppercase;color:#a9d6ff;border:1px solid rgba(120,190,255,.45);border-radius:999px;padding:var(--s-1) var(--s-2);white-space:nowrap}
.cb-lock[hidden]{display:none}
.cb-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:var(--s-2)}
.cb-side{display:flex;flex-direction:column;gap:var(--s-1);min-width:0}
.cb-side-b{text-align:right;align-items:flex-end}
.cb-lens{font-size:var(--t-micro);font-weight:720;letter-spacing:.08em;text-transform:uppercase;color:#8ba0b7}
.cb-side-a .cb-lens{color:var(--ta3-lens-a-text)}
.cb-side-b .cb-lens{color:var(--ta3-lens-b-text)}
.cb-value{font-size:var(--t-figure);font-weight:760;color:#f2f8ff;font-variant-numeric:tabular-nums;line-height:1.12;overflow-wrap:anywhere}
.cb-sub{font-size:var(--t-micro);color:#9fb1c5;line-height:1.3;overflow-wrap:anywhere}
.cb-radius{font-size:var(--t-micro);color:#8296ac;font-variant-numeric:tabular-nums}
.cb-rel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-1);padding:0 var(--s-2);border-left:1px solid rgba(255,255,255,.1);border-right:1px solid rgba(255,255,255,.1)}
.cb-rel-label{font-size:var(--t-micro);font-weight:720;letter-spacing:.06em;text-transform:uppercase;color:#8ba0b7;text-align:center;line-height:1.25}
.cb-rel-value{font-size:var(--t-label);font-weight:740;color:#eaf2fb;font-variant-numeric:tabular-nums;white-space:nowrap}
.comparison-bridge[data-relationship="withheld"] .cb-rel-value{font-size:var(--t-micro);font-weight:720;color:#b7c3d0;letter-spacing:.02em}
.cb-qualifier{margin:var(--s-2) 0 0;font-size:var(--t-micro);line-height:1.4;color:#8ea2b8;text-align:center;overflow-wrap:anywhere}
/* DECISION INSIGHT V1 — the compact deterministic synthesis of the canonical
   comparison set, directly beneath the Comparison Bridge. Deliberately quiet:
   no KPI typography, no traffic-light colours, no winner badges, no trophies,
   no arrows and no direction-based colouring, because a signed B − A is
   arithmetic direction and never success or failure. Evidence states are
   carried by WORDS (OFF, N/A, Withheld · reason), so nothing the reader needs
   depends on colour or hover. */
.decision-insight{margin:0 var(--s-1) var(--s-2);padding:var(--s-2);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-small);background:rgba(255,255,255,.022)}
.decision-insight[hidden]{display:none}
.di-head{display:flex;flex-direction:column;gap:var(--s-1);margin:0 0 var(--s-2)}
.decision-insight .di-title{font-size:var(--t-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#cfe0f0;margin:0}
.di-status{font-size:var(--t-micro);line-height:1.35;color:#8ba0b7;overflow-wrap:anywhere}
.di-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-1)}
.di-item{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:baseline;gap:var(--s-2);padding:var(--s-1);border-left:2px solid transparent;border-radius:var(--r-small)}
.di-metric{font-size:var(--t-micro);font-weight:650;color:#c2d3e4;overflow-wrap:anywhere}
.di-rel{font-size:var(--t-micro);font-weight:700;color:#eaf2fb;text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* A non-comparable state reads quieter than an observed difference but stays at
   readable contrast. The distinction is evidence strength, never judgment. */
.di-item[data-state="withheld"] .di-rel,.di-item[data-state="unavailable"] .di-rel,.di-item[data-state="off"] .di-rel{font-size:var(--t-micro);font-weight:620;color:#b2bfcd}
/* Focused metric: SUBTLE emphasis only. No item is ever hidden and the others
   keep readable contrast, so the Insight never becomes a second metric
   selector — the halo and table controls stay authoritative for focus. */
/* UX-C1: no opacity on informational rows. Dimming composited every muted label
   below 4.5:1; de-emphasis is carried by explicit colours, the focused row
   by its surface and edge (see the appearance blocks). */
.di-item[data-focused="true"]{border-left-color:rgba(120,190,255,.55);background:rgba(120,190,255,.07)}
.di-item[data-focused="true"] .di-metric{color:#dfecf8}
.di-item[data-focused="true"] .di-rel{color:#f2f8ff}
.di-guard{margin:var(--s-2) 0 0;padding-top:var(--s-1);border-top:1px solid rgba(255,255,255,.07);font-size:var(--t-micro);line-height:1.4;color:#8296ac;text-align:center;overflow-wrap:anywhere}
/* SPATIAL WINDOW SENSITIVITY V1 — a METHOD check, styled as one.
   Baseline and scenario are two readings of the same evidence under different
   analytical windows, so neither side is ever styled as the better one: no
   traffic-light colours, no winner badge, no arrows, no direction-based
   colouring and no progress/score bar. Every state is carried by WORDS
   (Relationship unchanged, Basis changed, Comparison became withheld, …), so
   nothing a reader needs depends on colour, hover or pointer input. The
   baseline column is tinted only to mark it as the FROZEN historical snapshot,
   never as a judgment. */
.spatial-sensitivity{margin:0 var(--s-1) var(--s-2);padding:var(--s-2);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-small);background:rgba(255,255,255,.022)}
.spatial-sensitivity[hidden]{display:none}
.ss-head{display:flex;flex-direction:column;gap:var(--s-1);margin:0 0 var(--s-2)}
.spatial-sensitivity .ss-title{font-size:var(--t-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#cfe0f0;margin:0}
.ss-status{font-size:var(--t-micro);line-height:1.35;color:#8ba0b7;overflow-wrap:anywhere}
.ss-empty{margin:0 0 var(--s-2);font-size:var(--t-micro);line-height:1.4;color:#93a7bd;overflow-wrap:anywhere}
.ss-empty[hidden]{display:none}
/* The invalidation notice is a plain, quiet statement of fact — the baseline no
   longer describes the same place or the same evidence — not an error state. */
.ss-notice{margin:0 0 var(--s-2);padding:var(--s-1) var(--s-2);border-left:2px solid rgba(155,213,255,.45);border-radius:var(--r-small);background:rgba(120,190,255,.06);font-size:var(--t-micro);line-height:1.4;color:#c0d2e4;overflow-wrap:anywhere}
.ss-notice[hidden]{display:none}
/* Baseline ↔ scenario windows. Two rows, never three cramped columns. */
.ss-windows{display:flex;flex-direction:column;gap:var(--s-1);margin:0 0 var(--s-2);padding:0}
.ss-windows[hidden]{display:none}
.ss-window{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:baseline;gap:var(--s-2);padding:var(--s-1);border-radius:var(--r-small);background:rgba(255,255,255,.02)}
.ss-window-label{margin:0;font-size:var(--t-micro);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#9fb4ca;overflow-wrap:anywhere}
.ss-window-radii{margin:0;font-size:var(--t-micro);font-weight:700;color:#eaf2fb;text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.ss-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-1)}
/* Each metric stacks BASELINE → SCENARIO → TRANSITION. The order is the reading
   order of the analysis and is identical at every width, so a narrow layout
   never reshuffles the meaning. */
.ss-item{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-1);border-left:2px solid transparent;border-radius:var(--r-small);background:rgba(255,255,255,.018)}
.ss-metric{font-size:var(--t-micro);font-weight:650;color:#c2d3e4;overflow-wrap:anywhere}
.ss-reading{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:baseline;gap:var(--s-2)}
.ss-reading-label{font-size:var(--t-micro);font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:#8ba0b7;overflow-wrap:anywhere}
.ss-reading-value{font-size:var(--t-micro);font-weight:700;color:#eaf2fb;text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* A non-comparable reading is quieter than an observed difference but stays at
   readable contrast. The distinction is evidence strength, never judgment. */
.ss-reading[data-comparable="false"] .ss-reading-value{font-size:var(--t-micro);font-weight:620;color:#b2bfcd}
/* The transition is the ANSWER of this layer, so it reads as the row's
   conclusion — emphasis by weight and position only, never by hue. */
.ss-transition{margin-top:var(--s-1);font-size:var(--t-micro);line-height:1.4;font-weight:700;color:#d6e4f2;overflow-wrap:anywhere}
.ss-transition-detail{display:block;margin-top:var(--s-1);font-size:var(--t-micro);line-height:1.4;font-weight:500;color:#93a7bd;overflow-wrap:anywhere}
/* Focused metric: SUBTLE emphasis only, reusing the existing halo/table focus
   state. Nothing is hidden and the others stay fully readable — Spatial
   Sensitivity is informational and never becomes another metric selector. */
.ss-item[data-focused="true"]{border-left-color:rgba(120,190,255,.55);background:rgba(120,190,255,.07)}
.ss-item[data-focused="true"] .ss-metric{color:#dfecf8}
.ss-item[data-focused="true"] .ss-transition{color:#f2f8ff}
.ss-actions{display:flex;flex-wrap:wrap;gap:var(--s-1);margin:var(--s-2) 0 0}
.ss-button{flex:1 1 auto;min-width:0;min-height:24px;padding:var(--s-1) var(--s-2);border:1px solid rgba(155,213,255,.35);border-radius:var(--r-small);background:rgba(120,190,255,.1);color:#dfecf8;font:inherit;font-size:var(--t-micro);font-weight:650;letter-spacing:.02em;text-align:center;cursor:pointer;overflow-wrap:anywhere}
.ss-button:hover{background:rgba(120,190,255,.18);border-color:rgba(155,213,255,.6)}
.ss-button:focus-visible{outline:2px solid var(--chrome-focus-ring-color);outline-offset:2px}
.ss-button-quiet{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.035);color:#bdcbd9}
.ss-button-quiet:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.3)}
.ss-button[hidden]{display:none}
.ss-guard{margin:var(--s-2) 0 0;padding-top:var(--s-1);border-top:1px solid rgba(255,255,255,.07);font-size:var(--t-micro);line-height:1.4;color:#8296ac;text-align:center;overflow-wrap:anywhere}
/* Panel → halo focus control: the metric name is an accessible button, so the
   table keeps its row-header semantics while the panel can drive the halo. */
.cmp-metric-focus{display:inline;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;letter-spacing:inherit;text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(255,255,255,.22);text-underline-offset:2px}
.cmp-metric-focus:hover{text-decoration-color:rgba(155,213,255,.8)}
.cmp-metric-focus:focus-visible{outline:2px solid var(--chrome-focus-ring-color);outline-offset:2px;border-radius:var(--r-small)}
.cmp-metric-focus[aria-pressed="true"]{color:#eaf3fb;text-decoration-color:#9bd5ff}
.comparetable-wrap{overflow-x:auto;overscroll-behavior-x:contain}
.comparetable{width:100%;border-collapse:collapse;font-size:var(--t-micro);font-variant-numeric:tabular-nums}
.comparetable th,.comparetable td{padding:var(--s-1);border-bottom:1px solid rgba(255,255,255,.055);text-align:right;vertical-align:top;color:#afbece;line-height:1.35}
.comparetable thead th{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.05em;color:#8195ab;font-weight:650}
.comparetable th:first-child{text-align:left;color:#c4d1df;font-weight:600;min-width:88px}
.comparetable td{max-width:112px;overflow-wrap:anywhere}
.comparetable td{white-space:pre-line}
.comparetable td:last-child{color:#eef5fc;font-weight:650}
.compare-evidence,.halo-visibility-note{font-size:var(--t-micro);line-height:1.4;color:#8296ac;margin:var(--s-2) var(--s-1) 0}
.halo-visibility-note{color:#a7b8c9}
.halo-visibility-note:empty{display:none}
.panel-only-metric th:after{content:""}
.comparison-halo-icon{background:transparent!important;border:0!important;pointer-events:none!important;overflow:visible}
.halo-glyph{overflow:visible;pointer-events:none;filter:drop-shadow(0 0 1.2px rgba(0,0,0,.98));font-family:Inter,ui-sans-serif,system-ui,sans-serif;transition:opacity .12s ease,filter .12s ease;outline:none}
.halo-glyph .halo-track,.halo-glyph .halo-fill,.halo-glyph .halo-zero,.halo-glyph .halo-state-track,.halo-glyph .halo-state-mark,.halo-glyph .halo-qualified-mark,.halo-glyph .halo-value,.halo-glyph .halo-label{pointer-events:visiblePainted}
.halo-glyph.halo-inactive{opacity:.82}.halo-glyph.halo-active{opacity:1}
.halo-glyph:focus-visible{filter:drop-shadow(0 0 2px #fff);outline:2px solid #fff;outline-offset:2px}
.halo-glyph.halo-metric-deemphasized{opacity:.3}.halo-glyph.halo-metric-focused{opacity:1;filter:drop-shadow(0 0 2px rgba(255,255,255,.85))}
/* V3: the DATA bar and its NUMBER are the dominant marks; the track behind the
   bar is a quiet guide. Lens B is distinguished structurally (dashed fill) as
   well as by hue, so A/B never relies on colour alone. */
.halo-track{stroke:rgba(7,16,27,.62);stroke-width:1.4;stroke-linecap:round}
.halo-fill{stroke:var(--halo-color);stroke-width:var(--halo-thickness);stroke-linecap:round}
.halo-glyph.halo-a{--halo-color:var(--ta3-map-halo-a)}
.halo-glyph.halo-b{--halo-color:var(--ta3-map-halo-b)}
.halo-glyph.halo-b .halo-fill{stroke-width:var(--halo-thickness);stroke-dasharray:2.4 1.8}
/* Density at or above the Madrid reference: the bar is clamped to full length,
   so a subtle glow marks the clamp while the raw number keeps the real value. */
.halo-glyph[data-saturated="true"] .halo-fill{filter:drop-shadow(0 0 1.3px var(--halo-color))}
.halo-glyph.halo-b .halo-track{stroke:rgba(7,16,27,.52)}
.halo-zero{fill:#08101a;stroke:var(--halo-color);stroke-width:1.4}
/* The raw value — the primary readable mark. */
.halo-value{fill:var(--halo-color);font-size:var(--t-label);font-weight:820;letter-spacing:.01em;paint-order:stroke;stroke:#050c15;stroke-width:3px;stroke-linejoin:round;dominant-baseline:middle}
.halo-value.halo-value-zero{fill:var(--halo-color);opacity:.9}
.halo-value.halo-value-unavailable,.halo-value.halo-value-no-evidence,.halo-value.halo-value-off,.halo-value.halo-value-withheld{fill:#b9c7d6;font-size:var(--t-micro);font-weight:720;opacity:.92}
.halo-label{fill:#cdddee;font-size:var(--t-micro);font-weight:720;letter-spacing:.06em;paint-order:stroke;stroke:#050c15;stroke-width:2.1px;stroke-linejoin:round;dominant-baseline:middle;opacity:.9}
.halo-metric-row-focused th,.halo-metric-row-focused td{background:rgba(89,170,225,.14);color:#fff!important}
.halo-state-track{stroke:var(--halo-color);stroke-width:6;stroke-linecap:round;fill:none;opacity:.7}
.halo-state-mark{fill:var(--halo-color);font-size:var(--t-body);font-weight:760;paint-order:stroke;stroke:#050c15;stroke-width:2.2px;stroke-linejoin:round}
.halo-state-off .halo-state-track{stroke-dasharray:4 5;opacity:.45}.halo-state-off .halo-state-mark{font-size:var(--t-label);opacity:.7}
.halo-state-unavailable .halo-state-track{stroke-width:5;stroke-dasharray:2 3;fill:none;opacity:.6}.halo-state-unavailable .halo-state-mark{font-size:var(--t-figure)}
.halo-state-no-evidence .halo-state-track{stroke-width:3;stroke-dasharray:none;opacity:.7}.halo-state-no-evidence .halo-state-mark{font-size:var(--t-body)}
.halo-state-withheld .halo-state-track{stroke-width:4;stroke-dasharray:7 4;opacity:.5}.halo-state-withheld .halo-state-mark{font-size:var(--t-figure)}
.halo-qualified-mark{fill:#08101a;stroke:var(--halo-color);stroke-width:1.4}
/* DESTINATION CONTEXT: the citywide surface.
   Given its own quiet card so it reads as a different KIND of thing from the
   lens metrics above it, and styled with no performance semantics anywhere: no
   red, no green, no arrows, no bands. A year-over-year change is a reported
   difference between two published figures, not a score, so up and down look
   identical and only the sign distinguishes them. */
.destination{margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--line)}
.destination[hidden]{display:none}
.destination .section-head{margin-top:0}
.destination-identity{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.destination-place{margin:0;font-size:var(--t-figure);font-weight:700;letter-spacing:-.02em;line-height:1.15;color:#e9f1fb}
.badge.statistics{flex:0 0 auto;margin-left:0;font-size:var(--t-micro);padding:var(--s-1) var(--s-2);background:var(--ta3-badge-statistics-background);color:var(--ta3-badge-statistics-text);border:1px solid var(--ta3-badge-statistics-border)}
.destination-period{display:flex;align-items:baseline;gap:var(--s-2);margin-top:var(--s-1);flex-wrap:wrap}
.destination-period-label{font-size:var(--t-micro);color:#a4b7cb;font-weight:600}
/* Provisional is a fact about the figure, not a warning about it. */
.destination-provisional{font-size:var(--t-micro);letter-spacing:.07em;text-transform:uppercase;padding:var(--s-1) var(--s-2);border-radius:var(--r-small);background:rgba(162,178,198,.09);color:#a3b5c8;border:1px solid rgba(162,178,198,.19)}
.destination-provisional[hidden]{display:none}
.destination-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2);margin-top:var(--s-2)}
.destination-metric{min-width:0;padding:var(--s-2);border:1px solid rgba(255,255,255,.075);border-radius:var(--r-small);background:rgba(255,255,255,.012)}
.destination-metric-head{font-size:var(--t-micro);letter-spacing:.09em;text-transform:uppercase;color:#8ba0b7;font-weight:620}
.destination-metric-value{margin-top:var(--s-1);font-size:var(--t-title);font-weight:740;letter-spacing:-.04em;line-height:1.05;color:#e9f1fb;font-variant-numeric:tabular-nums}
.destination-metric-value.abstain{font-size:var(--t-body);font-weight:600;color:#8195ab;letter-spacing:0}
.destination-metric-exact{margin-top:var(--s-1);font-size:var(--t-micro);color:#8195ab;font-variant-numeric:tabular-nums}
.destination-metric-change{margin-top:var(--s-1);font-size:var(--t-micro);line-height:1.4;color:#a4b7cb;font-variant-numeric:tabular-nums}
.destination-spark{margin-top:var(--s-2);display:block;width:100%;height:26px;overflow:visible}
.destination-spark-line{fill:none;stroke:#8fbde8;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.destination-spark-dot{fill:#cfe3f7}
.destination-composition{margin-top:var(--s-2);font-size:var(--t-micro);line-height:1.5;color:#a4b7cb;font-variant-numeric:tabular-nums}
.destination-composition:empty{display:none}
.destination-compbar{display:flex;height:5px;margin-top:var(--s-1);border-radius:3px;overflow:hidden;background:rgba(255,255,255,.05)}
.destination-compbar i{display:block;height:100%}
/* The two residence segments are separated by LIGHTNESS, not hue: ~4:1 between
   them, so the boundary is legible without relying on colour vision and without
   either share reading as the good or the bad one. The figures are also stated
   in text directly above the bar and in its aria-label, so the bar never carries
   information on its own. */
.destination-compbar .spain{background:#cfe0f0}
.destination-compbar .abroad{background:#3f6e96}
.destination-state{margin:var(--s-2) 0 0;font-size:var(--t-micro);line-height:1.45;color:#8195ab}
.destination-state:empty{display:none}
.destination-ceiling{margin:var(--s-1) 0 0;font-size:var(--t-micro);line-height:1.45;color:#8195ab}
.domestic-origins{margin-top:var(--s-3);padding-top:var(--s-2);border-top:1px solid rgba(255,255,255,.075)}
.domestic-origins[hidden]{display:none}.domestic-origins-head{display:flex;align-items:center;gap:var(--s-1);font-size:var(--t-micro);color:#c9d9e9}.domestic-origin-controls{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-2);font-size:var(--t-micro);color:#8ba0b7}.domestic-origin-controls select{min-width:0;max-width:130px;padding:var(--s-1) var(--s-2);font-size:var(--t-micro)}.domestic-origin-scope,.domestic-origin-universe{margin-top:var(--s-1);font-size:var(--t-micro);line-height:1.4;color:#a4b7cb}.domestic-origin-universe{color:#8ba0b7}.domestic-origin-table-wrap{max-height:230px;overflow:auto;margin-top:var(--s-2);border:1px solid rgba(255,255,255,.07);border-radius:var(--r-small)}.domestic-origin-table-wrap table{width:100%;border-collapse:collapse;font-size:var(--t-micro);line-height:1.25}.domestic-origin-table-wrap th{position:sticky;top:0;background:#101e30;color:#8ba0b7;font-size:var(--t-micro);letter-spacing:.05em;text-transform:uppercase;text-align:left}.domestic-origin-table-wrap th,.domestic-origin-table-wrap td{padding:var(--s-1) var(--s-2);border-bottom:1px solid rgba(255,255,255,.05)}.domestic-origin-table-wrap th:last-child,.domestic-origin-table-wrap td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.domestic-origin-table-wrap tr:last-child td{border-bottom:0}
.domestic-origin-chart{margin:var(--s-2) 0 0;padding:0}.domestic-origin-chart[hidden]{display:none}.domestic-origin-chart figcaption{display:flex;flex-direction:column;gap:var(--s-1);font-size:var(--t-label);line-height:1.4;color:var(--muted)}.domestic-origin-chart figcaption strong{color:var(--text)}.domestic-origin-bars{list-style:none;margin:var(--s-2) 0 0;padding:0;display:grid;gap:var(--s-2)}.domestic-origin-bars li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s-2);row-gap:var(--s-1);align-items:baseline;font-size:var(--t-label);line-height:1.3;color:var(--text)}.domestic-origin-bars .dob-name{min-width:0;overflow-wrap:anywhere}.domestic-origin-bars .dob-value{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}.domestic-origin-bars .dob-track{grid-column:1/-1;display:block;height:8px;background:var(--line)}.domestic-origin-bars .dob-track i{display:block;height:100%;background:var(--b)}.domestic-origin-chart-scale{margin:var(--s-2) 0 0;font-size:var(--t-label);line-height:1.4;color:var(--muted)}
:root[data-appearance="light"] .domestic-origin-bars .dob-track i{background:#1f5f8b}
.domestic-origin-map{margin:var(--s-3) 0 0;padding:0}.domestic-origin-map[hidden]{display:none}.domestic-origin-map figcaption{display:flex;flex-direction:column;gap:var(--s-1);font-size:var(--t-label);line-height:1.4;color:var(--muted)}.domestic-origin-map figcaption strong{color:var(--text)}.domestic-origin-map-controls{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-2);font-size:var(--t-label);color:var(--muted)}.domestic-origin-map-controls select{min-width:0;max-width:130px;padding:var(--s-1) var(--s-2);font-size:var(--t-label)}.domestic-origin-map-canvas{position:relative;isolation:isolate;height:300px;margin-top:var(--s-2);border:1px solid var(--line);border-radius:var(--r-small);overflow:hidden}.domestic-origin-map-canvas .leaflet-top.leaflet-left{top:0;left:0;right:auto}.domestic-origin-map-canvas .leaflet-bottom.leaflet-right{top:auto;bottom:0;left:auto;right:0}
.domestic-origin-dynamics{margin-top:var(--s-3);padding-top:var(--s-2);border-top:1px solid rgba(255,255,255,.075)}.domestic-origin-dynamics-relationship{margin:var(--s-1) 0 0;font-size:var(--t-micro);line-height:1.4;color:#a4b7cb;font-variant-numeric:tabular-nums}.domestic-origin-dynamics-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-1);margin-top:var(--s-2)}.domestic-origin-dynamics-summary>div{min-width:0;padding:var(--s-1);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-small);background:rgba(255,255,255,.012)}.domestic-origin-dynamics-summary span{display:block;font-size:var(--t-micro);line-height:1.18;color:#8ba0b7}.domestic-origin-dynamics-summary b{display:block;margin-top:var(--s-1);font-size:var(--t-meta);color:#dbe8f4;font-variant-numeric:tabular-nums}.domestic-origin-dynamics-table-heading{margin-top:var(--s-2);font-size:var(--t-micro);line-height:1.35;color:#a4b7cb}.domestic-origin-dynamics-table-wrap{max-height:175px}.domestic-origin-dynamics-table-wrap th:not(:first-child),.domestic-origin-dynamics-table-wrap td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.domestic-origin-dynamics-transitions{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-1);margin-top:var(--s-2)}.domestic-origin-dynamics-transitions details{border:1px solid rgba(255,255,255,.06);border-radius:var(--r-small);background:rgba(255,255,255,.01)}.domestic-origin-dynamics-transitions summary{padding:var(--s-1) var(--s-2);cursor:pointer;font-size:var(--t-micro);line-height:1.3;color:#c9d9e9}.domestic-origin-dynamics-detail-wrap{max-height:150px;margin:0 var(--s-1) var(--s-1)}.domestic-origin-dynamics-transitions details:not([open]) .domestic-origin-table-wrap{display:none}
@media(max-width:520px){.domestic-origin-dynamics-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.domestic-origin-dynamics-summary>div:last-child{grid-column:span 2}.domestic-origin-dynamics-table-wrap{}.domestic-origin-dynamics-table-wrap th,.domestic-origin-dynamics-table-wrap td{padding:var(--s-1)}}
@media (max-width:420px){.destination-metrics{grid-template-columns:1fr}}
.source{font-size:var(--t-micro);line-height:1.45;color:#8298af;margin-top:var(--s-3)}.source a{color:#8db8dc;text-decoration:none}
.lens-boundary{filter:drop-shadow(0 0 1.5px rgba(0,0,0,.9)) drop-shadow(0 0 2.5px rgba(255,255,255,.5));stroke-linecap:round;stroke-linejoin:round}
/* Administrative reference geometry: a quieter halo than the lens, so the
   containing barrio stays readable on imagery without competing with it. */
.admin-active-pane{filter:drop-shadow(0 0 1.2px rgba(0,0,0,.7)) drop-shadow(0 0 1.8px rgba(255,255,255,.32))}
.area-label{background:var(--map-label-surface);border:1px solid var(--map-label-edge);color:var(--map-label-text);border-radius:999px;padding:var(--s-1) var(--s-2);font-size:var(--t-micro);font-weight:600;letter-spacing:-.005em;box-shadow:var(--map-label-shadow);white-space:nowrap;backdrop-filter:blur(6px);max-width:210px;overflow:hidden;text-overflow:ellipsis}
.area-label b{margin-right:var(--s-2);font-size:var(--t-micro);font-weight:800;letter-spacing:.11em;opacity:.85}
.area-label-b{border-color:var(--map-label-b-edge)}
.area-label-b b{color:var(--map-label-b-text)}
.marker-center{width:18px;height:18px;border-radius:50%;border:2px solid currentColor;background:rgba(8,16,27,.75);box-shadow:0 0 0 5px color-mix(in srgb,currentColor 15%,transparent),0 3px 15px rgba(0,0,0,.5)}
.marker-a{color:var(--ta3-map-center-a)}.marker-b{color:var(--ta3-map-center-b)}
.poi-cluster-icon{background:transparent!important;border:0!important}
.poi-cluster{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid var(--map-cluster-edge);border-radius:50%;background:var(--map-cluster-surface);box-shadow:0 0 0 1.5px var(--map-cluster-halo),inset 0 0 0 2.5px var(--cluster-cat);font-size:var(--t-meta);font-weight:800;letter-spacing:-.02em;color:var(--map-cluster-text);transition:transform .15s ease,box-shadow .15s ease}
.poi-cluster::before{content:"";width:11px;height:11px;background:var(--map-cluster-text);-webkit-mask:var(--cluster-glyph) center/contain no-repeat;mask:var(--cluster-glyph) center/contain no-repeat}
.poi-cluster:hover{transform:scale(1.06);box-shadow:0 0 0 1.5px var(--map-cluster-halo),0 0 0 3.5px var(--map-cluster-edge),inset 0 0 0 2.5px var(--cluster-cat)}
.poi-cluster span{line-height:1;color:var(--map-cluster-text)}
.poi-cluster-icon.outside-lens .poi-cluster{border-style:dashed}
.cluster-stay{--cluster-cat:var(--stay);--cluster-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 15V3.2L8 1l5 2.2V15h-3.6v-3.6H6.6V15z M5.3 4.6h1.8v1.8H5.3z M8.9 4.6h1.8v1.8H8.9z M5.3 7.6h1.8v1.8H5.3z M8.9 7.6h1.8v1.8H8.9z'/%3E%3C/svg%3E")}
.cluster-bike{--cluster-cat:var(--bike);--cluster-glyph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='3.8' cy='11' r='2.8'/%3E%3Ccircle cx='12.2' cy='11' r='2.8'/%3E%3Cpath d='M3.8 11L6.8 5.2h4L12.2 11M6.8 5.2L8.4 11h-4.6M5.8 3.4h2'/%3E%3C/g%3E%3C/svg%3E")}
/* #159: dual-tone focus ring (edge tone flanked by halo tone, 3px each side) so it stays distinguishable on light, dark and
   imagery basemaps regardless of appearance. The round chip ring replaces the app-wide square marker-box ring (it was
   single-tone and doubled the cue). Forced-colors drops box-shadow and keeps the outline. */
.poi-cluster-icon:focus-visible{outline:0;box-shadow:none}
.poi-cluster-icon:focus-visible .poi-cluster,.poi-cluster-icon:focus .poi-cluster{outline:3px solid var(--map-cluster-edge);outline-offset:3px;box-shadow:0 0 0 9px var(--map-cluster-halo),inset 0 0 0 2.5px var(--cluster-cat)}
@media(prefers-reduced-motion:reduce){.poi-cluster{transition:none}.poi-cluster:hover{transform:none}}
/* #149 N2: the category glyph is a CSS mask painted with a background colour, which forced-colors flattens to Canvas (invisible). Repaint it with a system colour; forced-color adjustment stays on for everything else. */
@media(forced-colors:active){.poi-cluster::before{background-color:CanvasText}}
.badge{display:inline-block;padding:var(--s-1) var(--s-2);border-radius:var(--r-small);font-size:var(--t-micro);letter-spacing:.06em;text-transform:uppercase;margin-left:var(--s-1)}
.badge.model{background:var(--ta3-badge-model-background);color:var(--ta3-badge-model-text);border:1px solid var(--ta3-badge-model-border)}
.badge.snapshot{background:var(--ta3-badge-snapshot-background);color:var(--ta3-badge-snapshot-text);border:1px solid var(--ta3-badge-snapshot-border)}

@media(max-width:1100px) and (min-width:851px){
  .left{width:200px}
  .panel{
    width:min(420px,calc(100vw - 270px - var(--safe-left) - var(--safe-right)));
    min-width:340px;max-width:calc(100vw - 250px - var(--safe-left) - var(--safe-right))
  }
  .leaflet-top.leaflet-left,.leaflet-bottom.leaflet-right{left:calc(232px + var(--safe-left))}
}

@media(max-width:850px){
  :root{--header-bottom:calc(9px + 54px + var(--safe-top));--header-bottom-floor:calc(9px + 54px + var(--safe-top))}
  header{left:calc(10px + var(--safe-left));right:calc(10px + var(--safe-right));top:calc(9px + var(--safe-top));min-height:54px}
  .brand{max-width:100%;min-width:0}.brand-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand-sub{}
  .left{left:calc(10px + var(--safe-left));top:calc(var(--header-chrome-top) + 10px);width:min(240px,calc(100vw - 72px - var(--safe-left) - var(--safe-right)));padding:var(--s-2);max-height:min(52vh,430px);max-height:min(52dvh,430px);overflow:auto}
  .rail-group+.rail-group{margin-top:var(--s-1)}
  .rail-group>summary{grid-template-columns:1fr;grid-template-rows:auto auto;gap:0;min-height:44px;margin:0;padding:var(--s-1) var(--s-4);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-small);background:rgba(255,255,255,.025);cursor:pointer}
  .rail-group>summary:before{display:none}
  .rail-group-copy{grid-column:1;grid-row:1;padding-left:0;letter-spacing:.08em}
  .rail-group-badge{display:inline-block;grid-column:1;grid-row:2;justify-self:start;max-width:none;padding:0 var(--s-1)}
  .rail-group[open]>summary{border-color:rgba(75,175,255,.35);background:rgba(75,175,255,.08)}
  .rail-group-content{padding:var(--s-2) var(--s-1) var(--s-1)}
  .panel{left:calc(10px + var(--safe-left));right:calc(10px + var(--safe-right));top:auto;bottom:calc(10px + var(--safe-bottom));width:auto;min-width:0;max-width:none;height:auto;min-height:0;max-height:42vh;max-height:42dvh;padding:var(--s-3)}
  .panel-resize-handle{display:none}
  .title{}.metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.metric{min-height:61px;padding:var(--s-2)}.metric-value{}.metric-head{}.metric-foot{}
  .section-head{margin:var(--s-2) 0 var(--s-1)}.section-head span{}.section-head small{}
  .area .section-head{margin-top:0}
  .area-identity{margin:var(--s-1) 0 var(--s-2)}.area-context{}.area-codes{}
  .area-figure{grid-template-columns:auto minmax(0,1fr);gap:var(--s-2);padding:var(--s-2) var(--s-3)}
  .area-value{}.area-value-label{margin-top:var(--s-1)}.area-period{margin-top:var(--s-1)}
  .area-scope{padding-left:var(--s-3)}.area-scope p{margin-top:var(--s-1)}
  .area-vut{margin-top:var(--s-1);padding:var(--s-1) var(--s-2) var(--s-2);border-radius:var(--r-small)}
  .area-vut-title{}
  .area-vut-figure{margin-top:var(--s-1);gap:var(--s-2)}
  .area-vut-value{}.area-vut-unit{}
  .area-vut-secondary{margin-top:var(--s-1);}
  .area-vut-state{margin-top:var(--s-1);}
  .area-other{margin-top:var(--s-2);padding-top:var(--s-2);gap:var(--s-2)}
  .activity-card{grid-template-columns:1fr;padding:var(--s-2)}
  .compareline{margin-top:var(--s-2);padding-bottom:var(--s-1)}.halo-toggle{min-height:40px}.comparetable{}.comparetable th,.comparetable td{padding:var(--s-1)}.comparetable th:first-child{min-width:75px}.compare-evidence,.halo-visibility-note{}
  .comparison-bridge-empty{}.cb-metric-name{}.cb-value{}.cb-rel-value{}.cb-sub,.cb-radius,.cb-qualifier{}.comparison-bridge[data-relationship="withheld"] .cb-rel-value{}
  .decision-insight .di-title{}.di-status{}.di-metric{}.di-rel{}.di-guard{}
  .di-item[data-state="withheld"] .di-rel,.di-item[data-state="unavailable"] .di-rel,.di-item[data-state="off"] .di-rel{}
  /* Touch/tablet typography for the sensitivity check. Sizes grow, the stacked
     baseline → scenario → transition order never changes, and the buttons reach
     a comfortable touch target. */
  .spatial-sensitivity .ss-title{}.ss-status{}.ss-empty,.ss-notice{}
  .ss-metric{}.ss-window-label,.ss-reading-label{}.ss-window-radii,.ss-reading-value{}
  .ss-reading[data-comparable="false"] .ss-reading-value{}
  .ss-transition{}.ss-transition-detail{}.ss-guard{}
  .ss-button{min-height:40px;}
  select,.smallbtn{}
  .basemap-control select{}
  .map-control select{}
  .stay-filter select{}
  .language-control select,.hospitality-controls select{}
  .hospitality-select-value{line-height:1.3;padding-block:var(--s-2)}
  .hospitality-context{margin-top:var(--s-2);padding-top:var(--s-2)}
  .hospitality-context-card{padding:var(--s-2)}
  .hospitality-value{}
  .hospitality-meta-grid{grid-template-columns:1fr 1fr}
  .leaflet-top.leaflet-left{top:calc(var(--header-chrome-top) + 10px);left:auto;right:calc(10px + var(--safe-right))}
  /* Two 44px touch targets start 10px below the header; preserve a real 12px gap
     before attribution instead of overlapping its legal source text. */
  .leaflet-bottom.leaflet-right{top:calc(var(--header-chrome-top) + 110px);bottom:auto;left:auto;right:calc(10px + var(--safe-right))}
  .leaflet-control-attribution{max-width:min(46vw,220px);text-align:right}
}

@media(pointer:coarse){
  .layer{min-height:44px}
  .switch{width:42px;height:24px}
  .switch span{border-radius:14px}
  .switch span:after{width:20px;height:20px;left:2px;top:2px}
  .switch input:checked+span:after{left:20px}
  .leaflet-control-zoom a{width:44px!important;height:44px!important}
  /* Baseline capture/reset are touch targets wherever the pointer is coarse —
     including an iPad in landscape, which is far too wide for the width-based
     typography query above. */
  .ss-button{min-height:44px;}
}

@media(max-width:560px){
  .left{width:150px;max-height:min(49vh,360px);max-height:min(49dvh,360px)}
  .layer{}
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.metric{min-height:58px}
  .hospitality-meta-grid{grid-template-columns:1fr}
  .leaflet-bottom.leaflet-right{top:calc(var(--header-chrome-top) + 110px)}
}

@media(max-width:420px){
  .brand-sub{display:none}
  .brand-title{}
  .logo{width:26px;height:26px}
  .left{width:142px}
}

/* Only the narrowest phones stack the figure; at ordinary phone widths the
   drawer is full-width, so two columns stay legible and cost less height. */
@media(max-width:360px){
  .area-figure{grid-template-columns:1fr;gap:var(--s-2)}
  .area-scope{border-left:0;border-top:1px solid var(--line);padding:var(--s-2) 0 0}
  .area-scope p{margin-top:var(--s-1)}
  /* Narrowest phones: stack the Bridge as A / relationship / B so identity
     stays obvious and nothing clips or overflows. */
  .cb-grid{grid-template-columns:1fr;gap:var(--s-2)}
  .cb-side-b{text-align:left;align-items:flex-start}
  .cb-rel{flex-direction:row;justify-content:space-between;gap:var(--s-2);padding:var(--s-2) 0;border-left:0;border-right:0;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}
  /* Narrowest phones: stack each Insight item as metric identity above its
     relationship clause, so neither can clip or overflow. */
  .di-item{grid-template-columns:1fr;gap:var(--s-1)}
  .di-rel{text-align:left}
}

@media(max-height:700px){
  .left{max-height:calc(100vh - 90px - var(--safe-top) - var(--safe-bottom));max-height:calc(100dvh - 90px - var(--safe-top) - var(--safe-bottom))}
}
@media(max-width:850px) and (max-height:700px){
  .panel{max-height:44vh;max-height:44dvh}
}

/* ===== INFORMATION ARCHITECTURE V2 (K4, #66) ================================
   Layout, drawer, rail, responsive visibility and touch behaviour only. K5's
   visual system below now supplies its shared tokens. The responsive rule that
   governs everything below: NO breakpoint may hide a source, a date, a unit, a
   scope label or an interpretation ceiling. Supporting figures and tables may
   collapse; they are never deleted. */
/* The DETAIL list belongs to the two-track panel grid; keep mobile scrolling
   compact without reassigning any text-size role in the pre-K4 breakpoint. */
@media(max-width:850px){#planningTouchedList{max-height:11rem}}
@media(max-width:850px){.planning-explorer{padding:var(--s-2)}.planning-explorer-query,.planning-explorer-map,.planning-explorer-evidence-toggle,.planning-explorer-close,.planning-explorer-result{min-height:44px}.planning-explorer-result{align-items:flex-start;flex-direction:column;justify-content:center}.planning-explorer-result span{max-width:100%}}
.header-tools{margin-left:auto;display:flex;align-items:center;gap:var(--s-2);min-width:0;padding-left:var(--s-3);border-left:1px solid var(--chrome-divider)}
.appearance-control{display:flex;align-items:center;gap:var(--s-2);color:var(--chrome-text-brand-subtle);font-size:var(--t-micro);font-weight:650;letter-spacing:.04em;white-space:nowrap}
.appearance-control>span{font-size:var(--t-micro)}
.header-tools select{width:auto;min-width:96px;min-height:44px;padding:var(--s-2) var(--s-3);font-size:var(--t-meta);border:1px solid var(--chrome-border);border-radius:var(--r-small);background:var(--chrome-control-group-surface);color:var(--chrome-text-control-value)}
.header-tools select:focus-visible{outline:2px solid var(--chrome-focus-ring-color);outline-offset:2px}
.tutorial-help{display:inline-flex;align-items:center;gap:var(--s-1);min-height:44px;padding:var(--s-1) var(--s-2);border:1px solid var(--chrome-border);border-radius:var(--r-small);background:var(--chrome-control-group-surface);color:var(--chrome-text-control-value);font:inherit;font-size:var(--t-meta);font-weight:650;cursor:pointer}
.tutorial-help>span:first-child{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border:1px solid currentColor;border-radius:var(--r-large);font-family:Georgia,serif}
.tutorial-invite,.tutorial-guide{position:fixed;z-index:1800;width:min(360px,calc(100vw - 32px));max-height:calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom));overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;box-sizing:border-box;border:1px solid var(--chrome-drawer-border);border-radius:var(--r-large);background:var(--chrome-drawer-surface);color:var(--text);box-shadow:0 14px 38px rgba(0,0,0,.35)}
.tutorial-invite{right:calc(18px + var(--safe-right));bottom:calc(18px + var(--safe-bottom));padding:var(--s-3)}
.tutorial-invite strong,.tutorial-guide h2{display:block;margin:0;color:var(--text);font-size:var(--t-figure);line-height:1.25}.tutorial-invite p,.tutorial-guide p{margin:var(--s-2) 0 0;color:var(--muted);font-size:var(--t-body);line-height:1.45}
.tutorial-guide{padding:var(--s-3);max-width:360px}.tutorial-guide-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}.tutorial-progress{color:var(--chrome-text-brand-subtle);font-size:var(--t-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase}.tutorial-icon{flex:0 0 44px;width:44px;height:44px;border:1px solid var(--chrome-border);border-radius:var(--r-large);background:transparent;color:var(--text);font:inherit;font-size:var(--t-title);line-height:1;cursor:pointer}.tutorial-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}.tutorial-actions button{min-height:44px;padding:var(--s-2) var(--s-3);border:1px solid var(--chrome-drawer-border);border-radius:var(--r-small);background:#123b5f;color:#fff;font:inherit;font-size:var(--t-meta);font-weight:650;cursor:pointer}.tutorial-actions .tutorial-quiet,.tutorial-actions .tutorial-link{background:transparent;color:var(--text)}.tutorial-actions .tutorial-link{border-color:transparent;text-decoration:underline}.tutorial-actions button:disabled{opacity:.5;cursor:default}.tutorial-fallback{padding:var(--s-2);border-left:3px solid #c9a24a;background:var(--chrome-drawer-neutral-surface)}#tutorialHighlight{position:fixed;z-index:1750;box-sizing:border-box;border:3px solid var(--chrome-focus-ring-color);border-radius:var(--r-small);outline:2px solid var(--chrome-focus-separation-color);outline-offset:2px;pointer-events:none}.tutorial-help:focus-visible,.tutorial-guide:focus-visible,.tutorial-actions button:focus-visible,.tutorial-icon:focus-visible{outline:2px solid var(--chrome-focus-ring-color);outline-offset:2px}
@media(max-width:560px){.tutorial-help{min-width:44px;padding:var(--s-1);justify-content:center}.tutorial-help-label{display:none}.tutorial-invite{right:calc(10px + var(--safe-right));bottom:calc(10px + var(--safe-bottom));left:calc(10px + var(--safe-left));width:auto;max-height:calc(100dvh - 20px - var(--safe-top) - var(--safe-bottom))}.tutorial-guide.tutorial-guide-bottom{right:calc(10px + var(--safe-right));bottom:calc(10px + var(--safe-bottom));left:calc(10px + var(--safe-left));width:auto;max-width:none;max-height:calc(100dvh - 20px - var(--safe-top) - var(--safe-bottom))}}
@media(max-height:620px){.tutorial-guide,.tutorial-invite{padding:var(--s-2)}.tutorial-invite p,.tutorial-guide p{line-height:1.35}.tutorial-actions{margin-top:var(--s-2)}}
@media(prefers-reduced-motion:reduce){.tutorial-invite,.tutorial-guide,#tutorialHighlight{scroll-behavior:auto;transition:none!important;animation:none!important}}
@media(forced-colors:active){.tutorial-invite,.tutorial-guide{border:2px solid CanvasText}#tutorialHighlight{border-color:Highlight;outline-color:CanvasText}.tutorial-actions button{border:1px solid ButtonText}.tutorial-fallback{border-left-color:Highlight}}

.mode-section[hidden],[data-controls-for][hidden],[data-drawer-mode][hidden]{display:none!important}

/* Only the compact mode bar stays sticky. The full scope/freshness rail sits
   after it in normal scroll flow: on iPad landscape its wrapped labels must not
   cover the evidence below. Scopes and provenance remain available above. */
.panel-head{position:sticky;top:-15px;z-index:4;margin:0 calc(-1 * var(--s-4)) var(--s-1);padding:var(--s-1) var(--s-4) var(--s-2);background:var(--chrome-panel-surface);border-bottom:1px solid var(--chrome-border)}
.mode-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-1);padding:var(--s-1);border:1px solid var(--chrome-border);border-radius:var(--r-small);background:var(--chrome-control-group-surface)}
.mode-btn{display:flex;align-items:center;justify-content:center;gap:var(--s-2);min-height:38px;padding:var(--s-2);border:1px solid transparent;border-radius:var(--r-small);background:transparent;color:var(--chrome-text-metadata);font:inherit;font-size:var(--t-meta);cursor:pointer}
.mode-btn:focus-visible,.scope-rail button:focus-visible,.evidence-link:focus-visible,.evidence-route:focus-visible,.detail-disclosure>summary:focus-visible,.layer-action:focus-visible,.drawer-close:focus-visible,.reading-btn:focus-visible{outline:2px solid var(--chrome-focus-ring-color);outline-offset:2px}
/* The current mode is shown by a filled state, a visible rule AND a check glyph,
   never by colour alone. */
.mode-btn[aria-pressed="true"]{background:#102a43;color:#fff;border-color:rgba(75,175,255,.55);font-weight:700;box-shadow:inset 0 -2px 0 #4bafff}
.mode-btn[aria-pressed="true"] .mode-name:after{content:" ✓"}
.mode-glyph{font-size:var(--t-label)}
.mode-question{margin:var(--s-1) var(--s-1) var(--s-2);font-size:var(--t-micro);line-height:1.35;color:#9aaec4}
/* Focus/scrollIntoView offsets cover the compact mode bar, not the rail. */
.panel{scroll-padding-top:5rem}

/* PLACE quick-jump chips. Hidden by default (desktop and non-PLACE modes); the
   ≤850px rule below reveals them in PLACE only. They scroll the panel to the
   Lens figures / Detail. The type size lives here, never in a @media block. */
.place-jump{display:none;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-1) 0 0}
.place-jump-chip{min-height:44px;padding:var(--s-1) var(--s-3);border:1px solid var(--line2);border-radius:var(--r-small);background:rgba(255,255,255,.05);color:#cfe0f0;font:inherit;font-size:var(--t-micro);cursor:pointer}
.place-jump-chip:before{content:"▾ "}
.place-jump-chip:hover{color:#fff}

.scope-rail{min-width:0;margin:0}
.scope-rail-list{list-style:none;min-width:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-1)}
.scope-rail-list li{min-width:0;max-width:100%}
.scope-rail-list li[data-scope="PLANNING_AMBITO"],#scopeRailList[data-mode="CITY"]>li{grid-column:1/-1}
.scope-rail-item{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"glyph name" "glyph instance";align-content:center;align-items:baseline;column-gap:var(--s-1);row-gap:0;width:100%;min-width:0;max-width:100%;padding:var(--s-1) var(--s-2);border:1px solid var(--line2);border-radius:var(--r-small);background:var(--chrome-card-surface);color:var(--text);font:inherit;font-size:var(--t-micro);line-height:1.2;cursor:pointer;text-align:left;overflow-wrap:anywhere}
.scope-rail-item .scope-glyph{grid-area:glyph;align-self:center;margin:0;font-size:var(--t-meta);line-height:1}
.scope-rail-item .scope-name{grid-area:name;min-width:0;color:var(--muted);font-size:var(--t-meta);font-weight:650;letter-spacing:.02em;text-transform:uppercase;line-height:1.15;overflow-wrap:anywhere}
.scope-rail-item .scope-instance{grid-area:instance;min-width:0;color:var(--text);font-size:var(--t-label);font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2;overflow-wrap:anywhere}
.scope-rail-freshness{display:block;width:100%;min-width:0;margin:var(--s-1) 0 0;padding:var(--s-1) var(--s-2) 0;border:0;border-top:1px solid var(--chrome-divider);background:transparent;color:var(--muted);font:inherit;font-size:var(--t-meta);line-height:1.35;text-align:left;cursor:pointer;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.scope-rail-freshness:hover,.scope-rail-item:hover{border-color:var(--chrome-border);background:var(--chrome-control-group-surface);color:var(--chrome-text-primary)}

.scope-glyph{display:inline-block;margin-right:var(--s-1)}
.metric .scope-glyph{color:#8ba0b7;font-size:var(--t-micro)}
.section-head .evidence-link{margin-left:auto}
.evidence-link{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:1px solid var(--line2);border-radius:50%;background:rgba(255,255,255,.04);color:#cfe0f0;font-family:Georgia,serif;font-style:italic;font-weight:700;font-size:var(--t-meta);cursor:pointer}
.evidence-route-row{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-2) 0 var(--s-1)}
.evidence-route{display:inline-flex;align-items:center;gap:var(--s-2);min-height:34px;padding:var(--s-2) var(--s-3);border:1px solid var(--line2);border-radius:var(--r-small);background:rgba(255,255,255,.04);color:#e6f0fa;font:inherit;font-size:var(--t-micro);cursor:pointer}
.evidence-route-row .area-source-toggle{margin:0}

.detail-disclosure{margin:var(--s-3) 0 0;border:1px solid var(--line);border-radius:var(--r-small);background:rgba(255,255,255,.02)}
.detail-disclosure>summary{display:flex;align-items:center;gap:var(--s-2);min-height:34px;padding:var(--s-2) var(--s-3);cursor:pointer;font-size:var(--t-micro);letter-spacing:.14em;text-transform:uppercase;color:#a9bbcf;font-weight:620;list-style:none}
.detail-disclosure>summary::-webkit-details-marker{display:none}
.detail-disclosure>summary:before{content:"▸";font-size:var(--t-micro);letter-spacing:0}
.detail-disclosure[open]>summary:before{content:"▾"}
.detail-disclosure>*:not(summary){margin-left:var(--s-2);margin-right:var(--s-2)}
.detail-disclosure>*:last-child{margin-bottom:var(--s-2)}
.detail-disclosure .section-head{margin-top:var(--s-2)}
.detail-disclosure .mix{margin-top:var(--s-1)}

.controls-region{margin-top:var(--s-4);padding-top:var(--s-1);border-top:1px solid var(--line)}
.controls-region .lensbar{margin-top:0}
.layer-panel{margin:var(--s-1) 0 var(--s-2) var(--s-1)}
.layer-action{display:block;width:100%;margin:var(--s-1) 0 var(--s-1);padding:var(--s-2);border:1px solid rgba(255,176,74,.25);border-radius:var(--r-small);background:rgba(255,176,74,.06);color:#ffc570;font:inherit;font-size:var(--t-micro);cursor:pointer;text-align:left}
.layer-action:hover{background:rgba(255,176,74,.12)}

/* ONE evidence drawer. Native <dialog>: Escape closes, focus is trapped while it
   is open and returns to the opener. It overlays the panel column on desktop and
   is a bottom sheet on narrow screens. */
.evidence-drawer{position:fixed;margin:0;inset:auto;right:calc(18px + var(--safe-right));top:calc(90px + var(--safe-top));bottom:auto;width:min(460px,calc(100vw - 36px));max-height:calc(100dvh - 108px - var(--safe-top) - var(--safe-bottom));overflow:auto;padding:0 var(--s-3) var(--s-3);border:1px solid var(--chrome-drawer-border);border-radius:var(--r-large);background:var(--chrome-drawer-surface);color:var(--text);box-shadow:0 22px 60px rgba(0,0,0,.55);overscroll-behavior:contain;z-index:2000}
.evidence-drawer::backdrop{background:var(--chrome-drawer-backdrop)}
.evidence-drawer:not([open]){display:none}
.drawer-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);margin:0 calc(-1 * var(--s-3));padding:var(--s-3) var(--s-3) var(--s-2);background:var(--chrome-drawer-surface);border-bottom:1px solid var(--chrome-drawer-divider)}
.drawer-head h2{margin:0;font-size:var(--t-figure);letter-spacing:-.01em}
.drawer-close{min-height:36px;padding:var(--s-2) var(--s-3);border:1px solid var(--chrome-drawer-border);border-radius:var(--r-small);background:var(--chrome-drawer-control-surface);color:#fff;font:inherit;font-size:var(--t-meta);cursor:pointer}
.drawer-tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);margin:var(--s-2) 0 var(--s-1)}
.drawer-reading{display:inline-flex;gap:var(--s-1);padding:var(--s-1);border:1px solid var(--chrome-drawer-divider);border-radius:var(--r-small)}
.reading-btn{min-height:30px;padding:var(--s-1) var(--s-2);border:1px solid transparent;border-radius:var(--r-small);background:transparent;color:#9fb1c5;font:inherit;font-size:var(--t-micro);cursor:pointer}
.reading-btn[aria-pressed="true"]{background:#102a43;color:#fff;border-color:rgba(75,175,255,.5);font-weight:700}
.reading-btn[aria-pressed="true"]:before{content:"✓ "}
.drawer-filter{margin:0;font-size:var(--t-micro);color:#9aaec4}
.drawer-record{margin:var(--s-2) 0 0;padding:var(--s-3);border:1px solid var(--chrome-border);border-radius:var(--r-small);background:var(--chrome-drawer-record-surface)}
.drawer-record>h3{display:flex;align-items:baseline;gap:var(--s-2);margin:0 0 var(--s-1);font-size:var(--t-meta);letter-spacing:0;text-transform:none;color:#e8f1fa}
.drawer-source{margin:var(--s-2) 0 0;padding-top:var(--s-2);border-top:1px solid var(--chrome-divider)}
.drawer-source>h4{margin:0 0 var(--s-1);font-size:var(--t-micro);color:#d2e1f0}
.drawer-fields{display:grid;grid-template-columns:minmax(88px,.42fr) minmax(0,1fr);gap:var(--s-1) var(--s-2);margin:0;font-size:var(--t-micro);line-height:1.4}
.drawer-fields dt{color:#8ba0b7}
.drawer-fields dd{margin:0;color:#dbe7f3;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.drawer-ceiling{margin:var(--s-2) 0 0;padding:var(--s-2);border-left:3px solid #c9a24a;background:var(--chrome-drawer-neutral-surface);font-size:var(--t-micro);line-height:1.45;color:#e6eef6;overflow-wrap:anywhere}
.drawer-ceiling b{display:block;margin-bottom:var(--s-1);font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;color:#c8d7e6}
.drawer-notes{margin:var(--s-4) 0 0}
.drawer-notes>h3{margin:0 0 var(--s-2);font-size:var(--t-micro);letter-spacing:.12em;text-transform:uppercase;color:#8ba0b7}
.drawer-notes .area-source-details{display:flex;flex-direction:column;gap:var(--s-1);margin:0}
.drawer-notes .halo-legend{font-size:var(--t-micro);line-height:1.5;margin:0}
.drawer-notes .source{font-size:var(--t-micro);line-height:1.5;margin:0}
.compare-area-host:empty{display:none}
.compare-area-host .area{margin:var(--s-2) 0 0}

@media(max-width:850px){
  /* On narrow screens the head is the first thing in the flow rather than sticky:
     the panel is only ~42dvh tall and a sticky head would take half of it. It is
     still never hidden. */
  .panel-head{position:static;margin:0 calc(-1 * var(--s-3)) var(--s-1);padding:var(--s-1) var(--s-3)}
  .mode-btn{min-height:36px}
  .mode-question{display:none}
  /* Reveal the PLACE quick-jump chips on narrow screens, in PLACE only. */
  .panel[data-mode="PLACE"] .place-jump{display:flex}
  .panel[data-mode="PLACE"] .place-circle-summary{display:block;margin:0 0 var(--s-2);padding:var(--s-2);border:1px solid rgba(75,175,255,.24);border-radius:var(--r-small);background:rgba(16,42,67,.58)}
  .evidence-drawer{left:calc(10px + var(--safe-left));right:calc(10px + var(--safe-right));top:auto;bottom:calc(10px + var(--safe-bottom));width:auto;max-height:82dvh}
  .detail-disclosure>summary{}
  .header-tools select{min-width:88px;padding:var(--s-1) var(--s-2)}
}
@media(max-width:560px){
  .appearance-control{position:relative;display:block;min-width:88px}
  .appearance-control>span{position:absolute;z-index:1;left:9px;top:5px;max-width:58px;overflow:hidden;color:var(--chrome-text-brand-subtle);line-height:1;letter-spacing:.02em;white-space:nowrap;pointer-events:none}
  #appearanceSelect{min-width:88px;padding:var(--s-4) calc(3 * var(--s-2)) var(--s-1) var(--s-2);line-height:1.1}
  /* Keep territorial scope hints readable beneath long translated headings
     while the adjacent evidence control keeps its real 44px touch target. */
  .area .section-head,.planning .section-head{display:grid;grid-template-columns:minmax(0,1fr) 44px;grid-template-areas:"title evidence" "scope evidence";align-items:center;justify-content:normal;gap:0 var(--s-2)}
  .area .section-head>span,.planning .section-head>span{grid-area:title;min-width:0;overflow-wrap:anywhere}
  .area .section-head>small,.planning .section-head>small{grid-area:scope;white-space:normal;line-height:1.2;overflow-wrap:anywhere}
  .area .section-head>.evidence-link,.planning .section-head>.evidence-link{grid-area:evidence;justify-self:end;margin:0}
  /* Map-first on phones: an explicit 44px control replaces the always-open rail.
     The entire original six-group rail remains reachable when requested. */
  .mobile-layers-button{display:inline-flex}
  /* The planning-ámbito row is full width and its instance is a sentence (the
     explicit absence, "The Lens circle touches no official planning ámbito."), far
     longer than the other instances. The app ships no webfont, so on systems
     without Inter the fallback face is wider and the sentence wraps; stacked under
     its own label that costs a whole extra row. Run the label in with the text so
     the line box is shared and the wrapped sentence uses the full row width. All
     text stays; only the stacking changes. */
  .scope-rail-list li[data-scope="PLANNING_AMBITO"] .scope-rail-item{display:block}
  .scope-rail-list li[data-scope="PLANNING_AMBITO"] .scope-glyph,
  .scope-rail-list li[data-scope="PLANNING_AMBITO"] .scope-name,
  .scope-rail-list li[data-scope="PLANNING_AMBITO"] .scope-instance{display:inline}
  .scope-rail-list li[data-scope="PLANNING_AMBITO"] .scope-glyph,
  .scope-rail-list li[data-scope="PLANNING_AMBITO"] .scope-name{margin-right:var(--s-1)}
  .left{top:calc(125px + var(--safe-top));width:min(240px,calc(100vw - 72px - var(--safe-left) - var(--safe-right)));max-height:min(50vh,400px);max-height:min(50dvh,400px)}
}
@media(max-width:420px){
  /* Phone widths: readable evidence states without changing any canonical value. */
  .place-circle-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scope-rail-item{padding:var(--s-1) var(--s-2)}
  .scope-rail-freshness{}
  .mode-btn{gap:var(--s-1);padding:var(--s-1)}
}
@media(pointer:coarse){
  .mode-btn,.scope-rail-item,.scope-rail-freshness,.evidence-route,.detail-disclosure>summary,.planning-citizen>summary,.planning-source-toggle,.layer-action,.drawer-close,.reading-btn,.header-tools select{min-height:44px}
  .evidence-link{width:44px;height:44px;}
  .reading-btn{min-width:44px}
}

/* ===== VISUAL LANGUAGE K5 (#67) =============================================
   One semantic scale governs every surface. Breakpoints may change layout, but
   never shrink an individual role. The 10px micro token is the absolute floor. */
body{font-size:var(--t-body)}
select,.hospitality-controls select,.header-tools select,.basemap-control select,.map-control select,.stay-filter select,.domestic-origin-controls select{font-size:var(--t-label)}
.title{font-size:var(--t-title)}
.area-value{font-size:var(--t-title)}
.metric-value,.activity-card-value,.area-vut-value,.hospitality-value,.destination-metric-value,.cb-value{font-size:var(--t-figure)}
.drawer-head h2,.destination-place,.hospitality-area-name{font-size:var(--t-title)}
.left h3,.rail-group-copy,.panel h3,.section-head span,.area-value-label,.area-vut-title,.hospitality-field-label,.destination-metric-head,.comparetable thead th,.domestic-origin-table-wrap th,.drawer-fields dt,.drawer-ceiling b,.drawer-notes>h3{font-size:var(--t-label)}
.brand-sub,.area-codes,.area-period,.area-vut-state,.metric-foot,.activity-card-foot,.comparison-mode-cue,.cb-sub,.cb-radius,.di-status,.di-guard,.ss-status,.ss-guard,.destination-period-label,.destination-provisional,.destination-metric-exact,.destination-metric-change,.destination-state,.scope-rail-freshness,.drawer-filter,.drawer-fields dd{font-size:var(--t-meta)}
.area-scope p,.activity-card-note,.evidence-note,.destination-composition,.destination-ceiling,.domestic-origin-universe,.domestic-origin-dynamics-relationship,.comparetable,.domestic-origin-table-wrap table,.drawer-ceiling,.drawer-notes .halo-legend,.drawer-notes .source{font-size:var(--t-body)}
.scope-rail-item,.mode-btn,.detail-disclosure>summary,.evidence-route,.layer-action,.reading-btn,.card-title,.metric-head,.controltop,.domestic-origin-controls{font-size:var(--t-label)}
.source,.layer-source-note,.area-source-details,.compare-evidence,.halo-visibility-note{font-size:var(--t-meta)}
/* UX-C1 analytical reading sizes. Sentences, figures and captions in the three
   comparison surfaces read at 12px (--t-label); tracked uppercase labels, which
   are wider per glyph, at 11px (--t-meta). Scoped by class to these surfaces so
   cartographic and unrelated typography is unchanged. Placed after the earlier
   10/11px declarations (equal or lower specificity) so it owns the cascade. */
.comparison-bridge-empty,.cb-sub,.cb-radius,.cb-qualifier,.cb-picker-button,
.di-status,.di-guard,.di-metric,.di-rel,
.di-item[data-state="withheld"] .di-rel,.di-item[data-state="unavailable"] .di-rel,.di-item[data-state="off"] .di-rel,
.comparison-bridge[data-relationship="withheld"] .cb-rel-value,
.ss-status,.ss-guard,.ss-empty,.ss-notice,.ss-metric,.ss-window-radii,.ss-reading-value,.ss-transition,.ss-transition-detail,.ss-button,
.ss-reading[data-comparable="false"] .ss-reading-value{font-size:var(--t-label)}
.cb-metric-name,.cb-lock,.cb-lens,.cb-rel-label,.decision-insight .di-title,.spatial-sensitivity .ss-title,.ss-window-label,.ss-reading-label{font-size:var(--t-meta)}

/* Four spacing steps describe layout rhythm; geometry-specific measurements
   (map positions, tracks and icon dimensions) intentionally remain explicit. */
.mode-nav,.drawer-reading{gap:var(--s-1);padding:var(--s-1)}
.scope-rail-list,.evidence-route-row,.drawer-tools,.lensbar{gap:var(--s-2)}
.drawer-record,.card,.metric,.controlbox{padding:var(--s-3)}
.panel,.left{border-radius:var(--r-large)}
.mode-nav,.detail-disclosure,.drawer-record,.controlbox,.card,.metric{border-radius:var(--r-small)}
.evidence-drawer{border-radius:var(--r-large)}
.mode-btn,.scope-rail-item,.evidence-route,.layer-action,.drawer-close,.reading-btn,select,.smallbtn{border-radius:var(--r-small)}

/* A single high-contrast focus language covers native and custom application
   controls, including SVG controls exposed through role=button. */
:where(button,select,input,summary,a[href],[role="button"]):focus-visible{
  outline:2px solid var(--chrome-focus-ring-color);
  outline-offset:3px;
  box-shadow:0 0 0 1px var(--chrome-focus-separation-color);
}

@media(pointer:coarse){
  :where(button,select,summary,a[href],[role="button"],input[type="range"],input[type="checkbox"]){min-width:44px;min-height:44px}
  .rail-group>summary{min-height:44px}
  a[href]{display:inline-flex;align-items:center}
  /* Leaflet's legal/source attribution is NOT an application action.
     Do not turn every inline attribution link into a 44px-wide flex box. */
  .leaflet-control-attribution a[href]{display:inline;min-width:0;min-height:0}
  .switch{width:44px;height:44px}
  .switch input{inset:0;width:100%;height:100%}
  .switch span{inset:10px 1px;border-radius:14px}
  .switch span:after{width:20px;height:20px;left:2px;top:2px}
  .switch input:checked+span:after{left:20px}
  .halo-toggle input{flex:0 0 44px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ===================== K10 ámbito comparison (COMPARE second scope) =======
   All sizing uses the K5 tokens: --t-* type scale, --s-* spacing, --r-* radius.
   No judgement colour: a same/different reading is a neutral chip, never a
   direction or a quality hue. Separate from Lens A/B and carries no order,
   progress or judgement. */
.compare-scope-switch{display:flex;gap:var(--s-1);margin:0 0 var(--s-2)}
.compare-scope-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:var(--s-1);
  padding:var(--s-1) var(--s-2);min-height:34px;border:1px solid rgba(160,180,205,.35);border-radius:var(--r-small);
  background:rgba(20,32,48,.4);color:var(--muted);font:inherit;font-size:var(--t-meta);cursor:pointer}
.compare-scope-btn[aria-pressed="true"]{color:var(--text);border-color:rgba(67,215,255,.6);background:rgba(30,52,74,.6)}
#compareLine[data-compare-scope="AMBITO"] .compare-lens-head,
#compareLine[data-compare-scope="AMBITO"] #comparisonRadiusReadout,
#compareLine[data-compare-scope="AMBITO"] #comparisonModeCue,
#compareLine[data-compare-scope="AMBITO"] #comparisonBridge,
#compareLine[data-compare-scope="AMBITO"] #decisionInsight,
#compareLine[data-compare-scope="AMBITO"] #compareDetail{display:none}
#compareLine:not([data-compare-scope="AMBITO"]) #ambitoCompare{display:none}

.ambito-compare{margin-top:var(--s-1)}
.ambito-pick{display:flex;gap:var(--s-2);margin:var(--s-1) 0}
.ambito-pick-field{flex:1;display:flex;align-items:center;gap:var(--s-1);font-size:var(--t-meta)}
.ambito-pick-tag{width:18px;height:18px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-small);font-weight:700;font-size:var(--t-micro);color:#07202f}
.ambito-pick-tag.ac-a{background:var(--ta3-bridge-a-tag-background);color:var(--ta3-bridge-a-tag-text)}
.ambito-pick-tag.ac-b{background:var(--ta3-bridge-b-tag-background);color:var(--ta3-bridge-b-tag-text);border:1px dashed var(--ta3-bridge-b-outline)}
.ambito-select{flex:1;min-width:0;min-height:32px;background:rgba(14,24,38,.75);color:var(--text);
  border:1px solid rgba(160,180,205,.35);border-radius:var(--r-small);font:inherit;font-size:var(--t-meta);padding:var(--s-1) var(--s-1)}
.ambito-pick-hint{font-size:var(--t-micro);color:var(--text-meta);margin:var(--s-1) 0 var(--s-2)}
.ambito-refusal{font-size:var(--t-meta);color:var(--text);background:rgba(74,52,30,.5);border:1px solid rgba(220,160,90,.5);
  border-radius:var(--r-small);padding:var(--s-2) var(--s-2);margin:var(--s-1) 0}

.ambito-identities{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);margin:var(--s-1) 0 var(--s-2)}
.ambito-id{border:1px solid rgba(160,180,205,.3);border-radius:var(--r-small);padding:var(--s-2) var(--s-2);display:flex;flex-direction:column;gap:var(--s-1)}
.ambito-id.ac-a{border-left:3px solid var(--ta3-bridge-a-graphic)}
.ambito-id.ac-b{border-left:3px dashed var(--ta3-bridge-b-graphic)}
.ambito-id-tag{font-size:var(--t-micro);font-weight:700;letter-spacing:.08em;color:var(--text-meta)}
.ambito-id-code{font-size:var(--t-label);color:var(--text)}
.ambito-id-denom{font-size:var(--t-micro);color:var(--muted);overflow-wrap:anywhere}
.ambito-id-date{font-size:var(--t-micro);color:var(--text-meta)}
.ambito-sub{font-size:var(--t-micro);letter-spacing:.07em;text-transform:uppercase;color:var(--text-meta);margin:var(--s-2) 0 var(--s-1);font-weight:600}

.ambito-cat-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-1)}
.ambito-cat-item{display:grid;grid-template-columns:1fr auto;gap:var(--s-1) var(--s-2);align-items:baseline;
  border:1px solid rgba(160,180,205,.22);border-radius:var(--r-small);padding:var(--s-1) var(--s-2)}
.ambito-cat-field{font-size:var(--t-meta);color:var(--text)}
.ambito-cat-values{font-size:var(--t-micro);color:var(--muted);grid-column:1;overflow-wrap:anywhere}
.ambito-cat-values b{color:var(--text);font-weight:600}
.ambito-rel{justify-self:end;font-size:var(--t-micro);letter-spacing:.04em;padding:var(--s-1) var(--s-2);border-radius:var(--r-small);
  border:1px solid rgba(160,180,205,.4);color:var(--muted);white-space:nowrap}
.ambito-rel[data-relation="DIFFERENT"]{border-style:dashed}

.ambito-qty-wrap{overflow-x:auto}
.ambito-qty{width:100%;border-collapse:collapse;font-size:var(--t-micro)}
.ambito-qty th,.ambito-qty td{text-align:right;padding:var(--s-1) var(--s-1);border-bottom:1px solid rgba(160,180,205,.18)}
.ambito-qty th:first-child,.ambito-qty td:first-child{text-align:left}
.ambito-qty thead th{color:var(--text-meta);font-weight:600;font-size:var(--t-micro)}
.ambito-qty td.ambito-withheld{color:var(--text-meta);font-style:italic;text-align:left}

.ambito-scale-note{font-size:var(--t-micro);color:var(--text-meta);margin:var(--s-1) 0 var(--s-2);
  line-height:1.45;border-left:2px solid rgba(160,180,205,.35);padding-left:var(--s-2)}
.ambito-radius-note{font-size:var(--t-micro);color:var(--text-meta);margin:var(--s-2) 0 var(--s-1);
  border-left:2px solid rgba(160,180,205,.35);padding-left:var(--s-2)}
.ambito-edition{margin-top:var(--s-1)}
.ambito-edition summary{font-size:var(--t-meta);cursor:pointer;color:var(--text)}
.ambito-edition-lead{font-size:var(--t-micro);color:var(--text-meta);margin:var(--s-1) 0}
.ambito-edition-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-1)}
.ambito-edition-item{display:flex;justify-content:space-between;gap:var(--s-2);font-size:var(--t-micro);color:var(--muted)}
.ambito-edition-item .aei-metric{color:var(--text)}
.ambito-guard{font-size:var(--t-micro);color:var(--text-meta);margin-top:var(--s-2);font-style:italic}

@media(max-width:560px){
  .ambito-identities{grid-template-columns:1fr}
  .ambito-pick{flex-direction:column}
}

/* Coarse pointers get a 44px target on the K10 controls (K5 touch-target rule). */
@media(pointer:coarse){
  .compare-scope-btn{min-height:44px}
  .ambito-select{min-height:44px}
}

/* K10 ámbito Bridge, Decision Insight, within-metric bars, dates (K5 tokens). */
.ambito-metric-focus{background:none;border:0;padding:0;margin:0;font:inherit;
  color:inherit;text-align:left;cursor:pointer;border-bottom:1px dotted transparent}
.ambito-metric-focus:hover,.ambito-metric-focus:focus-visible{border-bottom-color:var(--chrome-focus-inline-indicator-color);outline:none}
.ambito-metric-focus[aria-pressed="true"]{color:var(--text);border-bottom-color:var(--b)}
.ambito-reason{color:var(--text-meta);font-size:var(--t-micro);font-style:italic}

.ambito-bridge{border:1px solid rgba(160,180,205,.3);border-radius:var(--r-small);padding:var(--s-2) var(--s-2);margin:var(--s-1) 0 var(--s-2)}
.ambito-bridge-empty{font-size:var(--t-micro);color:var(--text-meta);margin:0}
.ambito-bridge-reading{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-1) var(--s-2);font-size:var(--t-meta)}
.ab-metric{font-weight:600;color:var(--text)}
.ab-lock{font-size:var(--t-micro);color:var(--text-meta);text-transform:uppercase;letter-spacing:.06em}
.ab-side{color:var(--muted)}
.ab-rel{color:var(--text)}
.ab-qual{font-size:var(--t-micro);color:var(--text-meta);flex-basis:100%}

.ambito-qty-dates{font-size:var(--t-micro);color:var(--text-meta);margin:0 0 var(--s-1)}
.ambito-scale-cell{text-align:left;min-width:64px}
.ambito-bars{display:flex;flex-direction:column;gap:var(--s-1)}
.ambito-bar-track{display:block;height:5px;background:rgba(160,180,205,.18)}
.ambito-bar-track.ac-a .ambito-bar-fill{background:var(--ta3-bridge-a-graphic)}
.ambito-bar-track.ac-b .ambito-bar-fill{background:var(--ta3-bridge-b-graphic)}
.ambito-bar-fill{display:block;height:100%}

.ambito-insight{margin:var(--s-2) 0 0}
.ambito-insight-items{list-style:none;margin:var(--s-1) 0;padding:0;display:flex;flex-direction:column;gap:var(--s-1)}
.ambito-insight-item{display:flex;justify-content:space-between;gap:var(--s-2);font-size:var(--t-micro);color:var(--muted)}
.ambito-insight-item .aii-metric{color:var(--text)}
.ambito-guard-di{font-size:var(--t-micro);color:var(--text-meta);font-style:italic;margin:var(--s-1) 0 0}
.ambito-edition-note{font-size:var(--t-micro);color:var(--text-meta);margin:var(--s-1) 0}
.aei-metric{color:var(--text)}

/* ===================================================================== K11 ==
   Share & export (#73). Share and Export live in the Evidence & limits drawer,
   next to the provenance they make portable; a page-level notice reports a
   partial or refused restore. Reuses the existing tokens and visual language —
   no new design system. */
.drawer-share{margin:var(--s-2) 0 var(--s-1);padding:var(--s-3);border:1px solid var(--chrome-drawer-divider);border-radius:var(--r-small);background:var(--chrome-drawer-share-surface)}
.drawer-share-title{margin:0 0 var(--s-1);font-size:var(--t-label);letter-spacing:.02em;color:var(--text)}
.drawer-share-lede{margin:0 0 var(--s-2);font-size:var(--t-meta);color:var(--muted)}
.drawer-share-actions{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.drawer-action{min-height:36px;padding:var(--s-2) var(--s-3);border:1px solid var(--chrome-drawer-border);border-radius:var(--r-small);background:rgba(16,42,67,.9);color:#fff;font:inherit;font-size:var(--t-meta);cursor:pointer}
.drawer-action:hover{background:#15344f}
.drawer-action:disabled{opacity:.55;cursor:default}
.drawer-action:focus-visible,.k11-notice-dismiss:focus-visible{outline:2px solid var(--chrome-focus-ring-color);outline-offset:2px}
.drawer-share-status{margin:var(--s-2) 0 0;font-size:var(--t-meta);color:var(--muted);min-height:1.2em}
.drawer-share-status[data-tone="ok"]{color:#8fe3bf}
.drawer-share-status[data-tone="error"]{color:#ff9bb0}

.k11-notice{position:fixed;left:50%;transform:translateX(-50%);top:calc(var(--safe-top) + 10px);z-index:1200;max-width:min(560px,calc(100vw - 24px));display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-3);border:1px solid rgba(255,176,74,.55);border-radius:var(--r-small);background:var(--panel);box-shadow:0 8px 24px rgba(0,0,0,.45)}
.k11-notice[hidden]{display:none}
.k11-notice-title{display:block;font-size:var(--t-label);color:#ffd9a6}
.k11-notice-message{margin:var(--s-1) 0 0;font-size:var(--t-meta);color:var(--text);line-height:1.4}
.k11-notice-dismiss{flex:0 0 auto;min-width:32px;min-height:32px;border:1px solid var(--line2);border-radius:var(--r-small);background:rgba(255,255,255,.06);color:#fff;font-size:var(--t-figure);line-height:1;cursor:pointer}
@media(max-width:420px){
  .k11-notice{left:12px;right:12px;transform:none;max-width:none}
  .drawer-share-actions .drawer-action{flex:1 1 auto}
}
/* K5 touch targets (gate §12). Declared AFTER the base .drawer-action rule so the
   coarse-pointer minimum wins the source-order tie. */
@media(pointer:coarse){
  .drawer-action,.k11-notice-dismiss{min-height:44px}
}
.k11-export-link{display:inline-block;margin:var(--s-1) var(--s-2) 0 0;font-size:var(--t-meta);color:#9bd5ff;text-decoration:underline}

/* Appearance theme. The runtime always resolves System to one of these two
   concrete values before paint. Evidence/category and basemap-owned colours
   remain outside this surface system. */
:root[data-appearance="light"]{
  color-scheme:light;
  --bg:#f4f6f9;
  --panel:rgba(255,255,255,.96);
  --panel2:rgba(247,249,252,.96);
  --line:rgba(22,34,47,.14);
  --line2:rgba(22,34,47,.26);
  --text:#16222f;
  --muted:#445468;
  --text-meta:#526277;
  --chrome-page-background:#f4f6f9;
  --chrome-header-surface:rgba(255,255,255,.96);
  --chrome-panel-surface:rgba(255,255,255,.96);
  --chrome-card-surface:#f8fafc;
  --chrome-control-group-surface:#eef2f6;
  --chrome-form-surface:#fff;
  --chrome-text-primary:#16222f;
  --chrome-text-metadata:#445468;
  --chrome-text-brand-subtle:#445468;
  --chrome-text-section:#526277;
  --chrome-text-control-label:#526277;
  --chrome-text-control-value:#16222f;
  --chrome-text-control-caption:#445468;
  --chrome-text-control-strong:#16222f;
  --chrome-text-card-title:#445468;
  --chrome-border:rgba(22,34,47,.16);
  --chrome-mobile-control-border:#9aa7b5;
  --chrome-mobile-control-surface:#fff;
  --chrome-mobile-control-text:#16222f;
  --chrome-mobile-control-open-border:#123b5f;
  --chrome-mobile-control-open-surface:#e5edf5;
  --chrome-divider:rgba(22,34,47,.11);
  --chrome-drawer-surface:#fff;
  --chrome-drawer-border:rgba(22,34,47,.22);
  --chrome-drawer-control-surface:#eef2f6;
  --chrome-drawer-record-surface:#f8fafc;
  --chrome-drawer-neutral-surface:#f2f4f7;
  --chrome-drawer-share-surface:#f4f7fa;
  --chrome-drawer-backdrop:rgba(18,32,47,.34);
  --chrome-drawer-provenance-divider:rgba(22,34,47,.12);
  --chrome-drawer-edition-border:rgba(22,34,47,.2);
  --chrome-focus-ring-color:#075f9a;
  --chrome-focus-separation-color:#fff;
  --chrome-focus-ring-subtle-color:#075f9a;
  --chrome-focus-inline-indicator-color:#075f9a;
  --map-fallback-surface:#f4f6f9;
  --map-attribution-surface:rgba(255,255,255,.92);
  --map-attribution-text:#445468;
  --map-attribution-link:#0a63c7;
  --map-zoom-surface:#fff;
  --map-zoom-text:#16222f;
  --map-zoom-edge:#74808e;
  --map-zoom-hover-surface:#f2f4f7;
  --map-zoom-disabled-text:#667586;
  --map-zoom-disabled-opacity:1;
  --map-zoom-shadow:0 8px 24px rgba(16,24,34,.18);
  --map-tooltip-surface:rgba(255,255,255,.96);
  --map-tooltip-text:#16222f;
  --map-tooltip-edge:#74808e;
  --map-tooltip-arrow:#74808e;
  --map-tooltip-shadow:0 10px 28px rgba(16,24,34,.18);
  --map-label-surface:rgba(255,255,255,.94);
  --map-label-text:#16222f;
  --map-label-edge:#74808e;
  --map-label-shadow:0 6px 18px rgba(16,24,34,.16);
  --map-label-b-edge:#00718f;
  --map-cluster-surface:#fff;
  --map-cluster-edge:#0b1220;
  --map-cluster-halo:#ffffff;
  --map-cluster-text:#16222f;
  --map-label-b-text:#00718f;
  --ta3-badge-neutral-text:#16222f;
  --ta3-badge-neutral-background:#f2f4f7;
  --ta3-badge-neutral-border:#c7ced7;
  --ta3-lens-a-text:#123b5f;
  --ta3-lens-a-area-text:#123b5f;
  --ta3-lens-a-control-text:#123b5f;
  --ta3-lens-a-control-background:#fff;
  --ta3-lens-a-control-border:#123b5f;
  --ta3-lens-b-text:#00718f;
  --ta3-lens-b-control-text:#00718f;
  --ta3-lens-b-control-background:#fff;
  --ta3-lens-b-control-border:#0098c0;
  --ta3-bridge-a-graphic:#123b5f;
  --ta3-bridge-a-tag-background:#fff;
  --ta3-bridge-a-tag-text:#123b5f;
  --ta3-bridge-b-graphic:#0098c0;
  --ta3-bridge-b-outline:#0098c0;
  --ta3-bridge-b-tag-background:#fff;
  --ta3-bridge-b-tag-text:#00718f;
  /* Tile-dependent marker and halo colours remain the shipped values because
     #0098c0 has not passed a per-pixel gate across all three basemaps. */
}
:root[data-appearance="dark"]{color-scheme:dark}

/* Complete Light application chrome. These rules change product surfaces and
   type only; map markers, halos, category dots and LENS_BASEMAP_STYLES retain
   their independent scientific/cartographic ownership. */
:root[data-appearance="light"] header,
:root[data-appearance="light"] .left,
:root[data-appearance="light"] .panel{box-shadow:0 14px 38px rgba(25,42,60,.15)}
:root[data-appearance="light"] .evidence-drawer{box-shadow:0 22px 60px rgba(25,42,60,.22)}
:root[data-appearance="light"] .panel::-webkit-scrollbar-thumb{background:#a6b2bf}
:root[data-appearance="light"] .skip-link:focus{background:#fff;color:#16222f}

/* Light colours are assigned by semantic role. Avoid descendant-wide colour
   floors: they erase consumer-owned A/B, availability and withholding states. */
:root[data-appearance="light"] .live{color:#17663f;border-color:#6da88b;background:#edf8f2}
:root[data-appearance="light"] .live i{background:#17663f;box-shadow:none}
:root[data-appearance="light"] .live.mixed{color:#6b450b;border-color:#b68a4c;background:#fff8ec}
:root[data-appearance="light"] .live.mixed i{background:#8a5a12;box-shadow:none}

:root[data-appearance="light"] :where(.section-head span,.section-head small,.area-context,.area-codes,.area-value-label,.area-period,.area-scope p,.area-vut-title,.area-vut-unit,.area-vut-secondary,.area-vut-state,.area-other,.area-other-lens,.area-source-details,.area-source-group-title,.planning-code-label,.planning-distinction,.planning-edition,.planning-outside,.planning-block-head,.planning-block-note,.planning-absent,.planning-phase-field,.planning-phase-note,.planning-attributes dt,.planning-scope-note,.planning-situacion,.planning-use-label,.planning-use-unit,.planning-citizen>p,.planning-ceiling,.planning-change-intro,.planning-change-scope,.planning-change-dates span,.planning-change-numeric-values small,.planning-change-values>span:first-child,.planning-change-values small,.planning-change-detail,.planning-change-caveat,.planning-change-provenance-edition,.drawer-change-edition>p,.planning-touched,.planning-touched-centre,.planning-membership-chip-name,.lic-block-head,.lic-state,.lic-window-field,.lic-window-applied,.lic-window-clamped,.lic-family-head,.lic-family-name,.lic-family-unit,.lic-coverage-line,.lic-unmatched-line,.lic-residual,.lic-ceiling-line,.lic-citizen summary,.lic-citizen p,.lic-provenance summary,.lic-provenance p,.cmp-evidence,.compare-evidence,.halo-visibility-note,.destination-period-label,.destination-metric-head,.destination-metric-exact,.destination-metric-change,.destination-composition,.destination-state,.destination-ceiling,.domestic-origin-scope,.domestic-origin-universe,.domestic-origin-dynamics-relationship,.domestic-origin-dynamics-table-heading,.source,.mode-question,.scope-instance,.scope-rail-freshness,.metric .scope-glyph,.detail-disclosure>summary,.drawer-filter,.drawer-fields dt,.drawer-notes>h3,.k11-notice-message,.cb-sub,.cb-radius,.cb-rel-label,.cb-qualifier,.di-status,.di-metric,.di-guard,.ss-status,.ss-empty,.ss-notice,.ss-window-label,.ss-reading-label,.ss-transition-detail,.ss-guard){color:var(--muted)}
:root[data-appearance="light"] :where(.planning-denomination,.planning-code,.planning-phase-value,.planning-phase-mark,.planning-attributes dd,.planning-use-value,.planning-citizen>summary,.planning-change>summary,.planning-change-analyst>summary,.planning-change-dates strong,.planning-change-outcome h3,.planning-build-comparison h3,.planning-change-analyst h3,.planning-change-label,.planning-change-numeric-values,.planning-change-cell strong,.planning-change-provenance-edition strong,.planning-touched-code,.planning-membership-count,.lic-family-count,.cmp-value,.cb-metric-name,.cb-value,.cb-rel-value,.di-rel,.ss-window-radii,.ss-metric,.ss-reading-value,.ss-transition,.comparetable td:last-child,.destination-place,.destination-metric-value,.domestic-origins-head,.domestic-origin-dynamics-summary b,.domestic-origin-dynamics-transitions summary,.scope-rail-item,.evidence-link,.evidence-route,.drawer-record>h3,.drawer-source>h4,.drawer-fields dd,.drawer-ceiling,.drawer-ceiling b){color:var(--text)}
/* UX-C1 focused analytical rows. These are deliberately NOT inside :where():
   :where() contributes zero specificity, so the Dark focused rules
   (.di-item[data-focused="true"] .di-metric = 0,3,0) outranked the Light
   override (:root[...] :where(...) = 0,2,0) and left near-white Dark
   foregrounds on this pale Light surface. Each selector below is 0,5,0, and the
   focused rules sit BEFORE the withheld/unavailable/OFF rules (also 0,5,0) so a
   non-comparable focused row keeps its quieter evidence-strength colour.
   Focus is carried by the surface and a 3px edge as well as by colour. */
:root[data-appearance="light"] .di-item,
:root[data-appearance="light"] .ss-item{border-left-width:3px}
:root[data-appearance="light"] .di-item[data-focused="true"],
:root[data-appearance="light"] .ss-item[data-focused="true"]{background:#e8f1f8;border-left-color:#075f9a}
:root[data-appearance="light"] .di-item[data-focused="true"] .di-metric,
:root[data-appearance="light"] .di-item[data-focused="true"] .di-rel,
:root[data-appearance="light"] .ss-item[data-focused="true"] .ss-metric,
:root[data-appearance="light"] .ss-item[data-focused="true"] .ss-transition{color:#123b5f}
:root[data-appearance="light"] .comparison-bridge[data-relationship="withheld"] .cb-rel-value,
:root[data-appearance="light"] .di-item[data-state="withheld"] .di-rel,
:root[data-appearance="light"] .di-item[data-state="unavailable"] .di-rel,
:root[data-appearance="light"] .di-item[data-state="off"] .di-rel,
:root[data-appearance="light"] .ss-reading[data-comparable="false"] .ss-reading-value{color:#526275}
/* "Locked" is a bordered state pill; Dark's pale blue has no Light override. */
:root[data-appearance="light"] .cb-lock{color:#0b4f80;border-color:#5f8fb3}

/* Legacy surface roles with Dark literals. Each selector names the consuming
   component so status and identity descendants can continue to own colour. */
:root[data-appearance="light"] :where(.layer-source-note,.rail-group-note,#placeCircleSummaryRadius,.place-circle-reading>span,.place-circle-reading>small,.area-source-toggle,.planning-source-toggle,.metric-head span,.metric-foot,.mixrow,.nearest li,.reading-btn,.comparison-radius-readout,.comparison-mode-cue,.comparison-bridge-empty,.halo-toggle span,.halo-toggle small,.halo-legend,.destination-provisional,.domestic-origin-controls label,.domestic-origin-dynamics-transitions div>span){color:var(--muted)}
:root[data-appearance="light"] .place-circle-summary-head>#placeCircleSummaryRadius{color:var(--muted)}
:root[data-appearance="light"] :where(.layer-source-note b,.place-circle-summary-head>span:first-child,.place-circle-reading>strong,.mixrow b,.drawer-change-provenance h5,.drawer-change-edition h6,.area-other-body b,.decision-insight .di-title,.spatial-sensitivity .ss-title){color:var(--text)}
:root[data-appearance="light"] .comparetable th,
:root[data-appearance="light"] .comparetable td{color:var(--muted)}
:root[data-appearance="light"] .comparetable th .cmp-metric-focus,
:root[data-appearance="light"] .comparetable td:last-child,
:root[data-appearance="light"] .comparetable .panel-only-metric th{color:var(--text)}
:root[data-appearance="light"] .domestic-origin-dynamics-transitions summary,
:root[data-appearance="light"] .domestic-origin-dynamics-transitions summary *{color:var(--text)}
:root[data-appearance="light"] .domestic-origin-dynamics-summary span{color:var(--muted)}
:root[data-appearance="light"] .mix-label,
:root[data-appearance="light"] .layer-action{color:#6b450b}
:root[data-appearance="light"] .lensbtn.a{color:var(--ta3-lens-a-control-text);border-color:var(--ta3-lens-a-control-border)}
:root[data-appearance="light"] .lensbtn.b{color:var(--ta3-lens-b-control-text);border-color:var(--ta3-lens-b-control-border)}

:root[data-appearance="light"] :where(.area-figure,.area-vut,.area-source-details,.planning-block,.planning-citizen,.planning-change,.planning-change-outcome,.planning-change-numeric-row,.planning-membership,.planning-membership-chip,.lic-window,.lic-family,.metric,.card,.ss-item,.destination-metric,.domestic-origin-dynamics-summary>div,.domestic-origin-dynamics-transitions details,.detail-disclosure){background:var(--chrome-card-surface);border-color:var(--chrome-border)}
:root[data-appearance="light"] :where(.rail-group>summary,.place-jump-chip,.scope-rail-item,.evidence-link,.evidence-route){background:#f2f5f8;border-color:var(--line2);color:var(--text)}
:root[data-appearance="light"] .rail-group[open]>summary{background:#e8f1f8;border-color:#6791ad}
:root[data-appearance="light"] .rail-group-badge{background:#eef2f6;border-color:#c4cdd6;color:#445468}
:root[data-appearance="light"] :where(.stay-filter,.layer,.activity-divider,.context-divider,.research-divider,.administrative-divider,.planning-change-dates,.planning-build-comparison,.planning-change-cell,.planning-change-analyst,.domestic-origins,.domestic-origin-dynamics,.domestic-origin-table-wrap th,.domestic-origin-table-wrap td,.comparetable th,.comparetable td,.ss-guard,.cb-rel){border-color:var(--chrome-divider)}

:root[data-appearance="light"] :where(select,input[type="date"],.hospitality-select-wrap,.ambito-select){background:#fff;color:#16222f;border-color:#9aa7b5}
:root[data-appearance="light"] select option{background:#fff;color:#16222f}
:root[data-appearance="light"] .header-tools select option:disabled{color:#5b6b7c}
:root[data-appearance="light"] .switch span{background:#b7c1cc}
:root[data-appearance="light"] .switch span:after{background:#fff;box-shadow:0 1px 3px rgba(22,34,47,.28)}
:root[data-appearance="light"] .switch input:checked+span{background:#176589}
:root[data-appearance="light"] .switch input:checked+span:after{background:#fff}
:root[data-appearance="light"] .mode-btn[aria-pressed="true"],
:root[data-appearance="light"] .reading-btn[aria-pressed="true"]{background:#123b5f;color:#fff;border-color:#123b5f;box-shadow:inset 0 -2px 0 #0098c0}
:root[data-appearance="light"] .mode-btn[aria-pressed="true"] *,
:root[data-appearance="light"] .reading-btn[aria-pressed="true"] *{color:#fff}
:root[data-appearance="light"] :where(.drawer-close,.drawer-action,.k11-notice-dismiss){background:#123b5f;color:#fff;border-color:#123b5f}
:root[data-appearance="light"] .evidence-drawer .drawer-close,
:root[data-appearance="light"] .evidence-drawer .drawer-action,
:root[data-appearance="light"] .k11-notice .k11-notice-dismiss{color:#fff}
:root[data-appearance="light"] :where(.drawer-close,.drawer-action,.k11-notice-dismiss) *{color:#fff}
:root[data-appearance="light"] .drawer-action:hover{background:#0d304e}
:root[data-appearance="light"] .panel .abstain{color:#445468!important}
:root[data-appearance="light"] .smallbtn{background:#fff;color:#16222f;border-color:#9aa7b5}
:root[data-appearance="light"] .compare-scope-btn{background:#f2f5f8;color:#445468;border-color:#aab5c0}
:root[data-appearance="light"] .compare-scope-btn[aria-pressed="true"]{background:#e5edf5;color:#123b5f;border-color:#123b5f}
:root[data-appearance="light"] .cb-picker-button{background:#f2f5f8;color:#445468;border-color:#aab5c0}
:root[data-appearance="light"] .cb-picker-button[aria-pressed="true"]{background:#123b5f;color:#fff;border-color:#123b5f}
:root[data-appearance="light"] .ambito-refusal{background:#fff6ea;color:#5d431d;border-color:#c18b3f}
:root[data-appearance="light"] .ss-button{background:#e7f1f8;color:#123b5f;border-color:#7ca5c0}
:root[data-appearance="light"] .ss-button-quiet{background:#f2f4f7;color:#445468;border-color:#b4bec8}
:root[data-appearance="light"] .cmp-metric-focus{text-decoration-color:#63788d}
:root[data-appearance="light"] .cmp-metric-focus[aria-pressed="true"]{color:#123b5f;text-decoration-color:#075f9a}
:root[data-appearance="light"] .halo-metric-row-focused th,
:root[data-appearance="light"] .halo-metric-row-focused td{background:#ddecf6;color:#16222f!important}
:root[data-appearance="light"] .panel[data-mode="PLACE"] .place-circle-summary{background:#eaf2f8;border-color:#6d94ad}
:root[data-appearance="light"] .domestic-origin-table-wrap th{background:#eef2f6;color:#445468}
:root[data-appearance="light"] .k11-notice{background:#fff;border-color:#b27b2d;box-shadow:0 8px 24px rgba(25,42,60,.18)}
:root[data-appearance="light"] .k11-notice-title{color:#68430e}
:root[data-appearance="light"] .source a,
:root[data-appearance="light"] .k11-export-link{color:#075f9a}
:root[data-appearance="light"] .admin-active-pane .planning-ambito-label,
:root[data-appearance="light"] .planning-ambito-label{background:rgba(255,255,255,.94);color:#16222f}
:root[data-appearance="light"] .badge.register,
:root[data-appearance="light"] .badge.licence,
:root[data-appearance="light"] .badge.planning-scope-badge,
:root[data-appearance="light"] .badge.observed,
:root[data-appearance="light"] .badge.statistics,
:root[data-appearance="light"] .badge.model,
:root[data-appearance="light"] .badge.snapshot{
  color:var(--ta3-badge-neutral-text);
  background:var(--ta3-badge-neutral-background);
  border-color:var(--ta3-badge-neutral-border);
}
:root[data-appearance="light"] .lensbtn.active.a{border-style:solid}
:root[data-appearance="light"] .lensbtn.active.b{border-style:dashed}
:root[data-appearance="light"] .ambito-pick-tag.ac-a{border:1px solid var(--ta3-bridge-a-graphic)}
:root[data-appearance="light"] .ambito-pick-tag.ac-b{border:1px dashed var(--ta3-bridge-b-graphic)}
:root[data-appearance="light"] .ambito-id.ac-a .ambito-id-tag,
:root[data-appearance="light"] .ab-side.ac-a{color:var(--ta3-lens-a-text)}
:root[data-appearance="light"] .ambito-id.ac-b .ambito-id-tag,
:root[data-appearance="light"] .ab-side.ac-b{color:var(--ta3-lens-b-text)}
:root[data-appearance="light"] :where(.cb-side-a .cb-lens,.area-other-lens-a){color:var(--ta3-lens-a-text)}
:root[data-appearance="light"] :where(.cb-side-b .cb-lens,.area-other-lens-b,.area-label-b b){color:var(--ta3-lens-b-text)}
:root[data-appearance="light"] .panel .cb-side-a .cb-lens{color:var(--ta3-lens-a-text)}
:root[data-appearance="light"] .panel .cb-side-b .cb-lens{color:var(--ta3-lens-b-text)}
/* UX map-shell P1: keep map-first controls spatially separate rather than
   shrinking touch targets or hiding the two persisted user preferences.
   Appearance/basemap are still independent; all map credits remain visible. */
@media(min-width:681px) and (max-width:1100px){
  .brand{min-width:0;flex:0 1 auto}
  .brand-sub{display:none}
  .brand-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .header-tools{flex:0 0 auto}
}
@media(max-width:680px){
  :root{--header-bottom:calc(9px + 114px + var(--safe-top));--header-bottom-floor:calc(9px + 114px + var(--safe-top))}
  /* The full product name owns row one; layer and preference tools own row two.
     The native selects remain keyboard/screen-reader reachable and 44px tall. */
  header{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:44px 44px;gap:var(--s-2);align-items:start;min-height:0;height:auto}
  .brand{grid-row:1;min-height:44px;box-sizing:border-box;min-width:0;max-width:100%;gap:var(--s-1);padding:var(--s-2)}
  .brand-title{white-space:normal;overflow:visible;text-overflow:clip}
  .brand-sub{display:none}
  .header-tools{grid-row:2;justify-self:end;margin-left:0;gap:var(--s-2);max-width:100%;padding-left:0;border-left:0}
  .appearance-control{position:static;display:flex;align-items:center;gap:var(--s-1);min-width:0}
  .appearance-control>span{display:none}
  .appearance-control:before{content:"◐";color:var(--chrome-text-brand-subtle)}
  .header-tools select{min-height:44px;padding:var(--s-2) var(--s-1)}
  #appearanceSelect{width:78px;min-width:0;padding:var(--s-2) var(--s-1);line-height:1.3}
  #languageSelect{width:88px;min-width:0}
  .tutorial-help{min-width:44px;width:44px;min-height:44px;justify-content:center;padding:var(--s-1)}
  .tutorial-help-label{display:none}
  .left{top:calc(var(--header-chrome-top) + 10px)}
  .leaflet-top.leaflet-left{top:calc(var(--header-chrome-top) + 10px);left:auto;right:calc(10px + var(--safe-right))}
  .leaflet-bottom.leaflet-right{top:calc(var(--header-chrome-top) + 114px);bottom:auto;left:auto;right:calc(10px + var(--safe-right))}
  .leaflet-control-attribution{max-width:min(220px,calc(100vw - 20px - var(--safe-left) - var(--safe-right)));line-height:1.3;text-align:right}
}
@media(max-width:560px){
  /* Layers is a compact map control on the same row as the zoom control, 10px
     below the header's real bottom edge; the opened rail hangs beneath it. */
  .left{top:calc(var(--header-chrome-top) + 10px + 44px + var(--s-2))}
}
@media(max-width:360px){
  /* In the narrowest phone only the Layers glyph is visible; its accessible
     aria-label is still the localized full action name. */
  .mobile-layers-button{width:44px;min-width:44px}
  .mobile-layers-button>span:last-child{display:none}
}
@media(max-width:680px) and (max-height:480px){
  /* Embedded/landscape browsers need a compact horizontal zoom rail and
     independent legal credits, instead of stacking both above the panel. */
  .leaflet-control-zoom{display:flex;flex-direction:row}
  .leaflet-control-zoom a{border-bottom:0!important}
  .leaflet-control-zoom a+a{border-left:1px solid var(--map-zoom-edge)!important}
  /* In short landscape viewports the left rail is still present above
     560px: credits belong below the right-aligned horizontal zoom, not
     over that rail. */
  .leaflet-bottom.leaflet-right{top:calc(var(--header-chrome-top) + 69px);left:auto;right:calc(10px + var(--safe-right))}
  .leaflet-control-attribution{max-width:min(220px,calc(100vw - 112px - var(--safe-left) - var(--safe-right)));text-align:right}
  .panel{max-height:30vh;max-height:30dvh}
}
:root[data-appearance="light"] .scope-rail-item .scope-instance{color:var(--text)}

/* ------------------------------------------------- M1 unified place finder
   A compact institutional control in the header plus an OVERLAY anchored under
   it. The overlay is absolutely positioned and is NOT a child of the header's
   flex/grid flow, so opening it can never widen the header or reflow the
   appearance, language and help controls. Every colour is an existing chrome
   token, so Light, Dark and System are inherited rather than re-specified. */
.geo-search-toggle{
  display:flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:44px;min-width:44px;box-sizing:border-box;padding:var(--s-2) var(--s-3);
  border:1px solid var(--chrome-border);border-radius:var(--r-small);
  background:var(--chrome-control-group-surface);color:var(--chrome-text-control-value);
  font-size:var(--t-meta);font-weight:650;line-height:1;cursor:pointer
}
.geo-search-toggle:hover{border-color:var(--chrome-mobile-control-open-border)}
.geo-search-toggle:focus-visible{outline:2px solid var(--chrome-focus-ring-color);outline-offset:2px}
.geo-search-toggle[aria-expanded="true"]{border-color:var(--chrome-mobile-control-open-border);background:var(--chrome-mobile-control-open-surface)}
.geo-search-toggle-glyph{font-size:var(--t-figure);line-height:1}
.geo-search-toggle-label{white-space:nowrap}

.geo-search{
  position:absolute;z-index:1102;
  top:calc(var(--header-chrome-top) + 10px);
  right:calc(18px + var(--safe-right));
  width:min(420px,calc(100vw - 36px - var(--safe-left) - var(--safe-right)));
  /* Placement is decided by measurement in js/app.js, not by a breakpoint:
     --geo-search-left / --geo-search-width are set only when the live corridor
     between the Layers rail and the (resizable) analysis panel is wide enough
     to hold the finder without covering either of them. */
  box-sizing:border-box;padding:var(--s-3);
  /* 48px of bottom clearance keeps a tall panel (finder + answered question) above
     the map attribution, which a full-height panel would otherwise cover. */
  max-height:calc(100vh - var(--header-chrome-top) - 76px - var(--safe-bottom));
  max-height:calc(100dvh - var(--header-chrome-top) - 76px - var(--safe-bottom));
  overflow:auto;overscroll-behavior:contain;
  border:1px solid var(--chrome-border);border-radius:var(--r-large);
  background:var(--chrome-panel-surface);backdrop-filter:blur(18px);
  box-shadow:0 14px 40px rgba(0,0,0,.28);color:var(--chrome-text-primary)
}
.geo-search[hidden]{display:none!important}
.geo-search-surface{min-width:0}
.geo-search[data-presentation="inline"]{
  /* The panel is the middle cell of the three-zone header grid below. It
     stretches to the header's content height, so the surface can hang from its
     bottom edge in CSS with no measured offset, while the field stays centred. */
  position:relative;z-index:1102;top:auto;right:auto;left:auto;width:auto;flex:1 1 var(--geo-search-field-min);min-width:var(--geo-search-field-min);max-width:var(--geo-search-field-max);max-height:none;
  display:flex;align-items:center;align-self:stretch;overflow:visible;padding:0;border:0;border-radius:0;background:transparent;backdrop-filter:none;box-shadow:none
}
.geo-search[data-presentation="inline"] .geo-search-field{flex:1 1 auto;min-width:0}
/* Three-zone institutional header: brand | search | preferences. The side
   tracks are sized to their content (max-content floor) and share the rest
   equally, so the field is centred whenever the header has room and otherwise
   slides toward the roomier side. It can never take space from, or overlap,
   a neighbour, in any language or font metric. This replaces the earlier
   flex-fill, which only avoided overlap by accident of order. */
/* Up to 1100px the header keeps its shrinkable flex layout (the brand may
   truncate), which is the only layout that cannot overflow in the one frame
   between a resize and the script re-deciding inline versus compact. */
header:has(.geo-search[data-presentation="inline"]){justify-content:flex-start}
@media(min-width:1101px){
  header:has(.geo-search[data-presentation="inline"]){
    display:grid;grid-template-columns:minmax(max-content,1fr) minmax(var(--geo-search-field-min),var(--geo-search-field-max)) minmax(max-content,1fr);
    justify-content:normal;column-gap:var(--s-3)
  }
  header:has(.geo-search[data-presentation="inline"]) .geo-search[data-presentation="inline"]{flex:none;min-width:0;max-width:none}
  header:has(.geo-search[data-presentation="inline"]) .brand{justify-self:start}
  header:has(.geo-search[data-presentation="inline"]) .header-tools{justify-self:end;margin-left:0}
}
.geo-search[data-presentation="inline"] .geo-search-head{display:none}
.geo-search[data-presentation="inline"] .geo-search-query{margin-top:0}
.geo-search[data-presentation="inline"] .geo-search-surface{
  position:absolute;z-index:1;top:calc(100% + var(--s-2) + 1px + var(--s-3));left:0;width:min(100%,var(--geo-search-inline-surface-width,100%));max-height:min(620px,calc(100dvh - var(--header-chrome-top) - 28px - var(--safe-bottom)));
  padding:var(--s-3);overflow:auto;overscroll-behavior:contain;border:1px solid var(--chrome-border);border-radius:var(--r-large);
  background:var(--chrome-panel-surface);backdrop-filter:blur(18px);box-shadow:0 14px 40px rgba(0,0,0,.28);display:none
}
/* The surface is an interaction state. It is shown only while the reader has
   opened it (data-open), never because a query exists or because the Question
   Explorer finished loading in the background. */
.geo-search[data-presentation="inline"][data-open="true"] .geo-search-surface{display:block}
@keyframes geo-search-surface-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.geo-search[data-presentation="inline"][data-open="true"] .geo-search-surface{animation:geo-search-surface-in .12s ease-out}
.geo-search[data-presentation="inline"]~.header-tools .geo-search-toggle{display:none}
/* Corridor placement is driven by --geo-search-left / --geo-search-width,
   which js/app.js measures. Like --header-bottom, those inline values still
   describe the PREVIOUS viewport in the frame right after a change, so the
   rule is gated on the width at which a corridor can exist at all. Below it
   the finder falls back to its viewport-clamped overlay form no matter what
   the stale measurement says, and the min() keeps a stale width inside the
   viewport even above it. The measurement refines the placement; it can no
   longer place the panel outside the page. */
@media(min-width:1024px){
  .geo-search[data-presentation="overlay"][data-placement="corridor"]{left:var(--geo-search-left);right:auto;width:min(var(--geo-search-width),calc(100vw - var(--geo-search-left) - 18px - var(--safe-right)))}
}
.geo-search-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-2);min-width:0}
.geo-search-label{min-width:0;font-size:var(--t-micro);font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--chrome-text-section);line-height:1.3}
.geo-search-close{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;margin:calc(var(--s-2) * -1) calc(var(--s-2) * -1) 0 0;
  border:0;border-radius:var(--r-small);background:transparent;
  color:var(--chrome-text-control-caption);font-size:var(--t-body);cursor:pointer
}
.geo-search-close:hover{color:var(--chrome-text-control-strong)}
.geo-search-close:focus-visible{outline:2px solid var(--chrome-focus-ring-color);outline-offset:2px}
.geo-search-query{
  width:100%;box-sizing:border-box;min-height:44px;margin-top:var(--s-2);padding:var(--s-2) var(--s-3);
  border:1px solid var(--chrome-border);border-radius:var(--r-small);
  background:var(--chrome-form-surface);color:var(--chrome-text-control-value);
  font-size:var(--t-label);font-family:inherit
}
.geo-search-query:focus-visible{outline:2px solid var(--chrome-focus-ring-color);outline-offset:2px}
.geo-search-query:disabled{opacity:.55;cursor:not-allowed}
/* Civic Search field: a leading cartographic magnifier and a trailing "/" key
   hint. Both are decoration (aria-hidden) over the one real input. */
.geo-search-field{--geo-search-icon-size:18px;--geo-search-hint-size:24px;position:relative;display:block}
.geo-search-icon{position:absolute;left:var(--s-3);top:50%;transform:translateY(-50%);width:var(--geo-search-icon-size);height:var(--geo-search-icon-size);color:var(--chrome-text-control-caption);pointer-events:none}
.geo-search-field .geo-search-query{padding-left:calc(var(--s-3) + var(--geo-search-icon-size) + var(--s-2));padding-right:calc(var(--s-3) + var(--geo-search-hint-size) + var(--s-2));border-radius:var(--r-large);transition:border-color .12s ease}
.geo-search-query::placeholder{color:var(--chrome-text-control-caption);opacity:1}
.geo-search-query:hover{border-color:var(--chrome-mobile-control-open-border)}
.geo-search[data-open="true"] .geo-search-query,.geo-search-query:focus{border-color:var(--chrome-mobile-control-open-border)}
.geo-search[data-open="true"] .geo-search-icon,.geo-search-field:focus-within .geo-search-icon{color:var(--chrome-text-control-strong)}
.geo-search-hint{
  position:absolute;right:var(--s-3);top:50%;transform:translateY(-50%);min-width:20px;box-sizing:border-box;padding:0 var(--s-1);
  border:1px solid var(--chrome-border);border-radius:var(--r-small);background:var(--chrome-control-group-surface);
  color:var(--chrome-text-control-caption);font:inherit;font-size:var(--t-meta);line-height:1.3;text-align:center;pointer-events:none
}
.geo-search[data-open="true"] .geo-search-hint,.geo-search-query:not(:placeholder-shown)~.geo-search-hint{display:none}
@media(pointer:coarse){.geo-search-hint{display:none}.geo-search-field .geo-search-query{padding-right:var(--s-3)}}
.geo-search-status{margin:var(--s-2) 0 0;color:var(--chrome-text-control-caption);font-size:var(--t-meta);line-height:1.4}
.geo-search-status:empty{display:none}

.geo-search-results{list-style:none;margin:var(--s-2) 0 0;padding:0;display:grid;gap:var(--s-1)}
.geo-search-results:empty{display:none}
.geo-search-result{
  display:grid;gap:var(--s-1);width:100%;box-sizing:border-box;min-height:44px;
  padding:var(--s-2) var(--s-3);text-align:left;
  border:1px solid var(--chrome-border);border-radius:var(--r-small);
  background:var(--chrome-card-surface);color:var(--chrome-text-primary);
  font-family:inherit;cursor:pointer
}
.geo-search-result:hover{border-color:var(--chrome-mobile-control-open-border)}
.geo-search-result:focus-visible{outline:2px solid var(--chrome-focus-ring-color);outline-offset:2px}
.geo-search-result[aria-current="true"]{border-color:var(--chrome-mobile-control-open-border);background:var(--chrome-mobile-control-open-surface)}
.geo-search-result-head{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-2);min-width:0}
.geo-search-result-type{padding:0 var(--s-1);border:1px solid var(--chrome-divider);border-radius:var(--r-small);font-size:var(--t-micro);font-weight:650;letter-spacing:.08em;line-height:1.5;text-transform:uppercase;color:var(--chrome-text-section)}
.geo-search-result-code{font-size:var(--t-meta);font-variant-numeric:tabular-nums;color:var(--chrome-text-control-caption);overflow-wrap:anywhere}
.geo-search-result-badge{
  padding:var(--s-1);border:1px solid var(--chrome-border);border-radius:var(--r-small);
  background:var(--chrome-control-group-surface);color:var(--chrome-text-control-caption);
  font-size:var(--t-micro);font-weight:650;letter-spacing:0;text-transform:none
}
.geo-search-result-name{font-size:var(--t-label);font-weight:650;line-height:1.3;overflow-wrap:anywhere}
.geo-search-result-parent{font-size:var(--t-meta);color:var(--chrome-text-control-caption);line-height:1.3;overflow-wrap:anywhere}

.geo-search-card{
  margin-top:var(--s-3);padding:var(--s-3);
  border:1px solid var(--chrome-border);border-radius:var(--r-small);background:var(--chrome-card-surface)
}
.geo-search-card[hidden]{display:none!important}
.geo-search-card-head{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-2);min-width:0}
.geo-search-type{font-size:var(--t-micro);font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--chrome-text-section)}
.geo-search-code{font-size:var(--t-meta);font-variant-numeric:tabular-nums;color:var(--chrome-text-control-caption);overflow-wrap:anywhere}
.geo-search-card-name{margin:var(--s-1) 0 0;font-size:var(--t-figure);font-weight:700;line-height:1.2;overflow-wrap:anywhere}
.geo-search-card-parent{margin:var(--s-1) 0 0;font-size:var(--t-meta);color:var(--chrome-text-control-caption);line-height:1.4}
.geo-search-card-scope{margin:var(--s-2) 0 0;font-size:var(--t-meta);color:var(--chrome-text-metadata);line-height:1.45}
.geo-search-actions{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-3)}
.geo-search-action{
  flex:1 1 auto;min-height:44px;box-sizing:border-box;padding:var(--s-2) var(--s-3);
  border:1px solid var(--chrome-border);border-radius:var(--r-small);
  background:var(--chrome-control-group-surface);color:var(--chrome-text-control-value);
  font-size:var(--t-label);font-weight:650;font-family:inherit;cursor:pointer
}
.geo-search-action:hover{border-color:var(--chrome-mobile-control-open-border)}
.geo-search-action:focus-visible{outline:2px solid var(--chrome-focus-ring-color);outline-offset:2px}
.geo-search-action[hidden]{display:none!important}
.geo-search-action-primary{border-color:var(--chrome-mobile-control-open-border);background:var(--chrome-mobile-control-open-surface);color:var(--chrome-text-control-strong)}
.geo-search-note{margin:var(--s-2) 0 0;font-size:var(--t-meta);color:var(--chrome-text-metadata);line-height:1.45}
.geo-search-note[hidden]{display:none!important}
.geo-search-coverage{margin:var(--s-3) 0 0;padding-top:var(--s-2);border-top:1px solid var(--chrome-divider);font-size:var(--t-micro);color:var(--chrome-text-control-label);line-height:1.5}
.geo-search-coverage:empty{display:none}
.geo-search-questions{margin-top:var(--s-3);border-top:1px solid var(--chrome-divider)}
.geo-search-questions[hidden]{display:none!important}
.geo-search-questions>summary{
  display:flex;align-items:center;min-height:44px;box-sizing:border-box;padding:var(--s-2) var(--s-1);
  color:var(--chrome-text-control-value);font-size:var(--t-meta);font-weight:650;cursor:pointer
}
.geo-search-questions>summary:hover{color:var(--chrome-text-control-strong)}
.geo-search-questions>summary:focus-visible{outline:2px solid var(--chrome-focus-ring-color);outline-offset:2px}
.geo-search-questions[open]>summary{border-bottom:1px solid var(--chrome-divider)}

/* Tablet and phone: the finder spans the available width below the header so no
   result is clipped and no code wraps mid-identifier. */
@media(max-width:850px){
  /* At this width the map credit hangs in the right column under the header and
     zoom control (js/app.js keeps --map-credit-bottom at its real lower edge). The
     finder must not cover it, so it starts beneath it: legal attribution has to
     stay visible and its links operable while search is open. */
  .geo-search{--geo-search-top:max(calc(var(--header-chrome-top) + 10px),calc(var(--map-credit-bottom,0px) + var(--s-2)));top:var(--geo-search-top);left:calc(10px + var(--safe-left));right:calc(10px + var(--safe-right));width:auto;padding:var(--s-2);max-height:calc(100dvh - var(--geo-search-top) - 10px - var(--safe-bottom))}
}
@media(max-width:560px){
  /* The Layers control is a 44px map control on the row 10px below the header.
     The open finder spans the full width, so it hangs beneath that row exactly as
     the opened Layers rail does (.left above) instead of sharing it. Sharing it
     put the button's box over the panel's label: the panel lives inside the
     header's stacking context (z 1100), so its own z-index never rose above the
     sibling button (z 1101). Clearing the row removes the overlap at every
     width, label length and language without touching either z-index. */
  .geo-search{--geo-search-top:max(calc(var(--header-chrome-top) + 10px + 44px + var(--s-2)),calc(var(--map-credit-bottom,0px) + var(--s-2)))}
}
/* The narrow header already stacks brand and tools on two 44px rows. The finder
   keeps its 44px target there but drops its text label, exactly as the guided
   tour control does, so row two cannot overflow at 320px. */
@media(max-width:850px){
  /* Resize is delivered after style recalculation.  Until JS changes the
     presentation from inline to overlay, remove the stale third header row and
     expose the compact activator. At phone widths the fixed map chrome
     therefore uses the two-row header floor in the very first post-resize
     frame. */
  header .geo-search[data-presentation="inline"]{display:none}
  .geo-search[data-presentation="inline"]~.header-tools .geo-search-toggle{display:flex}
}
@media(max-width:680px){
  .geo-search-toggle{min-width:44px;width:44px;padding:var(--s-1)}
  .geo-search-toggle-label{display:none}
}
/* ----------------------------------------- M2 urban evidence questions
   Lives INSIDE the finder overlay, so it adds no control to the header, no panel
   to the map and no height to the analysis panel. Chrome tokens only; every state
   is carried by text and border style as well as tone, so it survives Light, Dark
   and forced-colours alike. */
.qx{margin-top:var(--s-3);padding-top:var(--s-2);border-top:1px solid var(--chrome-divider)}
.qx[hidden]{display:none!important}
.qx-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}
.qx-title{margin:0;font-size:var(--t-micro);font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--chrome-text-section);line-height:1.3}
.qx-collapse,.qx-action,.qx-reading-btn{
  min-height:44px;box-sizing:border-box;padding:var(--s-1) var(--s-3);
  border:1px solid var(--chrome-border);border-radius:var(--r-small);
  background:var(--chrome-control-group-surface);color:var(--chrome-text-control-value);
  font:inherit;font-size:var(--t-meta);font-weight:650;cursor:pointer
}
.qx-collapse:hover,.qx-action:hover,.qx-reading-btn:hover,.qx-q:hover{border-color:var(--chrome-mobile-control-open-border)}
.qx-collapse:focus-visible,.qx-action:focus-visible,.qx-reading-btn:focus-visible,.qx-q:focus-visible,.qx-refused-summary:focus-visible,.qx-answer:focus-visible,.qx summary:focus-visible{outline:2px solid var(--chrome-focus-ring-color);outline-offset:2px}
.qx-body[hidden]{display:none!important}
.qx-intro,.qx-context-line,.qx-refused-intro,.qx-hint,.qx-subject-note,.qx-reference,.qx-derivation{margin:var(--s-1) 0 0;font-size:var(--t-meta);line-height:1.45;color:var(--chrome-text-metadata)}
.qx-context{margin-top:var(--s-2);padding:var(--s-2);border:1px solid var(--chrome-divider);border-radius:var(--r-small)}
.qx-context-line{margin:0;color:var(--chrome-text-control-caption)}
.qx-context-line+.qx-context-line{margin-top:var(--s-1)}
.qx-list{list-style:none;margin:var(--s-2) 0 0;padding:0;display:grid;gap:var(--s-1)}
.qx-q{
  display:grid;gap:var(--s-1);width:100%;min-height:44px;box-sizing:border-box;text-align:left;
  padding:var(--s-2) var(--s-3);border:1px solid var(--chrome-border);border-radius:var(--r-small);
  background:var(--chrome-control-group-surface);color:var(--chrome-text-control-value);font:inherit;cursor:pointer
}
.qx-q[aria-pressed="true"]{border-color:var(--chrome-mobile-control-open-border);background:var(--chrome-mobile-control-open-surface);box-shadow:inset 3px 0 0 var(--chrome-mobile-control-open-border)}
.qx-q-subject{font-size:var(--t-micro);font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--chrome-text-section)}
.qx-q-text{font-size:var(--t-label);font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.qx-refused{margin-top:var(--s-2)}
.qx-refused-summary,.qx summary{cursor:pointer;min-height:44px;box-sizing:border-box;padding:var(--s-2) 0;font-size:var(--t-meta);font-weight:650;color:var(--chrome-text-control-caption)}
.qx-q-refused{border-style:dashed}
.qx-answer{margin-top:var(--s-3);padding:var(--s-3);border:1px solid var(--chrome-border);border-radius:var(--r-small);background:var(--chrome-panel-surface)}
.qx-answer[hidden]{display:none!important}
.qx-answer[data-kind="abstention"]{border-style:dashed}
.qx-answer[data-stale="true"]{border-style:dotted;border-width:2px}
.qx-answer[data-stale="true"] .qx-section,.qx-answer[data-stale="true"] .qx-reading{opacity:.6}
.qx-answer-head{display:grid;gap:var(--s-1)}
.qx-answer-title{margin:0;font-size:var(--t-label);font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.qx-badge{justify-self:start;padding:var(--s-1) var(--s-2);border:1px solid var(--chrome-border);border-radius:var(--r-small);font-size:var(--t-micro);font-weight:650;letter-spacing:.04em;line-height:1.4}
.qx-badge[data-kind="abstention"]{border-style:dashed}
.qx-stale{margin:var(--s-2) 0 0;padding:var(--s-2);border:1px dotted var(--chrome-border);border-radius:var(--r-small);font-size:var(--t-meta);font-weight:650;line-height:1.4}
.qx-reading{display:flex;gap:var(--s-1);margin-top:var(--s-2)}
.qx-reading-btn[aria-pressed="true"]{border-color:var(--chrome-mobile-control-open-border);background:var(--chrome-mobile-control-open-surface);color:var(--chrome-text-control-strong)}
.qx-section{margin-top:var(--s-3)}
.qx-section-title{margin:0 0 var(--s-1);font-size:var(--t-micro);font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--chrome-text-section)}
.qx-headline{margin:0;font-size:var(--t-label);font-weight:650;line-height:1.4;overflow-wrap:anywhere}
.qx-facts{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-1);margin:var(--s-2) 0 0}
.qx-facts dt{margin-top:var(--s-2);font-size:var(--t-micro);font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--chrome-text-control-caption)}
.qx-facts dd{margin:0;font-size:var(--t-meta);line-height:1.45;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.qx-fact-note,.qx-fact-detail,.qx-change-label{color:var(--chrome-text-metadata)}
.qx-changes,.qx-item-list,.qx-limits{margin:var(--s-1) 0 0;padding-left:var(--s-4);font-size:var(--t-meta);line-height:1.45}
.qx-code,.qx-item-code{font-size:var(--t-meta);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.qx-abstention-name{margin:0;font-size:var(--t-label);font-weight:700;line-height:1.35}
.qx-abstention-text,.qx-abstention-clause,.qx-abstention-guidance,.qx-abstention-codes{margin:var(--s-1) 0 0;font-size:var(--t-meta);line-height:1.45}
.qx-abstention-guidance{font-weight:650}
.qx-source-name,.qx-scope-label{margin:0;font-size:var(--t-meta);font-weight:650;line-height:1.4;overflow-wrap:anywhere}
.qx-scope-instance{margin:var(--s-1) 0 0;font-size:var(--t-meta);color:var(--chrome-text-control-caption);overflow-wrap:anywhere}
.qx-reference[data-declared="false"]{font-weight:650}
.qx-actions{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.qx-action:disabled{cursor:not-allowed;opacity:.58}
.qx-dossier-status{margin:var(--s-2) 0 0;font-size:var(--t-meta);line-height:1.45;color:var(--chrome-text-metadata);overflow-wrap:anywhere}
.qx-dossier-status[data-tone="error"]{color:var(--chrome-text-control-strong);font-weight:650}
.qx-dossier-status a{display:inline-block;margin-inline-end:var(--s-1);color:var(--chrome-text-control-strong);font-weight:650;text-decoration:underline}
.qx-share-note{margin:var(--s-2) 0 0;font-size:var(--t-meta);line-height:1.45;color:var(--chrome-text-metadata)}
.qx-loading{margin:var(--s-2) 0 0;font-size:var(--t-meta);line-height:1.45}
@media(max-width:850px){
  .qx-reading-btn,.qx-action{flex:1 1 auto}
}
@media(forced-colors:active){
  .qx-q[aria-pressed="true"]{outline:2px solid Highlight}
}
@media(prefers-reduced-motion:reduce){
  .geo-search,.geo-search-surface,.geo-search-query,.geo-search-result,.geo-search-action,.qx-q,.qx-action{transition:none!important;animation:none!important}
}
/* UX-V3 (#151) T1: interpretation limits and rail headings move from --t-micro (10px) to --t-meta (11px); incidental metadata stays at 10px */
.rail-group-note,.layer-source-preview,.layer-source-status,.layer-source-render-note,.hospitality-selector-hint,.hospitality-interpretation,.hospitality-state,.hospitality-dual-date,.hospitality-unit,.area-other,.mode-question,.halo-legend,
.geo-search-coverage,.lic-window-clamped,.ambito-guard,.ambito-guard-di,.ambito-scale-note,.ambito-radius-note,.ambito-edition-note,.ambito-reason,.ab-qual,.ambito-pick-hint,
.mix-label,.mixrow,.nearest li,.badge,.area-vut-unit,.area-vut-secondary,.section-head small,.comparison-radius-readout,.area-source-toggle,.planning-source-toggle,.planning-change-provenance-edition,.halo-toggle small,
.planning-touched-centre,.lensbtn,.planning-kind,.planning-code-label{font-size:var(--t-meta)}
.left h3,.rail-group-copy,.basemap-control label,.map-control label,.language-control label,.stay-filter label,.hospitality-controls label,.activity-divider span,.context-divider span,.research-divider span,.administrative-divider span{font-size:var(--t-meta);letter-spacing:.04em;text-transform:none}

/* Reading size (#102): in the single-row header band (681-1100px) the full product name
   truncated at Normal and nearly vanished at Large. Reuse the phone header's icon-only
   Find / Appearance / Tour controls (same 44px targets, same accessible names) when the
   name no longer fits: up to 820px at Normal, up to 1020px at the larger steps. At Large
   below 713px even that leaves too little room, so a compact visible name stands in for
   it; the full name stays in the accessibility tree. */
.brand-short{display:none;font-size:var(--t-figure);font-weight:760;letter-spacing:-.02em;line-height:1.05;white-space:nowrap}
@media(min-width:681px) and (max-width:820px){
  .geo-search-toggle{min-width:44px;width:44px;padding:var(--s-1)}
  .geo-search-toggle-label,.tutorial-help-label,.appearance-control>span{display:none}
  .tutorial-help{min-width:44px;width:44px;justify-content:center;padding:var(--s-1)}
  .appearance-control{position:static;display:flex;align-items:center;gap:var(--s-1);min-width:0}
  .appearance-control:before{content:"◐";color:var(--chrome-text-brand-subtle)}
}
@media(min-width:821px) and (max-width:1020px){
  :root:is([data-text-size="comfortable"],[data-text-size="large"]) .geo-search-toggle{min-width:44px;width:44px;padding:var(--s-1)}
  :root:is([data-text-size="comfortable"],[data-text-size="large"]) .geo-search-toggle-label,:root:is([data-text-size="comfortable"],[data-text-size="large"]) .tutorial-help-label,:root:is([data-text-size="comfortable"],[data-text-size="large"]) .appearance-control>span{display:none}
  :root:is([data-text-size="comfortable"],[data-text-size="large"]) .tutorial-help{min-width:44px;width:44px;justify-content:center;padding:var(--s-1)}
  :root:is([data-text-size="comfortable"],[data-text-size="large"]) .appearance-control{position:static;display:flex;align-items:center;gap:var(--s-1);min-width:0}
  :root:is([data-text-size="comfortable"],[data-text-size="large"]) .appearance-control:before{content:"◐";color:var(--chrome-text-brand-subtle)}
}
@media(min-width:681px) and (max-width:712px){
  :root[data-text-size="large"] .brand-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  :root[data-text-size="large"] .brand-short{display:block}
}