/* Shared live-explorer styles — supplements /assets/style.css (palette + vars).
   Used by the Research and Regulation explorers via /assets/explore/engine.js.
   Lifted from the crashes pillar's crashes.css explorer section so all three
   pillars render identically. */

/* Sub-nav (Overview · Explorer · …) */
.exp-subnav { display:flex; gap:1.4rem; flex-wrap:wrap; margin:0 0 1.75rem; padding-bottom:0.7rem; border-bottom:1px solid var(--line); }
.exp-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; }
.exp-subnav a.active, .exp-subnav a:hover { color:var(--accent); border-bottom-color:var(--accent); }

.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; flex-wrap:wrap; }
.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; }

@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; }
  .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; }
  .yr { flex:1 1 100%; min-width:0; }
  .range { min-width:0; }
  .flag-chip { padding:0.5rem 0.8rem; }
  .chart-actions button { padding:0.5rem 0.7rem; }
  .exp-subnav { gap:1rem; }
}
@media (max-width:600px){
  .cx-tick { font-size:17px; }
  .cx-axis-title { font-size:16px; }
}