/* ============================================================
   SIMEXDB — simexdb.css
   ============================================================ */

/* ── STRUCTURAL CLASSES — required by simexdb.js ──────────
   These classes are added/removed by JS at runtime.
   If embedding into another project and providing your own CSS,
   you must cover every class/selector listed here.
   See CLAUDE.md → Integration guide for the full reference.

   Selector                         Effect required
   ────────────────────────────────────────────────
   [data-enabled="false"]           display: none !important  (disabled panels)
   .sel                             selected row / card highlight
   .sorted                          active sort column header indicator
   .active                          active state on toggle buttons
   .tbl-group-hidden                display: none !important  (collapsed table group rows)
   .cards-group-hidden              display: none !important  (collapsed card group items)
   .facet-collapsed .facet-body     display: none             (collapsed facet list)
   .drawer-open                     sidebar visible on mobile (slide in from left)
   #drawer-backdrop.visible         backdrop shown (display: block)
   .viewport-filtering              amber left-border on timeline panel (filter active)
   .skeleton-row / .skeleton-cell   loading skeleton rows
   ──────────────────────────────────────────────────────── */

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --font-display : 'Libre Baskerville', Georgia, serif;
  --font-body    : 'DM Sans', sans-serif;

  --c-bg         : #F7F4EF;
  --c-surface    : #FFFFFF;
  --c-border     : #E2DDD6;
  --c-border-mid : #CCC7BE;
  --c-text       : #1A1714;
  --c-text-mid   : #5C5650;
  --c-text-soft  : #9B9590;
  --c-accent     : #1A1714;
  --c-info-bg    : #EEF5FF;
  --c-info-border: #BFDBFE;

  --shadow-sm    : 0 1px 3px rgba(0,0,0,.06);
  --shadow-md    : 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg    : 0 8px 24px rgba(0,0,0,.12);
  --r            : 6px;
  --r-lg         : 10px;

  /* Amber — warning / active-filter tint */
  --c-warning-bg    : #FEF3C7;
  --c-warning-border: #FDE68A;
  --c-warning-text  : #92400E;

  /* Load-bar gradient */
  --c-progress-start: #3578B5;
  --c-progress-end  : #5BA3D9;

  /* Timeline inactive-overlay tint */
  --c-tl-overlay    : rgba(150, 150, 200, 0.45);
}

/* ── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
svg.icon { display: inline-block; vertical-align: middle; overflow: visible; flex-shrink: 0; }
html { scrollbar-gutter: stable; }
body {
  font-family : var(--font-body);
  font-size   : 13px;
  color       : var(--c-text);
  background  : var(--c-bg);
  line-height : 1.5;
}
a { color: inherit; }

/* ── LAYOUT ─────────────────────────────────────────────── */
.dash {
  display            : grid;
  grid-template-rows : auto auto 1fr auto;
  min-height         : 100vh;
}

/* ── TOPBAR ─────────────────────────────────────────────── */
.topbar {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  padding         : 11px 16px;
  border-bottom   : 1px solid var(--c-border);
  background      : var(--c-surface);
  box-shadow      : var(--shadow-sm);
  position        : sticky;
  top             : 0;
  z-index         : 1100;
}
.topbar-title {
  font-family    : var(--font-display);
  font-size      : 16px;
  font-weight    : 700;
  letter-spacing : -.01em;
}
.topbar-title #dash-subtitle {
  font-weight  : 400;
  font-style   : italic;
  color        : var(--c-text-mid);
  font-size    : 13px;
  margin-left  : 8px;
  font-family  : var(--font-display);
}
.topbar-right { display: flex; align-items: center; gap: 8px; }

/* ── LOADING PROGRESS BAR ───────────────────────────────── */
#load-bar-wrap {
  height     : 3px;
  background : var(--c-border);
  overflow   : hidden;
}
#load-bar {
  height     : 3px;
  width      : 0%;
  background : linear-gradient(90deg, var(--c-progress-start), var(--c-progress-end));
  transition : width 1.2s ease;
  display    : none;
}

/* Feed badge */
.feed-badge {
  font-size     : 10px;
  padding       : 2px 8px;
  border-radius : 10px;
  border        : 1px solid var(--c-border);
  color         : var(--c-text-soft);
  background    : var(--c-bg);
  white-space   : nowrap;
  transition    : all .3s;
}
.feed-badge.live   { border-color:#86EFAC; color:#15803D; background:#F0FDF4; }
.feed-badge.sample { border-color:var(--c-warning-border); color:var(--c-warning-text); background:#FFFBEB; }
.feed-badge.error  { border-color:#FECACA; color:#991B1B; background:#FEF2F2; }

.feed-source-link { text-decoration: none; }
.feed-source-link[aria-disabled="true"] { opacity: .5; pointer-events: none; cursor: default; }

/* ── TWO-COLUMN SHELL ───────────────────────────────────── */
.layout {
  display               : grid;
  grid-template-columns : 214px 1fr;
  flex                  : 1;
}

/* ── SIDEBAR ────────────────────────────────────────────── */
.sidebar {
  border-right    : 1px solid var(--c-border);
  padding         : 12px;
  overflow-y      : auto;
  background      : var(--c-surface);
  display         : flex;
  flex-direction  : column;
  gap             : 10px;
  max-height      : calc(100vh - 48px);  /* topbar + load bar */
  position        : sticky;
  top             : 48px;
}

/* Search */
.search-wrap { position: relative; }
.search-wrap .si-icon {
  position       : absolute;
  left           : 8px;
  top            : 50%;
  transform      : translateY(-50%);
  font-size      : 13px;
  color          : var(--c-text-soft);
  pointer-events : none;
}
.search-wrap input {
  width         : 100%;
  padding       : 6px 26px 6px 26px;
  font-size     : 12px;
  font-family   : var(--font-body);
  border        : 1px solid var(--c-border);
  border-radius : var(--r);
  background    : var(--c-bg);
  color         : var(--c-text);
  transition    : border-color .15s;
}
.search-wrap input:focus { outline: none; border-color: var(--c-border-mid); background: var(--c-surface); }
.search-wrap input::placeholder { color: var(--c-text-soft); }
.clear-x {
  position   : absolute;
  right      : 7px;
  top        : 50%;
  transform  : translateY(-50%);
  font-size  : 12px;
  color      : var(--c-text-soft);
  cursor     : pointer;
  background : none;
  border     : none;
  padding    : 0;
  display    : none;
}
.search-wrap input:not(:placeholder-shown) ~ .clear-x { display: block; }

/* ── SITE FOOTER ────────────────────────────────────────────
   Demo-repo scaffolding: GitHub/Data source/engine version, plus a sitemap
   of this repo's worked-example pages (populated by buildSiteFooter() in
   simexdb.js from SIMEXDB_EXAMPLE_PAGES, defined in demo-examples.js — see
   that file's header comment for why this isn't part of CONFIG). A page
   that doesn't load demo-examples.js or doesn't have #site-footer simply
   doesn't get the example sitemap; the top link row works standalone. */
.site-footer {
  border-top : 1px solid var(--c-border);
  padding    : 12px 16px;
  background : var(--c-surface);
}
.site-footer-top {
  display      : flex;
  flex-wrap    : wrap;
  align-items  : center;
  gap          : 6px 14px;
  margin-bottom: 10px;
}
.site-footer-link {
  display         : inline-flex;
  align-items     : center;
  gap             : 5px;
  padding         : 5px 9px;
  font-size       : 11px;
  color           : var(--c-text-mid);
  background      : var(--c-bg);
  border          : 1px solid var(--c-border);
  border-radius   : var(--r);
  text-decoration : none;
  transition      : border-color .15s, color .15s, background .15s;
}
.site-footer-link:hover { border-color: var(--c-border-mid); color: var(--c-text); background: var(--c-surface); }
.site-footer-link .icon { flex-shrink: 0; font-size: 12px; }

.site-footer-examples {
  display   : flex;
  flex-wrap : wrap;
  gap       : 10px 24px;
}
.footer-example {
  display         : flex;
  flex-direction  : column;
  gap             : 1px;
  box-sizing      : border-box;
  min-width       : 190px;
  max-width       : 280px;
  text-decoration : none;
  color           : inherit;
}
.footer-example-label {
  font-size   : 11.5px;
  font-weight : 600;
  color       : var(--c-text);
}
a.footer-example:hover .footer-example-label { text-decoration: underline; }
.footer-example-desc {
  font-size   : 10.5px;
  color       : var(--c-text-soft);
  line-height : 1.35;
}
/* Current-page entry — highlighted card instead of a link (clicking it would
   just reload this page). Negative margin offsets the added padding/border
   so it doesn't visually shift its flex-wrap neighbors more than necessary. */
.footer-example-current {
  padding       : 6px 8px;
  margin        : -6px -8px;
  background    : var(--c-bg);
  border        : 1px solid var(--c-border);
  border-radius : var(--r);
}
.footer-example-tag {
  display        : inline-block;
  font-size      : 9px;
  font-weight    : 600;
  text-transform : uppercase;
  letter-spacing : .04em;
  color          : var(--c-text-soft);
  background     : var(--c-surface);
  border         : 1px solid var(--c-border);
  border-radius  : 3px;
  padding        : 1px 4px;
  margin-left    : 3px;
  vertical-align : middle;
}

/* Facets */
.facet-section { display: flex; flex-direction: column; gap: 6px; }
.facet-group   { border: 1px solid var(--c-border); border-radius: var(--r); overflow: hidden; }
.facet-hd {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  padding         : 6px 8px;
  background      : var(--c-bg);
  border-bottom   : 1px solid var(--c-border);
}
.facet-hd-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--c-text-mid); }
.facet-hd-count { font-size: 10px; color: var(--c-text-soft); }
.facet-body     { max-height: 140px; overflow-y: auto; padding: 4px 0; }.facet-group.collapsible .facet-hd { cursor: pointer; user-select: none; }
.facet-group.facet-collapsed .facet-body { display: none; }
.facet-chevron  { font-size: 12px; color: var(--c-text-soft); transition: transform 0.2s ease; flex-shrink: 0; }
.facet-group.facet-collapsed .facet-chevron { transform: rotate(-90deg); }
.facet-item     { display: flex; align-items: center; justify-content: space-between; padding: 2px 8px; }
.facet-item label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; color: var(--c-text); flex: 1; }
.facet-item input[type=checkbox] { width: 12px; height: 12px; cursor: pointer; accent-color: var(--c-accent); flex-shrink: 0; }
.facet-count { font-size: 10px; color: var(--c-text-soft); background: var(--c-bg); padding: 1px 5px; border-radius: 10px; border: 1px solid var(--c-border); flex-shrink: 0; }
.color-swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.result-count { font-size: 11px; color: var(--c-text-soft); margin-top: auto; padding-top: 4px; text-align: center; }

/* ── FACET SLIDER ────────────────────────────────────────── */
.facet-slider            { padding: 4px 8px 8px; }
.facet-slider-label      { font-size: 11px; font-weight: 600; color: var(--c-text-mid); text-align: center; margin-bottom: 10px; }
.facet-slider-track-wrap { position: relative; height: 18px; display: flex; align-items: center; }
.facet-slider-track      { position: absolute; left: 7px; right: 7px; height: 4px; background: var(--c-border); border-radius: 2px; }
.facet-slider-fill       { position: absolute; top: 0; bottom: 0; background: var(--c-progress-start); border-radius: 2px; transition: left .05s, right .05s; }
.facet-slider-thumb {
  position: absolute; width: 100%; height: 4px;
  pointer-events: none; touch-action: none; background: transparent; outline: none;
  -webkit-appearance: none; appearance: none;
}
.facet-slider-thumb::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: all; cursor: pointer;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--c-progress-start); border: 2px solid var(--c-surface);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.facet-slider-thumb::-moz-range-thumb {
  pointer-events: all; cursor: pointer; border: 2px solid var(--c-surface);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--c-progress-start); box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.facet-slider-bounds { display: flex; justify-content: space-between; font-size: 10px; color: var(--c-text-soft); margin-top: 6px; padding: 0 4px; }

/* ── MAIN PANELS ────────────────────────────────────────── */
.main { display: grid; }

.panel[data-enabled="false"] { display: none !important; }
.panel {
  border          : 1px solid var(--c-border);
  border-radius   : var(--r);
  overflow        : hidden;
  display         : flex;
  flex-direction  : column;
  background      : var(--c-surface);
  position        : relative;
}

.panel-hd {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  padding         : 0 12px;
  height          : 30px;
  min-height      : 30px;
  border-bottom   : 1px solid var(--c-border);
  background      : var(--c-bg);
  font-size       : 11px;
  font-weight     : 600;
  color           : var(--c-text-mid);
  text-transform  : uppercase;
  letter-spacing  : .05em;
  flex-shrink     : 0;
}
.panel-hd-left  { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.panel-hd-right { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: 8px; }

/* ── MAP ────────────────────────────────────────────────── */
#leaflet-map { flex: 1; min-height: 0; }

/* Cluster icon — replaces Leaflet.markercluster default styling */
.cluster-icon { background: transparent; }
.cluster-icon .cluster-count {
  width         : 30px;
  height        : 30px;
  border-radius : 50%;
  background    : var(--c-surface);
  border        : 2px solid var(--c-border-mid);
  color         : var(--c-text);
  font          : 600 11px / 26px var(--font-body, system-ui);
  text-align    : center;
  box-shadow    : 0 1px 5px rgba(0,0,0,.25);
  box-sizing    : border-box;
}

.dash-tooltip {
  background    : var(--c-surface);
  border        : 1px solid var(--c-border);
  border-radius : var(--r);
  box-shadow    : var(--shadow-md);
  padding       : 8px 10px;
  font-family   : var(--font-body);
  font-size     : 12px;
  width         : 250px;
  white-space   : normal;
  overflow-wrap : break-word;
  pointer-events: none;
}
.dash-tooltip strong  { font-size: 13px; display: block; margin-bottom: 3px; font-family: var(--font-display); }
.dash-tooltip .tt-meta   { color: var(--c-text-mid); font-size: 11px; line-height: 1.6; }
/* ── TIMELINE ───────────────────────────────────────────── */

.vis-timeline                { border: none !important; font-family: var(--font-body) !important; }
.vis-time-axis .vis-text     { font-size: 10px !important; color: var(--c-text-soft) !important; font-family: var(--font-body) !important; }
.vis-current-time            { background: #C53030 !important; width: 2px !important; opacity: .7; }
.vis-panel.vis-center,
.vis-panel.vis-left          { border-color: var(--c-border) !important; }
.vis-label                   { font-size: 11px !important; color: var(--c-text-mid) !important; font-family: var(--font-body) !important; }
.vis-tooltip {
  background    : var(--c-surface) !important;
  border        : 1px solid var(--c-border) !important;
  border-radius : var(--r) !important;
  box-shadow    : var(--shadow-md) !important;
  font-family   : var(--font-body) !important;
  font-size     : 12px !important;
  color         : var(--c-text) !important;
  padding       : 0 !important;
  max-width     : 260px !important;
  white-space   : normal !important;
  overflow-wrap : break-word !important;
}

/* ── LIGHTBOX / INLINE RECORD PANEL ────────────────────── */

/* Record detail panel — shown inside #lb-dialog (mobile) and #detail-pane (desktop) */
.lb-wrap {
  width         : 100%;
  background    : var(--c-surface);
  border-radius : var(--r-lg);
  overflow      : hidden;
  font-family   : var(--font-body);
}
.lb-body         { padding: 16px 18px 18px; }
.lb-name {
  font-family   : var(--font-display);
  font-size     : 17px;
  font-weight   : 700;
  margin-bottom : 8px;
  line-height   : 1.3;
}
.lb-name a       { color: var(--c-text); text-decoration: none; }
.lb-name a:hover { text-decoration: underline; }
.lb-meta {
  display      : grid;
  gap          : 5px;
  margin-bottom: 12px;
  padding-top  : 10px;
  padding-left : 8px;
  border-top   : 1px solid var(--c-border);
  border-left  : 3px solid var(--detail-color, transparent);
}
.lb-meta-row     { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.lb-meta-row span:first-child { color: var(--c-text-soft); }
.lb-meta-val     { font-weight: 500; text-align: right; color: var(--c-text); }
.lb-desc {
  font-size    : 12px;
  color        : var(--c-text-mid);
  line-height  : 1.6;
  margin-bottom: 10px;
  padding-top  : 10px;
  border-top   : 1px solid var(--c-border);
}
.lb-links   { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--c-border); }
.lb-detail-btn {
  display    : block;
  margin-top : 12px;
  padding    : 10px 16px;
  background : var(--detail-color, var(--c-accent));
  color      : #fff;
  text-align : center;
  border-radius: 6px;
  font-size  : 13px;
  font-weight: 600;
  text-decoration: none;
  transition : opacity .15s;
}
.lb-detail-btn:hover { opacity: .88; }

/* ── MOBILE DETAIL DIALOG ───────────────────────────────────── */
dialog#lb-dialog {
  border        : none;
  border-radius : var(--r-lg);
  padding       : 0;
  width         : min(420px, calc(100vw - 32px));
  max-height    : 85vh;
  overflow-y    : auto;
  background    : var(--c-surface);
  box-shadow    : var(--shadow-lg);
  margin        : auto;
}
dialog#lb-dialog::backdrop { background: rgba(0, 0, 0, .5); }
.lb-close {
  position   : absolute;
  top        : 8px;
  right      : 8px;
  background : none;
  border     : none;
  cursor     : pointer;
  padding    : 4px;
  color      : var(--c-text-soft);
  line-height: 1;
  z-index    : 1;
}
.lb-close:hover { color: var(--c-text); }

/* ── RECORDS ────────────────────────────────────────────── */
.records-outer {
  flex            : 1;
  min-height      : 0;
  overflow        : auto;
  display         : flex;
  flex-direction  : column;
}
.table-wrap { flex: 1; }
table       { width: 100%; border-collapse: collapse; font-size: 11px; table-layout: fixed; }
thead       { position: sticky; top: 0; z-index: 10; }
th {
  padding        : 5px 10px;
  text-align     : left;
  font-weight    : 600;
  font-size      : 10px;
  text-transform : uppercase;
  letter-spacing : .04em;
  color          : var(--c-text-mid);
  border-bottom  : 1px solid var(--c-border);
  background     : var(--c-bg);
  white-space    : nowrap;
  cursor         : pointer;
  user-select    : none;
  overflow       : hidden;
  text-overflow  : ellipsis;
}
th:hover            { background: var(--c-border); }
th .si              { margin-left: 3px; opacity: .35; font-size: 10px; }
th.sorted .si       { opacity: 1; }
td {
  padding        : 5px 10px;
  border-bottom  : 1px solid var(--c-border);
  overflow       : hidden;
  text-overflow  : ellipsis;
  white-space    : nowrap;
  vertical-align : middle;
}
tr:hover:not(.sel):not(.tbl-group-hdr) td { background: var(--c-bg); cursor: pointer; }
tr.sel td             { background: var(--c-info-bg); }
.tbl-group-hidden     { display: none !important; }

/* ── TABLE GROUP HEADERS ──────────────────────────────────── */
.tbl-group-hdr td {
  background    : var(--c-bg);
  border-top    : 1px solid var(--c-border-mid);
  border-bottom : 1px solid var(--c-border);
  padding       : 0;
  cursor        : pointer;
  user-select   : none;
}
.tbl-group-hdr td > * { pointer-events: none; }
.tbl-group-hdr-inner {
  display        : flex;
  align-items    : center;
  gap            : 6px;
  padding        : 5px 10px;
}
.tbl-group-swatch {
  width          : 8px;
  height         : 8px;
  border-radius  : 2px;
  flex-shrink    : 0;
  display        : inline-block;
}
.tbl-group-label {
  font-size      : 10px;
  font-weight    : 600;
  text-transform : uppercase;
  letter-spacing : .06em;
  color          : var(--c-text-mid);
}
.tbl-group-count {
  font-size      : 10px;
  color          : var(--c-text-soft);
  font-weight    : 400;
}
.tbl-group-chevron {
  margin-left    : auto;
  font-size      : 11px;
  color          : var(--c-text-soft);
  transition     : transform 0.15s ease;
}
.tbl-group-hdr.collapsed .tbl-group-chevron { transform: rotate(-90deg); }

/* ── SKELETON LOADING ───────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton-cell {
  border-radius: 3px;
  background   : linear-gradient(90deg, var(--c-border) 25%, var(--c-bg) 50%, var(--c-border) 75%);
  background-size: 800px 100%;
  animation    : shimmer 1.4s infinite linear;
}
.skeleton-cell   { height: 12px; width: 80%; display: block; }
.skeleton-row td { padding: 8px 10px; }

/* ── PAGINATION ─────────────────────────────────────────── */
.pagination {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  padding         : 6px 10px;
  border-top      : 1px solid var(--c-border);
  background      : var(--c-bg);
  font-size       : 11px;
  color           : var(--c-text-mid);
  flex-shrink     : 0;
}
.page-btns { display: flex; align-items: center; gap: 4px; }
.page-btn  {
  padding       : 2px 8px;
  border-radius : var(--r);
  border        : 1px solid var(--c-border);
  background    : var(--c-surface);
  color         : var(--c-text-mid);
  font-size     : 11px;
  cursor        : pointer;
  font-family   : var(--font-body);
}
.page-btn:hover:not(:disabled) { border-color: var(--c-border-mid); color: var(--c-text); }
.page-btn:disabled              { opacity: .4; cursor: not-allowed; }
.page-btn.active                { background: var(--c-text); color: #fff; border-color: var(--c-text); }
.page-info { font-size: 11px; color: var(--c-text-soft); }

/* ── CARDS ──────────────────────────────────────────────── */
.cards-grid {
  display               : grid;
  grid-template-columns : repeat(auto-fill, minmax(200px, 1fr));
  gap                   : 10px;
  padding               : 12px;
  align-content         : start;
}
.card {
  background    : var(--c-surface);
  border        : 1px solid var(--c-border);
  border-radius : var(--r-lg);
  overflow      : hidden;
  cursor        : pointer;
  box-shadow    : var(--shadow-sm);
  transition    : box-shadow .15s, border-color .15s, transform .1s;
}
.card:hover                { box-shadow: var(--shadow-md); border-color: var(--c-border-mid); transform: translateY(-1px); }
.card.sel                  { border-color: var(--c-info-border); box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.card-img-placeholder {
  width           : 100%;
  height          : 80px;
  background      : linear-gradient(135deg, var(--c-bg) 0%, var(--c-border) 100%);
  display         : flex;
  align-items     : center;
  justify-content : center;
  color           : var(--c-text-soft);
  font-size       : 11px;
  font-style      : italic;
}
.card-img     { width: 100%; height: 80px; object-fit: cover; display: block; }
.card-body    { padding: 9px 11px 10px; }
.card-name    { font-family: var(--font-display); font-size: 12px; font-weight: 700; line-height: 1.3; margin-bottom: 5px; }
.card-name a  { color: var(--c-text); text-decoration: none; }
.card-name a:hover { text-decoration: underline; }
.card-tags    { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.card-meta    { display: flex; flex-direction: column; gap: 3px; }
.card-meta-row{ display: flex; justify-content: space-between; font-size: 10px; color: var(--c-text-mid); gap: 6px; }
.card-meta-val{ color: var(--c-text); font-weight: 500; text-align: right; }
.card-desc    { font-size: 10px; color: var(--c-text-mid); margin-top: 5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-links   { display: flex; gap: 6px; margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--c-border); flex-wrap: wrap; }
.card-link    { font-size: 10px; color: var(--c-text-mid); text-decoration: none; display: flex; align-items: center; gap: 3px; }
.card-link:hover { color: var(--c-text); }

/* ── CARDS GROUP HEADERS ────────────────────────────────────── */
.cards-group-hidden { display: none !important; }
.cards-group-hdr {
  grid-column   : 1 / -1;
  background    : var(--c-bg);
  border        : 1px solid var(--c-border);
  border-radius : var(--r-md);
  cursor        : pointer;
  user-select   : none;
}
.cards-group-hdr > * { pointer-events: none; }
.cards-group-hdr.collapsed .tbl-group-chevron { transform: rotate(-90deg); }

/* ── SHARED PILLS ───────────────────────────────────────── */
.tag-pill {
  font-size     : 10px;
  padding       : 2px 7px;
  border-radius : 10px;
  font-weight   : 500;
  color         : #fff;
  white-space   : nowrap;
  display       : inline-block;
}
.item-link       { color: var(--c-text); text-decoration: none; font-weight: 500; }
.item-link:hover { text-decoration: underline; }

/* ── BUTTONS ────────────────────────────────────────────── */
.btn {
  display       : inline-flex;
  align-items   : center;
  gap           : 4px;
  font-size     : 11px;
  padding       : 3px 9px;
  border-radius : var(--r);
  border        : 1px solid var(--c-border);
  background    : var(--c-surface);
  color         : var(--c-text-mid);
  cursor        : pointer;
  font-family   : var(--font-body);
  white-space   : nowrap;
  line-height   : 1;
}
.btn:hover  { background: var(--c-bg); }
.btn.active { background: var(--c-text); color: #fff; border-color: var(--c-text); }
.btn-details { border-color: var(--detail-color, #3B82F6); color: var(--detail-color, #3B82F6); }
.btn-details:hover { background: var(--detail-color, #3B82F6); color: #fff; }
.btn-details-label {
  display       : inline-block;
  max-width     : 110px;
  overflow      : hidden;
  text-overflow : ellipsis;
  white-space   : nowrap;
  vertical-align: bottom;
}
/* Floating alone at the bottom of the screen, the FAB has room for a longer name. */
.btn-details-fab .btn-details-label { max-width: 200px; }
@keyframes btn-details-pulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(59, 130, 246, .55); }
  30%  { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}
.btn-details.pulse { animation: btn-details-pulse .5s ease-out; }

.view-toggle          { display: flex; border: 1px solid var(--c-border); border-radius: var(--r); overflow: hidden; }
.view-btn             { display: flex; align-items: center; gap: 4px; padding: 3px 9px; font-size: 11px; font-family: var(--font-body); background: transparent; border: none; color: var(--c-text-mid); cursor: pointer; white-space: nowrap; }
.view-btn:first-child { border-right: 1px solid var(--c-border); }
.view-btn:hover       { background: var(--c-bg); }
.view-btn.active      { background: var(--c-text); color: #fff; }
.tbl-group-select     { padding: 3px 6px; font-size: 11px; font-family: var(--font-body); background: transparent; border: none; border-left: 1px solid var(--c-border); color: var(--c-text-mid); cursor: pointer; outline: none; }
.tbl-group-select:hover  { background: var(--c-bg); }
.tbl-group-select.active { background: var(--c-text); color: #fff; }

.tile-select {
  font-size     : 11px;
  padding       : 3px 6px;
  border        : 1px solid var(--c-border);
  border-radius : var(--r);
  background    : var(--c-surface);
  color         : var(--c-text);
  font-family   : var(--font-body);
  cursor        : pointer;
}

/* ── HIGHLIGHT ──────────────────────────────────────────── */
mark { background: #FEF9C3; color: inherit; border-radius: 2px; padding: 0 1px; }

/* ── TIMELINE ITEM LABEL FIXES ──────────────────────────── */
/* Min width: keeps short-duration trips visible at wide zoom levels.
   Value comes from CONFIG.timeline.itemMinWidth via CSS custom property.
   height (not just min-height) is explicit here so both
   CONFIG.timeline.rangeLabelPosition modes below render an identical bar
   size — an 'inside' label sits in normal flow and would otherwise grow the
   box taller via its own line-height/padding, while a 'trailing' label is
   taken out of flow (position:absolute) and contributes nothing to
   auto-height, so without a fixed height the two modes visibly disagree on
   how tall a bar is. This also gives vis-timeline's own
   .vis-item-overflow{height:100%} (its stock CSS) a *definite* height to
   resolve against — with only min-height that chain stays "auto", which
   breaks any percentage/positioning math done against it (see 'trailing'
   below). */
.vis-item.vis-range { min-width: var(--tl-item-min-width, 30px); height: 16px !important; overflow: visible; }
/* Allow range item labels to extend beyond the bar, matching point item behaviour */
#timeline-detail .vis-item.vis-range .vis-item-overflow { overflow: visible !important; }
/* vis-timeline JS sets inline width on .vis-item-content equal to the bar pixel width,
   which clips labels on narrow bars even when overflow is visible on the parent.
   display/align-items/height center the label vertically within the now-fixed-height
   bar (mirroring the point-item flex layout below) — !important throughout because
   vis-timeline's own JS sets several inline styles directly on this same element
   (marginLeft, marginRight, maxWidth, transform, for its "keep the label visible
   while the bar is panned partway offscreen" behaviour), and an inline style beats
   a plain stylesheet rule of any specificity.
   color is forced dark (matching the point-item label below, not
   tlItemStyle()'s white-for-contrast-against-the-bar default) because an
   'inside' label wider than its bar spills past the bar's edge onto the page
   background (that's the whole reason width is forced to max-content here),
   where white text is invisible in light theme; var(--c-text) keeps it legible
   in both themes and both CONFIG.timeline.rangeLabelPosition modes — a
   'trailing' label is *always* on the page background, never the bar's own
   fill, so it needs exactly the same treatment. */
#timeline-detail .vis-item.vis-range .vis-item-content {
  width      : max-content !important;
  max-width  : none !important;
  height     : 100% !important;
  display    : flex !important;
  align-items: center !important;
  color      : var(--c-text) !important;
}

/* CONFIG.timeline.rangeLabelPosition: 'trailing' — bar keeps its own
   true-duration fill untouched (tlItemStyle()'s background/border are on
   the .vis-item element itself, never touched here); the label moves to
   just past the bar's right edge instead of sitting inside it. Toggled by
   the .tl-range-label-trailing class initTimeline() puts on #timeline-detail
   (see simexdb.js) — tlItemContentHTML()'s markup is identical to 'inside',
   only this positioning differs.
   Centered via top/bottom:0 + the shared height/display/align-items above,
   NOT top:50%+transform:translateY(-50%) — vis-timeline's own JS sets an
   inline transform on this same element (see the comment above), and
   reusing transform for centering would either lose that fight outright, or
   (with !important) permanently pin the label in place and silently break
   vis-timeline's pan-follow behaviour. Avoiding transform for centering
   sidesteps the conflict entirely. */
#timeline-detail.tl-range-label-trailing .vis-item.vis-range .vis-item-content {
  position   : absolute !important;
  left       : 100% !important;
  top        : 0 !important;
  bottom     : 0 !important;
  margin-left: 4px !important;
  padding    : 0 !important; /* the shared rule's 1px/4px padding would stack with margin-left above, doubling the gap */
  white-space: nowrap;
}

/* Allow item content to be visible even when bar is narrow. padding needs
   !important — vis-timeline's own stylesheet (loaded after this one, see
   index.html) declares the same selector at equal specificity, so without it
   the library's stock 5px padding silently wins and items render ~10px
   taller than intended. */
.vis-item .vis-item-content {
  white-space   : nowrap;
  overflow      : visible !important;
  padding       : 1px 4px !important;
  font-size     : 10px;
  line-height   : 1.4;
  pointer-events: none;
}

/* Detail band's point items (records with no duration, plus ranged records
   collapsed to points by CONFIG.timeline.minBarPx) render as TWO elements —
   the outer .vis-point (carries our per-record color via tlItemStyle()) plus
   an inner .vis-dot vis-timeline draws itself and never themes, always its own
   stock blue. Hide that dot — we draw our own record-colored dot inside
   .vis-item-content instead (tlItemContentHTML() in simexdb.js). */
#timeline-detail .vis-item.vis-dot { display: none !important; }

/* Point items in the detail band render as "● label" — a small record-colored
   dot with the label beside it — so a record with no duration (and a ranged
   record collapsed to a point by CONFIG.timeline.minBarPx) reads as a marker
   at its date, visibly distinct from a range bar whose width carries meaning.
   The dot is an empty leading <span> from tlItemContentHTML(); the filled-chip
   look tlItemStyle() would give the .vis-point element is stripped here (that
   fill is reserved for bars). The dot's color comes from the --tl-dot-color
   custom property tlItemStyle() sets on the item (an inline style/class on the
   span itself would be eaten by vis-timeline's content sanitizer). */
#timeline-detail .vis-item.vis-point {
  background   : transparent !important;
  border-color : transparent !important;
  color        : var(--c-text) !important;
}
#timeline-detail .vis-item.vis-point .vis-item-content {
  display     : flex;
  align-items : center;
  gap         : 4px;
}
#timeline-detail .vis-item.vis-point .vis-item-content > span:first-child {
  flex          : none;
  width         : 7px;
  height        : 7px;
  border-radius : 50%;
  background    : var(--tl-dot-color, currentColor);
}
/* Viewport filter active indicator — timeline and map */
#panel-timeline.viewport-filtering,
#panel-map.viewport-filtering { border-left: 3px solid var(--c-warning-border); }

/* ── SELECTED ITEM — DETAIL BAND ───────────────────────────── */
#timeline-detail .vis-item.vis-selected {
  box-shadow     : 0 0 0 2px #fff, 0 0 0 4px rgba(0, 0, 0, 0.55);
  filter         : brightness(1.2);
  border-width   : 2px;
  text-transform : uppercase;
  z-index        : 10 !important;
}

/* Ensure items have enough height to show text */
.vis-item {
  min-height : 16px !important;
  font-size  : 10px;
  transition : none !important;
}
/* clickToUse overlay — dashed border when timeline is inactive, disappears once activated */
.vis-timeline:not(.vis-active) .vis-overlay {
  outline        : 2px dashed var(--c-tl-overlay);
  outline-offset : -4px;
  cursor         : pointer;
}

/* ── DUAL-BAND TIMELINE ─────────────────────────────────── */
.tl-band {
  width      : 100%;
  flex-shrink: 0;
  overflow   : hidden !important;
}
/* Overview band — fixed short height, acts as scrubber */
.tl-band-overview {
  min-height    : 40px;
  border-top    : 1px solid var(--c-border);
  background    : var(--c-bg);
  cursor        : ew-resize;
}

/* Overview items — render as colored dots, no labels. Stacked (one row per
   overlapping trip) so height grows with the timeline's own stack layout —
   see .tl-band-overview min-height / maxHeight in initTimeline(). */
#timeline-overview .vis-item {
  width         : var(--bin-size, 5px) !important;
  height        : var(--bin-size, 5px) !important;
  border-radius : 50%    !important;
  min-height    : 5px    !important;
  border-width  : 0      !important;
  padding       : 0      !important;
  opacity       : 0.75;
  transition    : opacity .15s, transform .15s;
}
#timeline-overview .vis-item:hover {
  opacity   : 1;
  transform : scale(1.4);
}
#timeline-overview .vis-item.vis-selected {
  opacity   : 1;
  transform : scale(1.6);
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px currentColor;
}
#timeline-overview .vis-item .vis-item-content { display: none !important; }
#timeline-overview .vis-item .vis-item-overflow{ display: none !important; }

/* vis-timeline's PointItem renders TWO elements per point: the outer .vis-point
   container (which carries our per-record color via inline style, set in
   buildTimeline()) and an inner .vis-dot child (which only ever gets vis-timeline's
   default un-colored styling). Both match the .vis-item rule above and render as
   overlapping 5px circles — most visible on selection, where vis-timeline's own
   .vis-selected CSS turns the dot bright yellow next to our correctly-colored,
   ringed point. Hide the redundant dot so only the colored point shows. */
#timeline-overview .vis-item.vis-dot { display: none !important; }

/* Hide group labels in overview — not enough height */
#timeline-overview .vis-labelset { display: none !important; }
#timeline-overview .vis-panel.vis-left { display: none !important; }

/* Viewport highlight window in overview */
.tl-overview-window {
  position        : absolute;
  top             : 0;
  bottom          : 0;
  background      : rgba(53, 120, 181, 0.10);
  border-left     : 1px solid rgba(53, 120, 181, 0.35);
  border-right    : 1px solid rgba(53, 120, 181, 0.35);
  pointer-events  : none;
  z-index         : 1;
  transition      : left .1s, width .1s;
}

/* ── RULER BANDS (CONFIG.timeline.bands) ───────────────────
   Additional fixed-scale bands stacked below the overview, each showing a
   "padded" window centered on the detail band's current midpoint. Omitted
   when CONFIG.timeline.bands is unconfigured — see docs/engine.md →
   "Ruler bands" for the full design rationale and limitations. */
.tl-band-row {
  position: relative;
}
.tl-band-ruler {
  border-top   : 1px solid var(--c-border);
  background   : var(--c-bg);
  cursor       : ew-resize;
  touch-action : pan-y;
}
/* Items render as thin ticks, not labeled bars — labels/left axis would
   crowd out a ~54px-tall band; the ruler is a navigation aid, not a reader. */
.tl-band-ruler .vis-item {
  cursor     : pointer;
  min-height : 12px !important;
  height     : 12px !important;
  min-width  : 4px  !important;
}
.tl-band-ruler .vis-item .vis-item-content { display: none !important; }
.tl-band-ruler .vis-labelset,
.tl-band-ruler .vis-panel.vis-left { display: none !important; }
/* Overlay label lives inside .tl-band-row (a descendant of nothing vis-timeline
   observes) so it never risks tripping the MutationObserver redraw-loop guard
   that watches the timeline container itself. */
.tl-band-label {
  position       : absolute;
  left           : 6px;
  top            : 2px;
  z-index        : 2;
  pointer-events : none;
  font-size      : 9.5px;
  text-transform : uppercase;
  letter-spacing : .05em;
  color          : var(--c-text-soft);
}
@media (max-width: 899px) {
  .tl-band-row[data-hide-mobile="true"] { display: none; }
}

/* Cluster items in detail band */
.vis-cluster {
  background    : var(--c-bg) !important;
  border        : 1.5px solid var(--c-border-mid) !important;
  border-radius : 10px !important;
  color         : var(--c-text-mid) !important;
  font-size     : 10px !important;
  font-weight   : 600 !important;
  padding       : 1px 6px !important;
}

/* Detail band focus outline */
#timeline-detail:focus {
  outline        : 2px solid var(--c-info-border);
  outline-offset : -2px;
}

/* ── PER-FACET CLEAR BUTTON ─────────────────────────────── */
.facet-hd {
  /* Override the existing rule to allow right side flex    */
  justify-content : space-between;
}
.facet-hd-right {
  display     : flex;
  align-items : center;
  gap         : 4px;
  flex-shrink : 0;
}
/* Active count — amber tint when selections are present    */
.facet-hd-count--active {
  background    : var(--c-warning-bg);
  color         : var(--c-warning-text);
  border        : 1px solid var(--c-warning-border);
  border-radius : 10px;
  padding       : 0 5px;
  font-weight   : 600;
}
/* ✕ clear button — only appears when facet has selections  */
.facet-clear-btn {
  display         : flex;
  align-items     : center;
  justify-content : center;
  width           : 16px;
  height          : 16px;
  border-radius   : 3px;
  border          : 1px solid var(--c-warning-border);
  background      : var(--c-warning-bg);
  color           : var(--c-warning-text);
  cursor          : pointer;
  padding         : 0;
  font-size       : 10px;
  line-height     : 1;
  flex-shrink     : 0;
  transition      : background .12s, border-color .12s;
}
.facet-clear-btn:hover {
  background   : var(--c-warning-border);
  border-color : #F59E0B;
}

/* ── LEGEND — per-component horizontal strips ────────────── */

.legend-bar {
  display        : flex;
  flex-wrap      : wrap;
  gap            : 6px 16px;
  align-items    : center;
  padding        : 6px 12px;
}
#map-legend-bar {
  border-top     : 1px solid var(--c-border);
}
#tl-legend-bar {
  border-bottom  : 1px solid var(--c-border);
}
.leg-entry {
  display        : flex;
  align-items    : center;
  gap            : 5px;
}
.leg-swatch-h {
  width          : 10px;
  height         : 10px;
  border-radius  : 2px;
  flex-shrink    : 0;
  display        : inline-block;
}
.leg-label {
  font-size      : 11px;
  color          : var(--c-text);
  font-weight    : 500;
}
.leg-sub {
  display        : flex;
  align-items    : center;
  gap            : 2px;
  margin-left    : 2px;
}
.leg-sub-swatch {
  width          : 8px;
  height         : 8px;
  border-radius  : 50%;
  display        : inline-block;
  flex-shrink    : 0;
}

/* ── INLINE DETAIL PANE ─────────────────────────────────── */
#detail-pane {
  flex          : 1;
  min-height    : 0;
  display       : flex;
  flex-direction: column;
  overflow      : hidden;
}
.dp-toolbar {
  padding      : 6px 10px;
  border-bottom: 1px solid var(--c-border);
  background   : var(--c-bg);
  flex-shrink  : 0;
}
#dp-body {
  flex    : 1;
  overflow: auto;
}
#dp-body .lb-wrap { border-radius: 0; }

/* ── MOBILE DRAWER ──────────────────────────────────────── */

/* Backdrop behind the open drawer — JS adds .visible */
#drawer-backdrop {
  display    : none;
  position   : fixed;
  inset      : 0;
  background : rgba(0, 0, 0, 0.35);
  z-index    : 1150;
}
#drawer-backdrop.visible { display: block; }

/* Mobile-only elements hidden on desktop by default */
.btn-filter-mobile { display: none; }
.sidebar-close-btn { display: none; }

/* Active filter count badge on the Filters button */
.filter-badge {
  background    : var(--c-warning-bg);
  color         : var(--c-warning-text);
  border        : 1px solid var(--c-warning-border);
  border-radius : 10px;
  font-size     : 10px;
  font-weight   : 600;
  padding       : 0 5px;
  margin-left   : 4px;
  line-height   : 1.6;
  display       : none;
}

/* ── RESPONSIVE LAYOUT ──────────────────────────────────── */

/* Desktop ≥900px: 2-column master-detail layout.
   .col-left  — content-height flex column (map + legend + timeline stack naturally).
   .col-right — sticky viewport-height panel (records scroll internally). */
@media (min-width: 900px) {
  /* Switch .layout from grid to flex — eliminates grid-row height inflation from sidebar */
  .layout {
    display        : flex;
    flex-direction : row;
    align-items    : flex-start;
    padding-top    : 8px;
  }
  .sidebar {
    flex-shrink    : 0;
    width          : 214px;
  }
  #main-panels {
    display        : flex !important;
    flex-direction : row;
    align-items    : flex-start;
    flex           : 1;
    gap            : 10px;
    padding        : 0 10px 8px;
  }
  .col-left {
    flex           : 1;
    display        : flex;
    flex-direction : column;
    gap            : 8px;
    min-width      : 0;
  }
  .col-right {
    flex           : 1;
    position       : sticky;
    top            : 56px;
    align-self     : flex-start;
    display        : flex;
    flex-direction : column;
    overflow       : visible;
    min-width      : 0;
  }
  /* Map panel needs an explicit height (no grid row to provide it anymore) */
  #panel-map {
    height     : 380px;
    flex-shrink: 0;
  }
  /* overflow-x:hidden contains item label blowout on width. No vertical cap needed —
     detail and overview bands each self-limit height via their own minHeight/maxHeight
     (see initTimeline()); a second cap here just clips the overview band once both
     bands grow toward their maxes. */
  #panel-timeline { overflow-x: hidden; }
  /* Records panel: content-height, no stretching */
  #panel-records {
    border-bottom: none;
    overflow     : visible;
  }
  /* records-outer, table, cards all size to content so pagination follows immediately */
  .records-outer { flex: none; overflow: visible; }
  .table-wrap    { flex: none; }
  .cards-grid    { flex: none; }
}

/* Mobile <900px: single-column stacked, sidebar becomes a slide-in drawer. */
@media (max-width: 899px) {
  .layout   { display: block; min-width: 0; overflow-x: hidden; }
  /* Flex column so col-left/col-right stack naturally */
  #main-panels { display: flex !important; flex-direction: column; gap: 8px; padding: 8px; }
  /* Unwrap the desktop column wrappers — panels become direct flex items */
  .col-left, .col-right { display: contents; }
  /* Restore map height (desktop rule doesn't apply here) */
  #panel-map { height: 300px; flex-shrink: 0; }

  /* Topbar: wrap instead of clipping/overflowing once the Details label grows */
  .topbar-right { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }

  /* Component headers: icon-only controls on mobile. The .panel-hd-right
     buttons keep their icons; their text labels (wrapped in .view-btn-label)
     are hidden so the header stays on one 30px row without clipping. Each
     button carries a title/aria-label for its accessible name. The left-side
     panel labels (Map / Timeline / Items) are deliberately left as text. */
  .panel-hd .view-btn-label { display: none; }

  /* Records table: scroll horizontally instead of squeezing columns unreadably thin.
     table-layout:auto lets a column grow past its configured % width when its own
     content needs more room (long names, multi-value lists) instead of clipping it —
     the % widths still act as a floor, min-width is just a floor for all-short-value tables. */
  .table-wrap    { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #records-table { min-width: 640px; table-layout: auto; }

  /* Detail pane meta rows: stack label above value instead of squeezing them together */
  .lb-meta-row {
    flex-direction: column;
    align-items   : flex-start;
    gap           : 2px;
  }
  .lb-meta-val { text-align: left; }

  /* Details button, bottom-anchored variant (CONFIG.display.recordDetailsButtonPlacement) —
     thumb-reach placement instead of/alongside the topbar button. */
  .btn-details-fab {
    position   : fixed;
    right      : 16px;
    bottom     : calc(16px + env(safe-area-inset-bottom, 0px));
    z-index    : 1090;
    padding    : 9px 16px;
    font-size  : 13px;
    border-radius: 999px;
    background : var(--c-surface);
    box-shadow : var(--shadow-lg);
  }

  /* Sidebar: fixed off-screen left; slides in when JS adds .drawer-open */
  .sidebar {
    position     : fixed;
    top          : 0;
    left         : -270px;
    width        : 254px;
    height       : 100%;
    z-index      : 1200;
    background   : var(--c-surface);
    border-right : 1px solid var(--c-border);
    overflow-y   : auto;
    transition   : left 0.25s ease;
    box-shadow   : var(--shadow-md);
  }
  .sidebar.drawer-open { left: 0; }

  /* Show mobile-only elements */
  .btn-filter-mobile { display: flex; }
  .sidebar-close-btn {
    display         : flex;
    align-items     : center;
    justify-content : flex-end;
    gap             : 6px;
    width           : 100%;
    padding         : 10px 12px;
    border          : none;
    border-bottom   : 1px solid var(--c-border);
    background      : none;
    cursor          : pointer;
    color           : var(--c-text-mid);
    font-size       : 13px;
    box-sizing      : border-box;
  }
}

/* ── DARK MODE ──────────────────────────────────────────────
   Activated by data-theme="dark" on <html>.
   The 11ty project sets this via its own themeToggle — no
   extra wiring needed when embedded. The standalone index.html
   uses Dashboard.toggleTheme() + #btn-theme-toggle.
   ────────────────────────────────────────────────────────── */
:root          { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

[data-theme="dark"] {
  --c-bg         : #1C1917;
  --c-surface    : #28251F;
  --c-border     : #3C3834;
  --c-border-mid : #524E48;
  --c-text       : #EDE8E1;
  --c-text-mid   : #C0B8B0;
  --c-text-soft  : #B0A8A0;
  --c-accent     : #EDE8E1;
  --c-info-bg    : #1A2840;
  --c-info-border: #2C4A72;

  --shadow-sm    : 0 1px 3px rgba(0,0,0,.35);
  --shadow-md    : 0 4px 12px rgba(0,0,0,.50);
  --shadow-lg    : 0 8px 24px rgba(0,0,0,.70);

  /* Amber — warning / active-filter tint (inverted for dark bg) */
  --c-warning-bg    : #3D1F00;
  --c-warning-border: #92400E;
  --c-warning-text  : #FDE68A;

  /* Timeline inactive-overlay — slightly lighter against dark bg */
  --c-tl-overlay    : rgba(100, 120, 180, 0.30);
}

/* Feed status badges */
[data-theme="dark"] .feed-badge.live   { border-color:#166534; color:#4ADE80; background:#052E16; }
[data-theme="dark"] .feed-badge.sample { border-color:var(--c-warning-border); color:var(--c-warning-text); background:var(--c-warning-bg); }
[data-theme="dark"] .feed-badge.error  { border-color:#7F1D1D; color:#FCA5A5; background:#1C0606; }

/* Search highlight */
[data-theme="dark"] mark { background: #78350F; color: #FEF9C3; }

/* Details button */
[data-theme="dark"] .btn-details       { border-color: var(--detail-color, #1D4ED8); color: var(--detail-color, #60A5FA); }
[data-theme="dark"] .btn-details:hover { background: var(--detail-color, #1D4ED8); color: #fff; }

/* Card selected ring */
[data-theme="dark"] .card.sel { border-color:#1E3A5F; box-shadow: 0 0 0 3px rgba(59,130,246,.20); }

/* Table row selected */
[data-theme="dark"] tr.sel td { background: var(--c-info-bg); }

/* Overview viewport window — more visible on dark bg */
[data-theme="dark"] .tl-overview-window {
  background   : rgba(53, 120, 181, 0.18);
  border-color : rgba(53, 120, 181, 0.55);
}

/* vis-timeline — override hardcoded light backgrounds */
[data-theme="dark"] .vis-timeline,
[data-theme="dark"] .vis-panel.vis-background,
[data-theme="dark"] .vis-panel.vis-center  { background: var(--c-surface) !important; }
[data-theme="dark"] .vis-panel.vis-top,
[data-theme="dark"] .vis-panel.vis-bottom  { background: var(--c-bg) !important; }
[data-theme="dark"] .vis-current-time      { background: #F87171 !important; }
[data-theme="dark"] .tl-band-overview      { background: var(--c-bg); }

/* Vis-cluster dark */
[data-theme="dark"] .vis-cluster {
  background : var(--c-surface) !important;
  border-color: var(--c-border-mid) !important;
  color      : var(--c-text-mid) !important;
}

/* Timeline detail focus ring */
[data-theme="dark"] #timeline-detail:focus { outline-color: var(--c-info-border); }

/* Selected item ring — softer against dark bg */
[data-theme="dark"] #timeline-detail .vis-item.vis-selected {
  box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 4px rgba(255,255,255,.30);
}

/* Leaflet tooltip — overrides Leaflet's hardcoded white bg; also covers Google Maps
   tooltip which reuses .leaflet-tooltip class for consistent styling */
[data-theme="dark"] .leaflet-tooltip {
  background-color : var(--c-surface) !important;
  border-color     : var(--c-border) !important;
  color            : var(--c-text) !important;
}
[data-theme="dark"] .leaflet-tooltip-top::before    { border-top-color:    var(--c-border) !important; }
[data-theme="dark"] .leaflet-tooltip-bottom::before { border-bottom-color: var(--c-border) !important; }
[data-theme="dark"] .leaflet-tooltip-left::before   { border-left-color:   var(--c-border) !important; }
[data-theme="dark"] .leaflet-tooltip-right::before  { border-right-color:  var(--c-border) !important; }

/* Leaflet controls */
[data-theme="dark"] .leaflet-bar a,
[data-theme="dark"] .leaflet-control-zoom a {
  background-color : var(--c-surface) !important;
  border-color     : var(--c-border) !important;
  color            : var(--c-text) !important;
}
[data-theme="dark"] .leaflet-bar a:hover { background-color: var(--c-bg) !important; }
[data-theme="dark"] .leaflet-control-attribution {
  background : rgba(28, 25, 23, 0.80) !important;
  color      : var(--c-text-soft) !important;
}
[data-theme="dark"] .leaflet-control-attribution a { color: var(--c-text-mid) !important; }

/* Theme toggle icons — moon shown in light mode, sun shown in dark mode */
.theme-icon-sun                       { display: none; }
[data-theme="dark"] .theme-icon-moon  { display: none; }
[data-theme="dark"] .theme-icon-sun   { display: inline-block; }