/* first-question.js — one real assessment item on a topic landing page.
   Deliberately plain and self-contained: it mounts on three pages with three different
   design systems (ifs-styles, the blueprint page's own CSS, the neurodivergence page), so it
   borrows their accent through currentColor and inherits their type rather than importing a
   fourth look. */

.fq {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.fq-lead {
    margin: 0 0 10px;
    font-size: 0.82rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.6;
}

.fq-q {
    margin: 0 0 22px;
    font-size: 1.22rem;
    line-height: 1.55;
    font-weight: 600;
}

/* Stacked on phones, flat on desktop — because the whole point of using the REAL item is
   that it reads exactly as it will on the assessment itself, and the assessment lays the
   scale out horizontally above 768px (test-flow.css, `body.test-mode .choices`). Stacking
   here on a wide screen made the landing page's version of the item look like a different
   question from the one they land on. */
.fq-choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.fq-choice {
    font: inherit;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 13px 18px;
    min-height: 48px;
    border-radius: 12px;
    color: inherit;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.14);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.06s ease;
}

.fq-choice:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.3);
}

.fq-choice:active {
    transform: translateY(1px);
}

/* Marked before navigating, so a slow load still shows which one was pressed rather than
   leaving the page looking inert. */
.fq-choice.is-chosen {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.45);
}

.fq-note {
    margin: 16px 0 0;
    font-size: 0.84rem;
    opacity: 0.55;
}

/* Number chip: the same 1-5 shortcut key the assessment shows, tinted along the
   disagree -> agree spectrum. Fixed hues rather than currentColor — the spectrum means the
   same thing on all three landing pages, and it is the one part of the item that should not
   change colour with the host page's accent. */
.fq-key {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: inherit;
    opacity: 0.85;
}

.fq-choice:nth-child(1) .fq-key { color: #f87171; border-color: rgba(248, 113, 113, 0.4); }
.fq-choice:nth-child(2) .fq-key { color: #fb923c; border-color: rgba(251, 146, 60, 0.4); }
.fq-choice:nth-child(3) .fq-key { color: #94a3b8; border-color: rgba(148, 163, 184, 0.4); }
.fq-choice:nth-child(4) .fq-key { color: #34d399; border-color: rgba(52, 211, 153, 0.4); }
.fq-choice:nth-child(5) .fq-key { color: #22c55e; border-color: rgba(34, 197, 94, 0.4); }

/* 769px, matching the assessment's own breakpoint, so the two layouts never disagree at
   any width. */
@media (min-width: 769px) {
    .fq {
        max-width: 720px;
    }

    .fq-choices {
        flex-direction: row;
        align-items: stretch;
        gap: 10px;
    }

    .fq-choice {
        flex: 1 1 0;
        min-width: 0;
        flex-direction: column;
        justify-content: flex-start;   /* chips share one top line across all five */
        text-align: center;
        gap: 10px;
        min-height: 92px;
        padding: 14px 10px 12px;
        font-size: 0.9rem;
        line-height: 1.25;
    }

    /* Label centres in the space under the chip, so 1- and 2-line labels both sit right */
    .fq-label {
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fq-choice { transition: none; }
    .fq-choice:active { transform: none; }
}