/* /code — the automation layer.

   CENTRED IN THE VIEWPORT, which is the pattern Juan identified across the rest
   of the site: the hero centres its copy vertically, and every /work panel is
   `align-content: center`. These two new pages were the only ones anchored to
   the top, and that mismatch is exactly why they read as belonging to a
   different site. The page now holds one composition, centred, the way a panel
   does — the header sits with the diagram rather than above it.

   The rig's own rules live in work.css because it is the same component and
   there must be exactly one copy of it. */

/* THE TREE IS THE MAIN CONTENT, so the tree is what centres. The first screen
   is the header and the diagram, vertically centred exactly like a /work panel
   and exactly like the hero. The lesson, the tags and the GitHub link are
   supplementary — they sit below the fold, which is where supplementary things
   belong. Trying to fit all of it into one viewport is what pushed the
   composition off-centre and made the page scroll anyway. */
/* ⚠️ NOT `.wrap`. Same bug as /film: a 940px reading measure minus 7vw of
   padding squeezed the diagram into the middle third of a wide screen. The tree
   is the content here, so the tree gets the viewport; only the prose below keeps
   a measure. */
.doc__main.code {
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  /* 🔴 TIGHTENED Sep 3 2026 so the DIAGRAM can be the hero. Juan wants the
     tree to be the centre of focus "kind of how content does with the media and
     how film does with the media." Measured at 1440x900 before: a 431.8px header
     over a 312px tree, where /film is a 117px header over a 599px monitor —
     exactly inverted. The tree is now scaled from one knob (work.css § the tree,
     turned 90 degrees) and this reclaims the pure WHITESPACE above it so the
     whole diagram lands inside the first screen instead of 27px past the fold.
     ⚠️ Only padding and gaps were touched. The remaining lever is the LEDE, which
     is six lines and ~218px of it — that is Juan's copy, not spacing, so it is
     his call and not a derived one. */
  padding: clamp(18px, 2.6vh, 32px) 4vw 5vh;
}
.code__after {
  padding-block: 0 12vh;
}

/* the header joins the composition instead of sitting on top of it */
.doc__head--sub {
  min-height: 0;
  padding-block: 0 clamp(14px, 2vh, 24px);
  text-align: center;
}
.doc__head--sub .doc__h1 { font-size: var(--t-3xl); }
.doc__head--sub .back {
  margin-bottom: clamp(12px, 2vh, 22px);
}
.doc__head--sub .doc__h1 { max-width: none; margin-inline: auto; }
.doc__head--sub .doc__lede { margin-inline: auto; text-align: center; }

.code__note {
  max-width: var(--measure); margin: clamp(30px, 4.5vh, 48px) auto 0;
  text-align: center;
}
.code__note .item__cost {
  margin-block: 0 16px !important;
  text-align: left;
  /* the accent rule reads as a pull-quote, which is what this line is */
  border-left: 2px solid rgba(240, 168, 60, .45);
  padding-left: 16px;
}
.code__note .tags { margin-bottom: 14px !important; }
/* 🔴 text-align DOES NOT PLACE A FLEX ITEM, AND THAT IS THE "BUTTONS OUT OF LINE".
   Juan, Sep 3 2026, about the end of this page: "there's some things that are
   buttons that are out of line." .code__note is `text-align: center`, so the
   .tags line above centres — but .item__go is `display: flex` (work.css § the
   flex-wrap note, which it needs: .lk is a padded inline box and padded inline
   boxes overlap when they wrap), and a flex container ignores text-align
   entirely and falls back to `justify-content: flex-start`. So the GitHub button
   sat hard left under a centred line, measured 300px off the axis at 1280.
   ⚠️ THE FIX WAS ALREADY IN THIS FILE, ONE RULE BELOW: `.doc__foot .links
   { justify-content: center }` exists for the identical reason — a flex row
   inside a `text-align: center` block. Same shape, same page, written once and
   not applied to its sibling. That is the pattern this site keeps teaching.
   ⚠️ SCOPED, NOT GLOBAL. .item__go is left-aligned on purpose everywhere else
   (/work's panels, /kova's sections) because those containers are left-aligned.
   Centring the class itself would break four correct call sites to fix one. */
.code__note .item__go { justify-content: center; }

/* the back link and the footer are chrome, so they pin rather than centre */
/* 🔴 `padding-block: 0 8vh` USED TO BE ON THIS RULE AND IT UNDID THE HUD RESERVE.
   Removed Sep 4 2026. work.css § the page has to end clear of the HUD sets
   `.doc__foot { padding-bottom: calc(var(--hud-h) + var(--sp-4)) }` for exactly
   this, and reserves it from `--hud-h` rather than in vh BECAUSE the bar is a
   fixed 58px: 8vh is 72px at a 900px-tall window and clears, and 46px at 575px,
   which does not. This file loads AFTER work.css, so the vh version won and the
   documented fix never reached this page — the comment over there names these
   three files as the ones that "look fine" without noticing that looking fine at
   900px is the whole bug. The top of 0 is already set by work.css § .doc__head,
   .doc__foot, so there is nothing left to declare here but the alignment. */
.doc__foot { text-align: center; }
.doc__foot .links { justify-content: center; }