/* Tanmyaa · Apple-inspired interface layer (loaded last; overrides tanmyaa.css, keeps every id and behaviour).
   Following Apple's Human Interface Guidelines: the map is full screen and everything else floats over it.
   Glass (blur + saturation) is used only on the control layer (top bar, service bar, map tools, sheet chrome);
   reading content keeps a near-solid surface. 8-pt grid, 44-pt touch targets on touch screens, concentric radii,
   system type and colours, short spring motion, and solid fallbacks for reduced transparency / no blur support. */

/* ------------------------------------------------------------------ tokens */
:root{
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Arabic","IBM Plex Sans Arabic","Inter","Segoe UI",system-ui,sans-serif;
  --font-ar:-apple-system,BlinkMacSystemFont,"SF Arabic","IBM Plex Sans Arabic","SF Pro Text","Inter","Segoe UI",system-ui,sans-serif;
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Arabic","IBM Plex Sans Arabic","Inter",system-ui,sans-serif;
  /* system colours (light); the brand blue stays the tint */
  --sys-blue:#007AFF; --sys-green:#34C759; --sys-red:#FF3B30; --sys-orange:#FF9500;
  --gray3:#C7C7CC; --gray4:#D1D1D6; --gray5:#E5E5EA; --gray6:#F2F2F7;
  --label:#000000; --label-2:rgba(60,60,67,.6); --label-3:rgba(60,60,67,.3);
  --separator:rgba(60,60,67,.18); --fill:rgba(118,118,128,.12); --fill-2:rgba(118,118,128,.08);
  --bg:#F2F2F7; --surface:#FFFFFF; --surface-2:#F2F2F7; --surface-3:#E9E9EE;
  --ink:#1C1C1E; --ink-2:#3A3A3C; --muted:rgba(60,60,67,.62); --faint:rgba(60,60,67,.38);
  --line:rgba(60,60,67,.14); --line-2:rgba(60,60,67,.22);
  /* materials */
  --glass:rgba(255,255,255,.72); --glass-thick:rgba(255,255,255,.88); --glass-edge:rgba(255,255,255,.55);
  --blur:blur(24px) saturate(180%); --blur-thick:blur(40px) saturate(200%);
  --sh-float:0 8px 28px rgba(0,0,0,.12),0 1px 3px rgba(0,0,0,.08);
  --sh-sheet:0 12px 40px rgba(0,0,0,.16),0 2px 8px rgba(0,0,0,.06);
  --ring:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent);
  /* 8-pt grid, concentric radii */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:20px; --r-2xl:24px;
  /* layout */
  --gap:12px; --top:52px; --rail-w:68px; --side-w:388px;
  --chrome-top:calc(var(--top) + var(--gap) * 2);
  /* motion */
  --ease:cubic-bezier(.25,.1,.25,1); --spring:cubic-bezier(.32,.72,0,1); --pop:cubic-bezier(.175,.885,.32,1.275);
  --t-fast:.2s; --t:.3s;
}
@media (prefers-color-scheme:dark){:root{
  --sys-blue:#0A84FF; --sys-green:#30D158; --sys-red:#FF453A; --sys-orange:#FF9F0A;
  --gray3:#48484A; --gray4:#3A3A3C; --gray5:#2C2C2E; --gray6:#1C1C1E;
  --label:#FFFFFF; --label-2:rgba(235,235,245,.6); --label-3:rgba(235,235,245,.3);
  --separator:rgba(84,84,88,.5); --fill:rgba(118,118,128,.24); --fill-2:rgba(118,118,128,.16);
  --bg:#000000; --surface:#1C1C1E; --surface-2:#2C2C2E; --surface-3:#3A3A3C;
  --ink:#F2F2F7; --ink-2:#E5E5EA; --muted:rgba(235,235,245,.6); --faint:rgba(235,235,245,.32);
  --line:rgba(84,84,88,.48); --line-2:rgba(84,84,88,.7);
  --glass:rgba(30,30,32,.62); --glass-thick:rgba(28,28,30,.86); --glass-edge:rgba(255,255,255,.08);
  --sh-float:0 8px 28px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.3);
  --sh-sheet:0 12px 40px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.3);
}}
[dir=rtl]{--font:var(--font-ar)}

body{font:400 14px/1.5 var(--font);letter-spacing:-.006em;color:var(--ink);background:var(--bg)}
[dir=rtl] body{letter-spacing:0}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}

/* one material for every floating control */
.topbar,.rail,.tools-group,.maplibregl-ctrl-top-left .maplibregl-ctrl-group:not(.tools-group),.scale-switch,.toast,.maplibregl-ctrl-scale,.lyr-fly,.more-menu{
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:.5px solid var(--glass-edge);box-shadow:var(--sh-float)}
@media (prefers-color-scheme:dark){.topbar,.rail,.tools-group,.scale-switch,.lyr-fly,.more-menu{border-color:rgba(255,255,255,.08)}}

/* ------------------------------------------------------------------ top bar: a floating capsule */
.topbar{inset-block-start:var(--gap);inset-inline:var(--gap);block-size:var(--top);padding-inline:var(--s4) var(--s2);border-radius:var(--r-lg);border-bottom:.5px solid var(--glass-edge)}
.wordmark{font:800 21px/1 "Inter Tight","Inter",var(--display);letter-spacing:-.045em}
.product{border-inline-start:.5px solid var(--separator)}
.product b{font:600 13px var(--font);color:var(--ink)}
.product small{font-size:11.5px;color:var(--muted)}
.pill-btn,.lang{block-size:34px;padding:0 var(--s3);border:0;border-radius:999px;background:var(--fill-2);color:var(--ink);font:500 13px var(--font);transition:background var(--t-fast) var(--ease),transform .1s}
.pill-btn:hover,.lang:hover{background:var(--fill);border:0}
.icon-btn{inline-size:34px;block-size:34px;border:0;border-radius:999px;background:var(--fill-2);color:var(--ink)}
.icon-btn:hover{background:var(--fill)}
.icon-btn[aria-pressed=true],.icon-btn[aria-expanded=false]{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.pill-btn:active,.lang:active,.icon-btn:active{transform:scale(.96)}
/* map activity: a quiet progress hairline under the bar while tiles and data load */
.topbar::after{content:"";position:absolute;inset-inline:var(--s4);inset-block-end:-1px;block-size:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);background-size:40% 100%;background-repeat:no-repeat;opacity:0;transition:opacity .2s}
body.map-busy .topbar::after{opacity:.9;animation:busy 1.1s linear infinite}
@keyframes busy{from{background-position:-40% 0}to{background-position:140% 0}}

/* ------------------------------------------------------------------ service bar (laptop): a floating vertical capsule */
.rail{inset-block:var(--chrome-top) auto;inset-inline-start:var(--gap);max-block-size:calc(100% - var(--chrome-top) - var(--gap));inline-size:var(--rail-w);gap:2px;padding:var(--s2) 6px;border-radius:var(--r-xl);border-inline-end:.5px solid var(--glass-edge)}
.rail button{gap:3px;padding:7px 2px;border-radius:var(--r);color:var(--muted);font:500 10.5px/1.15 var(--font);transition:color var(--t-fast),background var(--t-fast),transform .1s}
.rail button:hover{color:var(--ink);background:var(--fill-2)}
.rail button:active{transform:scale(.95)}
.rail button[aria-current=page]{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent)}
.rail button[aria-current=page]::before{display:none}
.rail button[aria-current=page] .ri svg{stroke-width:2.1}
.rail .rl{max-inline-size:60px}
.rail .more-btn{display:none}

/* ------------------------------------------------------------------ side panel (laptop): a floating card */
body.gov-mode{--rail:calc(var(--rail-w) + var(--gap))}
#panel{inset-block:var(--chrome-top) var(--gap);inset-inline-start:calc(var(--gap) + var(--rail));inline-size:var(--side-w);padding:0 var(--s4) var(--s4);gap:var(--s4);
  background:var(--glass-thick);-webkit-backdrop-filter:var(--blur-thick);backdrop-filter:var(--blur-thick);
  border:.5px solid var(--glass-edge);border-radius:var(--r-xl);box-shadow:var(--sh-sheet);
  transition:transform var(--t) var(--spring),opacity var(--t-fast) var(--ease)}
body.collapsed #panel{transform:translateX(calc(-100% - var(--rail) - var(--gap) * 2))}
[dir=rtl] body.collapsed #panel{transform:translateX(calc(100% + var(--rail) + var(--gap) * 2))}
#panel.pushed{animation:slidein var(--t) var(--spring)}
@keyframes slidein{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
.panel-bar{margin:0 calc(var(--s4) * -1);padding:0 var(--s2) 0 var(--s4);block-size:48px;background:color-mix(in srgb,var(--surface) 70%,transparent);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-bottom:.5px solid var(--separator);border-radius:var(--r-xl) var(--r-xl) 0 0}
[dir=rtl] .panel-bar{padding:0 var(--s4) 0 var(--s2)}
.pb-title{font:600 15px var(--font);color:var(--ink)}
.pb-btn{inline-size:30px;block-size:30px;border-radius:999px;background:var(--fill-2);color:var(--muted)}
.pb-btn:hover{background:var(--fill);border-color:transparent}
body.minimized #panel{border-radius:var(--r-lg);box-shadow:var(--sh-float)}
body.minimized .panel-bar{border-radius:var(--r-lg)}

/* ------------------------------------------------------------------ type & content */
.large-title{font:700 26px/1.2 var(--display);letter-spacing:-.02em;color:var(--ink)}
[dir=rtl] .large-title{letter-spacing:0}
.hero h2{font:700 26px/1.2 var(--display)}
h3,.h4{font:600 13px/1.4 var(--font);letter-spacing:0;text-transform:none;color:var(--muted)}
.tabq{font-size:14px;color:var(--muted)}
.note{font-size:12.5px;color:var(--muted)}
.say{border:0;border-radius:var(--r);background:color-mix(in srgb,var(--accent) 10%,transparent);padding:var(--s3) var(--s4);font-size:14px}

/* grouped surfaces: cards, scope, KPI grids, tables */
.scope,.kpis,.cards,.rank,.micro,.sites-all,.crit,.hero-stats{border:0;border-radius:var(--r-lg);background:var(--surface);box-shadow:0 0 0 .5px var(--separator)}
.scope{padding:var(--s3) var(--s4)}
.scope b{font:600 17px/1.3 var(--font)}
.kpi{padding:var(--s3) var(--s4)}
.kpi b{font:600 22px/1.15 var(--display);letter-spacing:-.01em}
.kpi .k{font-size:12px;color:var(--muted)}
.kpi:nth-child(even){border-inline-start:.5px solid var(--separator)}
.kpi:nth-child(n+3){border-top:.5px solid var(--separator)}
.kpi.cur{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.card+.card{border-top:.5px solid var(--separator)}
.card{transition:background var(--t-fast)}
.card:active{background:var(--fill-2)}
.tbl th{border-bottom:.5px solid var(--separator);color:var(--muted);font:600 12px var(--font)}
.tbl td{border-bottom:.5px solid var(--separator)}
.bench{border-radius:999px;padding:1px 8px;font:600 11px var(--font)}

/* segmented control (indicators) */
.inds{padding:2px;border:0;border-radius:9px;background:var(--fill)}
.inds button{block-size:30px;border-radius:7px;color:var(--ink);font:500 13px var(--font);transition:background var(--t-fast),box-shadow var(--t-fast)}
.inds button[aria-pressed=true]{background:var(--surface);box-shadow:0 3px 8px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04)}
@media (prefers-color-scheme:dark){.inds button[aria-pressed=true]{background:#636366}}
.inds select,.inds .thr{border-radius:var(--r-sm)}

/* buttons: capsules; filled for the main action, tinted for the rest */
.btn{min-block-size:36px;padding:0 var(--s4);border:0;border-radius:999px;background:var(--accent);color:#fff;font:600 14px var(--font);box-shadow:none;transition:filter var(--t-fast),transform .1s}
.btn:hover{background:var(--accent);filter:brightness(1.06);border:0}
.btn:active{transform:scale(.97);filter:brightness(.95)}
.btn.ghost{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);border:0}
.btn.ghost:hover{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}
.btn.sm{min-block-size:30px;padding:0 var(--s3);font-size:13px}
.back,.home-tools input,.home-tools select,select,.expbox input[type=text],.expbox select{border:0;border-radius:var(--r);background:var(--fill-2);box-shadow:none;color:var(--ink);font-size:14px}
.back{color:var(--accent);font-weight:500}
.home-tools input:focus,select:focus{box-shadow:var(--ring)}

/* switches: iOS proportions and green "on" */
.lyr-body input[type=checkbox],.exp-checks input[type=checkbox]{inline-size:42px;block-size:26px;border-radius:13px;background:var(--fill)}
.lyr-body input[type=checkbox]::before,.exp-checks input[type=checkbox]::before{inline-size:22px;block-size:22px;inset-block-start:2px;inset-inline-start:2px;box-shadow:0 2px 6px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.04);transition:transform var(--t-fast) var(--spring)}
.lyr-body input[type=checkbox]:checked,.exp-checks input[type=checkbox]:checked{background:var(--sys-green)}
.lyr-body input[type=checkbox]:checked::before,.exp-checks input[type=checkbox]:checked::before{transform:translateX(16px)}
[dir=rtl] .lyr-body input[type=checkbox]:checked::before,[dir=rtl] .exp-checks input[type=checkbox]:checked::before{transform:translateX(-16px)}

/* ------------------------------------------------------------------ map tools: floating glass capsules */
.maplibregl-ctrl.tools{margin:var(--chrome-top) 0 0 var(--gap)}
body.gov-mode[dir=ltr] .maplibregl-ctrl.tools{margin-left:var(--gap)}
.tools-group{border-radius:var(--r-lg);overflow:hidden}
.maplibregl-ctrl .tool{inline-size:56px!important;block-size:52px!important;color:var(--ink)!important;font:500 10.5px/1.1 var(--font)!important}
.maplibregl-ctrl .tool+.tool{border-top:.5px solid var(--separator)}
.maplibregl-ctrl .tool:hover{background:var(--fill-2)!important}
.maplibregl-ctrl .tool:active{transform:scale(.94)}
.maplibregl-ctrl .tool[aria-expanded=true],.maplibregl-ctrl .tool[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 16%,transparent)!important;color:var(--accent)!important}
.tool .cnt{background:var(--accent);box-shadow:0 0 0 1.5px var(--surface)}
.maplibregl-ctrl-top-left .maplibregl-ctrl-group:not(.tools-group){margin:var(--s2) 0 0 var(--gap);border:.5px solid var(--glass-edge)!important;border-radius:var(--r-lg)!important;background:var(--glass)!important;box-shadow:var(--sh-float)!important}
.maplibregl-ctrl-top-left .maplibregl-ctrl-group:not(.tools-group) button{inline-size:56px;block-size:40px;background-color:transparent!important}
.maplibregl-ctrl-group button+button{border-top:.5px solid var(--separator)!important}
@media (prefers-color-scheme:dark){.maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(1)}}
/* layers flyout: a popover beside the tool bar */
.lyr-fly{border-radius:var(--r-xl);background:var(--glass-thick);-webkit-backdrop-filter:var(--blur-thick);backdrop-filter:var(--blur-thick);box-shadow:var(--sh-sheet);transform-origin:left top;animation:popin var(--t) var(--spring)}
@keyframes popin{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.fly-head{block-size:48px;border-bottom:.5px solid var(--separator)}
.fly-head b{font:600 16px var(--font)}
.maplibregl-ctrl .fly-x{border-radius:999px!important;background:var(--fill-2)!important;color:var(--muted)}
.presets{background:transparent;border-bottom:.5px solid var(--separator)}
.lsec{border-bottom:.5px solid var(--separator)}
.lyr-fly .lsec-t{block-size:46px;font:600 14px var(--font)}
.lsec-t .num{border-radius:7px;background:var(--fill)}
.lsec.open .lsec-t .num{background:var(--accent)}
.lsec-b .row{min-block-size:36px;font-size:13.5px;color:var(--ink)}
.chip{border:0;background:var(--fill-2);color:var(--ink);font:500 12.5px var(--font)}
.chip:hover{background:var(--fill);border:0}
.chip.on{background:var(--accent);color:#fff}
/* scale switch: a floating segmented control */
.scale-switch{inset-block-end:calc(var(--gap) * 2 + env(safe-area-inset-bottom));padding:3px;gap:2px;border-radius:var(--r-lg)}
.scale-switch button{border-radius:13px;color:var(--muted);transition:background var(--t-fast),color var(--t-fast)}
.scale-switch button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:0 3px 8px rgba(0,0,0,.12)}
.maplibregl-ctrl-scale{border-radius:6px;border:0;color:var(--ink);font:500 10.5px var(--font)}
.maplibregl-ctrl-attrib{border-radius:var(--r) 0 0 0!important}
/* popovers on the map */
.maplibregl-popup-content{border:.5px solid var(--glass-edge);border-radius:var(--r-lg);background:var(--glass-thick);-webkit-backdrop-filter:var(--blur-thick);backdrop-filter:var(--blur-thick);box-shadow:var(--sh-sheet);font:400 13px/1.5 var(--font)}
.maplibregl-popup-tip{display:none}
/* status toast: a dark capsule (HUD) */
.toast{inset-block-end:calc(var(--gap) * 2 + env(safe-area-inset-bottom));inset-inline-end:auto;left:50%;transform:translateX(-50%);max-inline-size:min(460px,calc(100vw - 32px));padding:var(--s3) var(--s5);border-radius:999px;background:rgba(28,28,30,.86);color:#fff;font:500 13px var(--font);text-align:center;animation:toastin var(--t) var(--pop)}
@keyframes toastin{from{opacity:0;transform:translate(-50%,10px) scale(.96)}to{opacity:1;transform:translate(-50%,0)}}
/* export sheet and guide: sheet-like dialogs */
.expbox{border:.5px solid var(--glass-edge);border-radius:var(--r-xl);background:var(--glass-thick);-webkit-backdrop-filter:var(--blur-thick);backdrop-filter:var(--blur-thick);box-shadow:var(--sh-sheet)}
.guide{background:rgba(0,0,0,.32);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.guide-box{border:0;border-radius:var(--r-2xl);box-shadow:var(--sh-sheet)}

/* ------------------------------------------------------------------ phones: full-screen map, floating tab bar, bottom sheet */
@media (max-width:760px){
  :root{--gap:8px;--top:48px;--tab-h:58px;--chrome-top:calc(var(--top) + var(--gap) * 2 + env(safe-area-inset-top))}
  body{font-size:15px}
  .topbar{inset-block-start:calc(var(--gap) + env(safe-area-inset-top));padding-inline:var(--s3) 6px;border-radius:var(--r-lg)}
  .pill-btn,.lang,.icon-btn{min-block-size:36px}
  /* tab bar: a floating capsule with up to five items; the rest under "More" */
  .rail{inset-block:auto calc(var(--gap) + env(safe-area-inset-bottom));inset-inline:var(--gap);max-block-size:none;block-size:var(--tab-h);padding:5px;gap:2px;flex-direction:row;overflow:visible;border-radius:999px;justify-content:space-between}
  .rail button{flex:1 1 0;min-inline-size:44px;min-block-size:44px;padding:4px 0;border-radius:999px;font-size:10px}
  .rail button.extra{display:none}
  .rail .more-btn{display:flex}
  .rail .rl{max-inline-size:100%}
  /* the sheet floats above the tab bar, with rounded corners and a grabber */
  #panel{inset-block:auto calc(var(--tab-h) + var(--gap) * 2 + env(safe-area-inset-bottom));inset-inline:var(--gap);inline-size:auto;block-size:44vh;border-radius:var(--r-2xl);padding:0 var(--s4) var(--s4)}
  body:not(.gov-mode) #panel{inset-block-end:calc(var(--gap) + env(safe-area-inset-bottom))}
  body.gov-mode #panel{inset-block-end:calc(var(--tab-h) + var(--gap) * 2 + env(safe-area-inset-bottom))}
  .grabber{background:transparent;padding:8px 0 4px;margin:0 calc(var(--s4) * -1)}
  .grabber i{inline-size:36px;block-size:5px;border-radius:3px;background:var(--gray3)}
  .panel-bar{top:17px;border-radius:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
  [dir] body.collapsed #panel{transform:translateY(calc(100% + var(--tab-h) + 40px))}
  body.minimized #panel,body.gov-mode.minimized #panel{inset-block-end:calc(var(--tab-h) + var(--gap) * 2 + env(safe-area-inset-bottom));border-radius:var(--r-lg)}
  body:not(.gov-mode).minimized #panel{inset-block-end:calc(var(--gap) + env(safe-area-inset-bottom))}
  .maplibregl-ctrl.tools{margin:var(--chrome-top) 0 0 var(--gap)}
  .maplibregl-ctrl .tool{inline-size:48px!important;block-size:48px!important;font-size:9.5px!important}
  .maplibregl-ctrl-top-left .maplibregl-ctrl-group:not(.tools-group) button{inline-size:48px;block-size:44px}
  .scale-switch{inset-block:calc(var(--chrome-top)) auto}
  .toast{inset-block-end:auto;inset-block-start:calc(var(--chrome-top));animation:none}
  .btn{min-block-size:44px}
  .btn.sm{min-block-size:36px}
  .inds button{block-size:34px}
  body.gov-mode .maplibregl-ctrl-bottom-left,body.gov-mode .maplibregl-ctrl-bottom-right{bottom:calc(var(--tab-h) + var(--gap) * 2 + env(safe-area-inset-bottom))}
}
/* "More" menu (phones): the services that do not fit in the tab bar */
.more-menu{position:fixed;z-index:40;inset-inline:var(--gap);inset-block-end:calc(var(--tab-h, 58px) + var(--gap) * 2 + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);padding:var(--s3);border-radius:var(--r-2xl);animation:popin var(--t) var(--spring);transform-origin:center bottom}
.more-menu button{display:flex;flex-direction:column;align-items:center;gap:6px;min-block-size:72px;padding:var(--s3) var(--s1);border:0;border-radius:var(--r-lg);background:var(--fill-2);color:var(--ink);font:500 12px var(--font);cursor:pointer}
.more-menu button[aria-current=page]{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.more-menu svg{inline-size:24px;block-size:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------------------------------------------ accessibility & fallbacks */
@media (prefers-reduced-transparency:reduce){
  .topbar,.rail,.tools-group,.maplibregl-ctrl-group,.scale-switch,.lyr-fly,.more-menu,#panel,.panel-bar,.expbox,.maplibregl-popup-content{background:var(--surface)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .topbar,.rail,.tools-group,.scale-switch,.lyr-fly,.more-menu,#panel,.expbox,.maplibregl-popup-content{background:var(--surface);border-color:var(--separator)}
}
@media (prefers-contrast:more){:root{--separator:rgba(60,60,67,.5);--glass:var(--surface);--glass-thick:var(--surface)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* left-to-right: the panel sits on the left, so the map's left-hand controls move past it */
@media (min-width:761px){
  html[dir=ltr] body:not(.collapsed) .maplibregl-ctrl-top-left,html[dir=ltr] body:not(.collapsed) .maplibregl-ctrl-bottom-left{left:calc(var(--rail) + var(--side-w) + var(--gap))}
}
@media (max-width:760px){
  .rail{inline-size:auto}
  /* pinch-to-zoom on touch screens; zoom buttons would crowd the sheet */
  .maplibregl-ctrl-top-left .maplibregl-ctrl-group:not(.tools-group){display:none}
}
@media (max-width:760px){
  .maplibregl-ctrl .tool{inline-size:44px!important;block-size:44px!important}
  .maplibregl-ctrl .tool span:not(.cnt){position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)} /* label kept for screen readers */
  .tool .cnt{inset-block-start:3px;inset-inline-end:3px}
  #panel{block-size:40vh}
}
/* native dropdown lists: readable in both themes */
select option,select optgroup{background:var(--surface);color:var(--ink)}
select optgroup{color:var(--muted);font-weight:600}

/* ------------------------------------------------------------------ laptops: services as an icon row inside the panel */
@media (min-width:761px){
  body.gov-mode{--rail:0px}
  body.rail-in-panel #panel .rail{position:sticky;top:48px;z-index:3;inset:auto;inline-size:auto;max-block-size:none;block-size:auto;flex:none;
    display:flex;flex-direction:row;justify-content:space-between;gap:2px;margin:0 calc(var(--s4) * -1);padding:6px var(--s3);overflow:visible;
    background:color-mix(in srgb,var(--surface) 70%,transparent);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
    border:0;border-bottom:.5px solid var(--separator);border-radius:0;box-shadow:none}
  body.rail-in-panel #panel .rail button{flex:1 1 0;min-inline-size:0;block-size:36px;padding:0;border-radius:10px;justify-content:center}
  body.rail-in-panel #panel .rail .ri svg{inline-size:20px;block-size:20px}
  body.rail-in-panel #panel .rail .rl{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%)} /* name stays for screen readers; shown as a tooltip */
  body.rail-in-panel #panel .rail .more-btn{display:none}
  body.rail-in-panel #panel .rail button[aria-current=page]{background:var(--accent);color:#fff}
  body.minimized.rail-in-panel #panel .rail{display:none}
  /* the panel bar keeps its rounded top; the icon row sits flush beneath it */
  body.rail-in-panel #panel .panel-bar{border-bottom:0}
}
/* very narrow phones: the help button becomes a round "?" so the brand never collides with the actions */
@media (max-width:420px){
  .wordmark{font-size:18px}
  .top-actions{gap:4px}
  #help{inline-size:36px;padding:0;font-size:0;display:grid;place-items:center}
  #help::before{content:"?";font:600 16px var(--font)}
  #lang{padding:0 10px;font-size:12.5px}
}
/* the tool stacks are placed by their own margin (below the floating top bar); no extra container offset */
.maplibregl-ctrl-top-left,.maplibregl-ctrl-top-right{top:0}
/* indicator switcher: wraps onto more rows instead of hiding labels off the edge; every name shows in full */
.inds{flex-wrap:wrap;overflow:visible;gap:2px}
.inds button{flex:1 1 auto;min-inline-size:max-content;block-size:auto;min-block-size:30px;padding:5px 12px;white-space:nowrap;line-height:1.3}
.inds select,.inds .thr{flex:1 1 100%;margin-top:4px}
@media (max-width:760px){.inds button{min-block-size:36px}}
/* no clipped words: tab-bar names shrink a little instead of ending in "…", the panel title may take two lines */
@media (max-width:760px){
  .rail .rl{overflow:visible;text-overflow:clip;white-space:nowrap;font-size:10px;letter-spacing:-.01em}
}
@media (max-width:420px){.rail .rl{font-size:9px}}
@media (max-width:760px){
  .pb-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25;overflow:hidden}
  .panel-bar{block-size:auto;min-block-size:48px;padding-block:6px}
}

/* ------------------------------------------------------------------ smart diagnosis: a diagnostic report */
.dx-hero{display:flex;align-items:center;gap:var(--s4);padding:var(--s4);border-radius:var(--r-lg);background:var(--surface);box-shadow:0 0 0 .5px var(--separator)}
.dx-dial{position:relative;flex:none;inline-size:84px;block-size:84px}
.dial{inline-size:84px;block-size:84px}
.dial-bg{fill:none;stroke:var(--fill);stroke-width:8}
.dial-fg{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;transition:stroke-dasharray .6s var(--spring)}
.dx-score{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1}
.dx-score b{font:700 24px var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.dx-score small{font:500 11px var(--font);color:var(--muted)}
.dx-sum{display:flex;flex-direction:column;gap:3px;min-width:0}
.dx-name{font:600 17px/1.3 var(--font);color:var(--ink)}
.dx-line{font-size:12.5px;color:var(--muted)}
.grade{align-self:flex-start;padding:2px 10px;border-radius:999px;font:700 11.5px var(--font);letter-spacing:.02em}
.g-a{background:color-mix(in srgb,var(--sys-green) 18%,transparent);color:#1E7A35}
.g-b{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent)}
.g-c{background:color-mix(in srgb,#D9A23B 22%,transparent);color:#8A5A00}
.g-d{background:color-mix(in srgb,var(--sys-orange) 20%,transparent);color:#A24A00}
.g-e{background:color-mix(in srgb,var(--sys-red) 16%,transparent);color:#B42318}
@media (prefers-color-scheme:dark){.g-a{color:#30D158}.g-c{color:#FFD60A}.g-d{color:#FF9F0A}.g-e{color:#FF6961}}
/* service scorecard */
.scorecard{display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--surface);box-shadow:0 0 0 .5px var(--separator);overflow:hidden}
.sc-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) auto;align-items:center;gap:var(--s3);inline-size:100%;padding:10px var(--s4);border:0;border-bottom:.5px solid var(--separator);background:transparent;color:var(--ink);text-align:start;font:inherit;cursor:pointer;transition:background var(--t-fast)}
.sc-row:last-child{border-bottom:0}
.sc-row:hover{background:var(--fill-2)}
.sc-row:active{background:var(--fill)}
.sc-name{display:flex;flex-direction:column;font:500 13px/1.3 var(--font);min-width:0}
.sc-name small,.sc-val small{font:400 11px var(--font);color:var(--muted)}
.sc-bar{position:relative;block-size:8px;border-radius:4px;background:var(--fill)}
.sc-bar i{position:absolute;inset-block:0;inset-inline-start:0;border-radius:4px;transition:inline-size .6s var(--spring)}
.sc-bar i.ok{background:#1D5F8A}.sc-bar i.mid{background:#EDB98C}.sc-bar i.bad{background:#A8432C}
@media (prefers-color-scheme:dark){.sc-bar i.ok{background:#4A9BD4}}
.sc-bar .target{position:absolute;inset-block:-3px;inset-inline-start:80%;inline-size:2px;border-radius:1px;background:var(--ink);opacity:.55}
.sc-val{display:flex;flex-direction:column;align-items:flex-end;min-inline-size:72px;font:600 14px var(--font);font-variant-numeric:tabular-nums}
/* urban-form tiles */
.ftiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.ft{display:flex;flex-direction:column;gap:2px;padding:var(--s3);border-radius:var(--r);background:var(--surface);box-shadow:0 0 0 .5px var(--separator)}
.ft .k{font-size:12px;color:var(--muted)}
.ft b{font:600 20px/1.2 var(--display);font-variant-numeric:tabular-nums}
.ft b small{font:500 11.5px var(--font);color:var(--muted)}
.ft .bm{font:500 11px var(--font)}
.ft.ok .bm{color:var(--ok)}.ft.bad .bm{color:var(--warn)}
/* priorities */
.dx-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);flex-wrap:wrap}
.pcards{display:flex;flex-direction:column;gap:var(--s2);margin:0;padding:0;list-style:none}
.pcard{position:relative;display:flex;flex-direction:column;gap:6px;padding:var(--s3) var(--s4);border-radius:var(--r-lg);background:var(--surface);box-shadow:0 0 0 .5px var(--separator);overflow:hidden}
.pcard::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;inline-size:4px}
.pcard.crit::before{background:#A8432C}.pcard.high::before{background:#D77D4E}.pcard.med::before{background:#EDB98C}
.pc-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pc-n{display:grid;place-items:center;inline-size:22px;block-size:22px;border-radius:50%;background:var(--fill);font:700 11.5px var(--font);color:var(--ink)}
.sev{padding:1px 8px;border-radius:999px;font:600 11px var(--font)}
.sev.crit{background:color-mix(in srgb,#A8432C 16%,transparent);color:#A8432C}
.sev.high{background:color-mix(in srgb,#D77D4E 18%,transparent);color:#B5582B}
.sev.med{background:color-mix(in srgb,#D9A23B 20%,transparent);color:#8A5A00}
@media (prefers-color-scheme:dark){.sev.crit{color:#FF8A70}.sev.high{color:#FFB37A}.sev.med{color:#FFD60A}}
.pc-cat{font:500 11.5px var(--font);color:var(--muted)}
.pc-t{font:600 14px/1.45 var(--font);color:var(--ink)}
.pc-a{margin:0;font-size:13px;line-height:1.55;color:var(--ink-2)}
.pc-where{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:11.5px;color:var(--muted)}
.pc-where a{padding:2px 9px;border-radius:999px;background:var(--fill-2);color:var(--ink);text-decoration:none;cursor:pointer}
.pc-where a:hover{background:var(--fill)}
.pc-where a small{color:var(--muted);font-variant-numeric:tabular-nums}
.pc-btns{display:flex;gap:6px;margin-top:2px}
.dx-empty{margin:0;padding:var(--s4);border-radius:var(--r-lg);background:color-mix(in srgb,var(--sys-green) 10%,transparent);color:var(--ink)}
.strengths{display:flex;flex-wrap:wrap;gap:6px}
.strengths span{padding:4px 10px;border-radius:999px;background:color-mix(in srgb,#1D5F8A 10%,transparent);color:var(--ink-2);font-size:12px}
/* comparison as rank bars */
.cmp{display:flex;flex-direction:column;gap:10px;padding:var(--s3) var(--s4);border-radius:var(--r-lg);background:var(--surface);box-shadow:0 0 0 .5px var(--separator)}
.cmp-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;grid-template-areas:"l b v" "s s s";align-items:center;column-gap:var(--s3);row-gap:2px}
.cmp-l{grid-area:l;display:flex;flex-direction:column;font:500 12.5px var(--font)}
.cmp-l small{color:var(--muted);font-size:11px}
.cmp-bar{grid-area:b;block-size:6px;border-radius:3px;background:var(--fill)}
.cmp-bar i{display:block;block-size:100%;border-radius:3px;background:var(--accent)}
.cmp-v{grid-area:v;font:600 13px var(--font);font-variant-numeric:tabular-nums}
.cmp-best{grid-area:s;font-size:11px;color:var(--muted)}
/* method notes, folded away */
.dx-method{border-radius:var(--r);background:var(--fill-2);padding:var(--s2) var(--s3);font-size:12px;color:var(--muted)}
.dx-method summary{cursor:pointer;font-weight:600;color:var(--ink-2)}
.dx-method p{margin:6px 0 0}
/* scorecard rows: name and value on one line, a full-width bar beneath (reads well at any panel width) */
.sc-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n v" "b b";row-gap:6px;padding:10px var(--s4) 12px}
.sc-name{grid-area:n;flex-direction:row;align-items:baseline;gap:6px;flex-wrap:wrap}
.sc-val{grid-area:v;flex-direction:row;align-items:baseline;gap:6px;min-inline-size:0}
.sc-bar{grid-area:b}
.dx-hero{flex-wrap:wrap}
.dx-sum{flex:1 1 180px}
.sc-val{flex-direction:column;align-items:flex-end;gap:0;line-height:1.25}
.sc-name{flex-direction:column;align-items:flex-start;gap:0}
.pcard .pc-t{color:var(--ink)!important}

/* ------------------------------------------------------------------ the map's floating legend (open side of the map) */
.map-legend{position:absolute;z-index:3;inset-block-end:calc(var(--gap) * 2 + 44px + env(safe-area-inset-bottom));inset-inline-end:var(--gap);display:flex;flex-direction:column;gap:6px;
  inline-size:max-content;max-inline-size:230px;padding:10px 12px;border-radius:var(--r-lg);background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:.5px solid var(--glass-edge);box-shadow:var(--sh-float);font:400 11.5px/1.35 var(--font);color:var(--ink);animation:popin var(--t) var(--spring)}
.map-legend[hidden]{display:none}
.lg-t{font:600 12.5px/1.3 var(--font);color:var(--ink)}
.lg-i{display:flex;align-items:center;gap:7px;color:var(--ink-2)}
.lg-i i{flex:none;inline-size:12px;block-size:12px;border-radius:3px;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.15)}
.lg-i i.dot{border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 2.5px rgba(0,0,0,.15)}
.lg-ramp{position:relative;inline-size:200px;padding-block-end:16px}
.lg-ramp i{display:block;block-size:8px;border-radius:4px;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12)}
.lg-ramp span{position:absolute;inset-block-end:0;font:500 10.5px var(--font);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.lg-ramp span[style*="40%"]{transform:translateX(-50%)}
.lg-steps{display:flex;inline-size:200px;block-size:8px;border-radius:4px;overflow:hidden}
.lg-steps i{flex:1}
.lg-ends{display:flex;justify-content:space-between;inline-size:200px;font:500 10.5px var(--font);color:var(--muted);font-variant-numeric:tabular-nums}
@media (max-width:760px){
  /* phones: under the scale switch, out of the sheet's way, smaller */
  .map-legend{inset-block:calc(var(--chrome-top) + 48px) auto;max-inline-size:180px;padding:8px 10px;font-size:10.5px}
  .lg-ramp,.lg-steps,.lg-ends{inline-size:160px}
}

/* ------------------------------------------------------------------ feature cards (click on the map) */
.card-pop .maplibregl-popup-content{padding:14px 16px 12px;min-inline-size:220px;animation:popin var(--t) var(--spring)}
.card-pop .maplibregl-popup-close-button{inset-block-start:8px;inset-inline-end:8px;inline-size:26px;block-size:26px;border-radius:50%;background:var(--fill-2);color:var(--muted);font-size:17px;line-height:24px}
[dir=rtl] .card-pop .maplibregl-popup-close-button{right:auto;left:8px}
.card-pop .maplibregl-popup-close-button:hover{background:var(--fill);color:var(--ink)}
.pk-head{display:flex;align-items:flex-start;gap:10px;margin:0 0 8px;padding-inline-end:28px}
.pk-head i{flex:none;inline-size:12px;block-size:12px;margin-top:4px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 2.5px rgba(0,0,0,.15)}
.pk-head b{display:block;font:600 14.5px/1.35 var(--font);color:var(--ink)}
.pk-head small{display:block;font:400 12px/1.35 var(--font);color:var(--muted)}
.place.pk table{inline-size:100%;border-collapse:collapse;font-size:12.5px}
.place.pk td{padding:5px 0;border-bottom:.5px solid var(--separator);vertical-align:top}
.place.pk td:first-child{color:var(--muted);padding-inline-end:12px}
.place.pk td:last-child{text-align:end;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.place.pk tr:last-child td{border-bottom:0}
.place.pk .pk-sub{padding-top:8px;color:var(--muted);font-weight:600;text-align:start!important}
.place.pk .ok{color:var(--ok)}.place.pk .bad{color:var(--warn)}
.place.pk .btns{margin-top:10px}
.place.pk .btn{inline-size:100%}
@media (max-width:760px){.map-legend{inset-inline:auto;right:var(--gap);left:auto}}
/* phones: the feature card docks under the top bar, full width (as iOS cards do), instead of hanging off the point */
@media (max-width:760px){
  .maplibregl-popup.card-pop{transform:none!important;position:fixed;inset-block-start:calc(var(--chrome-top) + 4px);left:var(--gap);right:var(--gap);max-width:none!important;z-index:6}
  .card-pop .maplibregl-popup-tip{display:none}
  .card-pop .maplibregl-popup-content{max-block-size:46vh;overflow:auto}
}

/* the tool bar and its layers panel sit above the floating legend; the legend steps aside while the panel is open */
.maplibregl-ctrl-top-left{z-index:6}
body.lyr-open .map-legend{display:none}
/* sources: collapsed into the ⓘ button (shown on hover or tap), so nothing runs under the scale switch */
.maplibregl-ctrl-attrib.maplibregl-compact{min-block-size:24px;border-radius:12px!important}
.maplibregl-ctrl-attrib.maplibregl-compact:not(:hover):not(.maplibregl-compact-show) .maplibregl-ctrl-attrib-inner{display:none}
.maplibregl-ctrl-attrib.maplibregl-compact:hover .maplibregl-ctrl-attrib-inner{display:block}
@media (min-width:761px){.scale-switch{inset-block-end:calc(var(--gap) * 2 + 8px + env(safe-area-inset-bottom))}}
@media (max-width:760px){.scale-switch{inset-block-end:auto}}
@media (prefers-color-scheme:dark){.scale-switch button{color:var(--label-2)}}
@media (hover:hover){.maplibregl-ctrl-attrib.maplibregl-compact:not(:hover):not(:focus-within) .maplibregl-ctrl-attrib-inner{display:none!important}}
/* dark glass stays neutral over bright maps (yellow housing, imagery) */
@media (prefers-color-scheme:dark){:root{--glass:rgba(28,28,30,.8);--glass-thick:rgba(28,28,30,.92)}}
/* the legend folds to its title (click the title); short screens start folded */
.map-legend .lg-t{display:flex;align-items:center;justify-content:space-between;gap:10px;inline-size:100%;padding:0;border:0;background:none;color:var(--ink);font:600 12.5px/1.3 var(--font);text-align:start;cursor:pointer}
.map-legend .lg-t .chev{flex:none;inline-size:7px;block-size:7px;border-inline-end:1.5px solid var(--muted);border-block-end:1.5px solid var(--muted);transform:rotate(45deg);transition:transform .2s}
.map-legend.min .lg-t .chev{transform:rotate(-135deg)}
.map-legend .lg-b{display:flex;flex-direction:column;gap:6px}
.map-legend.min .lg-b{display:none}
.map-legend.min{padding-block:8px}

/* laptops too: the feature card docks at the top of the map's open side (beside the tool bar), scrolls if long,
   and never runs off the bottom of the screen or under the scale switch; the picked feature stays highlighted */
@media (min-width:761px){
  .maplibregl-popup.card-pop{transform:none!important;position:fixed;inset-block-start:var(--chrome-top);max-width:none!important;inline-size:330px;z-index:7}
  html[dir=rtl] .maplibregl-popup.card-pop{left:calc(var(--gap) + 68px);right:auto}
  html[dir=ltr] .maplibregl-popup.card-pop{right:var(--gap);left:auto}
  .card-pop .maplibregl-popup-tip{display:none}
  .card-pop .maplibregl-popup-content{max-block-size:calc(100vh - var(--chrome-top) - 96px);overflow:auto;scrollbar-width:thin}
}
/* the sources button: glass with a visible ⓘ in both themes; readable text when open */
.maplibregl-ctrl-attrib.maplibregl-compact{background:var(--glass)!important;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:.5px solid var(--glass-edge);box-shadow:var(--sh-float);color:var(--ink)}
.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button{background-color:transparent!important;opacity:.85}
.maplibregl-ctrl-attrib-inner,.maplibregl-ctrl-attrib-inner a{color:var(--ink-2)!important;font:400 11px/1.5 var(--font)}
@media (prefers-color-scheme:dark){.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button{filter:invert(1)}}
body.card-open .map-legend{display:none}