/*
 * Answer blocks: the shared tokens and the two states every block has before
 * it draws (pending, mid-stream) or when it cannot (fallback). Each block's
 * own sheet is beside this one (sheet.css, chart.css, ...).
 *
 * Roles colour the same quantity the same way across a whole reply: in a
 * table header, a derivation, a calculator input and a chart axis.
 *   measure  red   - the student measures or is given it from the experiment
 *   calc     blue  - the student calculates it
 *   given    ink   - a constant or a value from the problem
 *   ignore   grey  - not needed (it cancels, or it is out of scope)
 * A palette (body[data-ab-palette], set from Settings or a ```style block)
 * may restate any token; blocks read the tokens, never raw colours.
 *
 * Declared on body as well as :root: the aliases (--ab-ink: var(--text) ...)
 * resolve where they are declared, and the light theme's --text lives on
 * body[data-theme] as well as html[data-theme]. On :root alone a page that
 * themes only <body> would read dark ink in light mode.
 */
:root, body {
  --ab-ink: var(--text);
  --ab-muted: var(--text-muted);
  --ab-card: var(--bg-elev-1);
  --ab-paper: var(--bg-elev-2);
  --ab-rule: var(--border-strong);
  --ab-hair: var(--border);
  --ab-accent: var(--accent);
  --ab-measure: #f0696e;
  --ab-measure-soft: rgba(240, 105, 110, 0.14);
  --ab-calc: #86aaf2;
  --ab-calc-soft: rgba(134, 170, 242, 0.14);
  --ab-given: var(--text);
  --ab-ignore: var(--text-muted);
  --ab-good: #62c58d;
  --ab-good-soft: rgba(98, 197, 141, 0.14);
  --ab-warn: #e5b060;
  --ab-warn-soft: rgba(229, 176, 96, 0.16);
  --ab-radius: 12px;
  --ab-radius-sm: 8px;
  --ab-font-mono: var(--font-mono);
  --ab-font-math: 'KaTeX_Main', 'STIX Two Text', 'Times New Roman', Georgia, serif;
  --ab-font-ui: var(--font-sans);
}
body[data-theme="light"] {
  --ab-measure: #bc2a30;
  --ab-measure-soft: #f8e3e2;
  --ab-calc: #1d4e9e;
  --ab-calc-soft: #e2eaf8;
  --ab-good: #2b7849;
  --ab-good-soft: #e0f1e6;
  --ab-warn: #a3620c;
  --ab-warn-soft: #fbeeda;
}

.ab-block { margin: 14px 0; max-width: 100%; min-width: 0; }

.ab-pending {
  display: flex; flex-direction: column; gap: 10px;
  margin: 14px 0; padding: 18px 16px;
  border: 1px solid var(--ab-hair); border-radius: var(--ab-radius);
  background: var(--ab-card);
}
.ab-pending-bar {
  display: block; height: 10px; width: 62%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ab-hair), var(--ab-rule), var(--ab-hair));
  background-size: 200% 100%;
  animation: ab-sheen 1.4s ease-in-out infinite;
}
.ab-pending-cap { font: 500 12.5px/1.3 var(--ab-font-ui); color: var(--ab-muted); }
@keyframes ab-sheen { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .ab-pending-bar { animation: none; } }

.ab-fallback {
  margin: 14px 0; padding: 12px 14px;
  border: 1px dashed var(--ab-rule); border-radius: var(--ab-radius);
  color: var(--ab-muted); font: 14px/1.45 var(--ab-font-ui);
}
.ab-fallback p { margin: 0 0 6px; }
.ab-fallback pre {
  margin: 8px 0 0; padding: 10px; overflow-x: auto;
  font: 12px/1.45 var(--ab-font-mono); white-space: pre-wrap;
  background: var(--ab-paper); border-radius: var(--ab-radius-sm);
}