/* Cerebro: the one stylesheet. Black, white, one grey. Native controls draw
   themselves (color-scheme); the pages only lay them out. Every colour is a
   variable here, so each page (and the live page's own theme) stays in step. */
:root {
  color-scheme: dark;
  --bg: #000; --fg: #fff; --grey: #8c8c8c;
  /* The three people, the same everywhere: their phones, the Mac, the transcript. */
  --a: #FF5A4E; --b: #3D8BFF; --c: #2BC48A;
  /* Controls laid over a picture. */
  --glass: #0006;
  /* Always white, whatever the theme: behind a QR code. */
  --paper: #fff;
  accent-color: var(--fg);
}
/* Whatever belongs to one person carries data-person, and their colour with it. */
[data-person=A] { --accent: var(--a); } [data-person=B] { --accent: var(--b); } [data-person=C] { --accent: var(--c); }
* { box-sizing: border-box; }
body {
  margin: 0; padding: 0.5rem 1rem; background: var(--bg); color: var(--fg);
  font: 0.85rem/1.35 system-ui, sans-serif; overflow-wrap: anywhere;
}
header { display: flex; align-items: baseline; gap: 0.8rem; margin-bottom: 0.6rem; }
header a { color: var(--grey); }
h1, h2 { font-size: 1rem; margin: 0; }
main { display: grid; gap: 0.5rem; align-content: start; }
a { color: var(--fg); }
p { margin: 0; }
small, summary, th, dt, .dim, label > span:first-child, .row > span:first-child { color: var(--grey); }
label > span:first-child, .row > span:first-child { flex: 0 0 5.5rem; }
[hidden] { display: none !important; }
[role=status] { min-height: 1.35em; } /* reserved, so a message does not move the page */
.error { font-weight: bold; }
.error::before { content: "Error: "; }

/* A row: a name, then its controls, on one line. */
label, .row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; min-width: 0; }
label > :is(input[type=text], input[type=number], select, textarea), .row > input[type=text] { flex: 1; }

/* Panels. */
fieldset { display: grid; gap: 0.25rem; align-content: start; min-width: 0; margin: 0; padding: 0.3rem 0.6rem 0.5rem; border: 1px solid var(--grey); }
legend { padding: 0 0.3rem; }
summary { cursor: pointer; }
nav ul { list-style: none; margin: 0; padding: 0; }

/* Controls: native, only sized. */
button, input, select, textarea, output { font: inherit; }
button { padding: 0.15rem 0.6rem; cursor: pointer; }
button:disabled { cursor: default; }
input[type=range] { width: 7rem; }
textarea { min-height: 3.5em; resize: vertical; }
output { min-width: 3.5rem; font-variant-numeric: tabular-nums; }
meter, progress { width: 5rem; }
.on, [aria-checked=true] { background: var(--fg); color: var(--bg); }

/* Tables and definition lists. */
.wrap { overflow: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; vertical-align: top; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--grey); }
th { font-weight: normal; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 1rem; margin: 0; }
dd { margin: 0; }