/* ============================================================
   NCRC dark-mode map UI
   Brand: cyan #2FADE3 accent, Barlow / Barlow Condensed,
   sharp corners, flat editorial surfaces.
   ============================================================ */

/* ---------------- Self-hosted fonts ----------------
   Barlow 400/500/600 + Barlow Condensed 600/700/900, latin +
   latin-ext subsets, served from assets/fonts/ (downloaded from
   Google Fonts; no external font requests at runtime). */

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/barlow-400-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/barlow-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/barlow-500-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/barlow-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/barlow-600-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/barlow-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/barlow-condensed-600-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/barlow-condensed-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/barlow-condensed-700-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/barlow-condensed-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../assets/fonts/barlow-condensed-900-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../assets/fonts/barlow-condensed-900.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --radius: 7px; /* sidebar corner rounding — one knob */
  --ncrc-cyan: #2FADE3;
  --ncrc-cyan-300: #6EC6EA;
  --ncrc-cyan-600: #1F97CC;
  --ncrc-red: #E82E2E;
  --ncrc-magenta: #EB2F89;
  --ncrc-yellow: #FFC23A;
  --ncrc-gray: #818390;
  --bg: #0D0E10;
  --panel: #16171B;
  --panel-alt: #24252A;
  --border: #3F4046;
  --fg: #FFFFFF;
  --fg-muted: #A0A2AC;
  --font-display: 'Barlow Condensed', 'Helvetica Neue Condensed', sans-serif;
  --font-body: 'Barlow', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  /* The page itself never scrolls or rubber-bands — the sidebar
     (desktop) / bottom sheet (mobile) is the only scroll context. */
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
}

#app {
  display: flex;
  height: 100vh;  /* fallback for browsers without dvh */
  height: 100dvh; /* dynamic viewport: excludes the mobile URL bar */
  width: 100vw;
}

#map { flex: 1; min-width: 0; }

/* ---------------- Sidebar ---------------- */

#sidebar {
  width: 420px;
  flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Slim classic scrollbar on the sidebar — the ONE vertical scroll
   context (slide-panels expand fully and never scroll internally).
   Styling makes the thumb non-overlay (its own gutter instead of
   floating over right-aligned numbers), scrollbar-gutter keeps the
   layout stable while the content grows past the fold. */
#sidebar {
  scrollbar-gutter: stable;
  scrollbar-width: thin;               /* Firefox */
  scrollbar-color: var(--border) transparent;
}
#sidebar::-webkit-scrollbar { width: 8px; }
#sidebar::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
#sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--fg-muted);
}
#sidebar::-webkit-scrollbar-track {
  background: transparent;
}

#sidebar-header {
  position: relative;
  padding: 20px 20px 16px;
  border-bottom: 2px solid var(--ncrc-cyan);
}

/* Replay button for the intro tour — quiet text button, top right */
#tour-button {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg-muted);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  cursor: pointer;
  transition: color 150ms ease-out, border-color 150ms ease-out;
}
#tour-button:hover { color: var(--ncrc-cyan); border-color: var(--ncrc-cyan); }
#tour-button:focus-visible { outline: 2px solid var(--ncrc-cyan); outline-offset: 1px; }

#sidebar-header h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 30px;
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0 0 4px;
  letter-spacing: 0.01em;
  /* keep the first line clear of the absolutely-positioned Tour pill */
  padding-right: 64px;
}

/* Deck line: reads as the second half of the headline, so it keeps the
   display font and title case rather than dropping to muted body text. */
.subtitle {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--fg);
  margin: 0;
}

.sidebar-section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.sidebar-section h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ncrc-cyan);
  margin: 0 0 10px;
}

.sidebar-section h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  margin: 0 0 8px;
}

#sidebar-footer {
  margin-top: auto;
  padding: 14px 20px;
  font-size: 13px;
  color: var(--fg-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#sidebar-footer p { margin: 0; }

#footer-logo { height: 28px; opacity: 0.9; flex-shrink: 0; }

#sidebar-footer a { color: var(--ncrc-cyan); text-decoration: none; }
#sidebar-footer a:hover { color: var(--fg); text-decoration: underline; }
/* Privacy-policy link: quieter than the ncrc.org link */
#sidebar-footer a.footer-privacy { color: var(--fg-muted); }
#sidebar-footer a.footer-privacy:hover { color: var(--fg); }

/* ---------------- Search ---------------- */

#search-box { position: relative; }

#search-input {
  width: 100%;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 8px 28px 8px 10px;
}

#search-input::placeholder { color: var(--fg-muted); }
#search-input:focus-visible { outline: 2px solid var(--ncrc-cyan); outline-offset: -1px; }

#search-clear {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--fg-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
}
#search-clear:hover { color: var(--fg); }

#search-chip { display: flex; flex-wrap: wrap; gap: 6px; }

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 3px 8px;
  border: 1px solid var(--ncrc-cyan);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--ncrc-cyan);
}
.filter-chip button {
  background: none;
  border: none;
  color: var(--ncrc-cyan);
  cursor: pointer;
  font-size: 14px;
  padding: 0;
}
.filter-chip button:hover { color: var(--fg); }

#search-results { margin-top: 6px; }

.sr-group { margin-bottom: 6px; }

.sr-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  padding: 4px 0 2px;
}

.sr-item {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-top: none;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 6px 8px;
  cursor: pointer;
  transition: background 150ms ease-out;
}
.sr-group .sr-item:first-of-type {
  border-top: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
}
.sr-group .sr-item:last-of-type { border-radius: 0 0 var(--radius) var(--radius); }
.sr-group .sr-item:first-of-type:last-of-type { border-radius: var(--radius); }
.sr-item:hover, .sr-item:focus-visible { background: var(--border); outline: none; }
.sr-sub { display: block; font-size: 12px; line-height: 1.4; color: var(--fg-muted); }

/* ---------------- Layers / Legend slide-down bar ---------------- */

.panel-bar { display: flex; gap: 6px; }

.panel-bar button {
  flex: 1;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg-muted);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 7px 0;
  cursor: pointer;
  transition: background 150ms ease-out, color 150ms ease-out;
}
.panel-bar button:hover { background: var(--border); color: var(--fg); }
.panel-bar button.active { background: var(--ncrc-cyan); color: #000000; }
.panel-bar button:focus-visible { outline: 2px solid var(--ncrc-cyan); outline-offset: 1px; }

/* Open panels expand to their FULL content height — no internal
   scrolling, no max-height cap. initPanelBar animates the measured
   height (0 → scrollHeight → auto, and back), so later content
   changes (stats scope switches) keep fitting. */
.slide-panel {
  height: 0;
  overflow: hidden;
  transition: height 180ms ease-out;
}
.slide-panel > div { padding-top: 12px; }

/* ---------------- Pill layer switches ---------------- */

/* Two-column grid: labels wrap in the left column, pill controls sit
   flush right and vertically centered — consistent alignment down
   the whole list. */
.layer-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.layer-label { font-size: 13px; }

.pill-control { display: flex; align-items: center; gap: 8px; }

.pill-track {
  position: relative;
  height: 18px;
  border-radius: 9px;
  background: var(--border);
  transition: background 150ms ease-out;
}
.pill-track.states-2 { width: 34px; }
.pill-track.states-3 { width: 64px; }
.pill-track[data-state="on"] { background: var(--ncrc-cyan); }
.pill-track[data-state="buffer"] { background: var(--ncrc-magenta); }

.pill-knob {
  position: absolute;
  /* ONE positioning mechanism (spec-20 §5): controls.js sets a single
     `transform: translate(<int>px, -50%)` — horizontal moves can never
     knock out the vertical centering because both live in the same
     transform, and the x offset is a whole CSS pixel so no state sits
     on a fractional position. Nothing else may touch top/left/
     transform on this element. */
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: transform 150ms ease-out;
  pointer-events: none;
}

.pill-hit { padding: 4px; margin: -4px; cursor: pointer; }

.pill-info { position: relative; display: inline-flex; }
.pill-info[hidden] { display: none; }

.info-bubble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--fg-muted);
  background: none;
  color: var(--fg-muted);
  font-family: var(--font-body);
  font-size: 10px;
  cursor: help;
  padding: 0;
}
.info-bubble:hover, .info-bubble:focus-visible { color: var(--ncrc-cyan); border-color: var(--ncrc-cyan); }
.info-bubble:focus-visible { outline: 2px solid var(--ncrc-cyan); outline-offset: 1px; }

.tooltip {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 5;
  width: 200px;
  /* Wrap normally even when a nowrap ancestor (e.g. the stats hatch
     legend chip) would otherwise clip the sentence at the sidebar edge */
  white-space: normal;
  text-align: left;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg);
  font-size: 12px;
  line-height: 1.4;
  padding: 6px 8px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 150ms ease-out;
}
.info-bubble:hover + .tooltip, .info-bubble:focus-visible + .tooltip {
  visibility: visible;
  opacity: 1;
}

.pill-pos {
  position: absolute;
  top: 0;
  height: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.pill-pos:focus-visible { outline: 2px solid var(--ncrc-cyan); outline-offset: 2px; border-radius: 9px; }

.pill-caption {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--fg-muted);
  /* fixed width = longest state label ("Within 25 km") + the ⓘ
     bubble, so the pill track never shifts between states */
  width: 100px;
}

/* ---------------- Legend extras ---------------- */

.swatch.dot.hollow { background: transparent; border-width: 1px; }

.swatch.glow {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow) 0%, transparent 70%);
}

/* Ramp bar shows EFFECTIVE colors: the same 0.35 opacity over the
   dark basemap color, so legend and map agree. */
.ramp-bar {
  height: 12px;
  border-radius: var(--radius);
  overflow: hidden;
  background: #0D0E10;
  border: 1px solid var(--border);
  margin: 4px 0 2px;
}
.ramp-fill { height: 100%; opacity: 0.35; }

.ramp-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--fg-muted);
  margin-bottom: 6px;
}

.legend-note { font-size: 12px; line-height: 1.4; color: var(--fg-muted); padding-top: 2px; }

/* Member statuses listed under each lifecycle bucket in the legend
   (three colors on the map; no status information omitted). */
.legend-members {
  font-size: 12px;
  line-height: 1.4;
  color: var(--fg-muted);
  padding: 0 0 4px 18px;
}

/* ---------------- Legend ---------------- */

.legend-group { margin-bottom: 12px; }
.legend-group:last-child { margin-bottom: 0; }

.legend-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  margin-bottom: 4px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 2px 0;
}

.swatch.line { width: 18px; height: 2px; }
.swatch.line.thick { height: 4px; }
.swatch.fill { width: 14px; height: 14px; opacity: 0.6; }
.swatch.dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #FFFFFF; border: 2px solid;
}
.swatch.dot.ring { background: transparent; }

/* ---------------- Feature panels ---------------- */

#panel-empty { color: var(--fg-muted); font-size: 13px; margin: 0; }

#lic-readout, #dc-readout {
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
}

.suit-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}

.suit-bucket {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 30px;
  line-height: 1.1;
  text-transform: uppercase;
}

.suit-detail { font-size: 13px; }

/* Data-center infographic readout — location is the headline, with
   a small italic "Data center" kicker above it */
.dc-kicker {
  font-size: 12px;
  font-style: italic;
  color: var(--fg-muted);
  letter-spacing: 0.04em;
}
.dc-location {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 30px;
  line-height: 1.05;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.dc-location.missing {
  font-style: italic;
  color: var(--fg-muted);
  font-size: 20px;
  font-weight: 700;
}
.dc-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.15;
  text-transform: uppercase;
}
.dc-operator { font-size: 13px; color: var(--fg-muted); }
.dc-name.missing, .dc-operator.missing { font-style: italic; color: var(--fg-muted); }
.dc-status, .dc-sizeclass {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 24px;
  line-height: 1.1;
  text-transform: uppercase;
}
.dc-status { margin-top: 6px; }
.dc-sizeclass { color: var(--fg); }

/* 25 km badge (shared by both panels) */
.badge-row { margin-top: 8px; }
.badge {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.badge-magenta { border-color: var(--ncrc-magenta); color: var(--ncrc-magenta); }
.badge-muted { border-color: var(--border); color: var(--fg-muted); }

/* Key stats: label-over-value pairs in a 2-col grid */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 4px;
}
.stat { border: 1px solid var(--panel-alt); border-radius: var(--radius); padding: 6px 8px; }
.stat-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
}
.stat-value { font-size: 14px; font-weight: 600; }

/* Charts */
.chart-label { font-size: 10px; fill: var(--fg-muted); font-family: var(--font-body); }
.chart-caption { font-size: 12px; line-height: 1.45; color: var(--fg-muted); margin: 4px 0 0; }

.info-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--panel-alt);
  font-size: 13px;
}

.info-label { color: var(--fg-muted); }
.info-value { font-weight: 600; text-align: right; }

.chart-slot { margin-top: 12px; min-height: 0; }

/* ---------------- About ---------------- */

#about summary {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ncrc-cyan);
  cursor: pointer;
}

.about-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 180ms ease-out;
}

#about p {
  color: var(--fg-muted);
  font-size: 13px;
  margin: 8px 0 0;
}

/* ---------------- Status filter (segment + chips) ---------------- */

#status-filter { padding: 2px 0 8px; }

/* Segmented lifecycle row: All · Existing · Planned (+ a display-only
   Custom tag when the chips hold a mix matching no segment). */
#status-segment {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  vertical-align: middle;
}

.seg-btn {
  background: var(--panel-alt);
  border: none;
  color: var(--fg-muted);
  font-family: var(--font-body);
  font-size: 12px;
  padding: 3px 12px;
  cursor: pointer;
  transition: background 150ms ease-out, color 150ms ease-out;
}
/* Hairline separators between visible segments only */
#status-segment > * + *:not([hidden]) { border-left: 1px solid var(--border); }
.seg-btn:hover { color: var(--fg); }
button.seg-btn.active { background: var(--ncrc-cyan); color: #000000; }
.seg-btn:focus-visible { outline: 2px solid var(--ncrc-cyan); outline-offset: -2px; }
.seg-custom { color: var(--fg); cursor: default; }

/* Quiet expander for the per-status chips */
#status-more {
  background: none;
  border: none;
  color: var(--fg-muted);
  font-family: var(--font-body);
  font-size: 12px;
  padding: 3px 6px;
  margin-left: 4px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#status-more:hover { color: var(--fg); }
#status-more:focus-visible { outline: 2px solid var(--ncrc-cyan); outline-offset: 1px; }

#status-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 0 0;
}
#status-chips[hidden] { display: none; }

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 12px;
  padding: 2px 8px;
  cursor: pointer;
  transition: opacity 150ms ease-out, border-color 150ms ease-out;
}
.status-chip:hover { border-color: var(--fg-muted); }
.status-chip:focus-visible { outline: 2px solid var(--ncrc-cyan); outline-offset: 1px; }
.status-chip.off { opacity: 0.4; }
.status-chip.off .chip-dot { background: var(--border) !important; }
.status-chip.chip-all { color: var(--ncrc-cyan); border-color: var(--ncrc-cyan); }
/* display:inline-flex above outranks the UA [hidden] rule */
.status-chip[hidden] { display: none; }

.chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---------------- Data-center sources ---------------- */

#dc-sources { margin-top: 10px; }

.sources-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  margin-bottom: 2px;
}

.sources-intake { font-size: 12px; color: var(--fg-muted); margin: 2px 0; }

/* Compact wrapping row of domain chips; the "+N more" chip expands
   the row in place (see collapseChips in sidebar.js). */
.sources-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.source-chip {
  display: inline-block;
  padding: 2px 7px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ncrc-cyan);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.source-chip:hover { border-color: var(--ncrc-cyan); }
.source-chip:focus-visible { outline: 2px solid var(--ncrc-cyan); outline-offset: 1px; }
.source-chip[hidden] { display: none; }
button.source-more { color: var(--fg-muted); }
button.source-more:hover { color: var(--fg); border-color: var(--fg-muted); }

.sources-empty {
  font-style: italic;
  color: var(--fg-muted);
  font-size: 13px;
  margin: 4px 0 0;
}

/* "View operator stats" link in the readout */
.op-stats-link {
  background: none;
  border: none;
  color: var(--ncrc-cyan);
  font-family: var(--font-body);
  font-size: 12px;
  padding: 0;
  margin-left: 6px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.op-stats-link:hover { color: var(--fg); }
.op-stats-link:focus-visible { outline: 2px solid var(--ncrc-cyan); outline-offset: 1px; }

/* ---------------- Stats panel ---------------- */

/* Header row: state dropdown + the within-25 km hatch legend chip,
   top right. Wraps cleanly when the width is tight (mobile sheet). */
.stats-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 10px;
}
.stats-head .stats-select {
  flex: 1 1 180px;
  width: auto;
  margin-bottom: 0;
}

.hatch-legend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--fg-muted);
  white-space: nowrap;
}
.hatch-legend svg { flex-shrink: 0; }

.stats-select {
  width: 100%;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 13px;
  padding: 6px 8px;
  margin-bottom: 10px;
  cursor: pointer;
}
.stats-select:focus-visible { outline: 2px solid var(--ncrc-cyan); outline-offset: -1px; }

.stats-scope {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  line-height: 1.1;
  text-transform: uppercase;
}

.stats-total { color: var(--fg-muted); font-size: 13px; margin-bottom: 12px; }
.stats-total-n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--fg);
}

.stats-group { margin-bottom: 12px; }

.stats-group-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  margin-bottom: 6px;
}

.stats-rank {
  list-style: none;
  counter-reset: rank;
  margin: 0;
  padding: 0;
  /* five rows tall regardless of how many are filled, so the panel
     height stays put when the scope changes */
  min-height: 137px;
}
.stats-rank li {
  counter-increment: rank;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding: 3px 0;
  border-bottom: 1px solid var(--panel-alt);
}
.stats-rank li::before {
  content: counter(rank);
  color: var(--fg-muted);
  width: 16px;
  flex-shrink: 0;
}
.stats-rank li span:first-of-type { flex: 1; }
.stats-rank-count { font-weight: 600; }

/* Clickable state rows (national scope): same layout as the plain
   rows, cyan affordance on hover */
.stats-rank-btn {
  flex: 1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--fg);
  text-align: left;
  cursor: pointer;
}
.stats-rank-btn span:first-of-type { flex: 1; }
.stats-rank-btn:hover span:first-of-type {
  color: var(--ncrc-cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.stats-rank-btn:focus-visible { outline: 2px solid var(--ncrc-cyan); outline-offset: 1px; }

/* ---------------- Back to top ---------------- */

/* Floats above the sidebar/sheet content at the bottom right of the
   scroll container: position sticky pins it to the visible bottom
   edge while it is scrolled, and the negative top margin removes it
   from the layout flow. Its static position sits just ABOVE the
   footer, so at full scroll it rests there instead of covering the
   logo. initBackToTop (controls.js) toggles .visible. */
#back-to-top {
  position: sticky;
  bottom: 14px;
  z-index: 4;
  align-self: flex-end;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  margin: -34px 14px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--fg-muted);
  cursor: pointer;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 150ms ease-out, visibility 150ms ease-out,
              color 150ms ease-out, border-color 150ms ease-out;
}
#back-to-top.visible { opacity: 1; visibility: visible; }
#back-to-top:hover { color: var(--ncrc-cyan); border-color: var(--ncrc-cyan); }
#back-to-top:focus-visible { outline: 2px solid var(--ncrc-cyan); outline-offset: 1px; }
/* Upward chevron, pure CSS */
#back-to-top::before {
  content: '';
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: translateY(2px) rotate(45deg);
}

/* ---------------- Address waypoint popup ---------------- */

.addr-popup .mapboxgl-popup-content {
  background: var(--panel-alt);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 12px;
  padding: 6px 22px 6px 10px;
  box-shadow: none;
}
.addr-popup .mapboxgl-popup-tip { display: none; }
.addr-popup .mapboxgl-popup-close-button {
  color: var(--fg-muted);
  font-size: 14px;
  padding: 0 6px;
}
.addr-popup .mapboxgl-popup-close-button:hover { color: var(--fg); background: none; }

/* ---------------- Intro tour ---------------- */

#tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  opacity: 0;
  transition: opacity 180ms ease-out;
}
#tour-overlay.visible { opacity: 1; }

/* Cutout highlight: the element-sized box stays clear while its huge
   box-shadow dims everything else. */
.tour-highlight {
  position: fixed;
  border: 1px solid var(--ncrc-cyan);
  border-radius: var(--radius);
  box-shadow: 0 0 0 200vmax rgba(13, 14, 16, 0.72);
  transition: left 180ms ease-out, top 180ms ease-out,
              width 180ms ease-out, height 180ms ease-out;
  pointer-events: none;
}

.tour-tip {
  position: fixed;
  z-index: 51;
  width: min(320px, calc(100vw - 16px));
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  transition: left 180ms ease-out, top 180ms ease-out;
}

.tour-step-count { font-size: 12px; color: var(--fg-muted); }

.tour-tip h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  color: var(--ncrc-cyan);
  margin: 2px 0 4px;
}

.tour-tip p { font-size: 13px; color: var(--fg); margin: 0 0 10px; }

.tour-buttons { display: flex; align-items: center; gap: 6px; }
.tour-spacer { flex: 1; }

.tour-buttons button {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  cursor: pointer;
  transition: background 150ms ease-out, color 150ms ease-out;
}
.tour-buttons button:hover { background: var(--border); }
.tour-buttons button:disabled { opacity: 0.4; cursor: default; }
.tour-buttons button:focus-visible { outline: 2px solid var(--ncrc-cyan); outline-offset: 1px; }
.tour-buttons .tour-next { background: var(--ncrc-cyan); border-color: var(--ncrc-cyan); color: #000; }
.tour-buttons .tour-next:hover { background: var(--ncrc-cyan-300); }
.tour-buttons .tour-skip { background: none; border-color: transparent; color: var(--fg-muted); }
.tour-buttons .tour-skip:hover { color: var(--fg); background: none; }

/* ---------------- Mapbox chrome ---------------- */

.mapboxgl-ctrl-attrib { font-size: 10px; }

/* Bottom-right control stack (fullscreen / geolocate / zoom +/−):
   one aligned column with 8px gaps between the button groups. */
.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-group {
  margin: 0 10px 8px 0;
}

/* Lift the stack an extra 12px off the bottom edge so it clears
   host-page chrome when the map is embedded in an iframe. The margin
   goes on the lowest button group (zoom) — the attribution stays
   flush with the edge. On mobile the same margin adds clearance
   above the sheet. */
.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl-group:has(.mapboxgl-ctrl-zoom-in) {
  margin-bottom: 22px;
}

/* Control buttons on the app's dark panel palette instead of the
   stock white — hairline border, no drop shadow (brand). */
.mapboxgl-ctrl-group {
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden; /* hover fills stay inside the rounded corners */
}
.mapboxgl-ctrl-group:not(:empty) { box-shadow: none; }
.mapboxgl-ctrl-group button + button { border-top-color: var(--border); }
.mapboxgl-ctrl button:not(:disabled):hover { background-color: var(--border); }

/* The stock icon sprites are drawn dark for a white background —
   invert them. The active/tracking geolocate icons keep Mapbox's
   blue accent (unfiltered, it reads fine on the dark panel). */
.mapboxgl-ctrl button .mapboxgl-ctrl-icon { filter: invert(0.9); }
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon,
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon,
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon,
.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon {
  filter: none;
}

/* ---------------- Responsive ---------------- */

/* Grabber handle for the mobile bottom sheet (inserted by
   js/sheet.js; hidden entirely on desktop). */
#sheet-handle { display: none; }

@media (max-width: 720px) {
  #app { display: block; }
  #map { height: 100vh; height: 100dvh; }

  /* Bottom sheet (spec-18): the map fills the screen and the sidebar
     becomes a slide-up sheet with three snap points — peek (search +
     panel bar), half, full — managed by js/sheet.js. The transform
     below is only the pre-script resting state (peek ≈ 15vh visible
     of the 90dvh-tall sheet). */
  #sidebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 90vh;
    height: 90dvh;
    z-index: 30;
    border-right: none;
    border-top: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0;
    transform: translateY(75vh);
    transform: translateY(75dvh);
    transition: transform 180ms ease-out;
    overscroll-behavior: contain;
  }
  #sidebar.sheet-dragging { transition: none; }

  /* Sheet content scrolls only at the full snap; below it, touch
     drags move the sheet instead (pointer handling in js/sheet.js). */
  #sidebar:not(.sheet-full) { overflow-y: hidden; touch-action: none; }

  /* Grabber = the sheet's top strip: full-width, generous hit area,
     touch-action none so real finger drags reach the pointer-event
     handlers instead of being claimed by browser scrolling. */
  #sheet-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 2;
    flex-shrink: 0;
    padding: 12px 0 10px;
    background: var(--panel);
    cursor: grab;
    touch-action: none;
  }
  #sheet-handle:focus-visible { outline: 2px solid var(--ncrc-cyan); outline-offset: -2px; }
  #sheet-handle::before {
    content: '';
    width: 44px;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
  }

  /* Peek shows search + the panel bar first; the title header slides
     into view when the sheet is raised. Explicit order on every
     child — the footer's margin-top:auto still pins it last. */
  #sheet-handle { order: 0; }
  #search-section { order: 1; }
  #panels-section { order: 2; }
  #sidebar-header { order: 3; }
  #feature-panels { order: 4; }
  #about-section { order: 5; }
  #sidebar-footer { order: 6; }

  /* Back-to-top floats inside the sheet too (same sticky pattern);
     explicit order keeps it just before the footer in the reordered
     column. */
  #back-to-top { order: 5; }

  /* Bottom map controls sit just above the peeked sheet (js/sheet.js
     publishes the real peek height as --sheet-peek) */
  .mapboxgl-ctrl-bottom-left, .mapboxgl-ctrl-bottom-right {
    bottom: var(--sheet-peek, 15vh);
  }

  /* iOS Safari auto-zooms the page when a focused input's font-size
     is under 16px. Keep every text control at 16px on small screens
     instead of disabling page zoom (viewport maximum-scale hurts
     accessibility). The ID/class selectors are needed to outrank the
     base #search-input / .stats-select rules. */
  input, select, textarea,
  #search-input, .stats-select { font-size: 16px; }
}