/* Prismark identity: colours named once, used everywhere */
:root {
    --ground: #0C1430;
    --panel: #F7F8F9;
    --paper: #E8ECEF;
    --ink: #0C1430;
    --muted: #3B4660;
    --volt: #D6F53B;
    --signal: #2D5BFF;
    --fault: #FF4F3A;
    --seam: 8px;
    --display: Saira, sans-serif;
    --body: Archivo, system-ui, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--body);
}

h1, h2, h3, p { margin: 0; }

a { color: inherit; }

pre {
    margin: 0;
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.8;
    white-space: pre-wrap;
}

.ground {
    padding: var(--seam);
    display: flex;
    flex-direction: column;
    gap: var(--seam);
    min-height: 100vh;
}

.row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--seam);
}

.span-7 { flex: 7 1 560px; }
.span-5 { flex: 5 1 400px; }

.panel {
    background: var(--panel);
    padding: 28px 32px;
}

.panel.volt { background: var(--volt); }
.panel.signal { background: var(--signal); color: var(--panel); }
.panel.paper { background: var(--paper); }

.hero {
    min-height: 560px;
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
}
.hero-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; }
.hero-brand svg { flex: none; }

.points {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    border-top: 2px solid var(--ink);
    padding-top: 14px;
    line-height: 1.45;
}

.principle {
    min-height: 560px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.ghost {
    position: absolute;
    right: -24px;
    top: 80px;
    font-family: var(--display);
    font-variation-settings: 'wdth' 50;
    font-weight: 300;
    font-size: 300px;
    line-height: 0.8;
    color: #4A72FF;
}
.principle-body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.principle .heading { color: var(--ink); }
.principle-body p { font-size: 17px; line-height: 1.45; max-width: 400px; }

.wordmark {
    font-family: var(--display);
    font-variation-settings: 'wdth' 125;
    font-weight: 800;
    font-size: clamp(64px, 8vw, 112px);
    line-height: 0.86;    
}

.wordmark.small { font-size: 22px; line-height: 1; }

.brand {
    flex: 1 1 260px;
    padding: 0 20px;
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.tabs { flex: 3 1 600px; }

.tab {
    flex: 1 1 120px;
    min-height: 64px;
    padding: 10px 16px;
    background: #1A2547;
    color: #D5DBEA;
    text-decoration: none;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.tab:hover { background: #26335F; }
.tab.off { opacity: 0.6; }
.tab.volt { background: var(--volt); color: var(--ink); }

.heading {
    font-family: var(--display);
    font-variation-settings: 'wdth' 112;
    font-weight: 700;
    font-size: clamp(40px, 5vw, 64px);
    line-height: 0.9;
}

.score {
    font-family: var(--display);
    font-variation-settings: 'wdth' 50;
    font-weight: 600;
    font-size: 120px;
    line-height: 0.8;
}

.label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
}
.muted { color: var(--muted); }

.download {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.download-main {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.cta {
    font-family: var(--display);
    font-variation-settings: 'wdth' 125;
    font-weight: 800;
    font-size: 17px;
}
.button {
    min-height: 64px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    text-decoration: none;
}
.button.ink { min-width: 300px; background: var(--ink); color: var(--volt); }
.button.ink:hover { background: #1A2547; }
.button.outline {
    align-self: flex-start;
    min-height: 48px;
    border: 1.5px solid var(--ink);
    font-weight: 600;
}
.button.outline:hover { background: var(--ink); color: var(--panel); }

.stub { padding: 0; display: flex; flex-direction: column; }
.stub-body { flex: 1; padding: 24px 28px; display: flex; flex-direction: column; }
.stub-body > .label { margin-bottom: 12px; }
.platform {
    min-height: 44px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--ink);
    text-decoration: none;
    font-weight: 600;
}
.platform:hover { background: rgba(12, 20, 48, 0.08); }
.tear {
    border-top: 2px dashed var(--ink);
    padding: 14px 28px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
}

.cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--seam);
}
.card { min-height: 380px; display: flex; flex-direction: column; gap: 14px; }
.card .heading {
    font-size: 26px;
    font-variation-settings: 'wdth' 100;
    line-height: 1;
    hyphens: auto;
}
.card p { font-size: 14px; line-height: 1.45; }
.card ul { margin: auto 0 0; padding: 0; list-style: none; border-top: 1px solid currentColor; }
.card li { padding: 7px 0; border-bottom: 1px solid currentColor; font-weight: 600; font-size: 14px; }

.panel.dark { background: #141D3B; color: #E8ECEF; }

.stack { display: flex; flex-direction: column; gap: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 6px 10px; }
.chip.volt { background: var(--volt); }
.chip.fault { background: var(--fault); }
.curve { min-height: 320px; display: flex; flex-direction: column; gap: 14px; }
.bars { flex: 1; min-height: 200px; display: flex; align-items: flex-end; gap: 3px; }
.bars span { flex: 1; background: var(--panel); }
.bars span.scored { background: var(--volt); }

.footer {
    background: #141D3B;
    color: #AEB8D6;
    padding: 20px 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
}

@media (max-width: 640px) {
    .panel { padding: 22px 20px; }
    .score { font-size: 88px; }
    .button.ink { min-width: 0; width: 100%; }
}

.panel.pass { padding: 0; display: flex; flex-direction: column; text-decoration: none; }
.pass-main { flex: 1; padding: 28px 32px; display: flex; flex-direction: column; gap: 14px; }
.pass-main .score { margin-top: auto; font-size: 120px; line-height: 0.8; }
.pass-tear { border-top: 2px dashed var(--ink); padding: 16px 32px 20px; display: flex; flex-direction: column; gap: 12px; }
.barcode { height: 44px; display: flex; }
.barcode span { flex: 1 1 0; }
.barcode span:nth-child(odd) { background: var(--ink); }

@media (min-width: 544px) {
    .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 812px) {
    .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
    .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .panel.pass { grid-column: span 3; flex-direction: row; }
    .pass-main { flex: 3 1 0; }
    .pass-tear { flex: 2 1 0; border-top: none; border-left: 2px dashed var(--ink); justify-content: flex-end; }
    .barcode { height: 120px; }
}
@media (min-width: 1348px) {
    .cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .panel.pass { display: none; }
}

/* Compare pages */
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
button { font: inherit; cursor: pointer; }
select {
    min-height: 44px;
    width: 100%;
    border: 0;
    background: var(--paper);
    color: var(--ink);
    padding: 0 10px;
    font: 14px var(--body);
}

.span-3 { flex: 3 1 260px; min-width: 0; }
.span-4 { flex: 4 1 320px; min-width: 0; }
.span-6 { flex: 1 1 460px; min-width: 0; }
.span-8 { flex: 8 1 520px; min-width: 0; }
.span-9 { flex: 9 1 640px; min-width: 0; }

button.tab { border: 0; text-align: left; }
.tab.current { background: var(--panel); color: var(--ink); border-bottom: 6px solid var(--volt); }
.tab.current:hover { background: var(--panel); }
.tab.wide { flex-grow: 2; }
#groups .tab { flex-basis: 140px; }

.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 6px; }
.filters label { display: flex; flex-direction: column; gap: 4px; }

.yours-body { gap: 10px; }
.stub-body.yours-body > .label { margin-bottom: 0; }
.yours-name {
    font-family: var(--display);
    font-variation-settings: 'wdth' 112;
    font-weight: 700;
    font-size: 26px;
    line-height: 1;
    overflow-wrap: anywhere;
}
.yours-error { background: var(--fault); padding: 8px 10px; font-weight: 600; }
.yours-actions { align-items: center; padding: 12px 28px; }
.yours-actions .button { min-height: 44px; padding: 0 14px; background: transparent; cursor: pointer; }
.yours-open input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.yours-open:focus-within { outline: 3px solid var(--signal); outline-offset: 2px; }
.dropping { outline: 3px dashed var(--ink); outline-offset: -8px; }

.test-list { display: flex; flex-direction: column; gap: 12px; }
.test-buttons { display: flex; flex-direction: column; gap: 6px; }
.test-button {
    min-height: 52px;
    padding: 8px 12px;
    border: 0;
    background: var(--panel);
    color: var(--ink);
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}
.test-button.current { background: var(--ink); color: var(--panel); }
.test-name { font-weight: 600; font-size: 15px; }

.ranking { display: flex; flex-direction: column; gap: 18px; }
.ranking .heading { font-size: clamp(30px, 3vw, 40px); line-height: 1; }
.ranking-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.ranking-head .muted { margin-top: 6px; font-size: 14px; }
.ranking-ghost { display: none; }
.ranking-body { display: flex; flex-direction: column; gap: 18px; }
.right { text-align: right; }

.rank-row {
    display: grid;
    grid-template-columns: 30px 30px minmax(180px, 1.3fr) minmax(120px, 2fr) 72px 120px;
    gap: 14px;
    align-items: center;
    padding: 12px;
    border-top: 1px solid #C9D0DA;
}
.rank-head { border-top: 0; padding-block: 0 8px; }
.rank-row input { width: 22px; height: 22px; margin: 0; accent-color: var(--ink); }
.rank-row.picked { background: var(--paper); }
.rank-row.mine { background: var(--volt); border-top-color: var(--ink); }
.rank-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rank-name b { font-size: 15px; }
.rank-bar { display: block; min-width: 0; }
.fill { display: block; height: 14px; background: var(--signal); }
.fill.mine { background: var(--ink); }
.rank-score {
    font-family: var(--display);
    font-variation-settings: 'wdth' 75;
    font-weight: 600;
    font-size: 24px;
}
.rows-empty {
    min-height: 240px;
    padding: 24px;
    background: var(--paper);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.chip.signal { background: var(--signal); color: var(--panel); }
.chip.outline { border: 1.5px solid var(--ink); }
.chip.dashed { border: 1.5px dashed var(--muted); color: var(--muted); }
.chip.ink { background: var(--ink); color: var(--panel); }

.selection { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.selection-names { font-weight: 600; font-size: 15px; }
.versus-link { background: var(--ink); color: var(--volt); outline: 1px solid var(--volt); outline-offset: -1px; }
.versus-link:hover { background: #1A2547; }

.panel.pass-card { padding: 0; display: flex; flex-direction: column; }
.pass-card-main { flex: 1; padding: 24px 28px; display: flex; flex-direction: column; gap: 18px; }
.pass-card-title { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.pass-card .heading { font-size: clamp(34px, 3.6vw, 52px); line-height: 0.92; min-width: 0; overflow-wrap: anywhere; }
.pass-ghost {
    font-family: var(--display);
    font-variation-settings: 'wdth' 50;
    font-weight: 300;
    font-size: 120px;
    line-height: 0.75;
    opacity: 0.35;
}
.facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px 16px;
    border-top: 2px solid currentColor;
    padding-top: 12px;
}
.fact { display: flex; flex-direction: column; gap: 2px; }
.fact b { font-size: 15px; }
.pass-card-stub { border-top: 2px dashed currentColor; padding: 12px 28px; }

.no-total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px; }
.no-total .heading { color: var(--ink); font-size: 26px; line-height: 1; }
.no-total p { font-size: 14px; max-width: 560px; }

.versus-groups { display: flex; flex-direction: column; gap: var(--seam); }
.versus-group { display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; }
.versus-row {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(320px, 2fr) minmax(170px, auto);
    gap: 10px 24px;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid #C9D0DA;
}
.versus-name { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.versus-name b { font-size: 16px; }
.versus-bars { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr) 72px; gap: 8px; align-items: center; min-width: 0; }
.versus-score {
    font-family: var(--display);
    font-variation-settings: 'wdth' 75;
    font-weight: 600;
    font-size: 26px;
}
.versus-track { display: flex; height: 18px; background: var(--paper); }
.versus-track.left { justify-content: flex-end; }
.versus-track .fill { height: 100%; }
.versus-verdict .chip { display: inline-block; }

@media (max-width: 760px) {
    .rank-row { grid-template-columns: 26px 26px minmax(0, 1fr) auto; gap: 8px 10px; padding-inline: 8px; }
    .rank-head { display: none; }
    .rank-score { grid-column: 4; grid-row: 1; font-size: 22px; }
    .rank-bar { grid-column: 3 / -1; }
    .rank-against { grid-column: 3 / -1; text-align: left; }
    .versus-row { grid-template-columns: minmax(0, 1fr); }
    .versus-bars { grid-template-columns: 58px minmax(0, 1fr) minmax(0, 1fr) 58px; }
    .versus-score { font-size: 21px; }
    .yours-actions, .pass-card-stub { padding-inline: 20px; }
    .pass-card-main { padding: 22px 20px; }
}

/*
 * Dark mode: Royal blue, following the visitor's system setting. Volt and
 * Signal stay; only the neutral surfaces change. --ink stays the ink used on
 * Volt, Signal and light surfaces, so dark text uses --text.
 */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --ground: #0A1238;
        --panel: #16246B;
        --paper: #1E3288;
        --muted: #C3CDF0;
        --text: #F2F4F8;
        --light: #E8ECEF;
        --line: #5468C0;
        --bar: #9DB2FF;
    }

    :focus-visible, .yours-open:focus-within { outline-color: var(--volt); }
    body { color: var(--text); }

    .panel.volt, .chip.volt, .chip.fault, .yours-error { color: var(--ink); }
    .panel.signal, .chip.signal { color: #F7F8F9; }
    .panel.dark { color: var(--text); }
    .panel.dark.pass-card { background: #F7F8F9; color: var(--ink); --muted: #3B4660; }
    .bars span { background: #F7F8F9; }
    .panel.brand { background: #F7F8F9; color: var(--ink); }
    .panel.download, #stress > .panel.stack { background: #F7F8F9; color: var(--ink); --muted: #3B4660; }
    .panel.download .button.ink { background: var(--ink); color: var(--volt); }
    .panel.download .button.ink:hover { background: #1A2547; }

    .tab { background: var(--paper); color: #E1E6F8; }
    .tab:hover { background: #24359A; }
    .tab.current, .tab.current:hover { background: var(--light); color: var(--ink); }

    .card ul, .card li { border-color: var(--line); }
    .panel.card:not(.dark, .pass) { background: var(--paper); }
    .panel.card:not(.dark, .pass) ul, .panel.card:not(.dark, .pass) li { border-color: #7084D8; }
    .footer { background: #F7F8F9; color: #3B4660; }

    .button.ink, .versus-link { background: var(--volt); color: var(--ink); outline: 0; }
    .button.ink:hover, .versus-link:hover { background: #E3FA6A; }
    button.button { color: inherit; }
    .button.outline { border-color: currentColor; }
    .button.outline:hover { background: var(--light); color: var(--ink); }

    select { color: var(--text); }
    .panel.volt select { background: var(--paper); color: var(--text); }
    .panel.dark.pass-card select { background: var(--light); color: var(--ink); }
    .panel.intro { background: #F7F8F9; color: var(--ink); --muted: #3B4660; --paper: var(--light); }
    .panel.intro select { color: var(--ink); }
    .panel.test-list { background: #141D3B; }
    .test-button { background: var(--paper); color: var(--text); }
    .test-button.current { background: var(--light); color: var(--ink); }

    .panel.ranking { background: var(--paper); padding: 0; gap: 0; }
    .ranking-head {
        position: relative;
        overflow: hidden;
        min-height: 150px;
        box-sizing: border-box;
        padding: 28px 32px;
        background: var(--signal);
        color: #F7F8F9;
        --muted: #F7F8F9;
    }
    .ranking-head > * { position: relative; }
    .ranking-head .heading { color: var(--ink); }
    .ranking-head > .ranking-ghost {
        display: block;
        position: absolute;
        right: -10px;
        top: -14px;
        font-family: var(--display);
        font-variation-settings: 'wdth' 50;
        font-weight: 300;
        font-size: 170px;
        line-height: 0.8;
        color: #4A72FF;
    }
    .ranking-body { padding: 24px 32px 28px; }
    .rows-empty { background: #141D3B; }
    .panel.versus-group { background: var(--paper); }
    .versus-track { background: #141D3B; }

    .rank-row, .versus-row { border-top-color: #7084D8; }
    .rank-row.picked:not(.mine) { background: #141D3B; }
    .ranking .chip.signal { background: var(--bar); color: var(--ink); }
    .rank-row input { accent-color: var(--volt); }
    .rank-row.mine { color: var(--ink); border-top-color: var(--ink); }
    .rank-row.mine input { accent-color: var(--ink); }
    .fill { background: var(--bar); }
    .fill.mine { background: var(--volt); }
    .rank-row.mine .fill.mine { background: var(--ink); }
    .chip.outline { border-color: currentColor; }
    .chip.ink { background: var(--light); color: var(--ink); }
}

@media (prefers-color-scheme: dark) and (max-width: 640px) {
    .ranking-head { padding: 22px 20px; }
    .ranking-body { padding: 20px; }
}