/* Data & AI page (/about/): the interactive charts (evidence.js) and the Data sources block. Follows
   /landing.css and /about/evidence.css, whose tokens (--bg, --ink, --body, --muted, --line, --accent) it uses.
   Same system as the Atlas charts: hairline grid, thin marks, one red accent for focus. The series colors encode
   data (validated for color vision deficiency against both page colors) and are defined here for light and dark.
   No inline styles anywhere (strict CSP); the tooltip is placed with CSSOM properties. The wearable line chart
   moved to the Atlas with its styles. */

:root {
  --ev-grid: #e4e3dc;
  --ev-axis: #a9a89f;
  --ev-band: rgba(25, 25, 24, 0.035);
  --ev-series-1: #2a78d6;
  --ev-series-2: #eb6834;
  --ev-series-0: #84837b;
  --ev-on-ink: #f6f5f1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ev-grid: #2c2f2b;
    --ev-axis: #5a5e57;
    --ev-band: rgba(238, 238, 231, 0.04);
    --ev-series-1: #3987e5;
    --ev-series-2: #d95926;
    --ev-series-0: #8f938a;
    --ev-on-ink: #171918;
  }
}
:root[data-theme="dark"] {
  --ev-grid: #2c2f2b;
  --ev-axis: #5a5e57;
  --ev-band: rgba(238, 238, 231, 0.04);
  --ev-series-1: #3987e5;
  --ev-series-2: #d95926;
  --ev-series-0: #8f938a;
  --ev-on-ink: #171918;
}

/* Panels: a hairline above each, like the homepage doors; no card fill. */
.ev-panel {
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: clamp(20px, 3vw, 28px) 0 0;
  border-top: 1px solid var(--ink);
  scroll-margin-top: 88px;
}

.ev-title {
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 400;
  line-height: 1.25;
}

.ev-subtitle {
  margin: 1.6rem 0 0.3rem;
  color: var(--ink);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.3;
}

.ev-takeaway {
  max-width: 52rem;
  margin: 0.6rem 0 1rem;
  color: var(--body);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.55;
}

.ev-note {
  max-width: 52rem;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.ev-takeaway:empty,
.ev-note:empty,
.ev-subtitle:empty,
.ev-source:empty {
  display: none;
}

.ev-source {
  max-width: 60rem;
  margin: 14px 0 0;
  color: var(--body);
  font-size: 0.88rem;
  line-height: 1.55;
}

.ev-source a {
  font-weight: 400;
}

.ev-error {
  color: var(--muted);
  font-style: italic;
}

/* Controls: one row above the chart; each group is a row of toggle buttons. */
.ev-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0 0 12px;
}

.ev-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ev-toggle {
  min-height: 40px;
  padding: 7px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.3;
  cursor: pointer;
}

.ev-toggle:hover {
  border-color: var(--ink);
}

.ev-toggle[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
}

/* Legend */
.ev-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0 0 6px;
  color: var(--body);
  font-size: 0.9rem;
}

.ev-legend:empty {
  display: none;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.sw {
  display: inline-block;
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ev-series-1);
}

.sw.s1 { background: var(--ev-series-1); }
.sw.s2 { background: var(--ev-series-2); }
.sw.s0 { background: var(--ev-series-0); }

/* Charts */
.ev-chart {
  width: 100%;
  min-height: 60px;
  margin: 4px 0 0;
}

.ev-chart svg {
  display: block;
  overflow: visible;
}

.ax-grid { stroke: var(--ev-grid); stroke-width: 1; }
.ax-base { stroke: var(--ev-axis); stroke-width: 1; }
.ax-text { fill: var(--muted); font-family: var(--sans); font-variant-numeric: tabular-nums; }
.ax-title { fill: var(--body); font-family: var(--sans); font-weight: 600; }
.row-band { fill: var(--ev-band); }
.header-strip { fill: var(--bg); }
.row-label { fill: var(--ink); font-family: var(--sans); }
.row-header { fill: var(--muted); font-family: var(--sans); font-weight: 600; }
.row-note { fill: var(--muted); font-family: var(--sans); font-style: italic; }
.ref-line { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 5 4; }
.ref-text { fill: var(--muted); font-family: var(--sans); }

.ci { stroke-width: 2; stroke-linecap: round; }
.dot { stroke: var(--bg); stroke-width: 2; }
.hit { fill: transparent; }
.mark { cursor: default; }
.mark:focus { outline: none; }
.mark:focus-visible .dot, .mark:hover .dot { stroke: var(--ink); stroke-width: 2.5; }
.mark:focus-visible .hit { stroke: var(--accent); stroke-width: 2; }
.dot.ref { fill: var(--bg); stroke: var(--ev-series-0); stroke-width: 2.5; }

.s1 .ci { stroke: var(--ev-series-1); }
.s2 .ci { stroke: var(--ev-series-2); }
.s0 .ci { stroke: var(--ev-series-0); }
.s1 .dot { fill: var(--ev-series-1); }
.s2 .dot { fill: var(--ev-series-2); }
.s0 .dot { fill: var(--ev-series-0); }
.s1 .dot.ref, .s0 .dot.ref { fill: var(--bg); }

/* Tooltip */
.ev-tooltip {
  position: fixed;
  z-index: 60;
  max-width: min(380px, calc(100vw - 16px));
  padding: 8px 11px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--ev-on-ink);
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.4;
  pointer-events: none;
}

.ev-tooltip[hidden] {
  display: none;
}

/* Tables under the charts */
.ev-table {
  margin: 12px 0 0;
}

.ev-table summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
}

.table-scroll {
  max-width: 100%;
  margin: 6px 0 12px;
  overflow-x: auto;
}

.ev-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.ev-table caption {
  padding: 4px 0 6px;
  color: var(--muted);
  font-size: 0.875rem;
  text-align: left;
}

.ev-table th,
.ev-table td {
  padding: 5px 10px 5px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.ev-table th {
  color: var(--body);
  font-weight: 600;
}

.ev-table td.num,
.ev-table th.num {
  text-align: right;
  white-space: nowrap;
}

.ev-table tr.group-row th {
  padding-top: 12px;
  border-bottom: 1px solid var(--line-strong);
  color: var(--muted);
}

/* Data sources: two columns of links, each with one line on what it is used for. */
.source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 40px;
  margin-top: clamp(16px, 2vw, 24px);
}

.source-head {
  margin: 0 0 4px;
  padding-top: 12px;
  border-top: 1px solid var(--ink);
  font-size: 1.05rem;
  font-weight: 600;
}

.source-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.source-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.source-list a {
  font-weight: 600;
}

.source-list span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

@media (max-width: 860px) {
  .source-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (forced-colors: active) {
  .ev-toggle[aria-pressed="true"] { border: 2px solid Highlight; }
  .sw { forced-color-adjust: none; }
}

@media print {
  .ev-controls, .ev-tooltip { display: none; }
}