/* Crash Data pillar — supplements /assets/style.css. Editorial palette only. */
.crash-subnav { display:flex; gap:1.4rem; flex-wrap:wrap; margin:0 0 1.75rem; padding-bottom:0.7rem; border-bottom:1px solid var(--line); }
.crash-subnav a { font-family:var(--font-mono); font-size:0.72rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none; padding-bottom:2px; border-bottom:2px solid transparent; }
.crash-subnav a.active, .crash-subnav a:hover { color:var(--accent); border-bottom-color:var(--accent); }
/* Two dataset groups (FARS fatal · CRSS all-severity) on one subnav line. */
.crash-subnav .grp { display:flex; align-items:baseline; gap:0.85rem; flex-wrap:wrap; }
.crash-subnav .grp-lab { font-family:var(--font-mono); font-size:0.62rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink); opacity:0.55; }
.crash-subnav .grp-sep { width:1px; align-self:stretch; background:var(--line); }
/* Severity badges in the CRSS browser. */
.badge.sev-fatal { background:rgba(107,39,55,.12); border-color:rgba(107,39,55,.4); color:#6b2737; }
.badge.sev-injury { background:rgba(192,86,31,.12); border-color:rgba(192,86,31,.4); color:#a8480f; }
.badge.sev-pdo { background:rgba(201,184,168,.22); border-color:#c9b8a8; color:#7a6a55; }
.badge.sev-unk { background:rgba(0,0,0,.05); border-color:var(--line); color:var(--ink-soft); }

/* In-page provenance footnote (machine endpoints + FARS/CRSS sources). Sits at
   the bottom of <main>, above the canonical site footer. */
.crash-provenance { margin-top:3rem; padding-top:1.25rem; border-top:1px solid var(--line); color:var(--ink-soft); font-size:0.82rem; line-height:1.55; }
.crash-provenance p { margin:0.4rem 0; }
.crash-provenance a { color:var(--ink-soft); text-decoration:underline; }
.crash-provenance a:hover { color:var(--accent); }

.request-btn.alt { background:transparent; color:var(--accent); border-color:var(--accent); }
.request-btn.alt:hover { background:var(--accent); color:var(--paper); }
.cta-row { display:flex; gap:0.8rem; flex-wrap:wrap; margin:0.5rem 0 0; }

/* ───────────── Landing hero trend ───────────── */
.hero-trend { margin:1.6rem 0 0; }
.hero-trend svg { width:100%; height:auto; display:block; }
.hero-trend .ht-cap { font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); margin:0.5rem 0 0; }

/* ───────────── Explorer ───────────── */
.explorer { margin-top:0.5rem; }

/* KPI strip */
.kpi-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); margin:0 0 1.5rem; }
.kpi { background:var(--paper); padding:1.1rem 1.2rem; }
.kpi dt { font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 0.35rem; }
.kpi dd { margin:0; font-family:var(--font-display); font-size:1.95rem; font-weight:600; line-height:1; font-variant-numeric:tabular-nums; }
.kpi .kpi-sub { font-family:var(--font-mono); font-size:0.66rem; color:var(--ink-soft); margin-top:0.3rem; letter-spacing:0.02em; }
.kpi.accent dd { color:var(--accent); }

/* Control panel */
.exp-panel { border:1px solid var(--line); border-top:3px solid var(--line-strong); background:linear-gradient(180deg,#fffdf8,var(--paper)); padding:1.1rem 1.25rem 1.25rem; margin:0 0 1.5rem; }
.exp-row { display:flex; flex-wrap:wrap; gap:1.1rem 1.4rem; align-items:flex-end; }
.exp-row + .exp-row { margin-top:1.05rem; padding-top:1.05rem; border-top:1px dashed var(--line); }
.exp-ctrl { display:flex; flex-direction:column; gap:0.3rem; }
.exp-ctrl > span.lab, .exp-ctrl > label.lab { font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft); }
.exp-ctrl select { font-family:var(--font-body); font-size:0.92rem; padding:0.5rem 0.6rem; border:1.5px solid var(--line); border-radius:0; background:#fffdf8; color:var(--ink); min-width:12rem; cursor:pointer; }
.exp-ctrl select:focus { outline:none; border-color:var(--accent); }

/* Segmented control */
.seg { display:inline-flex; border:1.5px solid var(--line); }
.seg button { font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.05em; text-transform:uppercase; background:#fffdf8; border:0; border-right:1px solid var(--line); padding:0.5rem 0.75rem; cursor:pointer; color:var(--ink-soft); }
.seg button:last-child { border-right:0; }
.seg button.active { background:var(--ink); color:var(--paper); }
.seg button:disabled { opacity:0.32; cursor:not-allowed; }

/* Year range */
.yr { flex:1 1 22rem; min-width:18rem; }
.range { position:relative; height:2.4rem; }
.range .track { position:absolute; left:0; right:0; top:1.05rem; height:4px; background:var(--line); border-radius:0; }
.range .track .fill { position:absolute; height:100%; background:var(--accent); }
.range input[type=range] { position:absolute; left:0; right:0; top:0; width:100%; margin:0; -webkit-appearance:none; appearance:none; background:transparent; pointer-events:none; height:2.4rem; }
.range input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; pointer-events:all; width:16px; height:16px; border-radius:50%; background:var(--paper); border:2.5px solid var(--ink); cursor:pointer; margin-top:0; }
.range input[type=range]::-moz-range-thumb { pointer-events:all; width:16px; height:16px; border-radius:50%; background:var(--paper); border:2.5px solid var(--ink); cursor:pointer; }
.range .ends { display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:0.74rem; color:var(--ink); margin-top:1.5rem; font-variant-numeric:tabular-nums; }

/* Flag toggles + filters */
.filters-row { align-items:center; }
.flagbar { display:flex; flex-wrap:wrap; gap:0.45rem; }
.flag-chip { font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.04em; padding:0.38rem 0.7rem; border:1.5px solid var(--line); background:#fffdf8; color:var(--ink-soft); cursor:pointer; user-select:none; white-space:nowrap; }
.flag-chip:hover { border-color:var(--ink-soft); }
.flag-chip.on { background:var(--accent); border-color:var(--accent); color:var(--paper); }
.addfilter { display:flex; align-items:flex-end; gap:0.5rem; }
.activefilters { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.9rem; }
.activefilters:empty { margin-top:0; }
.fchip { display:inline-flex; align-items:center; gap:0.5rem; font-family:var(--font-mono); font-size:0.72rem; background:var(--paper-deep); border:1px solid var(--line); padding:0.32rem 0.5rem 0.32rem 0.65rem; }
.fchip b { font-weight:600; color:var(--ink); }
.fchip .x { cursor:pointer; color:var(--ink-soft); border:0; background:none; font-size:0.9rem; line-height:1; padding:0; }
.fchip .x:hover { color:var(--accent); }

/* Chart stage */
.chart-stage { border:1px solid var(--line); border-top:3px solid var(--accent); padding:1.2rem 1.4rem 1.4rem; margin:0 0 1.4rem; background:#fffdf8; }
.chart-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:0.6rem 1rem; margin:0 0 0.4rem; }
.chart-head h2 { margin:0; font-size:1.25rem; }
.chart-head .csub { font-family:var(--font-mono); font-size:0.7rem; color:var(--ink-soft); letter-spacing:0.03em; }
.chart-actions { display:flex; gap:0.4rem; }
.chart-actions button { font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.06em; text-transform:uppercase; background:transparent; border:1.5px solid var(--line); padding:0.35rem 0.6rem; cursor:pointer; color:var(--ink-soft); }
.chart-actions button:hover { border-color:var(--accent); color:var(--accent); }
.chart-canvas { width:100%; margin-top:0.6rem; min-height:18rem; }
.chart-canvas svg { width:100%; height:auto; display:block; overflow:visible; }
.chart-canvas .empty { font-family:var(--font-mono); font-size:0.85rem; color:var(--ink-soft); padding:3rem 0; text-align:center; }

/* SVG chart primitives */
.cx-axis line, .cx-axis path { stroke:var(--line); stroke-width:1; }
.cx-grid line { stroke:var(--line); stroke-width:1; stroke-dasharray:2 4; opacity:0.7; }
.cx-tick { font-family:var(--font-mono); font-size:10px; fill:var(--ink-soft); }
.cx-bar { transition:opacity .12s; }
.cx-bar:hover { opacity:0.78; }
.cx-line { fill:none; stroke-width:2.25; stroke-linejoin:round; stroke-linecap:round; }
.cx-dot { stroke:#fffdf8; stroke-width:1.5; }
.cx-cell { stroke:#fffdf8; stroke-width:1; }
.cx-cell:hover { stroke:var(--ink); stroke-width:1.5; }
.cx-arc { stroke:#fffdf8; stroke-width:1.5; transition:opacity .12s; }
.cx-arc:hover { opacity:0.8; }
.cx-axis-title { font-family:var(--font-mono); font-size:10px; fill:var(--ink-soft); letter-spacing:0.06em; text-transform:uppercase; }

/* Legend */
.legend { display:flex; flex-wrap:wrap; gap:0.4rem 1.1rem; margin-top:0.9rem; }
.legend span { display:inline-flex; align-items:center; gap:0.4rem; font-family:var(--font-mono); font-size:0.72rem; color:var(--ink); }
.legend i { width:0.85rem; height:0.85rem; border-radius:2px; display:inline-block; }

/* Tooltip */
.cx-tip { position:fixed; z-index:50; pointer-events:none; background:var(--asphalt); color:var(--phosphor-text); font-family:var(--font-mono); font-size:0.72rem; line-height:1.4; padding:0.45rem 0.6rem; border:1px solid var(--asphalt-line); max-width:18rem; opacity:0; transition:opacity .1s; box-shadow:0 6px 22px rgba(0,0,0,0.25); }
.cx-tip b { color:var(--phosphor); }
.cx-tip.show { opacity:1; }

/* Data table */
.data-table-wrap { border:1px solid var(--line); margin:0 0 1.6rem; }
.data-table-wrap > summary { font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); cursor:pointer; padding:0.85rem 1.2rem; }
.data-table-wrap[open] > summary { border-bottom:1px solid var(--line); }
.data-table-wrap table { width:100%; border-collapse:collapse; font-size:0.85rem; }
.data-table-wrap th, .data-table-wrap td { text-align:left; padding:0.5rem 1.2rem; border-bottom:1px solid var(--line); }
.data-table-wrap th { font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); }
.data-table-wrap td.num { text-align:right; font-variant-numeric:tabular-nums; font-family:var(--font-mono); }

/* Preset gallery */
.presets { margin:2rem 0 1rem; }
.presets h3 { font-size:1.05rem; margin:0 0 0.2rem; }
.presets .phint { font-family:var(--font-mono); font-size:0.72rem; color:var(--ink-soft); margin:0 0 1rem; }
.preset-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(15rem,1fr)); gap:0.9rem; }
.preset { text-align:left; border:1px solid var(--line); border-left:3px solid var(--accent); background:#fffdf8; padding:0.9rem 1rem; cursor:pointer; transition:transform .1s, box-shadow .1s; }
.preset:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(29,26,20,0.08); }
.preset h4 { margin:0 0 0.25rem; font-size:0.95rem; font-family:var(--font-display); }
.preset p { margin:0; font-size:0.8rem; color:var(--ink-soft); line-height:1.45; }

.loading-bar { font-family:var(--font-mono); font-size:0.82rem; color:var(--ink-soft); padding:2rem 0; }
.loading-bar .pct { color:var(--accent); }

@keyframes cxdraw { to { stroke-dashoffset:0; } }
.chart-canvas.busy { opacity:0.55; transition:opacity .15s; }
.kpi dd[data-count] { transition:none; }

/* ───────────── Browse (filter form) ───────────── */
.filters { align-items:end; gap:1rem; }
.filters label { display:flex; flex-direction:column; gap:0.25rem; font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); }
.filters label.chk { flex-direction:row; align-items:center; gap:0.4rem; text-transform:none; letter-spacing:0; font-size:0.8rem; }
.filters select, .filters input { font-family:var(--font-body); font-size:0.9rem; padding:0.45rem 0.5rem; border:1.5px solid var(--line); border-radius:0; background:#fffdf8; color:var(--ink); }
.filters input[type=number] { width:5.5em; }
.filters .request-btn { align-self:end; }

.status-line { font-family:var(--font-mono); font-size:0.82rem; color:var(--ink-soft); margin:1rem 0 0.5rem; }
.catalog td .badge { margin-right:0.3rem; }
.prelim { font-family:var(--font-mono); font-size:0.6rem; text-transform:uppercase; letter-spacing:0.06em; background:var(--warn); color:var(--paper); padding:0.05em 0.4em; }

/* Crash detail panel */
.crash-detail { border:1px solid var(--line); border-top:3px solid var(--accent); padding:1.2rem 1.4rem; margin:1.25rem 0; }
.crash-detail .close { float:right; font-family:var(--font-mono); font-size:0.72rem; background:none; border:0; color:var(--ink-soft); cursor:pointer; }
.crash-detail h3 { margin:0 0 0.6rem; }
.crash-detail dl { display:grid; grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr)); gap:0.5rem 1.5rem; margin:0.4rem 0 0; }
.crash-detail dt { font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); }
.crash-detail dd { margin:0 0 0.4rem; }

/* Factor-coverage note (Browse form + Explorer panel) */
.factor-note { font-family:var(--font-mono); font-size:0.7rem; line-height:1.55; color:var(--ink-soft); margin:0.7rem 0 0; }

/* ───────────── Per-incident RECORD view ───────────── */
/* Grounded narrative — the prominent lede of an opened record. */
.rec-narrative { margin:0.4rem 0 1.1rem; }
.rec-narrative p { margin:0; font-family:var(--font-display); font-size:1.08rem; line-height:1.6; color:var(--ink); }
/* Sectioned drill-downs */
.rec-section { margin:1.1rem 0 0; padding-top:0.9rem; border-top:1px solid var(--line); }
.rec-section h4 { margin:0 0 0.55rem; font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft); }
.rec-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.6rem; }
.rec-list > li { padding:0; }
.rec-vh { font-size:0.95rem; color:var(--ink); }
.rec-vh .rec-meta { color:var(--ink-soft); font-size:0.86rem; }
.rec-meta { font-family:var(--font-mono); }
.rec-sub { font-size:0.85rem; color:var(--ink-soft); margin-top:0.15rem; }
/* Pre-crash / event chain — arrow-linked steps */
.rec-chain { font-size:0.88rem; color:var(--ink); margin-top:0.2rem; line-height:1.5; }
.rec-arr { color:var(--accent); font-family:var(--font-mono); padding:0 0.15rem; }
.rec-evrow { display:grid; grid-template-columns:6rem 1fr; gap:0.6rem; align-items:baseline; margin:0.3rem 0; }
.rec-vlab { font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); }
/* Coded contributing factors — domain → chips */
.rec-cfrow { display:grid; grid-template-columns:8.5rem 1fr; gap:0.6rem; align-items:baseline; margin:0.35rem 0; }
.rec-dom { font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); }
.rec-chips { display:flex; flex-wrap:wrap; gap:0.35rem; }
.rec-chip { font-family:var(--font-mono); font-size:0.74rem; padding:0.18rem 0.5rem; background:var(--paper-deep); border:1px solid var(--line); color:var(--ink); }
/* Similar incidents — ranked links */
.rec-nbrs li { padding:0; }
.rec-nbr { display:grid; grid-template-columns:1.6rem 1fr auto; gap:0.6rem; align-items:baseline; text-decoration:none; color:var(--ink); padding:0.35rem 0; border-bottom:1px solid var(--line); }
.rec-nbr:hover { color:var(--accent); }
.rec-nbr .rec-rank { font-family:var(--font-mono); font-size:0.78rem; color:var(--ink-soft); }
.rec-nbr .rec-head { font-size:0.9rem; }
.rec-nbr .rec-score { font-family:var(--font-mono); font-size:0.74rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
/* Crash-level field grid — collapsed below the rich record */
.rec-fields { margin:1.1rem 0 0; border-top:1px solid var(--line); }
.rec-fields > summary { font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-soft); cursor:pointer; padding:0.85rem 0 0.2rem; }
@media (max-width:680px){
  .rec-evrow, .rec-cfrow { grid-template-columns:1fr; gap:0.15rem; }
}

@media (max-width:680px){
  .exp-ctrl select { min-width:0; width:100%; }
  .exp-ctrl { flex:1 1 100%; min-width:0; }
  .kpi dd { font-size:1.6rem; }
  /* The chart-type segmented control (7 buttons) must wrap, not overflow the
     viewport — this was the worst break on the Explorer + CRSS Explorer. */
  .seg { display:flex; flex-wrap:wrap; width:100%; }
  .seg button { flex:1 1 auto; border-bottom:1px solid var(--line); padding:0.55rem 0.7rem; }
  /* year-range dual slider fills its column (drop the 18rem floor) */
  .yr { flex:1 1 100%; min-width:0; }
  .range { min-width:0; }
  /* Browse filter selects shrink to the column instead of sizing to their
     widest option and overflowing. */
  .filters { width:100%; }
  .filters label { min-width:0; max-width:100%; flex:1 1 9rem; }
  .filters label.chk { flex:1 1 100%; }
  .filters select { width:100%; max-width:100%; }
  /* Two-group crash subnav stacks; the vertical separator becomes a thin rule. */
  .crash-subnav { flex-direction:column; align-items:flex-start; gap:0.6rem; }
  .crash-subnav .grp { width:100%; }
  .crash-subnav .grp-sep { width:100%; height:1px; align-self:auto; }
  /* roomier touch targets */
  .flag-chip { padding:0.5rem 0.8rem; }
  .chart-actions button { padding:0.5rem 0.7rem; }
}
/* SVG chart axis/label text is sized in viewBox user-space units, so it
   shrinks with the chart on a phone (10px → ~3px, illegible). Bump it so the
   common few-category bar charts stay readable; exact values are always in the
   downloadable / expandable data table. */
@media (max-width:600px){
  .cx-tick { font-size:17px; }
  .cx-axis-title { font-size:16px; }
  /* Static CRSS severity-trend chart: the year ticks set font-size="11" as a
     presentation attribute, which author CSS overrides — bump on phones only
     (desktop keeps 11). */
  .nf-svg text { font-size:18px; }
}

/* --- non-fatal (CRSS) page ------------------------------------------------ */
.nf-fig { margin:1.5rem 0 0.5rem; }
.nf-svg { width:100%; height:auto; display:block; background:linear-gradient(180deg,#fffdf8,var(--paper)); border:1px solid var(--line); }
.nf-fig figcaption { font-family:var(--font-mono); font-size:0.72rem; line-height:1.5; letter-spacing:0.02em; color:var(--ink-soft); margin-top:0.6rem; }
.nf-leg-row { display:flex; gap:1.1rem; flex-wrap:wrap; margin-bottom:0.6rem; }
.nf-leg { font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); display:inline-flex; align-items:center; gap:0.4rem; }
.nf-leg i { width:0.85rem; height:0.85rem; display:inline-block; border:1px solid #fffdf8; }
.nf-sevcards { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.25rem; }
.nf-sc { border-left:4px solid var(--line-strong); padding:0.5rem 0.9rem; background:#fffdf8; }
.nf-sc dt { font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-soft); }
.nf-sc dd { font-family:var(--font-display); font-size:1.9rem; margin:0.1rem 0; color:var(--ink); font-variant-numeric:tabular-nums; }
.nf-sc p { font-size:0.8rem; color:var(--ink-soft); margin:0; }
.nf-cols { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem 2.5rem; margin-bottom:0.5rem; }
.nf-bar { display:grid; grid-template-columns:9.5rem 1fr 6.5rem; align-items:center; gap:0.7rem; margin:0.35rem 0; }
.nf-bl { font-size:0.86rem; color:var(--ink); }
.nf-bt { position:relative; height:0.85rem; background:var(--paper-deep); border:1px solid var(--line-soft); }
.nf-bf { position:absolute; left:0; top:0; height:100%; background:var(--accent); }
.nf-bv { font-family:var(--font-mono); font-size:0.82rem; text-align:right; color:var(--ink); font-variant-numeric:tabular-nums; }
.nf-bv small { color:var(--ink-faint); margin-left:0.4rem; }
.nf-note { font-family:var(--font-mono); font-size:0.66rem; text-transform:none; letter-spacing:0; color:var(--ink-faint); font-weight:400; }
@media (max-width:680px){
  .nf-sevcards { grid-template-columns:1fr; }
  .nf-cols { grid-template-columns:1fr; }
  .nf-bar { grid-template-columns:7rem 1fr 5.5rem; }
}