/* =====================================================================
   Production systems.

   Built to the change specification. The reference implementation named
   in that document was not in the repository, so this is written from
   the spec itself; every value below is the one the spec states.

   One deliberate departure, and it is the only one: the heading sweep
   reuses the existing knock mechanism rather than a second `psys-`
   prefixed copy of it. That mechanism already does exactly what B1
   describes — rust block sweeps left to right, text knocks out to the
   page background, the trailing edge leaves a hand-drawn wavy rule, no
   return — and it is already on three other headings on this page. A
   parallel implementation would mean two systems to keep in step. The
   `.psys__head` and `.psys__line` hooks are on the markup as specified,
   so the reference JS can take over without a markup change.
   ===================================================================== */

.psys {
    --psys-paper: #F4F2EE;          /* F3 · must match the real page surface */
    --psys-card: #FFFFFF;
    --psys-rest: #FAF9F7;
    --psys-rule: rgba(10, 12, 15, 0.11);
    --psys-muted: #6F737B;          /* was #767B83 — darkened a hair to pass WCAG 4.5:1 on the row surfaces */
    --psys-faint: #696F77;          /* was #A0A5AB — 2.4:1; darkened to 4.5:1 (WCAG). aria-hidden exempts screen readers, not sighted low-vision users */
    --psys-rust: var(--accent, #A43818);
    --psys-rust-line: rgba(164, 56, 24, 0.42);
}

/* F1 · the rows scale and cast a shadow, so nothing above may clip. */
.psys,
.psys .wrap {
    overflow: visible;
}

/* A1 · the gap the ticker used to fill. 54px from the bottom of the lede
   to the top of the column headers. */
.psys .section__lede { margin-bottom: 54px; }

/* F2 · below 1.34 the wavy rule collides with the descenders in
   "systems". */
.psys .section__title.knock { line-height: 1.34; }

/* ---- the table --------------------------------------------------------- */

/* The whole table sits on a card. It rests just off white so the rows
   have somewhere to whiten to on hover — on a white card the pop would
   have nothing to change to, which is the mistake that made the stage
   cards feel thin.

   Padding is the row's own 20px plus room around it, so a row's negative
   margin lands inside the card rather than on its edge. overflow stays
   visible because the rows scale and cast a shadow. */
.psys__table {
    display: block;
    background: var(--psys-rest);
    padding: clamp(26px, 2.8vw, 42px)
             clamp(26px, 2.8vw, 42px)
             clamp(14px, 1.6vw, 24px);
    overflow: visible;
    box-shadow: 0 1px 1px rgba(10, 12, 15, 0.03),
                0 10px 26px rgba(10, 12, 15, 0.05);
}

/* C1 · eight columns, stated once and used by the header row and every
   data row, so they can never drift apart. */
.psys__head-row,
.psys__row {
    display: grid;
    grid-template-columns: 46px 1.55fr 0.95fr 0.5fr 1.55fr 1.95fr 0.8fr 30px;
    gap: 0 18px;

    /* Centred, not baseline. A row holds one-line and two-line cells side
       by side, and baseline pinned them all to their first line, so
       anything that wrapped sat high and the row read as ragged. */
    align-items: center;

    /* C2 · the padding/margin pair is not cosmetic. The padding stops the
       index box and the arrow touching the edge of the hover highlight
       when the row scales; the equal negative margin keeps the content
       aligned to the column headers. */
    padding: 14px 20px;
    margin-inline: -20px;
}

/* D5 · column headers */
.psys__head-row {
    align-items: end;
    font-family: var(--f-mono);
    font-size: 9px;
    letter-spacing: 0.19em;
    text-transform: uppercase;
    color: var(--psys-faint);
    padding-top: 0;
    padding-bottom: 12px;
    box-shadow: inset 0 -1px 0 var(--psys-rule);
}

/* ---- a row -------------------------------------------------------------- */

.psys__row {
    position: relative;
    text-decoration: none;
    color: inherit;
    background: transparent;
    border-radius: 3px;

    /* C3 · inset shadow rather than border-bottom, so the rule follows the
       radius and does not fight the transform. */
    box-shadow: inset 0 -1px 0 var(--psys-rule);

    transform: scale(1);
    /* E1 · springs slightly past and settles. */
    transition: transform 420ms cubic-bezier(0.34, 1.42, 0.5, 1),
                background 220ms linear,
                filter 300ms linear;
}

.psys__row:last-child { box-shadow: none; }

/* E1 · pop */
.psys__row:hover,
.psys__row.is-near,
.psys__row:focus-within {
    background: var(--psys-card);
    transform: scale(1.018);
    filter: drop-shadow(0 16px 26px rgba(20, 24, 28, 0.11));
    box-shadow: none;
    z-index: 2;
}

/* F5 · keyboard */
.psys__row:focus-within {
    outline: 2px solid var(--psys-rust);
    outline-offset: 2px;
}

/* ---- cells --------------------------------------------------------------- */

/* D1 · index in a bordered box */
.psys__idx {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 22px;
    border: 1px solid var(--psys-rule);
    border-radius: 2px;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--psys-muted);
    transition: color 220ms linear, border-color 220ms linear;
}
.psys__row:hover .psys__idx,
.psys__row.is-near .psys__idx,
.psys__row:focus-within .psys__idx {
    color: var(--psys-rust);
    border-color: var(--psys-rust);
}

/* D5 · the system, and its role underneath */
.psys__sys { display: block; min-width: 0; }
/* Same as the stage cards: the system name changes with its row. */
.psys__row:hover .psys__sys b,
.psys__row.is-near .psys__sys b,
.psys__row:focus-within .psys__sys b {
    color: var(--psys-rust);
}

.psys__sys b {
    transition: color 220ms linear;
    display: block;
    font-size: 16.5px;
    font-weight: 500;
    letter-spacing: -0.022em;
    color: var(--text);
}
.psys__sys span {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--psys-muted);
}

.psys__sector,
.psys__regions,
.psys__scale {
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--psys-muted);
    min-width: 0;
}

.psys__integ {
    font-size: 12px;
    line-height: 1.5;
    color: var(--psys-muted);
    min-width: 0;
}

/* D3 · figures carry the weight, the words around them do not */
.psys__scale b {
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* D4 · separators recede */
.psys__scale i,
.psys__integ i {
    font-style: normal;
    color: var(--psys-rule);
    padding-inline: 2px;
}

/* D2 · platform chip with its square marker */
.psys__plat { min-width: 0; }
.psys__plat em {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-style: normal;
    font-family: var(--f-mono);
    font-size: 9px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--psys-rust);
    border: 1px solid var(--psys-rust-line);
    border-radius: 2px;
    padding: 3px 7px;
    transition: background 220ms linear, color 220ms linear,
                border-color 220ms linear;
}
.psys__plat em::before {
    content: "";
    width: 4px;
    height: 4px;
    background: currentColor;
    flex: none;
}
.psys__row:hover .psys__plat em,
.psys__row.is-near .psys__plat em,
.psys__row:focus-within .psys__plat em {
    background: var(--psys-rust);
    border-color: var(--psys-rust);
    color: #FFF3EE;
}

/* the arrow */
.psys__go {
    justify-self: end;
    font-family: var(--f-mono);
    font-size: 15px;
    line-height: 1;
    color: var(--psys-rust);
    opacity: 0.5;
    transition: transform 300ms cubic-bezier(0.2, 0, 0, 1),
                opacity 220ms linear;
}
.psys__row:hover .psys__go,
.psys__row.is-near .psys__go,
.psys__row:focus-within .psys__go {
    opacity: 1;
    transform: translateX(5px);
}

/* ---- narrow -------------------------------------------------------------- */

/* G · below 1120px the headers go and the cells stack. */
@media (max-width: 1120px) {
    .psys__head-row { display: none; }

    .psys__row {
        grid-template-columns: 46px minmax(0, 1fr) 30px;
        gap: 6px 18px;
        align-items: start;
    }
    .psys__sys     { grid-column: 2; }
    .psys__sector,
    .psys__regions,
    .psys__scale,
    .psys__integ,
    .psys__plat    { grid-column: 2; }
    .psys__idx     { grid-row: 1; }
    .psys__go      { grid-row: 1; grid-column: 3; }
    .psys__plat    { margin-top: 4px; }
}

/* ---- F4 · reduced motion --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .psys__row,
    .psys__go,
    .psys__idx,
    .psys__plat em { transition: none; }

    .psys__row:hover,
    .psys__row.is-near,
    .psys__row:focus-within { transform: none; }

    .psys__row:hover .psys__go,
    .psys__row.is-near .psys__go,
    .psys__row:focus-within .psys__go { transform: none; }
}