:root {
  color-scheme: dark;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  color: #f4f7fc;
  background: #101927;
  --panel: #172437;
  --surface: #203149;
  --line: #4e637e;
  --muted: #b8c7da;
  --accent: #f1d68f;
  --accent-ink: #241d11;
}

* { box-sizing: border-box; }
body { margin: 0; }
h1, h2, p { margin: 0; }
button, input, select { font: inherit; }
button, input, select, summary { min-height: 44px; }
button, select {
  background: var(--surface);
  color: inherit;
  border: 1px solid var(--line);
  border-radius: 10px;
}
button { padding: .65rem .8rem; font-weight: 700; cursor: pointer; }
button:hover:not(:disabled) { filter: brightness(1.13); }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.accent, #voteBtn, #startBtn:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.eyebrow {
  color: var(--accent);
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.subdued { color: var(--muted); }
.error { color: #ffb4b4; }

.phone, .control {
  width: min(100%, 36rem);
  min-height: 100dvh;
  margin-inline: auto;
  padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
body[data-page="participant"], body[data-page="admin"] {
  background: radial-gradient(ellipse at 50% 0, #213551, #101927 65%);
}
.phone { max-width: 30rem; }
.phone-header { margin: .8rem 0 1.25rem; }
.brand-header { display: flex; align-items: center; justify-content: space-between; gap: .65rem; }
.brand-chip { flex: 0 0 auto; display: inline-flex; align-items: center; padding: .3rem .42rem; border-radius: .42rem; background: #faf6ec; }
.brand-chip img { display: block; width: clamp(75px, 24vw, 112px); height: auto; }
.phone-header h1, .control h1 {
  margin-top: .3rem;
  font-size: clamp(1.75rem, 7vw, 2.6rem);
  line-height: 1.04;
  letter-spacing: -.045em;
}
.phone-status {
  padding: .78rem .85rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
  line-height: 1.35;
}
body[data-voting="open"] .phone-header { margin: 0 0 .75rem; }
body[data-voting="open"] .phone-header h1 { font-size: 1.4rem; }
body[data-voting="open"] .phone-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--accent);
  font-weight: 750;
  padding-block: .55rem;
}
.phone-countdown { min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
#ballot { margin-top: .85rem; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { font-size: clamp(1.2rem, 5.2vw, 1.48rem); line-height: 1.16; font-weight: 750; margin-bottom: .55rem; }
.option {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 46px;
  padding: .55rem .65rem;
  margin-bottom: .45rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  line-height: 1.2;
}
.option input { flex: 0 0 auto; width: 1.1rem; min-height: 0; height: 1.1rem; margin: 0; accent-color: var(--accent); }
.option:has(input:checked) { border-color: var(--accent); background: #3b342b; }
#voteBtn { width: 100%; min-height: 48px; }
#voteFeedback:not(:empty) { margin-top: .5rem; color: var(--accent); }

.control { max-width: 43rem; }
.control-header { margin-bottom: .85rem; }
.control h2 { font-size: 1.08rem; line-height: 1.2; }
.control label { display: block; margin: .75rem 0 .35rem; }
.control select, #deviceCode { width: 100%; padding: .55rem .65rem; font-size: 1rem; }
#deviceCode { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: inherit; }
#login p + p, #approveDevice button { margin-top: .65rem; }
#connection:empty, #controlError:empty, #pairStatus:empty, #deviceFeedback:empty, #adminCounts:empty { display: none; }
#controlError:not(:empty), #deviceFeedback:not(:empty) { margin-top: .65rem; }
#controlStatus { margin: .65rem 0; }
#controlStatus p { color: var(--muted); margin-top: .28rem; }
.speaker-cue { margin: .5rem 0 .65rem; padding: .55rem .65rem; border-left: 3px solid var(--accent); background: var(--panel); color: var(--muted); font-size: .91rem; line-height: 1.28; }
.speaker-cue:empty { display: none; }
.session {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .35rem .55rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
}
#clock { font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; padding-inline: .3rem; }
.controls-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.panel { margin-top: .75rem; padding: .65rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.panel h2 { margin-bottom: .5rem; }
.panel summary { display: list-item; line-height: 44px; cursor: pointer; font-weight: 700; }
details.panel { padding-block: 0; }
details[open].panel { padding-bottom: .65rem; }
#publicLink { overflow-wrap: anywhere; color: var(--muted); }
#qr { display: block; max-width: 100%; height: auto; margin: .55rem 0; }
#qr[hidden] { display: none; }

.result { margin: .65rem 0; }
.result .metric { display: flex; justify-content: space-between; gap: .6rem; }
.result .metric b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.track { margin-top: .3rem; height: .48rem; border-radius: 12px; background: #394960; overflow: hidden; }
.track .fill { height: 100%; background: var(--accent); transition: width .25s ease; }

body[data-page="presentation"] { display: grid; min-height: 100dvh; place-items: center; background: #080e18; }
.projection {
  width: min(100vw, calc(100dvh * 16 / 9));
  height: min(100dvh, calc(100vw * 9 / 16));
  overflow: auto;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  padding: 2.5vh 3.2vw;
  background: linear-gradient(135deg, #1a304f, #101b2d 73%);
}
.projection header, .projection-footer {
  display: flex;
  justify-content: space-between;
  gap: 1.5cqw;
  font-size: 1.32cqw;
  color: var(--muted);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.projection header { align-items: center; border-bottom: 1px solid var(--line); padding-bottom: .75cqw; }
.projection-mark { margin-left: auto; padding: .25cqw .42cqw; border-radius: .35cqw; }
.projection-mark img { width: 9cqw; }
body[data-slide-type="cover"] .projection-mark { visibility: hidden; }
.projection-footer { margin-top: auto; padding-top: 1.1cqw; }
.projection #hintlink { text-transform: none; letter-spacing: 0; }
.projection #presentation { padding-top: 2.7cqw; }
.projection h1 { font-size: 5.6cqw; line-height: .99; letter-spacing: -.045em; margin: 0 0 1.6cqw; }
.projection h2 { font-size: 4.1cqw; line-height: 1.06; letter-spacing: -.034em; margin-bottom: 1.4cqw; }
.projection .multiline-title { font-size: 3.05cqw; line-height: 1.17; white-space: pre-line; }
.projection .lead { color: #d7e3f2; font-size: 2.45cqw; line-height: 1.25; margin-bottom: 1.5cqw; }
.projection .lead.compact { font-size: 1.75cqw; }
.projection .eyebrow { font-size: 1.55cqw; margin-bottom: 1.3cqw; }
.projection .slide-section { margin-bottom: .95cqw; }
.closing-invite { margin-top: 2.6cqw; padding: 3cqw 4cqw; border: 1px solid var(--line); border-left: .45cqw solid var(--accent); border-radius: 1cqw; background: var(--panel); }
.closing-invite h1 { color: var(--accent); font-size: 7.4cqw; }
.closing-invite .lead { max-width: 42ch; margin-bottom: 0; }
.cover { padding-top: 3cqw; }
.cover.with-qr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 29cqw); gap: 5cqw; align-items: center; }
.cover h1 { font-size: 8.2cqw; max-width: 11ch; margin-top: 2.3cqw; text-wrap: balance; }
.cover-byline { color: var(--accent); font-size: 1.85cqw; font-weight: 750; margin-bottom: .75cqw; }
.cover .lead { max-width: 30ch; text-wrap: pretty; }
.brand-mark { display: inline-flex; align-items: center; padding: .7cqw 1cqw; border-radius: .75cqw; background: #faf6ec; }
.brand-mark img { display: block; width: 22cqw; height: auto; }
.join-card {
  display: grid;
  justify-items: center;
  gap: 1cqw;
  padding: 1.25cqw;
  background: #26374e;
  border: 1px solid #66758b;
  border-radius: 1cqw;
}
.join-card p { color: var(--accent); font-size: 2.1cqw; font-weight: 750; }
.join-card img { display: block; width: min(23cqw, 100%); height: auto; }
.projection .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1cqw; }
.projection .fact, .projection .question-opt {
  padding: 1cqw;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: .7cqw;
  font-size: 1.78cqw;
  line-height: 1.2;
}
.projection .question-opt { margin-bottom: .6cqw; }
.projection .columns { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2cqw; align-items: start; }
.projection .columns.single { grid-template-columns: minmax(0, 1fr); }
.projection ul { margin: 1cqw 0 0; padding-left: 2.5cqw; font-size: 2cqw; line-height: 1.24; }
.projection li { margin-bottom: .7cqw; }
.projection .case-facts-list { font-size: 2.3cqw; margin-top: 1.6cqw; }
.projection .case-facts-list li::marker { color: var(--accent); }
.projection table { width: 100%; border-collapse: collapse; font-size: 1.48cqw; line-height: 1.15; }
.projection td, .projection th { padding: .72cqw .55cqw; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.projection th { color: var(--accent); }
.projection .answer { padding: 1.2cqw 1.6cqw; background: #203b3f; border: 1px solid #709795; border-radius: .7cqw; font-size: 2.2cqw; }
.projection .answer ul { font-size: 1.8cqw; }
.projection .result { font-size: 1.68cqw; margin: 1cqw 0; }
.projection .track { height: .9cqw; }
.projection .vote-clock { color: var(--accent); font-size: 2.2cqw; font-weight: 800; margin-top: .8cqw; }
.results-panel { max-width: 70cqw; }
.projection .vote-totals { display: flex; gap: 1cqw; font-size: 1.72cqw; }
.projection .vote-totals span { padding: .46cqw .72cqw; border-radius: .48cqw; background: var(--surface); }
.projection .vote-totals b { margin-left: .35cqw; }
.projection .result-correct { color: #b7f3cf; font-weight: 700; }
.projection .result-correct .fill { background: #82d7ab; }
.projection .result-correct small { margin-left: .4cqw; font-size: .78em; }

@media (prefers-reduced-motion: reduce) { .track .fill { transition: none; } }