.quiz-results {
    /* Dominant orange sampled from the O in assets/img/logo.png. */
    --results-section-title: #f3971b;
    --results-up: #23734f;
    --results-down: #b33954;
    --results-correct: #8fcbb2;
    --results-incorrect: #e9a2ab;
    --results-line: #236a86;
    max-width: 1040px;
    color: var(--orthogram-text);
}

[data-bs-theme="dark"] .quiz-results {
    --results-up: #9bd3b5;
    --results-down: #efa4b4;
    --results-correct: #78b99c;
    --results-incorrect: #d88898;
    --results-line: #82c8e0;
}

.results-muted, .results-eyebrow {
    color: var(--orthogram-muted);
}

.results-cards { display: grid; gap: 1.5rem; }

.results-section > summary { cursor: pointer; list-style: none; padding: .5rem 0; margin-bottom: 1rem; }
.results-section > summary::-webkit-details-marker { display: none; }
.results-section > summary:focus-visible { outline: 2px solid var(--orthogram-text); outline-offset: 4px; border-radius: .25rem; }
.results-section-title { display: flex; align-items: center; gap: .75rem; margin: 0; font-weight: 700; }
.results-section-name { color: var(--results-section-title); overflow-wrap: anywhere; }
.results-section-count { margin-left: auto; flex-shrink: 0; font: 400 .875rem var(--bs-body-font-family); color: var(--orthogram-muted); }
.results-section-chevron { width: .5rem; height: .5rem; flex: 0 0 .5rem; border-right: 2px solid var(--orthogram-muted); border-bottom: 2px solid var(--orthogram-muted); transform: rotate(-45deg); }
.results-section[open] > summary .results-section-chevron { transform: rotate(45deg); }
.results-change--up { color: var(--results-up); }
.results-change--down { color: var(--results-down); }
.results-change--stable { color: var(--orthogram-muted); }

.results-card {
    padding: 1.75rem;
    background: var(--orthogram-surface);
    border: 1px solid var(--orthogram-border);
    border-radius: 1rem;
    overflow-wrap: anywhere;
}

.results-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.results-card-description { flex: 1 1 280px; min-width: 0; }
.results-eyebrow { font-size: .875rem; margin-bottom: .75rem; }
.results-score { display: grid; gap: .125rem; text-align: right; }
.results-score strong { font-size: 2rem; line-height: 1.2; }
.results-score span { font-size: .8rem; }

.results-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.75rem;
    margin: 1.5rem 0 0;
    font-size: .875rem;
}

.results-in-progress { font-size: .875rem; margin: 1rem 0 0; }

.results-card-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    border-top: 1px solid var(--orthogram-border);
    margin-top: 1.5rem;
    padding-top: 1.5rem;
}

.results-actions { display: flex; flex-wrap: wrap; gap: .75rem; min-width: 0; }
.results-actions .btn { padding: .65rem 1rem; white-space: normal; }
.results-actions .btn-outline-secondary {
    --bs-btn-color: var(--orthogram-muted);
    --bs-btn-border-color: #6b7280;
}
.results-breakdown { display: flex; align-items: center; gap: 1rem; }
.results-ring { position: relative; width: 96px; height: 96px; flex: 0 0 96px; }
.results-ring-center { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 600; pointer-events: none; }
.results-breakdown figcaption { display: grid; gap: .5rem; font-size: .8rem; }
.results-breakdown figcaption span { display: flex; align-items: center; gap: .5rem; }
.results-swatch { width: .65rem; height: .65rem; flex: 0 0 .65rem; border-radius: 50%; }
.results-swatch-correct { background: var(--results-correct); }
.results-swatch-incorrect { background: var(--results-incorrect); }

.results-line { position: relative; height: 280px; }
.results-gain { font-size: .9rem; }
.results-table-scroll { position: relative; overflow-x: auto; }
.results-table { --bs-table-bg: transparent; --bs-table-color: var(--orthogram-text); --bs-table-border-color: var(--orthogram-border); font-size: .875rem; }
.results-table th, .results-table td { padding: .9rem .65rem; }
.results-table tbody th { font-weight: 400; }
.results-table .is-selected > * { background-color: var(--orthogram-focus-ring); }
.results-table .is-selected > :first-child { box-shadow: inset 3px 0 var(--orthogram-brand); }
.results-view-link { display: inline-flex; align-items: center; min-height: 44px; padding: .25rem .5rem; }
.results-selected { scroll-margin-top: 1rem; }
.results-selected:focus-visible, .results-table-scroll:focus-visible { outline: 2px solid var(--orthogram-brand); outline-offset: 4px; }

@media (max-width: 575.98px) {
    .results-history { padding: 1rem; }
    .results-table { min-width: 480px; }
    .results-line { height: 240px; }
}

[data-bs-theme="dark"] .results-actions .btn-dark {
    --bs-btn-bg: #f8fafc;
    --bs-btn-color: #111827;
    --bs-btn-border-color: #f8fafc;
    --bs-btn-hover-bg: #e2e8f0;
    --bs-btn-hover-color: #111827;
    --bs-btn-hover-border-color: #e2e8f0;
}

[data-bs-theme="dark"] .results-actions .btn-outline-secondary {
    --bs-btn-hover-bg: #334155;
    --bs-btn-hover-color: #f8fafc;
    --bs-btn-hover-border-color: #94a3b8;
}

@media (max-width: 575.98px) {
    .results-card { padding: 1.25rem; }
    .results-card-heading { gap: 1rem; }
    .results-card-description { flex-basis: 100%; }
    .results-score { text-align: left; }
    .results-actions { width: 100%; }
    .results-actions .btn { flex: 1 1 100%; }
    .results-breakdown { gap: .75rem; }
}