/* ─────────────────────────────────────────────────────────────
   Theme D — Refined  (blend of Editorial + Dashboard)
   Serif headlines, structured rows, navy + green palette,
   warm off-white background, designed for max-width screens.
   ───────────────────────────────────────────────────────────── */

/* HGSSS brand fonts — matches the parent site (Oswald + Quattrocento Sans).
   JetBrains Mono kept for citation strings (parent site has no mono). */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&family=Quattrocento+Sans:ital,wght@0,400;0,700;1,400;1,700&family=JetBrains+Mono:wght@400;500&display=swap');

:root[data-theme="d"] {
  --font-body: 'Quattrocento Sans', 'QuattrocentoSans', system-ui, -apple-system, sans-serif;
  --font-display: 'Oswald', 'Quattrocento Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --bg: #FBFAF7;
  --fg: #14181F;
  --fg-soft: #4A5160;
  --accent: #002B54;
  --accent-soft: #1E4A75;
  --accent-fg: #ffffff;
  --green: #289747;
  --green-soft: #6DB882;
  --border: #E5E2D9;
  --border-strong: #cfc9b8;

  --header-bg: #ffffff;
  --sidebar-bg: #FBFAF7;
  --map-bg: #C5E0EB;        /* matches Voyager's ocean — out-of-bounds void blends in */
  --detail-bg: #ffffff;

  --input-bg: #ffffff;
  --switcher-bg: #F1EEE5;
  --switcher-active-bg: #ffffff;
  --row-hover-bg: #ffffff;
  --row-selected-bg: #ffffff;
  --chip-bg: #ffffff;
  --citation-bg: #F4F1E7;
  --citation-code-bg: #ffffff;
  --detail-shadow: -10px 0 30px rgba(20,16,8,0.08);
}

/* ───────── Header ───────── */
[data-theme="d"] .app__header {
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  background: #ffffff;
}
[data-theme="d"] .brand__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.015em;
  color: var(--accent);
}
[data-theme="d"] .brand__sub {
  font-style: italic;
  color: var(--fg-soft);
  font-size: 12.5px;
  opacity: 1;             /* was inheriting 0.65 from base — too washed-out */
}

[data-theme="d"] .theme-switcher,
[data-theme="d"] .basemap-switcher {
  background: var(--switcher-bg);
  border: 1px solid var(--border);
}
[data-theme="d"] .theme-switcher button.is-active,
[data-theme="d"] .basemap-switcher button.is-active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,43,84,0.25);
}

/* ───────── Panel ───────── */
[data-theme="d"] .panel {
  --panel-bg: #ffffff;
  --panel-toolbar-bg: #ffffff;
  background: var(--panel-bg);
  border-color: var(--border);
}
[data-theme="d"] .panel__toolbar {
  background: var(--panel-toolbar-bg);
  border-bottom-color: var(--border);
}

[data-theme="d"] .sidebar__filters {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  background: #ffffff;
}

[data-theme="d"] .search-wrap input {
  border-color: var(--border-strong);
  background: var(--input-bg);
  font-size: 13.5px;
}
[data-theme="d"] .search-wrap input:focus {
  outline-color: var(--accent);
  border-color: var(--accent);
}

[data-theme="d"] .chip {
  background: var(--chip-bg);
  border-color: var(--border-strong);
  color: var(--fg-soft);
  font-weight: 500;
  font-size: 11.5px;
}
[data-theme="d"] .chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
[data-theme="d"] .chip.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

[data-theme="d"] .sidebar__meta {
  padding: 10px 16px;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.05em;
}

[data-theme="d"] .sidebar__list {
  padding: 0;
  background: var(--sidebar-bg);
}

[data-theme="d"] .marker-row {
  border-radius: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  position: relative;
  transition: background 0.12s, padding-left 0.12s, border-left 0s;
  border-left: 3px solid transparent;
}
[data-theme="d"] .marker-row:hover {
  background: var(--row-hover-bg);
  border-left-color: var(--green-soft);
}
[data-theme="d"] .marker-row.is-selected {
  background: #ffffff;
  outline: none;
  border-left-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--border);
}
[data-theme="d"] .marker-row-title {
  font-weight: 600;
  color: var(--fg);
  font-size: 13.5px;
}
[data-theme="d"] .marker-row-meta {
  color: var(--fg-soft);
  font-size: 11.5px;
}

/* "No location" tag for markers without coords */
[data-theme="d"] .marker-row[data-no-coords="true"] {
  opacity: 0.55;
}
[data-theme="d"] .marker-row[data-no-coords="true"]::after {
  content: 'no location';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #F4F1E7;
  color: var(--fg-soft);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--border-strong);
}

/* ───────── Detail view (lives inside panel) ───────── */
[data-theme="d"] #detail { padding: 22px 26px 28px; }

[data-theme="d"] .detail-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--accent);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 0;
  text-transform: uppercase;
  opacity: 1;
}

[data-theme="d"] .detail-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  color: var(--accent);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 6px 0 4px;
}
[data-theme="d"] .detail-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--fg-soft);
  font-size: 16px;
  margin-bottom: 18px;
}

[data-theme="d"] .detail-where {
  font-family: var(--font-mono);
  font-size: 11.5px;
  background: var(--citation-bg);
  padding: 4px 10px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 16px;
  color: var(--fg-soft);
  letter-spacing: 0.01em;
}

[data-theme="d"] .detail-desc {
  font-size: 15px;
  line-height: 1.65;
  color: var(--fg);
}

[data-theme="d"] .detail-links {
  border-top: 2px solid var(--green);
  margin-top: 22px;
  padding-top: 14px;
}
[data-theme="d"] .detail-links h4 {
  font-family: var(--font-display);
  color: var(--accent);
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  margin-bottom: 6px;
}
[data-theme="d"] .detail-link {
  color: var(--accent);
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px dotted var(--border);
}
[data-theme="d"] .detail-link:last-child { border-bottom: none; }

[data-theme="d"] .detail-citation {
  background: var(--citation-bg);
  border-radius: 8px;
  border: 1px solid var(--border);
}
[data-theme="d"] .detail-citation summary {
  color: var(--accent);
  font-weight: 600;
}
[data-theme="d"] .citation-text {
  background: #ffffff;
  border: 1px solid var(--border);
}
[data-theme="d"] .btn-copy {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 500;
}
[data-theme="d"] .btn-copy:hover { background: var(--accent-soft); }

/* ───────── Pin styling ───────── */
[data-theme="d"] .ggv-pin svg {
  filter: drop-shadow(0 2px 5px rgba(20,16,8,0.25));
}

[data-theme="d"] .leaflet-control-attribution {
  background: rgba(255,255,255,0.92) !important;
  color: var(--fg-soft) !important;
  font-size: 10px !important;
}
[data-theme="d"] .leaflet-bar a {
  background: #ffffff !important;
  color: var(--accent) !important;
  border-color: var(--border) !important;
}