/* Explorer page styles — extracted from the inline <style> block in app/templates/explorer.html
   (2026-08-07 CSS reorg; verbatim move, no rule changes). Page-scoped, not shared with
   Sandbox/Workbench — see site.css for cross-page rules. */

body { font-size: 1rem; }

/* ── Layout ── */
#ex-left  { position: sticky; top: 1rem; overflow-y: auto; max-height: calc(100vh - 5rem); }
#ex-right { display: flex; flex-direction: column; }

/* ── Placeholder borders (remove once filled in) ── */
.ex-placeholder {
  border: 1px dashed #bbb;
  border-radius: 4px;
  color: #aaa;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Tabs ── */
#ex-tabs .nav-link { font-size: 1rem; padding: 0.3rem 0.9rem; }
#ex-tabs .nav-link.disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
/* Active pane fills the flex container; inactive panes get display:none from Bootstrap */
.tab-pane.show.active { flex: 1; display: flex !important; flex-direction: column; }

/* ── Control strip ── */
#ex-controls { font-size: 0.85rem; background: #f8f9fa; border-bottom: 1px solid #dee2e6; padding: 0.35rem 0.6rem; flex-wrap: wrap; gap: 0.4rem; }

/* ── Variable header strip ── */
#ex-var-header {
  font-size: 0.8rem;
  background: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
  padding: 0.3rem 0.6rem;
  min-height: 2rem;
}

/* ── Map ── */
#ex-map { flex: 1; min-height: 420px; }

/* ── Histogram strip ── */
#ex-histogram { height: 110px; border-top: 1px solid #dee2e6; }

/* ── Regions grid ── */
#ex-regions-grid {
  flex: 1; display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px; padding: 6px;
  min-height: 0;
}
.ex-rmap-panel {
  border: 1px solid #dee2e6; border-radius: 4px;
  overflow: hidden; display: flex; flex-direction: column;
}
.ex-rmap-label {
  font-size: 0.72rem; font-weight: 600; color: #444;
  padding: 2px 6px; background: rgba(255,255,255,0.92);
  border-bottom: 1px solid #eee; white-space: nowrap;
}
.ex-rmap-container { flex: 1; min-height: 200px; }
/* ── Regions legend strip ── */
#ex-regions-legend { height: 68px; border-top: 1px solid #dee2e6; padding: 2px 6px; }

/* ── eVolv2k panel (replaces map+histogram for evolv2k variables) ── */
#ex-evolv-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#ex-evolv-chart {
  height: 260px;
  border-bottom: 1px solid #dee2e6;
  padding: 0.4rem 0.6rem 0.2rem;
}
#ex-evolv-table-wrap {
  flex: 1;
  overflow-y: auto;
  padding: 0 0.4rem;
}
#ex-evolv-table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
#ex-evolv-table-wrap th { position: sticky; top: 0; background: #f8f9fa; border-bottom: 1px solid #dee2e6; padding: 0.2rem 0.4rem; font-size: 0.72rem; cursor: pointer; user-select: none; }
#ex-evolv-table-wrap th:hover { background: #e9ecef; }
#ex-evolv-table-wrap td { padding: 0.15rem 0.4rem; border-bottom: 1px solid #f0f0f0; vertical-align: top; }
#ex-evolv-table-wrap tr:hover td { background: #f5f8ff; }
.evolv-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 3px; vertical-align: middle; }

/* ── Left column: search / filters ── */
#ex-search-box { font-size: 0.85rem; }
#ex-status-filter .btn { font-size: 0.8rem; padding: 0.2rem 0.5rem; }
#ex-class-filter select { font-size: 0.8rem; }

/* ── Accordion: bands ── */
#ex-accordion .accordion-button {
  font-size: 0.8rem; padding: 0.35rem 0.6rem;
  background: #f0f4f8;
}
#ex-accordion .accordion-button:not(.collapsed) {
  background: #dce8f5; color: #1a3a5c; box-shadow: none;
}
#ex-accordion .accordion-button::after { margin-left: 0.4rem; }
#ex-accordion .accordion-body { padding: 0.25rem 0.4rem; }

/* ── Dimensions (details/summary) ── */
.ex-dim { margin-bottom: 0.15rem; }
.ex-dim > summary {
  cursor: pointer; list-style: none;
  font-size: 0.75rem; font-weight: 600; text-transform: capitalize;
  color: #555; padding: 0.2rem 0.4rem;
  border-radius: 3px; user-select: none;
}
.ex-dim > summary::-webkit-details-marker { display: none; }
.ex-dim > summary::before {
  content: "▶ "; font-size: 0.6rem; color: #aaa;
}
.ex-dim[open] > summary::before { content: "▼ "; }
.ex-dim > summary:hover { background: #eef; }

/* ── Variable items ── */
.ex-var-item {
  font-size: 0.78rem; padding: 0.18rem 0.5rem 0.18rem 1rem;
  cursor: pointer; border-radius: 3px; line-height: 1.4;
}
.ex-var-item:hover { background: #e8f0fe; }
.ex-var-item.selected { background: #c8dcfa; font-weight: 600; }
.ex-var-item.no-data {
  color: #bbb; cursor: default; font-style: italic;
}
.ex-var-item.no-data:hover { background: transparent; }
.ex-var-item.preview { color: #777; }
.ex-var-tag { font-size: 0.7rem; color: #888; }
.ex-var-tag.preview-tag { color: #c87000; }

/* ── Compare pane ── */
#ex-pane-compare { display: flex; flex-direction: column; }
#ex-compare-controls { font-size: 0.85rem; background: #f8f9fa; border-bottom: 1px solid #dee2e6; padding: 0.35rem 0.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; flex-shrink: 0; }
#ex-compare-controls .btn { font-size: 0.75rem; padding: 0.18rem 0.5rem; }
#ex-scatter-wrap { flex: 1; position: relative; min-height: 350px; }
#ex-scatter-canvas { display: block; }
#ex-scatter-callout { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); max-width: 320px; text-align: center; background: rgba(255,255,255,0.93); border: 1px solid #ccc; border-radius: 5px; padding: 0.4rem 0.7rem; font-size: 0.78rem; line-height: 1.45; box-shadow: 0 1px 4px rgba(0,0,0,0.12); display: none; pointer-events: none; }
#ex-scatter-callout .callout-region { font-weight: 700; }
#ex-scatter-callout .callout-r { font-family: monospace; font-size: 0.82rem; }
#ex-spearman-strip { height: 42px; border-top: 1px solid #dee2e6; padding: 0 0.6rem; display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; overflow-x: auto; flex-shrink: 0; }
.ex-region-pill { border-radius: 3px; padding: 0.15rem 0.45rem; font-size: 0.72rem; color: #fff; white-space: nowrap; cursor: pointer; transition: box-shadow 0.1s; }
.ex-region-pill:hover { opacity: 0.85; }
.ex-region-pill.selected { box-shadow: 0 0 0 2.5px #fff, 0 0 0 4px #333; }