/* ==========================================================================
   PsyOn Labs · Psychomotor Vigilance Task · visual layer
   Colours, type and marks follow the PsyOn Labs identity kit (Seated Ring),
   with the token names of the Mental Rotation module.

   The experiment screen is part of the measurement:
   - the red circle is unchanged (200 px, #ff0000, same glow) and appears in one frame
   - nothing on that screen moves, and nothing else on it is red, orange or round
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL Open Font License 1.1, see assets/fonts) ---------- */
@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(assets/fonts/instrument-sans-latin-400-normal.woff2) format('woff2');
}
@font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(assets/fonts/instrument-sans-latin-600-normal.woff2) format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');
}
@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');
}

/* ---------- Tokens ---------- */
:root {
    /* Kit colours */
    --psyon-petrol: #0E3A45;
    --psyon-vermilion: #E4521B;
    --psyon-paper: #F6F4EE;
    --psyon-mist: #C9D3D4;
    --psyon-graphite: #4A5357;

    /* Shades shared with Mental Rotation */
    --bezel: #0A2F38;               /* recess the sheet sits in */
    --turned-tint: #3F6A75;         /* turned-P pattern on Petrol, as on the website */
    --mist-dim: #8AA2A6;            /* disabled text on Petrol, 4.56:1 */
    --hairline: rgba(201, 211, 212, 0.16);
    --hairline-strong: rgba(201, 211, 212, 0.28);
    --signal-ok: #7FD1A8;           /* success on Petrol, 6.7:1 */

    /* This module */
    --page: var(--psyon-paper);     /* light page, so the trial screen is not a jump in brightness */
    --field: var(--psyon-paper);    /* the stimulus field */
    --ink-rule: #DEDAD0;            /* hairlines on Paper */
    --signal-err-on-dark: #F49470;  /* error on Petrol, as in the GSR module */
    --ok-ink: #1B6B49;              /* success on Paper */
    --err-ink: #A63A12;             /* error on Paper: dark, clearly not the stimulus red */

    /* Values the experiment script writes into inline styles */
    --status-ok: var(--signal-ok);
    --status-error: var(--signal-err-on-dark);
    --feedback-valid: var(--ok-ink);
    --feedback-error: var(--err-ink);

    --sans: 'Instrument Sans', 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
    --mono: 'IBM Plex Mono', Consolas, 'SFMono-Regular', Menlo, monospace;

    --console-w: 352px;
    --bezel-pad: 12px;
}

/* ---------- Page ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { background: var(--page); }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--page);
    color: var(--psyon-petrol);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* The experiment screen never scrolls; a scrollbar would move the centre */
html:has(#experimentScreen.active),
html:has(#experimentScreen.active) body { overflow: hidden; }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Screens (the script moves .active between them) ---------- */
.screen { display: none; }

#setupScreen.active,
#resultsScreen.active {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

/* ---------- Instrument lid (shared with Mental Rotation) ---------- */
.instrument {
    width: min(1184px, 100%);
    background: var(--psyon-petrol);
    border: 1px solid rgba(14, 58, 69, 0.9);
    border-radius: 28px;
    padding: 20px 32px 28px;
    color: var(--psyon-paper);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.05) inset,
        0 2px 4px rgba(14, 58, 69, 0.10),
        0 30px 60px -24px rgba(14, 58, 69, 0.55);
}

.lid-head {
    display: flex;
    align-items: center;
    gap: 18px;
    padding-bottom: 16px;
    margin-bottom: 26px;
    border-bottom: 1px solid var(--hairline);
}

.brand-lockup {
    display: block;
    flex: none;
    width: 168px;          /* kit minimum for the horizontal lockup is 120 px */
    height: auto;
}

.product-name {
    margin: 0;
    padding-left: 18px;
    border-left: 1px solid var(--hairline-strong);
    font-weight: 600;
    font-size: 19px;
    line-height: 26px;
    letter-spacing: 0.005em;
    color: var(--psyon-paper);
}

/* Turned-P pattern, as on the PsyOn website: the symbol at twelve rotations */
.turned-row {
    display: flex;
    gap: 10px;
    margin-left: auto;
    padding-left: 24px;
}

.turned {
    width: 20px;
    height: 20px;
    fill: var(--turned-tint);
    transform: rotate(var(--turn));
}

.lid-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--console-w);
    column-gap: 36px;
    align-items: stretch;
}

/* ---------- The sheet: a Paper plate set into the lid, like the Mental Rotation stage ---------- */
.sheet {
    position: relative;
    padding: var(--bezel-pad);
    background: var(--bezel);
    border-radius: 16px;
    box-shadow:
        inset 0 2px 8px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(0, 0, 0, 0.25),
        0 1px 0 rgba(201, 211, 212, 0.10);
}

.plate {
    height: 100%;
    padding: 30px 40px 32px;
    background: var(--psyon-paper);
    color: var(--psyon-petrol);
}

/* Crop marks at the plate corners */
.crop { position: absolute; width: 0; height: 0; pointer-events: none; }
.crop::before,
.crop::after { content: ""; position: absolute; background: rgba(201, 211, 212, 0.5); }
.crop::before { width: 14px; height: 1px; }
.crop::after  { width: 1px; height: 14px; }

.crop-tl { top: var(--bezel-pad); left: var(--bezel-pad); }
.crop-tl::before { top: 0; right: calc(var(--bezel-pad) + 6px); }
.crop-tl::after  { left: 0; bottom: calc(var(--bezel-pad) + 6px); }
.crop-tr { top: var(--bezel-pad); right: var(--bezel-pad); }
.crop-tr::before { top: 0; left: calc(var(--bezel-pad) + 6px); }
.crop-tr::after  { right: 0; bottom: calc(var(--bezel-pad) + 6px); }
.crop-bl { bottom: var(--bezel-pad); left: var(--bezel-pad); }
.crop-bl::before { bottom: 0; right: calc(var(--bezel-pad) + 6px); }
.crop-bl::after  { left: 0; top: calc(var(--bezel-pad) + 6px); }
.crop-br { bottom: var(--bezel-pad); right: var(--bezel-pad); }
.crop-br::before { bottom: 0; left: calc(var(--bezel-pad) + 6px); }
.crop-br::after  { right: 0; top: calc(var(--bezel-pad) + 6px); }

/* ---------- Setup: the protocol ---------- */
.protocol-title {
    margin: 0 0 6px;
    font-size: 15px;
    line-height: 22px;
    color: var(--psyon-graphite);          /* 7.16:1 on Paper */
}
.protocol-title strong { font-weight: 600; }

.protocol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Each step is marked with the P turned to a new angle, as on PsyOn protocol sheets */
.protocol li {
    position: relative;
    padding: 15px 0 15px 48px;
    border-top: 1px solid var(--ink-rule);
    font-size: 18px;
    line-height: 27px;
    color: var(--psyon-petrol);            /* 11.17:1 */
}
.protocol li:last-child { border-bottom: 1px solid var(--ink-rule); }

.protocol li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 18px;
    width: 21px;
    height: 21px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-27.5 -19 150 150'%3E%3Cg fill='%233F6A75'%3E%3Cpath d='M3 0L28.801 0A3 3 0 0 1 30.86 5.182A41 41 0 0 0 23.591 55.669A3 3 0 0 1 24 57.181L24 111A3 3 0 0 1 21 114L3 114A3 3 0 0 1 0 111L0 3A3 3 0 0 1 3 0Z'/%3E%3Cpath fill-rule='evenodd' d='M23 35A36 36 0 1 1 95 35A36 36 0 1 1 23 35ZM41 35A18 18.25 0 1 0 77 35A18 18.25 0 1 0 41 35Z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.protocol li:nth-child(1)::before { transform: rotate(120deg); }
.protocol li:nth-child(2)::before { transform: rotate(240deg); }
.protocol li:nth-child(3)::before { transform: rotate(90deg); }
.protocol li:nth-child(4)::before { transform: rotate(300deg); }
.protocol li:nth-child(5)::before { transform: rotate(0deg); }

.protocol strong { font-weight: 600; }
.protocol em { font-style: italic; }

/* ---------- Console (right column, on Petrol) ---------- */
.console {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

/* One trial, drawn to match the code: 2–10 s cross, the circle, 1.5 s result */
.trial-diagram {
    margin: 0;
    padding: 18px 18px 16px;
    border: 1px solid var(--hairline);
    border-radius: 16px;
    background: rgba(8, 42, 51, 0.55);
}

.trial-diagram figcaption {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--psyon-mist);              /* 8.04:1 */
}

.diagram-count {
    font-family: var(--mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--psyon-paper);
}

.phases {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The timeline the three frames sit on */
.phases::before {
    content: "";
    position: absolute;
    top: 32px;
    left: 16.6%;
    right: 16.6%;
    height: 1px;
    background: var(--hairline-strong);
}

.phase {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.frame {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin-bottom: 10px;
    border-radius: 10px;
    background: var(--psyon-paper);
    box-shadow: 0 0 0 4px rgba(8, 42, 51, 0.9), 0 1px 0 4px rgba(201, 211, 212, 0.08);
}

.mini-cross {
    font-weight: 600;
    font-size: 30px;
    line-height: 1;
    color: var(--psyon-petrol);
    transform: translateY(-1px);
}

.mini-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ff0000;                   /* the stimulus, at small size */
    box-shadow: 0 1px 4px rgba(255, 0, 0, 0.4);
}

.mini-rt {
    font-family: var(--mono);
    font-weight: 500;
    font-size: 17px;
    color: var(--psyon-petrol);
}

.phase-name {
    font-size: 14px;
    line-height: 19px;
    font-weight: 600;
    color: var(--psyon-paper);
}

.phase-time {
    font-family: var(--mono);
    font-size: 13px;
    line-height: 19px;
    color: var(--psyon-mist);
}

/* ---------- Controls: same system as Mental Rotation ---------- */
.controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
}

#statusText {
    position: relative;
    min-height: 44px;                      /* two lines reserved: the error message wraps */
    margin: 0 0 4px;
    padding-left: 22px;
    font-size: 15px;
    line-height: 22px;
    color: var(--psyon-mist);              /* idle, 8.04:1 */
    transition: color 200ms ease;
}

/* State lamp, static */
#statusText::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid rgba(201, 211, 212, 0.6);
}
#statusText[style*="--status-ok"]::before {
    border: 0;
    background: var(--signal-ok);
    box-shadow: 0 0 0 3px rgba(127, 209, 168, 0.18);
}
#statusText[style*="--status-error"]::before {
    border: 0;
    background: var(--signal-err-on-dark);
    box-shadow: 0 0 0 3px rgba(244, 148, 112, 0.18);
}

.controls button,
.step-ghost {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 14px 44px 14px 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    text-align: left;
    letter-spacing: 0.002em;
}

.controls button {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background: var(--psyon-paper);
    color: var(--psyon-petrol);            /* 11.17:1 */
    transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}

.controls button:hover:not(:disabled) { background: #FFFFFF; }
.controls button:active:not(:disabled) { transform: translateY(1px); }

.controls button:focus { outline: none; }
.controls button:focus-visible {
    outline: 2px solid var(--psyon-vermilion);
    outline-offset: 3px;
}

/* Indicator lamp, like the LED on the device */
.controls button::after,
.step-ghost::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border-radius: 50%;
    background: var(--psyon-vermilion);
    box-shadow: 0 0 0 3px rgba(228, 82, 27, 0.2);
}

/* Not available yet: locked, still legible */
.controls button:disabled {
    background: transparent;
    color: var(--mist-dim);                /* 4.56:1 on Petrol */
    border: 1px dashed var(--hairline-strong);
    cursor: not-allowed;
}
.controls button:disabled::after {
    background: transparent;
    border: 1.5px solid rgba(201, 211, 212, 0.45);
    box-shadow: none;
}

/* Connected: Connect hides, and this stands in its place, marked done */
.step-ghost {
    display: none;
    color: var(--signal-ok);               /* 6.7:1 */
    border-color: rgba(127, 209, 168, 0.4);
}
.step-ghost::after {
    background: var(--signal-ok);
    box-shadow: 0 0 0 3px rgba(127, 209, 168, 0.18);
}
.controls:has(#connectBtn[style*="none"]) .step-ghost { display: block; }

/* Idle invitations: only on the setup and results screens, never during trials */
@media (prefers-reduced-motion: no-preference) {
    #connectBtn::after,
    #startBtn:not(:disabled)::after,
    body:not(:has(#closeBtn[style*="inline-block"])) #downloadBtn::after {
        animation: lamp 2.4s ease-in-out infinite;
    }
}

@keyframes lamp {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ---------- Experiment screen ---------- */
#experimentScreen.active {
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    cursor: none;                          /* nothing is clicked here */
}

.band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 56px;
    padding: 0 32px;
    background: var(--psyon-petrol);
    color: var(--psyon-paper);
}

#experimentHeader {
    margin: 0;
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.005em;
    color: var(--psyon-mist);              /* 8.04:1 */
}

.band-readout {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Ten short bars, one per trial; they change in one step when a trial starts */
.progress {
    display: flex;
    gap: 5px;
}
.progress i {
    display: block;
    width: 3px;
    height: 14px;
    border-radius: 1.5px;
    background: var(--turned-tint);
}
.progress i.is-done { background: var(--psyon-mist); }
.progress i.is-current { background: var(--psyon-paper); height: 18px; }

#trialInfo {
    min-width: 132px;
    font-family: var(--mono);
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--psyon-paper);             /* 11.17:1 */
}

/* The stimulus field: plain and even. Cross, circle and feedback share one centre. */
.field {
    display: grid;
    place-items: center;
    background: var(--field);
    min-height: 0;
}
.field > * { grid-area: 1 / 1; }

#stimulus {
    font-family: var(--sans);
    font-size: 80px;
    font-weight: 600;
    line-height: 80px;
    color: var(--psyon-petrol);            /* the dark cross */
    padding-top: 2px;                      /* sets the glyph's ink centre on the circle's centre */
}

/* The stimulus. Unchanged from the original: size, colour, shape and glow. */
#circle {
    display: none;
    width: 200px;
    height: 200px;
    background-color: #ff0000;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(255, 0, 0, 0.4);
}

/* Feedback: a calm readout. The number stays Petrol; the state shows in the label. */
#feedback {
    text-align: center;
    font-family: var(--mono);
    font-size: 64px;
    line-height: 76px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: var(--psyon-petrol) !important; /* the script's inline colour drives the label below */
}

#feedback .fb-status {
    display: inline-block;
    margin-top: 10px;
    padding: 6px 16px 7px;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 24px;
    line-height: 30px;
    font-weight: 600;
    letter-spacing: 0;
}
#feedback[style*="--feedback-valid"] .fb-status {
    color: var(--feedback-valid);
    background: rgba(27, 107, 73, 0.10);
    box-shadow: inset 0 0 0 1px rgba(27, 107, 73, 0.28);
}
#feedback[style*="--feedback-error"] .fb-status {
    color: var(--feedback-error);
    background: rgba(166, 58, 18, 0.07);
    box-shadow: inset 0 0 0 1px rgba(166, 58, 18, 0.30);
}

/* ---------- Results ---------- */
.plate-results {
    display: flex;
    flex-direction: column;
}

.complete-title {
    margin: 0 0 18px;
    font-size: 30px;
    line-height: 36px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--psyon-petrol);
}

.record {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.record-head {
    display: none;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ink-rule);
}
.record.has-chart .record-head { display: flex; }

.record-title {
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    color: var(--psyon-graphite);
}

.legend {
    display: flex;
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 18px;
    color: var(--psyon-graphite);
}
.legend li { position: relative; padding-left: 16px; }
.legend li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}
.legend .key-valid::before { background: var(--psyon-petrol); }
.legend .key-lapse::before { background: var(--psyon-paper); box-shadow: inset 0 0 0 1.5px var(--psyon-petrol); }
.legend .key-false::before { background: var(--psyon-vermilion); }

.record-chart { display: none; }
.record.has-chart .record-chart { display: block; padding-top: 8px; }
.record-chart svg { display: block; width: 100%; height: auto; overflow: visible; }

.chart-grid line { stroke: var(--ink-rule); stroke-width: 1; }
.chart-axis text,
.chart-x text {
    font-family: var(--mono);
    font-size: 11px;
    fill: var(--psyon-graphite);
}
.chart-limit line { stroke: var(--psyon-graphite); stroke-width: 1; stroke-dasharray: 3 4; }
.chart-limit text { font-family: var(--mono); font-size: 11px; fill: var(--psyon-graphite); }
.bar-valid { fill: var(--psyon-petrol); }
.bar-lapse { fill: var(--psyon-paper); stroke: var(--psyon-petrol); stroke-width: 1.5; }
.bar-false { fill: var(--psyon-vermilion); }
.mark-early line { stroke: var(--psyon-vermilion); stroke-width: 2.5; stroke-linecap: round; }
.bar-value {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    fill: var(--psyon-petrol);
    paint-order: stroke;
    stroke: var(--psyon-paper);
    stroke-width: 4px;
    stroke-linejoin: round;
}
.bar-break { stroke: var(--psyon-paper); stroke-width: 3; }

/* Without the chart (ui.js missing), the plate shows the completion seal instead */
.record-seal {
    display: grid;
    place-items: center;
    flex: 1;
    min-height: 220px;
}
.record.has-chart .record-seal { display: none; }

.seal { width: 220px; height: 220px; overflow: visible; }
.seal-ticks line {
    stroke: var(--psyon-graphite);
    stroke-opacity: 0.4;
    stroke-width: 1.2;
    stroke-linecap: round;
}
.seal-ticks line.major {
    stroke: var(--psyon-petrol);
    stroke-opacity: 0.9;
    stroke-width: 2;
}

/* Means, as instrument readouts. The script writes label, value, label, value. */
#meanRtText {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    border-top: 1px solid var(--hairline-strong);
    padding-top: 14px;
    font-size: 14px;
    line-height: 20px;
    color: var(--psyon-mist);              /* labels, 8.04:1 */
}
#meanRtText br { display: none; }
#meanRtText strong {
    display: block;
    margin: 2px 0 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--hairline);
    font-family: var(--mono);
    font-size: 44px;
    line-height: 52px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: var(--psyon-paper);             /* 11.17:1 */
}
#meanRtText strong:last-child { margin-bottom: 0; }

/* Trials by result (drawn by ui.js) */
.tally { display: none; margin: 0; }
.tally.is-filled {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 12px;
}
.tally div { padding-left: 12px; border-left: 1px solid var(--hairline-strong); }
.tally div:first-child { padding-left: 0; border-left: 0; }
.tally dt {
    font-size: 13px;
    line-height: 18px;
    color: var(--psyon-mist);
    white-space: nowrap;
}
.tally dd {
    margin: 4px 0 0;
    font-family: var(--mono);
    font-size: 26px;
    line-height: 30px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--psyon-paper);
}

/* Close appears after the download: secondary, and final, like a power switch's O */
#closeBtn {
    display: none;
    background: transparent;
    color: var(--psyon-mist);
    border: 1px solid var(--hairline-strong);
}
#closeBtn:hover { background: rgba(201, 211, 212, 0.08); border-color: var(--psyon-mist); }
#closeBtn::after {
    background: transparent;
    border: 1.5px solid var(--psyon-mist);
    box-shadow: none;
}
/* Once downloaded, the Download lamp turns to done */
body:has(#closeBtn[style*="inline-block"]) #downloadBtn::after {
    background: var(--ok-ink);
    box-shadow: 0 0 0 3px rgba(27, 107, 73, 0.18);
}

/* ---------- After Close: the script replaces the page with one heading ---------- */
body:has(> h2.terminated) {
    display: grid;
    place-items: center;
    padding: 24px;
}

h2.terminated {
    width: min(640px, 100%);
    margin: 0;
    padding: 118px 48px 44px;
    border-radius: 28px;
    background:
        url(assets/brand/psyon-horizontal-color-on-dark.svg) center 44px / 168px auto no-repeat,
        linear-gradient(var(--hairline), var(--hairline)) center 92px / calc(100% - 96px) 1px no-repeat,
        var(--psyon-petrol);
    color: var(--psyon-paper);
    font-family: var(--sans);
    font-size: 22px;
    line-height: 32px;
    font-weight: 600;
    text-align: center;
    box-shadow:
        0 2px 4px rgba(14, 58, 69, 0.10),
        0 30px 60px -24px rgba(14, 58, 69, 0.55);
}

/* ---------- Larger screens: a little more presence ---------- */
@media (min-width: 1680px) and (min-height: 940px) {
    #setupScreen .instrument,
    #resultsScreen .instrument { zoom: 1.18; }
}

/* ---------- Narrower windows ---------- */
@media (max-width: 1080px) {
    .turned-row { display: none; }
}

@media (max-width: 899px) {
    #setupScreen.active,
    #resultsScreen.active { padding: 12px; align-items: flex-start; }
    .instrument { padding: 16px; border-radius: 18px; }
    .lid-head { flex-wrap: wrap; row-gap: 10px; }
    .product-name { font-size: 17px; }
    .lid-body { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
    .plate { padding: 22px 20px; }
    .crop { display: none; }
    .band { padding: 0 16px; }
    .progress { display: none; }
    .legend { flex-wrap: wrap; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}