/* The film player. Every class is prefixed brf-. Colours follow the page's tokens when present. */
.brf {
  --x-paper: var(--br-paper, #faf8f3); --x-ink: var(--br-ink, #1d1d1b); --x-body: var(--br-body, #2a2926); --x-soft: var(--br-soft, #3c3a36);
  --x-ok: var(--br-holds, #0b7a3e); --x-lost: var(--br-moves, #c8401f); --x-rule: color-mix(in srgb, var(--x-ink) 16%, var(--x-paper));
  --x-text: var(--br-text, "InterVariable", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif);
  --x-mono: var(--br-mono, "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace);
  color: var(--x-body); font-family: var(--x-text); line-height: 1.42;
}
@media screen and (prefers-color-scheme: dark) {
  .brf { --x-paper: var(--br-paper, #141413); --x-ink: var(--br-ink, #faf8f3); --x-body: var(--br-body, #e9e6df); --x-soft: var(--br-soft, #c9c5bc);
    --x-ok: var(--br-holds, #3fb871); --x-lost: var(--br-moves, #ff6a3d); }
}
.brf-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(1rem, 2.4vw, 2rem); align-items: start; }
.brf-grid.brf-solo { grid-template-columns: minmax(0, 1fr); }   /* beside the page's own film: the readout alone */
.brf-video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.brf-panel { border-top: 1px solid var(--x-ink); padding-top: .7rem; min-width: 0; }
.brf-label { margin: 0; font: 700 .7rem/1.3 var(--x-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--x-soft); }
.brf-fig { margin: .4rem 0 0; font: 700 .72rem/1.3 var(--x-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--x-ink); }
.brf-claim { margin: .35rem 0 0; font-size: 1.02rem; color: var(--x-ink); }
.brf-nums { margin: .4rem 0 0; font: 400 .78rem/1.45 var(--x-mono); color: var(--x-body); font-variant-numeric: tabular-nums; }
.brf-check { margin: .4rem 0 0; font: 400 .82rem/1.4 var(--x-text); color: var(--x-body); }
.brf-check.is-ok { color: var(--x-ok); font-weight: 600; } .brf-check.is-bad { color: var(--x-lost); font-weight: 600; }
.brf-run { margin-top: .7rem; appearance: none; border: 1px solid var(--x-ink); border-radius: 0; background: var(--x-ink); color: var(--x-paper);
  font: 700 .62rem/1 var(--x-mono); letter-spacing: .1em; text-transform: uppercase; padding: .6rem .7rem; min-height: 36px; cursor: pointer; }
.brf-run[hidden] { display: none; }
.brf-run:focus-visible { outline: 2px solid var(--x-ink); outline-offset: 2px; }
.brf-all { margin: .6rem 0 0; font-size: .84rem; color: var(--x-soft); }
.brf-hand { margin-top: 1rem; }
.brf-handnote { margin: 0 0 .5rem; font-size: .9rem; color: var(--x-soft); }
@media (max-width: 760px) { .brf-grid { grid-template-columns: minmax(0, 1fr); } }
@media (pointer: coarse) { .brf-run { min-height: 44px; } }
@media (forced-colors: active) { .brf-run { border-color: ButtonText; } }