@charset "UTF-8";
/* ############################################################################
   QLYNIC  ·  switching-emr.css
   PAGE EXTENSION SHEET   —   ~/public/css/switching-emr.css
   ----------------------------------------------------------------------------
   PAGE ......... public/SwitchingEMR.aspx
   SYSTEM ....... Qlynic Marketing UI · MERIDIAN v1
   PREFIX ....... .qsw- (page-local only)

   ══ THIS FILE DECLARES NO DESIGN ═════════════════════════════════════════
   No colours, no type scale, no spacing scale. Every value is var(--qm-*).

   ══ TWO REJECTED BUILDS, AND WHY ═════════════════════════════════════════
   v1  A flat roll-call of the eight conformed vendors. Rejected: a queue
       drawn as a list is just a list.
   v2  The same eight as 3D plates receding to a lit gate. Rejected too, for
       two separate reasons and both were fair:
         · it was STILL a list, only lying down in perspective;
         · it was built as absolutely-positioned children inside a
           fixed-height 3D rig, so at 390px our card ran straight over the
           paragraph beneath it. A fixed-height rig full of absolute children
           cannot reflow. That is not a bug to patch; it is the wrong
           structure, and it is why this build has almost no absolute
           positioning in it at all.

   ══ v3 — THE FILING ══════════════════════════════════════════════════════
   Not a list of anyone. ONE document — our own application to Alberta Health
   — and a stamp that comes down on it.

   The eight conformed vendors become a single field on that form, "prior
   approvals on file", which is exactly what they are from the point of view
   of our paperwork. The reader gets the same facts and the page stops
   rendering a leaderboard of our competitors.

   THE LOOK — CYBER THIEF. A heist is paperwork before it is anything else:
   credentials, a filing, a stamp, a date. Nothing on this card glows. The
   only violence in it is the stamp landing.

   THE GESTURE — THE IMPACT. The stamp falls from 2.6x, rotating, and hits.
   The card recoils two pixels, one shock ring expands and dies. After that
   nothing moves except a slow pulse on the status dot, because the
   application is genuinely still open.
   ############################################################################ */


/* ============================================================================
   01 · SHELL
   ============================================================================ */
.qsw {
    position: relative;
    background: var(--qm-bg-0);
    color: var(--qm-text);
}

/* a hard light from above-left, so the filing has something to sit under */
.qsw-tex--lamp {
    background: radial-gradient( 46rem 30rem at 26% -6%, rgba(216, 230, 255, 0.05), transparent 62% ), radial-gradient( 54rem 26rem at 82% 104%, var(--qm-violet-tint), transparent 64% );
}


/* ============================================================================
   02 · THE COMPOSITION
   ----------------------------------------------------------------------------
   v3 was rejected for spacing and balance, and both were fair. Measured, it
   was: hero body 864px, filing 736px, note 672px, fork 1104px, actions
   1104px — five different widths, all left-aligned, ragged down the right,
   with 408px of dead space beside the filing and margin-top: 0 on the
   actions so the buttons were welded to the panels above them.

   THE FIX IS A GRID, NOT A NUDGE. The argument holds the left column, the
   filing holds the right and is the visual weight of the section. Below the
   split, note and fork run the full measure. Three widths total, one rhythm.
   ============================================================================ */
/* the hero is a SPLIT, so the headline is qm-h1 (32-48px), not
   qm-hero-title (48-92px). The kit's hero size assumes the full measure; in
   a 1fr column it ran to four lines and swallowed the argument. */
.qsw-split {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: center;
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

@media (min-width: 68rem) {
    .qsw-split {
        grid-template-columns: 1fr 1.06fr;
        gap: clamp(3rem, 5vw, 5rem);
    }
}

.qsw-say > * + * {
    margin-top: var(--qm-sp-6);
}

.qsw-say .qm-actions {
    margin-top: clamp(2rem, 4vw, 2.75rem);
}


/* ============================================================================
   03 · THE FILING
   ============================================================================ */
/* the stack: two ghost sheets under the live one, so it reads as a filing
   in a pile rather than a card floating on a page */
.qsw-stack {
    position: relative;
}

    .qsw-stack::before,
    .qsw-stack::after {
        content: "";
        position: absolute;
        inset: 0;
        border: 1px solid var(--qm-rule-faint);
        border-radius: var(--qm-r-lg);
        background: var(--qm-bg-1);
        opacity: 0;
        transition: opacity 700ms var(--qm-ease) 260ms, transform 700ms var(--qm-ease) 260ms;
    }

    .qsw-stack::before {
        transform: rotate(0deg) translateY(0);
    }

    .qsw-stack::after {
        transform: rotate(0deg) translateY(0);
    }

/* .qsw-stack also carries .qsw-rise, so the observer puts .qsw-in on THIS
   element — not an ancestor. Both forms are listed or the sheets never fan. */
.qsw-in .qsw-stack::before,
.qsw-stack.qsw-in::before {
    opacity: 0.5;
    transform: rotate(-2.2deg) translateY(9px);
}

.qsw-in .qsw-stack::after,
.qsw-stack.qsw-in::after {
    opacity: 0.7;
    transform: rotate(1.4deg) translateY(5px);
}

.qsw-file {
    position: relative;
    /* the stack's ::after is painted AFTER positioned children, so without
       this the ghost sheet washes over the live document. Raising the file
       once is cheaper and safer than negative z-index on the pseudos, which
       would drop them behind the section background. */
    z-index: 1;
    border: 1px solid var(--qm-rule);
    border-radius: var(--qm-r-lg);
    background: linear-gradient(180deg, var(--qm-surface-2), var(--qm-surface-1));
    box-shadow: inset 0 1px 0 var(--qm-edge-light), 0 40px 90px -40px rgba(2, 4, 10, 0.98);
}

/* the recoil — the card is struck, so the card moves */
.qsw-in .qsw-file {
    animation: qsw-recoil 420ms var(--qm-ease-io) 1180ms both;
}

@keyframes qsw-recoil {
    0%, 100% {
        transform: translateY(0);
    }

    18% {
        transform: translateY(3px);
    }

    46% {
        transform: translateY(-1px);
    }
}

.qsw-file__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--qm-sp-2) var(--qm-sp-5);
    padding: var(--qm-sp-4) clamp(1.25rem, 3vw, 1.9rem);
    border-block-end: 1px solid var(--qm-rule);
    border-start-start-radius: var(--qm-r-lg);
    border-start-end-radius: var(--qm-r-lg);
    background: var(--qm-bg-1);
    font: 500 var(--qm-fs-label) / 1.5 var(--qm-font-mono);
    letter-spacing: var(--qm-track-label);
    text-transform: uppercase;
    color: var(--qm-text-faint);
}

.qsw-file__body {
    padding: clamp(1.25rem, 3vw, 1.9rem);
}


/* ── 3.1 · the fields ─────────────────────────────────────────────────── */
.qsw-rows {
    display: grid;
    margin: 0;
}

.qsw-row {
    display: grid;
    grid-template-columns: minmax(8rem, 0.5fr) 1.5fr;
    gap: var(--qm-sp-3) var(--qm-sp-5);
    padding-block: 0.8rem;
    border-block-end: 1px solid var(--qm-rule-faint);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 420ms var(--qm-ease), transform 420ms var(--qm-ease);
    transition-delay: calc(var(--qsw-i, 0) * 90ms);
}

.qsw-in .qsw-row {
    opacity: 1;
    transform: none;
}

@media (max-width: 34rem) {
    .qsw-row {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
}

.qsw-row:last-of-type {
    border-block-end: 0;
    padding-block-end: 0;
}

.qsw-row__k {
    margin: 0;
    font: 500 var(--qm-fs-label) / 1.6 var(--qm-font-mono);
    letter-spacing: var(--qm-track-label);
    text-transform: uppercase;
    color: var(--qm-text-faint);
}

.qsw-row__v {
    margin: 0;
    font-size: var(--qm-fs-sm);
    color: var(--qm-text);
    text-wrap: pretty;
}

    .qsw-row__v small {
        display: block;
        margin-top: 0.25rem;
        font-size: var(--qm-fs-xs);
        color: var(--qm-text-muted);
    }

.qsw-prior {
    color: var(--qm-text-secondary);
}


/* ── 3.2 · THE STAMP ──────────────────────────────────────────────────── */
/* The bay reserves the stamp's space in normal flow, which is what stops it
   landing on the text beneath at any width. Only the shock ring is absolute,
   and it is decorative. */
.qsw-bay {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--qm-sp-5);
    margin-top: var(--qm-sp-6);
    padding-top: var(--qm-sp-6);
    border-top: 1px solid var(--qm-rule-faint);
}

@media (max-width: 34rem) {
    .qsw-bay {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--qm-sp-5);
    }
}

.qsw-stamp {
    display: grid;
    justify-items: center;
    gap: 0.2rem;
    flex: none;
    padding: 0.8rem 1.5rem;
    border: 2px solid var(--qm-warn);
    border-radius: var(--qm-r-sm);
    color: var(--qm-warn);
    text-align: center;
    transform: rotate(-7deg);
    opacity: 0;
}

.qsw-in .qsw-stamp {
    animation: qsw-strike 620ms cubic-bezier(0.3, 1.5, 0.5, 1) 900ms both;
}

@keyframes qsw-strike {
    from {
        opacity: 0;
        transform: rotate(-19deg) scale(2.6);
    }

    58% {
        opacity: 1;
    }

    to {
        opacity: 1;
        transform: rotate(-7deg) scale(1);
    }
}

.qsw-stamp__t {
    font: 600 clamp(1.25rem, 1rem + 1.1vw, 1.75rem) / 1 var(--qm-font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.qsw-stamp__s {
    font: 500 var(--qm-fs-label) / 1.5 var(--qm-font-mono);
    letter-spacing: var(--qm-track-label);
    text-transform: uppercase;
    opacity: 0.75;
}

.qsw-shock {
    position: absolute;
    inset-inline-end: 0;
    top: var(--qm-sp-6);
    width: 12rem;
    height: 5rem;
    border: 1px solid var(--qm-warn);
    border-radius: var(--qm-r-sm);
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 34rem) {
    .qsw-shock {
        inset-inline-end: auto;
        inset-inline-start: 0;
        top: auto;
        bottom: 0;
    }
}

.qsw-in .qsw-shock {
    animation: qsw-shock 760ms var(--qm-ease) 1180ms both;
}

@keyframes qsw-shock {
    from {
        opacity: 0.55;
        transform: rotate(-7deg) scale(0.9);
    }

    to {
        opacity: 0;
        transform: rotate(-7deg) scale(1.7);
    }
}

.qsw-open {
    display: inline-flex;
    align-items: center;
    gap: var(--qm-sp-2);
    font: 500 var(--qm-fs-label) / 1.4 var(--qm-font-mono);
    letter-spacing: var(--qm-track-label);
    text-transform: uppercase;
    color: var(--qm-text-muted);
}

    .qsw-open::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--qm-signal);
        animation: qm-pulse 2.4s var(--qm-ease-io) infinite;
        flex: none;
    }


/* ============================================================================
   03 · THE READING, AND THE FORK
   ============================================================================ */
.qsw-note {
    margin-top: clamp(3rem, 6vw, 4.5rem);
    max-width: var(--qm-w-prose);
    font-size: var(--qm-fs-sm);
    color: var(--qm-text-secondary);
    text-wrap: pretty;
}

    .qsw-note a {
        color: var(--qm-text-secondary);
        text-decoration: underline;
        text-underline-offset: 2px;
        text-decoration-color: var(--qm-rule-strong);
    }

        .qsw-note a:hover {
            text-decoration-color: var(--qm-azure);
        }

/* one rhythm below the split: note and fork both run the full measure and
   sit on the same vertical beat. */
.qsw-fork {
    margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.qsw-fork__k {
    margin: 0 0 var(--qm-sp-2);
    font: 500 var(--qm-fs-label) / 1 var(--qm-font-mono);
    letter-spacing: var(--qm-track-label);
    text-transform: uppercase;
}

.qsw-fork__k--wait {
    color: var(--qm-warn);
}

.qsw-fork__k--go {
    color: var(--qm-text-muted);
}

.qsw-fork__b {
    margin: 0;
    font-size: var(--qm-fs-sm);
    color: var(--qm-text-secondary);
    text-wrap: pretty;
}


/* ============================================================================
   04 · ENTRANCE + REDUCED MOTION
   ============================================================================ */
.qsw-rise {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--qm-t-slow) var(--qm-ease) var(--qsw-d, 0ms), transform var(--qm-t-slow) var(--qm-ease) var(--qsw-d, 0ms);
}

.qsw-in .qsw-rise,
.qsw-rise.qsw-in {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .qsw-rise,
    .qsw-row {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .qsw-in .qsw-file {
        animation: none;
    }

    .qsw-shock {
        display: none;
    }

    .qsw-in .qsw-stamp {
        animation: none;
        opacity: 1;
    }

    .qsw-open::before {
        animation: none;
    }
}


/* ============================================================================
   05 · SECTION 02 — THE RETENTION CLOCK
   ----------------------------------------------------------------------------
   GESTURE: READER-DRIVEN COMPUTATION. Every other gesture on this site is
   something the page does at you — ticks drawing, packets running, a stamp
   landing. This one only moves when the reader moves it, and what moves is a
   number. It is the first thing on the marketing site that is a TOOL rather
   than a picture, which is why it earns its place next to a stamp.

   THE RULE, from CPSA's Patient Record Retention standard:
     adult  · ten years from the date of last record entry
     minor  · ten years from last entry, OR two years after the patient
              reaches or would have reached eighteen — WHICHEVER IS LONGER
   So for a patient aged A at last entry in year Y, the record is held until
   Y + max(10, 20 - A). The "turns eighteen" arm only wins below age ten, and
   a newborn's chart has to survive twenty years. That is the argument.

   NO GLOW, NO CYAN except the live recompute marker. Warn carries the arm
   that is currently winning.
   ============================================================================ */
.qsw-clock {
    display: grid;
    gap: clamp(1.75rem, 4vw, 2.5rem);
    padding: clamp(1.5rem, 4vw, 2.25rem);
    border: 1px solid var(--qm-rule);
    border-radius: var(--qm-r-lg);
    background: var(--qm-bg-1);
    box-shadow: inset 0 1px 0 var(--qm-edge-light);
}

.qsw-clock__cap {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--qm-sp-3) var(--qm-sp-5);
    padding-block-end: var(--qm-sp-4);
    border-block-end: 1px solid var(--qm-rule);
    font: 500 var(--qm-fs-label) / 1.4 var(--qm-font-mono);
    letter-spacing: var(--qm-track-label);
    text-transform: uppercase;
    color: var(--qm-text-faint);
}

/* ── 5.1 · the two cases ──────────────────────────────────────────────── */
.qsw-cases {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2rem);
}

@media (min-width: 52rem) {
    .qsw-cases {
        grid-template-columns: 1fr 1.25fr;
        /* deliberately NOT stretch. The adult rule is genuinely smaller than
           the minor rule, and a card padded out to match would be dead space
           pretending to be content — the exact failure v3 was rejected for.
           The cards top out together and the taller one is taller because it
           has more rule in it. */
        align-items: start;
    }
}

/* flex, not grid, for one reason: the adult case is structurally shorter
   (no dial), and margin-block-start:auto on its closing line drops that line
   to the bottom of the card so the two cards bottom out together. In a grid
   with align-content:start there is no free space to push into, which is how
   v3 ended up with 408px of nothing beside a panel. */
.qsw-case {
    display: flex;
    flex-direction: column;
    gap: var(--qm-sp-3);
    padding: clamp(1.1rem, 2.5vw, 1.5rem);
    border: 1px solid var(--qm-rule-faint);
    border-radius: var(--qm-r-md);
    background: var(--qm-surface-1);
}

.qsw-case__k {
    margin: 0;
    font: 500 var(--qm-fs-label) / 1 var(--qm-font-mono);
    letter-spacing: var(--qm-track-label);
    text-transform: uppercase;
    color: var(--qm-text-muted);
}

.qsw-year {
    display: flex;
    align-items: baseline;
    gap: var(--qm-sp-3);
    margin: 0;
}

.qsw-year__n {
    font: 500 clamp(2.5rem, 2rem + 3.2vw, 4rem) / 0.92 var(--qm-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    color: var(--qm-text);
}

.qsw-year__u {
    font: 500 var(--qm-fs-label) / 1 var(--qm-font-mono);
    letter-spacing: var(--qm-track-label);
    text-transform: uppercase;
    color: var(--qm-text-faint);
}

.qsw-case--minor .qsw-year__n {
    color: var(--qm-warn);
}

.qsw-case__b {
    margin: 0;
    font-size: var(--qm-fs-sm);
    color: var(--qm-text-secondary);
    text-wrap: pretty;
}

/* ── 5.2 · the measuring rule ─────────────────────────────────────────────
   Both cases draw against the SAME twenty-year track, so the comparison is
   not two numbers the reader has to subtract — it is one bar that is visibly
   twice the other. The adult bar is settled and neutral; the minor bar is the
   only thing in the section that moves, and only when the reader moves it.
   ------------------------------------------------------------------------ */
.qsw-span {
    display: grid;
    gap: var(--qm-sp-2);
    margin-block-start: var(--qm-sp-2);
    /* the checkpoint diamond straddles the end of the run, so the rule is
       inset by half its diagonal — otherwise a full-length bar puts a corner
       outside the card and the document picks up a horizontal scrollbar */
    padding-inline-end: 7px;
}

.qsw-span__track {
    position: relative;
    height: 30px;
    /* one hairline every twelve months */
    background-image: repeating-linear-gradient(90deg, var(--qm-rule) 0 1px, transparent 1px 5%);
    background-position: 0 50%;
    background-size: 100% 12px;
    background-repeat: no-repeat;
}

    /* the baseline the years are measured off */
    .qsw-span__track::before {
        content: "";
        position: absolute;
        inset-inline: 0;
        top: 50%;
        height: 1px;
        background: var(--qm-rule-strong);
    }

    /* the ten-year gridline — the mark the minor bar has to cross */
    .qsw-span__track::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 2px;
        bottom: 2px;
        width: 1px;
        background: var(--qm-rule-strong);
    }

.qsw-span__fill {
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 3px;
    transform: translateY(-50%);
    background: currentColor;
    color: var(--qm-text-muted);
    transition: width var(--qm-t-slow) var(--qm-ease);
    transition-delay: 120ms;
}

    /* the checkpoint at the end of the run */
    .qsw-span__fill::after {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        width: 9px;
        height: 9px;
        background: currentColor;
        transform: translate(50%, -50%) rotate(45deg);
    }

.qsw-case--minor .qsw-span__fill {
    color: var(--qm-warn);
    transition-delay: 320ms;
}

.qsw-span__scale {
    display: flex;
    justify-content: space-between;
    margin: 0;
    font: 500 var(--qm-fs-label) / 1 var(--qm-font-mono);
    letter-spacing: var(--qm-track-label);
    color: var(--qm-text-faint);
}

.qsw-span__mid {
    color: var(--qm-text-muted);
}

/* ── 5.3 · the two arms of the minor rule ─────────────────────────────── */
.qsw-arms {
    display: grid;
    gap: var(--qm-sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.qsw-arm {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--qm-sp-4);
    padding: 0.5rem 0.7rem;
    border: 1px solid transparent;
    border-radius: var(--qm-r-sm);
    font: 500 var(--qm-fs-xs) / 1.5 var(--qm-font-mono);
    letter-spacing: 0.04em;
    color: var(--qm-text-muted);
    transition: color var(--qm-t-med) var(--qm-ease), border-color var(--qm-t-med) var(--qm-ease), background var(--qm-t-med) var(--qm-ease);
}

/* the arm currently governing is the only one lit */
.qsw-arm[data-wins="1"] {
    border-color: var(--qm-warn);
    background: var(--qm-warn-tint);
    color: var(--qm-warn);
}

/* the adult case has no second arm, and the blank row says so out loud —
   it is the reason the minor card is the taller, louder object */
.qsw-arm--void {
    color: var(--qm-text-faint);
}

.qsw-arm__v {
    font-variant-numeric: tabular-nums;
}

/* ── 5.4 · the dial ───────────────────────────────────────────────────── */
.qsw-dial {
    display: grid;
    gap: var(--qm-sp-3);
    padding-top: var(--qm-sp-5);
    border-top: 1px solid var(--qm-rule-faint);
}

.qsw-dial__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--qm-sp-3) var(--qm-sp-5);
    font: 500 var(--qm-fs-label) / 1.4 var(--qm-font-mono);
    letter-spacing: var(--qm-track-label);
    text-transform: uppercase;
    color: var(--qm-text-muted);
}

.qsw-dial__v {
    display: inline-flex;
    align-items: center;
    gap: var(--qm-sp-2);
    color: var(--qm-text);
}

    .qsw-dial__v::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--qm-signal);
        flex: none;
    }

.qsw-range {
    width: 100%;
    height: 26px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

    .qsw-range:focus-visible {
        outline: none;
        box-shadow: var(--qm-focus-ring);
        border-radius: var(--qm-r-pill);
    }

    .qsw-range::-webkit-slider-runnable-track {
        height: 2px;
        border-radius: 2px;
        background: var(--qm-rule-strong);
    }

    .qsw-range::-moz-range-track {
        height: 2px;
        border-radius: 2px;
        background: var(--qm-rule-strong);
    }

    .qsw-range::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 16px;
        height: 16px;
        margin-top: -7px;
        border-radius: 50%;
        border: 1px solid var(--qm-bg-0);
        background: var(--qm-azure);
    }

    .qsw-range::-moz-range-thumb {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        border: 1px solid var(--qm-bg-0);
        background: var(--qm-azure);
    }

.qsw-scale {
    display: flex;
    justify-content: space-between;
    font: 500 var(--qm-fs-label) / 1 var(--qm-font-mono);
    letter-spacing: var(--qm-track-label);
    color: var(--qm-text-faint);
}

/* ── 5.5 · the consequence ────────────────────────────────────────────── */
.qsw-carry {
    margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.qsw-src {
    margin-top: clamp(1.5rem, 3vw, 2rem);
    font-size: var(--qm-fs-xs);
    color: var(--qm-text-muted);
    max-width: var(--qm-w-prose);
}

    .qsw-src a {
        color: var(--qm-text-secondary);
        text-decoration: underline;
        text-underline-offset: 2px;
        text-decoration-color: var(--qm-rule-strong);
    }


/* ============================================================================
   06 · SECTION 03 — THE FLATTENING
   ----------------------------------------------------------------------------
   GESTURE: THE SQUASH. Two lanes are handed the same nine fields. The left
   lane keeps them. In the right lane they wink out one at a time, the stack
   collapses to a line, and a flat document is what is left standing. The
   left lane does not move while it happens — one thing moving, everything
   else holding still.

   THE STRUCTURAL RULE THIS SECTION OBEYS:
   the chip list and the flat document occupy THE SAME GRID CELL
   (.qsw-fuse > * { grid-area: 1/1 }). That is a stacking context that still
   reflows — the container is as tall as its tallest child at every width,
   text wraps normally inside both, and nothing is absolutely positioned. It
   is the reflow-safe replacement for the fixed-height absolute rig that
   broke v2 of section 01 at 390px.

   WHY scaleY RATHER THAN NINE MEASURED OFFSETS: collapsing rows toward a
   centre by translating each one means knowing the row pitch at every
   breakpoint, in every font, forever. transform-origin:center + scaleY on
   the container is the same picture, costs nothing, and cannot fall out of
   sync with the type.

   WARN is the only accent in this section, and it is on the lane that loses
   the data. No cyan (nothing here is live), no glow.
   ============================================================================ */
/* DELIBERATELY NOT A PANEL. Section 02 above is a bordered box holding two
   cards; if this section were built the same way the page would show the
   reader the same silhouette twice in a row and the argument would start to
   feel like a template. Here the cards sit straight on the ground under one
   hairline caption. Same system, different shape. */
.qsw-out {
    display: grid;
    gap: clamp(1.5rem, 3.5vw, 2.25rem);
}

.qsw-out__cap {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--qm-sp-3) var(--qm-sp-5);
    margin: 0;
    padding-block-end: var(--qm-sp-4);
    border-block-end: 1px solid var(--qm-rule);
    font: 500 var(--qm-fs-label) / 1.4 var(--qm-font-mono);
    letter-spacing: var(--qm-track-label);
    text-transform: uppercase;
    color: var(--qm-text-faint);
}

/* ── 6.1 · the two lanes ─────────────────────────────────────── */
.qsw-lanes {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2rem);
}

@media (min-width: 52rem) {
    .qsw-lanes {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.qsw-lane {
    display: flex;
    flex-direction: column;
    gap: var(--qm-sp-4);
    padding: clamp(1.1rem, 2.5vw, 1.5rem);
    border: 1px solid var(--qm-rule-faint);
    border-radius: var(--qm-r-md);
    background: var(--qm-surface-1);
}

.qsw-lane--flat {
    border-color: var(--qm-warn-tint);
}

.qsw-lane__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--qm-sp-3);
    margin: 0;
    padding-block-end: var(--qm-sp-3);
    border-block-end: 1px solid var(--qm-rule-faint);
}

.qsw-lane__k {
    font: 500 var(--qm-fs-label) / 1 var(--qm-font-mono);
    letter-spacing: var(--qm-track-label);
    text-transform: uppercase;
    color: var(--qm-text-muted);
}

.qsw-lane__f {
    margin: 0;
    font-size: var(--qm-fs-sm);
    color: var(--qm-text-secondary);
    text-wrap: pretty;
}

/* ── 6.2 · the stack, and the thing it becomes ─────────────────────── */
/* both children share one cell: the box is as tall as the taller of them,
   at every width, with no measurement and no absolute positioning */
.qsw-fuse {
    display: grid;
}

    .qsw-fuse > * {
        grid-area: 1 / 1;
    }

.qsw-chips {
    display: grid;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    transform-origin: center;
}

.qsw-chip {
    display: flex;
    align-items: center;
    gap: var(--qm-sp-3);
    padding: 0.5rem 0.7rem;
    border-radius: var(--qm-r-sm);
    background: var(--qm-surface-2);
    font: 500 var(--qm-fs-xs) / 1.5 var(--qm-font-mono);
    letter-spacing: 0.04em;
    color: var(--qm-text-secondary);
    /* they arrive one at a time, so the reader counts them */
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity var(--qm-t-med) var(--qm-ease) calc(var(--i) * 55ms), transform var(--qm-t-med) var(--qm-ease) calc(var(--i) * 55ms);
}

    .qsw-chip::before {
        content: "";
        flex: none;
        width: 5px;
        height: 5px;
        background: var(--qm-rule-strong);
        transform: rotate(45deg);
    }

.qsw-in .qsw-chip {
    opacity: 1;
    transform: none;
}

/* THE PRESS. The nine chips are still ON SCREEN when the container is
   squashed — that is the entire point, and it is what the first build got
   wrong. There, each chip faded out on its own timer and the scaleY landed
   half a second later on an already-empty box, so the gesture read as a
   fade. Nothing was seen to flatten.

   Now the exit belongs to the CONTAINER, not the items: the stack holds at
   full height, then compresses to a four-percent-tall line with the text
   still in it, and only lets go of its opacity on the way down.

   (The first version also had a specificity fault worth remembering:
   `.qsw-in .qsw-lane--flat .qsw-chip` is 0,3,0 and outranks
   `.qsw-in .qsw-chip` at 0,2,0, so writing the exit as a competing
   transition pinned BOTH states to opacity 0 and the chips never appeared
   at all. A transition has exactly one destination.)  */
.qsw-in .qsw-lane--flat .qsw-chips {
    transform: scaleY(0.04);
    opacity: 0;
    transition: transform 560ms var(--qm-ease-io) 1100ms, opacity 300ms var(--qm-ease) 1360ms;
}

/* the document that is left standing */
.qsw-slab {
    display: flex;
    flex-direction: column;
    gap: var(--qm-sp-4);
    padding: clamp(0.9rem, 2vw, 1.2rem);
    border: 1px solid var(--qm-warn-tint);
    border-radius: var(--qm-r-sm);
    background: var(--qm-surface-2);
    opacity: 0;
    /* it grows out of the same flat line the stack was pressed into, so the
       two beats are one movement: nine rows become a hairline, the hairline
       becomes one file */
    transform: scaleY(0.06);
    transform-origin: center;
    transition: opacity 300ms var(--qm-ease) 1660ms, transform 460ms var(--qm-ease) 1660ms;
}

.qsw-in .qsw-slab {
    opacity: 1;
    transform: none;
}

.qsw-slab__k,
.qsw-slab__f {
    margin: 0;
    font: 500 var(--qm-fs-label) / 1.4 var(--qm-font-mono);
    letter-spacing: var(--qm-track-label);
    text-transform: uppercase;
}

.qsw-slab__k {
    color: var(--qm-warn);
    text-transform: none;
}

.qsw-slab__f {
    color: var(--qm-text-faint);
}

/* pages: lines of something, and not one of them is a field. The block
   grows to fill the lane, because a flat export is not a small object — it
   is a very large object with nothing in it you can query. */
.qsw-slab__pages {
    flex: 1;
    display: grid;
    align-content: space-between;
    gap: 7px;
    min-height: 8rem;
}

    .qsw-slab__pages > span {
        height: 2px;
        border-radius: 1px;
        background: var(--qm-rule-strong);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 260ms var(--qm-ease) calc(1860ms + var(--i) * 32ms);
    }

    .qsw-slab__pages > span:nth-child(1) { width: 100%; }
    .qsw-slab__pages > span:nth-child(2) { width: 94%; }
    .qsw-slab__pages > span:nth-child(3) { width: 88%; }
    .qsw-slab__pages > span:nth-child(4) { width: 97%; }
    .qsw-slab__pages > span:nth-child(5) { width: 71%; }
    .qsw-slab__pages > span:nth-child(6) { width: 92%; }
    .qsw-slab__pages > span:nth-child(7) { width: 84%; }
    .qsw-slab__pages > span:nth-child(8) { width: 99%; }
    .qsw-slab__pages > span:nth-child(9) { width: 63%; }
    .qsw-slab__pages > span:nth-child(10) { width: 90%; }
    .qsw-slab__pages > span:nth-child(11) { width: 96%; }
    .qsw-slab__pages > span:nth-child(12) { width: 79%; }
    .qsw-slab__pages > span:nth-child(13) { width: 93%; }
    .qsw-slab__pages > span:nth-child(14) { width: 86%; }
    .qsw-slab__pages > span:nth-child(15) { width: 98%; }
    .qsw-slab__pages > span:nth-child(16) { width: 52%; }

.qsw-in .qsw-slab__pages > span {
    transform: none;
}

/* WITHOUT JAVASCRIPT there is nothing to flatten, so the lane shows the end
   state and never the nine chips it was going to lose. */
.qsw-lane--flat .qsw-chips {
    display: none;
}

.qsw-js .qsw-lane--flat .qsw-chips {
    display: grid;
}

.qsw-lane--flat .qsw-slab {
    opacity: 1;
    transform: none;
}

.qsw-js .qsw-lane--flat .qsw-slab {
    opacity: 0;
    transform: scaleY(0.06);
}

.qsw-js .qsw-in .qsw-lane--flat .qsw-slab {
    opacity: 1;
    transform: none;
}

/* ── 6.3 · the four questions ─────────────────────────────────── */
/* hairlines, not another box — the rows are held apart by rules, the way a
   ledger is */
.qsw-ask {
    margin-top: clamp(2.25rem, 5vw, 3.25rem);
    border-block-start: 1px solid var(--qm-rule);
}

.qsw-ask__cap {
    display: none;
    margin: 0;
    padding: var(--qm-sp-4) 0;
    border-block-end: 1px solid var(--qm-rule-faint);
    font: 500 var(--qm-fs-label) / 1 var(--qm-font-mono);
    letter-spacing: var(--qm-track-label);
    text-transform: uppercase;
    color: var(--qm-text-faint);
}

.qsw-ask__rows {
    margin: 0;
}

.qsw-ask__row {
    display: grid;
    gap: var(--qm-sp-2) clamp(1.5rem, 4vw, 3rem);
    padding: clamp(1.1rem, 2.5vw, 1.5rem) 0;
}

    .qsw-ask__row + .qsw-ask__row {
        border-block-start: 1px solid var(--qm-rule-faint);
    }

    .qsw-ask__row dt {
        margin: 0;
        font: 500 var(--qm-fs-sm) / 1.55 var(--qm-font-mono);
        letter-spacing: 0.02em;
        color: var(--qm-text);
        text-wrap: pretty;
    }

    .qsw-ask__row dd {
        margin: 0;
        font-size: var(--qm-fs-sm);
        color: var(--qm-text-secondary);
        text-wrap: pretty;
    }

@media (min-width: 52rem) {
    .qsw-ask__cap {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(1.5rem, 4vw, 3rem);
    }

    .qsw-ask__row {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qsw-chip,
    .qsw-slab,
    .qsw-slab__pages > span,
    .qsw-in .qsw-lane--flat .qsw-chips {
        transition: none;
    }

    .qsw-in .qsw-lane--flat .qsw-chips {
        opacity: 0;
    }
}


/* ============================================================================
   07 · SECTION 04 — THE CUTOVER
   ----------------------------------------------------------------------------
   GESTURE: THE ROUTE. Six legs down one spine. The prose starts in the LEFT
   column while the old system holds the record, and after the hand-over node
   it is standing in the RIGHT column. Nothing slides across — it is simply
   somewhere else, because authority in a cutover does not fade, it crosses
   at one named hour.

   THE ONE GLOW ON THE WHOLE PAGE lives here, on the go-live node, and cyan
   below it. Sections 01–03 have no glow and no cyan at all, deliberately, so
   that four screens of dark resolve into exactly one lit object. LAW 1 says
   the glow belongs to the focal object; LAW 2 says cyan is live things only.
   The moment a clinic goes live is both.

   REFLOW: every leg is a plain grid whose cells are sized by their content.
   The only absolutely positioned things in the section are the 1px spine and
   the node, and both live inside the rail cell, which is the one cell that
   holds no text at any width.
   ============================================================================ */
.qsw-runwrap {
    margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
}

.qsw-run__cap {
    display: none;
    margin: 0 0 clamp(1.5rem, 3.5vw, 2.25rem);
    padding-block-end: var(--qm-sp-4);
    border-block-end: 1px solid var(--qm-rule);
    font: 500 var(--qm-fs-label) / 1 var(--qm-font-mono);
    letter-spacing: var(--qm-track-label);
    text-transform: uppercase;
    color: var(--qm-text-faint);
}

.qsw-run {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ── 7.1 · a leg ──────────────────────────────────────────────────── */
.qsw-leg {
    display: grid;
    grid-template-columns: 1.75rem 1fr;
    column-gap: var(--qm-sp-4);
    padding-block-end: clamp(1.75rem, 4vw, 2.75rem);
}

.qsw-leg__mark {
    position: relative;
    grid-area: 1 / 1 / span 2 / span 1;
}

.qsw-leg__body {
    grid-area: 1 / 2;
}

/* THE DORMANT SYSTEM GETS A PLATE, NOT A HOLE. Built as a bare line of mono
   text this sat alone in an otherwise empty column and read as missing
   content rather than as a deliberate statement that nothing is happening
   over there. As a small plate pinned to the rail it balances the row, and
   the empty space moves to the OUTSIDE edge where a rag belongs. */
.qsw-leg__ghost {
    grid-area: 2 / 2;
    align-self: start;
    justify-self: start;
    margin: var(--qm-sp-4) 0 0;
    padding: var(--qm-sp-3) var(--qm-sp-4);
    border: 1px solid var(--qm-rule-faint);
    border-radius: var(--qm-r-sm);
    background: var(--qm-surface-1);
    font: 500 var(--qm-fs-label) / 1.5 var(--qm-font-mono);
    letter-spacing: var(--qm-track-label);
    text-transform: uppercase;
    color: var(--qm-text-faint);
}

/* the route itself — one hairline per leg, drawn top to bottom in sequence,
   so six legs read as a single line being run */
.qsw-leg__mark::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 1.15rem;
    bottom: calc(-1 * clamp(1.75rem, 4vw, 2.75rem));
    width: 1px;
    background: var(--qm-rule-strong);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 380ms linear calc(var(--i) * 250ms);
}

.qsw-in .qsw-leg__mark::before {
    transform: none;
}

/* the line has run out of route: fade it instead of cutting it */
.qsw-leg:last-child .qsw-leg__mark::before {
    bottom: 0;
    background: linear-gradient(180deg, var(--qm-rule-strong), transparent);
}

.qsw-leg__node {
    position: absolute;
    left: 50%;
    top: 0.42rem;
    width: 9px;
    height: 9px;
    border: 1px solid var(--qm-rule-strong);
    background: var(--qm-bg-0);
    transform: translate(-50%, 0) rotate(45deg) scale(0);
    transition: transform 260ms var(--qm-ease) calc(var(--i) * 250ms);
}

.qsw-in .qsw-leg__node {
    transform: translate(-50%, 0) rotate(45deg);
}

/* after the hand-over the line belongs to a different system, and says so */
.qsw-leg[data-side="new"] .qsw-leg__mark::before {
    background: var(--qm-signal);
}

.qsw-leg[data-side="new"]:last-child .qsw-leg__mark::before {
    background: linear-gradient(180deg, var(--qm-signal), transparent);
}

.qsw-leg[data-side="new"] .qsw-leg__node {
    border-color: var(--qm-signal);
}

/* THE ONE GLOW. Nothing else on this page is lit. */
.qsw-leg[data-cross="1"] .qsw-leg__node {
    width: 13px;
    height: 13px;
    top: 0.28rem;
    border-color: var(--qm-signal);
    background: var(--qm-signal);
    box-shadow: 0 0 0 5px var(--qm-signal-tint), 0 0 26px 3px var(--qm-signal-tint);
}

/* the one tick on the page: at the hand-over the route reaches sideways into
   the column that is about to hold the record, and drags the eye with it */
.qsw-leg[data-cross="1"] .qsw-leg__mark::after {
    content: "";
    position: absolute;
    top: 0.62rem;
    left: 50%;
    width: calc(0.875rem + var(--qm-sp-4));
    height: 1px;
    background: var(--qm-signal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms var(--qm-ease) calc(var(--i) * 250ms + 220ms);
}

.qsw-in .qsw-leg[data-cross="1"] .qsw-leg__mark::after {
    transform: none;
}

/* ── 7.2 · what a leg says ────────────────────────────────────────── */
.qsw-leg__t {
    margin: 0 0 var(--qm-sp-3);
    font: 500 var(--qm-fs-label) / 1 var(--qm-font-mono);
    letter-spacing: var(--qm-track-label);
    text-transform: uppercase;
    color: var(--qm-text-muted);
}

.qsw-leg[data-cross="1"] .qsw-leg__t {
    color: var(--qm-signal);
}

.qsw-leg__body .qm-h3 {
    margin: 0 0 var(--qm-sp-3);
}

.qsw-leg__p {
    margin: 0;
    max-width: var(--qm-w-prose);
    color: var(--qm-text-secondary);
    text-wrap: pretty;
}

.qsw-leg__body,
.qsw-leg__ghost {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--qm-t-slow) var(--qm-ease) calc(var(--i) * 250ms + 100ms), transform var(--qm-t-slow) var(--qm-ease) calc(var(--i) * 250ms + 100ms);
}

.qsw-in .qsw-leg__body,
.qsw-in .qsw-leg__ghost {
    opacity: 1;
    transform: none;
}

/* ── 7.3 · the crossing, which only exists once there are two columns ── */
@media (min-width: 60rem) {
    .qsw-run__cap {
        display: grid;
        grid-template-columns: 1fr 3.5rem 1fr;
        column-gap: clamp(1.25rem, 3vw, 2.5rem);
        align-items: baseline;
    }

        .qsw-run__cap > :first-child {
            text-align: right;
        }

    .qsw-run__cap-mid {
        text-align: center;
        color: var(--qm-text-muted);
    }

    .qsw-leg {
        grid-template-columns: 1fr 3.5rem 1fr;
        column-gap: clamp(1.25rem, 3vw, 2.5rem);
    }

    .qsw-leg__mark {
        grid-area: 1 / 2 / span 2 / span 1;
    }

    /* the old system holds the record: the prose stands on its side of the
       rail and reads toward it */
    .qsw-leg[data-side="old"] .qsw-leg__body {
        grid-area: 1 / 1;
        text-align: right;
    }

        .qsw-leg[data-side="old"] .qsw-leg__p {
            margin-inline-start: auto;
        }

    .qsw-leg[data-side="old"] .qsw-leg__ghost {
        grid-area: 1 / 3;
        margin-block-start: 0;
        /* a grid item stretches to its row by default, which turned these
           into tall empty boxes — the plate states one fact and should be
           exactly one fact tall */
        align-self: start;
        justify-self: start;
        max-width: 24rem;
        border-inline-start-color: var(--qm-rule-strong);
    }

    /* after the hand-over it is standing on the other side. Nothing animated
       it across — it is simply somewhere else, which is what happened. */
    .qsw-leg[data-side="new"] .qsw-leg__body {
        grid-area: 1 / 3;
    }

    .qsw-leg[data-side="new"] .qsw-leg__ghost {
        grid-area: 1 / 1;
        margin-block-start: 0;
        align-self: start;
        justify-self: end;
        max-width: 24rem;
        text-align: right;
        border-inline-end-color: var(--qm-rule-strong);
    }

    .qsw-leg[data-cross="1"] .qsw-leg__mark::after {
        width: calc(1.75rem + clamp(1.25rem, 3vw, 2.5rem));
    }
}

@media (prefers-reduced-motion: reduce) {
    .qsw-leg__mark::before,
    .qsw-leg__node,
    .qsw-leg__body,
    .qsw-leg__ghost {
        transition: none;
    }

    .qsw-leg[data-cross="1"] .qsw-leg__node {
        box-shadow: 0 0 0 5px var(--qm-signal-tint);
    }

    .qsw-leg[data-cross="1"] .qsw-leg__mark::after {
        transition: none;
    }
}


/* ============================================================================
   08 · SECTION 05 — THE FORK (the close)
   ----------------------------------------------------------------------------
   GESTURE: THE SPLIT. One line leaves the question, opens both ways at once
   from its own centre, and drops into two answers. A bracket, drawn. Nothing
   else on the page branches.

   NOTHING HERE IS LIT. The only glow on the site belongs to the go-live node
   in section 04, and a second lit object in the closing section would take it
   back. Warn carries the wait arm because waiting is the risk; azure carries
   the go arm because azure is the kit's command colour and this is the only
   place on the page that issues one.

   THE TWO ARMS ARE THE SAME WEIGHT ON PURPOSE — same padding, same measure,
   same type. The page opened by telling part of its audience not to buy; if
   the wait arm were styled as the lesser of the two, that opening would be
   revealed as a device. Do not shrink it.

   THE WIRE is the only absolutely positioned thing in the section. It lives
   in its own fixed-height row that holds no text at any width, and it is
   removed entirely below the breakpoint where the arms stop being side by
   side, so it can never land on a word.
   ============================================================================ */
/* .qsw-branch, NOT .qsw-fork — section 01 already owns .qsw-fork and its
   __k / __b children. Two blocks styling one class in one sheet is how the
   margin notes in section 04 silently inherited a 72px top margin from a
   paragraph three sections earlier. One name, one owner. */
.qsw-branch {
    display: grid;
    margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
}

/* ── 8.1 · the question ───────────────────────────────────────────── */
.qsw-branch__q {
    justify-self: center;
    max-width: 30rem;
    margin: 0;
    padding: clamp(1rem, 2.5vw, 1.4rem) clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--qm-rule);
    border-radius: var(--qm-r-md);
    background: var(--qm-surface-1);
    box-shadow: inset 0 1px 0 var(--qm-edge-light);
    font: 500 var(--qm-fs-h3) / 1.35 var(--qm-font-mono);
    letter-spacing: -0.01em;
    text-align: center;
    color: var(--qm-text);
    text-wrap: balance;
}

/* ── 8.2 · the wire ───────────────────────────────────────────────── */
.qsw-branch__wire {
    display: none;
    position: relative;
    height: 5rem;
}

.qsw-branch__stem,
.qsw-branch__bar,
.qsw-branch__drop {
    position: absolute;
    background: var(--qm-rule-strong);
}

.qsw-branch__stem {
    left: 50%;
    top: 0;
    width: 1px;
    height: 2rem;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 280ms var(--qm-ease-io);
}

/* it opens from the middle, both ways at once, because a fork does not
   choose a side first */
.qsw-branch__bar {
    left: 25%;
    top: 2rem;
    width: 50%;
    height: 1px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 460ms var(--qm-ease-io) 260ms;
}

.qsw-branch__drop {
    top: 2rem;
    width: 1px;
    height: 3rem;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 300ms var(--qm-ease-io) 680ms;
}

.qsw-branch__drop--l {
    left: 25%;
}

.qsw-branch__drop--r {
    left: 75%;
}

.qsw-in .qsw-branch__stem,
.qsw-in .qsw-branch__bar,
.qsw-in .qsw-branch__drop {
    transform: none;
}

/* ── 8.3 · the two answers ────────────────────────────────────────── */
.qsw-gates {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2rem);
    margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

.qsw-gate {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--qm-sp-4);
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid var(--qm-rule-faint);
    border-block-start: 2px solid var(--qm-rule-strong);
    border-radius: var(--qm-r-md);
    background: var(--qm-surface-1);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--qm-t-slow) var(--qm-ease) 900ms, transform var(--qm-t-slow) var(--qm-ease) 900ms;
}

    .qsw-gate + .qsw-gate {
        transition-delay: 990ms;
    }

.qsw-in .qsw-gate {
    opacity: 1;
    transform: none;
}

.qsw-gate--wait {
    border-block-start-color: var(--qm-warn);
}

.qsw-gate--go {
    border-block-start-color: var(--qm-azure);
}

.qsw-gate__k {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--qm-sp-3);
    margin: 0;
    font: 500 var(--qm-fs-label) / 1.4 var(--qm-font-mono);
    letter-spacing: var(--qm-track-label);
    text-transform: uppercase;
    color: var(--qm-text);
}

.qsw-gate__p {
    margin: 0;
    font-size: var(--qm-fs-sm);
    color: var(--qm-text-secondary);
    text-wrap: pretty;
}

/* ── 8.4 · the close ──────────────────────────────────────────────── */
.qsw-close {
    max-width: var(--qm-w-prose);
    margin: clamp(2.25rem, 5vw, 3.25rem) 0 0;
    padding-block-start: clamp(1.5rem, 3.5vw, 2.25rem);
    border-block-start: 1px solid var(--qm-rule);
    font-size: var(--qm-fs-lead);
    line-height: var(--qm-lh-body);
    color: var(--qm-text-secondary);
    text-wrap: pretty;
}

#qsw-fork .qm-actions {
    margin-top: clamp(1.75rem, 4vw, 2.5rem);
}

@media (min-width: 52rem) {
    .qsw-branch__wire {
        display: block;
    }

    .qsw-gates {
        grid-template-columns: 1fr 1fr;
        margin-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qsw-branch__stem,
    .qsw-branch__bar,
    .qsw-branch__drop,
    .qsw-gate {
        transition: none;
    }
}


/* ============================================================================
   09 · SECTION 04 — THE PAPERWORK
   ----------------------------------------------------------------------------
   GESTURE: THE MARKER. Four phrases are swept with a highlighter, one at a
   time, and the margin note lands beside each as it is marked. It is the only
   gesture on this page that happens INSIDE a sentence, which is what earns it
   a place beside a stamp, a slider, a press, a route and a split.

   WHY background-size AND NOT A POSITIONED PSEUDO: the obvious build is
   ::before with inset and z-index:-1, and it breaks — a negative z-index on a
   pseudo inside an inline element drops the highlight behind the panel it is
   supposed to be drawn on, and it cannot wrap across a line break. An inline
   background-image grown from 0% to 100% animates just as smoothly, wraps
   correctly with box-decoration-break: clone, and has nothing behind it to
   fall through.

   WARN carries the marks — this section is a list of things that cost you
   money if you miss them. No cyan, no glow.
   ============================================================================ */
.qsw-doc {
    margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
    border: 1px solid var(--qm-rule);
    border-radius: var(--qm-r-lg);
    background: var(--qm-bg-1);
    box-shadow: inset 0 1px 0 var(--qm-edge-light);
}

.qsw-doc__cap {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--qm-sp-3) var(--qm-sp-5);
    margin: 0;
    padding: var(--qm-sp-4) clamp(1.25rem, 3vw, 2rem);
    border-block-end: 1px solid var(--qm-rule);
    font: 500 var(--qm-fs-label) / 1.4 var(--qm-font-mono);
    letter-spacing: var(--qm-track-label);
    text-transform: uppercase;
    color: var(--qm-text-faint);
}

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

.qsw-clause {
    display: grid;
    gap: var(--qm-sp-4);
    padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.25rem, 3vw, 2rem);
}

    .qsw-clause + .qsw-clause {
        border-block-start: 1px solid var(--qm-rule-faint);
    }

.qsw-clause__k {
    grid-area: auto;
    margin: 0;
    font: 500 var(--qm-fs-label) / 1 var(--qm-font-mono);
    letter-spacing: var(--qm-track-label);
    text-transform: uppercase;
    color: var(--qm-text-faint);
}

/* the clause itself is set as a document, not as marketing copy */
.qsw-clause__t {
    margin: 0;
    font-size: var(--qm-fs-body);
    line-height: 1.75;
    color: var(--qm-text-secondary);
    text-wrap: pretty;
}

/* ── 9.1 · the marker ─────────────────────────────────────────────── */
.qsw-mark {
    padding: 0.12em 0.2em;
    border-radius: 2px;
    color: var(--qm-text);
    background-color: transparent;
    /* warn-tint is 12% alpha — one layer reads as a grey box, not as a marker.
       Two layers of the same token double the alpha without inventing a
       colour, and the underline is what makes it read as MARKED rather than
       merely shaded. */
    background-image: linear-gradient(var(--qm-warn-tint), var(--qm-warn-tint)), linear-gradient(var(--qm-warn-tint), var(--qm-warn-tint)), linear-gradient(var(--qm-warn), var(--qm-warn));
    background-repeat: no-repeat;
    background-size: 0% 100%, 0% 100%, 0% 1px;
    background-position: left top, left top, left bottom;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    transition: background-size 420ms var(--qm-ease) calc(var(--i) * 300ms + 260ms);
}

.qsw-in .qsw-mark {
    background-size: 100% 100%, 100% 100%, 100% 1px;
}

/* ── 9.2 · the margin note ────────────────────────────────────────── */
.qsw-gloss {
    padding-inline-start: var(--qm-sp-4);
    border-inline-start: 2px solid var(--qm-warn);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--qm-t-med) var(--qm-ease) calc(var(--i) * 300ms + 620ms), transform var(--qm-t-med) var(--qm-ease) calc(var(--i) * 300ms + 620ms);
}

.qsw-in .qsw-gloss {
    opacity: 1;
    transform: none;
}

.qsw-gloss__k {
    margin: 0 0 var(--qm-sp-2);
    font: 500 var(--qm-fs-label) / 1.3 var(--qm-font-mono);
    letter-spacing: var(--qm-track-label);
    text-transform: uppercase;
    color: var(--qm-warn);
}

.qsw-gloss__b {
    margin: 0;
    font-size: var(--qm-fs-sm);
    color: var(--qm-text-secondary);
    text-wrap: pretty;
}

@media (min-width: 58rem) {
    .qsw-clause {
        grid-template-columns: minmax(7rem, 0.4fr) 1.35fr 1fr;
        column-gap: clamp(1.5rem, 3.5vw, 2.75rem);
        align-items: start;
    }

    .qsw-clause__k {
        padding-block-start: 0.35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .qsw-mark,
    .qsw-gloss {
        transition: none;
    }
}