/* Yavash thesis dashboard.
 *
 * The palette mirrors thesis/config.yaml so the dashboard and the matplotlib
 * figures that go into the thesis are visually one document. Slots are assigned
 * in fixed order and never cycled; the dark column is the same eight hues
 * re-stepped for the dark surface, not a separate palette.
 */

:root {
  color-scheme: light;

  /* categorical — fixed order */
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100;
  --s5:#e87ba4; --s6:#008300; --s7:#4a3aa7; --s8:#e34948;

  /* sequential (blue), light -> dark; heatmaps and ordinal funnels */
  --q1:#cde2fb; --q2:#9ec5f4; --q3:#6da7ec; --q4:#3987e5;
  --q5:#256abf; --q6:#184f95; --q7:#0d366b;

  /* diverging pair for net values: blue positive, red negative, gray middle */
  --pos0:#f0efec; --pos1:#9ec5f4; --pos2:#3987e5; --pos3:#184f95;
  --neg0:#f0efec; --neg1:#f0a9a8; --neg2:#e34948; --neg3:#a32020;
  --empty:#f4f3f0;

  /* status — reserved, never reused as a series colour */
  --good:#0ca30c; --warning:#fab219; --serious:#ec835a; --critical:#d03b3b;

  --ink:#0b0b0b; --ink2:#52514e; --muted:#898781;
  --grid:#e1e0d9; --axis:#c3c2b7;
  --surface:#f9f9f7; --panel:#fcfcfb;
  --border:rgba(11,11,11,.10);
  --radius:10px;
}

:root[data-theme="dark"], :root:where(:not([data-theme="light"])) {
  /* placeholder so the media query below can override cleanly */
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
    --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767;
    --q1:#0d366b; --q2:#184f95; --q3:#256abf; --q4:#3987e5;
    --q5:#6da7ec; --q6:#9ec5f4; --q7:#cde2fb;
    --pos0:#383835; --pos1:#256abf; --pos2:#3987e5; --pos3:#9ec5f4;
    --neg0:#383835; --neg1:#a32020; --neg2:#e34948; --neg3:#f0a9a8;
    --empty:#242422;
    --ink:#ffffff; --ink2:#c3c2b7; --muted:#898781;
    --grid:#2c2c2a; --axis:#383835;
    --surface:#0d0d0d; --panel:#1a1a19;
    --border:rgba(255,255,255,.10);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
  --s5:#d55181; --s6:#008300; --s7:#9085e9; --s8:#e66767;
  --q1:#0d366b; --q2:#184f95; --q3:#256abf; --q4:#3987e5;
  --q5:#6da7ec; --q6:#9ec5f4; --q7:#cde2fb;
  --pos0:#383835; --pos1:#256abf; --pos2:#3987e5; --pos3:#9ec5f4;
  --neg0:#383835; --neg1:#a32020; --neg2:#e34948; --neg3:#f0a9a8;
  --empty:#242422;
  --ink:#ffffff; --ink2:#c3c2b7; --muted:#898781;
  --grid:#2c2c2a; --axis:#383835;
  --surface:#0d0d0d; --panel:#1a1a19;
  --border:rgba(255,255,255,.10);
}

* { box-sizing:border-box; }

body {
  margin:0; background:var(--surface); color:var(--ink);
  font:14px/1.5 system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

h1 { font-size:18px; margin:0; letter-spacing:-.01em; }
h2 { font-size:15px; margin:34px 0 12px; font-weight:600; }
/* Group headings inside a section. They separate 8.1 from 8.2 from 8.3, so
   they need to read as a break in the page rather than as another line of
   text. The gap above is now much larger than the gap below, which is what
   makes the heading belong to what FOLLOWS it instead of floating between two
   blocks of figures — plus a rule to make the boundary literal. */
#content > h2 {
  margin:88px 0 20px; padding-top:26px; font-size:17px;
  border-top:1px solid var(--grid); letter-spacing:-.01em;
}
#content > h2:first-of-type { margin-top:34px; padding-top:0; border-top:none; }
#content > h2 + p.muted { margin:-10px 0 26px; max-width:78ch; line-height:1.55; }
.group-note { font-size:12px; }
h3 { font-size:13.5px; margin:0; font-weight:600; }
.muted { color:var(--muted); }
.small { font-size:12px; }
.hidden { display:none !important; }
.pad { padding:22px 4px; }
a { color:var(--s1); }

/* ------------------------------------------------------------- header */
header {
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  flex-wrap:wrap; padding:12px 24px; background:var(--panel);
  border-bottom:1px solid var(--grid); position:sticky; top:0; z-index:30;
}
header p { margin:3px 0 0; font-size:11.5px; }
.actions { display:flex; gap:7px; flex-wrap:wrap; align-items:center; }

button {
  font:inherit; font-size:12.5px; padding:6px 12px; border-radius:7px;
  border:1px solid var(--grid); background:var(--panel); color:var(--ink);
  cursor:pointer; transition:.12s;
}
button:hover:not(:disabled) { border-color:var(--muted); }
button:disabled { opacity:.45; cursor:not-allowed; }
button.primary { background:var(--s1); border-color:var(--s1); color:#fff; }
button.danger  { border-color:var(--s2); color:var(--s2); }
button.danger:hover:not(:disabled) { background:var(--s2); color:#fff; }
button.ghost { border:none; background:none; color:var(--muted); font-size:12px; }

/* -------------------------------------------------------------- runbar */
.runbar { padding:10px 24px; background:#1c1c1a; color:#e8e8e4;
          border-bottom:1px solid #000; }
.runbar-head { display:flex; align-items:center; gap:12px; margin-bottom:7px; }
.runbar-head .muted { color:#a3a29c; }
.runbar pre { margin:0; max-height:210px; overflow:auto; font-size:11px;
              line-height:1.45; white-space:pre-wrap;
              font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---------------------------------------------------------------- tabs */
nav { display:flex; gap:2px; padding:0 24px; background:var(--panel);
      border-bottom:1px solid var(--grid); overflow-x:auto;
      position:sticky; top:57px; z-index:29; }
nav button { border:none; background:none; border-radius:0; padding:10px 12px;
             color:var(--ink2); border-bottom:2px solid transparent;
             white-space:nowrap; font-size:12.5px; }
nav button.active { color:var(--s1); border-bottom-color:var(--s1); font-weight:600; }
nav button .sn { color:var(--muted); font-weight:400; margin-right:5px; }

/* ------------------------------------------------------------- filters */
.filterbar {
  padding:10px 24px; background:var(--panel); border-bottom:1px solid var(--grid);
  display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap;
  position:sticky; top:96px; z-index:28;
}
.fgroup { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.fgroup > .flabel { font-size:11px; color:var(--muted); text-transform:uppercase;
                    letter-spacing:.04em; margin-right:2px; }
.chip { border-radius:20px; padding:4px 12px; font-size:12px; }
.chip.active { background:var(--ink); border-color:var(--ink);
               color:var(--panel); font-weight:600; }
.chip.warn-chip { border-style:dashed; }

.charsel { position:relative; }
.charsel > button.on { border-color:var(--s1); color:var(--s1); font-weight:600; }
.charmenu {
  position:absolute; top:calc(100% + 6px); left:0; z-index:40; min-width:250px;
  max-height:340px; overflow:auto; background:var(--panel);
  border:1px solid var(--grid); border-radius:9px; padding:8px;
  box-shadow:0 8px 26px rgba(0,0,0,.14);
}
.charmenu label { display:flex; align-items:center; gap:8px; padding:4px 6px;
                  border-radius:6px; font-size:12.5px; cursor:pointer; }
.charmenu label:hover { background:var(--surface); }
.charmenu label .n { margin-left:auto; color:var(--muted); font-size:11px;
                     font-variant-numeric:tabular-nums; }
.charmenu .mhead { display:flex; justify-content:space-between; align-items:center;
                   padding:2px 6px 6px; border-bottom:1px solid var(--grid);
                   margin-bottom:6px; }
.active-filters { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.tagf { background:var(--surface); border:1px solid var(--grid); border-radius:20px;
        padding:3px 8px 3px 10px; font-size:11.5px; display:flex; gap:6px;
        align-items:center; }
.tagf b { font-weight:600; }
.tagf button { border:none; background:none; padding:0 2px; color:var(--muted);
               font-size:14px; line-height:1; cursor:pointer; }

main { padding:22px 24px 90px; max-width:1500px; }
.tab { display:none; }
.tab.active { display:block; }

.section-head { margin-bottom:18px; }
.section-head h2 { margin:0 0 4px; font-size:17px; }
.section-head p { margin:0; color:var(--ink2); font-size:13px; }

/* The section preamble, now at the foot of the tab and collapsible. It reads as
   an appendix rather than a gate: no blue rule shouting for attention above the
   first figure, just a quiet block you can fold away once you know it. */
.sec-notes { margin:56px 0 10px; padding:0; background:var(--panel);
             border:1px solid var(--grid); border-radius:var(--radius); }
.sec-notes > summary { padding:11px 15px; font-size:12px; font-weight:600;
                       color:var(--ink2); cursor:pointer; list-style:none;
                       display:flex; align-items:center; gap:7px; }
.sec-notes > summary::-webkit-details-marker { display:none; }
.sec-notes > summary::before { content:'▾'; color:var(--muted); font-size:10px;
                               transition:transform .15s; }
.sec-notes:not([open]) > summary::before { transform:rotate(-90deg); }
.sec-notes > summary:hover { color:var(--ink); }
.sec-notes ul { margin:0; padding:0 0 4px; list-style:none;
                border-top:1px solid var(--grid); }
.sec-notes li { padding:8px 15px; font-size:12.5px; color:var(--ink2);
                border-bottom:1px solid var(--grid); max-width:96ch;
                line-height:1.55; }
.sec-notes li:last-child { border-bottom:none; }

/* --------------------------------------------------------------- cards */
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(186px,1fr));
         gap:11px; margin-bottom:8px; }
.card { background:var(--panel); border:1px solid var(--grid);
        border-radius:var(--radius); padding:12px 14px; }
.card .k { font-size:11px; color:var(--muted); text-transform:uppercase;
           letter-spacing:.04em; line-height:1.35; }
.card .v { font-size:23px; font-weight:600; margin:5px 0 3px;
           letter-spacing:-.02em; }
.card .v.text { font-size:14px; font-weight:600; }
/* The explanation is hidden until asked for. A KPI row is meant to be scanned;
   six tiles each carrying a formula is a paragraph pretending to be a summary. */
.card .k { display:flex; align-items:flex-start; gap:6px; justify-content:space-between; }
.card-i { background:none; border:0; color:var(--muted); cursor:pointer;
          font-size:12px; line-height:1; padding:0 1px; flex:none; }
.card-i:hover { color:var(--ink); }
.card-info { display:none; margin-top:8px; padding-top:8px;
             border-top:1px solid var(--grid); font-size:11.5px;
             color:var(--ink2); overflow-wrap:anywhere; }
.card.show-info .card-info { display:block; }
.card.show-info .card-i { color:var(--ink); }
.card-info p { margin:0 0 5px; }
.card-info p:last-child { margin-bottom:0; }

/* A figure being recomputed by its own control dims rather than unmounting —
   the page must not reflow while the reader is looking at it. */
.fig.busy .fig-body { opacity:.45; transition:opacity .12s; }
.fig-q { margin:0 0 9px; color:var(--ink2); }
svg .seg-pct { font-size:9.5px; font-weight:600; pointer-events:none; }
.fig-q + .fig-q { margin-top:-4px; }

/* -------------------------------------------------------------- figures */
.fig-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(560px,1fr));
            gap:16px; align-items:start; }
.fig { margin:0; background:var(--panel); border:1px solid var(--grid);
       border-radius:var(--radius); padding:14px 16px 12px; overflow:hidden; }
.fig.wide { grid-column:1 / -1; }
.fig-head { display:flex; justify-content:space-between; align-items:flex-start;
            gap:12px; margin-bottom:10px; }
.fig-sub { margin:3px 0 0; font-size:12px; color:var(--muted); }
.fig-body { overflow-x:auto; }
.fig svg.cv { width:100%; height:auto; display:block; max-width:100%; }
figcaption { margin-top:9px; font-size:11.5px; color:var(--muted);
             border-top:1px solid var(--grid); padding-top:7px; }

.fig-tools { display:flex; gap:3px; flex-wrap:wrap; align-items:center;
             flex-shrink:0; }
.fig-tools button { font-size:11px; padding:3px 7px; border-radius:5px;
                    color:var(--ink2); }
.fig-tools button.i { font-size:13px; padding:2px 6px; }
.fig-tools button.on { border-color:var(--s1); color:var(--s1); }
.flash { font-size:11px; color:var(--good); opacity:0; transition:.2s;
         margin-left:4px; }
.flash.on { opacity:1; }

.fig-controls { display:flex; gap:12px; flex-wrap:wrap; margin:0 0 10px; }
.fc { display:flex; align-items:center; gap:6px; font-size:11.5px;
      color:var(--ink2); }
.fc select { font:inherit; font-size:11.5px; padding:3px 6px; border-radius:6px;
             border:1px solid var(--grid); background:var(--panel);
             color:var(--ink); }

.fig-info { display:none; margin-top:11px; padding:11px 13px;
            background:var(--surface); border:1px solid var(--grid);
            border-radius:8px; font-size:12px; }
.fig.show-info .fig-info { display:block; }
.fig-info dl { margin:0; display:grid; grid-template-columns:1fr; gap:5px; }
.fig-info dl > div { display:grid; grid-template-columns:130px 1fr; gap:10px; }
.fig-info dt { color:var(--muted); }
.fig-info dd { margin:0; color:var(--ink2); word-break:break-word;
               white-space:pre-line; }
.fig-info .katex-display { margin:6px 0; text-align:left; }
.fig-notes { margin:9px 0 0; padding-left:17px; color:var(--ink2); }
.fig-notes li { margin:3px 0; }
.cap-suggest { margin:9px 0 0; color:var(--ink2); font-style:italic; }

.empty-note { padding:20px 14px; background:var(--surface); border-radius:8px;
              color:var(--ink2); font-size:12.5px; border:1px dashed var(--grid); }

/* ------------------------------------------------------------- chart bits */
svg .tick { font-size:10.5px; fill:var(--muted); }
svg .axis-label { font-size:11px; fill:var(--ink2); }
svg .bar-label { font-size:11.5px; fill:var(--ink2); }
svg .cap, svg .tip-val { font-size:11px; fill:var(--ink); font-weight:600; }
svg .end-label { font-size:11px; fill:var(--ink2); }
svg .cell { font-size:10.5px; font-weight:600; }
svg .slice { font-size:11.5px; fill:#fff; font-weight:600; }
svg .rule-label { font-size:10.5px; fill:var(--ink2); }
svg .hot { cursor:crosshair; }

.legend { display:flex; gap:14px; flex-wrap:wrap; margin-top:9px;
          font-size:11.5px; color:var(--ink2); }
.legend .lg { display:flex; align-items:center; gap:6px; }
.legend i { width:11px; height:11px; border-radius:3px; display:inline-block; }

/* Per-column key for stacked bars whose colours restart every column (see
   charts.js segLegend): one row per category, so a colour is only ever named
   within the group it belongs to, never implied to match across groups. */
.legend-groups { display:flex; flex-direction:column; gap:5px; margin-top:9px;
                 font-size:11px; color:var(--ink2); }
.legend-group { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.legend-group b { color:var(--ink); font-weight:600; flex-shrink:0; min-width:100px; }
.legend-group .lg { display:flex; align-items:center; gap:6px; }
.legend-group i { width:11px; height:11px; border-radius:3px; display:inline-block; flex-shrink:0; }

.pie-legend { margin-top:6px; display:grid;
              grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:2px 16px; }
.pie-row { display:flex; align-items:center; gap:8px; font-size:12px;
           padding:3px 0; border-bottom:1px solid var(--grid); }
.pie-row i { width:11px; height:11px; border-radius:3px; flex-shrink:0; }
.pie-row span { flex:1; color:var(--ink2); }
.pie-row b { font-variant-numeric:tabular-nums; }
.pie-row em { color:var(--muted); font-style:normal; font-size:11px;
              width:46px; text-align:right; font-variant-numeric:tabular-nums; }

.ckey { display:flex; align-items:center; gap:4px; margin-top:9px; }
.ckey i { width:22px; height:11px; display:inline-block; }
.ckey i:first-of-type { border-radius:3px 0 0 3px; }
.ckey i:last-of-type { border-radius:0 3px 3px 0; }
.ckey span:last-child { margin-left:8px; }

.tip { position:fixed; z-index:99; pointer-events:none; opacity:0;
       transition:opacity .1s; background:var(--ink); color:var(--panel);
       padding:7px 10px; border-radius:7px; font-size:11.5px; line-height:1.5;
       white-space:pre-line; max-width:290px;
       box-shadow:0 4px 16px rgba(0,0,0,.22); }
.tip.on { opacity:.97; }

/* -------------------------------------------------------------- tables */
table { border-collapse:collapse; width:100%; font-size:12.5px; }
/* ONE LONG CELL MUST NOT PUSH THE REST OF THE TABLE OFF THE SCREEN.
   Cells used to be `nowrap`, which is right for a coefficient and
   catastrophic for prose. The regression tables carry the merging rule and the
   estimator as ROWS, and one sentence in one cell made the table 5,400px wide
   inside a 1,400px card: every coefficient was rendered, correctly, four
   thousand pixels right of the visible area, with nothing on screen to suggest
   the table continued. It read as a table that had lost its estimates.
   Now every cell wraps and is capped at 44ch — relative to the font, so it
   holds at any zoom. Numbers are safe: they contain no spaces, so normal
   wrapping never splits one. Only text cells get `anywhere`, which is what
   breaks a long unbroken token like a user id. */
th, td { text-align:left; padding:6px 10px; border-bottom:1px solid var(--grid);
         white-space:normal; max-width:44ch; }
/* `break-word`, NOT `anywhere`: `anywhere` also lets the table layout shrink a
   column to one character, which chopped the significance column's "***" into
   three stacked lines. `break-word` keeps each column at least as wide as its
   longest word and only breaks a token that cannot fit alone. */
td:not(.num), th:not(.num) { overflow-wrap:break-word; }
/* A typeset equation is one indivisible box — KaTeX cannot wrap it — so a cell
   holding one is exempt from the cap; the specification table in 9.0 is a
   column of them and capping it laid the maths over the next column. The
   `overflow-x` is the fallback for browsers without `:has()`: the equation
   then scrolls inside its own cell instead of escaping it. */
td:has(.katex), td:has(.katex-display) { max-width:none; }
td .katex-display { margin:0; max-width:100%; overflow-x:auto;
                    overflow-y:hidden; }
th { font-weight:600; color:var(--ink2); font-size:11px; text-transform:uppercase;
     letter-spacing:.03em; background:var(--surface); position:sticky; top:0; z-index:1; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
tbody tr:hover { background:var(--surface); }
.table-wrap { overflow:auto; border:1px solid var(--grid); border-radius:8px;
              max-height:560px; }

/* --------------------------------------------------------------- panel */
.panel { background:var(--panel); border:1px solid var(--grid);
         border-radius:var(--radius); padding:16px; margin-bottom:14px; }
.panel > h3 { margin-bottom:10px; }
.kv { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
      gap:8px 20px; }
.kv div { display:flex; justify-content:space-between; gap:12px;
          border-bottom:1px dotted var(--grid); padding:4px 0; font-size:12.5px; }
.kv .kk { color:var(--ink2); }
.kv .vv { font-weight:600; font-variant-numeric:tabular-nums; }

.badge { font-size:10.5px; padding:2px 8px; border-radius:20px; font-weight:600; }
.badge.ok { background:rgba(12,163,12,.13); color:var(--good); }
.badge.warn { background:rgba(250,178,25,.16); color:#a8500f; }
.badge.stale { background:rgba(208,59,59,.13); color:var(--critical); }

.callout { border-left:3px solid var(--s2); background:var(--panel);
           padding:11px 15px; border-radius:0 8px 8px 0; margin:14px 0;
           font-size:12.5px; color:var(--ink2); }
.callout.info { border-left-color:var(--s1); }
.callout.warn { border-left-color:var(--warning); }

.spinner { display:inline-block; width:13px; height:13px; border-radius:50%;
           border:2px solid var(--grid); border-top-color:var(--s1);
           animation:spin .7s linear infinite; vertical-align:-2px; }
@keyframes spin { to { transform:rotate(360deg); } }

@media (max-width: 900px) {
  .fig-grid { grid-template-columns:1fr; }
  nav, .filterbar, header, main { padding-left:14px; padding-right:14px; }
}