/* steps-path.css – SleepNav's numbered path, the "Know what's next" visual language.
   Ringed numbered nodes joined by a line that steps down and to the right, then carries on
   past the last node to an arrowhead: the route and its direction, never an end (Zak, 8 Oct 2026).

   Canonical source: sleepnav-marketing/public/css/steps-path.css. Nothing page-specific lives
   here. A surface uses it in one of three ways:
     linked: sleepnav.com loads it (public/index.html, public/tools/readiness-checklist/index.html);
     byte copies: everything below the line of equals signs, pasted byte for byte under a comment
       line that cites the sha256 of that block (the bytes after the equals line's newline, to the
       end of the file), so an edit to this header never changes what a copy cites. In
       sleepnav-cdss the landing page and the Zone 1 deployment guide carry one, pinned by tests,
       as does the Instructions for Use from IFU v1.6; access.sleepnav.com carries one, unpinned;
     derived forms: drawn in CSS of their own, citing this file by name only, each for a
       recorded reason (Zak, 8 Oct 2026):
       print (DomPDF): the patient report and the SOPs – no grid, gradient or clip-path in the
         engine; a vertical rail, the ordinal as markup, and the node fill #2b8469 instead of
         #2d8a6e, so the 9–10px white ordinal meets WCAG AA's 4.5:1 for small text as DomPDF
         writes the fill, to three decimals (4.55:1; #2b856a fell to 4.49:1 when rounded and
         #2d8a6e gives 4.22:1);
       the cdss consultation and MFA rails (app.css .steps-rail): the horizontal form, three states;
       the Zone 1 code screen: rebuilt on two pinned paragraphs' pseudo-elements, navy, no green;
       the Zone 1 question progress: the bar's own track and fill, one ringed node at the current
         question and the onward arrowhead, navy, no green, no numeral.
   The rule every form keeps: nodes on one line that carries on past the last node to an arrowhead
   – a path never ends on a node.

   A page themes the path through these custom properties and through rules of its own, never by
   editing the rules below. The file declares each of them on .steps-path itself, so a page sets
   them on the list (the element with the class): a value set on an ancestor is overridden there.
   Only the fallbacks in brackets (--color-*, --font-display, --space-*) come from the page's own
   tokens:
     --step-fill        node fill            (default --color-path, then #2d8a6e)
     --step-ring        node ring            (default --color-white, then #fafbfd)
     --step-ink         node number colour   (default: the ring colour)
     --step-line-color  connector and arrow  (default --color-deep, then #1a2744)
     --step-font        node number font     (default --font-display, then Georgia, serif)
     --step-text        text column width    (default 32rem)
     --step-gap         row gap              (default --space-lg, then 2.5rem)
     --step-col-gap     node-to-text gap     (default --space-md, then 1.5rem)
     --step-node        node diameter        (default 56px, ring included)
     --step-stair       stair step           (default 8rem)
   The straightened form sets --step-node to 48px, --step-stair to 0 and --step-gap to --space-md
   at one class's weight: at 768px and below, and on .steps-path--vertical at every width. A page
   rule that sets one of them on a heavier selector, or later at the same weight, overrides the
   straightened form too: set such values inside @media (min-width: 769px), and not on a
   .steps-path--vertical list. A page may read --step-node and --step-stub-run (the straightened
   form's onward stub, 52px from the last node's centre) to leave room below the list; --step-line,
   --step-stub, --step-head and --step-delay are internal.
   Markup: <ol class="steps-path" role="list"> of <li class="step-card">, each holding
   <div class="step-number">01</div>, then a heading and a paragraph, or a single block, which the
   grid sets beside the node. In the straightened form that second child is display: flex, so a
   single block with inline children (<p><strong>...</strong> ...</p>) needs display: block set
   again by the page. The connectors draw in when a .step-card gains .visible (an
   IntersectionObserver on the page); on a page without one add the modifier .steps-path--static.
   Add .steps-path--vertical for the straightened form at every width; it applies automatically at
   768px and below.
   Printing: browsers leave backgrounds out when printing, which removes the line and the node
   fills, and Chrome then paints each connector box white, which can hide text and the arrowhead
   (seen on sleepnav.com printed landscape). A page that may be printed sets
   print-color-adjust: exact and -webkit-print-color-adjust: exact on the path in print rules of
   its own; the node's box-shadow then prints as a grey arc, which such a page can drop with
   box-shadow: none on .step-number.
   ========================================================================================== */

.steps-path {
    --step-node: 56px;
    --step-stair: 8rem;
    --step-line: 2px;
    --step-stub: 0.36;
    --step-stub-run: 52px;
    --step-head: 12px;
    --step-fill: var(--color-path, #2d8a6e);
    --step-ring: var(--color-white, #fafbfd);
    --step-ink: var(--step-ring);
    --step-line-color: var(--color-deep, #1a2744);
    --step-font: var(--font-display, Georgia, serif);
    --step-text: 32rem;
    --step-gap: var(--space-lg, 2.5rem);
    --step-col-gap: var(--space-md, 1.5rem);
    list-style: none;
    display: grid;
    grid-auto-rows: 1fr;
    row-gap: var(--step-gap);
    margin: 0;
    padding: 0;
}

.step-card {
    --step-delay: 0.35s;
    position: relative;
    display: grid;
    grid-template-columns: var(--step-node) minmax(0, var(--step-text));
    column-gap: var(--step-col-gap);
    align-content: center;
}

/* The stair: each step sits one stair further right, and its connector draws one beat later. */
.step-card:nth-child(2) { margin-left: var(--step-stair); --step-delay: 0.55s; }
.step-card:nth-child(3) { margin-left: calc(2 * var(--step-stair)); --step-delay: 0.75s; }
.step-card:nth-child(4) { margin-left: calc(3 * var(--step-stair)); --step-delay: 0.95s; }
.step-card:nth-child(5) { margin-left: calc(4 * var(--step-stair)); --step-delay: 1.15s; }
.step-card:nth-child(6) { margin-left: calc(5 * var(--step-stair)); --step-delay: 1.35s; }

/* Connector: a box from this node's centre to the next node's centre, with the line drawn
   corner to corner, so it meets both centres whatever the row height. */
.step-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(var(--step-node) / 2);
    width: var(--step-stair);
    height: calc(100% + var(--step-gap));
    background: linear-gradient(to top right,
        transparent calc(50% - var(--step-line) / 2 - 0.5px),
        var(--step-line-color) calc(50% - var(--step-line) / 2),
        var(--step-line-color) calc(50% + var(--step-line) / 2),
        transparent calc(50% + var(--step-line) / 2 + 0.5px));
    clip-path: inset(0 100% 100% 0);
    transition: clip-path 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--step-delay);
    pointer-events: none;
}

.step-card.visible::after {
    clip-path: inset(0 0 0 0);
}

/* The route does not end at the last node: a short onward stub, ending in an arrowhead, so the
   path reads as direction, not arrival. The stub is the connector's own box scaled by --step-stub,
   so it leaves the node at exactly the connectors' angle whatever the row height. */
.step-card:last-child::after {
    width: calc(var(--step-stair) * var(--step-stub));
    height: calc((100% + var(--step-gap)) * var(--step-stub));
}

.step-card:last-child::before {
    content: '';
    box-sizing: border-box;
    position: absolute;
    top: calc(50% + (100% + var(--step-gap)) * var(--step-stub) - var(--step-head));
    left: calc(var(--step-node) / 2 + var(--step-stair) * var(--step-stub) - var(--step-head));
    width: var(--step-head);
    height: var(--step-head);
    border-right: var(--step-line) solid var(--step-line-color);
    border-bottom: var(--step-line) solid var(--step-line-color);
    opacity: 0;
    transition: opacity 0.25s ease calc(var(--step-delay) + 0.4s);
    pointer-events: none;
}

.step-card.visible:last-child::before {
    opacity: 1;
}

.step-number {
    grid-row: 1 / span 2;
    grid-column: 1;
    align-self: center;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: var(--step-node);
    height: var(--step-node);
    border-radius: 50%;
    background: var(--step-fill);
    border: 5px solid var(--step-ring);
    box-shadow: 0 0 0 1px rgba(15, 26, 46, 0.08), 0 4px 12px rgba(15, 26, 46, 0.08);
    display: grid;
    place-items: center;
    font-family: var(--step-font);
    font-size: 1.1875rem;
    font-weight: 700;
    color: var(--step-ink);
    line-height: 1;
}

/* The straightened form: one vertical line down the left, text to the right. Each node sits level
   with its heading, so rows take their natural height and the connector still spans one row plus
   the gap; the onward stub is a short vertical run whose arrowhead tip sits on the line's end (the
   rotated square's half-diagonal plus half its side, measured back from the end). Applied below
   768px, and at every width under .steps-path--vertical. */
@media (max-width: 768px) {
    .steps-path {
        --step-node: 48px;
        --step-stair: 0px;
        --step-gap: var(--space-md, 1.5rem);
        grid-auto-rows: auto;
    }

    .step-card {
        align-content: start;
    }

    .step-number {
        align-self: start;
    }

    .step-card > :nth-child(2) {
        min-height: var(--step-node);
        display: flex;
        align-items: center;
    }

    .step-card::after {
        top: calc(var(--step-node) / 2);
        left: calc((var(--step-node) - var(--step-line)) / 2);
        width: var(--step-line);
        background: var(--step-line-color);
    }

    .step-card:last-child::after {
        width: var(--step-line);
        height: var(--step-stub-run);
    }

    .step-card:last-child::before {
        top: calc(var(--step-node) / 2 + var(--step-stub-run) - var(--step-head) * 1.2071);
        left: calc(var(--step-node) / 2 - var(--step-head) / 2);
        transform: rotate(45deg);
    }
}

.steps-path--vertical {
    --step-node: 48px;
    --step-stair: 0px;
    --step-gap: var(--space-md, 1.5rem);
    grid-auto-rows: auto;
}

.steps-path--vertical .step-card {
    align-content: start;
}

.steps-path--vertical .step-number {
    align-self: start;
}

.steps-path--vertical .step-card > :nth-child(2) {
    min-height: var(--step-node);
    display: flex;
    align-items: center;
}

.steps-path--vertical .step-card::after {
    top: calc(var(--step-node) / 2);
    left: calc((var(--step-node) - var(--step-line)) / 2);
    width: var(--step-line);
    background: var(--step-line-color);
}

.steps-path--vertical .step-card:last-child::after {
    width: var(--step-line);
    height: var(--step-stub-run);
}

.steps-path--vertical .step-card:last-child::before {
    top: calc(var(--step-node) / 2 + var(--step-stub-run) - var(--step-head) * 1.2071);
    left: calc(var(--step-node) / 2 - var(--step-head) / 2);
    transform: rotate(45deg);
}

/* No motion: the path is simply there. */
@media (prefers-reduced-motion: reduce) {
    .steps-path .step-card::after {
        clip-path: none;
        transition: none;
    }

    .steps-path .step-card:last-child::before {
        opacity: 1;
        transition: none;
    }
}

.steps-path--static .step-card::after {
    clip-path: none;
    transition: none;
}

.steps-path--static .step-card:last-child::before {
    opacity: 1;
    transition: none;
}