/* One question per screen. Works on the dashboard theme and on a conference host. */
.oq { overscroll-behavior: contain; --oq-surface: var(--surface, #fff); --oq-text: var(--text, var(--brand-text, #202225)); --oq-soft: var(--text-soft, #5b6470); --oq-line: var(--line-strong, #cfd4db); --oq-ink: var(--brand-ink, var(--accent, #e60019)); width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: 18px; background: var(--oq-surface); color: var(--oq-text); overflow: auto; }
.oq::backdrop { background: rgba(15, 23, 42, .5); }
.oq-body { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.oq-top { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--oq-soft); }
.oq-title { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.oq-count { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.oq-count + .oq-x { margin-left: 0; }
.oq-x { margin-left: auto; min-height: 44px; padding: 0 12px; border: 1px solid var(--oq-line); border-radius: 10px; background: transparent; color: var(--oq-text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.oq-bar { height: 4px; border-radius: 4px; background: var(--surface-soft, #edf0f4); overflow: hidden; }
.oq-bar span { display: block; height: 100%; background: var(--oq-ink); transform-origin: left; transition: transform 180ms cubic-bezier(.23, 1, .32, 1); }
.oq h2 { margin: 12px 0 0; font-size: 22px; line-height: 1.25; letter-spacing: -.01em; overflow-wrap: anywhere; }
.oq-optional { font-size: 15px; font-weight: 400; color: var(--oq-soft); letter-spacing: 0; }
.oq-help { margin: 0; font-size: 14px; line-height: 1.5; color: var(--oq-soft); }
.oq-input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--oq-line); border-radius: 10px; background: var(--oq-surface); color: var(--oq-text); font: inherit; font-size: 16px; }
.oq-area { min-height: 160px; resize: vertical; line-height: 1.45; }
.oq-input:focus-visible, .oq-choice:focus-visible, .oq button:focus-visible { outline: 3px solid var(--brand-accent, var(--oq-text)); outline-offset: 2px; }
.oq-choices { display: grid; gap: 8px; }
.oq-choice, .oq-primary, .oq-secondary, .oq-x { touch-action: manipulation; }
.oq-choice { display: block; width: 100%; min-height: 56px; padding: 12px 14px; border: 1px solid var(--oq-line); border-radius: 12px; background: var(--oq-surface); color: var(--oq-text); font: inherit; text-align: left; cursor: pointer; transition: border-color 140ms ease, transform 120ms ease-out; }
.oq-choice:active { transform: scale(.985); }
.oq-choice.is-selected { border-color: var(--oq-ink); box-shadow: inset 0 0 0 1px var(--oq-ink); }
.oq-choice strong { display: block; font-size: 15px; }
.oq-choice small { display: block; margin-top: 2px; font-size: 13px; color: var(--oq-soft); }
.oq-error { min-height: 20px; margin: 0; font-size: 14px; line-height: 1.4; color: var(--danger, #b42318); }
.oq footer { display: flex; justify-content: flex-end; gap: 8px; }
.oq-primary, .oq-secondary { min-height: 44px; padding: 0 18px; border-radius: 10px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: transform 120ms ease-out; }
.oq-primary { border: 1px solid var(--oq-ink); background: var(--oq-ink); color: #fff; }
.oq-primary:disabled { opacity: .7; cursor: wait; }
.oq-secondary { border: 1px solid var(--oq-line); background: transparent; color: var(--oq-text); }
.oq-primary:active:not(:disabled), .oq-secondary:active { transform: scale(.97); }
.oq-done { gap: 16px; }
.oq-done h2 { margin: 0; outline: none; }
.oq-done p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--oq-soft); white-space: pre-line; }
@media (max-width: 520px) {
  .oq-body { padding: 20px; }
  .oq h2 { font-size: 20px; }
  .oq footer > * { flex: 1 1 0; }
}
@media (prefers-reduced-motion: reduce) { .oq-bar span, .oq-choice, .oq-primary, .oq-secondary { transition: none; } }