/*
 * The agent quiz (issue #53).
 *
 * Layered on top of page.css: the quiz is a prose page, so it inherits the
 * navy background, typography, buttons, and link treatment from there and from
 * site-chrome.css. Only the pieces that page.css has no vocabulary for live
 * here — the copy-paste prompt, the scored question list, and the band table.
 * No new colors: everything below resolves to the approved palette variables.
 */

.quiz-page .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The prompt block is the point of the page, so it gets the loudest treatment
   that is still readable: a full-width tinted panel with the accent rule down
   the side. Monospace because it is meant to be selected and copied. */
.quiz-page .quiz-prompt {
    margin: 1.5rem 0;
    padding: 1.25rem 1.4rem;
    border: 1px solid rgba(99, 199, 207, 0.35);
    border-left: 4px solid var(--rad-clear-sky);
    border-radius: 10px;
    background: rgba(23, 33, 58, 0.75);
}

.quiz-page .quiz-prompt p {
    margin: 0;
    color: var(--rad-warm-cloud);
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.95rem;
    line-height: 1.7;
    user-select: all;
}

.quiz-page .quiz-dimension {
    margin: 2rem 0;
    padding: 1.25rem 1.4rem;
    border: 1px solid rgba(184, 194, 217, 0.18);
    border-radius: 12px;
    background: rgba(23, 33, 58, 0.5);
}

.quiz-page .quiz-dimension h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
    margin-top: 0;
}

.quiz-page .quiz-points {
    color: var(--rad-mist-gray);
    font-size: 0.8rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.quiz-page .quiz-blurb {
    margin-top: 0;
    color: var(--rad-mist-gray);
}

.quiz-page .quiz-questions {
    margin: 0;
    padding-left: 1.4rem;
}

.quiz-page .quiz-questions > li {
    margin-bottom: 1.4rem;
}

.quiz-page .quiz-questions > li:last-child {
    margin-bottom: 0;
}

.quiz-page .quiz-question {
    margin: 0 0 0.5rem;
    color: var(--rad-warm-cloud);
    font-weight: 600;
}

/* The 0 and 5 anchors are what keep two different models scoring the same
   person within a few points of each other, so they are shown, not buried. */
.quiz-page .quiz-anchor {
    display: flex;
    gap: 0.6rem;
    margin: 0.3rem 0;
    color: var(--rad-mist-gray);
    font-size: 0.95rem;
}

.quiz-page .quiz-score {
    flex: 0 0 auto;
    min-width: 1.5rem;
    padding: 0 0.35rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.5rem;
    text-align: center;
}

.quiz-page .quiz-score-low {
    background: rgba(184, 194, 217, 0.18);
    color: var(--rad-mist-gray);
}

.quiz-page .quiz-score-high {
    background: rgba(99, 199, 207, 0.2);
    color: var(--rad-clear-sky);
}

.quiz-page .quiz-bands {
    width: 100%;
    margin: 1.25rem 0 2rem;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.quiz-page .quiz-bands th,
.quiz-page .quiz-bands td {
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid rgba(184, 194, 217, 0.18);
    text-align: left;
    vertical-align: top;
}

.quiz-page .quiz-bands th {
    color: var(--rad-mist-gray);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.quiz-page .quiz-band-range {
    color: var(--rad-mist-gray);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.quiz-page .quiz-band-name {
    color: var(--rad-summit-blue);
    font-weight: 600;
    white-space: nowrap;
}

/* The next rung is the useful half of the band, so it gets its own line rather
   than trailing off the end of the bottleneck sentence. */
.quiz-page .quiz-next-rung {
    display: block;
    margin-top: 0.4rem;
    color: var(--rad-clear-sky);
}

.quiz-page .quiz-next-rung strong {
    color: var(--rad-warm-cloud);
}

/* The scorecard is a fixed-width artifact — let it scroll sideways on a phone
   rather than reflow into something that no longer lines up. */
.quiz-page .quiz-output {
    margin: 1rem 0 2rem;
    padding: 1.1rem 1.25rem;
    overflow-x: auto;
    border: 1px solid rgba(184, 194, 217, 0.2);
    border-radius: 10px;
    background: rgba(11, 16, 32, 0.85);
    color: var(--rad-mist-gray);
    font-size: 0.9rem;
    line-height: 1.6;
}

.quiz-page .quiz-output code {
    background: none;
    color: inherit;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (max-width: 560px) {
    .quiz-page .quiz-dimension,
    .quiz-page .quiz-prompt {
        padding: 1rem;
    }

    .quiz-page .quiz-bands {
        font-size: 0.9rem;
    }
}