/* Attendee follow-along. Read-only slide view plus voting on poll slides. No controls. */
@font-face { font-family: 'Hanken Grotesk'; src: url('/fonts/hanken-grotesk-latin-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
/* impeccable-disable-next-line overused-font -- Geist Serif is Aaron's chosen headline face, same as the site and the deck. */
@font-face { font-family: 'Geist Serif'; src: url('/fonts/geist-serif-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }
:root { --display: 'Geist Serif', Georgia, serif; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; font-size: 19px; background: #ffffff; color: #000957; font-family: 'Hanken Grotesk', -apple-system, 'Helvetica Neue', Arial, sans-serif; }
#app { max-width: 720px; margin: 0 auto; min-height: 100dvh; padding: max(14px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; }
header { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #2A3170; font-variant-numeric: tabular-nums; }
#live { font-weight: 700; padding: 3px 10px; border-radius: 8px; background: #F4F7FF; }
#live.ok { color: #073ccb; }
#live.bad { background: #B42318; color: #fff; }
.slide { font-size: 19px; line-height: 1.4; display: grid; gap: 12px; }
.slide h1 { font-family: var(--display); font-weight: 400; font-size: 38px; line-height: 1.05; margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
.slide h2 { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.1; margin: 0; }
.slide h3 { font-size: 14px; margin: 0; text-transform: uppercase; letter-spacing: 0.08em; color: #073ccb; }
.slide p { margin: 0; color: #2A3170; }
.slide p.lead { font-family: var(--display); font-weight: 400; font-size: 28px; color: #000957; line-height: 1.15; }
.slide.title p.lead { font-size: 38px; }
.slide strong { color: #000957; }
.slide ul, .slide ol { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.slide blockquote { margin: 0; font-style: italic; font-size: 24px; }
.slide figure { margin: 0; }
.slide img { max-width: 100%; height: auto; }
.slide a { color: #073ccb; }
.slide .poll-hook { display: none; }
.wait { color: #AAB6DE; }
#vote { border-top: 1px solid #AAB6DE; padding-top: 14px; display: grid; gap: 10px; }
#vote[hidden] { display: none; }
#vote-q { margin: 0; font-family: var(--display); font-size: 30px; line-height: 1.1; font-weight: 400; }
#vote-options { display: grid; gap: 10px; }
#vote-options button { position: relative; overflow: hidden; align-items: center; font: inherit; font-size: 19px; font-weight: 700; text-align: left; padding: 16px 14px; border: 3px solid #000957; border-radius: 12px; background: #fff; color: #000957; display: flex; justify-content: space-between; gap: 10px; }
#vote-options button .fill { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left center; background: rgba(45, 212, 191, 0.3); transition: transform 0.5s ease; }
#vote-options button span, #vote-options button .icon { position: relative; }
#vote-options button .icon { width: 32px; height: 32px; flex: none; object-fit: contain; mix-blend-mode: multiply; }
#vote-options button .label { min-width: 0; overflow-wrap: anywhere; }
#vote-options button .n { flex: none; }
#vote-options button .label { flex: 1; }
#vote-options button.picked { border-color: #073ccb; box-shadow: inset 0 0 0 2px #073ccb; }
#vote-options button:disabled { opacity: 0.7; }
#vote-note { margin: 0; font-size: 14px; color: #2A3170; min-height: 1.2em; }
/* End-of-talk feedback form. */
#feedback { border-top: 1px solid #AAB6DE; padding-top: 14px; display: grid; gap: 14px; }
#feedback[hidden], #feedback [hidden] { display: none; }
#feedback h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1.1; }
#feedback .hint, #feedback-note { margin: 0; font-size: 14px; color: #2A3170; }
#feedback fieldset { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
#feedback legend { grid-column: 1 / -1; padding: 0 0 6px; font-weight: 700; }
#feedback #follow-up { grid-template-columns: 1fr 1fr; }
#feedback .pill { position: relative; display: block; }
#feedback .pill input { position: absolute; opacity: 0; inset: 0; }
#feedback .pill span { display: block; text-align: center; padding: 12px 0; border: 2px solid #000957; border-radius: 10px; font-weight: 700; }
#feedback .pill input:checked + span { background: #000957; color: #fff; }
#feedback .pill input:focus-visible + span { outline: 3px solid #073ccb; outline-offset: 2px; }
#feedback a { color: #073ccb; }
#feedback .block { font-weight: 700; }
#feedback textarea, #feedback input[type="text"], #feedback input[type="email"] { width: 100%; font: inherit; padding: 12px; border: 2px solid #AAB6DE; border-radius: 10px; color: #000957; background: #fff; }
#feedback #contact-fields { display: grid; gap: 8px; }
#feedback-send { font: inherit; font-weight: 800; padding: 16px; border: 0; border-radius: 12px; background: #000957; color: #fff; }
#feedback-send:disabled { opacity: 0.6; }