/* Hallmark · macrostructure: Workbench (app shell: filters · canvas · detail) · tone: utilitarian, cartographic · anchor hue: 165 (survey green)
 * theme: custom · paper oklch(97.5% 0.006 95) · accent oklch(46% 0.1 165) · Newsreader + IBM Plex Sans (+ Plex Mono for codes)
 * nav: toolbar bar (search · view switch · share) · footer: none (app) · enrichment: none — the map is the content
 */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; height: 100dvh; display: flex; flex-direction: column;
  background: var(--color-paper); color: var(--color-ink);
  font: 400 var(--text-base)/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
a { color: var(--color-accent); text-underline-offset: 0.15em; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- header bar ---------- */
.bar {
  flex: none; height: var(--header-h); display: flex; align-items: center; gap: var(--space-md);
  padding: 0 var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper); position: relative; z-index: 30;
}
.brand { display: flex; align-items: center; gap: var(--space-xs); text-decoration: none; color: var(--color-ink); flex: none; }
.brand-mark { width: 32px; height: 32px; flex: none; }
.brand-text { display: flex; align-items: baseline; gap: 0.5rem; line-height: 1.1; white-space: nowrap; }
.brand-text strong { font: 800 1.5rem/1 var(--font-display); letter-spacing: -0.035em; }
.brand-text .beta { font: 600 var(--text-xs)/1 var(--font-body); padding: 3px 8px; border-radius: 999px; background: #E8EEFF; color: #2440B8; align-self: center; }
.brand-text .region { font: 700 var(--text-xs)/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent); }
.brand-text span { font-size: var(--text-xs); color: var(--color-ink-3); }

.search { position: relative; flex: 1 1 18rem; max-width: 26rem; min-width: 0; }
.search input {
  width: 100%; height: 2.25rem; padding: 0 var(--space-sm); border-radius: var(--radius-md);
  border: var(--rule-hair) solid var(--color-rule-strong); background: var(--color-land);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.search input:hover { border-color: var(--color-ink-3); }
.search-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: var(--space-2xs) 0; list-style: none;
  background: var(--color-land); border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop); max-height: 22rem; overflow: auto; z-index: 40;
}
.search-results li { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); cursor: pointer; }
.search-results li[aria-selected="true"], .search-results li:hover { background: var(--color-paper-2); }
.search-results .meta { margin-left: auto; font-size: var(--text-xs); color: var(--color-ink-3); white-space: nowrap; }
.search-results .empty { color: var(--color-ink-3); cursor: default; }
.search-results .why { display: block; font-size: var(--text-xs); color: var(--color-ink-3); }

.views { display: flex; border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-md); overflow: hidden; flex: none; }
.views button {
  border: 0; background: transparent; padding: 0 var(--space-sm); height: 2.25rem; cursor: pointer; white-space: nowrap;
  font-weight: 500; font-size: var(--text-sm); color: var(--color-ink-2);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.views button + button { border-left: var(--rule-hair) solid var(--color-rule-strong); }
.views button:hover { background: var(--color-paper-2); }
.views button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); }
.views button:focus-visible { outline-offset: -3px; }

.btn-quiet {
  border: 0; background: none; padding: var(--space-2xs) var(--space-xs); border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: 500; color: var(--color-accent); cursor: pointer; white-space: nowrap;
}
.btn-quiet:hover { background: var(--color-accent-soft); }
.btn-quiet:active { transform: translateY(1px); }
.btn-quiet:disabled { color: var(--color-ink-3); background: none; cursor: default; }
.share { margin-left: auto; flex: none; }

.notice {
  flex: none; display: flex; align-items: center; gap: var(--space-md); padding: var(--space-xs) var(--space-md);
  background: var(--color-warn-soft); border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm);
}
.notice p { margin: 0; flex: 1; }
.notice .btn-quiet { color: var(--color-ink-2); }

/* ---------- shell ---------- */
.shell { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--filters-w) minmax(0, 1fr) auto; }
.filters { border-right: var(--rule-hair) solid var(--color-rule); overflow-y: auto; background: var(--color-paper); }
.filters-head {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md); background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule);
}
.count { margin: 0; flex: 1; font-size: var(--text-sm); color: var(--color-ink-2); display: flex; flex-direction: column; line-height: 1.35; }
.count strong { color: var(--color-ink); font-family: var(--font-mono); font-weight: 500; }
.filters-close, .filters-open { display: none; }

.facet { border-bottom: var(--rule-hair) solid var(--color-rule); }
.facet summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md); font-weight: 600; font-size: var(--text-sm);
}
.facet summary::-webkit-details-marker { display: none; }
.facet summary::after {
  content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid var(--color-ink-3); border-bottom: 1.5px solid var(--color-ink-3);
  transform: rotate(45deg) translateY(-2px); transition: transform var(--dur-fast) var(--ease-out);
}
.facet[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.facet summary .on { font: 500 var(--text-xs) var(--font-mono); color: var(--color-accent); }
.facet summary:hover { background: var(--color-paper-2); }
.facet-body { padding: 0 var(--space-md) var(--space-sm); }
.facet-note { margin: 0 0 var(--space-xs); font-size: var(--text-xs); color: var(--color-ink-3); }

.opt { display: flex; align-items: center; gap: var(--space-xs); padding: 0.3125rem 0; cursor: pointer; font-size: var(--text-sm); }
.opt input { margin: 0; accent-color: var(--color-accent); width: 15px; height: 15px; flex: none; }
.opt .glyph { flex: none; }
.opt .label { flex: 1; min-width: 0; }
.opt .n { font: 400 var(--text-xs) var(--font-mono); color: var(--color-ink-3); font-variant-numeric: tabular-nums; }
.opt.zero { color: var(--color-ink-3); }
.opt:hover .label { text-decoration: underline; text-decoration-color: var(--color-rule-strong); }
.opt-group { margin: var(--space-xs) 0 0; font-size: var(--text-xs); color: var(--color-ink-3); font-weight: 500; }
.more { margin-top: var(--space-2xs); }

.glyph { width: 14px; height: 14px; overflow: visible; }
.glyph path { stroke: var(--color-land); stroke-width: 0.8; }

/* ---------- stage (views) ---------- */
.stage { position: relative; min-width: 0; min-height: 0; background: var(--color-sea); }
.view { position: absolute; inset: 0; }
.view svg:not(.glyph) { width: 100%; height: 100%; display: block; touch-action: none; }   /* not the small family icons in lists */
.view-network { background: var(--color-paper); }
.view-journey { background: var(--color-paper); overflow-y: auto; }

#map { position: absolute; inset: 0; }
.maplibregl-ctrl-attrib { font: 400 var(--text-xs) var(--font-body); }
.maplibregl-ctrl-bottom-right { bottom: 10rem; }
.m-pin, .m-cluster { border: 0; padding: 0; background: none; cursor: pointer; line-height: 0; }
.m-pin svg { width: 24px; height: 24px; overflow: visible; }
.m-pin path { stroke: var(--color-land); stroke-width: 1.2; }
.m-pin .ring { fill: none; stroke: var(--color-ink); stroke-width: 2; display: none; }
.m-pin.sel .ring { display: inline; }
.m-pin.sel { z-index: 2; }
.m-pin.sel svg { transform: scale(1.35); }
.m-pin:hover path { stroke: var(--color-ink); stroke-width: 2; }
.m-pin:focus-visible, .m-cluster:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 50%; }
.m-cluster circle { fill: var(--color-land); stroke: var(--color-ink); stroke-width: 1.2; }
.m-cluster text { font: 500 11px var(--font-mono); fill: var(--color-ink); text-anchor: middle; dominant-baseline: central; }
.m-cluster:hover circle { stroke-width: 2.2; }
.map-links {
  position: absolute; top: var(--space-md); right: var(--space-md); z-index: 3; margin: 0; max-width: 15rem;
  background: var(--color-land); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-sm); font-size: var(--text-sm);
}
.map-links legend { float: left; width: 100%; padding: 0; margin-bottom: var(--space-2xs); font-weight: 600; }
.ml-toggle { all: unset; font-weight: 600; }
.map-links legend .n { font: 400 var(--text-xs) var(--font-mono); color: var(--color-ink-3); margin-left: 4px; }
.map-links label { display: flex; align-items: center; gap: var(--space-xs); padding: 2px 0; cursor: pointer; clear: both; }
.map-links input { margin: 0; accent-color: var(--color-accent); width: 15px; height: 15px; }
.map-links .key { margin: var(--space-2xs) 0 0; font-size: var(--text-xs); color: var(--color-ink-3); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.map-links .line { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--verb-partners); }
.map-links .line.funds { border-color: var(--verb-funds); }
.map-links .line.hosts { border-color: var(--verb-hosts); }
.map-legend .border { width: 18px; height: 0; border-top: 2px dashed var(--color-ink-2); }
.map-legend .county { width: 18px; height: 0; border-top: 1px solid var(--color-ink-3); }
.city { font: 500 10px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; fill: var(--color-ink-3); pointer-events: none; paint-order: stroke; stroke: var(--color-land); stroke-width: 3px; stroke-linejoin: round; }
.marker { cursor: pointer; }
.marker path { stroke: var(--color-land); stroke-width: 1.2; }
.approx-ring { fill: var(--color-land); stroke: var(--color-ink-2); stroke-width: 1; stroke-dasharray: 2 2; }
.marker:hover path, .marker:focus-visible path { stroke: var(--color-ink); stroke-width: 2; }
.marker:focus-visible { outline: none; }
.marker.sel .ring { fill: none; stroke: var(--color-select); stroke-width: 2; }
.cluster { cursor: pointer; }
.cluster circle { fill: var(--color-land); stroke: var(--color-ink); stroke-width: 1.2; }
.cluster .arc { fill: none; stroke-width: 4; }
.cluster text { font: 500 11px var(--font-mono); fill: var(--color-ink); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.cluster:hover circle, .cluster:focus-visible circle { stroke-width: 2.2; }
.cluster:focus-visible { outline: none; }

.map-legend {
  position: absolute; left: var(--space-md); bottom: var(--space-md); max-width: min(34rem, calc(100% - 6rem));
  background: var(--color-land); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-sm); font-size: var(--text-xs); color: var(--color-ink-2);
}
.map-legend summary { cursor: pointer; font-weight: 600; color: var(--color-ink); }
.map-legend details[open] summary { margin-bottom: var(--space-2xs); }
.map-legend details > div { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-sm); }
.map-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.map-legend .dash { width: 12px; height: 12px; border: 1px dashed var(--color-ink); border-radius: 50%; }
.map-legend .line { width: 18px; height: 0; border-top: 2px solid; }

.zoom { position: absolute; right: var(--space-md); bottom: var(--space-md); display: flex; flex-direction: column;
  border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-md); overflow: hidden; background: var(--color-land); }
.zoom button { width: 2.25rem; height: 2.25rem; border: 0; background: none; cursor: pointer; font-size: var(--text-lg); line-height: 1; }
.zoom button + button { border-top: var(--rule-hair) solid var(--color-rule); }
.zoom button:hover { background: var(--color-paper-2); }
.zoom button:focus-visible { outline-offset: -3px; }

/* network */
.edge { fill: none; stroke-width: 1; opacity: 0.4; }
.node { cursor: grab; }
.node:active { cursor: grabbing; }
.node path { stroke: var(--color-land); stroke-width: 1.2; }
.node .logo-bg { fill: var(--color-land); stroke-width: 2; }
.node.offer path { fill: var(--color-land) !important; stroke-width: 2.2; }
.node text { font: 500 11px var(--font-body); fill: var(--color-ink); paint-order: stroke; stroke: var(--color-paper); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.node:focus-visible { outline: none; }
.node:focus-visible path, .node:hover path { stroke: var(--color-ink); }
.dim { opacity: 0.12; }
.edge.hi { opacity: 0.95; stroke-width: 2; }

/* journey */
.journey-picker { padding: var(--space-lg) var(--space-lg) var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.journey-picker h2 { margin: 0 0 var(--space-2xs); font: 600 var(--text-xl)/1.2 var(--font-display); }
.journey-picker > p { margin: 0 0 var(--space-md); color: var(--color-ink-2); max-width: 60ch; font-size: var(--text-sm); }
.track { margin-bottom: var(--space-md); }
.track-name { font-size: var(--text-sm); font-weight: 600; margin: 0 0 var(--space-xs); }
.track-name span { font-weight: 400; color: var(--color-ink-3); }
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps button {
  position: relative; width: 100%; text-align: left; border: var(--rule-hair) solid var(--color-rule-strong); margin-left: -1px;
  background: var(--color-land); padding: var(--space-xs) var(--space-sm); cursor: pointer; min-height: 3.5rem;
  display: flex; flex-direction: column; justify-content: center; transition: background-color var(--dur-fast) var(--ease-out);
}
.steps li:first-child button { border-radius: var(--radius-md) 0 0 var(--radius-md); margin-left: 0; }
.steps li:last-child button { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.steps button:hover { background: var(--color-paper-2); }
.steps button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); border-color: var(--color-ink); z-index: 1; }
.steps button[aria-pressed="true"] .n { color: var(--color-paper-3); }
.steps button:focus-visible { z-index: 2; }
.steps button { justify-content: flex-start; gap: 2px; min-height: 6.25rem; }
.steps .s { font-weight: 600; font-size: var(--text-sm); white-space: nowrap; }
.steps .d { font-size: var(--text-xs); line-height: 1.35; color: var(--color-ink-2); flex: 1; }
.steps button[aria-pressed="true"] .d { color: var(--color-paper-3); }
.steps .n { font: 400 var(--text-xs) var(--font-mono); color: var(--color-ink-3); }

/* suggest + open data */
.filters-foot { padding: var(--space-md); font-size: var(--text-sm); color: var(--color-ink-2); }
.filters-foot p { margin: 0 0 var(--space-xs); }
.filters-foot strong { color: var(--color-ink); }
.filters-foot .open-data { margin-top: var(--space-lg); font-size: var(--text-xs); }
.btn-line, .btn-solid {
  height: 2.25rem; padding: 0 var(--space-md); border-radius: var(--radius-md); font-weight: 600; font-size: var(--text-sm);
  cursor: pointer; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-out);
}
.btn-line { border: var(--rule-hair) solid var(--color-accent); background: var(--color-land); color: var(--color-accent); }
.btn-line:hover { background: var(--color-accent-soft); }
.btn-solid { border: 0; background: var(--color-accent); color: var(--color-land); }
.btn-solid:hover { background: var(--color-ink); }
.btn-line:active, .btn-solid:active { transform: translateY(1px); }
.btn-line:disabled, .btn-solid:disabled { opacity: 0.5; cursor: default; }
.d-suggest { margin-top: var(--space-lg); }

.suggest {
  width: min(34rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 0; border-radius: var(--radius-md);
  background: var(--color-paper); color: var(--color-ink); box-shadow: var(--shadow-dialog);
}
.suggest::backdrop { background: var(--color-scrim); }
.suggest form, .suggest-done { padding: var(--space-lg); }
.suggest h2 { margin: 0 0 var(--space-2xs); font: 600 var(--text-xl)/1.2 var(--font-display); }
.suggest-lede { margin: 0 0 var(--space-md); color: var(--color-ink-2); font-size: var(--text-sm); }
.suggest fieldset { border: 0; padding: 0; margin: 0 0 var(--space-md); }
.suggest legend { font-weight: 600; font-size: var(--text-sm); margin-bottom: var(--space-2xs); }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--space-sm); font-size: var(--text-sm); font-weight: 500; min-width: 0; }
.field i { font-style: normal; font-weight: 400; color: var(--color-ink-3); }
.field input, .field textarea {
  font: 400 var(--text-base)/1.4 var(--font-body); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm);
  border: var(--rule-hair) solid var(--color-rule-strong); background: var(--color-land); width: 100%;
}
.field input:hover, .field textarea:hover { border-color: var(--color-ink-3); }
.field [aria-invalid="true"] { border-color: var(--color-warn); }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-sm); }
.form-error { color: var(--color-warn); font-size: var(--text-sm); margin: 0 0 var(--space-sm); }
.suggest-actions { display: flex; justify-content: flex-end; gap: var(--space-xs); margin-top: var(--space-md); }
.suggest-done p { color: var(--color-ink-2); }

.results { padding: var(--space-md) var(--space-lg) var(--space-2xl); }
.results h3 { font: 600 var(--text-lg)/1.3 var(--font-display); margin: var(--space-lg) 0 var(--space-xs); display: flex; align-items: baseline; gap: var(--space-xs); }
.results h3:first-child { margin-top: 0; }
.results h3 .num { font-size: var(--text-sm); color: var(--color-ink-3); font-weight: 400; }
.rows { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-rule); }
.rows li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.row {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-sm); align-items: baseline;
  width: 100%; text-align: left; background: none; border: 0; padding: var(--space-sm) var(--space-2xs); cursor: pointer;
}
.row:hover { background: var(--color-paper-2); }
.row:focus-visible { outline-offset: -2px; }
.row .glyph { align-self: center; }
.row .t { font-weight: 600; min-width: 0; }
.row .sub { grid-column: 2 / 4; font-size: var(--text-sm); color: var(--color-ink-2); }
.row .where { font-size: var(--text-xs); color: var(--color-ink-3); white-space: nowrap; }
.empty-state { color: var(--color-ink-2); padding: var(--space-lg) 0; max-width: 50ch; }

/* ---------- detail ---------- */
.detail {
  width: var(--detail-w); border-left: var(--rule-hair) solid var(--color-rule); background: var(--color-paper);
  overflow-y: auto; position: relative;
}
.detail-inner { padding: var(--space-md) var(--space-lg) var(--space-2xl); }
.detail-inner:focus { outline: none; }
.d-top { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-xs); }
.d-top .kind { font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-2); }
.d-top .btn-quiet:first-of-type { margin-left: auto; }
.d-logo { display: block; max-width: 9rem; max-height: 4rem; object-fit: contain; margin: var(--space-sm) 0 var(--space-sm); }
.detail h2 { font: 600 var(--text-2xl)/1.15 var(--font-display); margin: 0 0 var(--space-xs); overflow-wrap: anywhere; }
.d-role { margin: 0 0 var(--space-sm); color: var(--color-ink-2); font-size: var(--text-sm); }
.d-role a { font-weight: 500; }
.checked {
  display: flex; gap: var(--space-xs); align-items: baseline; margin: 0 0 var(--space-md); padding: var(--space-xs) var(--space-sm);
  background: var(--color-paper-2); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--color-ink-2);
}
.checked strong { color: var(--color-ink); font-weight: 600; white-space: nowrap; }
.d-desc { margin: 0 0 var(--space-md); max-width: 60ch; }
.d-desc.missing { color: var(--color-ink-3); }
.d-sec { margin: var(--space-lg) 0 0; }
.d-sec h3 { margin: 0 0 var(--space-xs); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-3); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; }
.chips li { font-size: var(--text-sm); padding: 1px var(--space-xs); border: var(--rule-hair) solid var(--color-rule-strong); border-radius: var(--radius-sm); background: var(--color-land); }
dl.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2xs) var(--space-md); margin: 0; font-size: var(--text-sm); }
dl.kv dt { color: var(--color-ink-3); }
dl.kv dd { margin: 0; overflow-wrap: anywhere; }
.stagepath { display: grid; gap: var(--space-2xs); font-size: var(--text-sm); }
.stagepath div { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.stagepath b { font-weight: 600; flex: 1 0 100%; font-size: var(--text-xs); color: var(--color-ink-2); }
.stagepath div + div { margin-top: var(--space-2xs); }
.stagepath i { font-style: normal; font-size: var(--text-xs); padding: 1px 6px; border-radius: var(--radius-sm); border: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-3); }
.stagepath i.on { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-ink); }
.links { list-style: none; margin: 0; padding: 0; }
.links li { border-top: var(--rule-hair) solid var(--color-rule); }
.links li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.links button { display: flex; gap: var(--space-xs); align-items: center; width: 100%; text-align: left; background: none; border: 0; padding: var(--space-xs) 0; cursor: pointer; font-size: var(--text-sm); }
.links button:hover .nm { text-decoration: underline; }
.links .verb { color: var(--color-ink-3); font-size: var(--text-xs); min-width: 4.5rem; }
.links .nm { flex: 1; font-weight: 500; }
.links .basis { font-size: var(--text-xs); color: var(--color-warn); white-space: nowrap; }
.flags { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
.flags li { padding: var(--space-xs) 0; border-top: var(--rule-hair) solid var(--color-rule); }
.flags b { font-weight: 600; }
.d-foot { margin-top: var(--space-xl); font: 400 var(--text-xs) var(--font-mono); color: var(--color-ink-3); }

.scrim { position: fixed; inset: 0; background: var(--color-scrim); z-index: 45; }

/* ---------- tablet ---------- */
@media (max-width: 1180px) {
  .shell { grid-template-columns: var(--filters-w) minmax(0, 1fr); }
  .detail { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; box-shadow: var(--shadow-side);
    width: min(var(--detail-w), 100vw); animation: slide-in var(--dur-med) var(--ease-out); }
}
@keyframes slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- phone ---------- */
@media (max-width: 820px) {
  :root { --header-h: auto; }
  .bar { flex-wrap: wrap; row-gap: var(--space-xs); padding: var(--space-xs) var(--space-md); }
  .brand-text span:not(.region):not(.beta) { display: none; }
  .search { order: 3; flex: 1 1 100%; max-width: none; }
  .views { margin-left: auto; }
  .share { margin-left: 0; }
  .notice { font-size: var(--text-xs); }
  .shell { grid-template-columns: minmax(0, 1fr); }
  .filters {
    position: fixed; left: 0; right: 0; bottom: 0; max-height: 82dvh; z-index: 50; border: 0;
    border-radius: 12px 12px 0 0; box-shadow: var(--shadow-sheet);
    transform: translateY(100%); visibility: hidden; transition: transform var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
  }
  .filters.open { transform: none; visibility: visible; transition: transform var(--dur-med) var(--ease-out); }
  .filters-close { display: inline-block; }
  .filters-open {
    display: inline-flex; gap: 6px; align-items: center; position: absolute; top: var(--space-sm); left: var(--space-sm); z-index: 5;
    height: 2.25rem; padding: 0 var(--space-sm); border-radius: var(--radius-md); border: var(--rule-hair) solid var(--color-rule-strong);
    background: var(--color-land); font-weight: 600; font-size: var(--text-sm); cursor: pointer;
  }
  .filters-open span:not(:empty) { font: 500 var(--text-xs) var(--font-mono); background: var(--color-ink); color: var(--color-paper); border-radius: 99px; padding: 0 6px; }
  .view-journey .journey-picker { padding-top: 3.5rem; }
  .journey-picker, .results { padding-left: var(--space-md); padding-right: var(--space-md); }
  .steps { grid-template-columns: repeat(5, minmax(4.25rem, 1fr)); overflow-x: auto; }
  .steps .s { font-size: var(--text-xs); }
  .steps .d { display: none; }
  .steps button { min-height: 3.5rem; }
  .steps .n-word { display: none; }
  .map-links .key { flex-wrap: nowrap; white-space: nowrap; gap: 4px; }
  .map-links .line { width: 12px; }
  .field-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .map-legend { left: var(--space-xs); bottom: var(--space-xs); max-width: calc(100% - 4rem); }
  .zoom { right: var(--space-xs); bottom: var(--space-xs); }
  .map-links { top: var(--space-sm); right: var(--space-sm); max-width: 12rem; padding: var(--space-2xs) var(--space-xs); }
  .map-links legend { margin: 0; }
  .ml-toggle { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; min-height: 1.75rem; padding: 0 var(--space-2xs); }
  .ml-toggle::before { content: "▸"; font-size: var(--text-xs); }
  .map-links.open .ml-toggle::before { content: "▾"; }
  .ml-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
  .map-links:not(.open) > label, .map-links:not(.open) > .key { display: none; }
  .detail {
    top: auto; left: 0; max-height: 85dvh; width: 100%; border-radius: 12px 12px 0 0; border: 0;
    box-shadow: var(--shadow-sheet); animation-name: sheet-in;
  }
  .detail-inner { padding: var(--space-md) var(--space-md) var(--space-2xl); }
  .detail h2 { font-size: var(--text-xl); }
}
@keyframes sheet-in { from { transform: translateY(32px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ---- from the test page: pins with logos, hover pop-up, Focus ---- */
/* map pins: circles in the family colour, logo inside when there is one */
.m-pin .pin-dot { display: block; width: 26px; height: 26px; box-sizing: border-box; border-radius: 50%; background: var(--c); border: 3px solid var(--c);
  box-shadow: 0 0 0 1.5px var(--color-land); overflow: hidden; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
.m-pin.has-logo .pin-dot { background: var(--color-land); }
.m-pin .pin-dot.shape { background: none; border: 0; box-shadow: none; overflow: visible; }
.m-pin .pin-dot.shape .glyph { width: 100%; height: 100%; }
.m-pin .pin-dot.shape .glyph path { stroke: var(--color-land); stroke-width: 1.3; }
.m-pin.approx .pin-dot.shape { outline: 0; }
.m-pin.approx .pin-dot.shape .glyph path { stroke: var(--color-ink-2); stroke-dasharray: 1.5 1.2; }
.m-pin .pin-badge { position: absolute; right: -4px; bottom: -4px; width: 13px; height: 13px; line-height: 0; pointer-events: none; }
.m-pin .pin-badge .glyph { width: 13px; height: 13px; }
.m-pin .pin-badge .glyph path { stroke: var(--color-land); stroke-width: 2; }
.m-pin.hdim .pin-badge { opacity: 0.2; }
.m-pin .pin-dot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.m-pin.approx .pin-dot { outline: 1.5px dashed var(--color-ink-2); outline-offset: 2px; }
.m-pin:hover { z-index: 3; }
.m-pin:hover .pin-dot { transform: scale(1.2); }
.m-pin.sel { z-index: 2; }
.m-pin.sel .pin-dot { transform: scale(1.4); outline: 2.5px solid var(--color-select); outline-offset: 2px; }
.m-pin.sel .pin-dot.shape { outline: 0; }
.m-pin.sel .pin-dot.shape .glyph path { stroke: var(--color-select); stroke-width: 2; }
.m-pin.hdim .pin-dot { opacity: 0.2; }

/* hover pop-up */
.tip { position: absolute; left: 0; top: 0; z-index: 20; max-width: 18rem; pointer-events: none; padding: var(--space-xs) var(--space-sm);
  background: var(--color-tip); color: var(--color-tip-ink); border-radius: var(--radius-sm); font-size: var(--text-sm); line-height: 1.35; box-shadow: var(--shadow-tip); }
.tip strong { display: block; font-size: var(--text-base); }
.tip em { display: block; color: var(--color-tip-ink-2); margin-top: 2px; font-style: normal; }
.tip span { display: block; margin-top: var(--space-2xs); }

/* Focus: button in the panel, button above the zoom, bar while focused */
.btn-focus { display: block; width: 100%; margin: 0 0 var(--space-sm); padding: var(--space-xs) var(--space-sm); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-sm); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); font-weight: 500; cursor: pointer; text-align: center; }
.btn-focus:hover { opacity: 0.9; }
.btn-focus[aria-pressed="true"] { background: var(--color-paper); color: var(--color-ink); }
.focus-bar { position: absolute; top: var(--space-sm); left: var(--space-sm); max-width: calc(100% - 15.5rem); width: fit-content; z-index: 5; display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-sm); background: var(--color-paper); border: var(--rule-hair) solid var(--color-rule-strong); border-radius: 999px; box-shadow: var(--shadow-pop); font-size: var(--text-sm); }
.focus-bar > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus-bar .linkish { border: 0; background: none; padding: 0; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; color: inherit; }
.btn-unfocus { flex: none; border: 0; border-radius: 999px; padding: var(--space-2xs) var(--space-sm); background: var(--color-ink); color: var(--color-paper); font-size: var(--text-sm); font-weight: 500; cursor: pointer; }
@media (max-width: 820px) { .focus-bar { top: auto; bottom: 3.5rem; max-width: calc(100% - 3.75rem); } .focus-bar .fb-lbl { display: none; } .focus-bar > span { min-width: 0; } }
.zoom .focus-btn { display: grid; place-items: center; }
.zoom .focus-btn:disabled { color: var(--color-ink-3); opacity: 0.5; cursor: default; background: none; }
.zoom .focus-btn[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); }
.map-legend .sw { width: 11px; height: 11px; border-radius: 50%; flex: none; display: inline-block; }
.checked.ok { background: var(--color-accent-soft); }
.checked.ok strong { color: var(--color-accent); }

.links .via { margin: 0 0 var(--space-xs) 20px; font-size: var(--text-xs); color: var(--color-ink-3); }   /* EU projects behind a link */
.d-desc { white-space: pre-line; }   /* the EU project line sits on its own line */