/* ============================================================
   ATTENTION ATLAS — prototype stylesheet
   Aesthetic: national-archive reading room. Warm ink, paper
   cream, amber signal, document stamps, mono data type.
   ============================================================ */

:root {
  --ink-0: #0f0d09;        /* page */
  --ink-1: #16130e;        /* panels */
  --ink-2: #1e1a13;        /* raised */
  --ink-3: #2a251b;        /* borders/strong */
  --line: #36302355;
  --paper: #eae2cf;        /* primary text */
  --paper-dim: #b3a98f;
  --paper-faint: #80775f;
  --amber: #e8a33d;
  --amber-deep: #b97e23;
  --teal: #6fae9f;
  --brick: #c75d54;
  --stamp-red: #b5482e;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Newsreader", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --panel-w: 460px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--ink-0);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* the loaded families top out at 600 — browser default 700 would fake-bold */
strong, b { font-weight: 600; }

/* film-grain atmosphere */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 999;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 998;
  background: radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(0,0,0,0.45));
}

a { color: var(--amber); text-decoration-color: #e8a33d55; text-underline-offset: 3px; }
a:hover { color: #f3bf6b; }
button { font-family: var(--font-mono); cursor: pointer; }
::selection { background: var(--amber); color: var(--ink-0); }

/* ---------------- themed scrollbars ----------------
   The timeline's horizontal scrollbar doubles as the scrubber, so it gets
   the amber signal treatment; everything else stays quiet ink-on-ink.
   Standards properties first (Firefox), then WebKit pseudo-elements. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--ink-3) var(--ink-0);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-0); }
::-webkit-scrollbar-corner { background: var(--ink-0); }
::-webkit-scrollbar-thumb {
  background: var(--ink-3);
  border: 2px solid var(--ink-0);   /* inset gutter so the thumb reads as a bar, not a block */
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--paper-faint); }

/* the timeline scrubber bar — amber, slightly taller, clearly interactive */
.timeline-scroll { scrollbar-width: thin; scrollbar-color: var(--amber-deep) var(--ink-1); }
.timeline-scroll::-webkit-scrollbar { height: 14px; width: 10px; }
.timeline-scroll::-webkit-scrollbar-track {
  background: var(--ink-1);
  border-top: 1px solid var(--ink-3);
}
.timeline-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--amber) 0%, var(--amber-deep) 100%);
  border: 3px solid var(--ink-1);
  border-radius: 7px;
  min-width: 48px;
}
.timeline-scroll::-webkit-scrollbar-thumb:hover { background: var(--amber); }

/* quiet thin bars inside panels and the layer list */
.detail-panel { scrollbar-width: thin; scrollbar-color: var(--ink-3) var(--ink-1); }
.detail-panel::-webkit-scrollbar { width: 8px; }
.detail-panel::-webkit-scrollbar-track { background: var(--ink-1); }
.detail-panel::-webkit-scrollbar-thumb { background: var(--ink-3); border: 2px solid var(--ink-1); border-radius: 5px; }
.detail-panel::-webkit-scrollbar-thumb:hover { background: var(--amber-deep); }

.micro {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-faint);
}

/* ---------------- header ---------------- */
header.site {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: baseline; gap: 28px; flex-wrap: wrap;
  padding: 14px 22px 12px;
  background: linear-gradient(var(--ink-0) 75%, #0f0d09ee);
  border-bottom: 1px solid var(--ink-3);
}
.brand { display: flex; align-items: baseline; gap: 12px; text-decoration: none; }
/* brand mark: world circle + timeline + event diamond with attention ring */
.brand-mark { align-self: center; flex: 0 0 auto; }
.brand-mark .mark-atlas, .brand-mark .mark-time { fill: none; stroke: var(--paper-dim); stroke-width: 1.7; }
.brand-mark .mark-ring { fill: none; stroke: var(--amber-deep); stroke-width: 1.5; stroke-dasharray: 2 2.6; }
.brand-mark .mark-event { fill: var(--amber); }
.brand:hover .mark-ring { stroke: var(--amber); }
.brand h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0.01em;
  color: var(--paper);
}
.brand h1 em { color: var(--amber); font-style: normal; }
.brand .micro { color: var(--paper-faint); }
nav.primary { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
nav.primary a {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none;
  color: var(--paper-dim);
  padding: 6px 11px; border: 1px solid transparent; border-radius: 2px;
}
nav.primary a:hover { color: var(--paper); border-color: var(--ink-3); }
nav.primary a.active { color: var(--amber); border-color: var(--amber-deep); background: #e8a33d10; }

/* truth banner — one compact line, dismissible (full rules live under Methodology) */
.truth-note {
  display: flex; align-items: center; gap: 12px;
  padding: 5px 22px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--paper-faint);
  border-bottom: 1px solid var(--line);
  background: var(--ink-1);
}
.truth-note[hidden] { display: none; } /* author display would otherwise defeat the hidden attribute */
.truth-note strong { color: var(--paper-dim); font-weight: 500; }
.truth-note a { color: var(--amber-deep); text-decoration: underline dotted; text-underline-offset: 3px; }
.truth-note a:hover { color: var(--amber); }
.truth-dismiss {
  margin-left: auto;
  background: none; border: none; color: var(--paper-faint);
  font-size: 14px; line-height: 1; padding: 2px 6px; border-radius: 2px; cursor: pointer;
}
.truth-dismiss:hover { color: var(--paper); background: var(--ink-2); }

/* ---------------- app layout ---------------- */
main { min-height: calc(100dvh - 120px); }
/*
 * ALIGNMENT CONTRACT: the sidebar and the timeline share ONE grid.
 * Row 1 (auto) holds the sidebar header and the toolbar — same row, so they
 * always have the same height regardless of toolbar wrapping. Row 2 holds the
 * layer list and the scroll canvas — their tops are therefore always level,
 * and the .layer-ruler-spacer (= ruler 34px + density band 20px) plus equal
 * row heights (46px / 24px off) keep every layer row beside its lane.
 */
.atlas-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "lhead toolbar"
    "llist scroll"
    "legend legend";
  height: calc(100dvh - 118px);
}
/* banner dismissed: hand its ~30px back to the lanes (118 = header + banner) */
body.truth-dismissed .atlas-layout { height: calc(100dvh - 88px); }
.atlas-layout[hidden] { display: none; } /* author display would otherwise defeat the hidden attribute */

/* layers sidebar header (row 1, left) */
.layers-head {
  grid-area: lhead;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: var(--ink-1);
  border-right: 1px solid var(--ink-3);
  border-bottom: 1px solid var(--ink-3);  /* continues the toolbar's bottom rule */
  position: relative; z-index: 6;
  box-shadow: 0 5px 9px -6px #000c;
}
.layers-head h2 { margin: 0; font-family: var(--font-display); font-size: 15px; font-weight: 600; flex: 1; }
.layer-tools { display: flex; gap: 6px; }

/* layer list (row 2, left) — no vertical padding: rows must start at the
   same y as the canvas top */
.layers-list {
  grid-area: llist;
  overflow: hidden;
  background: var(--ink-1);
  border-right: 1px solid var(--ink-3);
  padding: 0 10px 0 14px;
}
/* spacer mirrors the ruler (34px) + density band (20px) so rows align with lanes;
   a quiet dataset-scope line fills the corner without touching its height */
.layer-ruler-spacer {
  box-sizing: border-box; height: 54px;
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 0 6px 8px;
}
.layer-ruler-spacer .micro { font-size: 10px; }
.layer-row {
  display: flex; align-items: center; gap: 9px;
  box-sizing: border-box; height: 46px;        /* must equal .tl-lane height */
  padding: 5px 6px; border-radius: 2px;
  border-bottom: 1px solid var(--line);        /* visual continuation of the lane rule */
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em;
  color: var(--paper-dim); cursor: pointer; user-select: none;
}
.layer-row .layer-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-row.off { height: 24px; opacity: 0.45; } /* must equal .tl-lane.off height */
.layer-row:hover { background: var(--ink-2); color: var(--paper); }
.layer-row input { accent-color: var(--amber); margin: 0; }
.layer-swatch { width: 9px; height: 9px; transform: rotate(45deg); flex: 0 0 9px; }
.layer-count { margin-left: auto; color: var(--paper-faint); font-size: 10px; }
.layer-tools button {
  flex: 1; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  background: none; border: 1px solid var(--ink-3); color: var(--paper-dim);
  padding: 4px 11px; border-radius: 2px;
}
.layer-tools button:hover { color: var(--amber); border-color: var(--amber-deep); }

/* ---------------- timeline ---------------- */
.timeline-toolbar {
  grid-area: toolbar;
  display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap;
  padding: 7px 18px 9px;
  background: var(--ink-1);                 /* raised console strip, continuous with .layers-head */
  border-bottom: 1px solid var(--ink-3);
  position: relative; z-index: 6;           /* casts its shadow over the sticky canvas header */
  box-shadow: 0 5px 9px -6px #000c;
}
/* each control cluster: tiny caption above the control, console-panel style */
.tool-group { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.tool-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--paper-faint);
  padding-left: 1px;
}
/* fused segmented control: the group reads as one widget, not N loose buttons */
.seg { display: inline-flex; border: 1px solid var(--ink-3); border-radius: 3px; }
.seg .tl-btn { border: none; border-left: 1px solid var(--ink-3); border-radius: 0; }
.seg .tl-btn:first-child { border-left: none; border-radius: 2px 0 0 2px; }
.seg .tl-btn:last-child { border-radius: 0 2px 2px 0; }
.seg .tl-btn:hover { background: var(--ink-2); }
.seg .tl-btn.active:hover { background: var(--amber); }
/* divider between data filters and view controls */
.toolbar-rule { width: 1px; align-self: stretch; margin: 3px 0 1px; background: var(--ink-3); }
.tl-btn {
  background: var(--ink-1); border: 1px solid var(--ink-3); color: var(--paper-dim);
  font-size: 11.5px; padding: 5px 11px; border-radius: 2px; letter-spacing: 0.05em;
}
.tl-btn:hover { color: var(--paper); border-color: var(--paper-faint); }
.tl-btn.active { color: var(--ink-0); background: var(--amber); border-color: var(--amber); font-weight: 600; }
/* nav hint is help text, not a control: shown only when the row has room
   to spare; it always lives in the Legend & share drawer too */
.tl-hint { display: none; margin-left: auto; align-self: center; padding-bottom: 1px; }
@media (min-width: 1700px) { .tl-hint { display: block; } }

.timeline-scroll {
  grid-area: scroll;
  position: relative;
  min-width: 0; min-height: 0;   /* let the grid cell shrink so overflow scrolls instead of blowing out the column */
  overflow-x: auto; overflow-y: auto;
  cursor: grab;
  /* allow native panning but reserve two-finger pinch for our zoom handler */
  touch-action: pan-x pan-y;
  overscroll-behavior: contain;
  background:
    repeating-linear-gradient(90deg, transparent 0 119px, #36302315 119px 120px);
}
.timeline-scroll.dragging { cursor: grabbing; }
.timeline-canvas { position: relative; min-height: 100%; }

.tl-ruler {
  position: sticky; top: 20px; z-index: 5;   /* sits under the 20px density band */
  height: 34px;
  background: linear-gradient(var(--ink-0) 80%, transparent);
}
.tl-tick {
  position: absolute; top: 0; height: 34px;
  border-left: 1px solid var(--ink-3);
  padding: 4px 0 0 6px;
  font-family: var(--font-mono); font-size: 11px; color: var(--paper-faint);
  white-space: nowrap;
}
.tl-tick.major { color: var(--amber); border-left-color: var(--amber-deep); }

.tl-lane { position: relative; height: 46px; border-bottom: 1px solid var(--line); box-sizing: border-box; }
.tl-lane.off { height: 24px; background: #16130e66; }
/* COMPACT MODE — every lane visible at once. Heights here must mirror the
   compact .layer-row heights below (the alignment contract). */
#atlas.compact .tl-lane { height: 26px; }
#atlas.compact .tl-lane.off { height: 16px; }
#atlas.compact .tl-marker { width: 9px; height: 9px; }
#atlas.compact .tl-range { height: 5px; }
#atlas.compact .layer-row { height: 26px; font-size: 10px; padding: 2px 6px; }
#atlas.compact .layer-row.off { height: 16px; }
#atlas.compact .layer-row input { transform: scale(0.85); }
.tl-lane.off .tl-lane-label { opacity: 0.45; }
/* on desktop the aligned sidebar IS the label column; in-lane labels hide */
@media (min-width: 821px) { .tl-lane:not(.off) .tl-lane-label { display: none; } }
.tl-lane-label {
  position: sticky; left: 0; z-index: 4;
  display: inline-block;
  margin: 4px 0 0 8px; padding: 2px 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper-dim);
  background: #16130ed9; border: 1px solid var(--line); border-radius: 2px;
}

.tl-marker {
  position: absolute; top: 26px;
  width: 13px; height: 13px;
  transform: translateX(-50%) rotate(45deg);
  border: 1.5px solid var(--ink-0);
  padding: 0; background: var(--paper-dim);
  transition: transform 0.15s ease;
}
.tl-marker:hover, .tl-marker:focus-visible { transform: translateX(-50%) rotate(45deg) scale(1.45); z-index: 6; outline: none; box-shadow: 0 0 0 2px var(--paper); }
.tl-marker.selected { box-shadow: 0 0 0 2.5px var(--amber); z-index: 6; }
.tl-range {
  position: absolute; top: 29px; height: 7px;
  border-radius: 4px; opacity: 0.85;
  border: none; padding: 0; min-width: 13px;
}
.tl-range:hover, .tl-range:focus-visible { outline: 2px solid var(--paper); }
.tl-range.selected { outline: 2.5px solid var(--amber); }

.tl-window-band {
  position: absolute; top: 0; bottom: 0; z-index: 1;
  background: #e8a33d14;
  border-left: 1px dashed var(--amber-deep);
  border-right: 1px dashed var(--amber-deep);
  pointer-events: none;
}
.tl-window-band.preview { background: #e8a33d0e; border-style: dotted; }

/* hover-preview emphasis: in-window markers ring, the rest recede */
.previewing .tl-marker.win-dim, .previewing .tl-range.win-dim { opacity: 0.18; }
.tl-marker.win-hl { box-shadow: 0 0 0 2px var(--paper-dim), 0 0 10px #e8a33d66; z-index: 5; }
.tl-range.win-hl { outline: 2px solid var(--paper-dim); }
.tl-marker, .tl-range { transition: opacity 0.15s ease; }

/* edge pills: in-window events outside the visible lanes (shares the scroll
   grid cell, so it floats over the canvas without affecting layout) */
.offscreen-hint {
  grid-area: scroll; justify-self: center; z-index: 7;
  pointer-events: none;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  color: var(--ink-0); background: var(--amber);
  padding: 3px 12px; border-radius: 10px;
  box-shadow: 0 4px 14px #00000088;
}
.offscreen-hint.top { align-self: start; margin-top: 60px; }
.offscreen-hint.bottom { align-self: end; margin-bottom: 20px; }

/* density band — sticky above the ruler, date-aligned cells; the colored
   strip is the seam between the toolbar row and the dated canvas */
.tl-density {
  position: sticky; top: 0; z-index: 5;
  height: 20px;
  background: var(--ink-1);
  border-bottom: 1px solid var(--ink-3);
}
/* two stacked rows: warm amber (UAP) over cool slate (everything else) —
   warm-advances/cool-recedes keeps the UAP signal dominant without clash */
.tl-density-cell { position: absolute; border-radius: 1px; }
.tl-density-cell.uap   { top: 2px;  height: 7px; background: var(--amber); }
.tl-density-cell.other { top: 11px; height: 7px; background: #7c8db5; }

/* legend + share drawer under the timeline (collapsed by default) */
.heatmap-strip { grid-area: legend; border-top: 1px solid var(--ink-3); padding: 4px 18px 6px; background: var(--ink-1); }
.heatmap-strip[open] { padding-bottom: 14px; }
.legend-summary {
  display: flex; align-items: center; gap: 7px;
  list-style: none; cursor: pointer; user-select: none;
  padding: 3px 0;
}
.legend-summary::-webkit-details-marker { display: none; }
.legend-summary::after {
  content: "▸"; color: var(--paper-faint); font-size: 10px;
  transition: transform 0.15s ease;
}
.heatmap-strip[open] .legend-summary::after { transform: rotate(90deg); }
.legend-summary:hover .micro { color: var(--amber); }
.heat-legend { margin: 2px 0 6px; font-family: var(--font-mono); font-size: 10px; color: var(--paper-faint); }
.legend-label { color: var(--paper-dim); font-weight: 500; letter-spacing: 0.06em; }
/* miniature replicas of the actual timeline markers */
.key-marker {
  display: inline-block; width: 9px; height: 9px; margin: 0 2px;
  background: var(--amber); transform: rotate(45deg);
  border: 1px solid var(--ink-0); vertical-align: -1px;
}
.key-range {
  display: inline-block; width: 26px; height: 7px; margin: 0 2px;
  background: var(--amber); border-radius: 4px; vertical-align: 0;
}

/* sourced attention metrics (event panel) */
.att-series { margin: 12px 0 16px; }
.att-series > .micro { display: block; color: var(--paper-dim); margin-bottom: 5px; }
.att-row {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; color: var(--paper-dim);
  margin: 3px 0;
}
.att-row .att-t { flex: 0 0 58px; }
.att-row .att-bar { height: 8px; background: #7c8db5; border-radius: 1px; flex: 0 0 auto; }
.att-row .att-v { color: var(--paper-faint); }
.att-row.current { color: var(--amber); }
.att-row.current .att-bar { background: var(--amber); }
.att-row.current .att-v { color: var(--amber); }

/* ---------------- detail panel ---------------- */
/* z-contract: detail panel (300) sits above the 3D corridor (200) so records
   open over the scene; toast (320) stays above everything interactive */
.detail-overlay {
  position: fixed; inset: 0; z-index: 290;
  background: #0f0d0985;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.detail-overlay.open { opacity: 1; pointer-events: auto; }
.detail-panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 300;
  width: min(var(--panel-w), 100vw);
  background: var(--ink-1);
  border-left: 1px solid var(--ink-3);
  box-shadow: -30px 0 60px #00000080;
  transform: translateX(102%);
  transition: transform 0.25s ease;
  overflow-y: auto;
  padding: 22px 26px 60px;
}
.detail-panel.open { transform: translateX(0); }
.detail-panel h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 26px; line-height: 1.18; margin: 10px 0 6px;
}
.detail-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: 1px solid var(--ink-3); color: var(--paper-dim);
  width: 30px; height: 30px; border-radius: 2px; font-size: 14px;
}
.detail-close:hover { color: var(--paper); border-color: var(--paper-faint); }
.detail-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; }

.chip {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 2px; border: 1px solid var(--ink-3); color: var(--paper-dim);
}
.chip.layer-chip { border-style: solid; }
.stamp {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 4px 10px;
  border: 1.5px dashed;
  transform: rotate(-1.4deg);
  border-radius: 2px;
}
.stamp.confidence-high { color: var(--teal); border-color: var(--teal); }
.stamp.confidence-medium { color: var(--amber); border-color: var(--amber); }
.stamp.confidence-low, .stamp.disputed { color: var(--stamp-red); border-color: var(--stamp-red); }
.stamp.status { color: var(--paper-faint); border-color: var(--paper-faint); }

.detail-section { margin: 20px 0; }
.detail-section > .micro { display: block; border-bottom: 1px solid var(--line); padding-bottom: 4px; margin-bottom: 8px; color: var(--amber-deep); }
.detail-section p { margin: 7px 0; font-size: 15.5px; color: #ded5c0; }
.detail-section ul { margin: 6px 0; padding-left: 18px; font-size: 15px; }
.detail-section li { margin: 5px 0; color: #ded5c0; }
.kv { font-family: var(--font-mono); font-size: 12px; color: var(--paper-dim); }

.linklist { list-style: none; padding: 0; margin: 6px 0; }
.linklist li { margin: 7px 0; padding-left: 14px; position: relative; font-size: 14.5px; }
.linklist li::before { content: "◆"; position: absolute; left: 0; top: 1px; font-size: 8px; color: var(--amber-deep); }
.src-flag { font-family: var(--font-mono); font-size: 10px; color: var(--stamp-red); letter-spacing: 0.06em; }
.src-flag.ok { color: var(--teal); }

/* directory filter/sort bar */
.dir-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 6px; }
.dir-input {
  flex: 1; min-width: 180px; max-width: 340px;
  background: var(--ink-1); border: 1px solid var(--ink-3); border-radius: 2px;
  color: var(--paper); font-family: var(--font-mono); font-size: 12px;
  padding: 8px 11px;
}
.dir-input:focus { outline: none; border-color: var(--amber-deep); }
.dir-input::placeholder { color: var(--paper-faint); }

/* share strips: tighter idle footprint */
.share-strip { margin: 6px 0; }
.share-strip .share-btn { padding: 4px 9px; font-size: 10px; }

.panel-window-row { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 8px; }
.panel-window-row .tl-btn { font-size: 10px; padding: 4px 9px; }

.what-else-item { border-left: 2px solid var(--ink-3); padding: 4px 0 4px 12px; margin: 8px 0; }
.what-else-item .micro { display: block; }
.what-else-item button.linkish, button.linkish {
  background: none; border: none; padding: 0;
  font-family: var(--font-body); font-size: 15px; color: var(--amber); text-align: left;
  text-decoration: underline; text-decoration-color: #e8a33d44; text-underline-offset: 3px;
}
button.linkish:hover { color: #f3bf6b; }

.panel-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.action-btn {
  background: var(--ink-2); border: 1px solid var(--ink-3); color: var(--paper);
  font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 8px 13px; border-radius: 2px;
}
.action-btn:hover { border-color: var(--amber-deep); color: var(--amber); }
.action-btn.primary { background: var(--amber); border-color: var(--amber); color: var(--ink-0); font-weight: 600; }
.action-btn.primary:hover { background: #f3bf6b; color: var(--ink-0); }

.empty-data {
  font-family: var(--font-mono); font-size: 12px; color: var(--paper-faint);
  border: 1px dashed var(--ink-3); padding: 10px 12px; border-radius: 2px;
}

/* ---------------- article-style pages ---------------- */
.page {
  max-width: 860px; margin: 0 auto; padding: 44px 26px 90px;
}
.page header.page-head { position: static; border: none; background: none; padding: 0; display: block; }
.page h1.page-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(30px, 5vw, 44px); line-height: 1.12; margin: 6px 0 14px;
}
.page .lede { font-size: 20px; color: var(--paper-dim); font-style: italic; margin: 0 0 26px; }
.page h2 { font-family: var(--font-display); font-weight: 600; font-size: 24px; margin: 38px 0 10px; }
.page h3 { font-family: var(--font-display); font-size: 18px; margin: 24px 0 8px; }
.page p, .page li { color: #ded5c0; }
.rule { border: none; border-top: 1px solid var(--ink-3); margin: 30px 0; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-top: 24px; }
.card {
  background: var(--ink-1); border: 1px solid var(--ink-3); border-radius: 3px;
  padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 8px;
}
.card:hover { border-color: var(--amber-deep); }
.card h3 { margin: 0; font-size: 17px; line-height: 1.25; }
.card h3 button { font-family: var(--font-display); font-size: 17px; }
.card p { margin: 0; font-size: 13.5px; color: var(--paper-dim); }
.card .micro { margin-top: auto; }

.story-section { margin: 30px 0; }
.story-section .micro { color: var(--amber-deep); display: block; border-bottom: 1px solid var(--line); padding-bottom: 4px; margin-bottom: 10px; }
.cite-block {
  background: var(--ink-1); border: 1px solid var(--ink-3); border-left: 3px solid var(--amber-deep);
  padding: 14px 18px; margin: 26px 0; font-size: 14px;
}

/* TTS */
.tts-controls { display: inline-flex; gap: 5px; }
.tts-controls button {
  background: none; border: 1px solid var(--ink-3); color: var(--paper-dim);
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 2px;
}
.tts-controls button:hover:not(:disabled) { color: var(--amber); border-color: var(--amber-deep); }
.tts-controls button:disabled { opacity: 0.35; cursor: default; }

/* ---------------- welcome / landing ---------------- */
.welcome { max-width: 760px; margin: 0 auto; padding: 28px 0 40px; }
.welcome-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(38px, 7vw, 64px); line-height: 1.04;
  letter-spacing: -0.01em; margin: 14px 0 22px;
}
.welcome-title em { color: var(--amber); font-style: italic; }
.welcome-lede { font-size: 20px; line-height: 1.6; color: var(--paper-dim); max-width: 620px; }
.welcome-example {
  margin: 38px 0; padding: 22px 26px;
  background: var(--ink-1); border: 1px solid var(--ink-3); border-left: 3px solid var(--amber);
}
.welcome-example p { font-size: 16.5px; line-height: 1.65; }
.welcome-example strong { color: var(--amber); }
.welcome-example .action-btn { margin: 10px 10px 0 0; }
.welcome-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 34px 0 26px; }

/* staged reveal — disabled under prefers-reduced-motion via the global rule */
.reveal { opacity: 0; transform: translateY(14px); animation: rise 0.6s ease forwards; }
.r1 { animation-delay: 0.05s; } .r2 { animation-delay: 0.15s; } .r3 { animation-delay: 0.3s; }
.r4 { animation-delay: 0.5s; } .r5 { animation-delay: 0.65s; } .r6 { animation-delay: 0.8s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

select.tl-btn { appearance: none; -webkit-appearance: none; padding-right: 18px; max-width: 180px; }

/* share strip — collapsed to a single button until the user opts in */
.share-strip {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 10px 0;
}
.share-strip.open {
  display: flex;
  padding: 8px 10px;
  border: 1px solid var(--ink-3); border-left: 3px solid var(--amber-deep);
  border-radius: 2px; background: var(--ink-2);
}
/* display:contents would override the hidden attribute's display:none —
   without the [hidden] rule the strip renders permanently expanded */
.share-options { display: contents; }
.share-options[hidden] { display: none; }
.share-btn {
  background: var(--ink-1); border: 1px solid var(--ink-3); color: var(--paper-dim);
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 2px;
}
.share-btn:hover { color: var(--amber); border-color: var(--amber-deep); }
.share-btn.share-native { background: var(--amber); border-color: var(--amber); color: var(--ink-0); font-weight: 600; }
.share-btn.share-native:hover { background: #f3bf6b; color: var(--ink-0); }
@media (max-width: 820px) { .share-btn { padding: 9px 12px; } }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(80px);
  z-index: 320; background: var(--paper); color: var(--ink-0);
  font-family: var(--font-mono); font-size: 12px; padding: 9px 18px; border-radius: 2px;
  transition: transform 0.25s ease;
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ---------------- 3D archive corridor ---------------- */
.t3d-overlay {
  position: fixed; inset: 0; z-index: 200;
  background:
    /* the light at the end of the corridor — warm amber core at the vanishing
       point (matches perspective-origin 50% 42%), kept dim enough to read by */
    radial-gradient(34% 26% at 50% 42%, #f3d9a455 0%, #e8a33d26 38%, transparent 72%),
    radial-gradient(80% 60% at 50% 45%, #1a1610 0%, #0c0a07 70%),
    var(--ink-0);
  overflow: hidden;
}
/* descending beam — a UFO-light cone from above the vanishing point to the
   floor; heavily blurred and low-alpha so cards and years stay legible */
.t3d-viewport::before {
  content: ""; position: absolute; z-index: 0;
  left: 50%; top: 6%; height: 86%; width: 520px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #f3e6c238 0%, #e8a33d1f 38%, #e8a33d0a 72%, transparent 100%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  filter: blur(16px);
  pointer-events: none;
  animation: beam-breathe 7s ease-in-out infinite;
}
@keyframes beam-breathe { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .t3d-viewport::before { animation: none; } }
/* corridor floor: receding amber grid via pure CSS perspective */
.t3d-overlay::before {
  content: ""; position: absolute; left: -50%; right: -50%; bottom: -12%; height: 55%;
  background:
    repeating-linear-gradient(90deg, #e8a33d22 0 1px, transparent 1px 90px),
    repeating-linear-gradient(0deg, #e8a33d18 0 1px, transparent 1px 70px);
  transform: perspective(700px) rotateX(64deg);
  transform-origin: top center;
  pointer-events: none;
}
.t3d-viewport { position: absolute; inset: 0; perspective: 1100px; perspective-origin: 50% 42%; }
/* HIT-TESTING GOTCHA: the world is an untransformed plane at depth 0, so it
   sits IN FRONT of every card (negative translateZ) in the 3D context — and
   transparent elements still win hit tests. It must be pass-through, with
   pointer events re-enabled on the cards themselves. */
.t3d-world { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.t3d-card { pointer-events: auto; }

.t3d-gate {
  position: absolute; left: 50%; top: 42%;
  font-family: var(--font-display); font-size: 110px; font-weight: 600;
  color: #e8a33d1c;
  -webkit-text-stroke: 1.5px #e8a33d66;   /* stronger stroke so years read against the beam */
  text-shadow: 0 0 28px #0c0a07;
  pointer-events: none; user-select: none;
  will-change: transform, opacity;
}
.t3d-card {
  position: absolute; top: 42%; width: 300px;
  background: #16130eee; border: 1px solid var(--ink-3);
  border-left: 3px solid var(--layer-color);
  padding: 14px 16px 12px;
  box-shadow: 0 18px 50px #000000aa;
  will-change: transform, opacity;
  backdrop-filter: blur(2px);
}
.t3d-card { cursor: pointer; }
.t3d-card:hover { border-color: var(--amber-deep); }
.t3d-card.left  { left: 6%;  transform-origin: left center; }
.t3d-card.right { right: 6%; transform-origin: right center; }
.t3d-card h3 { margin: 6px 0; font-family: var(--font-display); font-size: 17px; line-height: 1.25; color: var(--paper); }
.t3d-card .t3d-card-date { color: var(--layer-color); }
.t3d-card .t3d-card-sum { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--paper-dim); }
.t3d-open {
  background: none; border: 1px solid var(--amber-deep); color: var(--amber);
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 2px;
}
.t3d-open:hover { background: var(--amber); color: var(--ink-0); }

.t3d-hud { position: absolute; inset: 0; z-index: 5; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; }
.t3d-hud-top, .t3d-hud-bottom { display: flex; align-items: center; gap: 16px; padding: 16px 22px; flex-wrap: wrap; }
.t3d-hud-top { justify-content: space-between; }
.t3d-hud button, .t3d-hud input { pointer-events: auto; }
.t3d-close {
  background: var(--ink-1); border: 1px solid var(--ink-3); color: var(--paper);
  padding: 8px 14px; font-size: 11px; letter-spacing: 0.08em; border-radius: 2px;
}
.t3d-close:hover { border-color: var(--amber); color: var(--amber); }
.t3d-year { font-family: var(--font-display); font-size: 44px; font-weight: 600; color: var(--amber); min-width: 120px; }
.t3d-slider { flex: 1; min-width: 160px; accent-color: var(--amber); }
.t3d-caps { max-width: 380px; }
@media (max-width: 820px) { .t3d-card { width: 220px; } .t3d-gate { font-size: 64px; } }

/* ---------------- subtle motion layer ----------------
   Quiet, archival-feeling movement: things settle into place like documents
   laid on a desk. Everything here dies under prefers-reduced-motion via the
   global rule at the top of this file. */
@keyframes settle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pulse-ring {
  0%, 100% { box-shadow: 0 0 0 2.5px var(--amber); }
  50% { box-shadow: 0 0 0 4px #e8a33d88, 0 0 14px #e8a33d55; }
}

.page { animation: settle 0.4s ease; }
.timeline-canvas { animation: settle 0.35s ease; }

/* detail panel content settles in with a gentle stagger */
.detail-panel.open .detail-section { animation: settle 0.4s ease backwards; }
.detail-panel.open .detail-section:nth-of-type(2) { animation-delay: 0.04s; }
.detail-panel.open .detail-section:nth-of-type(3) { animation-delay: 0.08s; }
.detail-panel.open .detail-section:nth-of-type(4) { animation-delay: 0.12s; }
.detail-panel.open .detail-section:nth-of-type(5) { animation-delay: 0.16s; }
.detail-panel.open .detail-section:nth-of-type(6) { animation-delay: 0.2s; }
.detail-panel.open .detail-section:nth-of-type(n+7) { animation-delay: 0.24s; }

/* the selected marker breathes amber so it's findable at a glance */
.tl-marker.selected, .tl-range.selected { animation: pulse-ring 1.8s ease-in-out infinite; }

/* cards lift like paper being picked up */
.card { transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px #00000066; }

/* controls give a hair of tactile feedback */
.tl-btn, .action-btn, .share-btn { transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.12s; }
.tl-btn:active, .action-btn:active, .share-btn:active { transform: translateY(1px); }

/* confidence stamps straighten when inspected */
.stamp { transition: transform 0.18s ease; }
.detail-meta:hover .stamp { transform: rotate(0deg); }

/* density cells fade as filters change */
.tl-density-cell { transition: opacity 0.3s ease; }

footer.site {
  border-top: 1px solid var(--ink-3); padding: 26px 22px 40px;
  font-family: var(--font-mono); font-size: 11px; color: var(--paper-faint); line-height: 1.8;
  overflow-wrap: anywhere;  /* the docs/… path is one long token — without this it widens the whole page on phones */
}

/* ---------------- responsive ---------------- */
/* mobile-only elements, hidden on desktop */
.nav-toggle { display: none; }
.nav-truth { display: none; }
.rotate-prompt { display: none; }

/* the compact header applies to narrow screens AND short screens
   (phones in landscape are often wider than 820px but need the same nav;
   no pointer:coarse guard — see the rotate prompt note below) */
@media (max-width: 820px), (max-height: 480px) {
  /* header: hamburger top-left, brand on ONE line, subheading dropped */
  header.site { align-items: center; flex-wrap: nowrap; gap: 12px; padding: 10px 14px; }
  .brand { min-width: 0; gap: 9px; }
  .brand h1 { font-size: 19px; white-space: nowrap; }
  .brand .micro { display: none; }
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    flex: 0 0 auto; width: 42px; height: 42px; padding: 10px 9px;
    background: none; border: 1px solid var(--ink-3); border-radius: 2px;
  }
  .nav-toggle span {
    display: block; height: 2px; border-radius: 1px;
    background: var(--paper-dim);
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  body.nav-open .nav-toggle { border-color: var(--amber-deep); }
  body.nav-open .nav-toggle span { background: var(--amber); }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* nav collapses into a drawer under the sticky header */
  nav.primary {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    margin: 0; padding: 8px 14px 14px;
    flex-direction: column; gap: 2px;
    background: var(--ink-1);
    border-bottom: 1px solid var(--ink-3);
    box-shadow: 0 18px 34px #000000aa;
    max-height: calc(100dvh - 64px); overflow-y: auto;
  }
  body.nav-open nav.primary { display: flex; }
  nav.primary a, .display-menu summary { font-size: 13px; padding: 12px 10px; }
  .nav-sep { display: none; }
  .display-menu .display-pop, .display-menu .nav-pop {
    position: static; min-width: 0; box-shadow: none;
    margin: 2px 0 6px 10px; border: none; border-left: 2px solid var(--ink-3); border-radius: 0;
  }
  /* no Browse subgroup in the drawer — app.js moves its links out beside
     Timeline/Story Mode (display:contents can't do it: details is always
     blockified), leaving the empty dropdown shell to hide */
  #browse-menu { display: none; }
  /* truth note lives at the bottom of the open menu; the banner row hides */
  .truth-note { display: none; }
  .nav-truth {
    display: block; margin: 10px 0 0; padding: 12px 10px 2px;
    border-top: 1px solid var(--ink-3);
    text-transform: none; letter-spacing: 0.04em;
    font-size: 11px; line-height: 1.7; color: var(--paper-faint);
  }
  .nav-truth strong { color: var(--paper-dim); font-weight: 500; }

  /* toolbar slims to one line: Country (default = all) and Window (a
     hover/precision tool) are desktop-only — Zoom and View sit side by side */
  .timeline-toolbar { gap: 14px; padding: 6px 12px 8px; flex-wrap: nowrap; }
  .tool-group[aria-label="Country filter"],
  .tool-group[aria-label="Correlation window"],
  .toolbar-rule { display: none; }

  /* the footer lives inside the Legend & share drawer (moved there by app.js)
     so the collapsed legend is the true bottom of the page */
  .heatmap-strip footer.site { border-top: 1px solid var(--ink-3); margin-top: 12px; padding: 12px 0 4px; }
}

/* mobile landscape: room for the full brand line that portrait can't fit */
@media (max-width: 820px) and (orientation: landscape), (max-height: 480px) and (orientation: landscape) {
  .brand .micro { display: inline; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* open drawer: a deliberate two-column grid — the tall single column would
     otherwise overflow the short viewport and flex-wrap into ragged columns.
     The truth note runs the full width along the bottom. */
  body.nav-open nav.primary {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0 26px; align-content: start;
  }
  nav.primary a, nav.primary .display-menu { border-bottom: 1px solid var(--line); }
  nav.primary .nav-truth { grid-column: 1 / -1; border-bottom: none; }
}

/* short screens: captions above the controls cost lane height — drop them */
@media (max-height: 480px) {
  .tool-label { display: none; }
  .timeline-toolbar { align-items: center; }
  .heatmap-strip { padding-top: 2px; padding-bottom: 3px; }
}

/* landscape phones keep the desktop timeline grid (sidebar beside lanes) but
   the banner row is gone, so hand its height back to the lanes */
@media (min-width: 821px) and (max-height: 480px) {
  .atlas-layout, body.truth-dismissed .atlas-layout { height: calc(100dvh - 64px); }
}

@media (max-width: 820px) {
  body { font-size: 16px; }

  /* alignment-to-lanes only applies on desktop; mobile stacks the panels
     and gets a compact scrollable layer list (banner row is gone: 64px header) */
  .atlas-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas: "lhead" "llist" "toolbar" "scroll" "legend";
    height: auto; min-height: calc(100dvh - 64px);
  }
  body.truth-dismissed .atlas-layout { height: auto; }
  .layers-head, .layers-list { border-right: none; }
  .layers-list { max-height: 150px; overflow-y: auto; border-bottom: 1px solid var(--ink-3); }
  .timeline-scroll { min-height: 320px; }
  .layer-ruler-spacer { display: none; }
  .layer-row, .layer-row.off { height: auto; opacity: 1; padding: 8px 6px; } /* larger tap targets */
  .tl-btn, .action-btn { padding: 9px 13px; }
  .detail-panel { width: 100vw; }
}

/* portrait phones: the timeline is a wide instrument — swap it for a rotate
   prompt. No pointer:coarse guard — it misfires on hybrid devices and hides
   the prompt from desktop/devtools testing; a narrow portrait window gets
   the same prompt, which is the honest answer there too. */
@media (max-width: 820px) and (orientation: portrait) {
  .atlas-layout { display: block; height: auto; min-height: 0; }
  body.truth-dismissed .atlas-layout { height: auto; }
  .atlas-layout > *:not(.rotate-prompt) { display: none !important; }
  .atlas-layout[hidden] { display: none; } /* article pages still replace the atlas */
  .rotate-prompt {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 16px; min-height: calc(100dvh - 140px);
    padding: 40px 26px; text-align: center;
  }
  .rotate-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 24px; }
  .rotate-prompt .micro { line-height: 2; max-width: 300px; }
  .rotate-icon { color: var(--amber); animation: rotate-hint 2.8s ease-in-out infinite; }
  .rotate-icon .ri-phone { fill: none; stroke: var(--paper-dim); stroke-width: 2.5; stroke-linecap: round; }
  .rotate-icon .ri-arrow { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
  @keyframes rotate-hint {
    0%, 30% { transform: rotate(0deg); }
    60%, 85% { transform: rotate(-90deg); }
    100% { transform: rotate(0deg); }
  }
}

/* high contrast preference */
@media (prefers-contrast: more) {
  :root { --paper: #fff8e8; --paper-dim: #d9d0b8; --line: #555; }
}

/* ---------------- user themes ----------------
   Selected from the header Display menu, persisted in localStorage.
   "Paper" = the reading room by day: same archive concept, inverted for
   long reading sessions and daylight. "Contrast" = maximum legibility. */
body.theme-paper {
  --ink-0: #f1e8d4;
  --ink-1: #e9dec6;
  --ink-2: #dfd2b4;
  --ink-3: #c2b08a;
  --line: #c2b08a88;
  --paper: #241d10;
  --paper-dim: #54482f;
  --paper-faint: #80714f;
  --amber: #8f5f10;        /* deepened for contrast on cream */
  --amber-deep: #6e4a0c;
}
body.theme-paper::before { opacity: 0.035; }
body.theme-paper::after { background: none; }
body.theme-paper .detail-section p, body.theme-paper .detail-section li,
body.theme-paper .page p, body.theme-paper .page li { color: #3a3220; }
body.theme-paper .tl-marker { border-color: var(--ink-0); }
body.theme-paper .offscreen-hint { color: #f1e8d4; }
body.theme-paper .stamp.confidence-high { color: #1d6e5f; border-color: #1d6e5f; }

body.theme-contrast {
  --ink-0: #000;
  --ink-1: #0d0d0d;
  --ink-2: #1a1a1a;
  --ink-3: #5a5a5a;
  --line: #5a5a5a99;
  --paper: #ffffff;
  --paper-dim: #e0e0e0;
  --paper-faint: #bdbdbd;
  --amber: #ffb84d;
  --amber-deep: #e09a2d;
}
body.theme-contrast::before { display: none; }   /* no grain — clarity first */
body.theme-contrast::after { display: none; }
body.theme-contrast .detail-section p, body.theme-contrast .detail-section li,
body.theme-contrast .page p, body.theme-contrast .page li { color: #f0f0f0; }
body.theme-contrast .tl-lane { border-bottom-color: #444; }

/* nav grouping + separator */
.nav-sep { width: 1px; align-self: stretch; margin: 4px 4px; background: var(--ink-3); }
.nav-pop { min-width: 170px; padding: 8px; gap: 2px; }
.nav-pop a {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none;
  color: var(--paper-dim); padding: 7px 10px; border-radius: 2px;
}
.nav-pop a:hover { color: var(--amber); background: var(--ink-2); }
.display-summary { font-size: 13px; padding: 6px 9px; }

/* display menu (header) */
.display-menu { position: relative; }
.display-menu summary {
  list-style: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  color: var(--paper-dim); padding: 6px 11px;
  border: 1px solid transparent; border-radius: 2px;
}
.display-menu summary::-webkit-details-marker { display: none; }
.display-menu summary:hover { color: var(--paper); border-color: var(--ink-3); }
.display-menu[open] summary { color: var(--amber); border-color: var(--amber-deep); }
.display-menu summary.active { color: var(--amber); border-color: var(--amber-deep); background: #e8a33d10; }
.display-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 90;
  min-width: 230px;
  background: var(--ink-1); border: 1px solid var(--ink-3); border-radius: 3px;
  padding: 12px 14px; box-shadow: 0 14px 40px #00000088;
  display: flex; flex-direction: column; gap: 10px;
}
.display-pop label { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-faint); }
.display-pop select {
  background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 2px;
  color: var(--paper); font-family: var(--font-mono); font-size: 12px; padding: 6px 8px;
}
.display-pop .kv { margin: 0; }

/* year-range inputs in directory bars */
.dir-input.dir-year { flex: 0 0 100px; min-width: 90px; }