/* ── CSS Custom Properties ────────────────────────────────────────── */

:root,
[data-theme="dark"] {
  /* Backgrounds */
  --bg-primary:   #0a1628;
  --bg-secondary: #0f2047;
  --bg-elevated:  #152c4a;
  --bg-overlay:   rgba(10, 22, 40, 0.88);

  /* Text */
  --text-primary:   #e8e4d8;
  --text-secondary: #a8a090;
  --text-muted:     #5a6880;

  /* Accent */
  --accent-primary: #d4a855;
  --accent-hover:   #e0bc72;

  /* Borders */
  --border-color:  rgba(212, 168, 85, 0.20);
  --border-strong: rgba(212, 168, 85, 0.42);

  /* Buttons */
  --btn-bg:          rgba(15, 32, 71, 0.92);
  --btn-hover:       rgba(21, 44, 74, 0.97);
  --btn-active-bg:   #d4a855;
  --btn-active-text: #0a1628;

  /* Map colours (read by map.js) */
  --map-water: #0f2847;
  --map-land:  #2d6b45;
  --map-bg:    #0a1628;

  /* Adjustment series colours */
  --adj-total: #30c880;
  --adj-tob:   #f08030;
  --adj-pha:   #5090f8;

  /* Per-month colours for bymonth chart lines and toggle buttons */
  --month-0:  #5090f8;
  --month-1:  #c040a0;
  --month-2:  #30b860;
  --month-3:  #90d040;
  --month-4:  #e0c020;
  --month-5:  #f08030;
  --month-6:  #f84040;
  --month-7:  #f04888;
  --month-8:  #d08020;
  --month-9:  #40b8c0;
  --month-10: #60a8e0;
  --month-11: #8060d8;
}

[data-theme="light"] {
  --bg-primary:   #f4f0e8;
  --bg-secondary: #ede7d6;
  --bg-elevated:  #ffffff;
  --bg-overlay:   rgba(244, 240, 232, 0.92);

  --text-primary:   #2a2218;
  --text-secondary: #6b5d48;
  --text-muted:     #9a8a70;

  --accent-primary: #7a5f20;
  --accent-hover:   #5a4518;

  --border-color:  rgba(122, 95, 32, 0.20);
  --border-strong: rgba(122, 95, 32, 0.42);

  --btn-bg:          rgba(244, 240, 232, 0.94);
  --btn-hover:       rgba(237, 231, 214, 0.99);
  --btn-active-bg:   #7a5f20;
  --btn-active-text: #f4f0e8;

  --map-water: #9fc7df;
  --map-land:  #cbd8a0;
  --map-bg:    #edf2e6;

  /* Adjustment series colours — light-theme variants */
  --adj-total: #108848;
  --adj-tob:   #b86000;
  --adj-pha:   #1050c8;

  /* Per-month colours — light-theme variants */
  --month-0:  #1050c8;
  --month-1:  #901070;
  --month-2:  #108840;
  --month-3:  #508800;
  --month-4:  #908000;
  --month-5:  #b86000;
  --month-6:  #c81010;
  --month-7:  #b81050;
  --month-8:  #906000;
  --month-9:  #108088;
  --month-10: #1060a0;
  --month-11: #5030a8;
}

/* ── Reset & Base ─────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: background 0.25s, color 0.25s;
}

/* ── Layout ───────────────────────────────────────────────────────── */

body {
  display: flex;
  flex-direction: column;
}

/* ── Header ───────────────────────────────────────────────────────── */

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  height: 3.25rem;
  flex-shrink: 0;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  z-index: 10;
  transition: background 0.25s, border-color 0.25s;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.header-brand:hover .header-title {
  color: var(--accent-primary);
  transition: color 0.15s;
}

.header-logo {
  color: var(--accent-primary);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

.header-subtitle {
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.14em;
  font-variant-caps: all-small-caps;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* ── Buttons ──────────────────────────────────────────────────────── */

.btn-control {
  background: var(--btn-bg);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.btn-control:hover {
  background: var(--btn-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.btn-control.active {
  background: var(--btn-active-bg);
  color: var(--btn-active-text);
  border-color: var(--btn-active-bg);
  font-weight: 600;
}

/* ── Projection Toggle ────────────────────────────────────────────── */

.projection-toggle {
  display: flex;
  gap: 0.25rem;
}

/* ── Theme Toggle ─────────────────────────────────────────────────── */

.theme-toggle {
  padding: 0.375rem 0.6rem;
  font-size: 0.9rem;
  line-height: 1;
}

.theme-icon {
  display: inline-block;
  line-height: 1;
}

[data-theme="dark"]  .theme-icon-light,
[data-theme="light"] .theme-icon-dark {
  display: none;
}

/* ── Map Area ─────────────────────────────────────────────────────── */

.map-wrapper {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

.map-container {
  width: 100%;
  height: 100%;
}

/* ── Zoom Controls ────────────────────────────────────────────────── */

.zoom-controls {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  z-index: 5;
}

.btn-zoom {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--btn-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 0.375rem;
  font-size: 1.1rem;
  font-weight: 300;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  line-height: 1;
}

.btn-zoom:hover {
  background: var(--btn-hover);
  border-color: var(--border-strong);
  color: var(--accent-primary);
}

.btn-zoom:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.btn-zoom-locate {
  margin-top: 0.125rem;
  font-size: 0.95rem;
  font-weight: 400;
}

.map-control-tooltip {
  position: fixed;
  top: 0;
  right: 0;
  width: min(12rem, calc(100vw - 1rem));
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.5rem;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 0.75rem;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.24);
  pointer-events: none;
  z-index: 20;
}

.map-control-tooltip[hidden] {
  display: none;
}

.zoom-level {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.6875rem;
  color: var(--text-muted);
  padding: 0.125rem 0;
  letter-spacing: 0.02em;
  min-width: 3rem;
  text-align: center;
}

/* ── Footer ───────────────────────────────────────────────────────── */

.app-footer {
  height: 1.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1.25rem;
  flex-shrink: 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  z-index: 10;
  transition: background 0.25s, border-color 0.25s;
}

.footer-stat,
.footer-coord {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.footer-sep {
  color: var(--border-strong);
  font-size: 0.75rem;
}

/* ── QR code widget ──────────────────────────────────────────────── */

.qr-container {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 5;
  transition: background 0.25s, border-color 0.25s;
}

.qr-container .qr-code {
  display: block;
  line-height: 0;
}

.qr-container .qr-code svg {
  display: block;
}

.qr-label {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ── Detail Panel Overlay ─────────────────────────────────────────── */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(30px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.overlay-backdrop {
  position: fixed;
  inset: 0;
  background: transparent;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.25s ease;
}

.overlay-backdrop[hidden] {
  display: none;
}

.detail-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 1rem;
  width: 1490px;
  max-width: 96vw;
  height: min(92vh, 780px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4), 0 0 1px var(--border-strong);
  transition: background 0.25s, border-color 0.25s;
  position: relative;
}

/* .detail-top: flex row — left=category+name+meta, right=close+QR */
.detail-top {
  display: flex;
  gap: 1.25rem;
  padding: 1.5rem 1.75rem 1rem;
  align-items: flex-start;
}

.detail-top-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.detail-top-aside {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
}

.detail-header-text {
  min-width: 0;
}

.detail-category {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-primary);
  margin-bottom: 0.375rem;
}

.detail-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
  margin: 0;
}

.detail-name-toggle {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  background: none;
  border: none;
  padding: 0;
  cursor: default;
  text-align: left;
  width: 100%;
}

.detail-name-toggle .detail-name {
  /* inherits all name styles above */
}

.detail-expand-chevron {
  display: none;
  font-size: 1rem;
  color: var(--text-muted);
  transition: transform 0.2s ease, color 0.15s;
  flex-shrink: 0;
  line-height: 1.2;
  margin-top: 0.25rem;
}

.detail-name-toggle[aria-expanded="true"] .detail-expand-chevron {
  transform: rotate(90deg);
  color: var(--accent-primary);
}

.detail-meta[hidden] {
  display: none;
}

/* ── Detail header bar ──────────────────────────────────────────────── */
.detail-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1rem 0.875rem 1.75rem;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-color);
}

.detail-header-left {
  flex: 1;
  min-width: 0;
}

/* QR code in the header — desktop only (hidden on mobile) */
.detail-header-qr {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 0.25rem;
}

.detail-qr-header .qr-label {
  text-align: center;
}

.detail-header-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.detail-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 0.375rem;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  font-size: 1.125rem;
  flex-shrink: 0;
}
.detail-action-btn:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}
.detail-action-btn svg {
  display: block;
}
.detail-close {
  font-size: 1.25rem;
}

.detail-header-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  max-width: min(14rem, calc(100vw - 1rem));
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.5rem;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 0.75rem;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.24);
  pointer-events: none;
  z-index: 20;
}

.detail-header-tooltip[hidden] {
  display: none;
}

.detail-download-menu {
  position: absolute;
  top: calc(1rem + 2rem + 0.25rem);
  right: 1rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  overflow: hidden;
  z-index: 10;
  min-width: 10rem;
}
.detail-download-menu[hidden] { display: none; }
.detail-download-opt {
  display: block;
  width: 100%;
  padding: 0.625rem 1rem;
  text-align: left;
  border: none;
  background: none;
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.8125rem;
  transition: background 0.15s;
}
.detail-download-opt:hover { background: var(--bg-secondary); }

.detail-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem 1.25rem;
}

.detail-header-meta {
  margin-top: 0.75rem;
  max-width: 42rem;
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.meta-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.meta-value {
  font-size: 0.875rem;
  color: var(--text-primary);
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}

.detail-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
  margin: 0 1.75rem;
}

.detail-description {
  padding: 1.25rem 1.75rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.detail-variables {
  padding: 0 1.75rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.variable-tag {
  padding: 0.3125rem 0.75rem;
  border-radius: 1.25rem;
  border: 1px solid var(--border-strong);
  background: rgba(212, 168, 85, 0.08);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--accent-primary);
  letter-spacing: 0.02em;
}

.detail-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
}
.qr-label {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

.detail-qr .qr-code {
  display: block;
  line-height: 0;
}

/* ── About section ──────────────────────────────────────────────────── */
.about-section {
  padding: 1.25rem 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.about-description {
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--text-secondary);
}
.about-variables {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.about-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

/* ── BU map tile ─────────────────────────────────────────────────── */

.detail-bu {
  padding: 1.25rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ── Detail section tabs (top-level panels: BU surface, graphs, …) ── */

.detail-sections {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.section-tabs {
  display: flex;
  padding: 0 1.75rem;
  gap: 0;
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.section-tabs::-webkit-scrollbar {
  display: none;
}

/* ── Section-tab scroll arrows ────────────────────────────────────── */

.section-tabs-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  flex-shrink: 0;
}

/* Remove bottom border from .section-tabs itself when inside wrap */
.section-tabs-wrap .section-tabs {
  border-bottom: none;
  flex: 1;
  min-width: 0;
}

.tabs-scroll-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  font-size: 1.125rem;
  line-height: 1;
  border: none;
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  padding: 0;
  z-index: 1;
}

.tabs-scroll-btn:hover {
  color: var(--text-primary);
  background: var(--bg-secondary);
}

.tabs-scroll-btn[hidden] {
  display: none;
}

.section-tab {
  padding: 0.5rem 1rem 0.4375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
  white-space: nowrap;
}

.section-tab:hover {
  color: var(--text-primary);
}

.section-tab.active {
  color: var(--accent-primary);
  border-bottom-color: var(--accent-primary);
}

.section-panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.section-panel[hidden] { display: none; }

.print-only-panel {
  display: none;
}

.print-section-title {
  display: none;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
  margin: 0 0 1rem;
  padding: 0 1.75rem;
}

.detail-print-brand {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0 1rem;
  margin: 0 1.75rem 1rem;
  border-bottom: 1px solid var(--border-color);
}

.detail-print-root {
  position: fixed;
  left: -20000px;
  top: 0;
  width: 7.5in;
  opacity: 0;
  pointer-events: none;
}

.detail-pdf-pages {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.detail-pdf-page {
  width: 7.5in;
  box-sizing: border-box;
  background: #fff;
}

.detail-report-map-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.detail-report-map-grid .section-panel {
  min-width: 0;
}

/* ── BU year tabs ─────────────────────────────────────────────────── */

.bu-tabs {
  display: flex;
  gap: 0.25rem;
}

.bu-tab {
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid var(--border-color);
  border-radius: 0.25rem;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.bu-tab:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.bu-tab.active {
  background: var(--btn-active-bg);
  color: var(--btn-active-text);
  border-color: var(--btn-active-bg);
}

.bu-tab-panels {
  /* panels size themselves to their content */
}

/* Tile on the left, scores column on the right */
.bu-tab-panel {
  display: flex;
  flex-direction: row;
  gap: 1.25rem;
  align-items: flex-start;
}

.bu-tab-panel[hidden] {
  display: none;
}

/* ── BU map wrap + crosshair overlay ─────────────────────────────── */

.detail-bu-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.detail-map-loading {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  background: color-mix(in srgb, var(--bg-overlay) 72%, transparent);
  pointer-events: none;
  z-index: 2;
}

.detail-map-spinner {
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.detail-bu-wrap.is-loading .detail-bu-crosshair,
.detail-bu-wrap.is-loading .detail-bu-scale {
  opacity: 0.45;
}

.detail-bu-wrap.is-loading .detail-map-loading {
  display: flex;
}

.detail-bu-map {
  display: block;
  border-radius: 0.375rem;
  overflow: hidden;
  image-rendering: pixelated;
  border: 1px solid var(--border-strong);
  /* width/height/background-* set inline from sprite descriptor */
}

.detail-bu-change-canvas {
  display: block;
  border-radius: 0.375rem;
  border: 1px solid var(--border-strong);
  image-rendering: pixelated;
}

.detail-print-media {
  display: none;
  border-radius: 0.375rem;
  border: 1px solid var(--border-strong);
  image-rendering: pixelated;
}

.detail-chart-print-media {
  display: block;
  width: 100%;
  height: 100%;
}

/* 1-px crosshair centred exactly at 50% of the tile */
.detail-bu-crosshair {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 0.375rem;
  overflow: hidden;
}

.detail-bu-crosshair::before,
.detail-bu-crosshair::after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, 0.80);
}

/* vertical arm */
.detail-bu-crosshair::before {
  left: calc(50% - 0.5px);
  top: 0;
  bottom: 0;
  width: 1px;
}

/* horizontal arm */
.detail-bu-crosshair::after {
  top: calc(50% - 0.5px);
  left: 0;
  right: 0;
  height: 1px;
}

/* 5 km scale bar (5/20 × 160 px = 40 px) */
.detail-bu-scale {
  position: absolute;
  bottom: 11px;
  right: 7px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  pointer-events: none;
}

.scale-bar {
  width: 40px;
  height: 2px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 1px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
}

.scale-label {
  font-size: 9px;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  color: rgba(255, 255, 255, 0.90);
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.9);
  letter-spacing: 0.04em;
}

.detail-bu-scores {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 0.625rem;
}

.bu-score {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.bu-score-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.bu-score-value {
  font-size: 0.9375rem;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  color: var(--text-primary);
}

.bu-score-up   { color: #e05050; }
.bu-score-down { color: #5090e0; }

/* ── Population year tabs (share visual style with .bu-tab) ───────── */

.pop-tab {
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid var(--border-color);
  border-radius: 0.25rem;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.pop-tab:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.pop-tab.active {
  background: var(--btn-active-bg);
  color: var(--btn-active-text);
  border-color: var(--btn-active-bg);
}

.pop-tab-panel {
  display: flex;
  flex-direction: row;
  gap: 1.25rem;
  align-items: flex-start;
}

.pop-tab-panel[hidden] {
  display: none;
}

/* ── Population score right column (legend + density scores) ───────── */

.pop-score-col {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  justify-content: flex-start;
}

/* ── Population density colour gradient legend ─────────────────────── */
/*
 * Gradient stops match generate_pop_tiles.py PALETTE, placed on a
 * log₁₀ scale (0–10 000 people/km²):
 *   0  →  0%       1  →  1%      10  →  26%
 *  50  → 42%     200  → 56%     500  → 65%
 * 2000 → 77%    5000  → 86%   10000  → 100%
 */
.pop-legend {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Change canvas legend: blue (decrease) → dark-grey (no change) → red (increase).
 * Saturation represents ~10 pp built-up change or ~1 000 people/km² respectively. */
.change-legend-bar {
  width: 160px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(to right,
    rgb(0, 0, 255)    0%,
    rgb(18, 18, 18)  50%,
    rgb(255, 0, 0)  100%
  );
}

/*
 * BU gradient stops match generate_bu_tiles.py PALETTE on a log scale
 * (log base using log(x+0.1) to handle x=0, range 0–50% built-up):
 *   0%   →  0%     0.3% → 22%     1% → 39%     2% → 49%
 *   3%   → 55%     6%   → 66%    12% → 77%    50% → 100%
 */
.bu-legend-bar {
  width: 160px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(to right,
    rgb(8,48,107)    0%,
    rgb(29,78,137)   22%,
    rgb(33,113,181)  39%,
    rgb(86,177,247)  49%,
    rgb(247,209,61)  55%,
    rgb(248,150,30)  66%,
    rgb(220,47,2)    77%,
    rgb(157,2,8)     100%
  );
}

.pop-legend-bar {
  width: 160px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(to right,
    rgb(15,15,25)    0%,
    rgb(25,40,100)   1%,
    rgb(45,85,175)   26%,
    rgb(55,150,175)  42%,
    rgb(80,190,110)  56%,
    rgb(195,205,60)  65%,
    rgb(240,130,30)  77%,
    rgb(220,20,10)   86%,
    rgb(180,0,8)     100%
  );
}

.pop-legend-labels {
  display: flex;
  justify-content: space-between;
  width: 160px;
  font-size: 0.625rem;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  color: var(--text-muted);
}

.pop-legend-caption {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* ── Temperature chart section ────────────────────────────────────── */

.temp-chart-section {
  padding: 0.75rem 1.75rem 0.875rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.chart-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.625rem;
  flex-wrap: wrap;
}

/* ── Chart mode row (scrollable subtabs) ─────────────────────── */
.chart-mode-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.375rem;
  flex-shrink: 0;
}

.chart-mode-toggle {
  display: flex;
  gap: 0.25rem;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.chart-mode-toggle::-webkit-scrollbar { display: none; }

.chart-mode-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  border-radius: 0.25rem;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
  padding: 0;
}
.chart-mode-arrow:hover { color: var(--text-primary); background: var(--bg-secondary); }
.chart-mode-arrow[hidden] { display: none; }

/* ── Chart controls row (trend/LOESS/zoom) ────────────────────── */
.chart-controls-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-height: 1.75rem;
}

.chart-mode-btn {
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid var(--border-color);
  border-radius: 0.25rem;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
  white-space: nowrap;
}

.chart-mode-btn:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.chart-mode-btn.active {
  background: var(--btn-active-bg);
  color: var(--btn-active-text);
  border-color: var(--btn-active-bg);
}

/* ── Chart partial-year controls (Est. + 95% CI) ─────────────────── */

.chart-partial-controls {
  display: flex;
  gap: 0.1875rem;
  flex-shrink: 0;
}

.chart-partial-controls[hidden] {
  display: none;
}

/* ── Chart trend controls (universal Trend toggle) ───────────────── */

.chart-trend-controls {
  display: flex;
  gap: 0.1875rem;
  flex-shrink: 0;
}

.chart-trend-controls[hidden] {
  display: none;
}

/* ── Chart zoom controls ──────────────────────────────────────────── */

.chart-zoom-controls {
  display: flex;
  gap: 0.1875rem;
  flex-shrink: 0;
}

.chart-zoom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  font-size: 1rem;
  line-height: 1;
  border: 1px solid var(--border-color);
  border-radius: 0.25rem;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}

.chart-zoom-btn:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: var(--bg-secondary);
}

.chart-zoom-btn:active {
  background: var(--btn-active-bg);
  color: var(--btn-active-text);
  border-color: var(--btn-active-bg);
}

.chart-ci-btn {
  padding: 0 0.375rem;
  height: 1.625rem;
  font-size: 0.6875rem;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  border: 1px solid var(--border-color);
  border-radius: 0.25rem;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.chart-ci-btn:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: var(--bg-secondary);
}

.chart-ci-btn.active {
  background: var(--btn-active-bg);
  color: var(--btn-active-text);
  border-color: var(--btn-active-bg);
}

.chart-ci-btn:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

/* ── By-month toggle bar ──────────────────────────────────────────── */

.chart-month-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.375rem 0.25rem 0.125rem;
  justify-content: center;
}

.chart-month-toggles[hidden] {
  display: none;
}

.month-toggle-btn {
  /* --m-color is set per-button via inline style="--m-color:var(--month-N)" */
  padding: 0 0.375rem;
  height: 1.5rem;
  font-size: 0.625rem;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 0.25rem;
  border: 1.5px solid var(--border-color);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.month-toggle-btn:hover {
  border-color: var(--m-color);
  color: var(--m-color);
}

.month-toggle-btn.active {
  border-color: var(--m-color);
  color: var(--m-color);
  background: transparent;
}

/* Line-style indicator: dashed or dotted border on active buttons */
.month-toggle-btn.active[data-dash="dashed"] {
  border-style: dashed;
}

.month-toggle-btn.active[data-dash="dotted"] {
  border-style: dotted;
}

/* ── Adjustment series toggle bar ─────────────────────────────────── */

.adj-series-toggles {
  display: flex;
  gap: 0.375rem;
  padding: 0.375rem 0.25rem 0.125rem;
  justify-content: center;
}

.adj-series-btn {
  /* --s-color is set per-button via inline style="--s-color:var(--adj-*)" */
  padding: 0 0.5rem;
  height: 1.5rem;
  font-size: 0.625rem;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: 0.25rem;
  border: 1.5px solid var(--border-color);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}

.adj-series-btn:hover:not(:disabled) {
  border-color: var(--s-color);
  color: var(--s-color);
}

.adj-series-btn.active {
  border-color: var(--s-color);
  color: var(--s-color);
}

.adj-series-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Canvas container: fixed chart height across live, export, and PDF renders. */
.chart-canvas-wrap {
  position: relative;
  width: 100%;
  flex: none;
  height: 375px;
  min-height: 375px;
  overflow: hidden;
}

.chart-canvas-wrap.heatmap {
  height: 375px;
  min-height: 375px;
}

.temp-chart-canvas {
  display: block;
  /* width/height set via JS */
}

.chart-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--bg-secondary);
  border: 1px solid var(--border-strong);
  border-radius: 0.375rem;
  padding: 0.3125rem 0.625rem;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.75rem;
  color: var(--text-primary);
  white-space: nowrap;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}

.chart-tooltip[hidden] {
  display: none;
}

/* ── Chart footer (hint + LOESS slider — fixed height for layout stability) ── */

.chart-footer {
  display: flex;
  flex-direction: column;
  min-height: 2.75rem;
  padding-top: 0.125rem;
  gap: 0.125rem;
}

.chart-footer[hidden] {
  display: none;
}

.chart-hint {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--text-muted);
  text-transform: uppercase;
  margin: 0;
  line-height: 1.4rem;
}

.chart-loess-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden; /* JS shows when LOESS is active */
}

.loess-slider-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6875rem;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  letter-spacing: 0.03em;
  cursor: pointer;
}

.loess-slider-title {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.625rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.loess-range {
  -webkit-appearance: none;
  appearance: none;
  width: 120px;
  height: 3px;
  border-radius: 2px;
  background: var(--border-strong);
  outline: none;
  cursor: pointer;
}

.loess-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-primary);
  cursor: pointer;
  border: 2px solid var(--bg-elevated);
  transition: transform 0.1s;
}

.loess-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-primary);
  cursor: pointer;
  border: 2px solid var(--bg-elevated);
}

.loess-range::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.loess-slider-value {
  min-width: 2rem;
  text-align: right;
  color: var(--text-secondary);
  font-size: 0.6875rem;
}

/* ── Heatmap colour-scale legend ──────────────────────────────────── */

.chart-heat-legend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.375rem;
}

.chart-heat-legend[hidden] {
  display: none;
}

.heat-label {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.6875rem;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 3.5rem;
}

.heat-cold-label { text-align: right; }
.heat-hot-label  { text-align: left;  }

/*
 * Gradient: cold blue → near-black (dark mode) / near-white (light mode) → hot red.
 * Mirrors the _heatColor() function in temp-chart.js exactly.
 */
.heat-legend-bar {
  flex: 1;
  height: 8px;
  border-radius: 3px;
  /* Dark mode default */
  background: linear-gradient(to right,
    rgb(10,  50, 220),   /* cold  */
    rgb(10,  16,  24),   /* mid — near-black (panel bg dark) */
    rgb(220, 25,  10)    /* hot   */
  );
  border: 1px solid var(--border-color);
}

[data-theme="light"] .heat-legend-bar {
  background: linear-gradient(to right,
    rgb(10,  50, 220),    /* cold  */
    rgb(244, 240, 232),   /* mid — near-white (panel bg light) */
    rgb(220, 25,  10)     /* hot   */
  );
}

/* (BU column widths defined with table column styles below) */

/* ── Loading shimmer ──────────────────────────────────────────────── */

.detail-loading {
  padding: 1.75rem;
}

.loading-bar {
  height: 0.875rem;
  border-radius: 0.25rem;
  background: linear-gradient(
    90deg,
    var(--bg-secondary),
    var(--bg-elevated),
    var(--bg-secondary)
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  margin-bottom: 0.625rem;
}

.loading-bar.short  { width: 60%; }
.loading-bar.medium { width: 80%; }
.loading-bar.long   { width: 100%; }

/* ── View / Projection Toggle ─────────────────────────────────────── */

.view-toggle {
  display: flex;
  gap: 0.25rem;
}

/* ── Header Station Search ────────────────────────────────────────── */

.header-station-search {
  position: relative;
  flex: 1;
  max-width: 22rem;
  margin: 0 0.75rem;
}

.station-search-input {
  width: 100%;
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 0.375rem;
  padding: 0.3rem 0.75rem;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.8125rem;
  outline: none;
  transition: border-color 0.15s, background 0.25s, color 0.25s;
}

.station-search-input:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(212, 168, 85, 0.2);
}

.station-dropdown {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  list-style: none;
  z-index: 100;
  overflow: hidden;
  transition: background 0.25s, border-color 0.25s;
}

.station-dropdown[hidden] {
  display: none;
}

.station-option {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.5rem 0.875rem;
  cursor: pointer;
  gap: 0.75rem;
  transition: background 0.1s;
}

.station-option:hover,
.station-option:focus {
  background: rgba(212, 168, 85, 0.1);
  outline: none;
}

[data-theme="light"] .station-option:hover,
[data-theme="light"] .station-option:focus {
  background: rgba(122, 95, 32, 0.08);
}

.option-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.option-id {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.75rem;
  color: var(--accent-primary);
}

.option-name {
  font-size: 0.8125rem;
  color: var(--text-primary);
}

.option-country {
  font-size: 0.6875rem;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Responsive: narrow viewports ─────────────────────────────────── */

/*
 * Full-screen panel on narrow viewports.
 */
@media (max-width: 834px) {
  .overlay-backdrop {
    align-items: flex-start;
    padding: 0;
  }
  .detail-panel {
    width: 100%;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    max-height: none;
    animation: none;
  }
  .detail-header {
    padding: 0.75rem 0.75rem 0.75rem 1.25rem;
  }
  .detail-name {
    font-size: 1.25rem;
  }
  .detail-name-toggle {
    cursor: pointer;
  }
  .detail-expand-chevron {
    display: inline-block;
  }
  .section-tab {
    font-size: 0.625rem;
    padding: 0.5rem 0.75rem;
  }
  .temp-chart-section {
    padding: 0.625rem 1rem 0.75rem;
  }
  .chart-mode-row {
    margin-bottom: 0.25rem;
  }
  .chart-controls-row {
    margin-bottom: 0.375rem;
    min-height: 1.5rem;
  }
  .chart-month-toggles,
  .adj-series-toggles {
    gap: 0.1875rem;
    padding: 0.25rem 0.125rem 0;
  }
  .chart-footer {
    min-height: 2rem;
    padding-top: 0;
  }

  /* On mobile: hide the header QR */
  .detail-header-qr {
    display: none;
  }
}

@media (max-width: 600px) {
  .app-header {
    flex-wrap: wrap;
    height: auto;
    padding: 0.5rem 1rem;
    gap: 0.4rem;
  }

  .header-station-search {
    order: 3;
    flex: 1 1 100%;
    max-width: 100%;
    margin: 0;
    padding-bottom: 0.25rem;
  }

  /* Hide all QR codes on small screens */
  .detail-qr,
  #map-qr-container {
    display: none !important;
  }

  /* Without QR aside, let the close button stand alone */
  .detail-top-aside {
    gap: 0;
  }
}

/* ── Table View ───────────────────────────────────────────────────── */

.table-container {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  z-index: 1;
  transition: background 0.25s;
}

.table-container[hidden] {
  display: none;
}

/* ── Filter Toggle Button (in header) ─────────────────────────────── */

.filter-toggle-btn {
  flex-shrink: 0;
  font-size: 0.8125rem;
  padding: 0.3rem 0.7rem;
  white-space: nowrap;
}

/* ── Filter Bar ───────────────────────────────────────────────────── */

.filter-bar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  transition: background 0.25s, border-color 0.25s;
}

.filter-bar::-webkit-scrollbar {
  display: none;
}

.filter-bar[hidden] {
  display: none;
}

.filter-bar-btn {
  flex-shrink: 0;
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
  white-space: nowrap;
}

.filter-bar-btn.active {
  background: var(--btn-active-bg);
  color: var(--btn-active-text);
  border-color: var(--btn-active-bg);
}

.filter-bar-spacer {
  flex: 1;
  min-width: 0.5rem;
}

.filter-bar-clear {
  flex-shrink: 0;
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
  white-space: nowrap;
  color: var(--text-muted);
}

/* ── Filter Dropdown ──────────────────────────────────────────────── */

.filter-dropdown {
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  min-width: 14rem;
  max-height: 22rem;
  overflow-y: auto;
  padding: 0.25rem 0;
  transition: background 0.25s, border-color 0.25s;
}

.filter-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  transition: background 0.1s, color 0.1s;
  user-select: none;
}

.filter-dropdown-item:hover {
  background: rgba(212, 168, 85, 0.08);
  color: var(--text-primary);
}

[data-theme="light"] .filter-dropdown-item:hover {
  background: rgba(122, 95, 32, 0.07);
}

.filter-dropdown-item.selected {
  color: var(--text-primary);
}

.filter-dropdown-item input[type="checkbox"] {
  flex-shrink: 0;
  accent-color: var(--accent-primary);
  width: 0.875rem;
  height: 0.875rem;
  cursor: pointer;
}

.table-toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.625rem 1.25rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  transition: background 0.25s, border-color 0.25s;
}


.table-count {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.6875rem;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color 0.25s;
}

.table-scroller {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
}

.stations-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

.stations-table thead th {
  position: sticky;
  top: 0;
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.625rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background 0.25s, color 0.15s, border-color 0.25s;
}

.stations-table thead th:hover {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

.stations-table thead th.col-sorted {
  color: var(--accent-primary);
}

.stations-table thead th.col-action {
  cursor: default;
}

.stations-table tbody tr.station-row {
  height: 44px;
  cursor: pointer;
  transition: background 0.1s;
}

.stations-table tbody tr.station-row:hover {
  background: rgba(212, 168, 85, 0.06);
}

[data-theme="light"] .stations-table tbody tr.station-row:hover {
  background: rgba(122, 95, 32, 0.06);
}

.stations-table td {
  padding: 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 16rem;
  transition: border-color 0.25s, color 0.25s;
}

.stations-table td.col-numeric {
  text-align: right;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.stations-table thead th.col-numeric {
  text-align: right;
}

.col-id {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.72rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Name column: text + inline map button side by side */
.col-name-cell {
  max-width: 16rem;
}

.col-name-flex {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}

.col-name-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.show-on-map-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.1875rem 0.25rem;
  border-radius: 0.25rem;
  transition: color 0.15s, background 0.15s;
  line-height: 1;
  opacity: 0.5;
}

.station-row:hover .show-on-map-btn,
.show-on-map-btn:focus {
  opacity: 1;
  color: var(--accent-primary);
  background: rgba(212, 168, 85, 0.12);
}

/* ── Table BU columns ─────────────────────────────────────────────── */

.col-bu       { width: 4.5rem; }
.col-bu-change { width: 4rem; }

/* ── Table population columns ─────────────────────────────────────── */

.col-pop        { width: 5rem; }
.col-pop-change { width: 4.5rem; }

/* ── GHCN coverage / trend columns ────────────────────────────────── */

.col-year  { width: 3.5rem; }
.col-run   { width: 6rem; }
.col-trend { width: 6.5rem; }

.trend-up   { color: #e05050; }
.trend-down { color: #5090e0; }

/* Responsive: hide less important columns on narrow screens */
@media (max-width: 767px) {
  .col-lng {
    display: none;
  }
}

@media (max-width: 480px) {
  .col-id {
    display: none;
  }

  /* Hide map QR on very small screens — detail panel QR still shows */
  .qr-container {
    display: none;
  }

  /* Shrink zoom controls to save space */
  .btn-zoom {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 1rem;
  }

  .zoom-level {
    font-size: 0.625rem;
    min-width: 2.5rem;
  }
}

/* ── Screen-reader-only utility ───────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Loading overlay ──────────────────────────────────────────────── */

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  z-index: 20;
  gap: 1rem;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.loading-overlay.ready {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loading-spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid var(--border-color);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.loading-text {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 0.875rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* ── Sources & References Panel ──────────────────────────────────── */

.sources-btn {
  margin-left: auto;
  font-size: 0.6875rem;
  padding: 0.2rem 0.6rem;
  white-space: nowrap;
}

.sources-panel {
  position: fixed;
  bottom: 2.5rem; /* sits above the footer */
  right: 1.25rem;
  width: 420px;
  max-width: calc(100vw - 2rem);
  max-height: 70vh;
  overflow-y: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border-strong);
  border-radius: 0.75rem;
  box-shadow: 0 16px 56px rgba(0, 0, 0, 0.4), 0 0 1px var(--border-strong);
  z-index: 40;
  animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transition: background 0.25s, border-color 0.25s;
}

.sources-panel[hidden] {
  display: none;
}

.sources-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
  gap: 1rem;
}

.sources-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.sources-close {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.sources-close:hover {
  color: var(--text-primary);
  background: var(--btn-hover);
}

.sources-body {
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sources-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sources-section-title {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-primary);
  margin-bottom: 0.25rem;
}

.sources-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.sources-item {
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  transition: background 0.2s;
}

.sources-item-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.sources-cite {
  font-size: 0.6875rem;
  font-weight: 400;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  color: var(--text-secondary);
}

.sources-item-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.sources-link {
  color: var(--accent-primary);
  text-decoration: none;
  white-space: nowrap;
}

.sources-link:hover {
  text-decoration: underline;
}

/* ── Cookie Consent Banner ───────────────────────────────────────── */

.cookie-banner {
  position: fixed;
  bottom: 1.875rem; /* sits above the footer */
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-strong);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
  animation: slideUpBanner 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  transition: background 0.25s, border-color 0.25s;
}

.cookie-banner[hidden] {
  display: none;
}

@keyframes slideUpBanner {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.cookie-banner-text {
  flex: 1;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.cookie-banner-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* ── Print / PDF export ───────────────────────────────────────────── */
/* ── Print-mode class (applied by JS before window.print()) ─────────── */
/* This normalises the flex layout to flow-based so charts can measure their
   correct print height (260px) before the @media print rules fire.         */

.detail-panel.print-mode {
  width: 7.5in !important;
  max-width: 7.5in !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 auto 2rem !important;
  display: block !important;
}
.overlay-backdrop.print-mode {
  position: static !important;
  display: block !important;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
  padding: 0 !important;
}
.detail-panel.export-mode {
  width: 1490px !important;
  max-width: 1490px !important;
  height: 780px !important;
  max-height: 780px !important;
  flex-shrink: 0 !important;
  border: none !important;
  border-radius: 1rem !important;
  animation: none !important;
  box-shadow: none !important;
}
.detail-panel.export-mode .detail-header {
  padding: 1rem 1rem 0.875rem 1.75rem !important;
}
.detail-panel.export-mode .detail-header-actions {
  display: none !important;
}
.detail-panel.export-mode .detail-download-menu {
  display: none !important;
}
.detail-panel.export-mode .detail-header-tooltip {
  display: none !important;
}
.detail-panel.export-mode .detail-name {
  font-size: 1.625rem !important;
}
.detail-panel.export-mode .section-tab {
  font-size: 0.6875rem !important;
  padding: 0.75rem 1rem !important;
}
.detail-panel.export-mode .temp-chart-section {
  padding: 1rem 1.25rem 1.25rem !important;
}
.detail-panel.export-mode .detail-header-qr {
  display: flex !important;
}
.detail-panel.export-mode .detail-qr {
  display: flex !important;
}
.detail-panel.export-mode .chart-hint {
  display: none !important;
}
.detail-panel.export-mode .detail-map-media,
.detail-panel.export-mode .detail-map-loading {
  display: none !important;
}
.detail-panel.export-mode .detail-print-media {
  display: block !important;
}
.detail-panel.print-mode .detail-sections {
  display: block !important;
  overflow: visible !important;
  height: auto !important;
}
.detail-panel.print-mode .section-panel {
  display: block !important;
  overflow: visible !important;
  height: auto !important;
  page-break-before: always;
  break-before: page;
  page-break-after: always;
  break-after: page;
}
.detail-panel.print-mode .section-panel:first-of-type {
  page-break-before: auto;
  break-before: auto;
}
.detail-panel.print-mode .section-panel:last-of-type {
  page-break-after: auto;
  break-after: auto;
}
.detail-panel.print-mode .print-only-panel {
  display: block !important;
}
.detail-panel.print-mode .temp-chart-section {
  height: auto !important;
  overflow: visible !important;
}
.detail-panel.print-mode .print-section-title {
  display: block !important;
}
.detail-panel.print-mode .detail-print-brand {
  display: flex !important;
}
.detail-panel.print-mode .section-tabs-wrap {
  display: none !important;
}
.detail-panel.print-mode .detail-header-actions,
.detail-panel.print-mode .detail-download-menu,
.detail-panel.print-mode .detail-header-tooltip {
  display: none !important;
}
.detail-panel.print-mode .detail-header-qr {
  display: flex !important;
}
.detail-panel.print-mode .detail-qr {
  display: flex !important;
}
.detail-panel.print-mode .detail-header-meta {
  grid-template-columns: 1fr 1fr !important;
  gap: 0.375rem 1rem !important;
}
.detail-panel.print-mode .detail-header-meta .meta-item {
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 0.375rem !important;
}
.detail-panel.print-mode .chart-canvas-wrap,
.detail-panel.print-mode .chart-canvas-wrap.heatmap {
  height: 275px !important;
  min-height: 275px !important;
}
.detail-panel.print-mode .detail-map-media,
.detail-panel.print-mode .detail-map-loading {
  display: none !important;
}
.detail-panel.print-mode .detail-print-media {
  display: block !important;
}
.detail-panel.print-mode .detail-bu-map,
.detail-panel.print-mode .detail-bu-change-canvas,
.detail-panel.print-mode .detail-print-media {
  width: 150px !important;
  height: 150px !important;
}
.detail-panel.print-mode .chart-footer {
  min-height: 0 !important;
}
.detail-panel.print-mode .chart-hint {
  display: none !important;
}
.detail-panel.print-mode .chart-mode-row,
.detail-panel.print-mode .chart-controls-row {
  display: none !important;
}
.detail-panel.print-mode .chart-loess-controls {
  display: block !important;
}

@media print {
  @page {
    size: portrait;
    margin: 0.5in;
  }

  body > * { display: none !important; }
  #detail-print-root {
    display: block !important;
    position: static !important;
    width: auto !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }
  .detail-panel {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    width: 7.5in !important;
    max-width: 7.5in !important;
    margin: 0 auto !important;
    animation: none !important;
    display: block !important;
  }
  .detail-print-brand { display: flex !important; }
  .detail-header-actions { display: none !important; }
  /* Show the header QR in print */
  .detail-header-qr { display: flex !important; }
  .detail-qr { display: flex !important; }
  .detail-download-menu { display: none !important; }
  .detail-sections {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
  }
  .section-tabs-wrap { display: none !important; }
  .print-only-panel { display: block !important; }
  .print-section-title { display: block !important; }
  /* Override both the [hidden] attribute and the active-class hide logic */
  .section-panel,
  .section-panel[hidden] {
    display: block !important;
    overflow: visible !important;
    height: auto !important;
    page-break-before: always;
    break-before: page;
    page-break-after: always;
    break-after: page;
  }
  .section-panel:first-of-type { page-break-before: auto; break-before: auto; }
  .section-panel:last-of-type { page-break-after: auto; break-after: auto; }
  .temp-chart-section {
    height: auto !important;
    overflow: visible !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .detail-map-media,
  .detail-map-loading {
    display: none !important;
  }
  .detail-print-media {
    display: block !important;
  }
  .chart-hint,
  .chart-loess-controls,
  .chart-mode-row,
  .chart-controls-row,
  .chart-month-toggles,
  .adj-series-toggles {
    display: none !important;
  }
}

/* ── Tour Button ─────────────────────────────────────────────────── */

.btn-tour {
  width: 2rem;
  padding: 0.375rem 0;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
}

@keyframes tour-pulse {
  0%   { box-shadow: 0 0 0 2px rgba(212, 168, 85, 0.9), 0 0 10px rgba(212, 168, 85, 0.6); }
  65%  { box-shadow: 0 0 0 9px rgba(212, 168, 85, 0),   0 0 20px rgba(212, 168, 85, 0); }
  100% { box-shadow: 0 0 0 2px rgba(212, 168, 85, 0.9), 0 0 10px rgba(212, 168, 85, 0.6); }
}

.tour-btn-hint {
  border-color: var(--accent-primary) !important;
  color: var(--accent-primary) !important;
  background: rgba(212, 168, 85, 0.12) !important;
  font-weight: 600 !important;
  animation: tour-pulse 1.8s ease-in-out infinite;
}

/* ── Driver.js popover theme overrides ───────────────────────────── */

.driver-popover {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: 0.5rem !important;
  font-family: 'Source Sans 3', sans-serif !important;
  box-shadow: 0 16px 56px rgba(0, 0, 0, 0.4), 0 0 1px var(--border-strong) !important;
}

.driver-popover-title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1rem !important;
  color: var(--accent-primary) !important;
  margin-bottom: 0.35rem !important;
}

.driver-popover-description {
  color: var(--text-secondary) !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
}

.driver-popover-footer {
  margin-top: 0.75rem !important;
}

.driver-popover-footer button {
  background: var(--btn-bg) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0.375rem !important;
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: 0.8125rem !important;
  padding: 0.3rem 0.65rem !important;
  cursor: pointer !important;
  text-shadow: none !important;
}

.driver-popover-footer button:hover {
  background: var(--btn-hover) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
}

.driver-popover-next-btn {
  background: var(--btn-active-bg) !important;
  color: var(--btn-active-text) !important;
  border-color: var(--btn-active-bg) !important;
  font-weight: 600 !important;
}

.driver-popover-next-btn:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}

.driver-popover-progress-text {
  color: var(--text-muted) !important;
  font-size: 0.75rem !important;
}


/* ── Mapbox GL overrides ─────────────────────────────────────────── */

.mapboxgl-ctrl-logo,
.mapboxgl-ctrl-attrib {
  display: none !important;
}

.mapboxgl-canvas-container,
.mapboxgl-canvas {
  cursor: grab;
}

.mapboxgl-canvas-container.mapboxgl-interactive:active,
.mapboxgl-canvas-container.mapboxgl-interactive:active .mapboxgl-canvas {
  cursor: grabbing;
}