/* Pulse. Every colour comes from five theme variables set by themes.js; the rest is derived here. */
:root {
  /* Until themes.js runs, the page wears the default theme (Electric neon). */
  --bg: #070204; --panel: #14060b; --text: #fff4ec; --accent: #f52249; --accent2: #ffb35c; --on-accent: #101318; --on-accent2: #1a1300;
  --font: Inter, "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767;
  /* Label ink on each series colour (themes.js picks the one that reads better). */
  --s1-ink: #101318; --s2-ink: #101318; --s3-ink: #101318; --s4-ink: #101318; --s5-ink: #101318; --s6-ink: #fff; --s7-ink: #101318; --s8-ink: #101318;
  --panel2: color-mix(in srgb, var(--text) 7%, var(--panel));
  --line: color-mix(in srgb, var(--text) 18%, var(--bg));
  /* Borders of things you click or type in: 3:1 or better on bg and panel in every built-in theme. --line stays for dividers. */
  --line-strong: color-mix(in srgb, var(--text) 48%, var(--bg));
  --mute: color-mix(in srgb, var(--text) 68%, var(--bg));
  --danger: #e5484d;
  /* Danger as words (the fill above is too light for text on light pages). */
  --danger-text: #ff8589;
  /* The correct-answer tick: series green, a darker green on light pages. */
  --ok-text: var(--s3);
  --radius: 14px;
  color-scheme: dark;
}
[data-scheme="light"] { --danger-text: #d21e24; --ok-text: #137a55; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: calc(100% * var(--size-scale, 1)); }
body {
  margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text);
  font: 1rem/1.5 var(--font); -webkit-font-smoothing: antialiased;
}
#app { position: relative; z-index: 1; min-height: 100dvh; display: flex; flex-direction: column;
  /* Phones: keep clear of the notch, the rounded corners and the home bar (zero everywhere else). */
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0); }
/* Phones: no double-tap zoom delay or grey flash on buttons. */
:is(button, .btn, .opt, a) { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(1.7rem, 5vw, 2.6rem); line-height: 1.12; letter-spacing: -0.02em; font-weight: 800; text-wrap: balance; }
h2 { font-size: 1.1rem; font-weight: 700; }
h3 { font-size: 1rem; font-weight: 700; margin-top: 1.25rem; }
a { color: var(--accent); }
[data-scheme="dark"] a { color: color-mix(in srgb, var(--accent) 70%, var(--text)); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
:focus-visible { outline: 3px solid var(--accent2); outline-offset: 2px; border-radius: 6px; }
.fine { font-size: 0.86rem; color: var(--mute); }
.center { text-align: center; padding: 1rem; }
.lede { font-size: 1.1rem; color: var(--mute); max-width: 46ch; }
.spacer { flex: 1; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- chrome ---------- */
.topbar { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 800; font-size: 1.05rem; color: var(--text); text-decoration: none; min-width: 0; }
.session-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pulse-mark { width: 3.4rem; height: 1rem; flex: none; stroke: var(--accent2); overflow: visible; }
.pulse-mark path { stroke-dasharray: 190; stroke-dashoffset: 0; }
.pulse-mark.beat path { animation: beat 0.8s ease-out; }
.mark-runner { display: none; fill: #fff; stroke: none; pointer-events: none; }
@keyframes beat { from { stroke-dashoffset: 190; } to { stroke-dashoffset: 0; } }
/* Offbeat has its own colour and mark; the two brands sit side by side as a switch. */
:root { --offbeat: #ff8a1f; }
[data-scheme="light"] { --offbeat: #b86a00; }
.offbeat-mark { stroke: var(--offbeat); fill: var(--offbeat); }
.brand-switch { display: inline-flex; align-items: stretch; gap: 0.2rem; padding: 0.2rem; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--panel); }
.brand-tab { font: inherit; font-weight: 800; font-size: 1.05rem; border: 0; background: none; cursor: pointer; padding: 0.4rem 0.75rem; border-radius: 9px; opacity: 0.6; transition: background 0.15s, opacity 0.15s; }
.brand-tab svg { pointer-events: none; }
.brand-tab:hover { opacity: 1; }
.brand-tab.on { opacity: 1; background: color-mix(in srgb, var(--accent2) 16%, var(--panel2)); box-shadow: inset 0 -2px 0 var(--accent2); }
.brand-tab.is-offbeat.on { background: color-mix(in srgb, var(--offbeat) 18%, var(--panel2)); box-shadow: inset 0 -2px 0 var(--offbeat); }
.view-offbeat .offbeat-card, .view-offbeat .offbeat-new { border-top: 3px solid var(--offbeat); }
.offbeat-title { display: flex; align-items: center; gap: 0.55rem; }
.center-card .offbeat-mark { width: 6rem; height: 1.8rem; margin: 0 auto 0.6rem; display: block; }
@media (max-width: 30rem) { .brand-tab { padding: 0.4rem 0.5rem; } .brand-tab .pulse-mark { width: 2.2rem; } }
.conn { font-size: 0.8rem; color: var(--accent2); }

.btn {
  font: inherit; font-weight: 650; color: var(--text); background: var(--panel2); border: 1px solid var(--line-strong);
  border-radius: 10px; padding: 0.5rem 0.9rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 2.5rem; transition: transform 0.08s, background 0.15s;
}
.btn:hover { background: color-mix(in srgb, var(--text) 14%, var(--panel)); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 86%, var(--text)); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.big { font-size: 1.1rem; padding: 0.8rem 1.2rem; width: 100%; }
.btn.tiny { min-height: 2rem; padding: 0.2rem 0.6rem; font-size: 0.85rem; }
/* Touch screens (phones, tablets): small buttons get a thumb-sized target. A mouse keeps them compact. */
@media (pointer: coarse) {
  .btn.tiny, .btn.small { min-height: 2.75rem; }
  select, .field select { min-height: 2.75rem; }
}
.btn.danger { color: var(--danger-text); }
.btn-row { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.linkish { font: inherit; font-weight: 650; background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; text-align: left; }
[data-scheme="dark"] .linkish { color: color-mix(in srgb, var(--accent) 70%, var(--text)); }

.field, .theme-pick, .code-input {
  font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 0.55rem 0.7rem; width: 100%; min-height: 2.6rem;
}
.theme-pick { width: auto; min-height: 2.3rem; padding: 0.3rem 0.5rem; background: var(--panel2); }
.field.small { width: 5rem; }
textarea.field { resize: vertical; }
label, .label { display: block; font-size: 0.86rem; font-weight: 650; color: var(--mute); margin: 0.8rem 0 0.3rem; }
label > .field, label > span > .field { margin-top: 0.3rem; }
.switch { display: flex; align-items: center; gap: 0.55rem; color: var(--text); font-weight: 500; font-size: 0.95rem; cursor: pointer; }
.switch input { width: 1.2rem; height: 1.2rem; accent-color: var(--accent); }
.form-row { display: flex; gap: 0.6rem; align-items: center; justify-content: space-between; margin-top: 0.5rem; }
.form-error { color: var(--danger-text); min-height: 1.4em; font-weight: 600; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.center-card { text-align: center; padding: 2.2rem 1.2rem; display: grid; gap: 0.9rem; justify-items: center; }

#toasts { position: fixed; z-index: 50; left: 50%; bottom: 1rem; transform: translateX(-50%); display: grid; gap: 0.5rem; width: min(92vw, 30rem); }
.toast { background: var(--text); color: var(--bg); padding: 0.7rem 1rem; border-radius: 10px; font-weight: 600; box-shadow: 0 8px 30px rgb(0 0 0 / 0.35); }
.toast.error, .toast.warn { border-left: 6px solid var(--danger); }

#decor { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
#decor span { position: absolute; top: -3rem; opacity: 0.4; animation: fall linear infinite; color: var(--accent); font-family: var(--font); }
@keyframes fall { to { transform: translateY(115vh) rotate(200deg); } }

.btn.ghost.on { background: var(--panel2); }
.who { display: inline-grid; line-height: 1.15; font-weight: 700; font-size: 0.9rem; padding: 0 0.4rem; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who small { font-weight: 500; color: var(--mute); }
.block { display: block; }
.analytics > *, .an-body > *, .host-main > * { min-width: 0; }
.table .field { width: auto; min-width: 8.5rem; }
.muted-row { opacity: 0.55; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0 1rem; }
.method-list { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.method-list li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.8rem; align-items: start; }
.method-list .chip { justify-self: start; }
details.setup { border-top: 1px solid var(--line); padding-top: 0.8rem; }
details.setup summary { cursor: pointer; font-weight: 650; color: var(--mute); }

/* ---------- join by code ---------- */
.home { width: min(100%, 28rem); margin: auto; padding: 1.5rem 1.2rem 4rem; display: grid; gap: 1rem; }
.join-form { display: grid; gap: 0.7rem; }
.code-input { font-size: 2rem; font-weight: 800; letter-spacing: 0.3em; text-align: center; text-transform: uppercase; padding: 0.7rem; font-family: ui-monospace, Menlo, Consolas, monospace; }

/* ---------- voter ---------- */
.vote { width: min(100%, 36rem); margin: 0 auto; padding: 0.5rem 1rem 2rem; display: grid; gap: 1rem; flex: 1; align-content: start; }
.q-type { font-size: 0.86rem; font-weight: 700; color: var(--accent2); }
[data-scheme="light"] .q-type { color: var(--mute); }
.q-prompt { margin: 0.2rem 0 1rem; font-size: clamp(1.4rem, 5vw, 2rem); }
.note { margin-top: 0.8rem; min-height: 1.5em; font-weight: 600; color: var(--mute); }
.options { display: grid; gap: 0.6rem; }
.options.pair { grid-template-columns: 1fr 1fr; }
.options.emoji-row { grid-template-columns: repeat(auto-fit, minmax(3.6rem, 1fr)); }
.options.scale { grid-template-columns: repeat(auto-fit, minmax(2.9rem, 1fr)); }
.opt {
  font: inherit; font-size: 1.08rem; font-weight: 650; color: var(--text); text-align: left; background: var(--panel2);
  border: 2px solid var(--line-strong); border-radius: 12px; padding: 0.85rem 1rem; min-height: 3.3rem; cursor: pointer;
  display: flex; align-items: center; gap: 0.7rem; margin: 0; transition: transform 0.08s, border-color 0.15s;
}
.opt:active { transform: scale(0.98); }
.opt.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, var(--panel)); }
.opt.on::after { content: "✓"; margin-left: auto; font-weight: 800; }
.pair .opt, .scale .opt, .emoji-row .opt { justify-content: center; text-align: center; }
.pair .opt.on::after, .scale .opt.on::after, .emoji-row .opt.on::after { content: none; }
.emoji-row .opt { font-size: 1.9rem; padding: 0.6rem 0.2rem; }
.opt.check input { width: 1.3rem; height: 1.3rem; accent-color: var(--accent); flex: none; }
.vote form { display: grid; gap: 0.7rem; }
.rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.rank-list li { display: flex; align-items: center; gap: 0.6rem; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 0.5rem 0.6rem; }
.rank-n { width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-weight: 800; flex: none; }
.rank-label { flex: 1; font-weight: 600; }
.waiting-dots { display: flex; gap: 0.5rem; }
.waiting-dots i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--accent2); animation: bob 1.2s ease-in-out infinite; }
.waiting-dots i:nth-child(2) { animation-delay: 0.15s; }
.waiting-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.45em); } }

/* ---------- results ---------- */
.viz { --unit: 1.7px; }
.viz-empty { color: var(--mute); padding: 1rem 0; }
.viz-avg { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.8rem; }
.avg-num { font-size: 3em; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
.avg-cap { color: var(--mute); }
.viz-ends { display: flex; justify-content: space-between; color: var(--mute); font-size: 0.86em; margin-top: 0.4rem; }

.viz-bars { display: grid; gap: 0.7em; }
.bar-row { display: grid; grid-template-columns: minmax(4em, 30%) 1fr auto; align-items: center; gap: 0.7em; }
.bar-row.emoji { grid-template-columns: 2.2em 1fr auto; }
.bar-row.emoji .bar-label { font-size: 1.5em; }
.bar-label { font-weight: 600; overflow-wrap: anywhere; }
.bar-track { height: 1.5em; }
.bar-fill { height: 100%; width: 0; min-width: 3px; border-radius: 0 4px 4px 0; transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.bar-val { font-variant-numeric: tabular-nums; color: var(--mute); white-space: nowrap; min-width: 4.5em; text-align: right; }
.bar-row.lead .bar-val, .bar-row.lead .bar-label { color: var(--text); font-weight: 800; }

.viz-donut { display: flex; align-items: center; gap: 1.5em; flex-wrap: wrap; justify-content: center; }
.donut { width: min(15em, 60vw); flex: none; }
.donut-bg { fill: none; stroke: var(--panel2); stroke-width: 18; }
.donut-seg { fill: none; stroke-width: 18; transition: stroke-dasharray 0.6s, stroke-dashoffset 0.6s; }
.donut-total { fill: var(--text); font-size: 26px; font-weight: 800; }
.donut-cap { fill: var(--mute); font-size: 9px; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5em; flex: 1; min-width: 12em; }
.legend li { display: grid; grid-template-columns: auto 1fr auto; gap: 0.6em; align-items: center; }
.legend i { width: 0.9em; height: 0.9em; border-radius: 3px; }
.lg-val { font-variant-numeric: tabular-nums; color: var(--mute); font-weight: 500; }
.legend li.lead .lg-label, .legend li.lead .lg-val { font-weight: 800; color: var(--text); }

.viz-bubbles { display: flex; flex-wrap: wrap; gap: 1em; justify-content: center; align-items: flex-end; }
.bubble-wrap { display: grid; justify-items: center; gap: 0.4em; text-align: center; }
.bubble { width: calc(var(--size, 28) * var(--unit)); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; transition: width 0.6s cubic-bezier(0.3, 1.4, 0.5, 1); border: 2px solid var(--panel); }
.bubble b { color: inherit; font-size: 1.1em; font-variant-numeric: tabular-nums; }
.bubble-label { font-weight: 600; overflow-wrap: anywhere; max-width: 11em; }

.viz-race { display: grid; gap: 0.5em; position: relative; padding-top: 1.4em; }
.lane { display: grid; grid-template-columns: minmax(0, 28%) 1fr; align-items: center; gap: 0.7em; }
.lane-label { font-weight: 600; overflow-wrap: anywhere; }
.lane-label:empty { display: none; }
.lane:has(.lane-label:empty) { grid-template-columns: 1fr; }
.lane-track { position: relative; height: 2.6em; border-bottom: 2px dashed var(--line); border-right: 3px solid var(--accent2); }
.runner { position: absolute; bottom: 0.1em; left: calc(var(--at, 0) * (100% - 5.4em)); display: flex; align-items: center; gap: 0.3em; transition: left 0.9s cubic-bezier(0.3, 1.3, 0.5, 1); }
.runner-face { font-size: 1.9em; line-height: 1; }
.lane.lead .runner-face { animation: bob 0.7s ease-in-out infinite; }
.runner-val { font-variant-numeric: tabular-nums; background: var(--panel2); border-radius: 99px; padding: 0 0.5em; }
.finish { position: absolute; right: -0.3em; top: 0; font-size: 1.1em; }

.cloud { display: flex; flex-wrap: wrap; gap: 0.3em 0.9em; justify-content: center; align-items: baseline; padding: 0.5em 0; line-height: 1.15; }
.cloud span { font-weight: 800; }
.cloud .top { color: var(--accent2); }
[data-scheme="light"] .cloud .top { color: var(--accent); }
.wall, .qa-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6em; }
.wall { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15em), 1fr)); }
.entry { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 0.7em 0.9em; display: flex; gap: 0.7em; align-items: flex-start; }
.entry-text { flex: 1; overflow-wrap: anywhere; }
.hidden-entry .entry-text { text-decoration: line-through; opacity: 0.55; }
.upvote { font: inherit; font-weight: 700; color: var(--text); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 99px; padding: 0.15em 0.7em; white-space: nowrap; min-height: 2.2em; }
button.upvote { cursor: pointer; }
.upvote.on { background: var(--accent); color: var(--on-accent); border-color: transparent; }

/* ---------- host ---------- */
.host { display: grid; grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr); gap: 1rem; padding: 0.5rem 1rem 3rem; align-items: start; }
.host-side, .host-main { display: grid; gap: 1rem; min-width: 0; }
/* The open session's column knows its own width, so its header can fold when the column is
   narrow even though the window is wide (a docked menu and the side column take their share). */
.host-main { container: host-main / inline-size; }
.host-side .btn.primary { margin-top: 0.9rem; width: 100%; }
.session-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.session-item { font: inherit; color: var(--text); text-align: left; width: 100%; background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 0.5rem 0.6rem; cursor: pointer; display: grid; }
.session-item:hover { background: var(--panel2); }
.session-item.on { border-color: var(--accent); background: var(--panel2); }
.session-head { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(12rem, 26rem); gap: 1.2rem; align-items: start; }
.qr { background: #fff; border-radius: 12px; padding: 0.3rem; width: 9.5rem; aspect-ratio: 1; line-height: 0; }
.qr svg { width: 100%; height: 100%; }
.session-meta { display: grid; gap: 0.6rem; }
.title-field { font-size: 1.3rem; font-weight: 800; }
.join-line { font-size: 1.05rem; }
.code { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.12em; color: var(--accent2); }
[data-scheme="light"] .code { color: var(--accent); }
.counts { color: var(--mute); font-weight: 600; }
.session-settings { display: grid; gap: 0.8rem; }
.session-settings label { margin-top: 0; }
.host-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.q-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.q-item { border: 1px solid var(--line); border-radius: 12px; padding: 0.7rem 0.8rem; display: grid; gap: 0.6rem; background: var(--panel2); }
.q-item.live { border-color: var(--accent2); box-shadow: inset 4px 0 0 var(--accent2); }
.q-main { display: grid; gap: 0.2rem; justify-items: start; }
.q-text { font-weight: 700; }
.chip { font-size: 0.78rem; font-weight: 700; border-radius: 99px; padding: 0.1rem 0.6rem; border: 1px solid var(--line); color: var(--mute); }
.chip.open { background: var(--accent2); color: var(--on-accent2); border-color: transparent; }
.q-form { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 0.2rem; }
.q-form .btn-row { margin-top: 1rem; }
.live-card { position: sticky; top: 0.8rem; }
.live-prompt { font-size: 1.2rem; font-weight: 800; margin-bottom: 0.9rem; }
.theme-editor summary { font-weight: 700; cursor: pointer; }
.theme-list { list-style: none; padding: 0; display: grid; gap: 0.4rem; }
.theme-list li { display: flex; gap: 0.5rem; align-items: center; }
.theme-list li span { flex: 1; font-weight: 600; }
.swatches { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.8rem; }
.swatch { display: grid; justify-items: center; gap: 0.3rem; margin: 0; }
.swatch input { width: 3.2rem; height: 2.6rem; border: 1px solid var(--line-strong); border-radius: 8px; background: none; padding: 0.15rem; cursor: pointer; }

/* ---------- presenter ---------- */
.page-present #app { height: 100dvh; overflow: hidden; }
.present-bar { padding: 0.9rem 1.6rem; font-size: clamp(1rem, 1.4vw, 1.4rem); }
.present-bar .pulse-mark { width: 5.5em; height: 1.5em; }
.join-hint { color: var(--mute); }
.join-hint strong { color: var(--text); }
.qr.mini { width: clamp(4rem, 7vw, 6.5rem); border-radius: 8px; padding: 0.15rem; }
body.lobby .qr.mini, body.lobby .join-hint { visibility: hidden; }
.stage { flex: 1; min-height: 0; overflow: auto; padding: 0.5rem clamp(1.2rem, 5vw, 5rem) 1rem; display: grid; align-content: center; }
.lobby-view { display: flex; gap: clamp(1.5rem, 5vw, 5rem); align-items: center; justify-content: center; flex-wrap: wrap; }
.lobby-view h1 { font-size: clamp(2.4rem, 6vw, 5.5rem); }
.lobby-view .lede { font-size: clamp(1.1rem, 2vw, 1.9rem); margin-top: 0.6rem; }
.qr.big { width: min(38vh, 80vw, 26rem); border-radius: 20px; padding: 0.6rem; }
.big-code { font: 800 clamp(3rem, 9vw, 8rem) / 1.05 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.1em; color: var(--accent2); }
[data-scheme="light"] .big-code { color: var(--accent); }
.question-view { width: min(100%, 78rem); margin: 0 auto; }
.question-view .q-type { font-size: clamp(0.9rem, 1.3vw, 1.3rem); }
.question-view .q-prompt { font-size: clamp(1.8rem, 4.2vw, 4rem); margin-bottom: 0.7em; }
.stage .viz { font-size: clamp(1.05rem, 1.75vw, 1.9rem); --unit: clamp(1.8px, 0.26vw, 3.4px); }
.crowd { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.25rem; padding: 0.4rem 1.6rem 0.9rem; min-height: 3.4rem; font-size: clamp(1.2rem, 2vw, 2rem); }
.crowd span { animation: bob 2.1s ease-in-out infinite; }
.crowd .tally { animation: none; font-size: clamp(0.95rem, 1.3vw, 1.3rem); font-weight: 700; color: var(--mute); margin-right: 0.8rem; align-self: center; }
.crowd .more { animation: none; font-size: 0.7em; color: var(--mute); align-self: center; }
.controls { position: fixed; z-index: 5; left: 50%; bottom: 0.8rem; transform: translateX(-50%); display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; justify-content: center; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 0.5rem; box-shadow: 0 10px 40px rgb(0 0 0 / 0.4); transition: opacity 0.3s; max-width: 96vw; }
body.idle .controls:not(:hover):not(:focus-within) { opacity: 0; pointer-events: none; }

/* ---------- analytics ---------- */
.analytics { padding: 0.5rem 1rem 4rem; display: grid; gap: 1rem; width: min(100%, 78rem); margin: 0 auto; }
.an-body { display: grid; gap: 1rem; transition: opacity 0.2s; }
.filters { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.card > .table { display: block; overflow-x: auto; }
.filters label { margin: 0; }
.filters .field { width: auto; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; display: grid; gap: 0.15rem; align-content: start; }
.tile-label { font-size: 0.9rem; color: var(--mute); font-weight: 600; }
.tile-value { font-size: 2.2rem; line-height: 1.1; font-weight: 800; }
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr)); gap: 1rem; }
.chart { margin: 0; }
.chart figcaption { margin-bottom: 0.8rem; }
.cols { display: flex; align-items: stretch; gap: 2px; height: 13rem; }
.col { flex: 1; min-width: 0; display: grid; grid-template-rows: 1fr auto; gap: 0.3rem; max-width: 5rem; }
.col-plot { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; border-bottom: 1px solid var(--line); }
.col-bar { width: min(100%, 2rem); background: var(--s1); border-radius: 4px 4px 0 0; }
.col:hover .col-bar, .col:focus .col-bar { filter: brightness(1.2); }
.col-val { font-size: 0.8rem; font-variant-numeric: tabular-nums; color: var(--mute); }
.col-label { font-size: 0.72rem; color: var(--mute); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cols.dense .col-label { visibility: hidden; }
.line-chart { width: 100%; height: auto; overflow: visible; }
.line-chart .grid { stroke: var(--line); stroke-width: 1; }
.line-chart .axis { fill: var(--mute); font-size: 11px; font-variant-numeric: tabular-nums; }
.line-chart .series { fill: none; stroke: var(--s1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.line-chart .area { fill: var(--s1); opacity: 0.12; }
.line-chart .dot { fill: var(--s1); stroke: var(--panel); stroke-width: 2; }
.line-chart .hair { stroke: var(--mute); stroke-width: 1; }
.tip { position: fixed; z-index: 60; pointer-events: none; background: var(--text); color: var(--bg); border-radius: 8px; padding: 0.35rem 0.6rem; font-size: 0.85rem; display: grid; box-shadow: 0 6px 20px rgb(0 0 0 / 0.3); max-width: 16rem; }
.tip strong { font-size: 1rem; }
.table-scroll { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; margin-top: 0.6rem; font-size: 0.93rem; }
.table th { text-align: left; font-size: 0.8rem; color: var(--mute); font-weight: 650; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.meter { display: inline-block; width: 4.5rem; height: 0.5rem; background: var(--panel2); border-radius: 99px; overflow: hidden; vertical-align: middle; }
.meter span { display: block; height: 100%; background: var(--s1); border-radius: 0 4px 4px 0; }
.fast-list { margin: 0.6rem 0 0; padding-left: 1.3rem; display: grid; gap: 0.6rem; }
.fast-list li span { display: block; }
#detail { display: grid; gap: 0.6rem; }

/* ---------- main menu: docked down the side on wide screens, or behind the Menu button ---------- */
.ico { flex: none; width: 1.25rem; height: 1.25rem; }
.nav-toggle { display: inline-flex; }
.nav-search kbd, .qs kbd { font: 600 0.75rem/1 ui-monospace, monospace; border: 1px solid var(--line-strong); border-radius: 5px; padding: 0.15rem 0.35rem; color: var(--mute); }
.side-nav { display: none; flex-direction: column; gap: 0.2rem; background: var(--panel); color: var(--text); border: 1px solid var(--line); padding: 0.5rem; overflow-y: auto; overscroll-behavior: contain; }
.side-nav ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
.side-nav li { min-width: 0; }
.side-group { display: grid; gap: 0.1rem; padding: 0.3rem 0; }
.side-group + .side-group { border-top: 1px solid var(--line); }
.side-top + .side-group { border-top: 0; }
.side-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); padding: 0.35rem 0.7rem 0.15rem; margin: 0; }
.side-link, label.side-link { font: inherit; font-size: 0.95rem; font-weight: 650; color: var(--text); text-decoration: none; background: none; border: 0; border-radius: 9px; margin: 0; padding: 0.5rem 0.7rem; min-height: 2.5rem; width: 100%; display: flex; align-items: center; gap: 0.7rem; text-align: left; cursor: pointer; }
[data-scheme="dark"] a.side-link { color: var(--text); }
.side-link:hover, .side-link:focus-visible { background: var(--panel2); }
.side-link[aria-current="page"] { background: color-mix(in srgb, var(--accent2) 16%, var(--panel2)); box-shadow: inset 3px 0 0 var(--accent2); }
span.side-link { cursor: default; }
.side-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-link.who { max-width: none; font-size: 0.95rem; }
.who-text { display: grid; line-height: 1.2; }
.who-text small { font-weight: 500; color: var(--mute); }
.who-name { overflow: hidden; text-overflow: ellipsis; }
.side-lang .theme-pick { flex: 1; min-width: 0; min-height: 2rem; }
.side-foot { margin-top: auto; }
.side-tools { display: none; }
/* Opened from the Menu button: a panel under it. */
.side-nav.open { display: flex; position: fixed; z-index: 40; top: 3.6rem; right: 0.75rem; width: min(18rem, calc(100vw - 1rem)); max-height: calc(100dvh - 4.4rem); border-radius: 12px; box-shadow: 0 12px 40px rgb(0 0 0 / 0.4); }
@media (max-width: 34rem) { .nav-toggle > span, .nav-search-text, .nav-search kbd { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
@media (min-width: 68.01rem) {
  .side-tools { display: grid; gap: 0.1rem; border-top: 1px solid var(--line); margin-top: 0.3rem; padding-top: 0.3rem; }
  body.nav-top .side-shrink { display: none; }
  body.nav-side, body.nav-mini { padding-left: 14.5rem; }
  body.nav-mini { padding-left: 3.75rem; }
  body.nav-side .nav-toggle, body.nav-mini .nav-toggle { display: none; }
  body.nav-side .side-nav, body.nav-mini .side-nav { display: flex; position: fixed; z-index: 20; inset: 0 auto 0 0; width: 14.5rem; border-width: 0 1px 0 0; border-radius: 0; box-shadow: none; max-height: none; }
  body.nav-mini .side-nav { width: 3.75rem; padding: 0.5rem 0.4rem; }
  body.nav-mini .side-text, body.nav-mini .side-label, body.nav-mini .side-lang { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  body.nav-mini .side-link { justify-content: center; padding: 0.5rem; gap: 0; }
  body.nav-mini .side-link[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--accent2); }
  body.nav-mini .side-shrink .ico { transform: scaleX(-1); }
  body.nav-side .text-size { left: 15.1rem; }
  body.nav-mini .text-size { left: 4.35rem; }
}
@media print { .side-nav { display: none !important; } body.has-nav { padding-left: 0 !important; } }

/* ---------- guided tour ---------- */
.tour-spot { position: fixed; z-index: 80; border-radius: 12px; box-shadow: 0 0 0 9999px rgb(0 0 0 / 0.62), 0 0 0 3px var(--accent2); pointer-events: none; transition: left 0.2s, top 0.2s, width 0.2s, height 0.2s; }
.tour-card { position: fixed; z-index: 81; width: min(92vw, 24rem); background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; box-shadow: 0 16px 50px rgb(0 0 0 / 0.5); display: grid; gap: 0.6rem; }
.tour-card h2 { font-size: 1.2rem; }
.tour-card .btn-row:empty { display: none; }

/* ---------- feature requests ---------- */
.req-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.req { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.9rem; border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem; background: var(--panel2); }
.req-votes { display: grid; justify-items: center; align-content: start; gap: 0.15rem; }
.req-votes strong { font-size: 1.2rem; }
button.vote { font: inherit; width: 2.4rem; height: 2.2rem; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); cursor: pointer; }
button.vote.on { background: var(--accent); color: var(--on-accent); border-color: transparent; }
button.vote.on.down { background: var(--danger); color: #101318; }
.req-body { display: grid; gap: 0.35rem; justify-items: start; }
.req-body .field { width: auto; }

/* ---------- help ---------- */
.help .card p { max-width: 70ch; margin-top: 0.5rem; }
.help-steps { margin: 0.5rem 0 0; padding-left: 1.4rem; display: grid; gap: 0.4rem; max-width: 70ch; }
.help #help-search, .help #history-search { margin: 0.9rem 0 0; }
.help-tools { margin-top: 0.7rem; }
.help-more { position: relative; }
.help-more > summary { list-style: none; }
.help-more > summary::-webkit-details-marker { display: none; }
.help-more[open] > .btn-row { margin-top: 0.5rem; }
.help mark, .qs mark { background: color-mix(in srgb, var(--accent2) 38%, transparent); color: inherit; border-radius: 3px; padding: 0 0.1em; }
/* Contents down the side on a wide screen, across the top on a narrow one. */
.doc-layout { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.doc-toc ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.2rem 0.5rem; }
.doc-toc a { display: block; padding: 0.3rem 0.55rem; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 0.93rem; }
.doc-toc a:hover, .doc-toc a:focus-visible { background: var(--panel2); text-decoration: underline; }
.doc-toc a[aria-current] { background: var(--panel2); box-shadow: inset 3px 0 0 var(--accent2); color: var(--text); }
@media (min-width: 60rem) {
  .doc-layout { grid-template-columns: 14rem minmax(0, 1fr); }
  .doc-toc { position: sticky; top: 0.75rem; max-height: calc(100dvh - 1.5rem); overflow-y: auto; }
  .doc-toc ul { display: grid; gap: 0.1rem; }
}
/* A topic: closed until asked for, so the page is a list you can scan. */
.help-block { border-top: 1px solid var(--line); scroll-margin-top: 0.75rem; }
.help .card > h2 + .help-block, .help .card > .lede + .help-block { margin-top: 0.8rem; }
.help-block > summary { cursor: pointer; display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.2rem; list-style: none; border-radius: 8px; }
.help-block > summary::-webkit-details-marker { display: none; }
.help-block > summary::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--mute); border-bottom: 2px solid var(--mute); transform: rotate(-45deg); transition: transform 0.15s; }
.help-block[open] > summary::before { transform: rotate(45deg); }
.help-block > summary:hover { background: var(--panel2); }
.help-block > summary h3 { margin: 0; font-size: 1rem; }
.help-block > :not(summary) { margin-left: 1.3rem; }
.help-block[open] { padding-bottom: 0.9rem; }
.help-block > ol.help-steps { margin-left: 1.3rem; }
.admin-chip { border-color: var(--offbeat); color: var(--text); white-space: nowrap; }
.help section[id], .release { scroll-margin-top: 0.75rem; }
/* What's new */
.release > summary { cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 0.4rem 1rem; flex-wrap: wrap; list-style: none; border-radius: 8px; }
.release > summary::-webkit-details-marker { display: none; }
.release-name { display: inline-flex; align-items: center; gap: 0.6rem; }
.release-name h2 { font-size: 1.2rem; }
.release-name::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--mute); border-bottom: 2px solid var(--mute); transform: rotate(-45deg); transition: transform 0.15s; }
.release[open] .release-name::before { transform: rotate(45deg); }
.release h3 { margin-top: 1rem; }
.release-items { margin: 0.5rem 0 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; max-width: 75ch; }
.chip.kind { color: var(--text); }
.chip.k-added { border-color: var(--ok-text); }
.chip.k-changed { border-color: var(--accent2); }
.chip.k-fixed { border-color: var(--offbeat); }
.chip.k-safe { border-color: var(--danger-text); }
/* Quick search */
.qs { width: min(40rem, calc(100vw - 1.5rem)); max-height: min(34rem, calc(100dvh - 3rem)); margin: 8vh auto auto; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--panel); color: var(--text); box-shadow: 0 20px 60px rgb(0 0 0 / 0.5); overflow: hidden; }
.qs[open] { display: flex; flex-direction: column; }
.qs::backdrop { background: rgb(0 0 0 / 0.5); }
.qs-top { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--line); }
.qs-input { flex: 1; min-width: 0; }
.qs-list { overflow-y: auto; padding: 0.4rem; flex: 1; min-height: 4rem; }
.qs-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); padding: 0.5rem 0.6rem 0.2rem; }
.qs-opt, [data-scheme="dark"] a.qs-opt { display: grid; gap: 0.1rem; padding: 0.5rem 0.6rem; border-radius: 9px; color: var(--text); text-decoration: none; }
.qs-opt[aria-selected="true"] { background: var(--panel2); box-shadow: inset 3px 0 0 var(--accent2); }
.qs-title { font-weight: 650; display: flex; gap: 0.6rem; align-items: baseline; justify-content: space-between; }
.qs-sub { font-weight: 500; font-size: 0.8rem; color: var(--mute); white-space: nowrap; }
.qs-line { font-size: 0.86rem; color: var(--mute); }
.qs-none { padding: 1.2rem 0.8rem; color: var(--mute); }
.qs-foot { padding: 0.5rem 0.8rem; border-top: 1px solid var(--line); margin: 0; }
@media (max-width: 34rem) { .qs-foot { display: none; } .qs { margin-top: 0.75rem; } }
.help-body { display: grid; gap: 1rem; }

/* ---------- presenter: call layout for Meet, Zoom and Teams ---------- */
body.call #decor { display: none; }
body.call .crowd span, body.call .lane.lead .runner-face, body.call .waiting-dots i { animation: none; }
body.call .present-bar { font-size: clamp(1.1rem, 1.7vw, 1.7rem); }
body.call .qr.mini { width: clamp(6.5rem, 12vw, 11rem); }
body.call.lobby .qr.mini { visibility: hidden; }
body.call .join-hint { color: var(--text); font-weight: 600; }
body.call .stage .viz { font-size: clamp(1.2rem, 2.1vw, 2.2rem); }
body.call .question-view .q-prompt { font-size: clamp(2rem, 4.6vw, 4.2rem); }
body.call .bar-fill, body.call .runner, body.call .bubble, body.call .donut-seg { transition-duration: 0.25s; }

/* ---------- InstaPulse, reminders, holiday mode ---------- */
.insta { display: grid; gap: 0.6rem; border-color: var(--accent2); }
.insta details summary, #reminders details summary { cursor: pointer; font-weight: 650; color: var(--mute); }
.rem-list { list-style: none; margin: 0.6rem 0; padding: 0; display: grid; gap: 0.5rem; }
.rem { display: grid; gap: 0.2rem; border: 1px solid var(--line); border-radius: 10px; padding: 0.55rem 0.7rem; background: var(--panel2); }
.rem.due { border-color: var(--accent2); box-shadow: inset 4px 0 0 var(--accent2); }
.rem.done { opacity: 0.55; }
.room-notice { position: fixed; z-index: 45; left: 50%; top: calc(0.8rem + env(safe-area-inset-top, 0px)); transform: translateX(-50%); width: min(94vw, 46rem); background: var(--accent2); color: var(--on-accent2); font-weight: 700; font-size: clamp(1rem, 1.6vw, 1.5rem); padding: 0.8rem 1.1rem; border-radius: 14px; box-shadow: 0 12px 40px rgb(0 0 0 / 0.4); text-align: center; }

.ai-out { margin-top: 0.6rem; display: grid; gap: 0.4rem; border-left: 3px solid var(--accent2); padding-left: 0.8rem; }
.ai-out:empty { display: none; }

/* ---------- quiz ---------- */
.bar-row.correct .bar-label::after, .legend li.correct .lg-label::after, .lane.correct .lane-label::after, .bubble-wrap.correct .bubble-label::after { content: " ✓"; color: var(--ok-text); font-weight: 800; }
.bar-row.correct .bar-track { outline: 2px solid var(--s3); outline-offset: 3px; border-radius: 4px; }
.board { margin-top: 1.2em; font-size: clamp(1rem, 1.6vw, 1.7rem); }
.board h2 { font-size: 1em; color: var(--accent2); }
.board ol { margin: 0.3em 0 0; padding-left: 1.4em; display: grid; gap: 0.2em; max-width: 26em; }
.board li > span { display: inline-block; min-width: 10em; font-weight: 700; }

/* ---------- larger text, remote, logo, follow-ups ---------- */
html.large { font-size: calc(118% * var(--size-scale, 1)); }
.text-size { position: fixed; z-index: 20; left: calc(0.6rem + env(safe-area-inset-left, 0px)); bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px)); width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--panel); color: var(--text); font: 700 0.95rem var(--font); cursor: pointer; opacity: 0.75; }
.text-size[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); opacity: 1; }
/* Leave room at the foot of the page so the floating Aa button never sits on top of the last item. */
body:has(> .text-size) #app { padding-bottom: calc(3.8rem + env(safe-area-inset-bottom, 0px)); }
.remote { width: min(100%, 30rem); margin: 0 auto; padding: 0.5rem 1rem 3rem; display: grid; gap: 0.9rem; }
.remote-big { font-size: 1.4rem; min-height: 6rem; border-radius: 18px; }
.remote-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.remote-row .btn { min-height: 3.4rem; }
.brand-logo { height: clamp(1.8rem, 3.2vw, 3rem); width: auto; max-width: 9rem; object-fit: contain; border-radius: 6px; }
.followups { flex-basis: 100%; max-width: 46rem; margin: 0 auto; text-align: left; }
.followups h2 { font-size: clamp(1.1rem, 1.8vw, 1.6rem); color: var(--accent2); }
.followups ul { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.3rem; font-size: clamp(1rem, 1.5vw, 1.4rem); }
.followups .did { font-weight: 700; }
#actions .form-row { flex-wrap: wrap; justify-content: flex-start; margin-top: 0.8rem; }
#actions .form-row .field { flex: 1 1 12rem; width: auto; }

/* ---------- meeting cost ---------- */
.cost.mini { display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0.4rem 0.7rem; font-variant-numeric: tabular-nums; }
.cost.tiny { display: flex; justify-content: flex-end; }
.cost-dot { width: 0.9rem; height: 0.9rem; border-radius: 50%; border: 0; background: var(--line-strong); cursor: pointer; padding: 0; }
.cost-dot:hover, .cost-dot:focus-visible { background: var(--accent2); }
.cost.full details summary { cursor: pointer; font-weight: 650; color: var(--mute); margin-top: 0.8rem; }
.cost.full .form-row { flex-wrap: wrap; justify-content: flex-start; }
.cost.full .form-row .field:first-child { flex: 1 1 10rem; width: auto; }
.checkin { display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; align-items: center; justify-content: center; width: min(100%, 36rem); margin: 0 auto; padding: 0.4rem 1rem; text-align: center; }

/* ---------- reactions ---------- */
.reactions { position: fixed; inset: 0; z-index: 35; pointer-events: none; overflow: hidden; }
.reaction { position: absolute; bottom: 12%; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 99px; padding: 0.25em 0.8em; font-weight: 700; font-size: clamp(1rem, 1.8vw, 1.7rem); white-space: nowrap; box-shadow: 0 6px 20px rgb(0 0 0 / 0.3); animation: react-rise 3s ease-out forwards; }
.reaction.emoji { background: none; border: 0; box-shadow: none; font-size: clamp(2rem, 4vw, 3.6rem); padding: 0; }
@keyframes react-rise { 0% { transform: translateY(0) scale(0.6); opacity: 0; } 12% { transform: translateY(-8vh) scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(-55vh); opacity: 0; } }
.react-bar { display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; justify-content: center; width: min(100%, 36rem); margin: 0 auto; padding: 0.5rem 1rem; }
.react-bar .field { flex: 1 1 8rem; min-height: 2.3rem; padding: 0.3rem 0.6rem; }
.react-emoji { font-size: 1.4rem; background: var(--panel2); border: 1px solid var(--line-strong); border-radius: 10px; width: 2.75rem; height: 2.75rem; cursor: pointer; } /* 44 px: the smallest comfortable thumb target */
.react-bar.cooling { opacity: 0.5; }

/* ---------- war room ---------- */
.war { display: grid; gap: 1rem; padding: 0.5rem 1rem 3rem; width: min(100%, 90rem); margin: 0 auto; }
.war-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1rem; align-items: start; }
.war-clock { font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.war-clock.over { color: var(--danger-text); }
.sofar { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.sofar li { display: grid; gap: 0.1rem; border-left: 3px solid var(--line); padding-left: 0.7rem; }
.sofar li.live { border-color: var(--accent2); }
.fact { font-size: 1.1rem; font-weight: 600; max-width: 46ch; }
.feed { display: flex; flex-wrap: wrap; gap: 0.4rem; min-height: 2.2rem; }
.feed span { background: var(--panel2); border-radius: 99px; padding: 0.15rem 0.7rem; font-weight: 600; }

/* ---------- demo mode ---------- */
.demo-banner { position: sticky; top: 0; z-index: 40; display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; align-items: center; justify-content: center; padding: 0.45rem 1rem; background: var(--accent2); color: var(--on-accent2); font-size: 0.92rem; }
.demo-banner .btn { background: rgb(0 0 0 / 0.14); border-color: color-mix(in srgb, var(--on-accent2) 55%, transparent); color: var(--on-accent2); }
@media print { .demo-banner { display: none !important; } }

/* ---------- timers and rounds ---------- */
.timer { display: flex; align-items: center; gap: 0.8em; margin: 0 0 1em; font-variant-numeric: tabular-nums; }
.timer-num { font-weight: 800; font-size: 1.4em; min-width: 3ch; }
.timer-bar { flex: 1; height: 0.5em; background: var(--panel2); border-radius: 99px; overflow: hidden; }
.timer-bar i { display: block; height: 100%; background: var(--accent2); border-radius: 99px; transition: width 0.2s linear; }
.timer.urgent .timer-num { color: var(--danger-text); }
.timer.urgent .timer-bar i { background: var(--danger); }
.chip.time { border-color: var(--accent2); color: var(--text); }
.card > .btn-row { margin-top: 0.8rem; }
.report-list { list-style: none; margin: 0.6rem 0; padding: 0; display: grid; gap: 0.4rem; }
.report-list li { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; }
.report-q { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1rem; break-inside: avoid; }
.report-q h3 { margin-top: 0.2rem; font-size: 1.15rem; }
.report-q .viz { margin-top: 0.8rem; }
@media print {
  :root { --bg: #fff !important; --panel: #fff !important; --text: #111 !important; --line: #ccc !important; --mute: #555 !important; --panel2: #eee !important; }
  body { background: #fff; color: #111; }
  .topbar, .no-print, #decor, #toasts, .egg-joke, .tour-spot, .tour-card { display: none !important; }
  .help-block > summary::before, .release-name::before { display: none; }
  .card { border: 0; padding: 0; }
  .analytics { padding: 0; width: 100%; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- question bank ---------- */
.bank-list { list-style: none; margin: 0.7rem 0 0; padding: 0; display: grid; gap: 0.5rem; max-height: 26rem; overflow: auto; }
.bank-item { border: 1px solid var(--line); border-radius: 10px; padding: 0.5rem 0.6rem; display: grid; gap: 0.25rem; background: var(--panel2); }
.bank-item[draggable="true"] { cursor: grab; }
.bank-item[draggable="true"]:active { cursor: grabbing; }
.drop-ok { outline: 3px dashed var(--accent2); outline-offset: 3px; }
.q-item.bad { border-color: var(--danger); }
.bank-table .prompt-field { min-width: 16rem; width: 100%; font-weight: 650; }
.bank-table td { vertical-align: top; }
.switch.small { font-size: 0.82rem; margin: 0.3rem 0 0; color: var(--mute); }
.switch.small input { width: 1rem; height: 1rem; }
.filters-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); margin-bottom: 0.8rem; }
.bulk { margin-bottom: 0.4rem; }
.bulk .field { width: auto; max-width: 16rem; }
#preview .q-list { margin: 0.8rem 0; }
#preview .q-item .field { margin-top: 0.4rem; }

/* ---------- easter egg ---------- */
.pulse-mark { cursor: pointer; }
.egg-joke { position: fixed; z-index: 70; left: 50%; top: 4.2rem; transform: translateX(-50%); width: min(92vw, 30rem); display: flex; gap: 0.8rem; align-items: center; background: var(--accent2); color: var(--on-accent2); border-radius: 16px; padding: 0.9rem 1.1rem; font-weight: 700; font-size: 1.05rem; box-shadow: 0 12px 40px rgb(0 0 0 / 0.4); cursor: pointer; animation: egg-pop 0.35s cubic-bezier(0.3, 1.5, 0.5, 1); }
.egg-face { font-size: 1.8rem; }
@keyframes egg-pop { from { transform: translateX(-50%) scale(0.6); opacity: 0; } }
#app.egg-shake { animation: egg-shake 0.6s; }
#app.egg-wobble { animation: egg-wobble 1s; }
#app.egg-spin { animation: egg-spin 0.9s cubic-bezier(0.5, 0, 0.3, 1); }
#app.egg-bounce { animation: egg-bounce 0.9s; }
#app.egg-tilt { animation: egg-tilt 1s; }
@keyframes egg-shake { 10%, 50%, 90% { transform: translateX(-10px); } 30%, 70% { transform: translateX(10px); } }
@keyframes egg-wobble { 20% { transform: rotate(-2.5deg); } 40% { transform: rotate(2deg); } 60% { transform: rotate(-1.2deg); } 80% { transform: rotate(0.6deg); } }
@keyframes egg-spin { to { transform: rotate(360deg); } }
@keyframes egg-bounce { 25% { transform: translateY(-26px); } 50% { transform: translateY(0); } 70% { transform: translateY(-10px); } }
@keyframes egg-tilt { 30% { transform: perspective(900px) rotateX(14deg); } 65% { transform: perspective(900px) rotateX(-8deg); } }
.egg-rain { position: fixed; inset: 0; z-index: 65; pointer-events: none; overflow: hidden; }
.egg-rain span { position: absolute; top: -3rem; animation: egg-fall 1.9s ease-in forwards; }
@keyframes egg-fall { to { transform: translateY(115vh) rotate(260deg); } }

@media (max-width: 62rem) {
  .host, .host-cols { grid-template-columns: minmax(0, 1fr); }
  .session-head { grid-template-columns: auto minmax(0, 1fr); }
  .session-settings { grid-column: 1 / -1; }
  .live-card { position: static; }
}
/* The same two folds, by the width of the session column itself: settings drop under the QR
   and the name instead of squeezing them, then everything stacks. */
@container host-main (max-width: 62rem) {
  .session-head { grid-template-columns: auto minmax(0, 1fr); }
  .session-settings { grid-column: 1 / -1; }
}
@container host-main (max-width: 26rem) { .session-head { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 48rem) {
  .present-bar { padding: 0.6rem 0.9rem; }
  .join-hint { order: 3; width: 100%; }
  .controls { left: 0.5rem; right: 0.5rem; transform: none; bottom: 0.5rem; max-width: none; }
  .req { grid-template-columns: minmax(0, 1fr); }
  .req-votes { grid-auto-flow: column; justify-content: start; align-items: center; gap: 0.5rem; }
}
@media (max-width: 34rem) {
  .session-head { grid-template-columns: minmax(0, 1fr); }
  .bar-row { grid-template-columns: minmax(0, 1fr) auto; }
  .bar-row .bar-track { grid-column: 1 / -1; grid-row: 2; }
  .lane { grid-template-columns: 1fr; gap: 0; }
}
body.call .reaction { animation-duration: 3s; }
@media (prefers-reduced-motion: reduce) {
  .reaction { animation: none !important; opacity: 1; bottom: auto; top: 20%; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  #decor { display: none; }
}

/* Calendar invitations: who is invited */
.invite-panel { display: grid; gap: 0.5rem; margin-top: 0.3rem; }
.invite-people { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.invite-people .chip { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--text); font-weight: 600; }
.chip-x { border: 0; background: none; color: var(--mute); cursor: pointer; font-size: 0.8rem; padding: 0 0.1rem; line-height: 1; }
.chip-x:hover, .chip-x:focus-visible { color: var(--text); }
.invite-add { display: grid; gap: 0.4rem; }
.invite-typed { display: flex; gap: 0.4rem; align-items: center; }
.invite-typed .field { flex: 1; margin: 0; }
#profile-invites:empty { display: none; }
.theme-list li { flex-wrap: wrap; }
.host-side > * { min-width: 0; }

/* Admin: row buttons and the one-time code dialog */
.row-actions { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.dialog { background: var(--panel); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 1.2rem; width: min(32rem, calc(100vw - 2rem)); }
.dialog::backdrop { background: rgb(0 0 0 / 0.6); }
.dialog h3 { margin-top: 0; overflow-wrap: anywhere; }
.dialog label { display: block; margin-bottom: 0.3rem; font-weight: 650; }
.dialog .btn-row { margin-top: 1rem; }
.code-show { font: 700 1.8rem/1.2 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.08em; padding: 0.7rem 0.9rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); overflow-wrap: anywhere; user-select: all; text-align: center; }
/* The buttons column stays in view when the People table is wider than the screen. */
.people-table th:last-child, .people-table td:last-child { position: sticky; right: 0; background: var(--panel); box-shadow: -8px 0 8px -8px rgb(0 0 0 / 0.45); }
.people-table .row-actions { flex-direction: column; align-items: stretch; }
.people-table .row-actions .btn { white-space: nowrap; }

/* A voter's own summary when a session or Offbeat is over */
.recap { display: grid; gap: 0.8rem; }
.recap h2 { margin: 0; }
.recap-list { list-style: decimal; padding-left: 1.3rem; margin: 0; display: grid; gap: 1rem; }
.recap-list > li { display: grid; gap: 0.35rem; }
.recap-q { overflow-wrap: anywhere; }
.recap-you, .recap-team { margin: 0; overflow-wrap: anywhere; }
.recap-bars { list-style: none; margin: 0.15rem 0 0; padding: 0; display: grid; gap: 0.25rem; }
.recap-bars li { display: grid; grid-template-columns: minmax(3.5rem, 34%) 1fr 3rem; gap: 0.5rem; align-items: center; font-size: 0.9rem; color: var(--mute); }
.recap-bars li.you { color: var(--text); font-weight: 700; }
.recap-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recap-bar { height: 0.55rem; border-radius: 99px; background: var(--panel2); overflow: hidden; }
.recap-bar i { display: block; height: 100%; border-radius: 99px; background: var(--line-strong); }
.recap-bars li.you .recap-bar i { background: var(--accent); }
.recap-pct { text-align: right; font-variant-numeric: tabular-nums; }

/* The signed-in person's name in the menu links to their account page */
a.who { text-decoration: none; color: inherit; }
a.who:hover, a.who:focus-visible { text-decoration: underline; }

/* "A new version is here" card for staff */
.update-card { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; width: min(22rem, calc(100vw - 2rem)); background: var(--panel); color: var(--text); border: 1px solid var(--line-strong); border-left: 6px solid var(--accent); border-radius: var(--radius); padding: 0.9rem 1rem; box-shadow: 0 12px 40px rgb(0 0 0 / 0.4); display: grid; gap: 0.45rem; }
.update-card .update-head { font-size: 1.05rem; }
.update-card ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; font-size: 0.92rem; }
.update-card p { margin: 0; }
@media (prefers-reduced-motion: no-preference) { .update-card { animation: update-in 0.35s ease-out; } }
@keyframes update-in { from { transform: translateY(1rem); opacity: 0; } to { transform: none; opacity: 1; } }

/* Account page: passkeys, where you are signed in, recent activity */
.page-signin section.passkeys { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.page-signin section.passkeys h2 { font-size: 1.15rem; margin: 1.2rem 0 0.3rem; }
.page-signin section.passkeys h2:first-child { margin-top: 0; }
.activity-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.activity-list li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 0.4rem; }
.activity-list li .fine { white-space: nowrap; margin: 0; }
/* account page: preferences under the password form */
.account-extras { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line, rgba(128,128,128,.3)); text-align: left; }
.account-extras h2 { font-size: 1.05rem; margin: 1.2rem 0 0.4rem; }

/* ====================================================================================
   Defib brand: two public themes (Electric neon, Professional) and the "look and feel"
   (data-look on <html>: electric | professional | classic). A theme changes colours; the
   look changes behaviour: glow, motion, corners, headline face. Rules: brand.js and the
   "Brand standards" in the Defib design system.
   ==================================================================================== */

/* ---------- fonts (self-hosted, SIL Open Font Licence, see /fonts/LICENSE.txt) ---------- */
@font-face { font-family: "Big Shoulders Display"; src: url("/fonts/big-shoulders-display-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Big Shoulders Display"; src: url("/fonts/big-shoulders-display-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: Inter; src: url("/fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --font-display: "Big Shoulders Display", "Arial Narrow", "Avenir Next Condensed", Impact, sans-serif;
  --font-brand: Inter, "Avenir Next", "Segoe UI", system-ui, sans-serif;
  /* The product inks, fixed at the page root so an Offbeat screen (which repaints --accent
     further down) can never turn the Pulse mark orange. */
  --ink-pulse: var(--accent); --ink-offbeat: var(--offbeat); --ink-arc: var(--accent2);
  /* Glow: off everywhere except the Electric look on a dark page (set below). */
  --glow-pulse: none; --glow-offbeat: none; --glow-arc: none;
  --glow-pulse-mark: none; --glow-offbeat-mark: none; --glow-arc-mark: none;
}
/* Both looks read in the brand text face, whatever the theme. */
[data-look="electric"] body, [data-look="professional"] body { --font: var(--font-brand); font-family: var(--font-brand); }

/* ---------- the two themes ---------- */
[data-theme="electric"] { --danger-text: #ffb3b8; }
/* One ink per name: in the public themes the Pulse mark is Pulse red, never the "live" colour. */
[data-theme="electric"] .pulse-mark:not(.offbeat-mark), [data-theme="professional"] .pulse-mark:not(.offbeat-mark) { stroke: var(--ink-pulse); }
.offbeat-mark { stroke: var(--ink-offbeat); fill: var(--ink-offbeat); }
/* On Offbeat screens, Offbeat's ink is the primary colour. */
[data-theme="electric"][data-product="offbeat"] body { --accent: var(--offbeat); --on-accent: #101318; }
[data-theme="professional"][data-product="offbeat"] body { --accent: var(--offbeat); --on-accent: #ffffff; }

/* ---------- Defib's own marks ---------- */
.defib-bolt { width: 0.85em; height: 1em; flex: none; stroke: var(--ink-arc); overflow: visible; }
.by-defib, .defib-small { display: inline-flex; align-items: center; gap: 0.35em; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; color: var(--mute); }
.defib-foot { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.defib-lockup { display: none; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: center; }
.defib-lockup .defib-bolt { width: 1.5rem; height: 1.8rem; }
.defib-word { height: 2.6rem; width: 9.7rem; overflow: visible; }
.defib-word text { font-family: var(--font-display); font-weight: 900; font-size: 74px; letter-spacing: 0.03em; fill: none; stroke-width: 1.8; stroke-linejoin: round; }
.defib-tag { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); flex-basis: 100%; text-align: center; }
[data-look="electric"] .defib-lockup { display: inline-flex; }
[data-look="electric"] .defib-small { display: none; }
/* Neon needs the dark: on a light page the wordmark is solid ink, no gradient. */
[data-scheme="light"] .defib-word text { fill: var(--text); stroke: none; }

/* ---------- errors never rely on red alone ---------- */
/* Pulse is red in the public themes, so every error surface carries a warning sign as well as
   its words, in every theme. (The second `content` hides the sign from screen readers, which
   already read the words; browsers that do not know that form keep the first.) */
.toast.error::before, .toast.warn::before, .form-error:not(:empty)::before, .btn.danger::before, .q-item.bad .q-text::before, .war-clock.over::before {
  content: "\26A0\FE0E"; content: "\26A0\FE0E" / ""; display: inline-block; margin-right: 0.4em; font-weight: 700; font-family: system-ui, sans-serif;
}
.form-error, .btn.danger, .q-item.bad { box-shadow: none !important; text-shadow: none !important; }
.btn.danger { border-style: dashed; }

/* ---------- the reveal: "Charging… Clear!" (presenter, Electric look only) ---------- */
.reveal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; align-content: center; gap: 1.5rem; background: color-mix(in srgb, var(--bg) 94%, transparent); cursor: pointer; border: 0; padding: 1rem; color: var(--text); font: inherit; width: 100%; }
.reveal svg { width: min(80vw, 60rem); height: auto; overflow: visible; }
.reveal path { fill: none; stroke: var(--ink-arc); stroke-width: 0.9; stroke-linecap: round; stroke-linejoin: round; }
.reveal .reveal-trace { stroke: var(--ink-pulse); stroke-dasharray: 190; stroke-dashoffset: 190; opacity: 0; }
.reveal-word { font: 900 clamp(3rem, 11vw, 9rem) / 1 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-arc); display: grid; }
.reveal-word > span { grid-area: 1 / 1; }
.reveal-clear { opacity: 0; }
.reveal-skip { font-size: 0.86rem; color: var(--mute); }

/* ====================================================================================
   Electric look
   ==================================================================================== */
[data-look="electric"] { --radius: 6px; }
[data-look="electric"] :is(.btn, .field, .theme-pick, .code-input, .card, .opt, .q-item, .entry, .toast, .dialog, .tile, .session-item, .controls, .brand-switch, .brand-tab, .rank-list li, .req, .rem, .bank-item, .side-link, .qs, .update-card, .tour-card, .remote-big, .cost.mini, .react-emoji, .code-show, .side-nav.open, .qr, .qr.big, .qr.mini, button.vote, .egg-joke, .room-notice, .tip, .swatch input) { border-radius: 6px; }

/* Headlines and wordmarks: the display face, capitals. Questions people have to read stay in
   the text face, as written. */
[data-look="electric"] h1:not(.q-prompt) { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1; font-size: clamp(2.2rem, 7vw, 3.4rem); }
[data-look="electric"] .lobby-view h1 { font-size: clamp(3rem, 8vw, 7rem); }
[data-look="electric"] .brand { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-pulse); }
[data-look="electric"][data-product="offbeat"] .brand:not(.brand-tab), [data-look="electric"] .brand-tab.is-offbeat { color: var(--ink-offbeat); }
[data-look="electric"] .brand .session-title { font-family: var(--font-brand); font-weight: 700; font-size: 1.05rem; letter-spacing: 0; text-transform: none; color: var(--text); line-height: 1.3; }
[data-look="electric"] .present-bar .brand .session-title { font-size: 1em; }
[data-look="electric"] :is(.chip.open, .chip.time, .chip.kind, .q-type, .side-label, .tile-label) { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; }
[data-look="electric"] .question-view .q-type { font-size: clamp(0.8rem, 1.1vw, 1.1rem); }
[data-look="electric"] .tile-value, [data-look="electric"] .timer-num { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.02em; }

/* Glow tokens: a tight 2px core, a 14px halo and a faint 42px bloom in the ink's own colour.
   Only on a dark page: neon needs the dark. */
[data-look="electric"][data-scheme="dark"] {
  --glow-pulse: 0 0 2px color-mix(in srgb, var(--ink-pulse) 90%, transparent), 0 0 14px color-mix(in srgb, var(--ink-pulse) 60%, transparent), 0 0 42px color-mix(in srgb, var(--ink-pulse) 30%, transparent);
  --glow-offbeat: 0 0 2px color-mix(in srgb, var(--ink-offbeat) 90%, transparent), 0 0 14px color-mix(in srgb, var(--ink-offbeat) 60%, transparent), 0 0 42px color-mix(in srgb, var(--ink-offbeat) 30%, transparent);
  --glow-arc: 0 0 2px color-mix(in srgb, var(--ink-arc) 90%, transparent), 0 0 14px color-mix(in srgb, var(--ink-arc) 60%, transparent), 0 0 42px color-mix(in srgb, var(--ink-arc) 30%, transparent);
  --glow-pulse-mark: drop-shadow(0 0 2px color-mix(in srgb, var(--ink-pulse) 90%, transparent)) drop-shadow(0 0 10px color-mix(in srgb, var(--ink-pulse) 60%, transparent));
  --glow-offbeat-mark: drop-shadow(0 0 2px color-mix(in srgb, var(--ink-offbeat) 90%, transparent)) drop-shadow(0 0 10px color-mix(in srgb, var(--ink-offbeat) 60%, transparent));
  --glow-arc-mark: drop-shadow(0 0 2px color-mix(in srgb, var(--ink-arc) 90%, transparent)) drop-shadow(0 0 12px color-mix(in srgb, var(--ink-arc) 60%, transparent));
}
/* What glows. At most three things on a screen: (1) the mark in the top bar (or the DEFIB
   lockup where the company speaks), (2) the one live thing (live chip on the host console,
   timer on the big screen and the phone, the join code in the lobby), (3) the thing being
   acted on (a primary button under the pointer, or the chosen answer). Never text, panels,
   fields at rest or anything that is an error. */
[data-look="electric"] .topbar .brand:not(.brand-tab) .pulse-mark:not(.offbeat-mark), [data-look="electric"] .brand-tab.on .pulse-mark:not(.offbeat-mark) { filter: var(--glow-pulse-mark); }
[data-look="electric"] .topbar .brand:not(.brand-tab) .offbeat-mark, [data-look="electric"] .brand-tab.on .offbeat-mark { filter: var(--glow-offbeat-mark); }
[data-look="electric"] .defib-lockup .defib-bolt { filter: var(--glow-arc-mark); }
[data-look="electric"][data-scheme="dark"] .defib-word text { filter: drop-shadow(0 0 2px rgb(255 138 31 / 0.9)) drop-shadow(0 0 12px rgb(255 45 85 / 0.6)); }
[data-look="electric"] .chip.open { box-shadow: var(--glow-arc); }
[data-look="electric"] :is(.page-present, .page-join) .timer:not(.urgent) .timer-bar { overflow: visible; }
[data-look="electric"] :is(.page-present, .page-join) .timer:not(.urgent) .timer-bar i { box-shadow: var(--glow-arc); }
[data-look="electric"][data-scheme="dark"] .big-code { text-shadow: 0 0 14px color-mix(in srgb, var(--ink-arc) 55%, transparent); }
[data-look="electric"] .opt.on { box-shadow: var(--glow-pulse); }
[data-look="electric"][data-product="offbeat"] .opt.on { box-shadow: var(--glow-offbeat); }

/* Hairlines over fills: the primary button is a lit outline, and lights up under the pointer. */
[data-look="electric"] .btn.primary { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.86em; font-weight: 700; }
[data-look="electric"] .btn.primary.big { font-size: 1rem; }
[data-look="electric"][data-scheme="dark"] .btn.primary { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); color: color-mix(in srgb, var(--accent) 72%, var(--text)); border: 1.5px solid var(--accent); transition: transform 0.08s, background 0.15s, box-shadow 0.15s; }
[data-look="electric"][data-scheme="dark"] .btn.primary:hover { background: color-mix(in srgb, var(--accent) 22%, var(--panel)); }
@media (hover: hover) {
  [data-look="electric"] :not(.controls) > .btn.primary:not(:disabled):hover { box-shadow: var(--glow-pulse); }
  [data-look="electric"][data-product="offbeat"] :not(.controls) > .btn.primary:not(:disabled):hover { box-shadow: var(--glow-offbeat); }
}
[data-look="electric"][data-scheme="dark"] .q-item.live { box-shadow: inset 2px 0 0 var(--accent2); }

/* Motion. Everything live has a pulse; everything else holds still. Stops in the video-call
   layout and (by the rule further up) when the viewer asked for less motion: the glow stays,
   the movement stops. The double beat is two swells a second, well under three flashes. */
@keyframes heartbeat { 0%, 100% { opacity: 0.72; } 12% { opacity: 1; } 24% { opacity: 0.8; } 36% { opacity: 1; } 60% { opacity: 0.72; } }
@keyframes power-on { 0% { opacity: 0; } 20% { opacity: 1; } 40% { opacity: 0.3; } 60%, 100% { opacity: 1; } }
@keyframes reveal-charge { from { opacity: 0.25; filter: none; } to { opacity: 1; filter: var(--glow-arc-mark); } }
@keyframes reveal-hide { to { opacity: 0; visibility: hidden; } }
@keyframes reveal-show { to { opacity: 1; } }
@keyframes reveal-flash { 0% { background: color-mix(in srgb, #fbffd0 55%, var(--bg)); } 100% { background: color-mix(in srgb, var(--bg) 94%, transparent); } }
@keyframes reveal-draw { from { stroke-dashoffset: 190; opacity: 1; } to { stroke-dashoffset: 0; opacity: 1; } }
[data-look="electric"][data-scheme="dark"] body:not(.call) .topbar .brand:not(.brand-tab) { animation: power-on 0.45s steps(1, end) 1; }
[data-look="electric"][data-scheme="dark"] body:not(.call) .defib-lockup { animation: power-on 0.45s steps(1, end) 0.15s 1 backwards; }
/* The travelling point of light: only on a mark that glows (the top bar's, or the chosen brand
   tab), so it is one more detail of a thing already lit, not a fourth glowing thing. It takes the
   mark's own glow. Hidden everywhere else: other looks, a light page, the call layout, less motion. */
@media (prefers-reduced-motion: no-preference) {
  [data-look="electric"][data-scheme="dark"] body:not(.call) :is(.topbar .brand:not(.brand-tab), .brand-tab.on) .mark-runner { display: inline; }
}
/* The mark beats while a question is open; Offbeat breathes at half the speed, and lands late. */
[data-look="electric"][data-scheme="dark"] body.live-q:not(.call) .topbar .brand .pulse-mark:not(.offbeat-mark) { animation: heartbeat 1s ease-in-out infinite; }
[data-look="electric"][data-scheme="dark"] body:not(.call) .topbar .brand:not(.brand-tab) .offbeat-mark, [data-look="electric"][data-scheme="dark"] body:not(.call) .brand-tab.on .offbeat-mark { animation: heartbeat 2s ease-in-out 0.5s infinite; }
[data-look="electric"][data-scheme="dark"] body:not(.call) .chip.open { animation: heartbeat 1s ease-in-out infinite; }
[data-look="electric"][data-scheme="dark"] body:not(.call):is(.page-present, .page-join) .timer:not(.urgent) .timer-bar i { animation: heartbeat 1s ease-in-out infinite; }
/* The reveal, 1.7 seconds: charge, one flash, the flat line jumps into the trace, results land. */
.reveal { animation: reveal-flash 0.18s ease-out 0.9s 1, reveal-hide 0.3s ease-in 1.4s 1 forwards; }
.reveal .reveal-flat { animation: reveal-charge 0.9s ease-in 1 both, reveal-hide 0.01s linear 0.9s 1 forwards; }
.reveal .reveal-trace { animation: reveal-draw 0.4s ease-out 0.9s 1 forwards; }
.reveal .reveal-charging { animation: reveal-charge 0.9s ease-in 1 both, reveal-hide 0.01s linear 0.9s 1 forwards; }
.reveal .reveal-clear { animation: reveal-show 0.01s linear 0.9s 1 forwards; }

/* ====================================================================================
   Alive neon (2026-11): the two product profiles, and movement.
   Pulse is a deep red lit with light orange; Offbeat is the same reversed. Values: brand.js
   PRODUCT_PROFILES (tests/brand.test.js checks contrast with these same mixing recipes).
   ==================================================================================== */
[data-theme="electric"] { --offbeat-hi: #ff5a78; --ink-defib: #eeff41; }
/* Lines, borders and quiet text take the product's own tint instead of a grey. Set on body, so
   they follow the product (Offbeat repaints --accent there). */
[data-theme="electric"][data-scheme="dark"] body {
  --line: color-mix(in srgb, var(--accent) 26%, var(--bg));
  --line-strong: color-mix(in srgb, var(--accent) 55%, color-mix(in srgb, var(--text) 48%, var(--bg)));
  --mute: color-mix(in srgb, color-mix(in srgb, var(--accent2) 25%, var(--text)) 70%, var(--bg));
  --panel2: color-mix(in srgb, var(--accent) 10%, color-mix(in srgb, var(--text) 5%, var(--panel)));
}
/* Offbeat: its own ground, and red where Pulse is orange. */
[data-theme="electric"][data-scheme="dark"][data-product="offbeat"] body { --bg: #070402; --panel: #140b05; --text: #fff6ec; --accent2: var(--offbeat-hi); --on-accent2: #1a1300; background: var(--bg); color: var(--text); }
/* Defib's own bolt stays electric yellow whatever the product's highlight is. */
[data-theme="electric"] .defib-bolt { stroke: var(--ink-defib); }
[data-look="electric"][data-theme="electric"][data-scheme="dark"] .defib-lockup .defib-bolt { filter: drop-shadow(0 0 2px color-mix(in srgb, var(--ink-defib) 90%, transparent)) drop-shadow(0 0 12px color-mix(in srgb, var(--ink-defib) 60%, transparent)); }

/* The primary button: a lit outline on a ground that deepens downward, labelled in the highlight. */
[data-look="electric"][data-scheme="dark"] .btn.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, var(--panel)), color-mix(in srgb, var(--accent) 26%, var(--panel))); color: color-mix(in srgb, var(--accent2) 60%, var(--text)); }
[data-look="electric"][data-scheme="dark"] .btn.primary:hover { background: color-mix(in srgb, var(--accent) 32%, var(--panel)); }
/* The product's name in the top bar runs from its colour into its highlight. */
[data-look="electric"][data-theme="electric"][data-scheme="dark"] .topbar .brand:not(.brand-tab) { background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* A lit line under the top bar, and a faint band across the live question. */
[data-look="electric"][data-scheme="dark"] .topbar { position: relative; }
[data-look="electric"][data-scheme="dark"] .topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--accent), var(--accent2), var(--accent), transparent) no-repeat 50% 0 / 50% 100%, color-mix(in srgb, var(--accent) 25%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 80%, transparent); }
[data-look="electric"][data-scheme="dark"] .q-item.live { background-image: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--accent2) 16%, transparent) 50%, transparent 70%); background-size: 60% 100%; background-repeat: no-repeat; background-position: 50% 0; }

/* Movement. The button that matters has a pulse: the big button of a page, a button marked
   .vital (open or close voting, send an Offbeat, next question), and the Save of a form somebody
   has typed in (common.js marks the form). Never a disabled button, never .danger. Pulse beats
   twice a second; Offbeat breathes at half the speed and lands late. All of it stops in the
   video-call layout and for anyone who asked for less motion (the rule further up): the lit
   outline stays, the movement stops. */
@keyframes vital-beat {
  0%, 60%, 100% { box-shadow: 0 0 2px color-mix(in srgb, var(--accent) 90%, transparent), 0 0 6px color-mix(in srgb, var(--accent) 30%, transparent); }
  12%, 36% { box-shadow: 0 0 3px var(--accent2), 0 0 16px color-mix(in srgb, var(--accent) 80%, transparent), 0 0 46px color-mix(in srgb, var(--accent) 45%, transparent); }
  24% { box-shadow: 0 0 2px color-mix(in srgb, var(--accent) 90%, transparent), 0 0 10px color-mix(in srgb, var(--accent) 50%, transparent); }
}
/* One beat: a second in Pulse, two in Offbeat. "Calm" (a person's own setting) doubles it. */
[data-product="offbeat"] body { --beat: 2s; }
@keyframes neon-flow { from { background-position: -100% 0, 0 0; } to { background-position: 200% 0, 0 0; } }
@keyframes neon-shimmer { from { background-position: -150% 0; } to { background-position: 250% 0; } }
@media (prefers-reduced-motion: no-preference) {
  [data-look="electric"][data-scheme="dark"] body:not(.call) :is(.btn.primary.vital, .btn.primary.big, form[data-dirty] .btn.primary[type="submit"]):not(:disabled):not(.danger) { animation: vital-beat var(--beat, 1s) ease-in-out infinite; }
  [data-look="electric"][data-scheme="dark"][data-product="offbeat"] body:not(.call) :is(.btn.primary.vital, .btn.primary.big, form[data-dirty] .btn.primary[type="submit"]):not(:disabled):not(.danger) { animation-delay: 0.5s; }
  [data-look="electric"][data-scheme="dark"] body:not(.call) .topbar::after { animation: neon-flow calc(var(--beat, 1s) * 3) linear infinite; }
  [data-look="electric"][data-scheme="dark"] body:not(.call) .q-item.live { animation: neon-shimmer calc(var(--beat, 1s) * 3) linear infinite; }
}

/* ====================================================================================
   A person's own layout and design (account page; design.js lists the values, themes.js puts
   the ones that differ from the default on <html>). These are somebody's stated preference,
   so where they must beat a look's own rule they say !important.
   ==================================================================================== */
/* Size: the whole page scales together (text, buttons, rows, spacing). Works with Larger text. */
[data-size="mini"] { --size-scale: 0.8125; }
[data-size="compact"] { --size-scale: 0.875; }
[data-size="small"] { --size-scale: 0.9375; }
[data-size="large"] { --size-scale: 1.125; }
/* Lines: Lite thins outlines and fades dividers; Bold doubles them. Control borders keep their colour. */
[data-lines="lite"] body { --line: color-mix(in srgb, var(--text) 9%, var(--bg)); }
[data-lines="lite"] body :is(.btn, .field, .code-input, .theme-pick) { border-width: 1px !important; }
[data-lines="bold"] body :is(.btn, .field, .code-input, .theme-pick, .card, .opt, .q-item, .tile, .session-item, .side-nav, .brand-switch, .look-pick) { border-width: 2px !important; }
[data-lines="lite"] .topbar::after { height: 1px; }
[data-lines="bold"] .topbar::after { height: 3px; }
/* Corners: boxes and controls take one radius each instead of the look's own. */
[data-corners="sharp"] { --corner-box: 2px; --corner-ctl: 2px; }
[data-corners="soft"] { --corner-box: 12px; --corner-ctl: 10px; }
[data-corners="round"] { --corner-box: 20px; --corner-ctl: 999px; }
[data-corners] body :is(.card, .opt, .q-item, .tile, .session-item, .toast, .dialog, .side-nav, .look-pick, .entry, .bank-item, .update-card, .tour-card) { border-radius: var(--corner-box) !important; }
[data-corners] body :is(.btn, .theme-pick, .chip, .brand-switch, .brand-tab, .side-link) { border-radius: var(--corner-ctl) !important; }
[data-corners] body :is(.field, .code-input) { border-radius: min(var(--corner-ctl), 14px) !important; }
/* Glow: Off removes every halo (the lit outline stays); Soft keeps one small one. */
[data-glow="off"][data-look][data-scheme], [data-glow="off"][data-look][data-scheme] body { --glow-pulse: none; --glow-offbeat: none; --glow-arc: none; --glow-pulse-mark: none; --glow-offbeat-mark: none; --glow-arc-mark: none; }
[data-glow="off"] body :is(.btn, .chip, .opt, .big-code, .defib-bolt, .defib-word text, .pulse-mark, .timer-bar i), [data-glow="off"] .topbar::after { box-shadow: none !important; text-shadow: none !important; filter: none !important; }
[data-glow="off"] body .btn.primary { animation: none !important; }
[data-glow="soft"][data-look="electric"][data-scheme="dark"] {
  --glow-pulse: 0 0 8px color-mix(in srgb, var(--ink-pulse) 45%, transparent); --glow-offbeat: 0 0 8px color-mix(in srgb, var(--ink-offbeat) 45%, transparent); --glow-arc: 0 0 8px color-mix(in srgb, var(--ink-arc) 45%, transparent);
  --glow-pulse-mark: drop-shadow(0 0 4px color-mix(in srgb, var(--ink-pulse) 55%, transparent)); --glow-offbeat-mark: drop-shadow(0 0 4px color-mix(in srgb, var(--ink-offbeat) 55%, transparent)); --glow-arc-mark: drop-shadow(0 0 4px color-mix(in srgb, var(--ink-arc) 55%, transparent));
}
@keyframes vital-beat-soft {
  0%, 60%, 100% { box-shadow: 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent); }
  12%, 36% { box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent); }
  24% { box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 40%, transparent); }
}
[data-glow="soft"] body .btn.primary { animation-name: vital-beat-soft !important; }
[data-glow="soft"] .topbar::after { box-shadow: 0 0 5px color-mix(in srgb, var(--accent) 50%, transparent) !important; }
/* Movement: Still is the same as a device that asks for less motion; Calm halves the tempo. */
[data-motion="still"] .reaction { animation: none !important; opacity: 1; bottom: auto; top: 20%; }
[data-motion="still"] *, [data-motion="still"] *::before, [data-motion="still"] *::after { animation: none !important; transition: none !important; }
[data-motion="still"] #decor { display: none; }
[data-motion="calm"] body { --beat: 2s; }
[data-motion="calm"][data-product="offbeat"] body { --beat: 4s; }
[data-motion="calm"] body :is(.chip.open, .pulse-mark, .offbeat-mark, .timer-bar i) { animation-duration: 2s !important; }
/* The section itself, on the account page. */
.design-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem 0.8rem; }
.design-row { display: grid; gap: 0.25rem; min-width: 0; }
.design-row .field { width: 100%; }

/* ------------------------------------------------------------------------------------
   Layouts (the first row of "Layout and design"). Classic carries no attribute and none of
   these rules. Each other layout is one block, every rule under its own [data-layout].
   Ops: an operations dashboard. A narrow menu with counts, a left-aligned title over a
   toolbar of small buttons, a strip, four cards with a coloured top edge, filter chips and
   one dense table. Sizes are in rem so the Size setting scales them (16px = 1rem):
   11px labels, 12px buttons and chips, 13px cells, 22px title, 32px numbers.
   ------------------------------------------------------------------------------------ */
/* The menu: counts on links, and the connection and version at its foot. */
[data-layout="ops"] .side-link .side-text { flex: 1; }
[data-layout="ops"] .side-badge { flex: none; font-size: 0.6875rem; font-weight: 700; line-height: 1.5; border-radius: var(--corner-ctl, 99px); padding: 0 0.44rem; background: var(--panel2); color: var(--text); border: 1px solid var(--line); }
[data-layout="ops"] .side-link[aria-current="page"] .side-badge { background: var(--accent); color: var(--on-accent); border-color: transparent; }
[data-layout="ops"] .side-badge.zero { color: var(--mute); }
[data-layout="ops"] .side-status { display: grid; gap: 0.3rem; padding: 0.6rem 0.7rem 0.3rem; margin-top: 0.3rem; border-top: 1px solid var(--line); }
[data-layout="ops"] .side-live { display: flex; align-items: center; gap: 0.45rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; color: var(--text); }
[data-layout="ops"] .side-live .side-text { flex: none; }
[data-layout="ops"] .side-dot { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent2); }
[data-layout="ops"] .side-live.off { color: var(--danger-text); }
[data-layout="ops"] .side-live.off .side-dot { background: var(--danger); }
[data-layout="ops"] .side-version { font-size: 0.6875rem; color: var(--mute); }
[data-layout="ops"][data-look="electric"][data-scheme="dark"] .side-live:not(.off) .side-dot { box-shadow: 0 0 8px var(--accent2); }
@media (prefers-reduced-motion: no-preference) {
  [data-layout="ops"][data-look="electric"][data-scheme="dark"] .side-live:not(.off) .side-dot { animation: heartbeat var(--beat, 1s) ease-in-out infinite; }
}
@media (min-width: 68.01rem) {
  [data-layout="ops"] body.nav-side { padding-left: 14rem; }
  [data-layout="ops"] body.nav-side .side-nav { width: 14rem; padding: 0.75rem; }
  [data-layout="ops"] body.nav-side .text-size { left: 14.6rem; }
  [data-layout="ops"] body.nav-side .side-link { font-size: 0.8125rem; font-weight: 500; padding: 0.5rem 0.625rem; min-height: 2.0625rem; gap: 0.5rem; border-radius: var(--corner-ctl, 7px); border: 1px solid transparent; }
  [data-layout="ops"] body.nav-side .side-link .ico { width: 1.125rem; height: 1.125rem; }
  [data-layout="ops"] body.nav-side .side-link[aria-current="page"] { font-weight: 600; background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: none; }
  [data-layout="ops"] body.nav-side .side-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.35rem 0.625rem 0.25rem; }
  [data-layout="ops"] body.nav-side .side-link.who { font-size: 0.8125rem; font-weight: 600; }
  [data-layout="ops"] body.nav-mini .side-link { position: relative; }
  [data-layout="ops"] body.nav-mini .side-badge { position: absolute; top: 0; right: 0; font-size: 0.5625rem; padding: 0 0.25rem; }
  [data-layout="ops"] body.nav-mini .side-status { padding: 0.6rem 0 0.3rem; justify-items: center; }
}
/* The two states of the Sessions page: the board, or one open session under a way back. */
[data-layout="ops"] body.board-list .host { display: flex; flex-direction: column; gap: 1rem; padding: 1.375rem 1.625rem 3rem; align-items: stretch; }
[data-layout="ops"] body.board-list :is(.host-main, .board-back), [data-layout="ops"] body.board-detail .ops-board { display: none; }
[data-layout="ops"] .board-back { grid-column: 1 / -1; }
[data-layout="ops"] body.board-list .host-side { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); align-items: start; }
/* The board. */
[data-layout="ops"] .ops-board { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; min-width: 0; font-size: 0.8125rem; line-height: 1.45; }
[data-layout="ops"] .ops-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.75rem; }
[data-layout="ops"] .ops-titles { flex: 1 1 14rem; min-width: 0; }
[data-layout="ops"] body .ops-board .ops-title { font-family: var(--font); font-size: 1.375rem; font-weight: 700; line-height: 1.25; letter-spacing: 0; text-transform: none; text-align: left; text-shadow: none; }
[data-layout="ops"] .ops-sub { margin-top: 0.125rem; color: var(--mute); }
[data-layout="ops"] .ops-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
[data-layout="ops"] body .ops-btn { font-size: 0.75rem; font-weight: 500; padding: 0.3125rem 0.625rem; min-height: 1.75rem; border-radius: var(--corner-ctl, 7px); margin: 0; width: auto; }
[data-layout="ops"] body .ops-btn.primary { font-weight: 700; }
[data-layout="ops"] body a.ops-btn { color: var(--text); }
[data-layout="ops"] .ops-auto { color: var(--mute); font-size: 0.75rem; padding: 0 0.25rem; white-space: nowrap; }
[data-layout="ops"] .ops-menu { position: relative; }
[data-layout="ops"] .ops-menu > summary { list-style: none; }
[data-layout="ops"] .ops-menu > summary::-webkit-details-marker { display: none; }
[data-layout="ops"] .ops-menu[open] > summary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
[data-layout="ops"] .ops-menu-box { position: absolute; z-index: 30; right: 0; top: calc(100% + 0.375rem); display: grid; gap: 0.45rem; min-width: 11rem; padding: 0.7rem 0.8rem; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--corner-box, 10px); box-shadow: 0 12px 40px rgb(0 0 0 / 0.4); }
[data-layout="ops"] .ops-menu-box .switch { font-size: 0.8125rem; white-space: nowrap; }
[data-layout="ops"] :is(.ops-strip, .ops-card, .ops-table-wrap, .ops-bulk) { background: var(--panel); border: 1px solid var(--line); border-radius: var(--corner-box, 10px); }
[data-layout="ops"] .ops-strip { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem 1.375rem; padding: 0.6875rem 0.875rem; }
[data-layout="ops"] :is(.ops-strip-label, .ops-label) { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--mute); }
[data-layout="ops"] .ops-strip-note { color: var(--mute); }
[data-layout="ops"] .ops-trend.up { color: var(--ok-text); }
[data-layout="ops"] .ops-trend.down { color: var(--danger-text); }
[data-layout="ops"] .ops-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr)); gap: 0.875rem; }
[data-layout="ops"] .ops-card { --stripe: var(--accent2); display: grid; padding: 1.125rem 1.25rem; border-top: 3px solid var(--stripe); min-width: 0; }
[data-layout="ops"] .ops-card.c-pulse { --stripe: var(--ink-pulse); }
[data-layout="ops"] .ops-card.c-offbeat { --stripe: var(--ink-offbeat); }
[data-layout="ops"] .ops-card.c-follow { --stripe: var(--s7); }
[data-layout="ops"] .ops-num { font-size: 2rem; font-weight: 700; line-height: 1.2; }
[data-layout="ops"][data-look="electric"][data-scheme="dark"] .ops-card { box-shadow: 0 -6px 18px -8px color-mix(in srgb, var(--stripe) 60%, transparent); }
[data-layout="ops"] .ops-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
[data-layout="ops"] .ops-chip { font: inherit; font-size: 0.75rem; line-height: 1.5; padding: 0.25rem 0.75rem; border-radius: var(--corner-ctl, 99px); border: 1px solid var(--line-strong); background: var(--panel2); color: var(--text); cursor: pointer; }
[data-layout="ops"] .ops-chip:hover { background: color-mix(in srgb, var(--text) 14%, var(--panel)); }
[data-layout="ops"] .ops-chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }
[data-layout="ops"] .ops-gap { width: 0.5rem; }
[data-layout="ops"] .ops-everyone { margin-left: auto; font-size: 0.75rem; }
[data-layout="ops"] .ops-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.5rem 0.875rem; border-style: dashed; border-color: var(--accent2); }
[data-layout="ops"] .ops-table-wrap { overflow-x: auto; }
[data-layout="ops"] .ops-table { width: 100%; min-width: 47.5rem; border-collapse: collapse; text-align: left; }
[data-layout="ops"] .ops-table thead tr { background: var(--panel2); }
[data-layout="ops"] .ops-table thead th { padding: 0.625rem 0.75rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
[data-layout="ops"] .ops-sort { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
[data-layout="ops"] .ops-sort:hover, [data-layout="ops"] th[aria-sort] .ops-sort { color: var(--text); }
[data-layout="ops"] .ops-table tbody :is(td, th) { padding: 0.75rem 0.875rem; border-top: 1px solid var(--line); font-weight: 400; vertical-align: middle; white-space: nowrap; }
[data-layout="ops"] .ops-table tbody tr { cursor: pointer; }
[data-layout="ops"] .ops-table tbody tr:hover, [data-layout="ops"] .ops-table tbody tr.is-picked { background: var(--panel2); }
[data-layout="ops"] .ops-table tbody tr.is-live > :first-child { box-shadow: inset 3px 0 0 var(--accent2); }
[data-layout="ops"] .ops-table tr.is-live .ops-code { color: color-mix(in srgb, var(--accent2) 70%, var(--text)); }
[data-layout="ops"] .ops-name { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-layout="ops"] .ops-name a { font-weight: 700; color: var(--text); text-decoration: none; }
[data-layout="ops"] .ops-name a:hover { text-decoration: underline; }
[data-layout="ops"] .ops-code { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.08em; }
[data-layout="ops"] .ops-table .ops-n { text-align: right; }
[data-layout="ops"] .ops-host { color: var(--mute); }
[data-layout="ops"] .ops-table .ops-check { width: 2.25rem; padding-right: 0; }
[data-layout="ops"] .ops-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); vertical-align: middle; }
[data-layout="ops"] .ops-none { padding: 1.5rem 1rem; text-align: center; }
[data-layout="ops"] .ops-pill { --ink: var(--mute); display: inline-block; font-size: 0.6875rem; font-weight: 700; line-height: 1.5; white-space: nowrap; border-radius: var(--corner-ctl, 99px); padding: 0.0625rem 0.5625rem; color: color-mix(in srgb, var(--ink) 62%, var(--text)); background: color-mix(in srgb, var(--ink) 16%, transparent); }
[data-layout="ops"] .ops-pill.p-pulse { --ink: var(--ink-pulse); }
[data-layout="ops"] .ops-pill.p-offbeat { --ink: var(--ink-offbeat); }
[data-layout="ops"] .ops-pill.s-scheduled { --ink: var(--s7); }
[data-layout="ops"] .ops-pill.s-open { --ink: var(--ok-text); }
[data-layout="ops"] .ops-pill.s-live { background: var(--accent2); color: var(--on-accent2); font-weight: 800; }
/* The person's other design settings reach the new boxes too. */
[data-layout="ops"][data-lines="bold"] :is(.ops-strip, .ops-card, .ops-table-wrap, .ops-bulk, .ops-chip, .ops-menu-box, .side-badge) { border-width: 2px; }
[data-layout="ops"][data-lines="bold"] .ops-card { border-top-width: 5px; }
[data-layout="ops"][data-lines="lite"] .ops-card { border-top-width: 2px; }
[data-layout="ops"][data-glow="off"] :is(.ops-card, .side-dot) { box-shadow: none !important; }
[data-layout="ops"][data-glow="soft"][data-look="electric"][data-scheme="dark"] .ops-card { box-shadow: 0 -4px 10px -8px color-mix(in srgb, var(--stripe) 45%, transparent); }
/* A phone: one column, fingers need bigger targets, and only the table scrolls sideways. */
@media (max-width: 48rem) {
  [data-layout="ops"] body.board-list .host { padding: 0.75rem 1rem 3rem; }
  [data-layout="ops"] .ops-titles { flex-basis: 100%; }
  [data-layout="ops"] body .ops-btn, [data-layout="ops"] .ops-chip { min-height: 2.25rem; padding-inline: 0.8rem; }
  [data-layout="ops"] .ops-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
  [data-layout="ops"] .ops-card { padding: 0.75rem 0.875rem; }
  [data-layout="ops"] .ops-strip-note { flex-basis: 100%; }
  [data-layout="ops"] .ops-everyone { margin-left: 0; flex-basis: 100%; }
  [data-layout="ops"] .ops-tools { position: relative; }
  [data-layout="ops"] .ops-menu { position: static; }
  [data-layout="ops"] .ops-menu-box { left: 0; right: 0; top: auto; margin-top: 0.375rem; }
  [data-layout="ops"] .ops-auto { display: none; }
}
@media print { [data-layout="ops"] :is(.ops-tools, .ops-filters, .ops-bulk, .board-back) { display: none; } }

/* ------------------------------------------------------------------------------------
   Channels: the host console arranged like a team-chat app. A 40px top bar with search in
   the middle, a 70px rail of products and destinations, a 260px list of sessions under
   headings, and the open session as a feed with tabs over it, the add-question form pinned
   under it and what is on screen now in a 360px pane. The session view, the question list,
   the form, the bank and the create panels are the console's own (host.js); these rules only
   rearrange them. Every rule sits under body.ch-on, which only the host console sets, so no
   other page changes. Sizes are in rem so the Size setting scales them (16px = 1rem).
   ------------------------------------------------------------------------------------ */
[data-layout="channels"] { --ch-pulse: var(--accent); } /* Pulse's own colour, even while the page wears Offbeat's */
[data-layout="channels"] body.ch-on #app { height: 100dvh; min-height: 0; overflow: hidden; }
[data-layout="channels"] body.ch-on .text-size { left: 0.9875rem; }
/* The top bar: search in the middle, the theme menu at the end. The rail has the rest. */
[data-layout="channels"] body.ch-on .topbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem) minmax(0, 1fr); align-items: center; gap: 0.75rem; flex: none; min-height: 2.5rem; padding: 0 0.75rem; }
[data-layout="channels"] body.ch-on .topbar > :is(.brand-switch, .spacer) { display: none; }
[data-layout="channels"] body.ch-on .topbar .nav-search { grid-column: 2; width: 100%; min-height: 1.75rem; height: 1.75rem; padding: 0 0.75rem; justify-content: flex-start; font-size: 0.8125rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--mute); border-radius: var(--corner-ctl, 6px); box-shadow: none; animation: none; }
[data-layout="channels"] body.ch-on .topbar .nav-search kbd { margin-left: auto; }
[data-layout="channels"] body.ch-on .topbar .theme-pick { grid-column: 3; justify-self: end; min-height: 1.75rem; height: 1.75rem; padding: 0 0.5rem; font-size: 0.8125rem; max-width: 100%; }
/* The frame. */
[data-layout="channels"] body.ch-on .host { flex: 1; min-height: 0; display: grid; grid-template-columns: 4.375rem 16.25rem minmax(0, 1fr) auto; grid-template-rows: 3.0625rem auto minmax(0, 1fr); gap: 0; padding: 0; align-items: stretch; }
[data-layout="channels"] body.ch-on .board-back { display: none; }
[data-layout="channels"] body.ch-on .ch-rail { grid-column: 1; grid-row: 1 / -1; }
[data-layout="channels"] body.ch-on .ch-list { grid-column: 2; grid-row: 1 / -1; }
[data-layout="channels"] body.ch-on .ch-head { grid-column: 3; grid-row: 1; }
[data-layout="channels"] body.ch-on .ch-tabs { grid-column: 3; grid-row: 2; }
[data-layout="channels"] body.ch-on .host-main { grid-column: 3; grid-row: 3; }
[data-layout="channels"] body.ch-on .ch-pane { grid-column: 4; grid-row: 1 / -1; }
[data-layout="channels"] body.ch-on :is(.ch-head, .ch-tabs, .host-main, .host-side, .ch-pane) { border-left: 1px solid var(--line); min-width: 0; }
[data-layout="channels"] body.ch-on :is(.ch-head, .ch-pane) { border-top: 1px solid var(--line); }
/* The rail. */
[data-layout="channels"] .ch-rail { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.5rem 0 3.6rem; min-height: 0; overflow-y: auto; }
[data-layout="channels"] .ch-rail-group { display: contents; }
[data-layout="channels"] body .ch-rail .ch-rail-item { width: 3.25rem; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 0.125rem; padding: 0 0 0.5rem; margin: 0; font: inherit; font-size: 0.6875rem; font-weight: 600; line-height: 0.875rem; letter-spacing: 0; text-transform: none; text-decoration: none; text-shadow: none; color: var(--mute); background: none !important; border-style: none !important; box-shadow: none !important; animation: none !important; cursor: pointer; }
[data-layout="channels"] .ch-rail-box, [data-layout="channels"] .ch-menu .ico { width: 2.25rem; height: 2.25rem; border-radius: var(--corner-ctl, 8px); display: grid; place-items: center; color: var(--text); flex: none; }
[data-layout="channels"] .ch-menu .ico { padding: 0.5rem; }
[data-layout="channels"] .ch-rail-item:is(a, button):hover :is(.ch-rail-box, .ico), [data-layout="channels"] .ch-menu[aria-expanded="true"] .ico { background: var(--panel2); }
[data-layout="channels"] .ch-rail-item:hover { color: var(--text); }
[data-layout="channels"] .ch-rail-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-layout="channels"] .ch-product .pulse-mark { width: 1.875rem; height: 1rem; stroke: var(--ch-pulse); filter: none; }
[data-layout="channels"] .ch-product .pulse-mark path { stroke-width: 5; }
[data-layout="channels"] .ch-product .mark-runner { display: none; }
[data-layout="channels"] .ch-product .offbeat-mark { stroke: var(--offbeat); fill: var(--offbeat); }
[data-layout="channels"] .ch-product.on { color: var(--text); font-weight: 700; }
[data-layout="channels"] .ch-product.on .ch-rail-box { background: color-mix(in srgb, var(--ch-pulse) 22%, transparent); }
[data-layout="channels"] .ch-product.is-offbeat.on .ch-rail-box { background: color-mix(in srgb, var(--offbeat) 22%, transparent); }
[data-layout="channels"][data-look="electric"][data-scheme="dark"] .ch-product.on .pulse-mark { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--ch-pulse) 70%, transparent)); }
[data-layout="channels"][data-look="electric"][data-scheme="dark"] .ch-product.on .offbeat-mark { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--offbeat) 70%, transparent)); }
[data-layout="channels"] .ch-rail-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding-top: 0.5rem; }
[data-layout="channels"] .ch-who .ch-rail-box { background: var(--panel2); border: 1px solid var(--line-strong); font-size: 0.8125rem; font-weight: 700; }
[data-layout="channels"] body .ch-rail .ch-who { padding-bottom: 0; }
/* The staff menu opens beside its button at the foot of the rail. */
[data-layout="channels"] body.ch-on .side-nav.open { top: auto !important; right: auto !important; left: 4.75rem; bottom: 0.75rem; max-height: calc(100dvh - 1.5rem); }
/* The list. */
[data-layout="channels"] .ch-list { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--panel); border: 1px solid var(--line); border-right: 0; border-bottom: 0; border-radius: min(var(--corner-box, 6px), 12px) 0 0 0; }
[data-layout="channels"] .ch-list-head { flex: none; height: 3.0625rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0 0.75rem 0 1rem; }
[data-layout="channels"] body :is(.ch-list-name, .ch-title, .ch-pane .card-head h2) { margin: 0; font-family: var(--font); font-size: 1.125rem; font-weight: 900; line-height: 1.3; letter-spacing: 0; text-transform: none; text-align: left; text-shadow: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
[data-layout="channels"] .ch-icon-btn { flex: none; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--corner-ctl, 8px); background: transparent; color: var(--text); font: inherit; font-size: 1.125rem; line-height: 1; cursor: pointer; }
[data-layout="channels"] .ch-icon-btn:hover { background: var(--panel2); }
[data-layout="channels"] .ch-list-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: 0.5rem 0.5rem 1rem; }
[data-layout="channels"] .ch-rows { list-style: none; margin: 0; padding: 0; }
[data-layout="channels"] .ch-row, [data-layout="channels"] .ch-group-head { min-height: 1.75rem; display: flex; align-items: center; gap: 0.5rem; width: 100%; margin: 0; padding: 0 0.5rem; border: 0; border-radius: var(--corner-ctl, 6px); background: none; color: var(--mute); font: inherit; font-size: 0.9375rem; line-height: 1.375rem; text-align: left; text-decoration: none; cursor: pointer; }
[data-layout="channels"] :is(.ch-row, .ch-group-head):hover { background: var(--panel2); color: var(--text); }
[data-layout="channels"] .ch-row-mark { flex: none; width: 1.125rem; display: grid; place-items: center; }
[data-layout="channels"] a.ch-row .ch-row-mark::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; opacity: 0.55; }
[data-layout="channels"] .ch-quick-row .ch-row-mark { height: 1.125rem; border-radius: 4px; background: var(--panel2); font-size: 0.8125rem; line-height: 1; }
[data-layout="channels"] .ch-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-layout="channels"] .ch-row.is-live { color: var(--text); font-weight: 700; }
[data-layout="channels"] a.ch-row.is-live .ch-row-mark::before { width: 0.5rem; height: 0.5rem; background: var(--accent2); opacity: 1; }
[data-layout="channels"] .ch-row.on, [data-layout="channels"] .ch-row.on:hover { background: var(--accent); color: var(--on-accent); font-weight: 700; }
[data-layout="channels"] a.ch-row.on .ch-row-mark::before { opacity: 1; }
[data-layout="channels"] a.ch-row.on.is-live .ch-row-mark::before { background: var(--on-accent); }
[data-layout="channels"] .ch-row-n { flex: none; font-size: 0.75rem; font-weight: 800; line-height: 1.125rem; padding: 0 0.5rem; border-radius: 99px; background: var(--bg); color: var(--text); border: 1px solid var(--accent2); }
[data-layout="channels"] .ch-group { margin-top: 1rem; }
[data-layout="channels"] .ch-group-head { list-style: none; }
[data-layout="channels"] .ch-group-head::-webkit-details-marker { display: none; }
[data-layout="channels"] .ch-caret { flex: none; width: 1.125rem; display: grid; place-items: center; }
[data-layout="channels"] .ch-caret::before { content: "▶"; font-size: 0.5625rem; transition: transform 0.12s; }
[data-layout="channels"] .ch-group[open] .ch-caret::before { transform: rotate(90deg); }
[data-layout="channels"] .ch-group-n { margin-left: auto; font-size: 0.75rem; }
[data-layout="channels"] .ch-none { padding: 1rem 0.5rem 0; }
[data-layout="channels"] .ch-everyone { margin: auto 0 0; padding: 1rem 0.5rem 0; font-size: 0.8125rem; }
/* The header over the open session, and its tabs. */
[data-layout="channels"] .ch-head { display: flex; align-items: center; gap: 0.625rem; padding: 0 1rem 0 1.25rem; background: var(--bg); }
[data-layout="channels"] .ch-title { flex: 1; }
[data-layout="channels"] .ch-back { display: none; }
[data-layout="channels"] .ch-chips { flex: none; display: flex; align-items: center; gap: 0.375rem; }
[data-layout="channels"] .ch-chip { min-height: 1.75rem; display: inline-flex; align-items: center; padding: 0 0.5rem; border: 1px solid var(--line); border-radius: var(--corner-ctl, 6px); font-size: 0.8125rem; font-weight: 700; white-space: nowrap; }
[data-layout="channels"] .ch-code { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.08em; }
[data-layout="channels"] .ch-live { font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.14em; line-height: 1.25rem; padding: 0 0.625rem; border-radius: 99px; border: 1px solid var(--accent2); color: color-mix(in srgb, var(--accent2) 72%, var(--text)); }
[data-layout="channels"][data-look="electric"][data-scheme="dark"] .ch-live { color: var(--accent2); box-shadow: var(--glow-arc); }
[data-layout="channels"][data-look="electric"][data-scheme="dark"] a.ch-row.is-live:not(.on) .ch-row-mark::before { box-shadow: 0 0 8px var(--accent2); }
@media (prefers-reduced-motion: no-preference) {
  [data-layout="channels"][data-look="electric"][data-scheme="dark"] :is(.ch-live, a.ch-row.is-live .ch-row-mark::before, .ch-product.on .pulse-mark) { animation: heartbeat var(--beat, 1s) ease-in-out infinite; }
}
[data-layout="channels"] .ch-tabs { display: flex; align-items: stretch; gap: 0.25rem; min-height: 2.375rem; padding: 0 1rem; border-bottom: 1px solid var(--line); background: var(--bg); font-size: 0.8125rem; font-weight: 700; overflow-x: auto; }
[data-layout="channels"] .ch-tabs:empty { display: none; }
[data-layout="channels"] .ch-tab { flex: none; margin: 0; padding: 0 0.5rem; border: 0; background: none; color: var(--mute); font: inherit; white-space: nowrap; cursor: pointer; }
[data-layout="channels"] .ch-tab:hover { color: var(--text); }
[data-layout="channels"] .ch-tab[aria-selected="true"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
[data-layout="channels"] :is(.ch-tab, .ch-row, .ch-group-head, .ch-icon-btn, .ch-rail-item):focus-visible { outline: 2px solid var(--accent2); outline-offset: -2px; }
/* What shows in the main column: the create panels when nothing is open, else one tab of the
   session view. Each part of the session view carries the tabs it belongs to (data-ch). */
[data-layout="channels"] body.ch-on .host-main { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 1rem; padding: 1rem 1.25rem 2rem; overflow-y: auto; background: var(--bg); }
[data-layout="channels"] body.ch-on.board-list :is(.host-main, .ch-tabs, .ch-pane) { display: none; }
[data-layout="channels"] body.ch-on.board-list .host-side { grid-column: 3; grid-row: 2 / -1; overflow-y: auto; padding: 1rem 1.25rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); align-items: start; align-content: start; background: var(--bg); }
[data-layout="channels"] body.ch-on.board-detail .host-side { display: contents; }
[data-layout="channels"] body.ch-on.board-detail .host-side > :not(.bank-drawer), [data-layout="channels"] body.ch-on.board-detail .host:not([data-tab="bank"]) .host-side > .bank-drawer { display: none; }
[data-layout="channels"] body.ch-on.board-detail .host-side > .bank-drawer { grid-column: 3; grid-row: 3; min-width: 0; overflow-y: auto; border: 0; border-left: 1px solid var(--line); border-radius: 0 !important; background: var(--bg); padding: 1rem 1.25rem 2rem; }
[data-layout="channels"] body.ch-on.board-detail .bank-drawer .bank-list { max-height: none; overflow: visible; }
[data-layout="channels"] body.ch-on .host:is([data-tab="bank"], [data-tab="live"]) .host-main { display: none; }
[data-layout="channels"] .host[data-tab="questions"] .host-main [data-ch]:not([data-ch~="questions"]),
[data-layout="channels"] .host[data-tab="offbeat"] .host-main [data-ch]:not([data-ch~="offbeat"]),
[data-layout="channels"] .host[data-tab="run"] .host-main [data-ch]:not([data-ch~="run"]),
[data-layout="channels"] .host[data-tab="reports"] .host-main [data-ch]:not([data-ch~="reports"]),
[data-layout="channels"] .host[data-tab="settings"] .host-main [data-ch]:not([data-ch~="settings"]) { display: none; }
[data-layout="channels"] body.ch-on .host-main :is(.session-head, .host-cols) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
[data-layout="channels"] body.ch-on .host[data-tab="run"] .session-head { grid-template-columns: auto minmax(0, 1fr); }
/* The pane: what is on screen now, beside the feed. */
[data-layout="channels"] .ch-pane { width: 22.5rem; min-height: 0; overflow-y: auto; background: var(--bg); }
[data-layout="channels"] .host:not([data-tab="questions"]):not([data-tab="live"]) .ch-pane, [data-layout="channels"] .ch-pane:empty { display: none; }
[data-layout="channels"] .ch-pane .live-card { position: static; padding: 0 0 1.5rem; border: 0; border-radius: 0 !important; background: none; animation: none; box-shadow: none; }
[data-layout="channels"] .ch-pane .card-head { height: 3.0625rem; flex-wrap: nowrap; margin: 0 0 0.75rem; padding: 0 0.75rem 0 1rem; border-bottom: 1px solid var(--line); }
[data-layout="channels"] body .ch-pane .card-head .btn { flex: none; min-height: 1.75rem; padding: 0 0.625rem; font-size: 0.75rem; }
[data-layout="channels"] .ch-pane .live-card > :not(.card-head) { margin-inline: 1rem; }
[data-layout="channels"] .ch-pane .live-prompt { font-size: 0.9375rem; line-height: 1.375rem; }
/* The feed: the console's question list, each question with its number in a marker. */
[data-layout="channels"] body.ch-on .host[data-tab="questions"] .host-main { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
[data-layout="channels"] body.ch-on .host-cols[data-ch="questions"] { flex: 1; min-height: 0; display: flex; align-items: stretch; }
[data-layout="channels"] body.ch-on .host-cols[data-ch="questions"] > .card { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 0; border: 0; border-radius: 0 !important; background: none; box-shadow: none; }
[data-layout="channels"] body.ch-on .host-cols[data-ch="questions"] > .card > .card-head { flex: none; justify-content: flex-end; margin: 0; padding: 0.5rem 1.25rem 0; }
[data-layout="channels"] body.ch-on .host-cols[data-ch="questions"] > .card > .card-head h2,
[data-layout="channels"] body.ch-on #q-form :is(label[for="f-prompt"], label[for="f-type"]) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
[data-layout="channels"] body.ch-on .host-cols[data-ch="questions"] > .card > .card-head .btn { min-height: 1.75rem; padding: 0 0.625rem; font-size: 0.75rem; }
[data-layout="channels"] body.ch-on #q-list { flex: 1; min-height: 0; overflow-y: auto; display: block; padding: 0.5rem 0; counter-reset: ch-q; }
[data-layout="channels"] body.ch-on #q-list > .fine { padding: 1rem 1.25rem; }
[data-layout="channels"] body.ch-on #q-list > .q-item { counter-increment: ch-q; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.375rem 0.5rem; padding: 0.5rem 1.25rem; border-style: none; border-radius: 0 !important; background: none; font-size: 0.9375rem; line-height: 1.375rem; }
[data-layout="channels"] body.ch-on #q-list > .q-item::before { content: counter(ch-q); grid-column: 1; grid-row: 1 / span 3; align-self: start; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: var(--corner-ctl, 8px); background: var(--panel2); font-weight: 800; font-variant-numeric: tabular-nums; }
[data-layout="channels"] body.ch-on #q-list > .q-item > * { grid-column: 2; min-width: 0; }
[data-layout="channels"] body.ch-on #q-list > .q-item[data-state="open"]::before { background: var(--accent2); color: var(--on-accent2); }
[data-layout="channels"] body.ch-on #q-list > .q-item[data-state="draft"]::before { background: none; border: 1px dashed var(--line-strong); }
[data-layout="channels"] body.ch-on #q-list > .q-item.live { background: color-mix(in srgb, var(--accent2) 6%, transparent); box-shadow: inset 2px 0 0 var(--accent2); }
[data-layout="channels"] body.ch-on #q-list .q-main { display: grid; gap: 0.25rem; }
[data-layout="channels"] body.ch-on #q-list .q-text { font-weight: 700; }
[data-layout="channels"] body.ch-on #q-list .q-item > .btn-row { gap: 0.25rem; }
[data-layout="channels"] body.ch-on #q-list .q-item > .btn-row .btn { min-height: 1.75rem; padding: 0 0.625rem; font-size: 0.75rem; }
[data-layout="channels"] .ch-result { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--mute); }
[data-layout="channels"] .ch-meter { flex: none; width: 13.75rem; max-width: 50%; height: 0.375rem; border-radius: 99px; background: var(--panel2); overflow: hidden; display: flex; }
[data-layout="channels"] .ch-meter i { background: var(--accent2); border-radius: 99px; }
/* The composer: the console's own add-question form, pinned under the feed. It shows the
   question and its type until somebody is in it or has typed, then opens to the rest. */
[data-layout="channels"] body.ch-on #q-form { flex: none; max-height: 62%; display: flex; flex-direction: column; padding: 0 1.25rem 1.5rem; }
[data-layout="channels"] body.ch-on #q-form .q-form { min-height: 0; overflow-y: auto; display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--corner-box, 8px); background: var(--panel); }
[data-layout="channels"] body.ch-on #q-form .q-form > h3 { order: 0; flex: 1 1 auto; min-height: 2.5rem; display: flex; align-items: center; padding: 0 0.75rem; font-family: var(--font); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--mute); }
[data-layout="channels"] body.ch-on #q-form #f-type { order: 1; flex: 0 1 auto; width: auto; min-width: 0; min-height: 1.75rem; height: 1.75rem; margin: 0 0.375rem 0 0; padding: 0 0.5rem; font-size: 0.8125rem; font-weight: 600; }
[data-layout="channels"] body.ch-on #q-form #f-prompt { order: 2; flex: 1 0 100%; min-height: 2.5rem; margin: 0; padding: 0 0.75rem; border: 0; border-top: 1px solid var(--line); border-radius: 0 !important; background: transparent; box-shadow: none; }
[data-layout="channels"] body.ch-on #q-form #f-prompt:focus-visible { outline: 2px solid var(--accent2); outline-offset: -2px; }
[data-layout="channels"] body.ch-on #q-form .q-form > p { order: 3; flex: 1 0 100%; padding: 0.5rem 0.75rem 0; }
[data-layout="channels"] body.ch-on #q-form .q-form > :is(div, label.switch):not(.btn-row) { order: 4; flex: 1 0 100%; min-width: 0; margin-top: 0.5rem; padding: 0 0.75rem; }
[data-layout="channels"] body.ch-on #q-form .q-form:not(:focus-within):not(:has(#f-prompt:not(:placeholder-shown))) > :is(div, label.switch):not(.btn-row) { display: none; }
[data-layout="channels"] body.ch-on #q-form .q-form > .btn-row { order: 5; flex: 1 0 100%; justify-content: flex-end; min-height: 2.5rem; margin: 0; padding: 0 0.375rem; position: sticky; bottom: 0; background: var(--panel); }
[data-layout="channels"] body.ch-on #q-form #f-options { height: 5.5rem; }
[data-layout="channels"] body.ch-on #q-form .q-form > .btn-row .btn { min-height: 1.75rem; padding: 0 0.875rem; font-size: 0.75rem; }
/* The person's other design settings reach the new boxes too. */
[data-layout="channels"][data-lines="bold"] body.ch-on :is(.ch-list, .ch-head, .ch-tabs, .host-main, .host-side, .ch-pane, .ch-chip, .ch-live, .ch-row-n, .bank-drawer) { border-width: 2px; }
[data-layout="channels"][data-lines="bold"] body.ch-on :is(.ch-list, .bank-drawer) { border-right-width: 0; border-bottom-width: 0; }
[data-layout="channels"][data-lines="bold"] body.ch-on #q-form .q-form { border-width: 2px; }
[data-layout="channels"][data-lines="bold"] .ch-tab[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--accent); }
[data-layout="channels"][data-glow="off"] :is(.ch-live, .ch-row-mark::before, .ch-product .pulse-mark) { box-shadow: none !important; filter: none !important; }
[data-layout="channels"][data-glow="soft"][data-look="electric"][data-scheme="dark"] .ch-live { box-shadow: 0 0 8px color-mix(in srgb, var(--accent2) 45%, transparent); }
/* No room for the pane beside the feed: what is on screen now is a tab of its own. */
@media (max-width: 75rem) {
  [data-layout="channels"] body.ch-on .host { grid-template-columns: 4.375rem 16.25rem minmax(0, 1fr); }
  [data-layout="channels"] .host:not([data-tab="live"]) .ch-pane { display: none; }
  [data-layout="channels"] body.ch-on .ch-pane { grid-column: 3; grid-row: 3; width: auto; border-top: 0; }
}
@media (max-width: 62rem) { [data-layout="channels"] body.ch-on .host { grid-template-columns: 4.375rem 13.5rem minmax(0, 1fr); } }
/* A phone: one column. The list comes first (with the rail across the top and the create
   panels under it); an open session replaces it, with a way back in its header. */
@media (max-width: 48rem) {
  [data-layout="channels"] body.ch-on #app { height: auto; min-height: 100dvh; overflow: visible; }
  [data-layout="channels"] body.ch-on .topbar { grid-template-columns: minmax(0, 1fr) auto; }
  [data-layout="channels"] body.ch-on .topbar .nav-search { grid-column: 1; min-height: 2.25rem; height: 2.25rem; }
  [data-layout="channels"] body.ch-on .topbar .theme-pick { grid-column: 2; min-height: 2.25rem; height: 2.25rem; }
  [data-layout="channels"] body.ch-on .host { display: block; }
  [data-layout="channels"] body.ch-on :is(.ch-head, .ch-tabs, .host-main, .host-side, .ch-pane) { border-left: 0; }
  [data-layout="channels"] body.ch-on.board-detail :is(.ch-rail, .ch-list), [data-layout="channels"] body.ch-on.board-list .ch-head, [data-layout="channels"] .ch-rail > a.ch-rail-item { display: none; }
  [data-layout="channels"] .ch-rail { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 0.25rem 0.125rem; padding: 0.5rem 0.75rem 0; overflow: visible; }
  [data-layout="channels"] .ch-rail-foot { flex-direction: row; align-items: flex-start; margin: 0 0 0 auto; padding: 0; }
  [data-layout="channels"] .ch-menu > span { position: static !important; width: auto !important; height: auto !important; clip-path: none !important; }
  [data-layout="channels"] body.ch-on .side-nav.open { left: 0.5rem; right: 0.5rem !important; top: 7.25rem !important; bottom: auto; width: auto; max-height: calc(100dvh - 8rem); }
  [data-layout="channels"] body.ch-on .text-size { left: 0.6rem; }
  [data-layout="channels"] .ch-list { margin: 0.25rem 0.75rem 0; border: 1px solid var(--line); border-radius: var(--corner-box, 6px); }
  [data-layout="channels"] .ch-list-body { overflow: visible; }
  [data-layout="channels"] :is(.ch-row, .ch-group-head) { min-height: 2.5rem; }
  [data-layout="channels"] .ch-head { min-height: 3.0625rem; flex-wrap: wrap; gap: 0.25rem 0.5rem; padding: 0.375rem 0.75rem; border-top: 0 !important; }
  [data-layout="channels"] body.ch-on.board-detail .ch-back { display: grid; }
  [data-layout="channels"] .ch-title { flex-basis: 60%; white-space: normal !important; }
  [data-layout="channels"] .ch-chips { flex-wrap: wrap; }
  [data-layout="channels"] .ch-tabs { padding: 0 0.5rem; min-height: 2.75rem; }
  [data-layout="channels"] .ch-tab { padding: 0 0.625rem; }
  [data-layout="channels"] body.ch-on .host-main, [data-layout="channels"] body.ch-on.board-list .host-side, [data-layout="channels"] body.ch-on.board-detail .host-side > .bank-drawer { overflow: visible; padding: 1rem 0.75rem 3rem; }
  [data-layout="channels"] body.ch-on .host[data-tab="questions"] .host-main { display: block; overflow: visible; padding: 0 0 3rem; }
  [data-layout="channels"] body.ch-on .host-cols[data-ch="questions"], [data-layout="channels"] body.ch-on .host-cols[data-ch="questions"] > .card { display: block; }
  [data-layout="channels"] body.ch-on #q-list { overflow: visible; }
  [data-layout="channels"] body.ch-on #q-list > .q-item, [data-layout="channels"] body.ch-on .host-cols[data-ch="questions"] > .card > .card-head { padding-inline: 0.75rem; }
  [data-layout="channels"] body.ch-on #q-list .q-item > .btn-row .btn, [data-layout="channels"] body.ch-on #q-form .q-form > .btn-row .btn { min-height: 2.25rem; }
  [data-layout="channels"] body.ch-on #q-form { max-height: none; display: block; padding: 0.5rem 0.75rem 0; }
  [data-layout="channels"] body.ch-on #q-form .q-form { overflow: visible; }
  [data-layout="channels"] body.ch-on #q-form .q-form > .btn-row { position: static; background: none; }
  [data-layout="channels"] body.ch-on .ch-pane { overflow: visible; }
  [data-layout="channels"] body.ch-on .host[data-tab="run"] .session-head { grid-template-columns: minmax(0, 1fr); }
}
@media print { [data-layout="channels"] body.ch-on :is(.ch-rail, .ch-list, .ch-tabs, .ch-back) { display: none; } [data-layout="channels"] body.ch-on #app { height: auto; overflow: visible; } [data-layout="channels"] body.ch-on .host { display: block; } }

/* ------------------------------------------------------------------------------------
   Tracker: the Sessions screen arranged like an issue tracker. A two-row header (a 52px
   row: menu, mark, "workspace / product", search, create, you; then a 48px row of tabs
   with counts), a 256px column of saved filters, and one bordered list of sessions under
   a filter box. The top row is the page's own top bar with more put in it (trackerboard.js);
   an open session is the console as it always was, under the same header. Every rule sits
   under body.tk-on, which only the host console sets, so no other page changes. Sizes are
   in rem so the Size setting scales them (16px = 1rem).
   ------------------------------------------------------------------------------------ */
[data-layout="tracker"] body.tk-on { --tk-ink: var(--accent); --tk-ctl: var(--corner-ctl, 6px); --tk-box: var(--corner-box, 6px); }
/* The header's top row. */
[data-layout="tracker"] body.tk-on .topbar { flex-wrap: wrap; gap: 0.5rem; min-height: 3.25rem; padding: 0.625rem 1rem; background: color-mix(in srgb, var(--bg) 60%, var(--panel)); }
[data-layout="tracker"] body.tk-on .topbar::after { display: none; }
[data-layout="tracker"] body.tk-on .topbar > .brand-switch { display: none; }
[data-layout="tracker"] body.tk-on .topbar :is(.nav-toggle, .nav-search, .theme-pick, .tk-menu-btn) { min-height: 2rem; height: 2rem; margin: 0; font-size: 0.875rem; font-weight: 500; letter-spacing: 0; text-transform: none; border: 1px solid var(--line-strong); border-radius: var(--tk-ctl); background: transparent; color: var(--mute); box-shadow: none; animation: none; }
[data-layout="tracker"] body.tk-on .topbar :is(.nav-toggle, .nav-search, .tk-menu-btn):hover, [data-layout="tracker"] body.tk-on .topbar .tk-menu[open] > .tk-menu-btn { background: var(--panel2); color: var(--text); }
[data-layout="tracker"] body.tk-on .topbar .nav-toggle { display: inline-flex; width: 2rem; padding: 0; }
[data-layout="tracker"] body.tk-on .topbar .nav-toggle > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
[data-layout="tracker"] body.tk-on .topbar .nav-search { width: 16.875rem; padding: 0 0.5rem; justify-content: flex-start; }
[data-layout="tracker"] body.tk-on .topbar .nav-search kbd { margin-left: auto; }
[data-layout="tracker"] body.tk-on .topbar .theme-pick { padding: 0 0.5rem; max-width: 11rem; }
[data-layout="tracker"] body.tk-on .tk-bolt { display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin: 0 0.25rem; font-size: 1.625rem; flex: none; }
[data-layout="tracker"] body.tk-on .tk-crumbs { display: flex; align-items: center; gap: 0.25rem; min-width: 0; font-size: 0.875rem; }
[data-layout="tracker"] body.tk-on .tk-crumb { padding: 0.25rem 0.375rem; border-radius: var(--tk-ctl); color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-layout="tracker"] body.tk-on .tk-crumb:hover { background: var(--panel2); }
[data-layout="tracker"] body.tk-on .tk-slash { color: var(--mute); }
[data-layout="tracker"] body.tk-on .topbar .tk-product > .tk-menu-btn { border-color: transparent; color: var(--text); font-weight: 600; padding: 0 0.375rem; }
[data-layout="tracker"] body.tk-on .tk-avatar { display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin-left: 0.25rem; flex: none; border-radius: 50%; background: var(--panel2); border: 1px solid var(--line); color: var(--text); font-size: 0.75rem; font-weight: 700; text-decoration: none; }
[data-layout="tracker"] body.tk-on a.tk-avatar:hover { border-color: var(--tk-ink); }
/* Drop-downs (the product, Create, and the list's Host / Product / Series / Sort). */
[data-layout="tracker"] body.tk-on .tk-menu { position: relative; }
[data-layout="tracker"] body.tk-on .tk-menu-btn { display: inline-flex; align-items: center; gap: 0.125rem; padding: 0 0.5rem; cursor: pointer; list-style: none; white-space: nowrap; user-select: none; }
[data-layout="tracker"] body.tk-on .tk-menu-btn::-webkit-details-marker { display: none; }
[data-layout="tracker"] body.tk-on .tk-caret { font-size: 0.625rem; color: var(--mute); }
[data-layout="tracker"] body.tk-on .tk-menu-box { position: absolute; z-index: 30; right: 0; top: calc(100% + 0.375rem); display: grid; gap: 0.125rem; min-width: 11rem; max-width: min(20rem, calc(100vw - 2rem)); max-height: 60vh; overflow-y: auto; padding: 0.375rem; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--tk-box); box-shadow: 0 12px 40px rgb(0 0 0 / 0.4); }
[data-layout="tracker"] body.tk-on .tk-product .tk-menu-box { right: auto; left: 0; }
[data-layout="tracker"] body.tk-on .tk-choice { display: flex; align-items: center; gap: 0.5rem; min-height: 2rem; padding: 0.25rem 0.5rem 0.25rem 1.625rem; position: relative; font: inherit; font-size: 0.875rem; text-align: left; color: var(--text); background: transparent; border: 0; border-radius: var(--tk-ctl); cursor: pointer; overflow-wrap: anywhere; }
[data-layout="tracker"] body.tk-on .tk-choice:hover { background: var(--panel2); }
[data-layout="tracker"] body.tk-on .tk-choice[aria-pressed="true"] { font-weight: 600; }
[data-layout="tracker"] body.tk-on .tk-choice[aria-pressed="true"]::before { content: "✓"; position: absolute; left: 0.5rem; color: var(--tk-ink); }
[data-layout="tracker"] body.tk-on .tk-everyone { margin-top: 0.25rem; padding: 0.5rem; border-top: 1px solid var(--line); font-size: 0.8125rem; }
/* The header's second row: tabs. */
[data-layout="tracker"] body.tk-on .tk-tabs { position: relative; display: flex; flex-wrap: wrap; gap: 0 0.5rem; min-height: 3rem; padding: 0.5rem 1rem 0; background: color-mix(in srgb, var(--bg) 60%, var(--panel)); border-bottom: 1px solid var(--line); }
[data-layout="tracker"] body.tk-on .tk-tab { display: inline-flex; align-items: center; gap: 0.5rem; height: 2rem; margin-bottom: 0.5rem; padding: 0 0.5rem; position: relative; font-size: 0.875rem; color: var(--text); text-decoration: none; border-radius: var(--tk-ctl); white-space: nowrap; }
[data-layout="tracker"] body.tk-on .tk-tab:hover { background: var(--panel2); }
[data-layout="tracker"] body.tk-on .tk-tab[aria-current="page"] { font-weight: 600; }
[data-layout="tracker"] body.tk-on .tk-tab[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.5rem; height: 2px; background: var(--tk-ink); }
[data-layout="tracker"] body.tk-on .tk-counter { display: inline-block; min-width: 1.25rem; padding: 0 0.375rem; font-size: 0.75rem; font-weight: 500; line-height: 1.25rem; text-align: center; border-radius: 99px; background: var(--panel2); color: var(--text); }
[data-layout="tracker"][data-look="electric"][data-scheme="dark"] body.tk-on .tk-tabs { border-bottom-color: transparent; }
[data-layout="tracker"][data-look="electric"][data-scheme="dark"] body.tk-on .tk-tabs::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--accent), var(--accent2), var(--accent), transparent) no-repeat 50% 0 / 50% 100%, color-mix(in srgb, var(--accent) 25%, transparent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 80%, transparent); }
[data-layout="tracker"][data-look="electric"][data-scheme="dark"] body.tk-on .tk-tab[aria-current="page"]::after { box-shadow: 0 0 8px color-mix(in srgb, var(--tk-ink) 70%, transparent); }
/* The staff menu opens under its button at the left of the header. */
[data-layout="tracker"] body.tk-on .side-nav.open { right: auto !important; left: 0.75rem; }
[data-layout="tracker"] body.tk-on .side-link .side-text { flex: 1; }
[data-layout="tracker"] body.tk-on .side-badge { flex: none; min-width: 1.25rem; padding: 0 0.375rem; font-size: 0.75rem; font-weight: 500; line-height: 1.25rem; text-align: center; border-radius: 99px; background: var(--panel2); color: var(--text); }
/* The two states of the page: the list, or one open session under a way back. */
[data-layout="tracker"] body.tk-on.board-list .host { display: grid; grid-template-columns: 16rem minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0; padding: 0; align-items: stretch; min-height: calc(100dvh - 6.25rem); }
[data-layout="tracker"] body.tk-on.board-list :is(.host-main, .board-back), [data-layout="tracker"] body.tk-on.board-detail :is(.tk-main, .tk-side) { display: none; }
[data-layout="tracker"] body.tk-on .board-back { grid-column: 1 / -1; }
[data-layout="tracker"] body.tk-on.board-detail .host { padding-top: 1rem; }
[data-layout="tracker"] body.tk-on.board-list .host-side { grid-column: 2; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); align-items: start; padding: 0 1.5rem 3rem; }
/* The column of saved filters. */
[data-layout="tracker"] body.tk-on .tk-side { grid-column: 1; grid-row: 1 / span 2; padding: 1rem; border-right: 1px solid var(--line); min-width: 0; }
[data-layout="tracker"] body.tk-on .tk-fold-btn { display: none; }
[data-layout="tracker"] body.tk-on .tk-side-list { display: grid; gap: 0; }
[data-layout="tracker"] body.tk-on .tk-side-item { display: flex; align-items: center; gap: 0.5rem; width: 100%; min-height: 2rem; padding: 0.25rem 0.5rem; position: relative; font: inherit; font-size: 0.875rem; text-align: left; color: var(--text); background: transparent; border: 0; border-radius: var(--tk-ctl); cursor: pointer; }
[data-layout="tracker"] body.tk-on .tk-side-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-layout="tracker"] body.tk-on .tk-side-item:hover { background: var(--panel2); }
[data-layout="tracker"] body.tk-on .tk-side-item[aria-current="true"] { background: var(--panel2); font-weight: 600; }
[data-layout="tracker"] body.tk-on .tk-side-item[aria-current="true"]::before { content: ""; position: absolute; left: -0.5rem; top: 0.375rem; bottom: 0.375rem; width: 4px; border-radius: 4px; background: var(--tk-ink); }
[data-layout="tracker"] body.tk-on .tk-side-label { margin: 0.5rem 0 0; padding: 0.5rem 0.5rem 0.25rem; border-top: 1px solid var(--line); font-family: var(--font); font-size: 0.75rem; font-weight: 600; letter-spacing: 0; text-transform: none; text-align: left; text-shadow: none; color: var(--mute); }
[data-layout="tracker"] body.tk-on .tk-rule { height: 1px; margin: 0.5rem 0; border: 0; background: var(--line); }
/* The main column. */
[data-layout="tracker"] body.tk-on .tk-main { grid-column: 2; display: flex; flex-direction: column; gap: 1rem; min-width: 0; padding: 1.5rem; font-size: 0.875rem; line-height: 1.5; }
[data-layout="tracker"] body.tk-on .tk-main-head { display: flex; align-items: center; gap: 0.5rem; }
[data-layout="tracker"] body.tk-on .tk-main .tk-title { flex: 1; min-width: 0; margin: 0; font-family: var(--font); font-size: 1.25rem; font-weight: 600; line-height: 1.5; letter-spacing: 0; text-transform: none; text-align: left; text-shadow: none; background: none; color: var(--text); -webkit-text-fill-color: currentColor; }
[data-layout="tracker"] body.tk-on .tk-main .tk-new { min-height: 2rem; height: 2rem; margin: 0; padding: 0 0.75rem; width: auto; font-size: 0.75rem; font-weight: 700; border-radius: var(--tk-ctl); white-space: nowrap; }
[data-layout="tracker"] body.tk-on .tk-filter-row { position: relative; display: flex; }
[data-layout="tracker"] body.tk-on .tk-filter { flex: 1; min-width: 0; height: 2rem; padding: 0 2.25rem 0 0.75rem; font: inherit; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.8125rem; color: var(--text); background: color-mix(in srgb, var(--bg) 60%, var(--panel)); border: 1px solid var(--line-strong); border-radius: min(var(--tk-ctl), 14px); }
[data-layout="tracker"] body.tk-on .tk-filter:focus-visible { outline: 2px solid var(--accent2); outline-offset: 1px; border-radius: min(var(--tk-ctl), 14px); }
[data-layout="tracker"] body.tk-on .tk-filter.has-unknown { border-color: var(--danger); }
[data-layout="tracker"] body.tk-on .tk-clear { position: absolute; right: 0.25rem; top: 0.25rem; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; font: inherit; font-size: 1rem; line-height: 1; color: var(--mute); background: transparent; border: 0; border-radius: var(--tk-ctl); cursor: pointer; }
[data-layout="tracker"] body.tk-on .tk-clear:hover { color: var(--text); background: var(--panel2); }
[data-layout="tracker"] body.tk-on .tk-clear[hidden] { display: none; }
[data-layout="tracker"] body.tk-on .tk-unknown { margin: -0.5rem 0 0; font-size: 0.75rem; color: var(--mute); }
[data-layout="tracker"] body.tk-on .tk-unknown strong { color: var(--danger-text); }
[data-layout="tracker"] body.tk-on .tk-box { border: 1px solid var(--line); border-radius: var(--tk-box); min-width: 0; }
[data-layout="tracker"] body.tk-on .tk-box-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; min-height: 3rem; padding: 0.5rem 1rem; background: var(--panel); border-radius: var(--tk-box) var(--tk-box) 0 0; }
[data-layout="tracker"] body.tk-on .tk-states { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; flex: 1; }
[data-layout="tracker"] body.tk-on .tk-state { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2rem; padding: 0 0.25rem; font: inherit; color: var(--mute); background: transparent; border: 0; border-radius: var(--tk-ctl); cursor: pointer; }
[data-layout="tracker"] body.tk-on .tk-state:hover, [data-layout="tracker"] body.tk-on .tk-state[aria-pressed="true"] { color: var(--text); }
[data-layout="tracker"] body.tk-on .tk-state[aria-pressed="true"] { font-weight: 600; }
[data-layout="tracker"] body.tk-on .tk-picks { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
[data-layout="tracker"] body.tk-on .tk-pick > .tk-menu-btn { min-height: 2rem; padding: 0 0.25rem; color: var(--mute); border-radius: var(--tk-ctl); }
[data-layout="tracker"] body.tk-on .tk-pick > .tk-menu-btn:hover, [data-layout="tracker"] body.tk-on .tk-pick[open] > .tk-menu-btn { color: var(--text); }
[data-layout="tracker"] body.tk-on .tk-pick[hidden] { display: none; }
[data-layout="tracker"] body.tk-on .tk-rows { list-style: none; margin: 0; padding: 0; }
[data-layout="tracker"] body.tk-on .tk-row { display: flex; gap: 0.5rem; padding: 0.75rem 1rem; border-top: 1px solid var(--line); }
[data-layout="tracker"] body.tk-on .tk-row:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
[data-layout="tracker"] body.tk-on .tk-row.st-live { background: color-mix(in srgb, var(--accent2) 6%, transparent); }
[data-layout="tracker"] body.tk-on .tk-mark { --mark: var(--tk-ink); flex: 0 0 1rem; width: 1rem; height: 1rem; margin-top: 0.25rem; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--mark); }
[data-layout="tracker"] body.tk-on .tk-mark::before { content: ""; width: 0.25rem; height: 0.25rem; border-radius: 50%; background: var(--mark); }
[data-layout="tracker"] body.tk-on .st-live .tk-mark { --mark: var(--accent2); }
[data-layout="tracker"] body.tk-on .st-live .tk-mark::before { width: 0.375rem; height: 0.375rem; }
[data-layout="tracker"] body.tk-on .st-scheduled .tk-mark { --mark: var(--s7); }
[data-layout="tracker"] body.tk-on .st-ended .tk-mark { --mark: var(--mute); background: var(--mute); }
[data-layout="tracker"] body.tk-on .st-ended .tk-mark::before { width: 0.4375rem; height: 0.25rem; margin-top: -0.125rem; border-radius: 0; background: transparent; border: solid var(--bg); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
[data-layout="tracker"] body.tk-on .tk-row-body { flex: 1; min-width: 0; }
[data-layout="tracker"] body.tk-on .tk-row-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.375rem; }
[data-layout="tracker"] body.tk-on .tk-name { font-size: 1rem; font-weight: 600; line-height: 1.5; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
[data-layout="tracker"] body.tk-on .tk-name:hover { color: color-mix(in srgb, var(--tk-ink) 70%, var(--text)); text-decoration: underline; }
[data-layout="tracker"] body.tk-on .tk-pill { --ink: var(--mute); display: inline-block; margin: 0; padding: 0 0.5rem; font: inherit; font-size: 0.75rem; font-weight: 600; line-height: 1.125rem; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; border-radius: var(--corner-ctl, 99px); border: 1px solid color-mix(in srgb, var(--ink) 40%, transparent); color: color-mix(in srgb, var(--ink) 62%, var(--text)); background: color-mix(in srgb, var(--ink) 15%, transparent); }
[data-layout="tracker"] body.tk-on button.tk-pill { cursor: pointer; }
[data-layout="tracker"] body.tk-on button.tk-pill:hover { background: color-mix(in srgb, var(--ink) 28%, transparent); }
[data-layout="tracker"] body.tk-on .tk-pill.p-pulse { --ink: var(--ink-pulse); }
[data-layout="tracker"] body.tk-on .tk-pill.p-offbeat { --ink: var(--ink-offbeat); }
[data-layout="tracker"] body.tk-on .tk-pill.p-series { --ink: var(--s7); }
[data-layout="tracker"] body.tk-on .tk-pill.s-scheduled { --ink: var(--s7); }
[data-layout="tracker"] body.tk-on .tk-pill.s-live { --ink: var(--accent2); }
[data-layout="tracker"] body.tk-on .tk-meta { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1.125rem; color: var(--mute); overflow-wrap: anywhere; }
[data-layout="tracker"] body.tk-on .tk-code { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.06em; }
[data-layout="tracker"] body.tk-on .tk-count { flex: 0 0 auto; min-width: 5.625rem; padding-top: 0.1875rem; font-size: 0.75rem; text-align: right; color: var(--mute); white-space: nowrap; }
[data-layout="tracker"] body.tk-on .tk-count strong { color: var(--text); font-weight: 600; }
[data-layout="tracker"] body.tk-on .tk-none { padding: 2rem 1rem; text-align: center; color: var(--mute); border-top: 1px solid var(--line); }
/* Neon and movement, where the person's look and settings allow them. */
[data-layout="tracker"][data-look="electric"][data-scheme="dark"] body.tk-on .st-live .tk-mark::before { box-shadow: 0 0 8px var(--accent2); }
@media (prefers-reduced-motion: no-preference) {
  [data-layout="tracker"][data-look="electric"][data-scheme="dark"] body.tk-on .st-live .tk-mark { animation: heartbeat var(--beat, 1s) ease-in-out infinite; }
  [data-layout="tracker"][data-look="electric"][data-scheme="dark"] body.tk-on:not(.call) .tk-tabs::after { animation: neon-flow calc(var(--beat, 1s) * 3) linear infinite; }
}
/* The person's other design settings reach the new boxes too. */
[data-layout="tracker"][data-lines="bold"] body.tk-on :is(.tk-box, .tk-menu-box, .tk-filter, .tk-pill, .tk-avatar) { border-width: 2px; }
[data-layout="tracker"][data-lines="bold"] body.tk-on .tk-mark { border-width: 2px; }
[data-layout="tracker"][data-lines="bold"] body.tk-on .tk-tabs::after, [data-layout="tracker"][data-lines="bold"] body.tk-on .tk-tab[aria-current="page"]::after { height: 3px; }
[data-layout="tracker"][data-lines="lite"] body.tk-on .tk-tabs::after { height: 1px; }
[data-layout="tracker"][data-lines="lite"] body.tk-on .tk-mark { border-width: 1px; }
[data-layout="tracker"][data-glow="off"] body.tk-on .tk-tabs::after, [data-layout="tracker"][data-glow="off"] body.tk-on .tk-tab::after, [data-layout="tracker"][data-glow="off"] body.tk-on .tk-mark::before { box-shadow: none !important; }
[data-layout="tracker"][data-glow="soft"][data-look="electric"][data-scheme="dark"] body.tk-on .tk-tabs::after { box-shadow: 0 0 5px color-mix(in srgb, var(--accent) 50%, transparent); }
[data-layout="tracker"][data-corners="round"] body.tk-on :is(.tk-box, .tk-menu-box) { border-radius: 12px; }
[data-layout="tracker"][data-corners="round"] body.tk-on .tk-box-head { border-radius: 12px 12px 0 0; }
/* Narrower than a desk: the search button gives way first. */
@media (max-width: 64rem) {
  [data-layout="tracker"] body.tk-on .topbar .nav-search { width: auto; }
  [data-layout="tracker"] body.tk-on.board-list .host { grid-template-columns: 13rem minmax(0, 1fr); }
}
/* A phone: the saved filters fold into one control above the list, and fingers get bigger targets. */
@media (max-width: 48rem) {
  [data-layout="tracker"] body.tk-on .topbar { padding: 0.5rem 0.75rem; gap: 0.375rem; }
  [data-layout="tracker"] body.tk-on .topbar :is(.nav-toggle, .nav-search, .theme-pick, .tk-menu-btn), [data-layout="tracker"] body.tk-on .tk-avatar { min-height: 2.25rem; height: 2.25rem; }
  [data-layout="tracker"] body.tk-on .topbar .nav-toggle, [data-layout="tracker"] body.tk-on .tk-avatar { width: 2.25rem; }
  [data-layout="tracker"] body.tk-on .topbar .nav-search { width: 2.25rem; padding: 0; justify-content: center; }
  [data-layout="tracker"] body.tk-on .topbar :is(.nav-search-text, .nav-search kbd) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  [data-layout="tracker"] body.tk-on .topbar .theme-pick { max-width: 7rem; }
  [data-layout="tracker"] body.tk-on .tk-bolt { display: none; }
  [data-layout="tracker"] body.tk-on .tk-crumbs { flex: 1 1 100%; order: 9; }
  [data-layout="tracker"] body.tk-on .tk-tabs { padding: 0.25rem 0.5rem 0; gap: 0 0.25rem; }
  [data-layout="tracker"] body.tk-on .tk-tab { height: 2.25rem; }
  [data-layout="tracker"] body.tk-on.board-list .host { display: flex; flex-direction: column; min-height: 0; }
  [data-layout="tracker"] body.tk-on .tk-side { padding: 0.75rem 1rem 0; border-right: 0; }
  [data-layout="tracker"] body.tk-on .tk-fold-btn { display: flex; align-items: center; gap: 0.25rem; min-height: 2.5rem; padding: 0 0.75rem; font-size: 0.875rem; list-style: none; cursor: pointer; border: 1px solid var(--line-strong); border-radius: var(--tk-ctl); }
  [data-layout="tracker"] body.tk-on .tk-fold-btn::-webkit-details-marker { display: none; }
  [data-layout="tracker"] body.tk-on .tk-fold-btn .tk-caret { margin-left: auto; }
  [data-layout="tracker"] body.tk-on .tk-fold[open] > .tk-side-list { margin-top: 0.375rem; padding: 0.375rem 0.5rem; border: 1px solid var(--line); border-radius: var(--tk-box); }
  [data-layout="tracker"] body.tk-on :is(.tk-side-item, .tk-choice, .tk-state, .tk-pick > .tk-menu-btn) { min-height: 2.5rem; }
  [data-layout="tracker"] body.tk-on .tk-main { padding: 0.75rem 1rem 1.5rem; }
  [data-layout="tracker"] body.tk-on .tk-filter, [data-layout="tracker"] body.tk-on .tk-main .tk-new { height: 2.5rem; min-height: 2.5rem; }
  [data-layout="tracker"] body.tk-on .tk-filter { font-size: 1rem; }
  [data-layout="tracker"] body.tk-on .tk-clear { top: 0.5rem; }
  [data-layout="tracker"] body.tk-on.board-list .host-side { padding: 0 1rem 3rem; }
  [data-layout="tracker"] body.tk-on .tk-box-head { padding: 0.25rem 0.75rem; }
  [data-layout="tracker"] body.tk-on .tk-picks { flex: 1 1 100%; position: relative; }
  [data-layout="tracker"] body.tk-on .tk-pick { position: static; }
  [data-layout="tracker"] body.tk-on .tk-pick .tk-menu-box { left: 0; right: 0; max-width: none; }
  [data-layout="tracker"] body.tk-on .tk-row { flex-wrap: wrap; padding: 0.75rem; }
  [data-layout="tracker"] body.tk-on .tk-count { flex: 1 1 100%; min-width: 0; padding: 0 0 0 1.5rem; text-align: left; }
  [data-layout="tracker"] body.tk-on .side-nav.open { left: 0.5rem; right: 0.5rem !important; width: auto; }
}
@media print { [data-layout="tracker"] body.tk-on :is(.tk-tabs, .tk-side, .tk-filter-row, .tk-box-head, .board-back) { display: none; } }

/* ------------------------------------------------------------------------------------
   Console: the Sessions screen as a calm, spacious home page. A 72px header (the mark,
   centred 16px links, then pills about 38px tall and a round search button), a centred
   column up to 1200px wide framed by dashed vertical lines with small square ticks where
   a dashed rule meets them, a hero (56px headline, a 16px grey line, a pill-shaped
   Pulse / Offbeat switch with 40px options), a row of dashed cards about 240px tall with
   a 42px pill button at the foot, a band for starting something new, and a bordered
   table. The header is the page's own top bar with more put in it (consoleboard.js); an
   open session is the console as it always was, under the same header. Every rule sits
   under body.cs-on, which only the host console sets, so no other page changes. Sizes
   are in rem so the Size setting scales them (16px = 1rem). Lines changes the weight of
   the dashes (--cs-rule), Corners their radius (--cs-box, --cs-ctl).
   ------------------------------------------------------------------------------------ */
[data-layout="console"] body.cs-on { --cs-rule: 1px; --cs-line: color-mix(in srgb, var(--accent) 40%, var(--bg)); --cs-tick: color-mix(in srgb, var(--accent) 62%, var(--bg)); --cs-box: var(--corner-box, 8px); --cs-ctl: var(--corner-ctl, 99px); --cs-lit: color-mix(in srgb, var(--accent) 22%, var(--panel)); }
[data-layout="console"][data-scheme="light"] body.cs-on { --cs-line: color-mix(in srgb, var(--accent) 30%, var(--line-strong)); --cs-lit: color-mix(in srgb, var(--accent) 12%, var(--panel)); }
[data-layout="console"][data-lines="lite"] body.cs-on { --cs-line: color-mix(in srgb, var(--accent) 26%, var(--bg)); }
[data-layout="console"][data-lines="lite"][data-scheme="light"] body.cs-on { --cs-line: var(--line-strong); }
[data-layout="console"][data-lines="bold"] body.cs-on { --cs-rule: 2px; }
/* The header. */
[data-layout="console"] body.cs-on .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.5rem 1rem; min-height: 4.5rem; padding: 0.75rem 1.25rem; }
[data-layout="console"] body.cs-on .topbar > .spacer { display: none; }
[data-layout="console"] body.cs-on .cs-mark { justify-self: start; display: inline-flex; align-items: center; gap: 0.625rem; min-height: 2.375rem; font-size: 1.0625rem; font-weight: 800; letter-spacing: 0.22em; color: var(--text); text-decoration: none; }
[data-layout="console"] body.cs-on .cs-mark .defib-bolt { width: 1.5rem; height: 1.875rem; }
[data-layout="console"][data-look="electric"][data-scheme="dark"] body.cs-on .cs-mark .defib-bolt { filter: var(--glow-arc-mark); }
[data-layout="console"] body.cs-on .cs-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem; }
[data-layout="console"] body.cs-on .cs-link { padding: 0.375rem 0.75rem; border-radius: min(var(--corner-ctl, 6px), 6px); font-size: 1rem; font-weight: 500; line-height: 1.5; color: var(--text); text-decoration: none; white-space: nowrap; }
[data-layout="console"] body.cs-on .cs-link:hover { background: var(--panel2); }
[data-layout="console"] body.cs-on .cs-link[aria-current="page"] { color: var(--accent2); }
[data-layout="console"] body.cs-on .cs-right { justify-self: end; display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem; min-width: 0; max-width: 100%; }
[data-layout="console"] body.cs-on .cs-right > * { flex: none; }
[data-layout="console"] body.cs-on .cs-right > :is(.cs-who, .theme-pick) { flex: 0 1 auto; }
/* Pills: the header's (you, the menu, the theme), a card's one button, the start actions. */
[data-layout="console"] body.cs-on .cs-pill, [data-layout="console"] body.cs-on .topbar :is(.nav-toggle, .nav-search, .theme-pick) { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; box-sizing: border-box; min-height: 2.375rem; height: 2.375rem; margin: 0; padding: 0 0.75rem; border: var(--cs-rule) solid var(--cs-line); border-radius: var(--cs-ctl); background: transparent; color: var(--text); font-family: var(--font); font-size: 1rem; font-weight: 500; line-height: 1.2; letter-spacing: 0; text-transform: none; text-decoration: none; box-shadow: none; animation: none; cursor: pointer; min-width: 0; }
[data-layout="console"] body.cs-on .cs-pill:hover, [data-layout="console"] body.cs-on .topbar :is(.nav-toggle, .nav-search, .theme-pick):hover { border-color: var(--accent2); }
[data-layout="console"] body.cs-on span.cs-pill { cursor: default; }
[data-layout="console"] body.cs-on .cs-pill.is-main { border: max(1.5px, var(--cs-rule)) solid var(--accent); background: var(--cs-lit); }
[data-layout="console"] body.cs-on .cs-who { max-width: 12rem; min-width: 3rem; }
[data-layout="console"] body.cs-on .cs-who-name, [data-layout="console"] body.cs-on span.cs-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-layout="console"] body.cs-on span.cs-who { display: inline-block; line-height: 2.25rem; }
[data-layout="console"] body.cs-on .topbar .nav-toggle { display: inline-flex; }
[data-layout="console"] body.cs-on .topbar .nav-search { width: 2.375rem; padding: 0; border-radius: var(--corner-ctl, 50%); }
[data-layout="console"] body.cs-on .topbar :is(.nav-search-text, .nav-search kbd) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
[data-layout="console"] body.cs-on .topbar .theme-pick { justify-content: flex-start; max-width: 7rem; padding: 0 0.625rem; font-size: 0.875rem; }
/* Counts on the staff menu's links (the Sessions screen fills them in). */
[data-layout="console"] body.cs-on .side-link .side-text { flex: 1; }
[data-layout="console"] body.cs-on .side-badge { flex: none; min-width: 1.25rem; padding: 0 0.375rem; font-size: 0.75rem; font-weight: 500; line-height: 1.25rem; text-align: center; border-radius: var(--cs-ctl); border: 1px solid var(--cs-line); color: var(--mute); }
/* The two states of the page: the home page, or one open session under a way back. */
[data-layout="console"] body.cs-on.board-list .host { display: block; box-sizing: border-box; width: calc(100% - 2.5rem); max-width: 75rem; min-height: calc(100dvh - 4.625rem); margin: 0 auto; padding: 0; border-left: var(--cs-rule) dashed var(--cs-line); border-right: var(--cs-rule) dashed var(--cs-line); }
[data-layout="console"] body.cs-on.board-list :is(.host-main, .board-back), [data-layout="console"] body.cs-on.board-detail .cs-board { display: none; }
[data-layout="console"] body.cs-on .board-back { grid-column: 1 / -1; }
[data-layout="console"] body.cs-on.board-detail .host { padding-top: 1rem; }
/* The hero. */
[data-layout="console"] body.cs-on .cs-hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6rem 1rem 4rem; }
[data-layout="console"] body.cs-on .cs-board .cs-title { margin: 0; max-width: 100%; font-family: var(--font); font-size: clamp(2.125rem, 7.5vw, 3.5rem); font-weight: 500; line-height: 0.98; letter-spacing: -0.025em; text-transform: none; text-shadow: none; text-wrap: balance; overflow-wrap: anywhere; }
[data-layout="console"] body.cs-on .cs-line { margin: 1rem 0 0; max-width: 44rem; font-size: 1rem; line-height: 1.25; color: var(--mute); text-wrap: balance; }
[data-layout="console"] body.cs-on .cs-hero .brand-switch { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.25rem; margin-top: 2.5rem; padding: 0.3125rem; border: var(--cs-rule) solid var(--cs-line); border-radius: var(--cs-ctl); background: var(--panel); }
[data-layout="console"] body.cs-on .cs-hero .brand-tab { display: inline-flex; align-items: center; gap: 0.5rem; box-sizing: border-box; height: 2.5rem; padding: 0 0.875rem; border: 1.5px solid transparent; border-radius: var(--cs-ctl); background: transparent; color: var(--text); font-family: var(--font); font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; text-transform: none; opacity: 1; box-shadow: none; }
[data-layout="console"] body.cs-on .cs-hero .brand-tab:hover { background: var(--panel2); }
[data-layout="console"] body.cs-on .cs-hero .brand-tab :is(.pulse-mark, .offbeat-mark) { width: 2.25rem; height: 0.75rem; }
[data-layout="console"] body.cs-on .cs-hero .brand-tab.on { border-color: var(--accent); background: var(--cs-lit); }
[data-layout="console"] body.cs-on .cs-hero .brand-tab.is-offbeat.on { border-color: var(--offbeat); background: color-mix(in srgb, var(--offbeat) 20%, var(--panel)); }
@media (prefers-reduced-motion: no-preference) {
  [data-layout="console"][data-look="electric"][data-scheme="dark"] body.cs-on .cs-hero .brand-tab.on { animation: vital-beat var(--beat, 1s) ease-in-out infinite; }
  [data-layout="console"][data-look="electric"][data-scheme="dark"][data-glow="soft"] body.cs-on .cs-hero .brand-tab.on { animation-name: vital-beat-soft; }
  [data-layout="console"][data-look="electric"][data-scheme="dark"] body.cs-on .cs-live { animation: heartbeat var(--beat, 1s) ease-in-out infinite; }
}
[data-layout="console"][data-glow="off"] body.cs-on .cs-hero .brand-tab.on { animation: none; box-shadow: none; }
/* The sections of the column: a dashed rule across it, with a square tick at each end. */
[data-layout="console"] body.cs-on .cs-body, [data-layout="console"] body.cs-on.board-list .host-side { position: relative; border-top: var(--cs-rule) dashed var(--cs-line); padding: 1rem; }
[data-layout="console"] body.cs-on .cs-body { display: flex; flex-direction: column; gap: 1rem; }
[data-layout="console"] body.cs-on.board-list .host-side { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); align-items: start; padding-bottom: 3rem; }
[data-layout="console"] body.cs-on .cs-body::before, [data-layout="console"] body.cs-on .cs-body::after, [data-layout="console"] body.cs-on.board-list .host-side::before, [data-layout="console"] body.cs-on.board-list .host-side::after { content: ""; position: absolute; top: calc(-0.25rem - var(--cs-rule)); box-sizing: border-box; width: 0.5rem; height: 0.5rem; border: 1px solid var(--cs-tick); background: var(--bg); pointer-events: none; }
[data-layout="console"] body.cs-on .cs-body::before, [data-layout="console"] body.cs-on.board-list .host-side::before { left: calc(-0.25rem - var(--cs-rule)); }
[data-layout="console"] body.cs-on .cs-body::after, [data-layout="console"] body.cs-on.board-list .host-side::after { right: calc(-0.25rem - var(--cs-rule)); }
/* The cards. */
[data-layout="console"] body.cs-on .cs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0.5rem; }
[data-layout="console"] body.cs-on .cs-cards[hidden] { display: none; }
[data-layout="console"] body.cs-on .cs-card { display: flex; flex-direction: column; box-sizing: border-box; min-width: 0; min-height: 15.0625rem; padding: 1.25rem; border: var(--cs-rule) dashed var(--cs-line); border-radius: var(--cs-box); }
[data-layout="console"] body.cs-on .cs-card.is-live { border-color: var(--accent2); }
[data-layout="console"] body.cs-on :is(.cs-card-name, .cs-start-title) { margin: 0; font-family: var(--font); font-size: 1.2rem; font-weight: 400; line-height: 1.2; letter-spacing: -0.025em; text-transform: none; overflow-wrap: anywhere; }
[data-layout="console"] body.cs-on .cs-live { margin-left: 0.25rem; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.14em; color: var(--accent2); white-space: nowrap; }
[data-layout="console"] body.cs-on :is(.cs-card-status, .cs-card-when, .cs-start-text p) { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--mute); }
[data-layout="console"] body.cs-on .cs-card-code { margin: 1rem 0 0; font-family: ui-monospace, Menlo, monospace; font-size: 1rem; line-height: 1.5; letter-spacing: 0.12em; }
[data-layout="console"] body.cs-on .cs-card.is-live .cs-card-code { color: var(--accent2); }
[data-layout="console"] body.cs-on .cs-grow { flex: 1; min-height: 1rem; }
[data-layout="console"] body.cs-on .cs-go { height: 2.625rem; min-height: 2.625rem; }
/* Start something new. */
[data-layout="console"] body.cs-on .cs-start { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding: 1.25rem; border: var(--cs-rule) dashed var(--cs-line); border-radius: var(--cs-box); }
[data-layout="console"] body.cs-on .cs-start-text { flex: 1 1 18rem; min-width: 0; }
[data-layout="console"] body.cs-on .cs-start-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
[data-layout="console"] body.cs-on .cs-start-actions .cs-pill { height: 2.625rem; min-height: 2.625rem; padding: 0 1.125rem; }
/* The table of every session. */
[data-layout="console"] body.cs-on .cs-table-box { min-width: 0; border: var(--cs-rule) solid var(--cs-line); border-radius: var(--cs-box); overflow: hidden; }
[data-layout="console"] body.cs-on .cs-table-box[hidden] { display: none; }
[data-layout="console"] body.cs-on .cs-table-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.875rem 1.25rem; }
[data-layout="console"] body.cs-on .cs-table-title { margin: 0; font-family: var(--font); font-size: 1rem; font-weight: 500; line-height: 1.5; letter-spacing: 0; text-transform: none; }
[data-layout="console"] body.cs-on .cs-table-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
[data-layout="console"] body.cs-on .cs-everyone { font-size: 0.875rem; color: var(--mute); }
[data-layout="console"] body.cs-on .cs-expand { padding: 0.25rem 0; border: 0; background: none; color: var(--mute); font: inherit; font-size: 1rem; cursor: pointer; }
[data-layout="console"] body.cs-on .cs-expand:hover { color: var(--text); text-decoration: underline; }
[data-layout="console"] body.cs-on .cs-table-scroll { overflow-x: auto; }
[data-layout="console"] body.cs-on .cs-table { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: 0.875rem; line-height: 1.5; }
[data-layout="console"] body.cs-on .cs-table :is(th, td) { padding: 0.75rem; border-top: 1px solid var(--cs-line); text-align: left; font-weight: 400; vertical-align: middle; }
[data-layout="console"] body.cs-on .cs-table :is(th, td):first-child { padding-left: 1.25rem; }
[data-layout="console"] body.cs-on .cs-table :is(th, td):last-child { padding-right: 1.25rem; }
[data-layout="console"] body.cs-on .cs-table .cs-n { text-align: right; }
[data-layout="console"] body.cs-on .cs-sort { padding: 0; border: 0; background: none; color: var(--mute); font: inherit; cursor: pointer; white-space: nowrap; }
[data-layout="console"] body.cs-on .cs-sort:hover, [data-layout="console"] body.cs-on th[aria-sort] .cs-sort { color: var(--text); }
[data-layout="console"] body.cs-on .cs-name { color: var(--text); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
[data-layout="console"] body.cs-on .cs-name:hover { color: var(--accent2); text-decoration: underline; }
[data-layout="console"] body.cs-on .cs-code { font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.08em; }
[data-layout="console"] body.cs-on .cs-status { color: var(--mute); white-space: nowrap; }
[data-layout="console"] body.cs-on .cs-status.st-live { color: var(--accent2); font-weight: 700; }
[data-layout="console"] body.cs-on .cs-none { margin: 0; padding: 0.875rem 1.25rem; border-top: 1px solid var(--cs-line); color: var(--mute); }
[data-layout="console"][data-lines="bold"] body.cs-on .cs-table :is(th, td), [data-layout="console"][data-lines="bold"] body.cs-on .cs-none { border-top-width: 2px; }
@media (max-width: 62rem) {
  [data-layout="console"] body.cs-on .topbar { grid-template-columns: auto minmax(0, 1fr); }
  [data-layout="console"] body.cs-on .cs-links { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; margin-left: -0.75rem; }
}
@media (max-width: 48rem) {
  /* The links fold into the Menu pill, which holds them all. */
  [data-layout="console"] body.cs-on .cs-links { display: none; }
  [data-layout="console"] body.cs-on .topbar { min-height: 3.75rem; padding: 0.625rem 1rem; }
  [data-layout="console"] body.cs-on.board-list .host { width: calc(100% - 2rem); }
  [data-layout="console"] body.cs-on .cs-hero { padding: 3.5rem 0.75rem 2.5rem; }
  [data-layout="console"] body.cs-on .cs-body, [data-layout="console"] body.cs-on.board-list .host-side { padding: 0.75rem; }
  [data-layout="console"] body.cs-on.board-list .host-side { padding-bottom: 3rem; }
  [data-layout="console"] body.cs-on .cs-who { max-width: 7rem; }
  [data-layout="console"] body.cs-on .topbar .theme-pick { max-width: 6.5rem; }
  [data-layout="console"] body.cs-on .cs-start-actions, [data-layout="console"] body.cs-on .cs-start-actions .cs-pill { width: 100%; }
}
@media (max-width: 34rem) {
  [data-layout="console"] body.cs-on .cs-hero .brand-tab { padding: 0 0.75rem; }
  [data-layout="console"] body.cs-on .cs-hero .brand-tab svg { display: none; }
  [data-layout="console"] body.cs-on .cs-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  [data-layout="console"] body.cs-on .topbar .nav-toggle { width: 2.375rem; padding: 0; }
}
@media print { [data-layout="console"] body.cs-on :is(.cs-links, .cs-right, .cs-start, .cs-expand, .board-back) { display: none; } }

/* ====================================================================================
   Professional look: no glow, nothing loops, mascots and decor off, calmer corners.
   ==================================================================================== */
[data-look="professional"] { --radius: 8px; }
[data-look="professional"] :is(.btn, .field, .theme-pick, .code-input, .opt, .q-item, .entry, .toast, .session-item, .controls, .brand-switch, .brand-tab, .rank-list li, .req, .rem, .bank-item, .side-link, .remote-big, .cost.mini, .react-emoji, .side-nav.open, .qr, .qr.big, .qr.mini, button.vote) { border-radius: 8px; }
[data-look="professional"] h1 { font-weight: 700; letter-spacing: -0.01em; }
[data-look="professional"] .brand { font-weight: 700; }
[data-look="professional"] :is(.waiting-dots i, .crowd span, .lane.lead .runner-face) { animation: none; }
[data-look="professional"] .crowd span:not(.tally):not(.more), [data-look="professional"] #decor { display: none; }
[data-look="professional"] .btn, [data-look="professional"] .opt { transition-duration: 0.15s; }

/* The Look and feel choice on the account page. */
.look-pick { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.4rem 0.9rem 0.8rem; margin: 0.6rem 0 1rem; display: grid; gap: 0.6rem; min-width: 0; }
.look-pick legend { padding: 0 0.3rem; margin: 0; }
.look-option { align-items: flex-start; }
.look-option input { margin-top: 0.2rem; flex: none; }

/* Voter page: the public demo note and the maker's credit. */
.demo-note { max-width: 40rem; margin: 0 auto 0.6rem; padding: 0.55rem 0.9rem; border: 1px dashed var(--accent2); border-radius: 0.7rem; text-align: center; color: var(--text); }
.made-with { margin: 0.5rem 0 0; }
.made-with a { color: var(--mute); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--mute) 45%, transparent); padding-bottom: 1px; }
.made-with a:hover, .made-with a:focus-visible { color: var(--text); border-bottom-color: currentColor; }
footer.fine.center p { margin: 0; }
.public-demo .react-bar :is(.field, .btn), .public-demo #done-slot { display: none; }

/* Alerts: the host's nudge and a newly opened question flash a frame round the page. */
body.attention::after { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; border: 6px solid var(--accent2); animation: attention 1.6s ease-out both; }
@keyframes attention { 0%, 40%, 80% { opacity: 1; } 20%, 60% { opacity: 0.2; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { body.attention::after { animation: none; } }
.alerts { width: min(100%, 36rem); margin: 0 auto 1rem; }
.alerts summary { cursor: pointer; font-weight: 700; }
.alerts .check { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.7rem; }
.alerts .check input { width: 1.2rem; height: 1.2rem; }
.alerts-push, .alerts-install { margin-top: 0.9rem; display: grid; gap: 0.4rem; justify-items: start; }
.alerts-push:empty, .alerts-install:empty { display: none; }
.notify-box p { margin: 0 0 0.6rem; }
/* ====================================================================================
   Electric colours: the colour tuner in Admin (public/js/colourtuner.js)
   Theme variables only. The preview boxes get their own --bg, --accent and so on from the
   script, so they show the Electric theme whatever theme the admin is looking at.
   ==================================================================================== */
.tuner-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; margin: 0.6rem 0; }
@media (max-width: 760px) { .tuner-grid { grid-template-columns: minmax(0, 1fr); } }
.tuner-tabs, .tuner-presets { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tuner-tab, .tuner-preset { display: inline-flex; align-items: center; gap: 0.4rem; font: inherit; font-size: 0.86rem; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.35rem 0.6rem; cursor: pointer; min-height: 2.2rem; }
.tuner-tab:hover, .tuner-preset:hover { border-color: var(--mute); }
.tuner-tab[aria-pressed="true"], .tuner-preset[aria-pressed="true"] { border-color: var(--accent2); box-shadow: 0 0 0 1px var(--accent2); }
.tuner-tab:focus-visible, .tuner-preset:focus-visible, .tuner-wheel:focus-visible { outline: 2px solid var(--accent2); outline-offset: 3px; }
.tuner-dot { width: 1rem; height: 1rem; border-radius: 50%; border: 1px solid var(--line); flex: none; }
.tuner-preset .tuner-dot + .tuner-dot { margin-left: -0.7rem; }
.tuner-wheel { display: block; width: min(100%, 15rem); height: auto; aspect-ratio: 1; touch-action: none; cursor: crosshair; margin: 0.9rem 0 0.4rem; border-radius: 50%; }
.tuner-sliders { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.3rem 0.7rem; align-items: center; margin-bottom: 0.6rem; }
.tuner-sliders label { margin: 0; }
.tuner-range { width: 100%; accent-color: var(--accent); }
.tuner-values { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--text); margin-bottom: 0; }
.tuner .form-error:empty, .tuner-note:empty { display: none; }
.tuner-side { display: grid; gap: 0.6rem; min-width: 0; }
.tuner-preview { display: grid; gap: 0.8rem; }
.tuner-label { margin: 0.4rem 0 0; font-size: 0.86rem; font-weight: 600; }
.tuner-stage { background: var(--bg); color: var(--text); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: var(--radius); padding: 1rem; display: grid; gap: 0.8rem; }
.tuner-brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display, inherit); font-weight: 800; font-size: 1.3rem; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.tuner-brand .pulse-mark { width: 4.5rem; height: 1.2rem; flex: none; pointer-events: none; stroke: var(--accent); }
.tuner-brand .offbeat-mark { fill: var(--accent); }
.tuner-stage .btn-row { margin: 0; align-items: center; }
.tuner-stage .btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; box-shadow: 0 0 2px color-mix(in srgb, var(--accent) 90%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 60%, transparent); pointer-events: none; }
.tuner-line { margin: 0; color: var(--accent2); font-size: 0.86rem; }

/* ====================================================================================
   X-Ray and confidence check (public/js/xray.js): the extra taps on the voter page and
   the extra results under a question's ordinary results. Theme variables only.
   ==================================================================================== */
.xray-fields { display: grid; gap: 0.4rem; }
.xray-ask .xray-q { font-size: 1.1rem; margin: 0.6rem 0 0.4rem; }
.xray-ask .xray-q:first-child { margin-top: 0; }
.xray-ask .btn-row { align-items: center; justify-content: space-between; margin-top: 0.8rem; }
.xray-sure { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.xray-results { display: grid; gap: 1.2rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); text-align: left; }
.xray-block { display: grid; gap: 0.6rem; }
.xray-title { margin: 0; font-size: 1rem; color: var(--mute); }
.xray-headline { margin: 0; font-size: 1.25em; font-weight: 800; color: var(--text); }
.xray-key { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; margin: 0; font-size: 0.86rem; color: var(--mute); }
.xray-key span + .xray-swatch { margin-left: 0.6rem; }
.xray-swatch { width: 0.9rem; height: 0.9rem; border-radius: 3px; flex: none; }
.xray-row { display: grid; grid-template-columns: minmax(4em, 38%) 1fr; align-items: center; gap: 0.7em; }
.xray-label { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; overflow-wrap: anywhere; }
.xray-chip { border-color: var(--accent2); color: var(--text); white-space: normal; text-align: left; }
.xray-bars { display: grid; gap: 0.25em; min-width: 0; }
.xray-bar { display: grid; grid-template-columns: 1fr 3.2em; align-items: center; gap: 0.5em; }
.xray-track { height: 0.9em; background: color-mix(in srgb, var(--line) 60%, transparent); border-radius: 4px; overflow: hidden; }
.xray-track.stack { display: flex; }
.xray-fill { height: 100%; transition: width 0.4s ease; }
.xray-pct { font-variant-numeric: tabular-nums; text-align: right; font-weight: 700; }
.xray-split { margin: 0; }
.xray-fill.actual, .xray-swatch.actual { background: var(--s1); }
.xray-fill.guess, .xray-swatch.guess { background: repeating-linear-gradient(135deg, var(--s2) 0 6px, color-mix(in srgb, var(--s2) 55%, transparent) 6px 10px); }
.xray-fill.sure1, .xray-swatch.sure1 { background: color-mix(in srgb, var(--s1) 30%, transparent); }
.xray-fill.sure2, .xray-swatch.sure2 { background: color-mix(in srgb, var(--s1) 62%, transparent); }
.xray-fill.sure3, .xray-swatch.sure3 { background: var(--s1); }
@media (max-width: 520px) { .xray-row { grid-template-columns: minmax(0, 1fr); gap: 0.2em; } }
@media (prefers-reduced-motion: reduce) { .xray-fill { transition: none; } }
   Shock deck, Crash cart, Triage and the Flatline alert (public/js/shockui.js)
   Theme variables only.
   ==================================================================================== */
.kit-card .field { width: 100%; }
.kit-about { margin: 0.5rem 0 0; }
.kit-count { margin: 0.2rem 0 0; }
.shock-box { width: min(42rem, calc(100vw - 2rem)); max-height: min(46rem, calc(100vh - 2rem)); overflow-y: auto; }
.shock-group h4 { margin: 1.1rem 0 0.4rem; font-size: 0.86rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); }
.shock-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.shock-row { display: grid; gap: 0.15rem; }
.shock-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.6rem; width: 100%; text-align: left; font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--line-strong); border-radius: 10px; padding: 0.55rem 0.7rem; min-height: 2.75rem; cursor: pointer; }
.shock-item:hover { border-color: var(--accent); }
.shock-item:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.shock-q { font-weight: 650; flex: 1 1 14rem; overflow-wrap: anywhere; }
.shock-save { font-size: 0.8rem; font-weight: 600; justify-self: start; padding: 0.15rem 0; }
.shock-save:disabled { opacity: 0.5; cursor: default; text-decoration: none; }
.triage-box textarea { width: 100%; resize: vertical; }
.triage-note { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--line); }
.triage-note h3 { margin: 0 0 0.4rem; font-size: 1rem; }
.triage-list { margin: 0 0 0.6rem; padding-left: 1.4rem; display: grid; gap: 0.15rem; overflow-wrap: anywhere; }
.triage-low { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.flatline { margin-bottom: 0.8rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--line); }
.flatline-row { display: grid; grid-template-columns: auto minmax(4rem, 1fr) auto; align-items: center; gap: 0 0.8rem; }
.flatline-name { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); }
.flatline-line { height: 2.25rem; min-width: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%); mask-image: linear-gradient(90deg, transparent, #000 14%); }
.flatline-trace { display: block; width: 100%; height: 100%; }
.flatline-read { text-align: right; min-height: 1.2em; }
.flatline-ask { margin-top: 0.6rem; padding: 0.7rem 0.8rem; border: 1px solid var(--accent); border-radius: 10px; background: var(--panel2); }
.flatline-ask p { margin: 0 0 0.5rem; font-weight: 650; }
.flatline-ask .btn-row { margin: 0; }
.flatline-tell { margin-top: 0.5rem; font-size: 0.8rem; }
@media (max-width: 520px) {
  .flatline-row { grid-template-columns: auto minmax(0, 1fr); }
  .flatline-read { grid-column: 1 / -1; text-align: left; }
}
   Clear! (decision moments), the decision log and Second Opinion
   (public/js/decisions.js, public/js/decisionlog.js). Theme variables only.
   ==================================================================================== */
.clear-chip { border-color: var(--accent2); color: var(--text); }
.clear-field { margin: 0.6rem 0; }
.clear-field .fine { margin: 0.2rem 0 0; }
#clear-slot:empty { display: none; }
.clear-box { margin-top: 1rem; padding: 0.8rem 0.9rem; border: 1px solid var(--line-strong); border-left: 4px solid var(--accent2); border-radius: 10px; background: var(--panel2); display: grid; gap: 0.5rem; min-width: 0; }
.clear-box h3 { margin: 0; font-size: 1.05rem; }
.clear-box .fine, .clear-box .btn-row, .clear-box .form-row { margin: 0; }
.clear-box .form-row .field { flex: 1 1 14rem; min-width: 0; }
.clear-sealed { text-align: center; padding: 1.2rem 0.5rem; display: grid; gap: 0.4rem; justify-items: center; }
.clear-sealed-title { margin: 0; font-weight: 800; font-size: 1.15em; }
.clear-sealed .fine { margin: 0; max-width: 34rem; }
.clear-count { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent2); }
.page-present .clear-sealed { font-size: clamp(1.1rem, 2.2vw, 1.8rem); padding: 2rem 1rem; }
.decisions .filters { margin: 0.8rem 0; }
.decisions .filters .field { flex: 1 1 16rem; width: auto; min-width: 0; }
.decision-q { color: var(--mute); overflow-wrap: anywhere; }
.decision-text { font-size: 1.08rem; overflow-wrap: anywhere; }
/* The reveal: one short flash on the result as it lands. Not for anyone who asked for less motion. */
@keyframes clear-flash {
  0% { filter: brightness(2.4) saturate(1.4); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent2) 80%, transparent); transform: scale(0.985); }
  35% { filter: brightness(1.3); box-shadow: 0 0 0 0.9rem color-mix(in srgb, var(--accent2) 0%, transparent); transform: scale(1.01); }
  100% { filter: none; box-shadow: none; transform: none; }
}
@media (prefers-reduced-motion: no-preference) { .clear-flash { animation: clear-flash 0.9s ease-out; } }
   Murmur and Discharge (public/js/signals.js). Theme variables only.
   Quiet on purpose: on the voter page it is one closed line until someone opens it.
   ==================================================================================== */
#signals-slot { display: grid; gap: 0.8rem; }
#signals-slot:empty { display: none; }
.vote ~ #signals-slot { width: min(100%, 36rem); margin: 0 auto 1rem; padding: 0 1rem; }
.codeblue summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; }
.codeblue-buttons { display: grid; gap: 0.5rem; margin: 0.7rem 0; }
.codeblue-buttons .btn[aria-pressed="true"], .codeblue-vote .btn[aria-pressed="true"] { outline: 2px solid var(--accent2); outline-offset: 2px; }
.codeblue-promise { margin: 0.4rem 0 0; font-weight: 600; font-size: 0.92rem; color: var(--text); }
.codeblue-vote { text-align: center; border-color: var(--accent2); }
.codeblue-vote h2 { margin-top: 0; }
.codeblue-host { display: grid; gap: 0.6rem; }
.codeblue-host .card-head { margin: 0; }
.codeblue-alert { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; padding: 0.7rem 0.9rem; border: 1px solid var(--accent2); border-radius: var(--radius); background: color-mix(in srgb, var(--accent2) 10%, transparent); color: var(--text); }
.codeblue-alert .btn-row { margin: 0; }
.saved-note { margin: 0.4rem 0 0; font-weight: 700; color: var(--text); }
.given-back { margin: 0 0 0.6rem; }
   Flatline, DNR and Vitals (public/js/worthit.js, vitalshost.js, vitals.js)
   Theme variables only.
   ==================================================================================== */
#vitals-slot { width: min(100%, 36rem); margin: 0 auto; padding: 0 1rem; display: grid; gap: 1rem; }
#vitals-slot:empty { display: none; }
.vitals-card h2 { margin-top: 0; }
.options.vitals-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vitals-three .opt { justify-content: center; text-align: center; }
.vitals-three .opt.on::after { content: none; }
.vitals-outcome { font-weight: 700; font-size: 1.05rem; margin: 0.4rem 0; }
.vitals-result .recap-bars { margin: 0.6rem 0; }
.vitals-host h2 { margin-top: 0; }
.vitals-host > * + * { margin-top: 0.6rem; }
.vitals-head { display: grid; gap: 0.6rem; }
.vitals-title { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.vitals-title h1 { margin: 0; }
.vitals-state { font-size: 0.9rem; padding: 0.2rem 0.8rem; color: var(--text); }
.vitals-state.state-healthy { border-color: var(--ok-text); }
.vitals-state.state-weak { border-color: var(--accent2); }
.vitals-state.state-flatlining, .vitals-state.state-ended { border-color: var(--danger-text); }
.vitals-pulse { display: flex; align-items: baseline; gap: 0.6rem; margin: 0; }
.vitals-pulse strong { font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.vitals-beat { width: 100%; height: auto; display: block; }
.vitals-beat .grid { stroke: var(--line); stroke-width: 1; }
.vitals-beat .beat { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.vitals-beat .axis { fill: var(--mute); font-size: 11px; font-variant-numeric: tabular-nums; }
.vitals-flat { border-color: var(--danger-text); }
.vitals-flat h2 { margin-top: 0; }
tr.vitals-poor td:last-child { color: var(--danger-text); }
.vitals .switch + .switch, .vitals .switch + .fine { margin-top: 0.6rem; }

/* ==========================================================================
   Org check-up (public/js/checkup.js): summary cards, the meeting series table,
   and the "where the time goes" bars. Colours come from the theme's variables.
   ========================================================================== */
.checkup-lede { margin: 0; }
.checkup-cards { grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); }
.checkup-card .tile-value { font-variant-numeric: tabular-nums; }
.checkup-change { margin-top: 0.35rem; padding-top: 0.35rem; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.checkup-change:is(.is-up, .is-down) { color: var(--text); }
.checkup-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.checkup-head h2 { margin: 0; }
.checkup-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.6rem 0 0.2rem; }
.checkup-chip { cursor: pointer; background: none; font: inherit; font-size: 0.85rem; font-weight: 700; padding: 0.25rem 0.75rem; color: var(--text); font-variant-numeric: tabular-nums; }
.checkup-chip:focus-visible, .checkup-sort:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.checkup-table th[scope="row"] { text-align: left; font-weight: 650; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line); color: var(--text); font-size: inherit; white-space: normal; min-width: 11rem; }
.checkup-table :is(th, td).num { text-align: right; }
.checkup-table td { white-space: nowrap; }
.checkup-sort { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; white-space: nowrap; }
.checkup-sort.is-on { color: var(--text); }
.checkup-outside :is(th, td) { border-top: 2px solid var(--line); color: var(--mute); }
.checkup-empty { display: grid; gap: 0.2rem; padding: 0.8rem 0; }
.checkup-empty p, .checkup-missing ul { margin: 0; }
.checkup-missing h2 { margin-top: 0; }
.checkup-missing ul { padding-left: 1.1rem; display: grid; gap: 0.3rem; color: var(--mute); }
.checkup-bars { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.checkup-bars li { display: grid; grid-template-columns: minmax(7rem, 14rem) minmax(4rem, 1fr) auto; gap: 0.8rem; align-items: center; }
.checkup-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.checkup-bar { height: 0.7rem; border-radius: 99px; background: var(--panel2, var(--line)); overflow: hidden; }
.checkup-bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.checkup-bar-n { font-variant-numeric: tabular-nums; color: var(--mute); white-space: nowrap; }
@media (max-width: 40rem) {
  .checkup-bars li { grid-template-columns: 1fr auto; }
  .checkup-bar { grid-column: 1 / -1; order: 3; }
}
/* ====================================================================================
   Pre-op (public/js/preop.js): the panel in session settings and the banner on the console.
   Theme variables only.
   ==================================================================================== */
#preop-slot { display: grid; gap: 0.5rem; }
#preop-slot:empty, #preop-banner[hidden] { display: none; }
.preop-banner { border-color: var(--accent); display: grid; gap: 0.6rem; }
.preop-line { margin: 0; font-size: 1.05rem; }
.preop-q { margin: 0; font-weight: 700; color: var(--text); }
.preop-card { margin: 0; }
.preop-card h2 { margin-top: 0; }
/* ====================================================================================
   Follow-through and Chart (public/js/followthrough.js, chart.js)
   Theme variables only.
   ==================================================================================== */
#follow-slot { width: min(100%, 36rem); margin: 0 auto; padding: 0 1rem; display: grid; gap: 1rem; }
#follow-slot:empty { display: none; }
.follow-host h2 { margin-top: 0; }
.follow-host > * + * { margin-top: 0.6rem; }
.follow-text { margin: 0.4rem 0; padding: 0.5rem 0.8rem; border-left: 3px solid var(--accent); background: var(--panel2); border-radius: 6px; font-weight: 700; overflow-wrap: anywhere; }
.follow-open .btn-row { align-items: center; }
.follow-left { font-variant-numeric: tabular-nums; }
.follow-said { overflow-wrap: anywhere; }
.options.follow-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.follow-four .opt { justify-content: center; text-align: center; }
.follow-four .opt.on::after { content: none; }
.chart .filters { margin: 0.8rem 0; }
.chart .filters .field { flex: 1 1 16rem; width: auto; min-width: 0; }
.chart-entry > summary { cursor: pointer; display: grid; gap: 0.15rem; }
.chart-title { font-size: 1.05rem; overflow-wrap: anywhere; }
.chart-body { margin-top: 0.6rem; }
.chart-record h3 { margin: 0.9rem 0 0.3rem; font-size: 1rem; }
.chart-asked, .chart-items { margin: 0; padding-left: 1.3rem; display: grid; gap: 0.5rem; }
.chart-asked li, .chart-items li { overflow-wrap: anywhere; }
.chart-asked li > *, .chart-items li > * { display: block; }
.chart-items li.done strong { color: var(--mute); }
.chart-record .btn-row { margin-top: 0.9rem; }
/* ====================================================================================
   Silent Start (public/js/silent.js). Theme variables only.
   ==================================================================================== */
#silent-voter[hidden], #silent-voted[hidden], #silent-screen[hidden] { display: none; }
#silent-slot:empty { display: none; }
#silent-slot { margin: 1rem 0; }
.silent-clock { margin: 0.2rem 0 0.8rem; font-weight: 800; font-size: 1.5rem; font-variant-numeric: tabular-nums; color: var(--accent2); }
[data-scheme="light"] .silent-clock { color: var(--accent); }
.silent-clock.big { font-size: clamp(3rem, 9vw, 8rem); line-height: 1.05; margin: 0.2em 0; }
.silent-count { margin: 0.6rem 0 0.3rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.silent-view { text-align: center; }
.silent-view .silent-count { font-size: clamp(1.2rem, 2.4vw, 2.2rem); }
.silent-mine h2 { font-size: 1rem; margin: 1rem 0 0.4rem; }
.silent-mine ul, .silent-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.silent-mine li, .silent-edit li { display: flex; gap: 0.6rem; align-items: center; justify-content: space-between; padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: var(--radius); overflow-wrap: anywhere; }
.silent-edit li label { display: flex; gap: 0.5rem; align-items: flex-start; flex: 1; min-width: 0; }
.silent-edit li.is-hidden label span { color: var(--mute); text-decoration: line-through; }
.silent-edit, .silent-groups { display: grid; gap: 0.9rem; margin: 0.8rem 0; }
.silent-groups { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); text-align: left; }
.silent-group { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.7rem 0.8rem; min-width: 0; }
.silent-group h3 { margin: 0 0 0.4rem; font-size: 1rem; overflow-wrap: anywhere; }
.silent-groups .silent-group li { padding-left: 0.9rem; position: relative; color: var(--text); overflow-wrap: anywhere; }
.silent-groups .silent-group li::before { content: "·"; position: absolute; left: 0.2rem; color: var(--mute); }
.silent-edit .silent-group .form-row { margin-bottom: 0.5rem; }
.silent-host > * + * { margin-top: 0.6rem; }
.silent-host .card-head { margin: 0; }
.silent-start .form-row .field:first-child { flex: 1 1 16rem; }
.silent-tools { align-items: center; }
.silent-card summary, .silent-behind summary { cursor: pointer; font-weight: 700; }
#silent-under { margin-top: 1.2rem; }
#silent-under .silent-group h3 { font-size: clamp(1rem, 1.6vw, 1.5rem); }
#silent-under .silent-group li { font-size: clamp(0.9rem, 1.2vw, 1.2rem); }
#silent-voted { width: min(100%, 36rem); margin: 0 auto; padding: 0 1rem 1rem; }
#silent-screen { flex: 1; min-height: 0; overflow: auto; padding: 0.5rem clamp(1.2rem, 5vw, 5rem) 1rem; display: grid; align-content: center; }
.silent-host .form-row { flex-wrap: wrap; justify-content: flex-start; }
.silent-host .form-row .field { width: auto; flex: 1 1 12rem; }
.silent-host .form-row select.field { flex: 0 1 10rem; }
/* ---------- Forecast calls and Rhythm (forecastbits.js, forecasts.js, rhythm.js, rhythmhost.js) ---------- */
.forecast-field { display: grid; gap: 0.4rem; }
.forecast-date { display: grid; gap: 0.2rem; max-width: 16rem; }
.forecast-line { margin: 0 0 0.8rem; padding: 0.6rem 0.8rem; border: 1px solid var(--accent2); border-radius: 10px; }
.forecast-line p { margin: 0; }
.forecast-says { font-size: clamp(1.2rem, 2.4vw, 2rem); font-weight: 800; line-height: 1.2; }
.forecast-due { display: inline-block; margin: 0.2rem 0 0.4rem; font-weight: 700; color: var(--text); }
.forecast.overdue { border-color: var(--accent2); }
.forecast p { margin: 0; }
.forecast-q { overflow-wrap: anywhere; font-weight: 600; }
.forecast-said { font-size: 1.08rem; font-weight: 700; }
.forecast-verdict.right { border-color: var(--ok-text); color: var(--text); }
.forecast-verdict.wrong { border-color: var(--danger-text); color: var(--text); }
.forecast-verdict.split { color: var(--text); }
.forecast-cal h2, .rhythm-card h2, .rhythm-host h2, .rhythm-alert h2, .rhythm-settings h2 { margin-top: 0; }
.forecast-cal > * + * { margin-top: 0.6rem; }
.forecast-score { font-weight: 700; font-size: 1.05rem; }
.rhythm-host > * + *, .rhythm-card > * + *, .rhythm-settings > * + * { margin-top: 0.6rem; }
.rhythm-card h2 { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.rhythm-card.dropped, .rhythm-alert { border-color: var(--danger-text); }
.rhythm-drop { font-weight: 700; margin: 0.2rem 0; }
.rhythm-line { width: 100%; height: auto; display: block; }
.rhythm-line .grid { stroke: var(--line); stroke-width: 1; }
.rhythm-line .beat { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.rhythm-line .dot { fill: var(--accent); }
.rhythm-line .axis { fill: var(--mute); font-size: 11px; font-variant-numeric: tabular-nums; }
.rhythm-choice { align-items: flex-start; }

/* Admissions: the sign-up page, and its button on the public demo */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.admissions .slug-row { display: flex; align-items: center; gap: 0.4rem; }
.admissions .slug-row .field { flex: 1; min-width: 0; }
.admissions .slug-base { color: var(--mute); white-space: nowrap; }
.admissions .fine.ok { color: var(--ok-text); }
.admissions .fine.bad { color: var(--danger-text); }
.admissions .check-row { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; }
.admissions .check-row input { margin-top: 0.25rem; }
.admit-card { max-width: 40rem; margin: 0 auto 1rem; padding: 1rem 1.1rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--panel); text-align: center; display: grid; gap: 0.4rem; justify-items: center; }
.admit-card p { margin: 0; }

/* ---------- Small Doses (public/js/doses.js). The twelve group colours are variables here;
   everything else comes from the theme. ---------- */
:root {
  --dose-teal: #14b8a6; --dose-amber: #f59e0b; --dose-violet: #8b5cf6; --dose-rose: #f43f5e;
  --dose-lime: #84cc16; --dose-sky: #38bdf8; --dose-coral: #fb7155; --dose-indigo: #6366f1;
  --dose-gold: #eab308; --dose-mint: #34d399; --dose-plum: #c026d3; --dose-slate: #94a3b8;
}
[data-scheme="light"] {
  --dose-teal: #0f766e; --dose-amber: #b45309; --dose-violet: #6d28d9; --dose-rose: #be123c;
  --dose-lime: #4d7c0f; --dose-sky: #0369a1; --dose-coral: #c2410c; --dose-indigo: #4338ca;
  --dose-gold: #a16207; --dose-mint: #047857; --dose-plum: #a21caf; --dose-slate: #475569;
}
.dose-c-teal { --dose: var(--dose-teal); } .dose-c-amber { --dose: var(--dose-amber); } .dose-c-violet { --dose: var(--dose-violet); }
.dose-c-rose { --dose: var(--dose-rose); } .dose-c-lime { --dose: var(--dose-lime); } .dose-c-sky { --dose: var(--dose-sky); }
.dose-c-coral { --dose: var(--dose-coral); } .dose-c-indigo { --dose: var(--dose-indigo); } .dose-c-gold { --dose: var(--dose-gold); }
.dose-c-mint { --dose: var(--dose-mint); } .dose-c-plum { --dose: var(--dose-plum); } .dose-c-slate { --dose: var(--dose-slate); }
.dose-dot { display: inline-block; flex: none; width: 0.9em; height: 0.9em; border-radius: 50%; background: var(--dose, var(--mute)); }
.dose-clock { margin: 0.2rem 0 0.8rem; font-weight: 800; font-size: 1.5rem; font-variant-numeric: tabular-nums; color: var(--accent2); }
[data-scheme="light"] .dose-clock { color: var(--accent); }
.dose-clock.big { font-size: clamp(3rem, 9vw, 8rem); line-height: 1.05; margin: 0.2em 0; }
.dose-clock.over { color: var(--text); }
.dose-text { margin: 0.3rem 0 0; overflow-wrap: anywhere; color: var(--text); }
/* The phone: one calm screen. */
.dose-card { border-top: 0.5rem solid var(--dose, var(--line)); }
.dose-band { display: flex; align-items: center; gap: 0.6rem; margin: -0.2rem 0 0.2rem; font-size: 1.15rem; letter-spacing: 0.06em; color: var(--dose, var(--text)); }
.dose-band .dose-dot { width: 1.3em; height: 1.3em; }
.dose-find { font-weight: 700; margin-bottom: 0.8rem; }
.dose-box { width: 100%; resize: vertical; min-height: 6rem; border-color: var(--dose, var(--line-strong)); }
.dose-card [role="status"] { margin-top: 0.4rem; }
/* Lists of groups: the host's board, and everyone's takeaways afterwards. */
.dose-list, .dose-back { list-style: none; margin: 0.6rem 0 1rem; padding: 0; display: grid; gap: 0.5rem; }
.dose-back { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); text-align: left; }
.dose-list li, .dose-back li { border: 1px solid var(--line); border-left: 0.35rem solid var(--dose, var(--line)); border-radius: var(--radius); padding: 0.55rem 0.75rem; min-width: 0; }
.dose-back li.is-hidden .dose-text { color: var(--mute); text-decoration: line-through; }
.dose-back-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.dose-back-head .btn { margin-left: auto; }
.dose-tick { margin-left: auto; font-weight: 800; color: var(--ok-text); }
.dose-host > * + * { margin-top: 0.4rem; }
.dose-host .live-prompt { margin-bottom: 0.2rem; }
/* While a dose is on screen the "On screen now" card shows only the dose. */
.live-card.dose-on > :not(.card-head):not(#dose-slot) { display: none; }
.live-card.dose-live #lobby-btn { display: none; }
#dose-slot:empty { display: none; }
@keyframes dose-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } 50% { box-shadow: 0 0 0 0.6rem color-mix(in srgb, var(--accent) 0%, transparent); } }
@media (prefers-reduced-motion: no-preference) { .dose-back-btn.pulse { animation: dose-pulse 1.1s ease-in-out infinite !important; } }
.dose-back-btn.pulse { outline: 3px solid var(--accent2); outline-offset: 2px; }
/* The big screen. */
.dose-view { text-align: center; }
.dose-view .lede { margin: 0 auto; }
.dose-clock.big.over { font-size: clamp(2rem, 5vw, 4.5rem); }
.dose-view .dose-back { margin-top: 1.2rem; }
.dose-view .dose-back li { padding: 0.8rem 1rem; }
.dose-view .dose-back strong { font-size: clamp(1rem, 1.6vw, 1.5rem); }
.dose-view .dose-text { font-size: clamp(1rem, 1.6vw, 1.6rem); font-weight: 600; }
.dose-tiles { list-style: none; margin: 1.2rem auto 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; max-width: 70rem; }
.dose-tiles li { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1rem; border: 2px solid var(--dose, var(--line)); border-radius: var(--radius); font-size: clamp(1rem, 1.8vw, 1.6rem); }
.dose-tiles .dose-dot { width: 1.1em; height: 1.1em; }
.dose-sheet .field { width: 100%; }

/* ====================================================================================
   Jolt (public/js/jolt.js). Theme variables only. The sealed card is one size for everyone,
   holder or not, so nobody can tell from across the table what a phone is showing.
   ==================================================================================== */
#jolt-slot:empty { display: none; }
.vote ~ #jolt-slot { width: min(100%, 36rem); margin: 0 auto 1rem; padding: 0 1rem; }
.jolt-card, .jolt-host { display: grid; gap: 0.6rem; }
.jolt-card h2, .jolt-host h2 { margin: 0; }
.jolt-topic { margin: 0; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.jolt-seal {
  display: grid; place-items: center; min-height: 9rem; padding: 1rem; width: 100%;
  border: 2px dashed var(--line-strong); border-radius: var(--radius); background: var(--panel2); color: var(--text);
  font: inherit; text-align: center; cursor: pointer; touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.jolt-seal .jolt-face { margin: 0; font-weight: 700; color: var(--mute); }
.jolt-seal .jolt-inside { display: none; margin: 0; font-size: 1.05rem; font-weight: 600; }
.jolt-seal.open { border-style: solid; border-color: var(--accent2); }
.jolt-seal.open .jolt-face { display: none; }
.jolt-seal.open .jolt-inside { display: block; }
.jolt-seal:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.jolt-label { font-weight: 600; }
.jolt-card textarea, .jolt-host .jolt-topic-in { width: 100%; }
.jolt-vote { text-align: center; border-color: var(--accent2); }
.jolt-vote h2 { margin-top: 0; }
.jolt-vote .btn[aria-pressed="true"] { outline: 2px solid var(--accent2); outline-offset: 2px; }
.jolt-host.live { border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.jolt-texts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.jolt-texts li { display: flex; gap: 0.5rem; align-items: center; justify-content: space-between; padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: var(--radius); overflow-wrap: anywhere; }
.jolt-texts li.is-hidden { opacity: 0.6; }
.jolt-result { margin: 0; font-weight: 700; color: var(--text); }
.jolt-banner { position: fixed; left: 50%; top: 4.6rem; transform: translateX(-50%); width: min(92vw, 56rem); z-index: 5;
  padding: 0.9rem 1.2rem; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--panel); color: var(--text);
  box-shadow: 0 0 1.4rem color-mix(in srgb, var(--accent) 30%, transparent); display: grid; gap: 0.4rem; }
.jolt-banner[hidden] { display: none; }
.jolt-banner-head { margin: 0; font-size: 1.4rem; font-weight: 800; }
.jolt-banner .jolt-texts li { justify-content: flex-start; font-size: 1.1rem; }
.jolt-from { font-size: 0.78rem; font-weight: 700; color: var(--accent2); text-transform: uppercase; letter-spacing: 0.04em; flex: none; }
/* Plans (common.js markPlanLocks): a small label on a tool this plan does not include. */
.plan-chip { font-size: 0.7rem; font-weight: 700; border-radius: 99px; padding: 0.05rem 0.45rem; border: 1px solid var(--line-strong); color: var(--mute); vertical-align: middle; }

/* ---------- the big screen's shocks (js/fx.js): a flash and a jolt as a question opens,
   "We have a pulse." when everyone has answered. Never with reduced motion (fx.js checks). */
.fx-flash { position: fixed; inset: 0; z-index: 40; background: #fff; pointer-events: none; animation: fx-flash 0.45s ease-out both; }
.fx-shake { animation: fx-shake 0.42s cubic-bezier(.36,.07,.19,.97) both; }
.fx-pulse { position: fixed; inset: 0; z-index: 35; margin: 0; display: grid; place-items: center; pointer-events: none; font: 900 clamp(3rem, 10vw, 8rem) / 1 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; text-align: center; padding: 1rem; color: var(--ink-pulse); text-shadow: 0 0 6px currentColor, 0 0 28px currentColor, 0 0 70px currentColor; background: color-mix(in srgb, var(--bg) 70%, transparent); animation: fx-pulse 2.2s ease-out both; }
@keyframes fx-flash { 0% { opacity: 0.9; } 100% { opacity: 0; } }
@keyframes fx-shake { 10%, 90% { transform: translate(-3px, 1px); } 20%, 80% { transform: translate(6px, -2px); } 30%, 50%, 70% { transform: translate(-10px, 3px); } 40%, 60% { transform: translate(10px, -3px); } }
@keyframes fx-pulse { 0% { opacity: 0; transform: scale(1.08); } 6% { opacity: 1; } 10% { opacity: 0.2; } 16% { opacity: 1; transform: scale(1); } 27% { transform: scale(1.04); } 33% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fx-flash, .fx-pulse { display: none; } .fx-shake { animation: none; } }

/* ====================================================================================
   ITinspired neon (2026-11-14): ITinspired's own theme, in its green, with its mouse logo lit
   like a neon sign at the start of every top bar (welcome page, sign-in, staff pages, voters'
   phones, big screen). The theme brings the Electric look (brand.js), so the glow, the lit
   top-bar line and the reveal flash all come in green. The logo is the top bar's glowing mark
   (the three-glow rule). Glow only on a dark page; flicker and buzz only without "less
   motion" and never in the video-call layout.
   ==================================================================================== */
[data-theme="itinspired"] {
  --iti-green: #74b843;
  --iti-glow: drop-shadow(0 0 1.5px color-mix(in srgb, var(--iti-green) 95%, white)) drop-shadow(0 0 8px color-mix(in srgb, var(--iti-green) 70%, transparent)) drop-shadow(0 0 22px color-mix(in srgb, var(--iti-green) 40%, transparent));
  --iti-glow-hot: drop-shadow(0 0 2px color-mix(in srgb, var(--iti-green) 60%, white)) drop-shadow(0 0 12px var(--iti-green)) drop-shadow(0 0 36px color-mix(in srgb, var(--iti-green) 65%, transparent));
}
[data-theme="itinspired"] .topbar::before {
  content: ""; flex: none; width: 1.55rem; height: 2rem; margin-right: 0.1rem;
  background: url("/img/itinspired-mouse.svg") center / contain no-repeat;
}
[data-theme="itinspired"] .page-present .topbar::before { width: clamp(2rem, 3.4vw, 3.4rem); height: clamp(2.6rem, 4.4vw, 4.4rem); }
[data-look="electric"][data-theme="itinspired"][data-scheme="dark"] .topbar::before { filter: var(--iti-glow); }
/* The product's name runs from ITinspired green into its cyan, like Electric's red into orange. */
[data-look="electric"][data-theme="itinspired"][data-scheme="dark"] .topbar .brand:not(.brand-tab) { background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Lines and quiet text take a green tint instead of grey, as in Electric. */
[data-theme="itinspired"][data-scheme="dark"] body {
  --line: color-mix(in srgb, var(--accent) 24%, var(--bg));
  --line-strong: color-mix(in srgb, var(--accent) 50%, color-mix(in srgb, var(--text) 48%, var(--bg)));
  --panel2: color-mix(in srgb, var(--accent) 9%, color-mix(in srgb, var(--text) 5%, var(--panel)));
}
/* The welcome page: the logo lit large over the join box (only in ITinspired's theme). */
.iti-hero { display: none; }
[data-theme="itinspired"] .iti-hero { display: grid; justify-items: center; gap: 0.5rem; margin: 0.5rem 0 0.25rem; }
.iti-hero-logo { width: 5.5rem; height: 7rem; background: url("/img/itinspired-mouse.svg") center / contain no-repeat; }
.iti-hero-name { font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
[data-look="electric"][data-theme="itinspired"][data-scheme="dark"] .iti-hero-logo { filter: var(--iti-glow-hot); }
[data-look="electric"][data-theme="itinspired"][data-scheme="dark"] .iti-hero-name { text-shadow: 0 0 2px color-mix(in srgb, var(--iti-green) 90%, white), 0 0 14px color-mix(in srgb, var(--iti-green) 55%, transparent); }

/* Flicker on like a tube being switched on (two stutters, then lit), then now and then a short
   buzz: two quick dips about every nine seconds, well under three flashes a second. */
@keyframes iti-ignite {
  0% { opacity: 0; filter: none; } 10% { opacity: 1; filter: var(--iti-glow); } 22% { opacity: 0.15; filter: none; }
  40% { opacity: 1; filter: var(--iti-glow); } 52% { opacity: 0.3; filter: none; } 70% { opacity: 1; filter: var(--iti-glow-hot); } 100% { opacity: 1; filter: var(--iti-glow); }
}
@keyframes iti-buzz {
  0%, 91%, 100% { opacity: 1; filter: var(--iti-glow); } 92% { opacity: 0.4; filter: none; } 93% { opacity: 1; filter: var(--iti-glow-hot); }
  94.5% { opacity: 0.55; filter: none; } 96% { opacity: 1; filter: var(--iti-glow-hot); }
}
@media (prefers-reduced-motion: no-preference) {
  [data-look="electric"][data-theme="itinspired"][data-scheme="dark"] body:not(.call) .topbar::before { animation: iti-ignite 0.9s linear 1 both, iti-buzz 9s linear 0.9s infinite; }
  [data-look="electric"][data-theme="itinspired"][data-scheme="dark"] body:not(.call) .iti-hero-logo { animation: iti-ignite 0.9s linear 0.3s 1 both, iti-buzz 11s linear 1.2s infinite; }
}