/* accuracy.css: /accuracy, the proof page (T4). Linked from app/pages/accuracy.py only.
   Colours are parrot.css tokens, so light, dark and a saved theme all follow; SVG marks are coloured by class (no
   inline styles, no script). Tables never scroll inside a box: on desktop their heads stick under the site header,
   on phones (<= 640 px) their rows stack. */

/* ---------- section heads with an icon ---------- */
.acc-h { display: flex; align-items: center; gap: 8px; }
.acc-h > svg { flex: none; color: var(--bar); }
article .acc-sec h3 { display: flex; align-items: center; gap: 6px; }
article .acc-sec h3 > svg { color: var(--bar); }
.acc-sec > p, .acc-prose > p, .acc-prose > ul, .acc-prose > h2, .acc-prose > h3 { max-width: 75ch; }
.acc-note { font-size: 13px; color: var(--muted); }
.acc-thin { display: flex; gap: 8px; align-items: flex-start; max-width: 75ch; margin: 10px 0 4px; padding: 10px 12px;
  border-radius: var(--r); background: var(--b-warn-bg); color: var(--b-warn-fg); font-size: 14px; line-height: 1.45; }
.acc-thin svg { flex: none; margin-top: 2px; }

/* ---------- hero card ---------- */
.acc-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 352px); gap: 28px 40px; align-items: start;
  margin: 8px 0 28px; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: var(--shadow);
}
.acc-hero.one { grid-template-columns: minmax(0, 1fr); }
article .acc-hero p { line-height: 1.4; }
.ah-k { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 13.5px; color: var(--muted); }
.ah-k svg { color: var(--bar); }
.ah-big { margin: 4px 0 0; font: 600 64px/1 var(--font-head); letter-spacing: -.02em; color: var(--ink); }
.ah-sub { margin: 10px 0 18px; font-size: 14px; color: var(--ink-2); }
.ah-kpis { display: flex; flex-wrap: wrap; gap: 12px 40px; margin: 0 0 22px; }
.ah-kpis > div { display: flex; flex-direction: column; min-width: 0; }
.ah-kpis b { font: 600 24px/1.15 var(--font-head); color: var(--ink); }
.ah-kpis span { font-size: 12.5px; color: var(--muted); }
.ah-asof { display: flex; align-items: flex-start; gap: 6px; margin: 16px 0 0; font-size: 12.5px;
  color: var(--muted); }
.ah-asof > svg { flex: none; margin-top: 1px; color: var(--muted); }
.ah-asof > span { flex: 1 1 auto; min-width: 0; }

/* ---------- figures ---------- */
.acc-fig { margin: 0; min-width: 0; }
.acc-fig figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 8px;
  font-size: 13px; color: var(--muted); }
.acc-fig figcaption b { color: var(--ink); font-weight: 650; }
.acc-fig .key { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; }
.acc-fig .key .k { display: inline-flex; align-items: center; gap: 4px; }
.kd { overflow: visible; }

/* dot-on-bar chart: name | track | value | Beta, one grid per row */
.db-l { list-style: none; margin: 0; padding: 0; }
.db-r { display: grid; grid-template-columns: 96px minmax(0, 1fr) 46px 44px; align-items: center; gap: 0 10px;
  min-height: 26px; }
.db-n { font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.db-n { text-decoration: none; }
a.db-n:hover { color: var(--link); text-decoration: underline; }
.db-t { display: block; width: 100%; overflow: visible; }
.db-v { font-size: 12.5px; text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.db-b { justify-self: start; }
.db-b.badge { font-size: 10px; padding: 1px 5px; }
.db-ax .db-t text { font-size: 10.5px; fill: var(--muted); }
.trk { stroke: var(--track); stroke-width: 4; stroke-linecap: round; }
.db-t .g { stroke: var(--line); stroke-width: 1; }
.bar { stroke: var(--ink-2); stroke-width: 2; }
.dot { fill: var(--bar); stroke: var(--surface); stroke-width: 1.5; }
.dotb { fill: var(--surface); stroke: var(--ink-2); stroke-width: 2; }

/* reliability diagram */
.acc-fig.cal svg.rel { display: block; width: 100%; max-width: 340px; height: auto; overflow: visible; }
.rel .g { stroke: var(--line); stroke-width: 1; }
/* the reference line is drawn over the bins' line and reads at 3:1 or more in both themes */
.rel .diag { stroke: var(--muted); stroke-opacity: .75; stroke-width: 1.5; stroke-dasharray: 4 4; }
.rel .rl { fill: none; stroke: var(--bar); stroke-width: 1; stroke-opacity: .55; }
.rel .rd { fill: var(--bar); fill-opacity: .85; stroke: var(--surface); stroke-width: 1.5; }
.rel .rd.cap { fill-opacity: 1; stroke: var(--ink); stroke-width: 1.5; }
.rel .tk, .rel .ax { font-size: 10.5px; fill: var(--muted); }
.acc-fig.cal .cap { margin: 6px 0 2px; font-size: 13.5px; color: var(--ink); }
.acc-fig.cal .src { margin: 0; font-size: 12px; color: var(--muted); }
.acc-more { margin-top: 8px; font-size: 13px; }
.acc-more > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; cursor: pointer;
  color: var(--link); }
.acc-more[open] > summary { margin-bottom: 4px; }

/* ---------- tables (own markup; no overflow box, so heads stick under the site header) ---------- */
.acc-tw { margin: 12px 0 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
article .acc-t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
article .acc-t caption { caption-side: top; padding: 10px 12px 8px; text-align: left; font-weight: 650;
  font-size: 13.5px; color: var(--ink); }
article .acc-t thead th { position: sticky; top: var(--head-h); z-index: 2; vertical-align: bottom;
  border-bottom: 1px solid var(--line); }
article .acc-t thead th small { display: block; font-weight: 500; font-size: 11px; }
article .acc-t:not(:has(caption)) thead th:first-child { border-top-left-radius: var(--r); }
article .acc-t:not(:has(caption)) thead th:last-child { border-top-right-radius: var(--r); }
article .acc-t .r { text-align: right; }
article .acc-t th[scope="row"] { font-weight: 550; }
article .acc-t .n { color: var(--muted); font-size: 12.5px; }
article .acc-t tfoot .tot > * { border-top: 1px solid var(--line-2); border-bottom: 0; background: var(--surface-2); }
article .acc-t tfoot .tot th { font-weight: 650; }
article .acc-t tbody tr:last-child > * { border-bottom: 0; }
article .acc-t tr.beta > * { background: var(--hatch); }
article .acc-t a { text-decoration: none; }
article .acc-t a:hover { text-decoration: underline; }
article .acc-t .badge { vertical-align: 1px; margin-left: 4px; }
.acc-t.sm { font-size: 13px; }
article .acc-t.sm th, article .acc-t.sm td { padding: 5px 10px; }
article .acc-t.sm thead th { position: static; }
.cell-bar { display: inline-flex; align-items: center; gap: 8px; }
.sbar { flex: none; }
.sbar .st { fill: var(--track); }
.sbar .sf { fill: var(--bar); }

/* narrow tables keep their numbers near their labels on wide screens */
.acc-tw.w-s { max-width: 720px; }
.acc-tw.w-m { max-width: 880px; }
.st-i { display: inline-flex; align-items: center; gap: 6px; }
.st-i svg { flex: none; }
.st-i.ok svg { color: var(--pos); }
.st-i.warn svg { color: var(--b-warn-fg); }
.st-i.none svg { color: var(--muted); }

/* mismatches */
article .acc-t.mm td, article .acc-t.mm th { padding: 7px 10px; vertical-align: middle; }
.acc-t.mm .m-date { white-space: nowrap; color: var(--muted); font-size: 13px; }
.acc-t.mm .m-subj a, .acc-t.mm .m-subj { overflow-wrap: anywhere; }
.acc-t.mm .m-subj a { display: inline-flex; align-items: center; gap: 7px; }
.acc-t.mm .m-subj .ei { flex: none; }
.acc-t.mm .m-word b { font-weight: 600; }
.acc-t.mm .m-cnt { white-space: nowrap; }
.acc-t.mm .m-who { font-size: 13px; color: var(--ink-2); }
.res { display: inline-block; min-width: 34px; padding: 1px 6px; border-radius: 5px; text-align: center;
  font: 650 11.5px/1.5 var(--font-mono); }
.res.y { background: var(--b-teal-bg); color: var(--b-teal-fg); }
.res.n { background: var(--surface-3); color: var(--ink-2); }

/* ---------- narrower screens ---------- */
@media (max-width: 980px) {
  .acc-hero { grid-template-columns: minmax(0, 1fr); }
  .acc-fig.cal { max-width: 420px; }
}
@media (max-width: 640px) {
  .acc-hero { padding: 16px; margin-bottom: 20px; }
  .ah-big { font-size: 52px; }
  .ah-kpis { gap: 10px 28px; }
  .db-r { grid-template-columns: 84px minmax(0, 1fr) 44px 40px; gap: 0 8px; }
  /* the diagram draws at 294-324 px here: larger viewBox text keeps its ticks at 10.5 px or more */
  .rel .tk, .rel .ax { font-size: 12.5px; }

  /* stacked rows: the row header on its own line, then label/value pairs */
  article .acc-t.stk thead, article .acc-t.mm thead { position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  article .acc-t.stk, article .acc-t.stk tbody, article .acc-t.stk tfoot, article .acc-t.stk tr,
  article .acc-t.mm, article .acc-t.mm tbody, article .acc-t.mm tr { display: block; width: 100%; }
  article .acc-t.stk caption { display: block; }
  article .acc-t.stk tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 10px 12px;
    border-bottom: 1px solid var(--line); }
  article .acc-t.stk3 tr { grid-template-columns: 1fr 1fr 1fr; }
  article .acc-t.stk tr > * { display: block; padding: 0; border: 0; text-align: left; background: none; }
  article .acc-t.stk tr > th[scope="row"] { grid-column: 1 / -1; font-weight: 650; }
  article .acc-t.stk td[data-l]::before { content: attr(data-l); display: block; font-size: 11.5px; font-weight: 400;
    color: var(--muted); }
  article .acc-t.stk td[data-l]:empty { display: none; }
  article .acc-t.stk tbody tr:last-child { border-bottom: 0; }
  article .acc-t.stk tfoot tr { border-top: 1px solid var(--line-2); background: var(--surface-2); }
  article .acc-t.stk tr.beta { background: var(--hatch); }

  /* mismatches: subject and date, then the word, then venue, result, count and rule on one wrapping line */
  article .acc-t.mm tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; padding: 10px 12px;
    border-bottom: 1px solid var(--line); }
  article .acc-t.mm tr > * { display: block; padding: 0; border: 0; text-align: left; }
  .acc-t.mm .m-subj { order: 1; flex: 1 1 60%; min-width: 0; font-weight: 600; }
  .acc-t.mm .m-date { order: 2; margin-left: auto; font-size: 12.5px; }
  .acc-t.mm .m-word { order: 3; flex-basis: 100%; }
  .acc-t.mm .m-ven { order: 4; }
  .acc-t.mm .m-res { order: 5; }
  .acc-t.mm .m-cnt { order: 6; font-size: 13px; }
  .acc-t.mm .m-cnt::before { content: "count "; color: var(--muted); }
  .acc-t.mm .m-who { order: 7; font-size: 12.5px; color: var(--muted); }
  .acc-t.mm .m-who.none { display: none; }
}
@media (max-width: 380px) {
  .ah-big { font-size: 46px; }
  .db-r { grid-template-columns: 82px minmax(0, 1fr) 42px 38px; gap: 0 6px; }
  .db-n { font-size: 12.5px; }
  .sbar { display: none; }
}
@media (forced-colors: active) {
  .dot, .rel .rd, .sbar .sf { forced-color-adjust: none; }
}