:root {
  --ocean: #0a1628;
  --deep: #061020;
  --surface: #0d2040;
  --accent: #00c2ff;
  --accent2: #facc15;
  --warm: #ff6b35;
  --text: #e8f4f8;
  --muted: #aac4d1;
  --panel: #0f1e35;
  --border: rgba(0, 194, 255, 0.15);
  --glow: 0 0 20px rgba(0, 194, 255, 0.3);
  /* the ink behind every translucent overlay (hover tints, hairlines), as an
     rgb triplet for rgba(var(--ink), a) — white on the dark ocean */
  --ink: 255, 255, 255;
  /* brand/v1 tokens (theme.css, linked before this file) aliased onto the
     app's own so its .cc-header wears the ocean palette; --panel --border
     --muted --accent share a name with the brand and override it directly */
  --bg: var(--deep);
  --panel-2: var(--surface);
  --fg: var(--text);
  --accent-d: #00a8e0;
}

/* a light ocean: brand/v1/theme.js sets data-theme from ?theme= → cookie →
   localStorage; dark stays the default above */
:root[data-theme="light"] {
  --ocean: #f4f8fb;
  --deep: #e6eef5;
  --surface: #ffffff;
  --accent: #0077a8;
  --text: #14202b;
  --muted: #5b6b7a;
  --panel: #ffffff;
  --border: rgba(0, 80, 120, 0.18);
  --glow: 0 0 12px rgba(0, 119, 168, 0.18);
  --ink: 20, 32, 43;
  --accent-d: #005f88;
}

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

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background: var(--deep);
  color: var(--text);
  font-family: 'Space Mono', monospace;
  height: 100vh;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

/* Header — the bar is brand/v1's .cc-header; only the ocean ground and the
   logo font are the app's own */
.cc-header {
  background: var(--ocean);
  flex-shrink: 0;
}

.cc-header .cc-title {
  font-family: 'Space Mono', monospace;
  letter-spacing: 0.5px;
}

.header-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.stat {
  text-align: right;
}

.stat-num {
  font-size: 18px;
  color: var(--accent2);
  font-weight: 700;
}

.stat-label {
  font-size: 9px;
  color: var(--muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

a:link {
  color: var(--accent);
}

/* 2. Visited link */
a:visited {
  color: var(--accent2);
}

/* Search bar */
.search-bar {
  padding: 10px 24px;
  background: var(--ocean);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
  position: relative;
  z-index: 500;
}

/* Dropdown search wrapper */
.search-wrapper {
  flex: 1;
  position: relative;
  min-width: 250px;
}

/* Search icon (drawn with CSS, no image asset needed) */
.search-wrapper::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 13px;
  height: 13px;
  border: 1.5px solid rgba(var(--ink), 0.85);
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
}
.search-wrapper::after {
  content: "";
  position: absolute;
  left: 23px;
  top: calc(50% + 5px);
  width: 6px;
  height: 1.5px;
  background: rgba(var(--ink), 0.85);
  transform: rotate(45deg);
  transform-origin: left center;
  z-index: 1;
  pointer-events: none;
}

.search-input {
  width: 100%;
  background: rgba(var(--ink), 0.06);
  border: 1.5px solid rgba(var(--ink), 0.55);
  border-radius: 6px;
  color: var(--text);
  font-family: 'Space Mono', monospace;
  font-size: 14px;
  padding: 9px 14px 9px 40px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.search-input::placeholder {
  color: var(--muted);
}

.search-input:focus {
  border-color: rgba(var(--ink), 0.85);
  background: rgba(var(--ink), 0.1);
  box-shadow: 0 0 20px rgba(var(--ink), 0.15);
}

.about-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,
      0,
      0,
      0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.about-modal {
  width: min(1000px, 95vw);
  max-width: 90vw;
  max-height: 80vh;
  background: var(--panel);
  border-radius: 25px;
  box-shadow:
    0 10px 40px rgba(0,
      0,
      0,
      0.25);
  overflow-y: auto;
}

.about-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom:
    1px solid #ddd;
}

.about-content {
  padding: 20px;
  line-height: 1.6;
}
/* which release the loaded data came from — deliberately quiet, but present, so
   a stale cache is something a reader can see rather than infer */
.about-data-version {
  margin: 0 0 14px; padding: 8px 12px;
  background: rgba(77, 171, 247, 0.08);
  border-left: 3px solid var(--accent, #4dabf7);
  border-radius: 4px;
  font-size: 12px; color: var(--muted, #9aa0a6);
}
.about-data-version strong { color: var(--accent, #4dabf7); font-weight: 600; }

/* guided tour — a single callout that repositions itself next to whatever
   element the current step targets (see startWalkthroughTour in app.js) */
.tour-callout {
  position: fixed; z-index: 10000; width: 340px; max-width: calc(100vw - 16px);
  background: var(--panel, #1a1d21); border: 1px solid var(--accent, #4dabf7);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  padding: 14px 16px;
}
.tour-callout::before {
  content: ''; position: absolute; left: var(--arrow-x, 24px); width: 12px; height: 12px;
  background: var(--panel, #1a1d21); border: 1px solid var(--accent, #4dabf7);
  transform: translateX(-50%) rotate(45deg);
}
.tour-arrow-top::before { top: -7px; border-right: none; border-bottom: none; }
.tour-arrow-bottom::before { bottom: -7px; border-left: none; border-top: none; }
.tour-arrow-right::before {
  left: auto; right: -7px; top: var(--arrow-y, 24px);
  border-left: none; border-bottom: none;
}
.tour-no-arrow::before { display: none; }
.tour-callout-title { font-size: 16.5px; font-weight: 700; color: var(--text, #e6e9ed); margin-bottom: 8px; }
.tour-callout-body { font-size: 14.5px; line-height: 1.55; color: var(--text); margin-bottom: 12px; }
.tour-callout-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tour-skip { background: none; border: none; color: var(--muted, #9aa0a6); font-size: 12px; cursor: pointer; padding: 4px; }
.tour-skip:hover { color: var(--text, #e6e9ed); }
.tour-progress { font-size: 11px; color: var(--muted, #6c757d); font-family: 'Space Mono', monospace; }
.tour-nav { display: flex; gap: 6px; }
.tour-prev, .tour-next {
  font-size: 12px; padding: 6px 12px; border-radius: 4px; cursor: pointer;
}
.tour-prev { background: none; border: 1px solid var(--border, #3a3f44); color: var(--muted, #9aa0a6); }
.tour-prev:hover { color: var(--text, #e6e9ed); border-color: var(--muted); }
.tour-next { background: var(--accent, #4dabf7); border: none; color: #04263d; font-weight: 700; }
.tour-next:hover { filter: brightness(1.1); }

/* Separate floating overlay (not attached to the target element) — avoids
   getting clipped by a target's own overflow (this is what broke the ring
   around #map, whose container needs overflow for Leaflet tiles), and can
   be nudged independently via each step's highlightOffsetX/Y. */
#tour-highlight-box {
  position: fixed; z-index: 9999; display: none; pointer-events: none;
  box-shadow: 0 0 0 3px var(--accent, #4dabf7), 0 0 0 6000px rgba(0,0,0,0.35);
  border-radius: 6px; transition: left 0.2s, top 0.2s, width 0.2s, height 0.2s;
}

ul,
ol {
  padding-left: 25px;
  
}

.about-minimize {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 22px;
  color: var(--text)
}

#about-button {
  position: fixed;
  left: 20px;
  bottom: 20px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--muted);
  box-shadow:
    0 2px 8px rgba(0,
      0,
      0,
      0.25);

  cursor: pointer;
  font-size: 22px;
  font-weight: bold;
  z-index: 9999;
}

#about-button:hover {
  transform: scale(1.05);
}

#walkthrough-button {
  position: fixed;
  left: 70px;
  bottom: 20px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: var(--accent, #4dabf7);
  color: #04263d;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  z-index: 9999;
}

#walkthrough-button:hover {
  transform: scale(1.05);
}

#feedback-button {
  position: absolute;
  right: 10px;
  bottom: 34px;
  padding: 9px 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--muted);
  color: #04263d;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  z-index: 1000;
}

#feedback-button:hover {
  transform: scale(1.05);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45);
}

.feedback-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin: 14px 0 6px;
}

.feedback-optional {
  font-weight: 400;
  color: var(--muted);
}

.feedback-textarea,
.feedback-input {
  width: 100%;
  background: rgba(var(--ink), 0.09);
  border: 1.5px solid rgba(var(--ink), 0.35);
  border-radius: 6px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 12px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.feedback-textarea {
  min-height: 90px;
  resize: vertical;
}

.feedback-textarea::placeholder,
.feedback-input::placeholder {
  color: rgba(var(--ink), 0.55);
}

.feedback-textarea:focus,
.feedback-input:focus {
  border-color: rgba(var(--ink), 0.75);
  background: rgba(var(--ink), 0.1);
  box-shadow: 0 0 16px rgba(var(--ink), 0.12);
}

.feedback-submit-btn {
  width: 100%;
  margin-top: 18px;
  padding: 10px;
  border-radius: 6px;
  border: none;
  background: var(--accent);
  color: var(--deep);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.feedback-submit-btn:hover { filter: brightness(1.1); }
.feedback-submit-btn:disabled { opacity: 0.6; cursor: default; }

.feedback-thanks {
  color: var(--text);
  font-size: 14px;
  text-align: center;
  padding: 24px 0;
}

#feedback-iframe {
  background: var(--panel);
}

/* Dropdown */
.dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 9999;
  display: none !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.dropdown.open {
  display: block !important;
}

.dropdown::-webkit-scrollbar {
  width: 4px;
}

.dropdown::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

.dropdown-item {
  padding: 9px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(0, 194, 255, 0.06);
  transition: background 0.1s;
}

.dropdown-item:last-child {
  border-bottom: none;
}

.dropdown-item:hover,
.dropdown-item.focused {
  background: var(--surface);
}

.dropdown-item.active {
  background: rgba(0, 194, 255, 0.1);
}

.dropdown-name {
  font-size: 11px;
  color: var(--text);
  flex: 1;
}

.dropdown-name mark {
  background: transparent;
  color: var(--accent);
  font-weight: 700;
}

.dropdown-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

.dropdown-category {
  font-size: 9px;
  color: var(--accent2);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.dropdown-source {
  font-size: 9px;
  color: var(--muted);
}

.dropdown-count {
  font-size: 9px;
  color: var(--muted);
}

.dropdown-empty {
  padding: 16px 14px;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

/* Category filters */
.category-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 6px 12px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--accent);
  color: var(--deep);
  border-color: var(--accent);
  font-weight: 700;
}

.clear-btn {
  padding: 6px 12px;
  border-radius: 3px;
  border: 1px solid rgba(255, 107, 53, 0.4);
  background: transparent;
  color: var(--warm);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s;
  display: none;
  white-space: nowrap;
}

.download-btn {
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.download-btn:hover {
  background: rgba(var(--ink), 0.06);
  color: var(--text);
}

.download-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.cards-download-row {
  display: flex;
  gap: 8px;
  margin: 4px 0 14px;
}

.cards-download-btn {
  flex: 1;
  padding: 8px 10px;
  text-align: center;
  font-size: 11px;
}

.compare-bar {
  width: 100%;
  background: var(--panel);
  border: 1px solid #00c2ff;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  color: var(--text);
}

.compare-bar-desc {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: -2px 0 0;
}

.compare-bar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0, 194, 255, 0.25);
}

#compare-count {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #00c2ff;
}

.compare-bar-close {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  background: rgba(var(--ink), 0.08);
  color: var(--text);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.compare-bar-close:hover {
  background: rgba(var(--ink), 0.18);
}

.compare-bar-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
}

.compare-bar-lasso {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 6px;
  border: 1px solid rgba(0, 194, 255, 0.15);
  background: transparent;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  cursor: pointer;
  box-sizing: border-box;
}

.compare-bar-lasso:hover {
  border-color: rgba(0, 194, 255, 0.3);
  background: rgba(0, 194, 255, 0.06);
}

.compare-bar-lasso.active {
  border-color: #00c2ff;
  background: rgba(0, 194, 255, 0.1);
}

.avg-card-note {
  font-size: 11px;
  color: var(--muted);
  margin-top: -8px;
  margin-bottom: 10px;
}

.avg-stations-toggle { margin-top: 4px; }
.avg-stations-toggle .params-toggle-summary { font-size: 11px; padding: 4px 0; }
.avg-stations-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 16px;
  padding: 6px 0 2px;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
}
.avg-stations-list span:nth-child(odd) { color: var(--text); }
.avg-stations-list span:nth-child(even) { color: var(--muted); text-align: right; }

.lasso-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
  display: none;
}

#lasso-polygon {
  fill: rgba(0, 229, 255, 0.15);
  stroke: #00e5ff;
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}

.line-select-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.line-select-or {
  flex-shrink: 0;
  font-size: 9px;
  letter-spacing: 1px;
  color: var(--muted);
}

.line-select-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 6px;
  border: 1px solid rgba(0, 194, 255, 0.15);
  box-sizing: border-box;
}

.line-select-field label {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.line-select-field input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 12px 10px;
  border-radius: 3px;
  border: 1px solid rgba(0, 194, 255, 0.2);
  background: rgba(var(--ink), 0.06);
  color: var(--text);
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  outline: none;
}

.line-select-field input:focus {
  border-color: #00e5ff;
}

.line-select-hint {
  flex-shrink: 0;
  font-size: 9px;
  letter-spacing: 0.5px;
  color: var(--muted);
  white-space: nowrap;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

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

.compare-bar-btn {
  flex: 1;
  padding: 7px 8px;
  border-radius: 4px;
  border: 1px solid rgba(0, 194, 255, 0.15);
  background: rgba(var(--ink), 0.06);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
}

.compare-bar-btn:hover { background: rgba(var(--ink), 0.12); }

.compare-bar-generate {
  background: #00e5ff;
  border-color: #00e5ff;
  color: var(--deep);
  font-weight: 600;
}

.compare-bar-generate:disabled {
  opacity: 0.4;
  cursor: default;
}

.clear-btn.visible {
  display: block;
}

.clear-btn:hover {
  background: var(--warm);
  color: white;
}

/* Search banner */
.search-banner {
  display: none;
  padding: 7px 24px;
  background: rgba(0, 194, 255, 0.08);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.5px;
  flex-shrink: 0;
}

.search-banner.visible {
  display: block;
}

/* "(all years)" qualifier — shown instead of the year range when the station
   count can't honor the slider (per-taxon path; see stationsForVarIsYearAware).
   Muted + dotted underline so it reads as a caveat on the number, not as part
   of the claim, and hints that hovering explains why. */
.search-banner .banner-note {
  color: var(--muted, #6c757d);
  border-bottom: 1px dotted currentColor;
  cursor: help;
}
/* Species-specific year lock — the one "good news" note among the banner's
   caveats, so it gets an accent color instead of muted gray. Deliberately
   plain otherwise (no uppercase, no letter-spacing) — an earlier version of
   this note lived on the slider in tiny uppercase caps with the same yellow,
   and that combination read as blurry/hard to read (feedback 2026-08-22). */
.search-banner .banner-note.species-specific {
  color: var(--accent2);
}

/* year-range slider (dual-handle; filters the map to a year window) */
.year-slider {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 24px 12px;
  background: rgba(0, 194, 255, 0.04);
  border-bottom: 1px solid var(--border);
  font-family: 'Space Mono', monospace;
  flex-shrink: 0;
}
.ys-caption {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ys-label {
  color: var(--accent);
  font-size: 12px;
  min-width: 36px;
  text-align: center;
}
.ys-track {
  position: relative;
  flex: 1;
  height: 22px;
}
.ys-track::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
}
.ys-fill {
  position: absolute;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: var(--accent);
  border-radius: 3px;
  box-shadow: var(--glow);
}
.ys-range {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 22px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  pointer-events: none;
}
.ys-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  pointer-events: auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--deep);
  cursor: pointer;
  box-shadow: 0 0 6px rgba(0, 194, 255, 0.6);
}
.ys-range::-moz-range-thumb {
  pointer-events: auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--deep);
  cursor: pointer;
}
.ys-reset {
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 7px;
  line-height: 1;
}
.ys-reset:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Amber/gold state — applied only while a variable is selected, so the
   slider visibly signals "this is now filtering that parameter" instead
   of always looking the same regardless of selection. */
#year-slider.var-active .ys-label { color: var(--accent2); }
#year-slider.var-active .ys-fill { background: var(--accent2); box-shadow: 0 0 20px rgba(250, 204, 21, 0.3); }
#year-slider.var-active .ys-range::-webkit-slider-thumb { background: var(--accent2); box-shadow: 0 0 6px rgba(250, 204, 21, 0.6); }
#year-slider.var-active .ys-range::-moz-range-thumb { background: var(--accent2); }
#year-slider.var-active .ys-reset:hover { color: var(--accent2); border-color: var(--accent2); }

/* category browse chips (in the search bar) */
.category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
}
.cat-chip:hover {
  color: var(--text);
  border-color: rgba(0, 194, 255, 0.4);
}
.cat-chip.active {
  color: var(--deep);
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: var(--glow);
}
.cat-chip .cat-n {
  font-size: 10px;
  opacity: 0.7;
  padding: 0 4px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.18);
}
.cat-chip.active .cat-n {
  background: rgba(0, 0, 0, 0.22);
  opacity: 0.9;
}

/* Main layout — left column: header, search bar, year-slider, map stacked
   vertically. The side panel is a full-height sibling (see body's
   flex-direction: row), so it spans the whole viewport height instead of
   starting below the header — and the year-slider/search bar stop at the
   map's edge instead of spanning across the panel too. */
.main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

.map-wrapper {
  flex: 1;
  position: relative;
}

#map {
  position: absolute;
  inset: 0;
  background: var(--deep);
  z-index: 1;
}

/* side panel */
.panel {
  width: min(385px, 40vw);
  background: var(--panel);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  flex-shrink: 0;
  position: relative;
  transition: transform 0.3s ease;
  scrollbar-width: none;       
  -ms-overflow-style: none;    
}
.panel::-webkit-scrollbar { display: none; }  

/* The inner div#panel shares class="panel" with the outer aside#side-panel,
   which would otherwise make it a second, redundant scroll container
   nested inside the first — collapsing scroll state onto two separate
   elements at once, which is what caused the scroll-position jump on
   toggle. Only the outer #side-panel should scroll. */
#panel { overflow-y: visible; }

.panel.collapsed {
  transform:
    translateX(calc(100% - 32px));
}

.panel-toggle {
  position: absolute;
  left: -32px;
  top: 50%;
  transform:
    translateY(-50%);
  width: 32px;
  height: 80px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-right: none;
  border-radius:
    8px 0 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--accent);
  font-size: 18px;
  z-index: 6000;
  user-select: none;
}

.panel-toggle:hover {
  background:
    var(--surface);
}

.panel-header {
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  display: none
}

/* Back button — single slot at top of panel header, shown for
   both "back to station" and "back to all categories" */
.panel-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--accent);
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 16px;
  transition: background 0.15s, border-color 0.15s;
  width: 100%;
  text-align: left;
}
.panel-back-btn:hover {
  background: rgba(0, 194, 255, 0.08);
  border-color: var(--accent);
}

.panel-station-id {
  font-family: 'Space Mono', monospace;
  font-size: 22px;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 1px;
}

.panel-coords {
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  color: var(--muted);
  margin-top: 10px;
}
.panel-depth-row {
  font-size: 13px; color: var(--muted, #9aa0a6); margin-top: 12px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.panel-depth-row + .panel-depth-row { margin-top: 2px; }
.dsum-label { text-transform: uppercase; letter-spacing: .04em; font-size: 11px; color: var(--warning, #ffd43b); }
.dsum-val { color: var(--warning, #ffd43b); font-weight: 700; font-family: 'Space Mono', monospace; font-size: 14px; }

.panel-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  text-align: center;
  padding: 40px;
  gap: 12px;
}

.panel-empty-icon {
  font-size: 36px;
  opacity: 0.4;
}

.panel-empty-text {
  font-style: italic;
  font-size: 15px;
  line-height: 1.8;
}

.panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: none;
}

.panel-content.visible {
  display: block;
}

.panel-content::-webkit-scrollbar {
  width: 4px;
}

.panel-content::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

/* Source groups in panel */
.source-group {
  margin-bottom: 22px;
}

.source-label {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(0, 194, 255, 0.15);
}

.category-sublabel {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent2);
  margin: 8px 0 4px;
  opacity: 0.7;
}

.data-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-radius: 4px;
  border: 1px solid transparent;
  margin-bottom: 3px;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  color: var(--text);
}

.data-link:hover {
  background: var(--surface);
  border-color: var(--border);
}

.data-link-name {
  font-size: 13px;
  line-height: 1.4;
  flex: 1;
}

/* Description line under each parameter name in the per-station accordion,
   matching the "By Category" browse panel's clean name+sentence style.
   Wrapped in .data-link-main so it stacks vertically without breaking
   .data-link's existing flex-row layout (used elsewhere for unit/arrow). */
.data-link-main { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.data-link-desc { font-size: 10px; color: var(--muted); line-height: 1.4; }

.data-link-unit {
  font-size: 9px;
  color: var(--muted);
  margin-left: 8px;
  white-space: nowrap;
}

.data-link-arrow {
  font-size: 10px;
  color: var(--accent);
  margin-left: 8px;
  opacity: 0;
  transition: opacity 0.15s;
}

.data-link:hover .data-link-arrow {
  opacity: 1;
}

.modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9000;
  align-items: center;
  justify-content: center;
}

.modal-backdrop.open {
  display: flex;
}

.modal {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: min(420px, 95vw);
  max-height: 90vh;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), var(--glow);
  overflow: hidden;
  animation: modalIn 0.15s ease;
  overflow-y: auto;
}
.modal.modal-large { width: min(880px, 92vw); }

@keyframes modalIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.modal-title {
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
  flex: 1;
  font-weight: 700;
}

.modal-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: color 0.15s;
}

.modal-close:hover {
  color: var(--text);
}

.modal-body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-row-label {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}

.modal-row-value {
  font-size: 11px;
  color: var(--text);
  text-align: right;
  max-width: 260px;
  word-break: break-all;
}

.modal-row-value.accent {
  color: var(--accent2);
}

.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
}

select option {
  background: var(--panel);
  color: var(--text);
}

select optgroup {
  color: var(--muted);
  font-style: normal;
}

.btn-download {
  flex: 1;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--deep);
  border: none;
  border-radius: 4px;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: opacity 0.15s;
  display: block;
}

.btn-download:hover {
  opacity: 0.85;
}

.btn-docs {
  padding: 10px 16px;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: all 0.15s;
  display: block;
}

.btn-docs:hover {
  background: var(--surface);
}

/* Leaflet overrides */
.leaflet-container {
  background: var(--deep) !important;
}

/* Smooth fade for marker opacity/color changes (year-slider filtering,
   variable selection) instead of an instant snap while dragging. */
.leaflet-interactive {
  transition: fill-opacity 0.2s ease, opacity 0.2s ease, fill 0.2s ease, stroke 0.2s ease;
}

.leaflet-control-zoom a {
  background: var(--panel) !important;
  color: var(--accent) !important;
  border-color: var(--border) !important;
}

.leaflet-control-attribution {
  background: color-mix(in srgb, var(--deep) 80%, transparent) !important;
  color: var(--muted) !important;
  font-size: 9px !important;
}

.leaflet-control-attribution a {
  color: var(--muted) !important;
}

.leaflet-tooltip {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  padding: 4px 8px;
}

@media (max-width: 1024px) {
  .panel {
    width: 320px;
  }

  .about-modal {
    width: 90vw;
  }

  .header-stats {
    gap: 12px;
  }
}

@media (max-width: 768px) {

  body {
    overflow: hidden;
  }

  .cc-header {
    padding: 12px;
  }

  .header-stats {
    width: 100%;
    justify-content: space-between;
  }

  .stat {
    text-align: left;
  }

  .search-bar {
    padding: 10px;
    gap: 8px;
  }

  .category-filters {
    width: 100%;
  }

  .filter-btn {
    flex: 1;
  }

  .main {
    position: relative;
  }

  .panel {
    position: absolute;
    right: 0;
    top: 0;
    width: 100vw;
    min-width: 260px;
    max-width: 100vw;
    height: 100%;
    z-index: 5000;
    flex-shrink: 0;
    overflow: auto;
  }

  .panel-resizer {
    display: none;
  }

  .panel-resizer:hover {
    background: var(--accent);
  }

  .panel-resizer::before {
    content: "";
    display: block;
    width: 2px;
    height: 60px;
    margin: auto;
    margin-top: calc(50vh - 30px);
    background: var(--accent);
    opacity: 0.5;
  }

  .panel.hidden {
    display: none;
  }

  .panel-header {
    padding: 16px;
  }

  .panel-content {
    padding: 12px;
  }

  .modal {
    width: 95vw;
    max-height: 90vh;
  }

  .modal-footer {
    flex-direction: column;
  }

  .btn-download,
  .btn-docs {
    width: 100%;
  }

  .about-modal {
    width: 95vw;
    max-height: 90vh;
  }

  .about-content {
    padding: 16px;
  }

  #about-button {
    width: 48px;
    height: 48px;
    left: 12px;
    bottom: 12px;
  }

  #walkthrough-button {
    width: 48px;
    height: 48px;
    left: 68px;
    bottom: 12px;
  }

  #feedback-button {
    right: 8px;
    bottom: 30px;
    padding: 8px 14px;
    font-size: 12px;
  }

  .dropdown {
    max-height: 50vh;
  }
}

@media (max-width: 480px) {

  .logo-title {
    font-size: 18px;
  }

  .panel-station-id {
    font-size: 18px;
  }

  .panel-coords {
    font-size: 14px;
  }

  .search-input {
    font-size: 14px;
  }

  .dropdown-name {
    font-size: 12px;
  }
}

/* ============================================================
   Integrated-DB coverage view (station-grid refactor, 2026-07)
   ============================================================ */
:root { --c: #4dabf7; }

/* visibility reconciliation */
.about-backdrop { display: none !important; }
.about-backdrop.open { display: flex !important; }
.panel-content { display: block; }

/* station coverage summary strip */
.cov-summary {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin: 4px 0 14px;
}
.cov-summary > div {
  background: var(--panel, #24272b); border: 1px solid var(--border, #3a3f44);
  border-radius: 6px; padding: 10px 6px; text-align: center;
  min-width: 0;
}
.cov-summary .k { display: block; font-size: 9px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted, #9aa0a6); margin-bottom: 3px; }
.cov-summary .v { display: block; font-size: 14px; font-weight: 700; line-height: 1.3;
  color: var(--text, #e6e9ed); margin-top: 2px; overflow-wrap: break-word; }
.cov-empty { color: var(--muted, #9aa0a6);
  font-size: 16px; padding: 24px 8px; text-align: center; }

/* per-dataset coverage card */
.ds-card {
  border: 1px solid var(--border, #3a3f44); border-left: 3px solid var(--c);
  border-radius: 6px; padding: 14px 15px; margin-bottom: 10px;
  background: color-mix(in srgb, var(--c, var(--accent)) 6%, var(--panel));
  position: relative;
}
.ds-pin-btn {
  background: none; border: none; cursor: pointer; font-size: 13px;
  padding: 2px; line-height: 1; opacity: 1; margin-left: 4px; flex: none;
  transition: opacity 0.15s;
}
.ds-pin-btn:not(.ds-pin-btn-active):hover { opacity: 0.55; }
.ds-pin-btn-active { opacity: 1; }
.ds-card-clickable { cursor: pointer; transition: box-shadow 0.15s, border-color 0.15s; }
.ds-card-clickable:hover { box-shadow: 0 0 0 1px var(--accent), 0 8px 24px rgba(0,0,0,0.35); }
.ds-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.ds-card-expand-hint {
  font-size: 10px;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.15s;
}
.ds-card-clickable:hover .ds-card-expand-hint { opacity: 1; }
.ds-download-group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.ds-download-link {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 10px;
  color: var(--muted);
  padding: 0;
  transition: color 0.15s;
}
.ds-download-link:hover { color: var(--text); }
.var-picker { display: flex; flex-direction: column; gap: 12px; }
.var-picker-actions { display: flex; gap: 12px; }
.var-picker-toggle {
  background: none; border: 1px solid var(--border, #2a3a55); border-radius: 4px;
  color: var(--muted); font-size: 11px; padding: 4px 10px; cursor: pointer;
}
.var-picker-toggle:hover { color: var(--text); border-color: var(--text); }
.var-picker-list {
  display: flex; flex-direction: column; gap: 6px; max-height: 320px;
  overflow-y: auto; padding-right: 4px;
}
.var-pick-row { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.var-pick-row-unconfirmed { color: var(--muted, #6c757d); opacity: 0.6; }
.var-pick-group { display: flex; flex-direction: column; gap: 6px; }
.var-pick-group + .var-pick-group { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(var(--ink), 0.08); }
.var-pick-group-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.var-pick-units { color: var(--muted); font-size: 11px; }
.var-picker-confirm {
  align-self: flex-start; background: var(--accent, #4dabf7); color: #06121f;
  border: none; border-radius: 4px; padding: 9px 16px; font-size: 12px;
  font-weight: 600; cursor: pointer;
}
.var-picker-confirm:disabled { opacity: 0.6; cursor: default; }
.var-picker-status { font-size: 11px; color: var(--muted); min-height: 14px; }
.ds-card.ds-card-large .ybars { height: 120px; }
.ds-card.ds-card-large .bars { margin-bottom: 24px; }
.ds-card.ds-card-large .mbar { height: 70px; font-size: 12px; }
.ds-card.ds-card-large .ds-stats { font-size: 13px; }

/* pin-to-compare tray — fixed at the bottom of the screen so pinned cards
   stay visible while browsing other stations. A real page-level fixture,
   not a widget, so position:fixed is fine here. */
#pinned-tray {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 500;
  background: var(--panel, #1a1d21); border-top: 1px solid var(--border, #3a3f44);
  max-height: 40vh; display: flex; flex-direction: column;
}
.pinned-tray-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 16px; font-size: 12px; color: var(--muted, #9aa0a6);
  border-bottom: 1px solid var(--border, #3a3f44);
}
.pinned-tray-clear {
  background: none; border: 1px solid var(--border, #3a3f44); border-radius: 4px;
  color: var(--muted, #9aa0a6); font-size: 11px; padding: 3px 8px; cursor: pointer;
}
.pinned-tray-clear:hover { color: var(--text, #e6e9ed); border-color: var(--muted); }
.pinned-tray-cards {
  display: flex; gap: 12px; padding: 10px 16px; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.pinned-tray-cards::-webkit-scrollbar { display: none;
}
.pinned-tray-item { flex: 0 0 280px; cursor: pointer; }
.pinned-tray-item-dragging { opacity: 0.4; }
.pinned-tray-drag-handle { cursor: grab; color: var(--muted, #6c757d); margin-right: 2px; }
.pinned-tray-drag-handle:active { cursor: grabbing; }
.pinned-tray-station {
  font-size: 11px; color: var(--muted, #9aa0a6); margin-bottom: 4px;
  display: flex; justify-content: space-between; align-items: center;
}
.pinned-tray-unpin {
  background: none; border: none; color: var(--muted, #9aa0a6); cursor: pointer;
  font-size: 12px; padding: 0 2px;
}
.pinned-tray-unpin:hover { color: var(--text, #e6e9ed); }
@keyframes marker-flash-pulse {
  0%, 100% { filter: none; }
  50% { filter: drop-shadow(0 0 6px var(--text)) brightness(1.6); }
}
.marker-flash { animation: marker-flash-pulse 0.4s ease-in-out 3; }

/* Custom floating tooltip for chart-bar hover — replaces the plain browser
   title tooltip with a styled one showing the same year/count or
   month/count detail. */
#chart-tooltip {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  background: var(--panel, #1a2f4a);
  border: 1px solid var(--accent);
  color: var(--text);
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  padding: 5px 9px;
  border-radius: 5px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  display: none;
  white-space: nowrap;
}
.ds-head { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.ds-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.ds-label { font-weight: 700; font-size: 14px; color: var(--text, #e6e9ed); }
.ds-realm { margin-left: auto; font-size: 9px; text-transform: uppercase;
  letter-spacing: .06em; padding: 2px 6px; border-radius: 999px; }
.ds-head-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.ds-head-right .ds-realm { margin-left: 0; }
.ds-avg-badge { font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; padding: 2px 6px; border-radius: 999px;
  background: rgba(0,194,255,.18); color: #00c2ff; }
.ds-realm.env { background: rgba(77,171,247,.18); color: #74c0fc; }
.ds-realm.bio { background: rgba(105,219,124,.16); color: #8ce99a; }
.ds-stats { display: flex; flex-direction: column; gap: 8px; font-size: 11px;
  color: var(--muted, #c1c7cd); margin-bottom: 12px; }
.ds-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ds-stat-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted, #9aa0a6); flex-shrink: 0; }
.ds-stat-val { color: var(--text, #e6e9ed); text-align: right; font-weight: 600; }
.bars-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted, #9aa0a6); margin: 12px 0 5px; }

/* year sparkline bars */
.bars { display: flex; align-items: flex-end; gap: 4px; margin-bottom: 18px; }
.bars.empty { color: var(--muted, #6c757d); font-size: 10px; }
.bars .yl { font-size: 9px; color: var(--muted, #9aa0a6); flex: none; padding-bottom: 1px; }
.ybars { display: flex; align-items: flex-end; gap: 1px; height: 42px; flex: 1;
  overflow: hidden; }
.ybar { flex: 1 1 0; min-width: 1px; border-radius: 1px 1px 0 0; }

/* month seasonality cells */
.mbars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; }
.mbar { font-size: 8px; text-align: center; color: #0b0c0e; font-weight: 700;
  border-radius: 2px; padding: 4px 0; line-height: 1; }

/* plankton decade-means block — horizontal bar chart, folded into that
   dataset's own accordion card (below Show Parameters) rather than sitting
   separately at the end of the panel. */
.dec-block {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border, #3a3f44);
}
.dec-head {
  font-size: 9px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted, #9aa0a6); margin-bottom: 2px;
}
.dec-head .dec-unit { text-transform: none; letter-spacing: 0; }
.dec-col-labels {
  display: grid; grid-template-columns: 44px 1fr 56px 40px; gap: 8px;
  font-size: 9px; color: var(--muted, #6c757d); margin-bottom: 6px;
}
.dec-col-labels span:nth-child(3), .dec-col-labels span:nth-child(4) { text-align: right; }
.dec-row {
  display: grid; grid-template-columns: 44px 1fr 56px 40px;
  align-items: center; gap: 8px; font-size: 11px; padding: 3px 0;
}
.dec-yr {
  color: var(--muted, #9aa0a6); font-family: 'Space Mono', monospace; font-size: 10px;
}
.dec-bar-track {
  height: 6px; border-radius: 3px; background: var(--surface, #24272b);
  overflow: hidden;
}
.dec-bar-fill {
  display: block; height: 100%; border-radius: 3px;
  background: var(--c); transition: width 0.3s ease;
}
.dec-val {
  color: var(--text, #e6e9ed); font-weight: 700; font-variant-numeric: tabular-nums;
  font-family: 'Space Mono', monospace; white-space: nowrap; text-align: right;
}
.dec-n { color: var(--muted, #6c757d); font-weight: 400; text-align: right; font-variant-numeric: tabular-nums; }
.dec-block-clickable { position: relative; transition: box-shadow 0.15s, border-color 0.15s; border-radius: 8px; padding: 4px 6px; margin: 6px -6px 0; }
.dec-block-clickable:hover { box-shadow: 0 0 0 1px var(--accent); }
.dec-block-expand-hint {
  font-size: 9px; color: var(--muted, #9aa0a6); text-align: right; margin-top: 4px; opacity: 0;
}
.dec-block-clickable:hover .dec-block-expand-hint { opacity: 1; }
.dec-block-large .dec-row, .dec-block-large .dec-col-labels { grid-template-columns: 70px 1fr 90px 60px; font-size: 14px; }
.dec-block-large .dec-bar-track { height: 12px; }
.dec-block-large .dec-yr { font-size: 13px; }

/* station-panel tabs — Overview / Depth Profiles */
.panel-tabs {
  display: inline-flex; margin-bottom: 14px;
  border: 1px solid var(--border, rgba(0, 194, 255, .15)); border-radius: 20px;
  overflow: hidden;
}
.panel-tab {
  background: none; border: none; cursor: pointer;
  padding: 6px 14px;
  font-size: 12px; color: var(--text); font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
.panel-tab:hover { background: rgba(var(--ink), .06); }
.panel-tab.active { background: var(--accent); color: var(--deep); }
.panel-tab-count {
  font-family: 'Space Mono', monospace; font-size: 10px; color: var(--muted);
  margin-left: 3px;
}
.panel-tab.active .panel-tab-count { color: var(--deep); opacity: .7; }

/* depth profile rows (Depth Profiles tab) — one row per variable, flat list
   style matching .data-link rather than a separate boxed-card look. Each row
   is collapsed by default; the chart below only builds on first expand. */
.depth-profile {
  border-bottom: 1px solid rgba(var(--ink), .04);
}
.depth-profile:last-child { border-bottom: none; }
.depth-profile-row-summary {
  cursor: pointer; padding: 9px 4px; list-style: none;
  display: flex; align-items: center; gap: 10px;
  border-radius: 4px; transition: background 0.15s;
}
.depth-profile-row-summary::-webkit-details-marker { display: none; }
.depth-profile-row-summary:hover { background: var(--surface); }
.depth-profile-row-summary::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--c); flex: none;
}
.depth-profile-param { font-size: 13px; color: var(--text); flex: 1; }
.depth-profile-meta {
  font-family: 'Space Mono', monospace; font-size: 10px; color: var(--muted);
  white-space: nowrap;
}
.depth-profile-range { color: var(--text, #ffffff); font-weight: 700; font-size: 13px; }
.depth-profile-chart { padding: 4px 4px 14px 20px; }
.dp-axis { stroke: var(--muted); stroke-opacity: .3; stroke-width: 1; }
.dp-tick, .dp-axis-label { font-size: 9px; fill: var(--muted); font-family: 'Space Mono', monospace; }
.dp-large .dp-tick, .dp-large .dp-axis-label { font-size: 14px; }
.dp-large .dp-seafloor-label { font-size: 13px; }
.dp-seafloor { stroke: var(--muted); stroke-opacity: .6; stroke-width: 1; stroke-dasharray: 3,3; }
.dp-seafloor-label { font-size: 9px; fill: var(--muted); font-family: 'Space Mono', monospace; }
.depth-dot { cursor: pointer; }
.depth-profile-list { margin-top: 4px; }

/* dropdown items (coverage view) */
.dd-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  cursor: pointer; border-bottom: 1px solid var(--border, #2c3036); }
.dd-item:hover, .dd-item.focused { background: rgba(77,171,247,.12); }
.dd-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dd-name { color: var(--text, #e6e9ed); font-size: 12px; font-weight: 700; }
.dd-meta { margin-left: auto; color: var(--muted, #9aa0a6); font-size: 10px; }
.dd-empty { padding: 10px; color: var(--muted, #9aa0a6); font-size: 12px; }

/* group-type family members in the search dropdown (e.g. Temperature, backed
   by 3 datasets) — toggle row matches .dd-item exactly so it doesn't read as
   a different component; caret + "N datasets" replace the dot + normal meta.
   Expanded options (.dd-item-nested) are the same row style again, just
   indented, so the whole thing stays visually consistent top to bottom. */
.dd-group-toggle { display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  cursor: pointer; border-bottom: 1px solid var(--border, #2c3036); }
.dd-group-toggle:hover { background: rgba(77,171,247,.12); }
.dd-group-toggle .dd-name { display: flex; align-items: center; gap: 6px; }
.dd-group-caret { color: var(--muted, #9aa0a6); font-size: 10px; }
.dd-group-sources { background: rgba(var(--ink),.02); }
.dd-item-nested { padding-left: 26px; }
.dd-dot-empty { background: #4a4f57; border: none; }

/* variable panel */
.var-meta { font-size: 12px; color: var(--muted, #c1c7cd); display: flex;
  flex-direction: column; gap: 4px; }
.var-meta .k { color: var(--muted, #9aa0a6); text-transform: uppercase;
  font-size: 9px; letter-spacing: .06em; margin-right: 4px; }
.var-desc { color: var(--text, #cfd4da); margin-top: 4px; }
.src-link { display: inline-block; margin-top: 9px; font-size: 12px;
  color: var(--c); text-decoration: none; }
.src-link:hover { text-decoration: underline; }
.var-hint { font-size: 11px; color: var(--muted, #9aa0a6); margin-top: 10px; }

/* collapsed side panel */
/* collapsed side panel */
#side-panel.collapsed { width: 30px !important; min-width: 30px; }
#side-panel.collapsed .panel-content,
#side-panel.collapsed .panel-header,
#side-panel.collapsed .panel-empty { display: none !important; }

/* keep coverage cards within the panel width */
.panel-content { overflow-x: hidden; box-sizing: border-box; }
.ds-card, .cov-summary, .var-panel, .bars, .mbars { box-sizing: border-box; max-width: 100%; }
.ds-stats span { overflow-wrap: anywhere; }
.ybars { min-width: 0; }

/* ============================================
   INVENTORY PANEL — "What CalCOFI Measures"
   Shown in the right side panel (#panel-empty) before any station is
   clicked. Ported from Betty's original station-portal build
   (2026-ucsb-station-data-portal, year-slider-and-integrated-db branch) —
   replaces the earlier horizontal browse-panel-under-search-bar attempt.
   ============================================ */
.panel-empty {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  overflow-y: visible;
  text-align: left;
}
.inventory-panel { padding: 28px 22px 16px; width: 100%; }
.inventory-title {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-align: center;
  color: var(--accent);
  margin-bottom: 6px;
}
.inventory-title::after {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: var(--accent);
  opacity: 0.6;
  margin: 10px auto 0;
  border-radius: 2px;
}
.inventory-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  max-width: 85%;
  margin: 0 auto 16px;
  text-align: center;
}

/* By Category / By Dataset segmented toggle */
.inventory-view-tabs {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 0 auto 20px;
  padding: 3px;
  background: rgba(var(--ink), 0.04);
  border-radius: 8px;
  width: fit-content;
}
.inventory-view-tab {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.inventory-view-tab:hover { color: var(--text); }
.inventory-view-tab-active { background: rgba(0, 194, 255, 0.14); color: var(--accent); }
.inventory-view-tab-active:hover { color: var(--accent); }

.inventory-list { display: flex; flex-direction: column; gap: 0; }
.inventory-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(var(--ink), 0.06);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
}
.inventory-row:last-child { border-bottom: none; }
.inventory-row:hover {
  background: rgba(0, 194, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(0, 194, 255, 0.15);
}
.inventory-row-open { background: rgba(0, 194, 255, 0.08); }
.inventory-label { font-size: 12.5px; font-weight: 500; letter-spacing: 0.1px; color: var(--text); flex: 1; }
.inventory-count {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(0, 194, 255, 0.14);
  padding: 3px 9px;
  border-radius: 10px;
  min-width: 32px;
  text-align: center;
}
.inventory-arrow { font-size: 11px; color: var(--muted); transition: color 0.15s, transform 0.15s; }
.inventory-row:hover .inventory-arrow { color: var(--accent); transform: translateX(3px); }

.inventory-sublist { padding: 2px 8px 10px 30px; border-bottom: 1px solid rgba(var(--ink), 0.06); }
.inventory-subitem {
  padding: 7px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.inventory-subitem:hover { background: rgba(0, 194, 255, 0.08); }
.inventory-subitem-name { font-size: 13px; font-weight: 600; color: var(--text); }
.inventory-subitem-meta { font-size: 11px; color: #9aa7ae; font-weight: 400; }

/* dropdown group header — search results grouped by category */
.dropdown-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px 6px;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent2);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}
.dropdown-group-icon { margin-right: 4px; }
.dropdown-group-count {
  background: rgba(0, 194, 255, .12);
  color: var(--accent);
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  flex-shrink: 0;
}

/* station panel: sub-category header within a dataset's variable list */
.inventory-subcategory-header {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent2);
  padding: 10px 0 4px;
  margin-top: 4px;
  border-top: 1px solid rgba(var(--ink), .06);
}
.inventory-subcategory-header:first-child { margin-top: 0; border-top: none; }

/* station panel accordion — one row per dataset, native <details>/<summary>
   so open/close state and the chevron rotation need no JS bookkeeping. */
.ds-accordion-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
}
.ds-accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: var(--surface);
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.ds-accordion-header::-webkit-details-marker { display: none; }
.ds-accordion-header:hover { background: var(--panel); }
.ds-accordion-label { font-size: 14px; color: var(--muted); }
.ds-accordion-row[open] .ds-accordion-label { color: var(--text); font-weight: 600; }
.ds-accordion-right { display: flex; align-items: center; gap: 8px; }
.ds-accordion-count {
  background: var(--border);
  color: var(--accent);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
}
.ds-accordion-chevron { color: var(--accent); font-size: 12px; width: 14px; text-align: center; display: inline-block; transition: transform .15s; }
.ds-accordion-row[open] .ds-accordion-chevron { transform: rotate(90deg); }
.ds-accordion-body { padding: 12px 14px; background: var(--ocean); }

/* "Show Parameters" toggle — the per-station parameter list is secondary
   info here (the dataset card above is the main thing), so it's hidden
   behind a native <details> toggle instead of shown by default. */
.params-toggle { margin-top: 10px; }
.params-toggle-summary {
  cursor: pointer;
  list-style: none;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--accent);
  padding: 8px 0;
  user-select: none;
}
.params-toggle-summary::-webkit-details-marker { display: none; }
.params-toggle-summary::before { content: '▸ '; }
.params-toggle[open] > .params-toggle-summary::before { content: '▾ '; }
.params-toggle-summary:hover { text-decoration: underline; }
.params-list { padding-top: 4px; }

/* ============================================
   FONT UPDATE — Inter for UI, Space Mono for codes
   Ported from Betty's original station-portal build: Space Mono
   everywhere read as dense/technical for body text, so most UI
   text moved to Inter (clearer, more plain), keeping Space Mono
   only where a monospace/code feel actually helps — station IDs,
   coordinates, counts, and the search input.
   ============================================ */
/* Inter (UI text) now loaded via the <link> tag in index.html, alongside
   Space Mono — a mid-file @import here is silently
   ignored by browsers unless it's the very first rule in the stylesheet. */
body, .panel, .dd-item, .inventory-label, .inventory-subitem-name,
.browse-pill, .modal-body, .about-content, .data-link-name,
.dropdown-group-header, .ds-accordion-label, .cov-summary, .var-panel,
.ds-stats, .panel-empty-text {
  font-family: 'Inter', sans-serif;
}

/* Two-font system: Inter for everything readable (body, titles, prose,
   hints), Space Mono reserved only for the logo and short numeric/code
   badges — never for anything that mixes prose and numbers, since
   switching fonts mid-context is what reads as inconsistent. */
.search-input,
.inventory-count, .browse-count, .dd-meta {
  font-family: 'Space Mono', monospace;
}

/* ============================================
   PARAMETER FAMILIES — umbrella rows for related-but-different
   measurements (e.g. bottle Temperature vs Dry/Wet Bulb Temperature).
   Ported from Betty's original station-portal build.
   ============================================ */
.inventory-family-header { font-style: normal; cursor: pointer; }
.inventory-umbrella-caret { font-size: 11px; color: var(--muted); flex-shrink: 0; }

/* Each nesting level gets its own shaded container (family -> group ->
   sources), matching the screenshot reference, instead of relying only on
   margin/indent to show depth. */
.inventory-sublinks {
  margin: 6px 0 4px;
  padding: 8px 10px;
  background: rgba(var(--ink), 0.03);
  border-radius: 6px;
}
.inventory-family-members { display: flex; flex-direction: column; gap: 2px; }
.inventory-family-method {
  font-size: 11px;
  font-style: normal;
  color: #9aa7ae;
  font-weight: 400;
  line-height: 1.4;
  margin-top: 2px;
}

/* ============================================
   VARIABLE DETAIL PANEL — plain flowing layout, not a bordered
   card, so it uses the full width of the side panel. Ported
   verbatim from Betty's original station-portal build.
   ============================================ */
.panel-info-block { font-size: 14px; line-height: 1.85; color: var(--text); padding: 4px 0; }
.panel-info-block b { color: var(--text); }
.panel-info-block a { color: var(--accent); }
.panel-info-block a:hover { text-decoration: underline; }
.panel-desc-placeholder { color: var(--muted); }
.panel-highlight { color: var(--accent2); font-size: 15px; }
.panel-subtext { font-size: 11px; color: var(--text); opacity: 0.75; }
.panel-subtext-muted { color: var(--muted); }
.panel-station-count { display: block; color: var(--accent); font-size: 15px; font-weight: 700; margin: 10px 0 18px; }
.panel-fallback-note {
  display: block;
  color: var(--muted, #6c757d);
  font-size: 12px;
  line-height: 1.6;
  margin: -14px 0 24px;
}
/* per-region observation counts for a region-pooled dataset (regionPanelBreakdown).
   The regions are a gradient from inshore to Central Pacific, so the numbers are
   worth comparing side by side rather than summing to one total. */
.region-breakdown { display: block; margin: -10px 0 22px; }
.region-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 3px 0; border-bottom: 1px solid var(--border, #2a2f35); font-size: 13px;
}
.region-row:last-child { border-bottom: 0; }
.region-row-off { opacity: 0.4; }
.region-name { color: var(--text); font-weight: 600; cursor: help; }
.region-obs { color: var(--muted, #6c757d); font-variant-numeric: tabular-nums; }
.panel-hint { display: block; color: var(--text); font-size: 13px; line-height: 1.7; margin-bottom: 20px; }
a.panel-open-dataset-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 13px 16px;
  background: var(--accent);
  color: var(--deep) !important;
  border: none;
  border-radius: 4px;
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
}
a.panel-open-dataset-btn:hover { background: var(--text); }

/* A-Z jump nav — shown above any long subgroup list (e.g. Ichthyoplankton
   species) so you can jump straight to a letter instead of scrolling
   through everything. Letters with zero entries stay visible but greyed
   out and unclickable, rather than removed, so the row's layout is
   stable rather than shifting around as the underlying data changes. */
.inventory-jumpnav {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 8px 4px 10px;
}
.inventory-jumpnav-btn {
  width: 20px;
  height: 20px;
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.inventory-jumpnav-btn:hover { border-color: var(--accent); color: var(--accent); }
.inventory-jumpnav-btn-active { background: var(--accent) !important; color: var(--deep) !important; border-color: var(--accent) !important; font-weight: 700; }
.inventory-jumpnav-btn-off {
  color: var(--muted);
  opacity: 0.35;
  cursor: default;
  border-color: transparent;
}
.inventory-jumpnav-btn-off:hover { border-color: transparent; color: var(--muted); }

/* Source cards — each data source inside a family's dropdown (e.g.
   Temperature > Bottle / CTD Cast) as its own distinct clickable card,
   not just another flat row. Bold official dataset name, description
   below, and a trailing arrow so clicking one reads clearly as an action
   (selects that variable, updates the map/slider) rather than more
   expand/collapse like the dropdown toggle above it. */
.inventory-source-card {
  padding: 10px 4px;
  border-bottom: 1px solid rgba(var(--ink), 0.08);
  cursor: pointer;
}
.inventory-source-card:last-child { border-bottom: none; }
.inventory-source-arrow { font-size: 13px; color: var(--accent); flex-shrink: 0; opacity: 0.6; }
.inventory-source-card .inventory-subitem-name { font-size: 12px; }
.inventory-source-card:hover .inventory-source-arrow { opacity: 1; }
.inventory-source-hint {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  padding: 0 4px 8px;
}

/* ============================================
   SPECIES-FOCUSED PANEL (2026-08-22 feedback round)
   Covers two views: the no-station side panel (showVariablePanel) and the
   station-open species view (speciesStationInfoHtml) - kept visually in
   sync since variableInfoFieldsHtml/the spinfo-* classes are shared by both.
   ============================================ */

/* No-station species header (showVariablePanel): the short accent rule in
   panel-depth-summary (.varinfo-rule) is the divider instead of this
   header's own full-width border, so the border is dropped here - matches
   the refined mockup where a short cyan rule sits right under the italic
   sci name (feedback 2026-08-22: "better match image 2"). */
.panel-header.panel-header-flush {
  border-bottom: none;
  padding-bottom: 4px;
}
.varinfo-rule { margin: 14px 0 0; border-top: 2px solid var(--accent); width: 40px; }

/* External-link icon before "AphiaID ####" in the WoRMS field. */
.varinfo-ext-icon { vertical-align: -1px; margin-right: 4px; }
a.varinfo-ext-link { text-decoration: none; }
a.varinfo-ext-link:hover { text-decoration: underline; }

/* Species-focused panel content once a specific parameter is selected while
   a station is open (speciesStationInfoHtml in app.js) - replaces the
   Overview/Depth Profiles tab bar and the coverage-card list entirely
   (feedback 2026-08-22: "do not need overview and depth and coverage").
   Settled on no box at all for the title area - just a short accent rule
   marking where it starts - with a fixed accent color rather than one tied
   to the dataset. */
/* Horizontal margins below are 4px, not 20px - .panel-content (the parent)
   already carries 16px of padding, so 4px is what lines these elements'
   left/right edges up with .panel-header's 20px padding above (16 + 4 =
   20). */
.spinfo-rule { margin: 18px 4px 0; border-top: 2px solid var(--accent); width: 40px; }
.spinfo-title {
  font-family: 'Space Mono', monospace;
  font-size: 18px;
  color: var(--accent);
  line-height: 1.4;
  margin: 12px 4px 2px;
}
.spinfo-body {
  margin: 12px 4px 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text);
}
.spinfo-body b { color: var(--text); }
.spinfo-body a { color: var(--accent); text-decoration: none; }
.spinfo-body a:hover { text-decoration: underline; }
/* Merged "N stations collected" + "observed at this station in: years" (or,
   for the no-station panel, the "click a station" hint) into one bordered
   box (feedback 2026-08-22: option B over option C, "keep the outline"). */
.spinfo-note {
  margin: 16px 4px 0;
  padding: 12px 14px;
  border: 1px solid rgba(0, 194, 255, 0.3);
  border-radius: 8px;
}
.spinfo-note-count { display: block; color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 6px; }
.spinfo-note-fallback { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.6; margin-bottom: 6px; }
/* One flowing sentence instead of a label line + a separate years line
   (feedback 2026-08-22: "instead of separate line"). Extra margin-top gives
   it room to breathe below the "Collected at N stations" line above
   (feedback 2026-08-22: "maybe space before"). */
.spinfo-note-years { display: block; color: var(--text); font-size: 13px; line-height: 1.7; margin-top: 8px; }
.spinfo-note-years-label { color: var(--text); }
/* Only the year itself is bold/accent-colored — the comma separators between
   years are plain text at the parent's normal weight/color, so they read as
   punctuation rather than competing with the years for attention (feedback
   2026-08-22: "does orange commas make sense"). */
.spinfo-note-years-year { color: var(--accent2); font-weight: 700; font-size: 14px; }
/* De-emphasize the "(×N)" repeat count next to each year — same info, just
   not competing with the year itself for attention (feedback 2026-08-22:
   "should be a different styling...gray font not bold"). */
.spinfo-note-years-count { color: var(--muted); font-size: 11.5px; font-weight: 400; }
/* "Click a highlighted station..." hint in the no-station species panel's
   note box (showVariablePanel) - same treatment as spinfo-note-years-label
   since it fills the same slot when there's no station open yet to show
   observed years for. */
.spinfo-note-hint { display: block; color: var(--text); font-size: 13px; line-height: 1.7; }
a.spinfo-open-btn {
  display: block;
  margin: 16px 4px 0;
  padding: 14px 16px;
  text-align: center;
  background: var(--accent);
  color: var(--deep) !important;
  border-radius: 5px;
  font-family: 'Space Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
}
a.spinfo-open-btn:hover { background: var(--text); }
/* Bordered pill row, its own distinct row with room above it. */
a.spinfo-full-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 4px 20px;
  padding: 11px 14px;
  border: 1px solid rgba(0, 194, 255, 0.3);
  border-radius: 5px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--accent);
  text-decoration: none;
}
a.spinfo-full-link:hover { background: rgba(0, 194, 255, 0.08); }

/* "Surveys (N)" affordance on a dataset card — the cruises behind that
   card's n_surveys count. Originally a separate "Surveys (N)" disclosure row
   between the stats and the year bars, but that read as an orphaned link
   floating in its own section. Now it's a small "i" chip right after the
   "N surveys" text inside the Coverage stat (ds-surveys-icon-btn, added from
   datasetCard's Coverage line in app.js), toggling a plain div underneath
   the whole stats block (ds-surveys-expand) via a JS class toggle rather
   than a native <details> — the trigger and the content it controls no
   longer share a parent element once the trigger moved inline, so <details>
   stopped being able to express this. */
.ds-surveys-icon-btn {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--muted, #9aa0a6);
  background: none;
  color: var(--muted, #9aa0a6);
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin: 0 1px;
  transition: border-color 0.15s, color 0.15s;
}
.ds-surveys-icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.ds-surveys-expand {
  display: none;
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(var(--ink), 0.03);
  border-radius: 6px;
}
.ds-surveys-expand.ds-surveys-expand-open { display: block; }
.ds-surveys-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 180px;
  overflow-y: auto;
}
.ds-survey-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 2px;
  font-size: 11px;
  border-bottom: 1px solid rgba(var(--ink), 0.04);
}
.ds-survey-date { color: var(--muted); flex-shrink: 0; width: 52px; }
.ds-survey-ship { color: var(--text, #e6e9ed); flex: 1; overflow-wrap: anywhere; }
.ds-survey-key {
  font-family: 'Space Mono', monospace;
  color: var(--muted);
  flex-shrink: 0;
  font-size: 10px;
}