/* PR Data Observatory — Foundation for Puerto Rico
   Design tokens shared with VIEWPR (FPR brand, June 2026 HEX confirmation). */

@font-face { font-family: 'Gotham'; src: url('../fonts/Gotham-Light.woff2')  format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('../fonts/Gotham-Book.woff2')   format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('../fonts/Gotham-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Gotham'; src: url('../fonts/Gotham-Bold.woff2')   format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --color-primary: #338CB3; --color-primary-light: #5FAFDA; --color-primary-dark: #205D7B; --color-secondary: #8FCAE8;
  --color-accent: #FF4D38; --color-success: #79901E; --color-warning: #B56D00; --color-danger: #B82415;
  --fpr-red: #FF4D38; --fpr-yellow: #FFA600; --fpr-green: #A6BF33; --fpr-blue: #338CB3;
  --color-bg: #F2F2F2; --color-surface: #FFFFFF; --color-border: #E6E6E6; --color-border-light: #F2F2F2;
  --color-text: #2A2E2E; --color-text-muted: #666666; --color-text-light: #666666; --color-gray-decor: #8C8E8E; --color-primary-strong: #2A7699;
  --cat-gastronomy: #79901E; --cat-attractions: #338CB3; --cat-accommodations: #FFA600; --cat-services: #FF4D38;
  --ramp-1: #BDE0F2; --ramp-2: #8FCAE8; --ramp-3: #5FAFDA; --ramp-4: #338CB3; --ramp-5: #205D7B;
  --tint-blue-bg: #BDE0F2; --tint-blue-fg: #205D7B; --tint-green-bg: #E4EFB8; --tint-green-fg: #47560F;
  --tint-yellow-bg: #FFE9A8; --tint-yellow-fg: #8A5200; --tint-red-bg: #FFD0C9; --tint-red-fg: #B82415;
  --tint-gray-bg: #E6E6E6; --tint-gray-fg: #2A2E2E;
  --flood-sfha: #1F5F8B; --flood-sfha-v: #0B3D5C; --flood-x500: #8FCAE8; --flood-floodway: #B82415;
  --protected: #47560F;
  --panel-width: 360px; --topbar-height: 56px;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(42,46,46,.08); --shadow-md: 0 4px 12px rgba(42,46,46,.12); --shadow-lg: 0 8px 24px rgba(42,46,46,.16);
  --font: 'Gotham', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: var(--font); font-size: 14px; color: var(--color-text); background: var(--color-bg); overflow: hidden; }
a { color: var(--color-primary-dark); }
button { font-family: inherit; }
.ms-icon { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; direction: ltr; vertical-align: middle; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* ── Layout ─────────────────────────────────────────── */
.topbar { position: fixed; inset: 0 0 auto 0; height: var(--topbar-height); background: var(--color-surface); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: 14px; padding: 0 16px; z-index: 1100; box-shadow: var(--shadow-sm); }
.topbar img { height: 30px; }
.topbar .brand { display: flex; flex-direction: column; line-height: 1.1; }
.topbar .brand b { font-weight: 700; font-size: 15px; letter-spacing: .01em; }
.topbar .brand span { font-size: 11px; color: var(--color-text-muted); }
.topbar .spacer { flex: 1; }
.topbar .snapshot { font-size: 12px; color: var(--color-text-muted); display: flex; align-items: center; gap: 6px; }
.topbar .snapshot b { color: var(--color-text); font-weight: 500; }
.search { position: relative; }
.search input { width: 260px; height: 36px; border: 1px solid var(--color-border); border-radius: 18px; padding: 0 12px 0 36px; font: inherit; background: var(--color-bg); }
.search input:focus { outline: 2px solid var(--color-primary-dark); outline-offset: 1px; border-color: var(--color-primary-dark); background: #fff; }
.search .ms-icon { position: absolute; left: 11px; top: 9px; color: var(--color-text-light); font-size: 18px; }
.search-results { position: absolute; top: 40px; left: 0; width: 360px; max-height: 320px; overflow: auto; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); display: none; z-index: 1200; }
.search-results.open { display: block; }
.search-results .item { display: flex; gap: 10px; align-items: center; padding: 8px 12px; cursor: pointer; border: 0; border-bottom: 1px solid var(--color-border-light); width: 100%; text-align: left; background: #fff; font: inherit; color: inherit; }
.search-results .item.none { cursor: default; }
.search-results .item:hover, .search-results .item:focus-visible { background: var(--tint-blue-bg); }
.search-results .item small { display: block; color: var(--color-text-muted); }
.icon-btn { border: 1px solid var(--color-border); background: #fff; border-radius: 50%; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--color-text-muted); }
.icon-btn:hover { color: var(--color-primary-dark); border-color: var(--color-primary-light); }
.menu-btn { display: none; }

#map { position: fixed; top: var(--topbar-height); left: var(--panel-width); right: 0; bottom: 0; background: #d9e6ee; }
.panel { position: fixed; top: var(--topbar-height); left: 0; bottom: 0; width: var(--panel-width); background: var(--color-surface); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; z-index: 1000; }
.tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--color-border); }
.tabs.tabs-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 860px) { .tabs.tabs-5 { grid-template-columns: repeat(3, 1fr); } }   /* a phone: three rows of three, so no label runs into the next */
.tabs.tabs-5 button { padding-left: 0; padding-right: 0; white-space: nowrap; }   /* the 2D map: nine tabs, five and four (the Region tab, docs/regions.md); a label never breaks inside a word */
.tabs button { min-width: 0; border: 0; background: none; padding: 10px 2px; font-size: 12px; font-weight: 500; line-height: 1.2; text-align: center; color: var(--color-text-muted); cursor: pointer; border-bottom: 2px solid transparent; display: flex; align-items: center; justify-content: center; gap: 5px; }
.tabs button .ms-icon { font-size: 18px; }
.tabs button.active { color: var(--color-primary-dark); border-bottom-color: var(--color-primary); }
/* Spanish labels run longer than English ones (Transporte, Posiciones): trim the side padding so the six tabs of the map panel fit without scrolling */
html[lang="es"] .tabs button { padding-left: 3px; padding-right: 3px; }
.subtabs { display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--color-border); overflow-x: auto; scrollbar-width: none; }   /* the sub-tabs of the open main tab (decision 81) */
.subtabs[hidden] { display: none; }
.subtabs button { flex: none; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); border-radius: 999px; padding: 4px 12px; font: 500 12.5px var(--font); line-height: 1.3; cursor: pointer; white-space: nowrap; }
.subtabs button:hover { color: var(--color-primary-dark); border-color: var(--color-primary); }
.subtabs button.active { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }
.subtabs button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.tab-page { display: none; overflow: auto; flex: 1; padding: 14px 16px 24px; }
.tab-page.active { display: block; }
.tab-page[data-t-wait] > * { visibility: hidden; }   /* a tab whose text is translated when it first opens (the About tab: app.js, loadAboutText) waits unseen until then */
/* Tools › Map tools (decision 97, js/maptools.js): a button with the tool's name, then one sentence (outside the button, so the glossary can mark its terms) */
.mt-h { margin-top: 14px; }
.mt-list { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 4px; }
.mt-item { background: #fff; border: 1px solid #e3e6e8; border-radius: 6px; padding: 6px 10px 8px; }
.mt-item:hover, .mt-item:focus-within { border-color: var(--color-primary); background: #f5fafd; }
.mt-tool { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; font-weight: 600; color: var(--color-primary-dark); background: none; border: 0; padding: 2px 0; cursor: pointer; }
.mt-tool:hover { text-decoration: underline; }
.mt-tool:focus-visible { outline: 2px solid var(--color-primary-dark); outline-offset: 2px; border-radius: 3px; }
.mt-tool > .ms-icon { font-size: 20px; flex: none; }
.mt-desc { margin: 2px 0 0 30px; font-size: 12px; color: var(--color-text-muted); line-height: 1.35; }
/* Measure distance and area / Draw an area (decision 97 step 2, js/measure.js): a box at the top left of the map */
.ms-box { background: #fff; border: 1px solid #d5dadd; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,.15); padding: 8px 10px; width: 280px; max-width: calc(100vw - 80px); font-size: 13px; color: var(--color-text); }
.ms-box .ms-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ms-box .ms-modes { display: flex; gap: 4px; }
.ms-box .ms-modes [aria-pressed="true"] { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }
.ms-box .ms-read { margin: 8px 0 6px; line-height: 1.45; }
.ms-box .ms-read b { color: var(--color-primary-dark); margin-right: 4px; }
.ms-box .ms-warn { margin-top: 4px; color: #9A3412; }
.ms-box .ms-msg { margin-top: 4px; color: var(--color-text-muted); }
.ms-box .note { font-size: 12px; margin: 0 0 6px; }
.ms-box .btn-row { display: flex; flex-wrap: wrap; gap: 4px; }
.ms-box [hidden] { display: none !important; }

/* ── Panel content ──────────────────────────────────── */
h2.sec, h3.sec { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--color-text-light); margin: 18px 0 8px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
h2.sec:first-child, h3.sec:first-child { margin-top: 2px; }
/* Collapsible groups (js/common.js initFolds): a heading button, a count of what is on, and a body that is closed until it is opened */
.fold + .fold { border-top: 1px solid var(--color-border-light); }
.fold h2.sec { margin: 0; }
.fold-toggle { width: 100%; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 2px; background: none; border: 0; border-radius: 6px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; text-align: left; cursor: pointer; }
.fold-toggle:hover { color: var(--color-text); }
.fold-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.fold-title { flex: 1; display: flex; align-items: center; gap: 6px; }
.fold-count { flex: none; padding: 2px 8px; border-radius: 10px; background: var(--tint-blue-bg); color: var(--tint-blue-fg); font-size: 10.5px; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.fold-chevron { flex: none; font-size: 20px; transition: transform .15s; }
.fold-toggle[aria-expanded="true"] .fold-chevron { transform: rotate(180deg); }
.fold-body { padding: 0 2px 12px; }
.fold-body[hidden] { display: none; }
.fold-body > :last-child { margin-bottom: 0; }
.fold-body h3.lsub { margin: 14px 0 0; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--color-text); }   /* a subheading inside a group of the layer menu (js/core/layers.js) */
.fold-body h3.lsub:first-child { margin-top: 4px; }
@media (max-width: 860px) { .fold-toggle { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .fold-chevron { transition: none; } }
.layer { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--color-border-light); }
.layer label { flex: 1; display: flex; align-items: center; gap: 9px; cursor: pointer; }
.layer input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--color-primary); margin: 0; }
.layer .sw { width: 16px; height: 16px; border-radius: 4px; flex: none; border: 1px solid rgba(0,0,0,.12); }
.layer .sw.pin { border-radius: 50%; }
.layer .sw.hatch { background: repeating-linear-gradient(45deg, var(--flood-sfha) 0 3px, #fff 3px 6px); }
.layer .sw.line { height: 3px; border: 0; border-radius: 2px; }
.layer small { color: var(--color-text-light); font-size: 11px; }
.layer .ms-icon { color: var(--color-text-light); font-size: 18px; }
.layer .help { cursor: pointer; color: var(--color-text-light); font-size: 16px; }
.layer .help:hover { color: var(--color-primary-dark); }
.sub { padding-left: 26px; }
.sub .layer { border-bottom: 0; padding: 4px 0; }
.ctrl { padding: 8px 0 4px; }
.ctrl label { display: flex; justify-content: space-between; font-size: 12px; color: var(--color-text-muted); margin-bottom: 4px; }
.ctrl label b { color: var(--color-text); font-weight: 500; }
.ctrl input[type=range] { width: 100%; accent-color: var(--color-primary); }
.ctrl select { width: 100%; height: 32px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; padding: 0 8px; background: #fff; }
/* the columns from any dataset of the Economy tab (plan item 16, B7): height, colour and year */
.eng-ctl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 8px; align-items: center; margin-top: 8px; }
.eng-ctl[hidden] { display: none; }
.eng-ctl label { font-size: 12px; }
.slr-ticks { display: flex; justify-content: space-between; font-size: 10px; color: var(--color-text-light); margin-top: -2px; }
.toggle { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-text-muted); padding: 6px 0; }
.toggle input { accent-color: var(--color-primary); }
.note { font-size: 11.5px; color: var(--color-text-muted); line-height: 1.45; margin: 6px 0; }
.note b { color: var(--color-text); font-weight: 500; }
.legend-box { background: var(--color-bg); border-radius: var(--radius-md); padding: 10px 12px; margin-top: 8px; }
.legend-box .row { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 2px 0; }
.legend-box .row .sw { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,.1); flex: none; }
.ramp { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin: 6px 0 2px; }
.ramp span { flex: 1; }
.ramp-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--color-text-light); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.chip { font-family: inherit; display: inline-flex; align-items: center; gap: 5px; border-radius: 14px; padding: 4px 10px 4px 7px; font-size: 12px; font-weight: 500; cursor: pointer; border: 1px solid transparent; user-select: none; }
.chip.off { background: #fff !important; color: #666 !important; border: 1px dashed #B3B3B3; }
.chip .ms-icon { font-size: 15px; }

/* KPIs */
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0; }
.kpi { background: var(--color-bg); border-radius: var(--radius-md); padding: 10px 12px; }
.kpi .v { font-size: 20px; font-weight: 700; color: var(--color-primary-dark); line-height: 1.1; }
.kpi .l { font-size: 11px; color: var(--color-text-muted); margin-top: 3px; display: flex; align-items: center; gap: 4px; }
.kpi.warn .v { color: var(--color-danger); }
.kpi.green .v { color: var(--tint-green-fg); }
.bars { margin: 6px 0; }
.bar { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; font-size: 12px; padding: 3px 0; }
.bar .track { height: 8px; background: var(--color-border-light); border-radius: 4px; overflow: hidden; }
.bar .fill { height: 100%; border-radius: 4px; }
.bar em { font-style: normal; font-weight: 500; min-width: 36px; text-align: right; }
.muni-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.muni-head h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--color-primary-dark); }
.muni-head small { color: var(--color-text-muted); display: block; font-size: 12px; }
.muni-prof { margin-top: 4px; font-size: 12.5px; }
.muni-prof a { display: inline-flex; align-items: center; gap: 4px; }
.muni-prof .ms-icon { font-size: 16px; }
.empty { color: var(--color-text-muted); font-size: 13px; line-height: 1.5; padding: 10px 0; }
table.rank { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; }
table.rank th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-light); padding: 6px 4px; border-bottom: 1px solid var(--color-border); vertical-align: bottom; }
table.rank th.sorted { color: var(--color-primary-dark); }
table.rank td { padding: 5px 4px; border-bottom: 1px solid var(--color-border-light); }
table.rank td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.rank tr.row { cursor: pointer; }
table.rank tr.row:hover td { background: var(--color-bg); }
table.rank tr.me td { background: var(--tint-blue-bg); font-weight: 500; }
.btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--color-border); background: #fff; border-radius: 18px; padding: 7px 14px; font-size: 12px; font-weight: 500; cursor: pointer; color: var(--color-text); }
.btn:hover { border-color: var(--color-primary-light); color: var(--color-primary-dark); }
.osmi-btn { margin-top: 6px; }
.osmi-btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.primary { background: var(--color-primary-strong); color: #fff; border-color: var(--color-primary-strong); }
.btn.primary:hover { background: var(--color-primary-dark); }
.btn .ms-icon { font-size: 16px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }

/* Sources list */
.src { padding: 8px 0; border-bottom: 1px solid var(--color-border-light); font-size: 12px; line-height: 1.45; }
.src b { display: block; font-weight: 500; }
.src span { color: var(--color-text-muted); display: block; }
.src a { font-size: 11.5px; word-break: break-all; }
.layer small.src, .toggle small.src { padding: 0; border: 0; line-height: inherit; }   /* a layer's source in the menus is a note in its row, not a row of the sources list */

/* ── Map UI ─────────────────────────────────────────── */
.leaflet-container { font-family: var(--font); font-size: 13px; }
.leaflet-control-attribution { font-size: 10px; max-width: 70vw; background: rgba(255,255,255,.85) !important; }
.asset-marker { width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); display: flex; align-items: center; justify-content: center; }
.asset-marker .ms-icon { transform: rotate(45deg); }
.asset-marker.is-sfha { outline: 2px solid var(--flood-sfha-v); outline-offset: 1px; }
.marker-cluster { background-clip: padding-box; border-radius: 50%; }
.marker-cluster div { width: 32px; height: 32px; margin: 4px; border-radius: 50%; text-align: center; line-height: 32px; font-weight: 700; font-size: 12px; color: #fff; }
.marker-cluster-small { background: rgba(95,175,218,.4); } .marker-cluster-small div { background: var(--color-primary-light); color: #0E2C3C; }
.marker-cluster-medium { background: rgba(51,140,179,.4); } .marker-cluster-medium div { background: var(--color-primary-strong); }
.marker-cluster-large { background: rgba(32,93,123,.4); } .marker-cluster-large div { background: var(--color-primary-dark); }
.leaflet-popup-content-wrapper { border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.leaflet-popup-content { margin: 12px 14px; min-width: 240px; }
.pop h4 { margin: 0 0 4px; font-size: 14px; font-weight: 700; display: flex; align-items: flex-start; gap: 8px; }
.pop .meta { font-size: 12px; color: var(--color-text-muted); margin: 2px 0; }
.pop .flags { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 4px; }
.badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 12px; padding: 3px 9px 3px 6px; font-size: 11px; font-weight: 500; white-space: nowrap; }
.badge .ms-icon { font-size: 14px; }
.badge.wrap { white-space: normal; max-width: 100%; line-height: 1.25; }   /* a long label (the access class in Spanish) wraps instead of spilling out of a pop-up */
.badge.sfha { background: var(--tint-blue-bg); color: var(--tint-blue-fg); }
.badge.x500 { background: #E6EEF3; color: var(--color-primary-dark); }
.badge.prot { background: var(--tint-green-bg); color: var(--tint-green-fg); }
.badge.conf { background: var(--tint-gray-bg); color: var(--tint-gray-fg); }
.badge.low { background: var(--tint-yellow-bg); color: var(--tint-yellow-fg); }
.pop .links { margin-top: 8px; display: flex; gap: 10px; font-size: 12px; }
.pop .src { border: 0; padding: 6px 0 0; font-size: 10.5px; color: var(--color-text-light); }
.type-icon { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex: none; }
.muni-label { background: none; border: 0; box-shadow: none; font-weight: 700; font-size: 11px; color: var(--color-primary-dark); text-shadow: 0 0 3px #fff, 0 0 3px #fff; text-align: center; white-space: nowrap; }
.map-toast { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: #fff; border-radius: 20px; padding: 8px 16px; box-shadow: var(--shadow-md); font-size: 12px; z-index: 900; display: none; align-items: center; gap: 8px; }
.map-toast.show { display: flex; }
.map-toast .ms-icon { color: var(--color-primary); }
.leaflet-bar a { color: var(--color-text); }
.hover-info { position: absolute; bottom: 24px; left: 12px; z-index: 900; background: rgba(255,255,255,.95); border-radius: var(--radius-md); padding: 8px 12px; box-shadow: var(--shadow-md); font-size: 12px; max-width: 300px; display: none; pointer-events: none; }
.hover-info.show { display: block; }
.hover-info b { display: block; font-size: 13px; color: var(--color-primary-dark); }

/* Help popover */
.help-pop { position: fixed; z-index: 1300; max-width: 300px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 12px 14px; font-size: 12.5px; line-height: 1.5; display: none; }
.help-pop.show { display: block; }
.help-pop b { display: block; margin-bottom: 4px; font-size: 13px; }
.help-pop .close { position: absolute; top: 6px; right: 6px; cursor: pointer; color: var(--color-text-light); font-size: 16px; }

/* Loading */
.loader { position: fixed; inset: 0; background: rgba(242,242,242,.92); z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; font-size: 13px; color: var(--color-text-muted); }
.loader.hide { display: none; }
.loader .spin { width: 36px; height: 36px; border: 4px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Mobile ─────────────────────────────────────────── */
@media (max-width: 860px) {
  :root { --panel-width: 0px; }
  .menu-btn { display: inline-flex; flex: none; }
  .topbar { gap: 8px; padding: 0 8px; }
  .topbar .snapshot, .topbar .brand, .topbar .spacer { display: none; }
  .topbar img { height: 26px; }
  .search { flex: 1; min-width: 0; }
  .search input { width: 100%; }
  .panel { width: min(360px, 88vw); transform: translateX(-100%); transition: transform .25s; box-shadow: var(--shadow-lg); z-index: 1150; }
  .panel.open { transform: none; }
  #map { left: 0; }
  .search-results { position: fixed; top: calc(var(--topbar-height) - 2px); left: 8px; right: 8px; width: auto; max-height: 50vh; }
  .panel-close { display: inline-flex; }
  .leaflet-control-attribution { max-width: 60vw; font-size: 9px; }
  .map-legend { max-width: 60vw; }
}

/* Mobility markers */
.mob-marker { border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; }
.marker-cluster-stops { background: rgba(32,93,123,.3); }
.marker-cluster-stops div { background: #205D7B; }
.legend-box .row .sw[style*="dashed"] { height: 0; }

.topbar .btn { text-decoration: none; height: 34px; }
/* Language switch (ES | EN), mounted by js/i18n.js */
.lang-switch { display: inline-flex; flex: none; height: 30px; border: 1px solid var(--color-border); border-radius: 999px; overflow: hidden; background: var(--color-surface); }
.lang-switch button { border: 0; background: transparent; padding: 0 10px; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--color-text-muted); cursor: pointer; }
.lang-switch button:hover:not([aria-pressed="true"]) { background: var(--color-bg); color: var(--color-text); }
.lang-switch button[aria-pressed="true"] { background: var(--tint-blue-bg); color: var(--tint-blue-fg); cursor: default; }
@media (max-width: 860px) { .lang-switch { height: 36px; } .lang-switch button { padding: 0 9px; } }
@media (max-width: 860px) {
  /* icon-only view buttons; the text stays in the accessibility tree */
  .topbar .views .btn { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; }
  .topbar .views .btn .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ── Accessibility and shared controls (QA pass 2026-10-01) ─────────────── */
.sr-only, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { position: fixed; top: 8px; left: 8px; z-index: 3000; background: #fff; color: var(--color-primary-dark); padding: 8px 14px; border-radius: 8px; box-shadow: var(--shadow-md); }
:focus-visible { outline: 3px solid var(--color-primary-dark); outline-offset: 2px; }
.topbar h1, .brand h1 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .01em; line-height: 1.1; }
.topbar .logo { display: inline-flex; flex: none; }
.topbar .views { display: flex; gap: 8px; }
.topbar .views .btn[aria-current="page"] { background: var(--tint-blue-bg); border-color: var(--tint-blue-bg); color: var(--tint-blue-fg); pointer-events: none; }
.help-btn { border: 0; background: none; padding: 4px; margin: -4px; border-radius: 50%; cursor: pointer; color: var(--color-text-light); display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex: none; min-width: 24px; min-height: 24px; }
.help-btn .ms-icon { font-size: 16px; }
.help-btn:hover { color: var(--color-primary-dark); }
.help-close { position: absolute; top: 2px; right: 2px; border: 0; background: none; cursor: pointer; color: var(--color-text-light); padding: 6px; border-radius: 50%; line-height: 1; }
.help-close .ms-icon { font-size: 18px; }
.help-pop { padding-right: 34px; }
button.linklike { border: 0; background: none; padding: 2px 0; margin: 0; font: inherit; color: var(--color-primary-dark); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; text-align: left; }
button.linklike.sortbtn { text-decoration: none; text-transform: inherit; letter-spacing: inherit; font-size: inherit; font-weight: 700; text-align: right; white-space: normal; }
span.chip { cursor: default; }
button.chip { min-height: 28px; }
.panel-close { display: none; position: absolute; top: 8px; right: 8px; z-index: 2; width: 32px; height: 32px; }
.backdrop { display: none; position: fixed; inset: var(--topbar-height) 0 0 0; background: rgba(42,46,46,.4); z-index: 1120; }
.backdrop.show { display: block; }
.panel[inert] { visibility: hidden; }
@media (min-width: 861px) {   /* a wide screen: the panel's × folds it away and the map takes its width; the menu button brings it back (common.js foldPanel) */
  .panel-close { display: inline-flex; }
  .panel .tabs { padding-right: 40px; }
  body.panel-folded { --panel-width: 0px; }
  body.panel-folded .panel { display: none; }
  body.panel-folded .menu-btn { display: inline-flex; flex: none; }
}
@media (max-width: 860px) { .tabs { padding-right: 44px; } .tabs button { padding: 10px 1px; font-size: 11px; } .tabs button .ms-icon { display: none; } }
.map-legend { position: absolute; left: 12px; bottom: 34px; z-index: 880; background: rgba(255,255,255,.94); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 8px 12px; font-size: 11.5px; display: none; }
.map-legend.show { display: block; }
.map-legend .legend-title { font-weight: 700; margin-bottom: 4px; font-size: 11.5px; }
.map-legend .row, .legend-box .row { display: flex; align-items: center; gap: 8px; padding: 1px 0; }
.map-legend .row .sw { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,.15); flex: none; }
.legend-box .legend-title { font-weight: 700; font-size: 12px; margin-bottom: 4px; }
.legend-box .row small { color: var(--color-text-muted); margin-left: auto; }
.layer:has(#lyWcrp:not(:checked)) + #wcrpLegend { display: none; }   /* the WCRP legend shows only while its layer is on, in both views */
.hover-info { bottom: 34px; left: auto; right: 12px; }
.pop .id-sec + .id-sec { border-top: 1px solid var(--color-border); margin-top: 8px; padding-top: 8px; }
.pop .links button.linklike { font-size: 12px; }
dl.terms { margin: 6px 0; font-size: 12px; line-height: 1.45; }
dl.terms dt { font-weight: 700; margin-top: 6px; }
dl.terms dd { margin: 0; color: var(--color-text-muted); }
.loader.error .spin { display: none; }
.loader .btn { margin-left: 4px; }
.kpi .l .help-btn { margin: -4px 0 -4px 2px; }
.layer label { min-height: 24px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* topbar fit between phone and wide desktop */
.topbar .btn, .topbar .snapshot { white-space: nowrap; }
@media (max-width: 1240px) { .topbar .brand span { display: none; } }
@media (min-width: 861px) and (max-width: 1100px) { .search input { width: 200px; } }
@media (max-width: 860px) { .panel-close { display: inline-flex; } }

/* a failed load must not trap the visitor: the error panel sits below the topbar so the other views stay reachable */
.loader.error { inset: var(--topbar-height) 0 0 0; z-index: 1050; }
/* if the icon font cannot load, hide the icon names instead of printing them as words */
.no-icons .ms-icon { visibility: hidden; }

a.btn { text-decoration: none; }

/* ── Transit network tab ───────────────────────────────────────────────── */
.pill { display: inline-block; border-radius: 10px; padding: 1px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; vertical-align: middle; }
.pill.ok { background: var(--tint-green-bg); color: var(--tint-green-fg); }
.pill.warn { background: var(--tint-yellow-bg); color: var(--tint-yellow-fg); }
.pill.bad { background: var(--tint-red-bg); color: var(--tint-red-fg); }
.pill.none { background: var(--tint-gray-bg); color: var(--tint-gray-fg); }
.pill.info { background: var(--tint-blue-bg); color: var(--tint-blue-fg); }
.live-row { display: grid; grid-template-columns: 92px 1fr; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--color-border-light); font-size: 12px; align-items: start; }
.live-row small { display: block; color: var(--color-text-muted); line-height: 1.4; margin-top: 2px; }
.op-row { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--color-border-light); align-items: start; font-size: 12.5px; }
.op-dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 3px; }
.op-main small { display: block; color: var(--color-text-muted); font-size: 11px; line-height: 1.4; margin-top: 2px; }
.op-btn { padding: 4px 10px; font-size: 11.5px; white-space: nowrap; }
.op-btn[aria-pressed="true"] { background: var(--tint-blue-bg); border-color: var(--tint-blue-bg); color: var(--tint-blue-fg); }
#sketchOut .kpis { margin-top: 4px; }
.live-row { grid-template-columns: 104px 1fr; }
.live-row .pill { white-space: normal; text-align: center; line-height: 1.25; padding: 3px 6px; }

/* ── Place search and route planner ─────────────────────────────────────── */
.search-results .item .ms-icon { flex: none; }
.search-results .item.online { color: var(--color-text-muted); }
.search-pin-wrap, .plan-marker-wrap { background: none; border: 0; }
.search-pin { width: 20px; height: 20px; margin: 2px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #B82415; border: 2px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.45); }
.pop .links { flex-wrap: wrap; }
.plan-rows { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.plan-row { display: flex; align-items: center; gap: 6px; }
.plan-dot { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; }
.plan-dot.a, .plan-marker.a { background: #607316; }
.plan-dot.z, .plan-marker.z { background: #B82415; }
.plan-dot.v, .plan-marker.v { background: #205D7B; }
.plan-field { position: relative; flex: 1; min-width: 0; }
.plan-in { width: 100%; height: 34px; border: 1px solid var(--color-border); border-radius: 17px; padding: 0 12px; font: inherit; font-size: 13px; background: #fff; }
.plan-in:focus { outline: 2px solid var(--color-primary-dark); outline-offset: 1px; border-color: var(--color-primary-dark); }
.search-results.plan-list { top: 38px; left: 0; width: 100%; max-height: 260px; }
.icon-btn.small { width: 28px; height: 28px; flex: none; }
.icon-btn[aria-pressed="true"], .btn[aria-pressed="true"] { background: var(--tint-blue-bg); border-color: var(--color-primary-dark); color: var(--tint-blue-fg); }
.plan-legs { font-size: 12px; margin: 6px 0; }
.plan-legs div { padding: 4px 0; border-bottom: 1px solid var(--color-border-light); }
.plan-legs span { color: var(--color-text-muted); white-space: nowrap; }
.plan-marker { width: 28px; height: 28px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.45); cursor: grab; }
.plan-out .kpis { margin-top: 4px; }
.plan-out h3.plan-sub { font-size: 13px; margin: 14px 0 2px; color: var(--color-text); }   /* the existing service near a planned route (plan.js) */
@media (max-width: 860px) { .search-results.plan-list { position: absolute; left: 0; right: 0; width: auto; top: 38px; max-height: 40vh; } }
.plan-btns { display: flex; gap: 4px; flex: none; }
@media (max-width: 860px) { .plan-row.via { flex-wrap: wrap; } .plan-row.via .plan-btns { flex-basis: 100%; justify-content: flex-end; } }

/* ── About tab and top bar room for the Data dictionary link (2026-10-03) ── */
.about-lead { background: var(--tint-blue-bg); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 10px; }
.about-h { margin: 0 0 8px; font-size: 17px; color: var(--tint-blue-fg); }
.about-lead p { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--color-text); }
.about-lead p:last-child { margin-bottom: 0; }
.about-lead a { color: var(--tint-blue-fg); }
.about-list, .about-steps { margin: 6px 0 8px; padding-left: 20px; font-size: 12.5px; line-height: 1.5; }
.about-list li, .about-steps li { margin: 5px 0; }
.about-list.tight li { margin: 4px 0; }
.about-d { border-top: 1px solid var(--color-border); padding: 4px 0; }
.about-d:last-of-type { border-bottom: 1px solid var(--color-border); }
.about-d summary { cursor: pointer; padding: 7px 0; font-weight: 500; font-size: 13px; color: var(--color-primary-dark); }
.about-dl { margin: 0 0 8px; }
.about-dl dt { font-weight: 700; font-size: 12.5px; margin-top: 8px; }
.about-dl dd { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--color-text-muted); }
kbd { font: 11px ui-monospace, Consolas, monospace; background: var(--color-bg); border: 1px solid var(--color-border); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; }
/* The top bar by width. The longer name (PR Data Observatory), the language switch and the Spanish labels need more room than the old bar had. Measured in the browser, the English bar needs
   about 1,390 px with every label and 1,100 px with the view buttons as icons; the Spanish one about 1,520 px and 1,170 px; with the chat button as an icon and no snapshot date, about 850 px and 910 px.
   The subtitle (a list of the areas, built from the registry) is held to 300 px and two lines, and shows only where the bar has room for it (English 1,520 px, Spanish 1,600 px). */
.topbar .brand { flex: none; }
.topbar .brand span { max-width: 300px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1519px) { .topbar .brand span { display: none; } }
@media (max-width: 1599px) { html[lang="es"] .topbar .brand span { display: none; } }
@media (min-width: 861px) and (max-width: 1400px) {
  .topbar .views .btn .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .topbar .views .btn { width: 36px; padding: 0; justify-content: center; border-radius: 50%; }
}
@media (min-width: 1401px) and (max-width: 1520px) {   /* Spanish labels are longer (Preguntar, Diccionario de datos) */
  html[lang="es"] .topbar .views .btn .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html[lang="es"] .topbar .views .btn { width: 36px; padding: 0; justify-content: center; border-radius: 50%; }
}
@media (min-width: 861px) and (max-width: 1180px) {
  .topbar .chat-btn { width: 36px; height: 36px; flex: none; padding: 0; justify-content: center; border-radius: 50%; }
  .topbar .chat-btn .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 861px) and (max-width: 1100px) { .topbar .snapshot { display: none; } }
@media (min-width: 861px) and (max-width: 920px) { .search input { width: 150px; } }
/* A phone: two rows (the menu, the logo, the chat and the language switch; then the search and the views), because one row needs about 560 px. The chat sits on the first
   row since the 44 px touch targets (below): on the second it left the search box about 80 px at 320 px. The views span the last two columns, which the first row's
   chat and language switch share. */
@media (max-width: 560px) {
  :root { --topbar-height: 92px; }
  .topbar { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; grid-template-areas: "menu logo . chat lang" "search search search views views"; align-items: center; row-gap: 8px; column-gap: 8px; padding: 4px 8px; }
  .topbar .menu-btn { grid-area: menu; }
  .topbar .logo { grid-area: logo; }
  .topbar .lang-switch { grid-area: lang; justify-self: end; }
  .topbar .search { grid-area: search; min-width: 0; }
  .topbar .chat-btn { grid-area: chat; justify-self: end; }
  .topbar .views { grid-area: views; justify-self: end; }
}
/* A very small phone (320 to 359 px, an old iPhone SE or a folded phone): a smaller logo and less padding */
@media (max-width: 359px) {
  .topbar { padding: 4px 6px; }
  .topbar img { height: 22px; }
}
/* Touch targets on a phone or a tablet (Francis, 2026-10-29; HANDOFF decision 65): every button and link of the top bar answers in a 44 x 44 px square (WCAG 2.5.5),
   while the visible circles stay 36 px. An invisible ::after makes the square; 8 px between the circles keep the squares apart (no tap lands on two). The pages'
   own ".topbar .btn { height: 34px }" (housing.css, twin3d.css, dictionary.css) is outdone by the doubled class. tests/browser/usability.js measures it. */
@media (max-width: 860px) {
  .topbar .menu-btn, .topbar .btn.chat-btn.btn, .topbar .views .btn.btn, .topbar .lang-switch button, .topbar .logo { position: relative; }
  .topbar .btn.chat-btn.btn, .topbar .views .btn.btn { width: 36px; height: 36px; }
  .topbar .menu-btn::after, .topbar .chat-btn::after, .topbar .views .btn::after, .topbar .lang-switch button::after, .topbar .logo::after {   /* 44 px around the centre, or the element's own size where it is larger */
    content: ""; position: absolute; top: calc(50% - 22px); bottom: calc(50% - 22px); left: min(0px, calc(50% - 22px)); right: min(0px, calc(50% - 22px)); }
  .topbar .views { gap: 8px; }
  .topbar .lang-switch { overflow: visible; }
  .topbar .lang-switch button { min-width: 44px; border-radius: 0; }
  .topbar .lang-switch button:first-child { border-radius: 999px 0 0 999px; }
  .topbar .lang-switch button:last-child { border-radius: 0 999px 999px 0; }
}
.topbar .brand { min-width: 0; }
.topbar .brand h1, .topbar .brand b { white-space: nowrap; }

/* ── Overview and Catalog tabs (item 3) ────────────────────────────────────── */
.tabs button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.tabs button:hover { color: var(--color-primary-dark); }
.ov-lead { background: var(--tint-blue-bg); border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 12px; }
.ov-lead h2 { margin: 0 0 6px; font-size: 16px; color: var(--tint-blue-fg); }
.ov-lead p { margin: 0; font-size: 12.5px; line-height: 1.5; }
.dom-card { --tb: var(--tint-blue-bg); --tf: var(--tint-blue-fg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px 14px 10px; margin: 0 0 10px; background: #fff; }
.dom-card[data-tint="green"] { --tb: var(--tint-green-bg); --tf: var(--tint-green-fg); }
.dom-card[data-tint="yellow"] { --tb: var(--tint-yellow-bg); --tf: var(--tint-yellow-fg); }
.dom-card[data-tint="red"] { --tb: var(--tint-red-bg); --tf: var(--tint-red-fg); }
.dc-head { display: flex; align-items: center; gap: 8px; }
.dc-ic { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; background: var(--tb); color: var(--tf); }
.dc-head h3 { margin: 0; font-size: 14px; flex: 1; }
.dc-status { flex: none; font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 10px; background: var(--tint-gray-bg); color: var(--tint-gray-fg); }
.dc-desc { margin: 6px 0 4px; font-size: 12px; color: var(--color-text-muted); line-height: 1.45; }
.dc-empty { margin: 8px 0 2px; font-size: 12px; line-height: 1.45; }
.dm { border-top: 1px solid var(--color-border-light); padding: 8px 0 4px; margin-top: 6px; }
.dm-name { font-size: 12px; line-height: 1.35; }
.dm-sub { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--color-text-muted); }
.dm-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 3px; }
.dm-val { font-size: 22px; font-weight: 700; line-height: 1.1; color: var(--tf); overflow-wrap: anywhere; }
.spark { flex: none; color: var(--tf); }
.dm-per { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }
.dm-act { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 7px; font-size: 12px; }
.dc-foot { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--color-border-light); font-size: 12px; }
.ex-find { margin: 6px 0 10px; }
.ex-back { display: inline-flex; align-items: center; gap: 4px; margin: 2px 0 6px; }
#exDomain h2 { display: flex; align-items: center; gap: 6px; margin: 4px 0; font-size: 17px; }
.ex-sub { margin: 14px 0 2px; font-size: 14px; }
.ex-also { margin: 12px 0 4px; } .ex-also summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.ex-ka a { display: inline-flex; align-items: center; gap: 6px; } .ex-ka .ms-icon { font-size: 18px; }
.ex-views { display: grid; gap: 8px; margin: 4px 0 10px; } .ex-view { border: 1px solid var(--color-border-light); border-radius: var(--radius-md); padding: 8px 10px; }
.ex-view .note { margin: 6px 0 0; } .ex-src { margin: 4px 0 0; font-size: 11px; color: var(--color-text-muted); overflow-wrap: anywhere; }
.btn.small { padding: 4px 10px; font-size: 11.5px; gap: 4px; }
.btn.small .ms-icon { font-size: 14px; }
.btn.small[data-eclevel] { min-height: 32px; }   /* the buttons for the areas below the municipality: a target that is easy to hit on a phone */
.cat-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin: 8px 0 4px; }
.cat-filters label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--color-text-muted); min-width: 0; }
.cat-filters label.wide { grid-column: 1 / -1; }
.cat-filters label.chk { flex-direction: row; align-items: center; gap: 6px; color: var(--color-text); font-size: 12px; }
.cat-filters select, #catQ { width: 100%; min-width: 0; font: inherit; font-size: 12px; padding: 6px 8px; border: 1px solid var(--color-border); border-radius: 8px; background: #fff; color: var(--color-text); }
.cat-filters select:focus-visible, #catQ:focus-visible { outline: 2px solid var(--color-primary-dark); outline-offset: 1px; }
.cat-row { display: flex; gap: 10px; justify-content: space-between; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--color-border-light); }
.cr-main { min-width: 0; }
.cr-name { font-size: 12.5px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.cr-meta { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; line-height: 1.4; }
.cr-meta .ms-icon { font-size: 13px; }
.cr-act { flex: none; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; font-size: 11.5px; }
.btn-row[hidden] { display: none; }
.dc-foot { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.dc-planned { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--color-border-light); }
.dc-planned[hidden] { display: none; }
.dc-planned .plain-list { margin: 0; padding-left: 16px; font-size: 12px; line-height: 1.4; }
.dc-planned .plain-list li { margin: 0 0 6px; }
.dc-planned .tag { display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 8px; background: var(--tint-gray-bg); color: var(--tint-gray-fg); vertical-align: 1px; }

/* ── Land use: classes on the map, and the analysis panel (js/landuse_view.js) ── */
.legend-box label.lu-cls { cursor: pointer; }
.legend-box label.lu-cls input { margin: 0; accent-color: var(--color-primary); }
.legend-box .legend-title small { font-weight: 400; color: var(--color-text-muted); margin-left: 4px; }
.lu-open { margin: 4px 0 2px; }
.lu-bench .eb-head { flex-wrap: wrap; }
.lu-title { font-size: 14px; margin: 0; flex: 1; display: flex; align-items: center; gap: 6px; }
.lu-ctl { font-size: 12px; color: var(--color-text-muted); display: inline-flex; align-items: center; gap: 6px; }
.eb-body.lu-body { display: grid; overflow: auto; grid-template-columns: minmax(260px, 1fr) minmax(300px, 1.4fr); gap: 8px 22px; align-content: start; }
.lu-body .lu-note { grid-column: 1 / -1; margin: 4px 0 0; }
.lu-area h3 small, .lu-munis h3 small { font-weight: 400; color: var(--color-text-muted); margin-left: 6px; }
.lu-bar { display: flex; height: 12px; border-radius: 3px; overflow: hidden; background: var(--color-bg); min-width: 120px; }
.lu-bar.big { height: 26px; margin: 4px 0 10px; }
.lu-bar span { display: block; height: 100%; }
.lu-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.lu-tbl th, .lu-tbl td { padding: 3px 6px; border-bottom: 1px solid var(--color-border); text-align: left; font-weight: 400; vertical-align: middle; }
.lu-tbl thead th { font-weight: 600; color: var(--color-text-muted); }
.lu-tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lu-tbl th .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -2px; border: 1px solid rgba(0,0,0,.1); }
.lu-list tr.on th, .lu-list tr.on td { background: var(--color-bg); font-weight: 600; }
.lu-munis .lu-ctl { margin: 0 0 6px; }
.lu-munis .lu-list td:nth-child(2) { width: 55%; }
@media (max-width: 760px) { .eb-body.lu-body { grid-template-columns: 1fr; } }

/* The "layers on" chip at the top of the map and its list (core/activelayers.js), on the 2D map and the 3D view. It sits under the legends (z-index 880 and up) and the
   message (900), so it never covers them; the message moves below it while it shows. Open, the list comes above them and the map's buttons until it closes. */
.al { position: absolute; top: 10px; left: 12px; right: 12px; max-height: calc(100% - 20px); z-index: 870; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.al[hidden] { display: none; }
.al.open { z-index: 1010; }   /* open, above the map's own buttons too (Leaflet's corners are at 1000) until it closes */
.al > * { pointer-events: auto; }
.al-chip { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px 0 11px; border: 1px solid var(--color-border); border-radius: 17px; background: #fff; color: var(--color-text); font: 600 12.5px var(--font); box-shadow: var(--shadow-md); cursor: pointer; white-space: nowrap; }
.al-chip:hover { border-color: var(--color-primary-light); }
.al-chip .ms-icon { font-size: 18px; color: var(--color-primary-dark); }
.al-chip[aria-expanded="true"] { background: var(--tint-blue-bg); border-color: var(--color-primary-dark); color: var(--tint-blue-fg); }
.al-chev { transition: transform .15s; }
.al-chip[aria-expanded="true"] .al-chev { transform: rotate(180deg); }
.al-n { display: none; }
.al-panel { margin-top: 6px; width: 320px; max-width: 100%; min-height: 0; overflow-y: auto; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 4px 0 10px; }
.al-list { list-style: none; margin: 0; padding: 0; }
.al-list li { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; border-bottom: 1px solid var(--color-border-light); }
.al-name { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.3; color: var(--color-text); overflow-wrap: anywhere; }
.al-name small { display: block; font-size: 11px; color: var(--color-text-muted); }
.al-all { margin: 10px 14px 0; }
.al-note { margin: 8px 14px 0; font-size: 11.5px; line-height: 1.35; color: var(--color-text-muted); }
.al-h { margin: 4px 14px 2px; font: 700 11.5px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.al-dock { margin-top: 8px; padding: 6px 12px 0; border-top: 1px solid var(--color-border-light); }
.al-dock .sec { margin-top: 8px; }
@media (min-width: 1100px) { .al.pinned { align-items: flex-end; } .al.pinned .al-panel { width: 380px; } }   /* the On the map panel: on the right of the map, open while a layer is on */
.al.open ~ .map-toast { z-index: 1011; }   /* a message shown while the list is open sits above it; the list starts below it */
#map.al-on .map-toast { top: 52px; }
.map-toast { width: max-content; max-width: calc(100% - 24px); box-sizing: border-box; }   /* centred on the map, it would otherwise wrap at half its width */
.toast-sep { color: var(--color-text-muted); }
.toast-act { border: 0; background: none; padding: 2px 4px; margin: -2px 0; font: inherit; font-weight: 700; color: var(--color-primary-dark); text-decoration: underline; cursor: pointer; }
body.three .al { max-height: calc(100% - 96px); }   /* clear of the time bar */
@media (max-width: 400px) { body.three .al-panel { width: auto; align-self: stretch; margin-right: 44px; } }   /* a 3D phone: the list leaves the column of the MapLibre buttons free, so it reaches down to the scale */
@media (max-width: 519px) { .al-n { display: inline; } .al-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .al-chev { display: none; } .al-chip { padding: 0 12px; } }
@media (prefers-reduced-motion: reduce) { .al-chev { transition: none; } }
/* the surface heat legend (app.js and twin3d.js surfLegendHtml, decision 88) */
.surf-mode { display: flex; align-items: center; gap: 6px; margin: 6px 0 2px; font-size: 12px; } .surf-mode .chip { cursor: pointer; } .surf-mode .chip.on { background: var(--color-primary); color: #fff; }
.surf-bar { height: 10px; border-radius: 3px; margin: 6px 0 2px; } .surf-ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--color-text-muted); }
.surf-min { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 8px; margin: 6px 0 2px; font-size: 12px; } .surf-min input[type=range] { width: 100%; min-width: 0; } .surf-min output { grid-column: 1 / -1; color: var(--color-text-muted); font-size: 11px; }   /* the threshold slider of the heat and slope legends (core/surfscale.js) */
/* Map extras (js/mapextras.js): town names above the shading, and the Islands control (map review 2026-11-05) */
.town-name { width: 0; height: 0; }
.town-name span { display: block; transform: translate(-50%, -50%); white-space: nowrap; font: 600 11px/1.1 var(--font-sans, system-ui, sans-serif); color: #2A2E2E; text-shadow: 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff; pointer-events: none; }
.town-few .town-name:not(.town-big) { display: none; }
.islands-ctl select { border: 0; background: #fff; font: inherit; font-size: 12px; padding: 6px 8px; min-height: 32px; cursor: pointer; border-radius: 4px; }