/* Paper treatment over vis-timeline (Task 7). Borrows the archive's palette
   (assets/site.css :root), rule weights and mono type rather than inventing new ones.
   vis ships 88 selectors, all namespaced .vis-*, so this is additive: nothing here
   removes a vis class, it only repaints what's already there.

   Every rule below is scoped under .timeline-stage (the section wrapping both
   #timeline-events and #timeline-density). This isn't just tidy namespacing: the
   vendored vis-timeline-graph2d.min.js re-injects its own copy of vis's default CSS
   as <style> tags appended to <head> at runtime, landing *after* this stylesheet's
   <link>. For selectors of equal specificity, later-in-the-DOM wins, so an unscoped
   ".vis-item{...}" here would lose to vis's own re-injected ".vis-item{...}". Adding
   the .timeline-stage ancestor gives every rule one extra class of specificity, which
   beats vis's bare selectors regardless of injection order. */

.timeline-stage #timeline-events { min-height: 420px; }
.timeline-stage #timeline-density { min-height: 160px; }

/* ---- base: kill the widget chrome, adopt the archive's ink and mono type ---- */
.timeline-stage .vis-timeline {
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
}
.timeline-stage .vis-panel.vis-center, .timeline-stage .vis-panel.vis-left, .timeline-stage .vis-panel.vis-right,
.timeline-stage .vis-panel.vis-top, .timeline-stage .vis-panel.vis-bottom {
  border-color: var(--line);
}

/* time axis: tabular numerals, dim ink instead of vis's mid-grey-on-white default */
.timeline-stage .vis-time-axis .vis-text {
  color: var(--dim);
  opacity: .85;
  font: 11px/1.4 var(--mono);
  font-variant-numeric: tabular-nums;
}
.timeline-stage .vis-time-axis .vis-grid.vis-minor,
.timeline-stage .vis-panel.vis-background.vis-horizontal .vis-grid.vis-minor { border-color: rgba(213,219,211,.08); }
.timeline-stage .vis-time-axis .vis-grid.vis-major,
.timeline-stage .vis-panel.vis-background.vis-horizontal .vis-grid.vis-major { border-color: rgba(213,219,211,.18); }

/* track labels ("Sightings" / "Files & programmes") */
.timeline-stage .vis-labelset .vis-label {
  color: var(--ink);
  border-color: var(--line);
  background: transparent;
  font: 11px/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---- items: paper chits pinned to the dark field, not blue widget boxes ---- */
.timeline-stage .vis-item.nw-item {
  border-radius: 0;
  border-width: 1px;
  border-color: var(--paper-line);
  background: var(--paper);
  color: var(--paper-ink);
  font: 11px/1.3 var(--mono);
  box-shadow: 0 2px 5px rgba(0,0,0,.45);
}
.timeline-stage .vis-item.nw-item .vis-item-content { padding: 4px 7px; }
.timeline-stage .vis-item.nw-item.vis-selected {
  background: var(--paper-2);
  border-color: var(--glow);
  box-shadow: 0 1px 0 rgba(0,0,0,.25), 0 0 0 1px var(--glow);
}

/* Basis is visible at a glance, not buried in a tooltip: a dashed edge means the
   record rests on assessment rather than a primary document; dotted means a single witness. */
.timeline-stage .vis-item.nw-basis-assessment { border-style: dashed; }
.timeline-stage .vis-item.nw-basis-single-witness { border-style: dotted; }

/* Events that open a case file: cursor and an underline in the archive's stamp red,
   so a visitor can tell an item is clickable before they click it. */
.timeline-stage .vis-item.nw-has-case { cursor: pointer; }
.timeline-stage .vis-item.nw-has-case .vis-item-content {
  text-decoration: underline;
  text-decoration-color: var(--stamp);
  text-underline-offset: 2px;
}

/* wave bracket: a wash behind the sightings track, bracketed by its own edges —
   never a card, so it can't be mistaken for an item */
.timeline-stage .vis-item.nw-wave {
  background: rgba(120,90,40,.14);
  border: none;
  border-left: 2px solid rgba(120,90,40,.55);
  border-right: 2px solid rgba(120,90,40,.55);
  color: var(--dim);
}
.timeline-stage .vis-item.nw-wave .vis-item-content {
  color: var(--dim);
  font: 10px/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 8px;
}

/* clusters: a paper pill, not a blue bubble */
.timeline-stage .vis-item.vis-cluster,
.timeline-stage .vis-item.vis-cluster-dot,
.timeline-stage .vis-item.vis-cluster-line {
  background: var(--paper-2);
  border-color: var(--paper-line);
  color: var(--paper-ink);
}
.timeline-stage .vis-item.vis-cluster {
  border-radius: 999px;
  font: 700 10px/1 var(--mono);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

/* tooltip */
.timeline-stage .vis-tooltip {
  background: var(--paper);
  border: 1px solid var(--paper-line);
  border-radius: 0;
  color: var(--paper-ink);
  font: 12px/1.5 var(--mono);
  box-shadow: 0 6px 12px rgba(0,0,0,.5);
}

/* The bias marker: an annotation, not a control. It sits at window.NIGHTWATCH_DENSITY.onset
   (ONLINE_ONSET in scripts/build-timeline.mjs — currently 1995-01), where NUFORC's reporting
   regime changed; vis makes custom-time bars draggable by default, which would let a visitor
   drag it somewhere false with no way to know they broke it. It ships unlabelled — addCustomTime
   sets its position, not a text marker — so there is no .vis-custom-time-marker element to style. */
.timeline-stage .vis-custom-time {
  background-color: var(--stamp);
  width: 2px;
  opacity: .85;
  pointer-events: none;
}

/* today's date: present, but not shouting vis's default orange over the archive */
.timeline-stage .vis-current-time {
  background-color: var(--dim);
  opacity: .45;
  width: 1px;
}

/* ---- density ridge (Graph2d) ---- */
.timeline-stage .vis-data-axis .vis-y-axis.vis-major {
  color: var(--dim);
  font: 10px/1.3 var(--mono);
  font-variant-numeric: tabular-nums;
}
.timeline-stage .vis-data-axis .vis-y-axis.vis-minor { color: rgba(165,177,167,.5); }
.timeline-stage .vis-data-axis .vis-y-axis.vis-title {
  color: var(--dim);
  font: 10px/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Reports/month bars (annual-average pre-1990, true monthly after) and the
   reporting-bias-corrected line share the archive's palette, not vis's blue/orange/purple.
   fill-opacity here cancels vis's own default bar opacity (.5) so .nw-raw below is the only
   thing dimming the bars — without this, the two opacities would compound instead of stacking
   predictably. */
.timeline-stage .vis-bar { fill-opacity: 1; }
.timeline-stage .nw-excess { fill: none; stroke: var(--glow); stroke-width: 2.5px; }

/* The raw series is deliberately faint: it is the uncorrected one (C3). "Against its
   own era" (nw-excess, above) stays solid and full-opacity — the confident, corrected line. */
.timeline-stage .nw-raw { fill: var(--paper); opacity: .32; }

/* Series labels: a static row below the chart (see .ridge-legend in timeline.html), not
   vis's built-in legend. That legend rendered inside the plot area and overlapped the bars
   and the line, so timeline.js sets `legend: { enabled: false }` and this row replaces it. */
.timeline-stage .ridge-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font: 10px/1.6 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--dim);
}
.timeline-stage .ridge-legend li { display: flex; align-items: center; gap: 6px; }
.timeline-stage .ridge-swatch { display: inline-block; width: 14px; height: 3px; border-radius: 1px; }
.timeline-stage .ridge-legend-raw .ridge-swatch { background: var(--paper); opacity: .32; }
.timeline-stage .ridge-legend-excess .ridge-swatch { background: var(--glow); }
