/* Every table. Every class is prefixed cx4-. The figure takes the page's tokens (--cx-paper, --cx-ink, ...) when the
   page defines them, and the design stack's values when it does not.
   Paper: "The Five Postulates of Quantum Mechanics on the Record: Theorems, Premises, and What Is Owed" (preprint, posted 14 November 2026, not peer reviewed). */
.cx4 {
  --f-paper: var(--cx-paper, #faf8f3); --f-ink: var(--cx-ink, #1d1d1b); --f-body: var(--cx-body, #2a2926);
  --f-soft: var(--cx-soft, #3c3a36); --f-hair: var(--cx-hair, #8a8a8a);
  --f-rule: color-mix(in srgb, var(--f-ink) 16%, var(--f-paper));
  --f-faint: color-mix(in srgb, var(--f-ink) 7%, var(--f-paper));
  --f-ok: var(--cx-ok, #0b7a3e); --f-on-ok: var(--cx-on-ok, #faf8f3); --f-no: var(--cx-no, #c8401f);
  --f-text: var(--cx-text, "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif);
  --f-display: var(--cx-display, "Inter Display", "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif);
  --f-mono: var(--cx-mono, "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace);
  margin: 0; color: var(--f-body); font-family: var(--f-text); font-weight: 420; line-height: 1.42; font-optical-sizing: auto;
  box-sizing: border-box; position: relative; container: cx4 / inline-size;
}
@media screen and (prefers-color-scheme: dark) {
  .cx4 { --f-paper: var(--cx-paper, #141413); --f-ink: var(--cx-ink, #faf8f3); --f-body: var(--cx-body, #e9e6df);
    --f-soft: var(--cx-soft, #c9c5bc); --f-ok: var(--cx-ok, #45c27a); --f-on-ok: var(--cx-on-ok, #141413); --f-no: var(--cx-no, #ff6a3d); }
}
.cx4 *, .cx4 *::before, .cx4 *::after { box-sizing: border-box; }
.cx4-label { margin: 0; font: 700 .72rem/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--f-soft); }
.cx4-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; align-items: baseline;
  padding-bottom: .6rem; margin-bottom: .9rem; border-bottom: 1px solid var(--f-rule); }
.cx4-sub { color: var(--f-ink); font-variant-numeric: tabular-nums; }
.cx4-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; align-items: start; }
@container cx4 (min-width: 820px) { .cx4-grid { grid-template-columns: minmax(0, 1fr) minmax(220px, 15.5rem); gap: 1.6rem; } }
.cx4-stage { min-width: 0; }
.cx4-pick { display: block; width: 100%; cursor: pointer; outline: none; touch-action: manipulation; }
.cx4-pick:focus-visible { outline: 2px solid var(--f-ink); outline-offset: 4px; }
.cx4-svg { display: block; width: 100%; height: auto; overflow: visible; }
.cx4-svg .g .o { fill: var(--f-paper); stroke: var(--f-hair); stroke-width: .6; }
.cx4-svg .g .m { fill: var(--f-ink); }
.cx4-svg .g.on .o { stroke: var(--f-no); stroke-width: 2.2; }
.cx4-svg .g:hover .o { stroke: var(--f-ink); stroke-width: 1.4; }
.cx4-svg .bound { stroke: var(--f-ink); stroke-width: 1.5; stroke-dasharray: 4 3; }
.cx4-svg .lead { stroke: var(--f-hair); stroke-width: 1; }
.cx4-svg .ax { stroke: var(--f-soft); stroke-width: 1; }
.cx4-svg .ax.dash { stroke-dasharray: 2 2; }
.cx4-svg .tick { font: 400 11px var(--f-mono); fill: var(--f-soft); }
.cx4-svg .cnt { font: 700 11px var(--f-mono); fill: var(--f-ink); font-variant-numeric: tabular-nums; }
.cx4-svg .lab { font: 700 10px var(--f-mono); letter-spacing: .06em; fill: var(--f-ink); }
.cx4-svg .lab.soft { fill: var(--f-soft); font-weight: 400; }
.cx4-svg .acts { fill: var(--f-ok); stroke: var(--f-ok); }
.cx4-svg .acts-t { fill: var(--f-ok); }
.cx4-svg .acts-l { stroke: var(--f-ok); stroke-width: 1.5; }
.cx4-svg .err { stroke: var(--f-ink); stroke-width: 2; }
.cx4-svg .rng { stroke: var(--f-soft); stroke-width: 4; }
.cx4-svg .meas { fill: var(--f-paper); stroke: var(--f-ink); stroke-width: 1.5; }
.cx4-hint { margin: .4rem 0 0; font: 400 .72rem/1.4 var(--f-mono); color: var(--f-soft); }
.cx4-side { min-width: 0; display: flex; flex-direction: column; gap: .6rem; }
.cx4-table { --c: 2.6rem; display: grid; grid-template-columns: repeat(3, var(--c)) calc(var(--c) * .9); grid-template-rows: repeat(3, var(--c)) calc(var(--c) * .7); gap: 4px; }
.cx4-c { display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--f-ink); font: 820 1.5rem/1 var(--f-display); color: var(--f-ink); }
.cx4-l { display: flex; align-items: center; justify-content: center; font: 820 .85rem/1 var(--f-display); border: 1.5px dashed var(--f-no); color: var(--f-ink); }
.cx4-l[data-ok="1"] { background: var(--f-ok); border: 1.5px solid var(--f-ok); color: var(--f-on-ok); }
.cx4-words { margin: 0; font-size: .95rem; line-height: 1.38; color: var(--f-ink); font-variant-numeric: tabular-nums; }
.cx4-sum { border-top: 1px solid var(--f-rule); padding-top: .55rem; min-height: 4.2em; }
.cx4-ctl button { appearance: none; border: 1px solid var(--f-ink); border-radius: 0; background: transparent; color: var(--f-ink); cursor: pointer;
  font: 700 .64rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: .55rem .65rem; min-height: 36px; }
.cx4-ctl button:hover { background: var(--f-faint); }
.cx4-ctl button:focus-visible { outline: 2px solid var(--f-ink); outline-offset: 2px; }
.cx4-caption { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--f-rule); font-size: .95rem; color: var(--f-body); max-width: 50rem; }
.cx4-caption b { color: var(--f-ink); font-weight: 650; }
.cx4-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@container cx4 (max-width: 520px) { .cx4-svg .lab { font-size: 9px; } .cx4-svg .tick { font-size: 10px; } }
@media (forced-colors: active) {
  .cx4-svg { forced-color-adjust: none; }
  .cx4-l[data-ok="1"] { background: Highlight; color: HighlightText; border-color: Highlight; forced-color-adjust: none; }
}
@media print {
  /* a printed page breaks between a figure's blocks, never inside one (the whole figure can be taller than a page) */
  .cx4-grid { break-inside: avoid; }   /* the stacks and the table they show stay on one page */
  .cx4 { --f-paper: #ffffff; --f-ink: #1d1d1b; --f-body: #2a2926; --f-soft: #3c3a36; --f-ok: #0b7a3e; --f-on-ok: #ffffff; --f-no: #c8401f; }
  .cx4, .cx4 * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cx4-ctl, .cx4-hint { display: none; }
}
