/* Hallmark · macrostructure: Workbench (full-canvas map tool, Kumu replica) · tone: utilitarian, cartographic · anchor hue: 165
 * theme: custom · paper oklch(97.5% 0.006 95) · accent oklch(46% 0.1 165) · Newsreader + IBM Plex Sans (+ Plex Mono for counts)
 */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
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; }
.glyph { width: 14px; height: 14px; overflow: visible; flex: none; }
.glyph path { stroke: var(--color-land); stroke-width: 0.8; }

/* ---------- bar ---------- */
.bar {
  flex: none; min-height: var(--header-h); display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-xs) 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); flex: none; }
.brand-mark { width: 32px; height: 32px; border-radius: 6px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
.brand-text strong { font: 600 var(--text-base)/1.1 var(--font-display); }
.brand-text span { font-size: var(--text-xs); color: var(--color-ink-3); }

.search { position: relative; flex: 1 1 14rem; max-width: 22rem; min-width: 0; }
.search input, .dd summary {
  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);
}
.search input:hover, .dd summary:hover { border-color: var(--color-ink-3); }
.search-results, .dd-menu {
  position: absolute; top: calc(100% + 4px); left: 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: 0 8px 24px oklch(23% 0.02 250 / 0.12); max-height: min(24rem, 70dvh); overflow: auto; z-index: 40;
}
.search-results { right: 0; }
.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 .why { display: block; font-size: var(--text-xs); color: var(--color-ink-3); }
.search-results .empty { color: var(--color-ink-3); cursor: default; }

.dd { position: relative; flex: none; }
.dd summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
.dd summary::-webkit-details-marker { display: none; }
.dd summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--color-ink-3); border-bottom: 1.5px solid var(--color-ink-3); transform: rotate(45deg) translateY(-2px); margin-left: 2px; }
.dd-on:not(:empty) { font: 500 var(--text-xs) var(--font-mono); background: var(--color-ink); color: var(--color-paper); border-radius: 99px; padding: 0 6px; }
.dd-menu { min-width: 17rem; padding: var(--space-2xs) var(--space-sm); }
.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 .label { flex: 1; min-width: 0; }
.dd-menu .more { margin: var(--space-2xs) 0 0; padding: var(--space-xs) 0 0; border-top: 1px solid var(--color-rule); font-size: var(--text-xs); color: var(--color-ink-3); max-width: 16rem; }
.opt .n { font: 400 var(--text-xs) var(--font-mono); color: var(--color-ink-3); }
.opt.zero { 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; margin-left: auto; }
.views button { border: 0; background: transparent; padding: 0 var(--space-sm); height: 2.25rem; cursor: pointer; font-weight: 500; font-size: var(--text-sm); color: var(--color-ink-2); }
.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); }

/* ---------- stage ---------- */
.shell { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.stage { position: relative; min-width: 0; min-height: 0; background: var(--color-sea); }
.view { position: absolute; inset: 0; }
#map { position: absolute; inset: 0; }
.view-network { background: var(--color-paper); }
.view svg { width: 100%; height: 100%; display: block; touch-action: none; }
.maplibregl-ctrl-attrib { font: 400 var(--text-xs) var(--font-body); }
.maplibregl-ctrl-bottom-right { bottom: 7.5rem; }

.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 .approx-ring { fill: var(--color-land); stroke: var(--color-ink-2); stroke-width: 1; stroke-dasharray: 2 2; }
.m-pin.sel { z-index: 2; }
.m-pin.sel .ring { display: inline; }
.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; }

.edge { fill: none; stroke-width: 1; opacity: 0.4; }
.edge.hi { opacity: 0.95; stroke-width: 2; }
.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 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; }
.node.sel path, .node.sel .logo-bg { stroke: var(--color-ink); stroke-width: 2.5; }

.legend {
  position: absolute; left: var(--space-md); bottom: var(--space-md); max-width: min(30rem, calc(100% - 6rem)); z-index: 3;
  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);
}
.legend summary { cursor: pointer; font-weight: 600; color: var(--color-ink); }
.legend details[open] summary { margin-bottom: var(--space-2xs); }
.legend details > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px var(--space-sm); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.licence { position: absolute; top: var(--space-xs); right: var(--space-xs); z-index: 3; margin: 0; padding: 2px var(--space-xs); border-radius: var(--radius-sm); background: oklch(100% 0 0 / 0.8); font-size: var(--text-xs); color: var(--color-ink-2); pointer-events: none; }
.legend .dash { width: 12px; height: 12px; border: 1px dashed var(--color-ink-2); border-radius: 50%; flex: none; }

.zoom { position: absolute; right: var(--space-md); bottom: var(--space-md); z-index: 3; 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); }

/* ---------- profile ---------- */
.detail { width: var(--detail-w); border-left: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); overflow-y: auto; }
.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); flex: 1; }
.d-logo { display: block; max-width: 9rem; max-height: 4rem; object-fit: contain; margin: var(--space-sm) 0; }
.detail h2 { font: 600 var(--text-2xl)/1.15 var(--font-display); margin: 0 0 var(--space-sm); overflow-wrap: anywhere; }
.d-desc { margin: 0 0 var(--space-md); white-space: pre-line; }
.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; white-space: pre-line; }
.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 .nm { flex: 1; font-weight: 500; }

@media (max-width: 1180px) {
  .shell { grid-template-columns: minmax(0, 1fr); position: relative; }
  .detail { position: absolute; top: 0; right: 0; bottom: 0; z-index: 50; width: min(var(--detail-w), 100vw); box-shadow: -12px 0 32px oklch(23% 0.02 250 / 0.14); }
}
@media (max-width: 760px) {
  .bar { flex-wrap: wrap; row-gap: var(--space-xs); }
  .brand-text span { display: none; }
  .brand-text { white-space: normal; max-width: 6.5rem; }   /* the title on two lines keeps the filters on one row */
  .search { order: 5; flex: 1 1 100%; max-width: none; }
  .dd-menu { min-width: min(17rem, calc(100vw - 2rem)); }
  #dd-county .dd-menu { left: auto; right: 0; }
  .legend { left: var(--space-xs); bottom: var(--space-xs); max-width: calc(100% - 4rem); }
  .legend details > div { grid-template-columns: minmax(0, 1fr); }
  .zoom { right: var(--space-xs); bottom: var(--space-xs); }
  .detail { top: auto; left: 0; max-height: min(85dvh, 100%); width: 100%; border-radius: 12px 12px 0 0; border: 0; box-shadow: 0 -12px 32px oklch(23% 0.02 250 / 0.16); }
  .detail-inner { padding: var(--space-md) var(--space-md) var(--space-2xl); }
  .detail h2 { font-size: var(--text-xl); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }

/* Focus (as on Kumu): only the selected organisation and its connections */
.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); right: var(--space-sm); width: fit-content; margin: 0 auto; 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: 0 4px 16px oklch(23% 0.02 250 / 0.12); 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; }
.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: 760px) { .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); }
@media (min-width: 761px) and (max-width: 1180px) {   /* profile slides over the map: keep the map controls beside it */
  .shell:has(.detail:not([hidden])) .zoom { right: calc(min(var(--detail-w), 100vw) + var(--space-md)); }
  .shell:has(.detail:not([hidden])) .focus-bar { right: calc(min(var(--detail-w), 100vw) + var(--space-sm)); }
}

/* map pins: circles in the type colour, logo inside when there is one (as on Kumu's map) */
.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 120ms; }
.m-pin.has-logo .pin-dot { background: #fff; }
.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 .pin-dot { transform: scale(1.4); outline: 2.5px solid var(--color-ink); outline-offset: 2px; }
.legend .sw { width: 11px; height: 11px; border-radius: 50%; flex: none; }

/* 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: oklch(22% 0.01 250); color: #fff; border-radius: var(--radius-sm); font-size: var(--text-sm); line-height: 1.35; box-shadow: 0 6px 18px oklch(0% 0 0 / 0.25); }
.tip strong { display: block; font-size: var(--text-base); }
.tip em { display: block; color: oklch(85% 0.01 250); margin-top: 2px; }
.tip ul { margin: var(--space-2xs) 0 0; padding-left: 1.1em; }
.m-pin.hdim .pin-dot { opacity: 0.2; }