/* 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; }
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; }
.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; }
.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: 0.8rem; 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: 0.6rem; bottom: 0.6rem; width: 2.4rem; height: 2.4rem; 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; }
.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.6rem; height: 2.4rem; cursor: pointer; }
.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; }
}
@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%; }

/* ====================================================================================
   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; }

/* ====================================================================================
   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; }