/**
 * SponsorPulse.
 *
 * Two audiences, one stylesheet: an organiser on a laptop running the event,
 * and an attendee on a phone who scanned a code and will be here for ten
 * minutes. The attendee side is sized for a thumb at arm's length — nothing
 * interactive is under 44px, and the answer buttons are deliberately large.
 *
 * Written with logical properties (inline-start, margin-inline) throughout, so
 * Arabic and Hebrew mirror correctly from the `dir` attribute alone rather than
 * needing a second stylesheet.
 */

.sp {
    --sp-accent: var(--brand, #5d60ef);
    --sp-accent-ink: color-mix(in oklab, var(--sp-accent) 70%, white);
    min-height: 100vh;
    background: var(--bg, #0b1120);
    color: var(--text-body, #c4cede);
    font-family: var(--font-sans, Inter, system-ui, sans-serif);
}

/* ---------- brand header ---------- */
.sp-brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3, .75rem);
    padding: var(--sp-3, .75rem) var(--sp-4, 1rem);
    border-block-end: 1px solid var(--border, rgba(148, 163, 184, .14));
    background: var(--surface-1, #101827);
}
.sp-brand__logo {
    inline-size: 36px; block-size: 36px;
    border-radius: var(--r-md, 8px);
    object-fit: contain;
    background: var(--surface-2, #16203a);
    flex-shrink: 0;
}
.sp-brand__text { display: flex; flex-direction: column; min-inline-size: 0; }
.sp-brand__name {
    font-size: var(--fs-md, .875rem); font-weight: 700;
    color: var(--text, #eef2f8);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-brand__event { font-size: var(--fs-xs, .75rem); color: var(--text-muted, #8a97ab); }
.sp-brand__spacer { flex: 1; }

/* ---------- attendee ---------- */
.sp-stage {
    max-inline-size: 34rem;
    margin-inline: auto;
    padding: var(--sp-4, 1rem);
    display: flex; flex-direction: column; gap: var(--sp-4, 1rem);
}
.sp-prompt {
    font-size: var(--fs-xl, 1.375rem);
    line-height: var(--lh-snug, 1.35);
    font-weight: 700;
    color: var(--text, #eef2f8);
    text-wrap: pretty;
}
.sp-options { display: flex; flex-direction: column; gap: var(--sp-3, .75rem); }
.sp-option {
    display: flex; align-items: center; gap: var(--sp-3, .75rem);
    min-block-size: 56px;                 /* a thumb, not a cursor */
    padding: var(--sp-3, .75rem) var(--sp-4, 1rem);
    border: 1px solid var(--border-strong, rgba(148, 163, 184, .28));
    border-radius: var(--r-lg, 12px);
    background: var(--surface-1, #101827);
    color: var(--text, #eef2f8);
    font-size: var(--fs-base, 1rem);
    font-weight: 600;
    text-align: start;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}
.sp-option:hover:not(:disabled) { border-color: var(--sp-accent); }
.sp-option:active:not(:disabled) { transform: scale(.99); }
.sp-option[aria-pressed="true"] {
    border-color: var(--sp-accent);
    background: color-mix(in oklab, var(--sp-accent) 18%, var(--surface-1, #101827));
}
.sp-option:disabled { opacity: .75; cursor: default; }
.sp-option__key {
    inline-size: 28px; block-size: 28px; flex-shrink: 0;
    display: grid; place-items: center;
    border-radius: 999px;
    background: var(--surface-2, #16203a);
    font-size: var(--fs-xs, .75rem); font-weight: 700;
}
.sp-option__label { flex: 1; min-inline-size: 0; }
.sp-option__bar {
    position: absolute; inset-inline-start: 0; inset-block-end: 0;
    block-size: 3px; background: var(--sp-accent);
    transition: inline-size 300ms ease;
}
.sp-option--result { position: relative; overflow: hidden; }
.sp-option--correct { border-color: var(--success, #34d399); }
.sp-option--wrong { border-color: var(--danger, #f87171); }
.sp-option__count {
    font-size: var(--fs-sm, .8125rem);
    color: var(--text-muted, #8a97ab);
    font-variant-numeric: tabular-nums;
}

.sp-timer {
    display: flex; align-items: center; gap: var(--sp-2, .5rem);
    font-size: var(--fs-sm, .8125rem);
    color: var(--text-muted, #8a97ab);
    font-variant-numeric: tabular-nums;
}
.sp-timer__track {
    flex: 1; block-size: 6px; border-radius: 999px;
    background: var(--surface-2, #16203a); overflow: hidden;
}
.sp-timer__fill {
    block-size: 100%; background: var(--sp-accent);
    transition: inline-size 1s linear;
}
.sp-timer--urgent .sp-timer__fill { background: var(--warning, #fbbf24); }

.sp-empty {
    padding: var(--sp-12, 3rem) var(--sp-4, 1rem);
    text-align: center;
    color: var(--text-muted, #8a97ab);
}

/* ---------- leaderboard ---------- */
.sp-board { display: flex; flex-direction: column; gap: var(--sp-2, .5rem); }
.sp-board__row {
    display: flex; align-items: center; gap: var(--sp-3, .75rem);
    padding: var(--sp-2, .5rem) var(--sp-3, .75rem);
    border-radius: var(--r-md, 8px);
    background: var(--surface-1, #101827);
    font-size: var(--fs-md, .875rem);
}
.sp-board__row--me {
    background: color-mix(in oklab, var(--sp-accent) 16%, var(--surface-1, #101827));
    border: 1px solid var(--sp-accent);
}
.sp-board__rank {
    inline-size: 26px; text-align: center;
    color: var(--text-muted, #8a97ab);
    font-variant-numeric: tabular-nums;
}
.sp-board__name { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-board__points { font-weight: 700; color: var(--text, #eef2f8); font-variant-numeric: tabular-nums; }

/* ---------- questions ---------- */
.sp-questions { display: flex; flex-direction: column; gap: var(--sp-2, .5rem); }
.sp-question {
    display: flex; align-items: flex-start; gap: var(--sp-3, .75rem);
    padding: var(--sp-3, .75rem);
    border-radius: var(--r-md, 8px);
    background: var(--surface-1, #101827);
    border: 1px solid var(--border, rgba(148, 163, 184, .14));
}
.sp-question--pinned { border-color: var(--sp-accent); }
.sp-question__body { flex: 1; min-inline-size: 0; }
.sp-question__text { color: var(--text, #eef2f8); font-size: var(--fs-md, .875rem); text-wrap: pretty; }
.sp-question__meta { font-size: var(--fs-xs, .75rem); color: var(--text-muted, #8a97ab); margin-block-start: 2px; }
.sp-upvote {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-inline-size: 48px; min-block-size: 48px;
    border-radius: var(--r-md, 8px);
    border: 1px solid var(--border-strong, rgba(148, 163, 184, .28));
    background: transparent; color: var(--text-body, #c4cede);
    cursor: pointer; font-variant-numeric: tabular-nums;
}
.sp-upvote[aria-pressed="true"] { border-color: var(--sp-accent); color: var(--sp-accent-ink); }

/* ---------- sponsor ---------- */
.sp-sponsor {
    display: flex; align-items: center; gap: var(--sp-3, .75rem);
    padding: var(--sp-3, .75rem) var(--sp-4, 1rem);
    border-radius: var(--r-lg, 12px);
    background: var(--surface-1, #101827);
    border: 1px solid var(--border, rgba(148, 163, 184, .14));
}
.sp-sponsor__logo { inline-size: 40px; block-size: 40px; object-fit: contain; flex-shrink: 0; }
.sp-sponsor__body { flex: 1; min-inline-size: 0; }
.sp-sponsor__label {
    font-size: var(--fs-xs, .75rem); letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-muted, #8a97ab);
}
.sp-sponsor__offer { color: var(--text, #eef2f8); font-size: var(--fs-md, .875rem); font-weight: 600; }

/* ---------- host console ---------- */
.sp-host {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: var(--sp-4, 1rem);
    padding: var(--sp-4, 1rem);
    align-items: start;
}
@media (max-width: 900px) { .sp-host { grid-template-columns: minmax(0, 1fr); } }

.sp-panel {
    background: var(--surface-1, #101827);
    border: 1px solid var(--border, rgba(148, 163, 184, .14));
    border-radius: var(--r-lg, 12px);
    padding: var(--sp-4, 1rem);
    display: flex; flex-direction: column; gap: var(--sp-3, .75rem);
}
.sp-panel__title {
    font-size: var(--fs-xs, .75rem); font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-muted, #8a97ab);
}
.sp-field { display: flex; flex-direction: column; gap: var(--sp-1, .25rem); }
.sp-field label { font-size: var(--fs-sm, .8125rem); color: var(--text-muted, #8a97ab); }
.sp-field input[type="text"],
.sp-field input[type="email"],
.sp-field input[type="date"],
.sp-field textarea,
.sp-field select {
    min-block-size: 44px;
    padding: var(--sp-2, .5rem) var(--sp-3, .75rem);
    border-radius: var(--r-md, 8px);
    border: 1px solid var(--border-strong, rgba(148, 163, 184, .28));
    background: var(--surface-2, #16203a);
    color: var(--text, #eef2f8);
    font: inherit;
    font-size: var(--fs-md, .875rem);
}
.sp-field textarea { min-block-size: 72px; resize: vertical; }
.sp-row { display: flex; gap: var(--sp-2, .5rem); flex-wrap: wrap; }
.sp-row > * { flex: 1; min-inline-size: 0; }

.sp-qr { display: flex; align-items: center; gap: var(--sp-4, 1rem); flex-wrap: wrap; }
.sp-qr canvas, .sp-qr svg {
    inline-size: 148px; block-size: 148px;
    background: #fff; border-radius: var(--r-md, 8px); padding: 8px;
}
.sp-qr__link {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--fs-xs, .75rem);
    color: var(--text-body, #c4cede);
    word-break: break-all;
}

.sp-mod { display: flex; gap: var(--sp-1, .25rem); flex-wrap: wrap; }
.sp-mod button { min-block-size: 32px; padding-inline: var(--sp-2, .5rem); font-size: var(--fs-xs, .75rem); }

.sp-stat { display: flex; flex-direction: column; }
.sp-stat__value {
    font-size: var(--fs-2xl, 1.75rem); font-weight: 700;
    color: var(--text, #eef2f8); font-variant-numeric: tabular-nums;
}
.sp-stat__label { font-size: var(--fs-xs, .75rem); color: var(--text-muted, #8a97ab); }
.sp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3, .75rem); }

.sp-consent {
    display: flex; align-items: flex-start; gap: var(--sp-3, .75rem);
    padding: var(--sp-3, .75rem);
    border-radius: var(--r-md, 8px);
    background: var(--surface-1, #101827);
}
.sp-consent input[type="checkbox"] { inline-size: 22px; block-size: 22px; margin-block-start: 2px; flex-shrink: 0; }
.sp-consent__text { font-size: var(--fs-sm, .8125rem); }
.sp-privacy { font-size: var(--fs-xs, .75rem); color: var(--text-muted, #8a97ab); line-height: var(--lh-body, 1.65); }

.sp-toast {
    position: fixed; inset-block-end: var(--sp-4, 1rem);
    inset-inline-start: 50%; transform: translateX(-50%);
    padding: var(--sp-2, .5rem) var(--sp-4, 1rem);
    border-radius: 999px;
    background: var(--surface-3, #1e2a3d);
    color: var(--text, #eef2f8);
    font-size: var(--fs-sm, .8125rem);
    box-shadow: var(--shadow-2, 0 8px 24px -8px rgba(2, 6, 23, .55));
    z-index: 60;
}
[dir="rtl"] .sp-toast { transform: translateX(50%); }

@media (prefers-reduced-motion: reduce) {
    .sp-option, .sp-timer__fill, .sp-option__bar { transition: none; }
}

/* Licence: the host's pill, and the mark an unlicensed event shows attendees. */
.pill-status { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: var(--fs-xs, .75rem); border: 1px solid var(--border, #2a3446); }
.pill-status.is-on { color: var(--success, #34d399); border-color: currentColor; }
.pill-status.is-off { color: var(--text-muted, #8a97ab); }
.sp-unlicensed { margin: 0 0 12px; text-align: center; font-size: var(--fs-xs, .75rem); color: var(--text-muted, #8a97ab); }