/* Self-test card shown under an AI answer (see quiz-card.js). Kept in its
   own file rather than appended to chat.css because the same markup is
   meant to hang off the course-lesson and past-paper tutor panels later,
   and those load their own stylesheets. */

.quiz-card {
    /* Only the hint bulb uses this — a lit bulb reads as warm, and it's the
       one spot where a bit of colour helps rather than competes. Buttons and
       tabs stay black; green and red stay reserved for right/wrong. */
    --quiz-accent: #f97316;
    margin-top: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg);
    overflow: hidden;
    animation: quiz-card-in 0.32s cubic-bezier(0.22, 0.68, 0.36, 1) both;
}

@keyframes quiz-card-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.quiz-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.quiz-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quiz-mode-switch {
    display: flex;
    flex: 0 0 auto;
    gap: 2px;
    padding: 2px;
    border-radius: 999px;
    background: var(--panel-bg);
}

.quiz-mode-btn {
    border: 0;
    padding: 5px 12px;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.quiz-mode-btn.active {
    background: var(--bg);
    color: var(--text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.quiz-card-body {
    padding: 18px 16px;
}

/* Every body swap (next question, mode switch, result screen) rebuilds the
   node, so this plays once per view rather than continuously. */
.quiz-fade-in {
    animation: quiz-fade-in 0.22s ease-out both;
}

@keyframes quiz-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

.quiz-question-text {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text);
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quiz-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    font-size: 14px;
    font-family: inherit;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}

.quiz-option:not(:disabled):hover {
    border-color: var(--text-muted);
    background: var(--panel-bg);
}

.quiz-option:disabled {
    cursor: default;
}

.quiz-option-dot {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-radius: 50%;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.quiz-option-text {
    flex: 1 1 auto;
}

.quiz-option.is-correct {
    border-color: #2e9d5b;
    background: rgba(46, 157, 91, 0.08);
}

.quiz-option.is-correct .quiz-option-dot {
    border-color: #2e9d5b;
    background: #2e9d5b;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.9);
}

/* Only the option the student actually picked reacts — the right answer
   lighting up green is information, not applause, and bouncing it when they
   got it wrong would read as celebrating the mistake. */
.quiz-option.is-correct:not(.is-dimmed):focus-visible,
.quiz-option.is-correct.was-picked {
    animation: quiz-pop 0.34s ease-out;
}

.quiz-option.is-incorrect {
    border-color: #d94a4a;
    background: rgba(217, 74, 74, 0.08);
    animation: quiz-shake 0.3s ease-out;
}

.quiz-option.is-incorrect .quiz-option-dot {
    border-color: #d94a4a;
    background: #d94a4a;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.9);
}

.quiz-option.is-dimmed {
    opacity: 0.45;
}

@keyframes quiz-pop {
    0% { transform: scale(1); }
    45% { transform: scale(1.018); }
    100% { transform: scale(1); }
}

@keyframes quiz-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    60% { transform: translateX(3px); }
}

.quiz-badge {
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.quiz-badge.is-correct {
    background: rgba(46, 157, 91, 0.14);
    color: #1f7a44;
}

.quiz-badge.is-incorrect {
    background: rgba(217, 74, 74, 0.14);
    color: #b23434;
}

/* Bulb and hint sit on one line. The text keeps its space while hidden
   rather than being collapsed, so opening a hint fades it in beside the bulb
   instead of shoving the options below it down. */
.quiz-hint {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-muted);
}

.quiz-hint-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg);
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.quiz-hint-btn:hover {
    color: var(--quiz-accent);
    border-color: var(--quiz-accent);
}

.quiz-hint-btn .quiz-icon {
    font-size: 19px;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* The bulb switching on: it warms to the accent colour, gains a soft glow
   and gives one small kick. Everything is on the open state, so closing the
   hint simply reverses it. */
.quiz-hint.is-open .quiz-hint-btn {
    color: #fff;
    border-color: transparent;
    background: var(--quiz-accent);
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.16);
}

.quiz-hint.is-open .quiz-hint-btn .quiz-icon {
    animation: quiz-bulb-on 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes quiz-bulb-on {
    0% { transform: scale(0.8) rotate(-8deg); }
    60% { transform: scale(1.16) rotate(4deg); }
    100% { transform: scale(1) rotate(0); }
}

.quiz-hint-text {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.55;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    /* visibility flips only after the fade finishes, so the hint isn't
       readable by a screen reader (or selectable) while it's invisible. */
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}

.quiz-hint.is-open .quiz-hint-text {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s;
}

.quiz-explanation {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--panel-bg);
    font-size: 13px;
    line-height: 1.6;
    color: var(--text);
}

.quiz-explanation-lead {
    margin-right: 4px;
}

.quiz-explanation-text > :first-child { margin-top: 0; }
.quiz-explanation-text > :last-child { margin-bottom: 0; }

.quiz-reveal {
    animation: quiz-reveal 0.26s ease-out both;
}

@keyframes quiz-reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

/* Flashcard: both faces stack in the same grid cell so the card can turn
   over; quiz-card.js sets the wrapper's height from the taller of the two,
   because absolutely-stacked faces give the container none of its own. */
.quiz-flip {
    position: relative;
    /* Floor, not the real height: quiz-card.js measures the taller face and
       sets an exact height. This is what the card falls back to if that
       measurement ever comes back as zero (detached or hidden at the moment
       it ran), so the worst case is a slightly short card rather than an
       invisible one. */
    min-height: 170px;
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.22, 0.68, 0.36, 1), height 0.3s ease;
    /* The card itself is the control now that the "view answer" link is gone. */
    cursor: pointer;
}

.quiz-flip:focus-visible {
    outline: 2px solid var(--text-muted);
    outline-offset: 3px;
    border-radius: 14px;
}

.quiz-flip.is-flipped {
    transform: rotateY(180deg);
}

.quiz-flip-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 28px 18px;
    border: 0;
    border-radius: 14px;
    background: var(--quiz-tint, #fdeef1);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    text-align: center;
    overflow-y: auto;
}

/* Macaron pastels, cycled per card by quiz-card.js (quiz-tint-0…4). Kept
   this light on purpose: the card carries body text, so the tint has to read
   as paper rather than as a highlight. */
.quiz-tint-0 { --quiz-tint: #fdeef2; } /* raspberry */
.quiz-tint-1 { --quiz-tint: #e8f6ef; } /* pistachio */
.quiz-tint-2 { --quiz-tint: #fdf3e0; } /* salted caramel */
.quiz-tint-3 { --quiz-tint: #f1eefb; } /* lavender */
.quiz-tint-4 { --quiz-tint: #e9f1fb; } /* blueberry */

.quiz-flip-back {
    transform: rotateY(180deg);
}

.quiz-flip-text {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text);
}

.quiz-flip-note {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
}

.quiz-flip-note > :first-child { margin-top: 0; }
.quiz-flip-note > :last-child { margin-bottom: 0; }

.quiz-card-foot {
    padding: 0 16px 14px;
}

.quiz-foot-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.quiz-count {
    font-size: 12px;
    color: var(--text-muted);
}

.quiz-nav {
    display: flex;
    gap: 8px;
}

.quiz-nav-btn {
    padding: 8px 16px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.quiz-nav-btn:hover:not(:disabled) {
    background: var(--panel-bg);
}

.quiz-nav-btn.is-primary {
    border-color: transparent;
    background: var(--text);
    color: var(--bg);
    font-weight: 600;
}

.quiz-nav-btn.is-primary:hover:not(:disabled) {
    opacity: 0.86;
    background: var(--text);
}

.quiz-nav-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.quiz-nav-btn.is-loading {
    cursor: progress;
}

.quiz-result {
    text-align: center;
}

.quiz-result-label {
    font-size: 12px;
    color: var(--text-muted);
}

.quiz-result-score {
    margin-top: 4px;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
}

.quiz-result-total {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-muted);
}

.quiz-review {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 18px 0 0;
    text-align: left;
}

.quiz-review-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.18s ease;
}

.quiz-review-row:hover {
    background: var(--panel-bg);
}

.quiz-review-row .quiz-icon {
    flex: 0 0 auto;
    font-size: 18px;
}

.quiz-review-row.is-correct .quiz-icon { color: #2e9d5b; }
.quiz-review-row.is-incorrect .quiz-icon { color: #d94a4a; }

.quiz-review-index {
    flex: 0 0 auto;
    width: 18px;
    color: var(--text-muted);
    font-size: 12px;
}

.quiz-review-text {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quiz-result-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

/* Placeholder shown between the answer finishing and the quiz arriving —
   same idea (and shimmer) as the follow-up suggestions' own skeleton. */
.quiz-skeleton {
    margin-top: 14px;
    height: 92px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: linear-gradient(90deg, var(--panel-bg) 25%, #ececef 37%, var(--panel-bg) 63%);
    background-size: 400% 100%;
    animation: quiz-skeleton-shimmer 1.4s ease infinite;
}

@keyframes quiz-skeleton-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (max-width: 720px) {
    .quiz-card-head {
        flex-wrap: wrap;
    }

    .quiz-result-actions {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .quiz-card,
    .quiz-fade-in,
    .quiz-reveal,
    .quiz-option.is-correct.was-picked,
    .quiz-option.is-incorrect,
    .quiz-hint.is-open .quiz-hint-btn .quiz-icon,
    .quiz-skeleton {
        animation: none;
    }

    /* The hint still opens and closes, it just does it at once. */
    .quiz-hint-text {
        transition: none;
    }

    /* The flip is the one piece of motion that carries meaning (which side
       am I looking at), so it degrades to a plain swap rather than being
       left mid-rotation. */
    .quiz-flip,
    .quiz-flip.is-flipped {
        transition: none;
        transform: none;
    }

    .quiz-flip.is-flipped .quiz-flip-front { visibility: hidden; }
    .quiz-flip:not(.is-flipped) .quiz-flip-back { visibility: hidden; }
    .quiz-flip-back { transform: none; }
}