/* ============================================================================
   QuickPoll app styles.
   Brand colors per VIP Brand Guide v2.3 r3 — values bound to brand-tokens.json
   (--vipmtginc-* names). Bulma 1.0 is re-themed via its HSL component vars
   using the canonical bulma_mapping block; invert overrides per swift-newt's
   verified gotcha (Bulma's fixed 6% invert breaks on dark bases). Contrast
   rulings per clear-crab 2026-06-10 (all ratios computed).
   ========================================================================== */

/* Brand palette + Bulma HSL triples: GENERATED from the vendored
   assets/brand/brand-tokens.json by cli/gen-brand-css.php. Regenerate on a
   brand bump; never hand-edit brand-tokens.css. */
@import url("brand-tokens.css");

/* ---- self-hosted brand fonts (assets/fonts/, latin woff2 — no font CDN) ----
   Inter = display (wordmark, stat numbers) · Mukta = body (the guide's free
   substitute for Gibson) · Roboto Condensed = eyebrows/labels. */

@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('/assets/fonts/inter-v20-latin-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap;
    src: url('/assets/fonts/inter-v20-latin-800.woff2') format('woff2');
}
@font-face {
    font-family: 'Mukta'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('/assets/fonts/mukta-v17-latin-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Mukta'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('/assets/fonts/mukta-v17-latin-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto Condensed'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('/assets/fonts/roboto-condensed-v31-latin-700.woff2') format('woff2');
}

:root {
    /* Brand palette + Bulma HSL component triples + AA invert guards are
       GENERATED from brand-tokens.json into brand-tokens.css (@import above).
       Do not hand-add hex here — change the token file and regenerate. */

    /* Typography tokens (brand stacks; Inter/Mukta/RobotoCond self-hosted) */
    --vipmtginc-inter: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --vipmtginc-sans: 'Gibson', 'Mukta', 'Segoe UI', system-ui, sans-serif;
    --vipmtginc-cond: 'Roboto Condensed', 'Arial Narrow', sans-serif;

    /* Brand families into Bulma's stacks */
    --bulma-body-family: var(--vipmtginc-sans);
    --bulma-title-family: var(--vipmtginc-inter);
}

/* Native controls ignore Bulma vars — and they ARE the voting UI (swift-newt). */
input[type="checkbox"], input[type="radio"] { accent-color: var(--vipmtginc-poseidon); }

/* ---- branded site header / footer (Poseidon bands, centered) -------------- */

.qp-site-header {
    background: var(--vipmtginc-poseidon);
    padding: 0.9rem 1.5rem;
    text-align: center;
}
.qp-site-brand { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; }
.qp-site-eyebrow {
    font-family: var(--vipmtginc-cond);
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
    font-size: 0.72rem; color: var(--vipmtginc-blizzard);
}
.qp-site-wordmark {
    font-family: var(--vipmtginc-inter);
    font-weight: 700; font-size: 1.5rem; color: #fff; line-height: 1.2;
}
.qp-site-brand:hover .qp-site-wordmark { color: var(--vipmtginc-blizzard); }

.qp-site-footer {
    background: var(--vipmtginc-poseidon);
    color: #fff; text-align: center;
    padding: 2rem 1.5rem; margin-top: 2.5rem;
}
.qp-site-footer img { display: block; margin: 0 auto 0.75rem; } /* white mark @120px (guide minimum — never smaller) */
.qp-footer-line { color: #fff; margin-bottom: 0.4rem; }
.qp-footer-diag { color: var(--vipmtginc-blizzard); font-size: 0.85rem; }
.qp-footer-diag span[title] { cursor: help; }
.qp-stage-body .qp-site-footer { margin-top: 0; } /* stage is already Poseidon — footer blends in */
.qp-error-main { max-width: 720px; margin: 0 auto; padding: 3rem 1.5rem; }

/* ---- shared chrome ------------------------------------------------------- */

body { font-family: var(--vipmtginc-sans); background: var(--vipmtginc-ocean-05); }
.title, .qp-question-text, .qp-stage-title { font-family: var(--vipmtginc-inter); font-weight: 700; }

/* Bulma's .container:not(.is-max-*) media rules out-specify a bare class —
   hence the !important (verified live: 1152px was winning over 720px). */
.container.qp-narrow { max-width: 720px !important; }
.qp-narrow { max-width: 720px; margin: 0 auto; }

.qp-muted { color: var(--vipmtginc-hush-aa); font-size: 0.85em; font-weight: normal; }
.qp-submit-row { margin-top: 1.5rem; }
.qp-share-url { margin: 0.75rem 0; font-size: 1.15rem; word-break: break-all; }
.qp-question-block legend, .qp-question-block .label { margin-bottom: 0.4rem; }
.qp-question-meta { flex-wrap: wrap; gap: 0.75rem; }
.qp-remove-wrap { align-self: flex-end; margin-left: auto; }

/* Condensed uppercase section eyebrow (on-white) */
.qp-eyebrow {
    font-family: var(--vipmtginc-cond);
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
    font-size: 0.72rem; color: var(--vipmtginc-blue-chip);
    display: block; margin-bottom: 0.35rem;
}

/* Cards: hairline rule + soft shadow instead of Bulma's heavy default */
.box {
    border: 1px solid var(--vipmtginc-rule);
    box-shadow: 0 1px 3px rgba(19, 55, 94, 0.06);
}

/* Notification tints from the token wash set (always-AA pairs) */
.notification.is-danger  { background: var(--vipmtginc-error-05); color: #7C3413; }
.notification.is-warning { background: var(--vipmtginc-gold-05); color: #6B4A0B; }
.notification.is-success { background: var(--vipmtginc-success-tint); color: var(--vipmtginc-success); }
.notification.is-info    { background: var(--vipmtginc-ocean-05); color: var(--vipmtginc-blue-chip); }

/* Form focus: Ocean ring (the token's stated focus-ring use) */
.input:focus, .textarea:focus, .select select:focus {
    border-color: var(--vipmtginc-ocean);
    box-shadow: 0 0 0 0.125em rgba(0, 156, 208, 0.25);
}

/* Minimal form fallback so pages stay usable if Bulma ever fails to load.
   :where() keeps these at ZERO specificity so Bulma's own control styling
   always wins when present — unscoped versions of these rules were overriding
   Bulma's select padding/line-height and clipping dropdown text. */
:where(.input, .textarea, .select select) {
    width: 100%; padding: 0.5rem 0.75rem; border: 1px solid #d1d5db;
    border-radius: 6px; font: inherit;
}
:where(.select select) { width: auto; }
:where(.button) { cursor: pointer; border-radius: 6px; border: 1px solid transparent; padding: 0.5rem 1rem; font: inherit; }
:where(.notification) { border-radius: 6px; padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
:where(.label) { display: block; font-weight: 600; }
:where(.field) { margin-bottom: 1rem; }

/* ---- landing page --------------------------------------------------------- */

.qp-hero {
    background: var(--vipmtginc-poseidon);
    color: #fff; text-align: center;
    padding: 3rem 1.5rem 3.25rem;
}
.qp-hero h1 {
    font-family: var(--vipmtginc-inter); font-weight: 700; /* guide display weight */
    font-size: 2.6rem; color: #fff; margin: 0 0 0.75rem; line-height: 1.15;
}
.qp-hero p { color: var(--vipmtginc-blizzard); font-size: 1.2rem; max-width: 640px; margin: 0 auto; }

.qp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.5rem 0; }
@media (max-width: 768px) { .qp-steps { grid-template-columns: 1fr; } }
.qp-step { text-align: left; }
.qp-step-num {
    /* Ocean numeral: WHITE card only + display-sized (clear-crab: 3.15:1 passes
       the LARGE bar on white; fails on the wash — never move these off .box). */
    font-family: var(--vipmtginc-inter); font-weight: 700;
    font-size: 2.5rem; line-height: 1; color: var(--vipmtginc-ocean);
    display: block; margin-bottom: 0.5rem;
}
.qp-step h3 { font-family: var(--vipmtginc-inter); font-weight: 700; font-size: 1.05rem; margin-bottom: 0.4rem; }
.qp-step p { color: #363636; font-size: 0.95rem; }

/* ---- create form ----------------------------------------------------------- */

.qp-q-chip {
    display: inline-block;
    font-family: var(--vipmtginc-cond); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.7rem;
    background: var(--vipmtginc-ocean-05); color: var(--vipmtginc-blue-chip);
    border: 1px solid var(--vipmtginc-rule);
    border-radius: 999px; padding: 0.15rem 0.75rem; margin-bottom: 0.6rem;
}
.qp-q-counter { color: var(--vipmtginc-hush-aa); font-size: 0.85rem; margin-left: 0.5rem; }
.qp-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1.5rem; }
@media (max-width: 600px) { .qp-settings-grid { grid-template-columns: 1fr; } }

/* Browsers render <legend> ON the fieldset border line by default, leaving
   question titles floating half-outside their card — pull them into normal
   flow inside the box. (float:left opts out of the special legend rendering.) */
fieldset.box legend { float: left; width: 100%; margin-bottom: 0.6rem; }
fieldset.box legend + * { clear: both; }

/* ---- voting page ----------------------------------------------------------- */

.qp-choice {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.8rem 0.9rem; margin: 0.45rem 0;
    border: 2px solid var(--vipmtginc-rule); border-radius: 8px;
    font-size: 1.05rem; cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.qp-choice:hover { border-color: var(--vipmtginc-ocean); }
.qp-choice:focus-within { box-shadow: 0 0 0 0.125em rgba(0, 156, 208, 0.25); }

/* Selected state: AA wash pattern (Ink on ocean_05 12.07; Blue Chip border
   ≥3:1 on both grounds) + NON-COLOR cues (checkmark + weight) per WCAG 1.4.1. */
.qp-choice:has(input:checked) {
    background: var(--vipmtginc-ocean-05);
    border-color: var(--vipmtginc-blue-chip);
}
.qp-choice:has(input:checked) span { font-weight: 600; }
.qp-choice:has(input:checked)::after {
    content: "✓"; margin-left: auto;
    color: var(--vipmtginc-blue-chip); font-weight: 700;
}
fieldset[disabled] .qp-choice { opacity: 0.5; cursor: not-allowed; }

/* ---- share / created page --------------------------------------------------- */

.qp-qr-card img { border: 1px solid var(--vipmtginc-rule); border-radius: 8px; padding: 0.5rem; background: #fff; }

/* ---- results stage (projection-optimized: large type, high contrast) ----- */

.qp-stage-body { background: var(--vipmtginc-poseidon); margin: 0; }
.qp-stage {
    max-width: 1100px; margin: 0 auto; padding: 2.5rem 2rem;
    color: #fff; font-size: 1.15rem;
}
.qp-stage-banner {
    background: var(--vipmtginc-success); color: #fff; /* white on Evergreen — AA */
    padding: 0.9rem 1.25rem; border-radius: 8px; margin-bottom: 1.5rem;
    font-size: 1.3rem; font-weight: 600;
}
.qp-stage-title { color: #fff; font-size: 3rem; font-weight: 800; margin: 0 0 0.5rem; }
.qp-stage-meta { color: var(--vipmtginc-blizzard); font-size: 1.3rem; display: flex; gap: 1.25rem; align-items: center; }
.qp-status-pill {
    border: 2px solid var(--vipmtginc-blizzard); border-radius: 999px;
    padding: 0.15rem 0.9rem; font-weight: 700; letter-spacing: 0.08em;
}
.qp-status-pill.is-open { border-color: var(--vipmtginc-success); background: var(--vipmtginc-success); color: #fff; }

/* Screenshare join card: white panel (QR needs a light quiet zone) + short URL */
.qp-stage-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; }
.qp-stage-headline { min-width: 0; }
.qp-stage-share {
    background: #fff; border-radius: 10px;
    padding: 1rem 1.25rem; text-align: center; flex-shrink: 0;
}
.qp-stage-share-label {
    display: block;
    font-family: var(--vipmtginc-cond); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem;
    color: var(--vipmtginc-blue-chip); margin-bottom: 0.4rem;
}
.qp-stage-share img { display: block; margin: 0 auto; }
.qp-stage-share-url {
    display: block; margin-top: 0.5rem;
    font-family: var(--vipmtginc-inter); font-weight: 700; font-size: 1.05rem;
    color: var(--vipmtginc-poseidon); word-break: break-all;
}
@media (max-width: 900px) {
    .qp-stage-header { flex-direction: column; }
    .qp-stage-share { align-self: center; }
}

/* Presenter carousel (progressive enhancement: slides stack without JS) */
.qp-carousel-on .qp-slide { display: none; }
.qp-carousel-on .qp-slide.is-active { display: block; }
.qp-intro-desc {
    color: #fff; font-size: 1.7rem; line-height: 1.5;
    max-width: 850px; margin: 2rem auto 0; text-align: center;
}
.qp-intro-share { margin: 2rem auto 0; width: fit-content; padding: 1.5rem 2rem; }
.qp-intro-share .qp-stage-share-url { font-size: 1.4rem; }
.qp-carousel-nav { display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin-top: 2.5rem; }
.qp-carousel-btn {
    background: transparent; border: 2px solid var(--vipmtginc-blizzard); color: #fff;
    border-radius: 999px; width: 3.2rem; height: 3.2rem;
    font-size: 1.8rem; line-height: 1; cursor: pointer;
}
.qp-carousel-btn:hover:not(:disabled) { background: var(--vipmtginc-blizzard); color: var(--vipmtginc-poseidon); }
.qp-carousel-btn:disabled { opacity: 0.35; cursor: default; }
.qp-carousel-pos { color: var(--vipmtginc-blizzard); font-size: 1.2rem; min-width: 4.5rem; text-align: center; }

.qp-question { margin-top: 2.5rem; }
.qp-question-text { color: #fff; font-size: 2.2rem; font-weight: 700; margin-bottom: 1rem; }

.qp-bar-row { margin-bottom: 1.1rem; }
.qp-bar-label {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 0.3rem; /* labels OUTSIDE the bar (brand ruling) */
}
.qp-bar-track { border-radius: 8px; overflow: hidden; }
.qp-bar {
    background: var(--vipmtginc-ocean); /* Ocean fill — large/display content only */
    border-radius: 8px;
    display: flex; align-items: center; justify-content: flex-end;
    transition: width 0.6s ease;
    min-width: 0;
}
.qp-bar-pct { font-family: var(--vipmtginc-inter); color: #fff; font-weight: 800; padding: 0 0.75rem; white-space: nowrap; }
.qp-bar-row.is-winner .qp-bar { background: var(--vipmtginc-success); } /* white on Evergreen fill */

/* Dark stage (projector) sizing + colors */
.qp-stage .qp-bar-label { color: #fff; font-size: 1.4rem; }
.qp-stage .qp-bar-votes { color: var(--vipmtginc-blizzard); font-size: 1.2rem; }
.qp-stage .qp-bar-track { background: rgba(255, 255, 255, 0.12); min-height: 3rem; }
.qp-stage .qp-bar { min-height: 3rem; }
.qp-stage .qp-bar-pct { font-size: 1.8rem; } /* big display number on Ocean — allowed */
.qp-stage .qp-bar-row.is-winner .qp-option-text::after {
    content: " ✓ leading"; color: var(--vipmtginc-blizzard); font-size: 1.05rem;
}

/* Manage dashboard (on white) variant of the same bars */
.qp-manage-live .qp-bar-label { color: #363636; font-size: 1rem; }
.qp-manage-live .qp-bar-votes { color: var(--vipmtginc-blue-chip); }
.qp-manage-live .qp-bar-track { background: #eef1f4; min-height: 1.8rem; }
.qp-manage-live .qp-bar { min-height: 1.8rem; }
.qp-manage-live .qp-bar-pct { font-size: 1rem; }
.qp-manage-live .qp-question { margin-top: 1.25rem; }
.qp-manage-live .qp-bar-row.is-winner .qp-option-text::after {
    content: " ✓ leading"; color: var(--vipmtginc-success); font-size: 0.9rem;
}
.qp-action-gap { margin-top: 0.6rem; }

/* Admin area */
.qp-admin-nav {
    display: flex; align-items: center; gap: 1.1rem;
    background: var(--vipmtginc-poseidon); color: #fff; padding: 0.8rem 1.5rem;
}
.qp-admin-nav a { color: var(--vipmtginc-blizzard); text-decoration: none; }
.qp-admin-nav a.is-active, .qp-admin-nav a:hover { color: #fff; }
.qp-admin-brand {
    display: flex; flex-direction: column; line-height: 1.15;
    font-family: var(--vipmtginc-inter); font-weight: 700;
}
.qp-admin-brand .qp-site-eyebrow { font-size: 0.62rem; }
.qp-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.qp-stat-number { font-family: var(--vipmtginc-inter); font-size: 2.2rem; font-weight: 800; color: var(--vipmtginc-blue-chip); }
.qp-admin-actions form { display: inline-flex; gap: 0.3rem; }
.qp-admin-pages a, .qp-admin-pages strong { margin-right: 0.5rem; }
.qp-admin-cap { max-width: 7rem; }
.qp-admin-stat-q { margin-top: 0.75rem; }
.table thead th { position: sticky; top: 0; background: #fff; z-index: 1; }
.table tbody tr:hover { background: var(--vipmtginc-ocean-05); }

/* Free-text answer lists (results stage + dashboard) */
.qp-answers { list-style: none; margin: 0; padding: 0; }
.qp-answers li {
    border-radius: 8px; padding: 0.6rem 0.9rem; margin-bottom: 0.5rem;
    overflow-wrap: anywhere;
}
.qp-stage .qp-answers-count { color: var(--vipmtginc-blizzard); font-size: 1.2rem; }
.qp-stage .qp-answers li { background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 1.4rem; }
.qp-manage-live .qp-answers-count { color: var(--vipmtginc-blue-chip); }
.qp-manage-live .qp-answers li { background: #eef1f4; color: #363636; }