/* The overview's sharp terminal frames, shared by every page and badge. */
:root body.spectrum-ui :is(.badge, .status-pill) {
    --badge-tone: var(--lab-blue);
    max-width: 100%;
    min-height: 27px;
    padding: 3px 10px 3px 13px;
    border: 1px solid var(--badge-tone);
    border-radius: 1px;
    background: var(--lab-surface);
    box-shadow: inset 3px 0 0 var(--badge-tone);
    color: var(--badge-tone);
    font-family: var(--reader-font);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.6;
    white-space: normal;
    overflow-wrap: anywhere;
}
:root body.spectrum-ui :is(.badge, .status-pill).success { --badge-tone: var(--lab-neon); }
:root body.spectrum-ui :is(.badge, .status-pill).warning { --badge-tone: var(--lab-amber); }
:root body.spectrum-ui :is(.badge, .status-pill).error { --badge-tone: var(--lab-coral); }
:root body.spectrum-ui :is(.badge, .status-pill).neutral { --badge-tone: var(--lab-muted); }
:root body.spectrum-ui :is(.badge, .status-pill):is(.success, .warning, .error, .neutral) {
    border-color: var(--badge-tone);
    background: var(--lab-surface);
    color: var(--badge-tone);
}
:root body.spectrum-ui .lab-hero :is(.badge, .status-pill) {
    --badge-tone: var(--hero-blue);
    background: #10121b;
}
:root body.spectrum-ui .lab-hero :is(.badge, .status-pill).success { --badge-tone: var(--hero-neon); }
:root body.spectrum-ui .lab-hero :is(.badge, .status-pill).warning { --badge-tone: var(--hero-amber); }
:root body.spectrum-ui .lab-hero :is(.badge, .status-pill).error { --badge-tone: var(--hero-coral); }
:root body.spectrum-ui .lab-hero :is(.badge, .status-pill).neutral { --badge-tone: var(--hero-muted); }

/* Smaller destinations use a compact version of the same welcome canvas. */
:root body.spectrum-ui :is(.page-header:not(.test-header), .split:has(> div > h1)) {
    position: relative;
    min-width: 0;
    padding: clamp(20px, 3vw, 34px);
    border: 1px solid #303540;
    border-radius: 2px;
    background-color: #090b10;
    background-image: linear-gradient(90deg, rgba(0,245,138,.055) 1px, transparent 1px),
        linear-gradient(rgba(0,245,138,.055) 1px, transparent 1px),
        radial-gradient(ellipse at 0 0, rgba(58,122,255,.12), transparent 65%),
        radial-gradient(ellipse at 100% 100%, rgba(243,81,215,.10), transparent 65%);
    background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%;
    box-shadow: inset 0 2px 0 var(--hero-cyan);
    color: var(--hero-ink);
}
:root body.spectrum-ui :is(.page-header:not(.test-header), .split:has(> div > h1)) h1 {
    margin-bottom: 10px;
    color: var(--hero-ink);
    font-family: "Arial Black", "Avenir Next", Arial, sans-serif;
    font-size: clamp(26px, 3.3vw, 45px);
    line-height: 1.16;
    letter-spacing: -.035em;
}
:root body.spectrum-ui :is(.page-header:not(.test-header), .split:has(> div > h1)) :is(.muted, .subtle) { color: var(--hero-muted); }
:root body.spectrum-ui :is(.page-header:not(.test-header), .split:has(> div > h1)) .eyebrow { color: var(--hero-neon); }
:root body.spectrum-ui :is(.page-header:not(.test-header), .split:has(> div > h1)) > :is(a, .text-link) { color: var(--hero-cyan); }
:root body.spectrum-ui :is(.page-header:not(.test-header), .split:has(> div > h1)) .button.secondary {
    border-color: var(--hero-cyan);
    color: var(--hero-cyan);
}
:root body.spectrum-ui :is(.page-header:not(.test-header), .split:has(> div > h1)) :focus-visible { outline-color: var(--hero-neon); }

/* The leaderboard now uses the overview grid instead of the old blue wave. */
:root body.spectrum-ui .leaderboard-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(230px, .4fr);
    min-height: 370px;
    gap: clamp(24px, 4vw, 54px);
}
:root body.spectrum-ui .leaderboard-hero .lab-heading {
    font-size: clamp(32px, 5.4vw, 76px);
    line-height: 1.03;
    letter-spacing: -.045em;
}
:root body.spectrum-ui .leaderboard-hero .hero-copy { max-width: none; }
:root body.spectrum-ui .lab-metric-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-self: stretch;
    justify-content: flex-start;
    min-width: 0;
    max-width: none;
    padding: 22px;
    border: 1px solid #3c4150;
    border-radius: 0;
    background: linear-gradient(135deg, rgba(121,170,255,.055), transparent 70%), #0e1018;
    box-shadow: inset 0 2px 0 var(--hero-pink);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-align: start;
}
:root body.spectrum-ui .lab-metric-panel::after {
    content: "";
    position: absolute;
    inset: auto -1px -1px auto;
    width: 22px;
    height: 22px;
    border: solid var(--hero-cyan);
    border-width: 0 2px 2px 0;
    pointer-events: none;
}
:root body.spectrum-ui .metric-panel-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    padding-bottom: 16px;
    border-bottom: 1px solid #303540;
}
:root body.spectrum-ui .metric-panel-header span,
:root body.spectrum-ui .metric-panel-footer span {
    color: var(--hero-pink);
    font: 10px/1.5 var(--terminal-font);
    letter-spacing: 1px;
}
:root body.spectrum-ui .metric-panel-light {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    background: var(--hero-cyan);
}
:root body.spectrum-ui .metric-panel-stat { margin: 23px 0 8px; }
:root body.spectrum-ui .metric-panel-stat dt {
    color: var(--hero-muted);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.7;
    text-transform: uppercase;
}
:root body.spectrum-ui .metric-panel-stat dd {
    margin: 4px 0 0;
    color: var(--hero-lime);
    font-size: clamp(44px, 4.6vw, 64px);
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.04em;
}
:root body.spectrum-ui .lab-hero .lab-metric-panel .metric-panel-detail {
    color: var(--hero-muted);
    font-size: 14px;
    line-height: 1.75;
    margin: 6px 0 22px;
}
:root body.spectrum-ui .metric-panel-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #303540;
}
:root body.spectrum-ui .metric-panel-footer span { color: var(--hero-cyan); font-size: 9px; }

/* Shared small frames: rankings, class selectors, notifications and code chips. */
:root body.spectrum-ui :is(.rank-badge, .leaderboard-avatar, .step-number, .card-icon, .action-icon, .empty-icon) {
    border: 1px solid var(--lab-blue);
    border-radius: 1px;
    background: var(--lab-surface);
    box-shadow: none;
    color: var(--lab-blue);
}
:root body.spectrum-ui .rank-badge { min-width: 31px; font-family: var(--terminal-font); }
:root body.spectrum-ui .rank-badge.rank-1 { border-color: var(--lab-amber); color: var(--lab-amber); }
:root body.spectrum-ui .rank-badge.rank-2 { border-color: var(--lab-cyan); color: var(--lab-cyan); }
:root body.spectrum-ui .rank-badge.rank-3 { border-color: var(--lab-pink); color: var(--lab-pink); }
:root body.spectrum-ui .rank-badge:is(.rank-1, .rank-2, .rank-3) { background: var(--lab-surface); }
:root body.spectrum-ui .leaderboard-avatar { border-color: var(--lab-edge); color: var(--lab-pink); }
:root body.spectrum-ui .dashboard-side :is(.card-icon, .action-icon) { background: var(--lab-surface); border-color: var(--lab-cyan); color: var(--lab-cyan); }
:root body.spectrum-ui .leaderboard-table tbody th { color: var(--lab-ink); }
:root body.spectrum-ui .leaderboard-panel .section-header > .status-pill { flex: 0 0 auto; white-space: nowrap; }
:root body.spectrum-ui .leaderboard-table tr.is-you {
    background: var(--lab-surface);
    box-shadow: inset 3px 0 0 var(--lab-pink);
}
:root body.spectrum-ui .class-tabs { flex-wrap: wrap; gap: 8px; }
:root body.spectrum-ui .class-tabs a {
    --tab-tone: var(--lab-cyan);
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    max-width: 100%;
    padding: 9px 16px;
    border: 1px solid var(--lab-edge);
    border-radius: 0;
    background: var(--lab-surface);
    color: var(--lab-muted);
    font: 650 13px/1.6 var(--terminal-font);
    overflow-wrap: anywhere;
}
:root body.spectrum-ui .class-tabs a:nth-child(2) { --tab-tone: var(--lab-pink); }
:root body.spectrum-ui .class-tabs a:nth-child(3) { --tab-tone: var(--lab-amber); }
:root body.spectrum-ui .class-tabs a:hover,
:root body.spectrum-ui .class-tabs a.is-active,
:root body.spectrum-ui .class-tabs a[aria-current="page"] {
    border-color: var(--tab-tone);
    background: var(--lab-surface);
    color: var(--tab-tone);
}
:root body.spectrum-ui .class-tabs a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--tab-tone); }
:root body.spectrum-ui :is(.notice, .validation-summary-errors, .result-summary, .access-code, .review-answer-result) { border-radius: 2px; }
:root body.spectrum-ui .notice {
    border-color: var(--lab-blue);
    border-inline-start-width: 3px;
    background: var(--lab-surface);
    color: var(--lab-ink);
    box-shadow: none;
}
:root body.spectrum-ui .notice > p:last-child { margin-bottom: 0; }
:root body.spectrum-ui .notice > p + p { margin-top: 8px; }
:root body.spectrum-ui .access-code {
    border-color: var(--lab-cyan);
    background: var(--lab-surface);
    color: var(--lab-cyan);
    box-shadow: inset 0 -2px 0 var(--lab-cyan);
}

@media (max-width: 900px) {
    :root body.spectrum-ui .leaderboard-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; min-height: 0; }
    :root body.spectrum-ui .lab-metric-panel { width: 100%; }
    :root body.spectrum-ui .metric-panel-stat { margin-top: 18px; }
}
@media (max-width: 600px) {
    :root body.spectrum-ui :is(.page-header:not(.test-header), .split:has(> div > h1)) { padding: 21px 18px; gap: 18px; }
    :root body.spectrum-ui .leaderboard-hero { padding: 25px 20px; }
    :root body.spectrum-ui .lab-metric-panel { padding: 20px; }
    :root body.spectrum-ui .class-tabs a { padding-inline: 12px; }
    :root body.spectrum-ui .leaderboard-panel .section-header { flex-wrap: wrap; }
    :root body.spectrum-ui .leaderboard-panel .section-header > div { flex: 1 1 100%; }
}
@media (max-width: 359px) {
    :root body.spectrum-ui .leaderboard-hero .lab-heading { font-size: 27px; }
}
@media (forced-colors: active) {
    :root body.spectrum-ui :is(.badge, .status-pill, .rank-badge, .leaderboard-avatar, .class-tabs a, .lab-metric-panel, .notice, .access-code) {
        background: Canvas;
        border-color: CanvasText;
        color: CanvasText;
        box-shadow: none;
    }
    :root body.spectrum-ui .class-tabs a[aria-current="page"] { border: 3px solid Highlight; }
    :root body.spectrum-ui :is(.page-header:not(.test-header), .split:has(> div > h1)) { background: Canvas; border-color: CanvasText; box-shadow: none; }
    :root body.spectrum-ui :is(.metric-panel-header, .metric-panel-footer, .metric-panel-stat, .metric-panel-detail) :is(span, dt, dd),
    :root body.spectrum-ui :is(.page-header:not(.test-header), .split:has(> div > h1)) :is(h1, p, a) { color: CanvasText; }
}
@media print {
    :root body.spectrum-ui :is(.page-header:not(.test-header), .split:has(> div > h1), .lab-metric-panel, .badge, .status-pill, .rank-badge, .leaderboard-avatar, .class-tabs a, .notice, .access-code) {
        background: #fff;
        border-color: #999;
        color: #111;
        box-shadow: none;
    }
    :root body.spectrum-ui :is(.page-header:not(.test-header), .split:has(> div > h1)) :is(h1, p, a),
    :root body.spectrum-ui .lab-metric-panel :is(span, dt, dd, .metric-panel-detail) { color: #111; }
    :root body.spectrum-ui .lab-metric-panel::after { display: none; }
}