/* Settings > Analytics: charts and tiles, in the collier.phd notebook look (tiles are inked boxes, numbers in the display serif). Chart colors are the validated reference palette
   (dataviz skill), stepped separately for light and dark. Every chart starts at zero and has a table. */

.an-root {
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
  --series-5: #e87ba4; --series-6: #008300; --series-7: #4a3aa7; --series-other: #9a978f;
  --grid: #e6dfcd; --axis: #a99e86; --chart-ink: var(--ink-3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .an-root {
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
    --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-other: #6f6d67;
    --grid: #34463f; --axis: #66796f;
  }
}
:root[data-theme="dark"] .an-root {
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
  --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-other: #6f6d67;
  --grid: #34463f; --axis: #66796f;
}

.an-controls { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-bottom: 1rem; }
.an-range { display: inline-flex; border: 2px solid var(--ink); border-radius: var(--sketch); overflow: hidden; }
.an-range button { min-height: var(--tap); padding: 0 .9rem; border: 0; background: var(--surface); color: var(--ink); font: 500 .82rem var(--font-mono); cursor: pointer; }
.an-range button + button { border-left: 2px solid var(--ink); }
.an-range button[aria-pressed="true"] { background: var(--note-bg); color: var(--paper-ink); font-weight: 600; }
.an-range button:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.an-check { display: inline-flex; align-items: center; gap: .4rem; min-height: var(--tap); }

.an-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; margin: 0 0 1rem; }
.an-tile { background: var(--surface); border: 2px solid var(--ink); border-radius: var(--sketch); padding: .65rem .8rem; }
.an-tile dt { font: 500 .7rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.an-tile dd { margin: .15rem 0 0; font: 400 1.65rem/1.15 var(--font-serif); font-variant-numeric: tabular-nums; }
.an-tile .an-sub { display: block; font: .78rem var(--font-sans); color: var(--ink-3); }

.an-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 1.25rem; }
.an-card { min-width: 0; }
.an-card h3 { font-size: 1.15rem; margin: 0 0 .15rem; }
.an-card .an-note { font-size: .82rem; color: var(--ink-3); margin: 0 0 .5rem; }
.an-h { font-size: 1.35rem; margin: 1.6rem 0 .5rem; padding-top: .8rem; border-top: 2px dashed var(--line); }

.an-chart { position: relative; width: 100%; }
.an-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.an-chart text { fill: var(--chart-ink); font-size: 11px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.an-chart .an-label { fill: var(--ink-2); }
.an-chart .grid { stroke: var(--grid); stroke-width: 1; }
.an-chart .base { stroke: var(--axis); stroke-width: 1; }
.an-chart .hit { fill: transparent; cursor: default; }
.an-chart .hit:hover + .hover-wash, .an-chart .hover-wash.on { opacity: 1; }
.an-chart .hover-wash { fill: var(--ink); opacity: 0; pointer-events: none; fill-opacity: .06; }
.an-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow);
  padding: .4rem .55rem; font-size: .8rem; line-height: 1.35; min-width: 120px; max-width: 260px; }
.an-tip b { display: block; margin-bottom: .15rem; }
.an-tip .row { display: flex; align-items: center; gap: .4rem; justify-content: space-between; }
.an-tip .row span:last-child { font-variant-numeric: tabular-nums; }

.an-legend { display: flex; flex-wrap: wrap; gap: .25rem .9rem; list-style: none; margin: .4rem 0 0; padding: 0; font-size: .8rem; color: var(--ink-2); }
.an-legend li { display: inline-flex; align-items: center; gap: .35rem; }
.an-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; display: inline-block; }

.an-table summary { cursor: pointer; font-size: .82rem; color: var(--accent); margin-top: .4rem; min-height: var(--tap); display: flex; align-items: center; }
.an-table .table-wrap { margin-top: .35rem; max-height: 320px; overflow: auto; }
.an-empty { color: var(--ink-3); font-size: .9rem; padding: .75rem 0; }

.an-tree details { border-left: 2px solid var(--line); padding-left: .6rem; margin: .25rem 0; }
.an-tree summary { cursor: pointer; padding: .2rem 0; }
.an-tree .count { font-variant-numeric: tabular-nums; color: var(--ink-3); margin-left: .35rem; }
.an-tree ul { margin: .2rem 0 .4rem 1rem; padding: 0; font-size: .88rem; }

.an-themes { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .5rem; }
.an-themes li { background: var(--surface-2); border-radius: var(--radius-sm); padding: .55rem .75rem; border-left: 4px solid var(--hl-yellow); }
.an-themes .ex { font-size: .82rem; color: var(--ink-2); margin: .2rem 0 0 1rem; padding: 0; }
.an-price input { width: 6.5rem; min-height: var(--tap); }
.an-price td input[type="text"] { width: 14rem; }
.an-warn { background: var(--legal-bg) linear-gradient(90deg, transparent 6px, var(--legal-margin) 6px 8px, transparent 8px); color: var(--ink); border-radius: var(--radius-sm); padding: .6rem .8rem .6rem 1.1rem; margin-bottom: 1rem; font-size: .9rem; }
.an-warn code { font-size: .82rem; }

/* Settings > Evals: compare models and judges, questions hardest first (admin-evals-explore.js) */
.evx-block { margin: 1rem 0 1.25rem; }
.evx-bar { display: inline-block; width: 8rem; height: .7rem; background: var(--line, #ddd); border-radius: 3px; vertical-align: middle; overflow: hidden; }
.evx-bar-fill { display: block; height: 100%; background: var(--accent, #2b6cb0); }
.evx-bars td:nth-child(2) .evx-bar { width: 100%; min-width: 8rem; }
.evx-heat td, .evx-heat th { white-space: nowrap; color: #1d2126; }
.evx-heat thead th, .evx-heat tbody th { color: inherit; }
.evx-total th, .evx-total td { border-top: 2px solid var(--line-strong, #999); }
.evx-chip { display: inline-block; margin: .1rem .25rem .1rem 0; padding: .05rem .4rem; border-radius: 999px; font-size: .85em; color: #1d2126; }
.evx-answer { border-top: 1px dashed var(--line, #ccc); padding-top: .75rem; margin-top: .75rem; }
.evx-answer-text { max-width: 70ch; }
.evx-v-pass { color: #1f6b33; font-weight: 600; }
.evx-v-fail { color: #9b1c1c; font-weight: 600; }
.evx-v-err { color: #7a5b00; }
.evx-judges th[scope=row] { font-weight: 600; white-space: nowrap; }
.evx-judges td.num { white-space: nowrap; }
.evx-reason-row td { padding-top: 0; color: var(--ink-2, inherit); font-size: .92rem; border-top: 0; }
.evx-judge-row td, .evx-judge-row th { border-bottom: 0; }
.evx-reason-label { font-weight: 600; }
.evx-issues { margin: .25rem 0 0 1.1rem; padding: 0; }
.evx-reason { max-width: min(72ch, 82vw); position: sticky; left: .75rem; }