/* schematic.css — the chapters.

   Four chapters, each one heading and its illustrations. The heading sits in
   the left column and sticks while its own chapter scrolls past; when the
   chapter ends the heading goes with it and the next one takes the spot. That
   handoff is `position: sticky` inside each chapter's own grid — the chapter
   is the containing block, so a heading can never outlive its section. No
   scroll listeners, nothing measured.

   Sticky parks against the nearest scrollport. On wide screens that is the
   document; on narrow screens the page scrolls inside .scroll-root (the
   page's own style block says why) and the headings park against it. No
   other ancestor may scroll or clip, and this file must not add one.

   Narrow: one column, and the heading sticks to the top of the scroller
   instead, with the illustrations running underneath it.

   Rules the module holds:
     - Every illustration is a terminal transcript: a command is typed, and
       the SDK draws the interface back in box characters. terminal.js
       animates the typing when a plate scrolls into view; without it the
       finished transcript is simply there.
     - Three accents only, and they are the mac traffic lights — red
       #ff5f57, yellow #febc2e, green #28c840 — bright against the dark
       screen. Green speaks for the SDK (prompt, ✓); red and yellow only
       where a terminal would use them.
     - A caption only exists where the transcript needs a note.

   Blocks:
     .chapter       one heading + its body
     .chapter-head  the sticky left column
     .chapter-body  the right column: description, then illustrations
     .plate         one illustration, framed, optionally captioned
     .term          the terminal window: bar + pre
*/

.sch {
    --ink: #000;
    --label: #494949;
    --edge: #e4e4e4;
    --screen: #0f0f0e;    /* the terminal, near-black and warm */
    --text: #d6d3cb;      /* phosphor off-white */
    --quiet: #6a675f;     /* muted output */
    --t-red: #ff5f57;     /* the three accents: mac traffic lights */
    --t-yellow: #febc2e;
    --t-green: #28c840;
    --stick: 40px;        /* how far below the top edge a heading parks */

    color: var(--ink);
}

/* ---- chapters ------------------------------------------------------- */

.chapters {
    display: flex;
    flex-direction: column;
    gap: 140px;
}

.chapter {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(0, 1.55fr);
    gap: 0 64px;
    align-items: start;
}

.chapter-head {
    position: sticky;
    top: var(--stick);
    align-self: start;   /* a stretched item cannot stick */
}

.chapter-head h2 {
    font-size: clamp(34px, 4.6vw, 56px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ink);
}

.chapter-body {
    min-width: 0;
}

.chapter-desc {
    font-size: 21px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--label);
    max-width: 40ch;
}

.chapter-desc + .plate,
.chapter-desc + .plates { margin-top: 44px; }

/* ---- illustrations -------------------------------------------------- */

.plates {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.plate {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.plate-frame {
    padding: 28px;
    border: 1px solid var(--edge);
    transition: border-color 200ms ease;
}

/* Hover is quiet: the frame closes to ink. The screen never changes. */
.plate:hover .plate-frame {
    border-color: var(--ink);
}

.plate figcaption {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.plate-name {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ink);
}

.plate-note {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--label);
}

/* ---- the terminals -------------------------------------------------- */

.term {
    background: var(--screen);
    border-radius: 6px;
    overflow: hidden;
}

.term-bar {
    display: flex;
    gap: 7px;
    padding: 12px 14px;
}

.term-bar i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.term-bar i:nth-child(1) { background: var(--t-red); }
.term-bar i:nth-child(2) { background: var(--t-yellow); }
.term-bar i:nth-child(3) { background: var(--t-green); }

.term pre {
    margin: 0;
    padding: 6px 22px 24px;
    font: 400 13px/1.5 ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    color: var(--text);
    white-space: pre;
    overflow-x: auto;   /* a narrow screen scrolls the transcript, not the page */
}

.term .g { color: var(--t-green); }
.term .y { color: var(--t-yellow); }
.term .r { color: var(--t-red); }
.term .dim { color: var(--quiet); }

.term .cur {
    background: var(--text);
    color: var(--screen);
    animation: term-blink 1.1s steps(1) infinite;
}

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

/* ---- the closing statement ------------------------------------------ */

/* No heading and no drawing: the words are the whole module, so it drops the
   two-column grid and takes the full measure. */
.chapter.statement {
    display: block;
}

.statement p {
    font-size: clamp(24px, 3.3vw, 38px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--ink);
}

/* One rhythm all the way down. The close is the last line — it does not need
   extra air to be read as the close, and a bigger gap with no rule in it
   reads as a mistake rather than a pause. */
.statement p + p { margin-top: 32px; }

/* the marker rides the display type, so it is sized in em and takes no line
   height of its own — the paragraph's leading must not open up around it */
.fn-ref {
    font-size: 0.4em;
    font-weight: 600;
    vertical-align: super;
    line-height: 0;
}

.fn-ref a {
    color: inherit;
    text-decoration: none;
}

.fn-ref a:hover { text-decoration: underline; }
.fn-ref a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.footnotes {
    list-style: none;
    margin: 48px 0 0;
    padding: 0;
}

.footnote {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 10px;
    max-width: 62ch;
    scroll-margin-top: 80px;
}

.footnote-n {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.6;
    color: var(--ink);
}

.statement .footnote p {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--label);
}

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

@media (max-width: 860px) {
    .chapters { gap: 88px; }

    .chapter {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* The heading parks flush at the top of the scroller and the chapter
       runs under it. The page scrolls inside .scroll-root (see the page's
       own style block): the document never scrolls, so iOS Safari's
       status-bar strip shows the page's plain white instead of a smear of
       scrolled-past content — no slab or safe-area painting needed. */
    .chapter-head {
        top: 0;
        z-index: 2;
        padding: 18px 0 14px;
        margin-bottom: 24px;
        background: #fff;
        border-bottom: 1px solid var(--edge);
    }

    .chapter-head h2 { font-size: 26px; letter-spacing: -0.02em; }

    .chapter-desc { font-size: 17px; max-width: none; }
    .chapter-desc + .plate,
    .chapter-desc + .plates { margin-top: 28px; }

    .plates { gap: 32px; }
    .plate { gap: 14px; }
    .plate-frame { padding: 12px; }
    .term pre { font-size: 11px; padding: 4px 14px 18px; }
    .term-bar i { width: 9px; height: 9px; }
    .plate-name,
    .plate-note { font-size: 15px; }

    .statement p + p { margin-top: 24px; }

    .footnotes { margin-top: 32px; }
    .statement .footnote p { font-size: 15px; }

}

@media (prefers-reduced-motion: reduce) {
    .plate-frame { transition: none; }
    .term .cur { animation: none; }
}