/*
   I Was Unsupervised — iwasunsupervised.com

   The page is the Global Containment Network terminal. Everything is
   built rather than placed as an image, so it stays sharp at any size
   and the clock actually runs.

   Contrast note: the first pass used an atmospheric dim grey and a deep
   red that measured 4.4:1 and 3.9:1 on black. At 11px that is not
   readable. Small text needs more contrast than large text, not less,
   so every value below is measured and the sizes have come up. The HUD
   still reads as recessed; it just no longer requires squinting.
*/

:root {
    --black: #000000;
    --green: #8FF5C4;        /* 16.0:1 on black */
    --green-mid: #4FB98A;    /*  8.5:1 */
    --green-dim: #2E4A3E;    /* borders only, never text */
    --red: #FF5247;          /*  6.6:1 */
    --cream: #F4F1E6;        /* 17.8:1 */
    --grey: #8C9497;         /*  6.4:1 — recessed but legible */
    --grey-bright: #B9C0C2;  /* 10.4:1 — interactive and body text */
    --grey-dim: #3A4042;     /* borders only, never text */

    --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--black);
    color: var(--cream);
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* ===== Screen treatment =====
   Scanlines are lighter than the first pass. At the old opacity they
   were sitting on top of 11px text and eating it. */

.scanlines, .vignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 60;
}

.scanlines {
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.014) 0px,
        rgba(255, 255, 255, 0.014) 1px,
        transparent 1px,
        transparent 3px
    );
}

.vignette {
    background: radial-gradient(ellipse at 50% 45%,
        transparent 45%,
        rgba(0, 0, 0, 0.45) 100%);
}

/* ===== Layout ===== */

.hud {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 24px 40px;
    display: flex;
    flex-direction: column;
}

.bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--grey-dim);
}

.tag {
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--grey);
    text-transform: uppercase;
}

.alarm { color: var(--red); }
.warn { color: var(--red); }

/* ===== Status readout and sensor grid ===== */

.panels {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    padding: 22px 0 0;
}

.readout dl {
    margin: 0;
    border: 1px solid var(--grey-dim);
    padding: 16px 18px;
    max-width: 320px;
}

.readout dl > div {
    display: grid;
    grid-template-columns: 116px 1fr;
    gap: 10px;
    padding: 1px 0;
}

.readout dt {
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--grey);
}

.readout dd {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    transition: opacity 60ms linear;
}

.readout dd.flicker { opacity: 0.35; }

.stamp {
    margin: 12px 0 0;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--grey);
}

.grid-wrap { width: 220px; flex-shrink: 0; }

.sensorgrid { width: 100%; height: auto; opacity: 0.7; }

.pings circle { fill: var(--red); }

.pings circle:nth-child(1) { animation: ping 4s ease-in-out infinite; }
.pings circle:nth-child(2) { animation: ping 4s ease-in-out 0.8s infinite; }
.pings circle:nth-child(3) { animation: ping 4s ease-in-out 1.6s infinite; }
.pings circle:nth-child(4) { animation: ping 4s ease-in-out 2.4s infinite; }
.pings circle:nth-child(5) { animation: ping 4s ease-in-out 3.2s infinite; }

@keyframes ping {
    0%, 70%, 100% { opacity: 0.3; }
    80%           { opacity: 1; }
}

/* ===== The line that does the work ===== */

.stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 0 10px;
}

.status {
    margin: 0 0 36px;
    font-family: var(--sans);
    font-weight: 700;
    font-size: clamp(22px, 4.4vw, 52px);
    letter-spacing: 0.06em;
    line-height: 1.15;
    text-align: center;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.4em;
    flex-wrap: wrap;
}

.status-label { color: var(--cream); }

.shrug {
    color: var(--green);
    font-family: var(--mono);
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
}

/* ===== Trailer ===== */

.screen {
    width: 100%;
    max-width: 900px;
    padding: 1px;
    background: linear-gradient(180deg, var(--green-dim), transparent 60%);
}

.screen-inner {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    background: #000;
}

.screen-inner iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* The green fracture. The brand's one reusable graphic device. */

.flare {
    width: min(900px, 100%);
    height: 1px;
    margin-top: 30px;
    background: linear-gradient(90deg,
        transparent,
        var(--green-dim) 18%,
        var(--green) 50%,
        var(--green-dim) 82%,
        transparent);
    box-shadow: 0 0 14px 1px rgba(143, 245, 196, 0.45);
}

/* ===== Console =====
   Two of these are decoration on the YouTube banner. Here they are
   real, and two of them fail on purpose. */

.console {
    margin-top: 44px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
    text-align: right;
}

.cmd {
    appearance: none;
    background: none;
    border: 0;
    padding: 5px 0;
    font-family: var(--mono);
    font-size: 14px;
    letter-spacing: 0.09em;
    color: var(--grey-bright);
    text-decoration: none;
    cursor: pointer;
    text-align: right;
    transition: color 120ms linear;
}

.caret { color: var(--green-mid); margin-right: 8px; }

.cmd:hover, .cmd:focus-visible { color: var(--cream); }

.cmd.is-denied { color: var(--red); }
.cmd.is-denied .caret { color: var(--red); }

.cmd-live { color: var(--green); }
.cmd-live:hover, .cmd-live:focus-visible { color: #FFFFFF; }

.cursor { animation: blink 1.1s step-end infinite; }

@keyframes blink { 50% { opacity: 0; } }

.errline {
    min-height: 22px;
    margin: 6px 0 0;
    font-size: 12px;
    letter-spacing: 0.09em;
    color: var(--red);
}

/* ===== Connection lost ===== */

.lostscreen {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 90ms linear, visibility 0s linear 90ms;
}

.lostscreen.is-on {
    opacity: 1;
    visibility: visible;
    transition: opacity 90ms linear;
}

.lostscreen p {
    margin: 0;
    font-size: clamp(14px, 2.2vw, 24px);
    letter-spacing: 0.22em;
    color: var(--cream);
    display: flex;
    align-items: center;
    gap: 0.9em;
}

.lostscreen .dot {
    width: 0.62em;
    height: 0.62em;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 16px 2px rgba(255, 82, 71, 0.7);
}

/* ===== Footer ===== */

.foot {
    margin-top: 48px;
    padding-top: 22px;
    border-top: 1px solid var(--grey-dim);
}

.wordmark {
    margin: 0 0 12px;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.3em;
    color: var(--cream);
}

.wordmark strong { font-weight: 700; }

.smallprint {
    margin: 0;
    max-width: 68ch;
    font-size: 13px;
    line-height: 1.8;
    letter-spacing: 0.02em;
    color: var(--grey-bright);
}

:focus-visible {
    outline: 1px solid var(--green);
    outline-offset: 4px;
}

/* ===== Small screens ===== */

@media (max-width: 760px) {
    .hud { padding: 16px 18px 32px; }

    .panels {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }

    .readout dl { max-width: none; }
    .grid-wrap { width: 100%; }

    .stage { padding: 32px 0 6px; }

    .console { align-items: flex-start; text-align: left; }
    .cmd { text-align: left; }

    .smallprint { font-size: 13.5px; }
}

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