/* How I build with Claude (#/how-i-build). Scoped under .inner-how-i-build.
   Ships with the page (docs/review/DECISIONS.md, 2026-10-07) and loads after mish-identity.css.
   Builds on mish-identity.css: the page is a .mish-paper reading layout with two .mish-stage bands (the build log and
   the close). Every token is read with its identity value as a fallback, so the page still holds together if the
   identity sheet loads late. Markup: index.html (#p-how-i-build). Motion: inner-how-i-build.mjs.

   The build log draws one cable (the MISH motion signature) down the entries as the reader scrolls. It is drawn by
   default: the module sets data-state="live" only while motion runs, and only then are entries below the reading line
   shown unlit. Without the module, under reduced motion or while paused, the cable is simply there and every entry is lit.
   Nothing is hidden at any point; only the cable, the nodes and the phase labels change.
   Teal blue is kept for the signal itself: the cable, its packet, the lit nodes and the entry the cable is at. Phase labels
   read as kickers (muted text), and the numbers carry no underline, because an underline is the identity's link mark. */

.inner-how-i-build{
  --hib-ink:var(--mish-text,#251637);
  --hib-muted:var(--mish-text-muted,#62536f);
  --hib-signal:var(--mish-signal,#006274);
  --hib-line:var(--mish-line,#d8cde4);
  --hib-raised:var(--mish-surface-raised,#e8def2);
  --hib-mono:var(--mish-font-mono,'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);
  --hib-body:var(--mish-font-body,Montserrat,'Avenir Next','Segoe UI',system-ui,sans-serif);
  --hib-ease:var(--mish-ease,cubic-bezier(.16,1,.3,1));
  overflow-x:clip
}
/* Paths and names in the mono face. They break anywhere, so a long path never pushes a phone sideways. */
.inner-how-i-build code{font-family:var(--hib-mono);font-weight:500;font-size:.88em;line-height:1.45;padding:1px 5px;border-radius:var(--mish-radius-field,2px);
  background:var(--hib-raised);color:var(--hib-ink);overflow-wrap:anywhere;word-break:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.inner-how-i-build code code,.inner-how-i-build code span{padding:0;background:none;font-size:1em}

/* ---------- Intro and prose ---------- */
.inner-how-i-build .hib-intro .mish-display{max-width:14ch}
.inner-how-i-build .hib-prose .mish-text{max-width:64ch}
.inner-how-i-build .mish-read-aside .mish-heading{max-width:12ch}

/* ---------- The build log: a dark band on the paper page ---------- */
/* A flat stage, not the radial glow, so every line here can be measured by tools/check-site.mjs (check i). */
.inner-how-i-build .hib-log{background:var(--mish-deep,#180f28);padding:var(--mish-section,clamp(56px,8vw,112px)) var(--mish-gutter,clamp(16px,4vw,56px))}
.inner-how-i-build .hib-log-in{box-sizing:border-box;max-width:var(--mish-max,1320px);margin:0 auto;display:grid;
  grid-template-columns:minmax(240px,.78fr) minmax(0,1.7fr);gap:var(--mish-space-6,32px) clamp(32px,5vw,84px)}
.inner-how-i-build .hib-log-head{align-self:start;position:sticky;top:calc(var(--mish-header-h,64px) + var(--mish-space-5,24px))}
.inner-how-i-build .hib-log-head .mish-heading{max-width:11ch}
.inner-how-i-build .hib-log-note{margin-top:var(--mish-space-5,24px);max-width:40ch}

.inner-how-i-build .hib-track{position:relative;--hib-col:150px;--hib-gap:22px;--hib-x:calc(var(--hib-col) + var(--hib-gap))}
.inner-how-i-build .hib-log-list{list-style:none;margin:0;padding:0;position:relative;z-index:1}
.inner-how-i-build .hib-entry{position:relative;display:grid;grid-template-columns:var(--hib-col) minmax(0,1fr);column-gap:calc(var(--hib-gap) * 2);padding:0 0 var(--mish-space-6,32px)}
.inner-how-i-build .hib-entry:last-child{padding-bottom:0}

/* The rail: a quiet base line, the teal blue cable that fills it, and the packet at the cable's leading edge.
   The module sets top and height from the first and last node; these values are the no-script fallback. */
.inner-how-i-build .hib-rail{position:absolute;left:var(--hib-x);top:9px;bottom:12px;width:2px;margin-left:-1px;background:var(--mish-rule,#58466d);pointer-events:none}
.inner-how-i-build .hib-rail-fill{position:absolute;inset:0;background:var(--mish-mint,#63d7e3);transform-origin:50% 0;transform:scaleY(1)}
.inner-how-i-build .hib-packet{position:absolute;left:50%;top:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;background:var(--mish-mint,#63d7e3);
  box-shadow:0 0 0 4px rgba(99,215,227,.16),0 0 18px rgba(99,215,227,.35);opacity:0}

.inner-how-i-build .hib-node{position:absolute;z-index:2;left:var(--hib-x);top:4px;box-sizing:border-box;width:12px;height:12px;margin-left:-6px;
  border:2px solid var(--mish-mint,#63d7e3);background:var(--mish-mint,#63d7e3);transition:background-color var(--mish-dur-2,180ms) ease,border-color var(--mish-dur-2,180ms) ease}
.inner-how-i-build .hib-node::after{content:'';position:absolute;inset:-7px;border:1px solid var(--mish-mint,#63d7e3);opacity:0;pointer-events:none}
/* A person's decision is marked in orange, as on every MISH surface. */
.inner-how-i-build .hib-entry--decision .hib-node{transform:rotate(45deg);border-color:var(--mish-brass,#ffb16b);background:var(--mish-brass,#ffb16b)}
.inner-how-i-build .hib-entry--decision .hib-node::after{border-color:var(--mish-brass,#ffb16b)}

.inner-how-i-build .hib-phase{grid-column:1;grid-row:1;margin:0;max-width:none;padding-top:1px;text-align:right;
  font:var(--mish-weight-mono,500) var(--mish-step-label,12px)/1.4 var(--hib-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mish-muted,#c1b4d0);
  transition:color var(--mish-dur-2,180ms) ease}
.inner-how-i-build .hib-entry--decision .hib-phase{color:var(--mish-brass,#ffb16b)}
.inner-how-i-build .hib-body{grid-column:2;grid-row:1;min-width:0}
.inner-how-i-build .hib-title{margin:0;font:var(--mish-weight-semibold,600) clamp(1.0625rem,.9929rem + .2857vw,1.25rem)/1.3 var(--mish-font-display,Montserrat,sans-serif);
  letter-spacing:-.02em;color:var(--mish-light,#fbf7ff);text-wrap:balance}
.inner-how-i-build .hib-text{margin:6px 0 0;max-width:58ch;font:400 var(--mish-step-small,14px)/1.65 var(--hib-body);color:var(--mish-body,#ded7ea)}
.inner-how-i-build .hib-facts{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 0;padding:0;list-style:none;
  font:var(--mish-weight-mono,500) var(--mish-step-label,12px)/1.4 var(--hib-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mish-muted,#c1b4d0)}
.inner-how-i-build .hib-facts b{margin-right:6px;font-size:1.3em;font-weight:600;letter-spacing:0;color:var(--mish-light,#fbf7ff)}
.inner-how-i-build .hib-facts b span{font:inherit;color:inherit}
.inner-how-i-build .hib-src{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:10px 0 0;max-width:none;font:400 var(--mish-step-label,12px)/1.5 var(--hib-mono);color:var(--mish-dim,#c1b4d0)}
.inner-how-i-build .hib-src>span{letter-spacing:.1em;text-transform:uppercase}
.inner-how-i-build .hib-log code{background:var(--mish-lift,#302047);color:var(--mish-body,#ded7ea);font-size:1em}

/* Live state, set by the module only while motion runs: what the cable has not reached waits unlit. */
.inner-how-i-build .hib-log[data-state="live"] .hib-packet{opacity:1}
.inner-how-i-build .hib-log[data-state="live"] .hib-entry:not(.is-lit) .hib-node{background:var(--mish-deep,#180f28);border-color:var(--mish-edge,#9883af)}
.inner-how-i-build .hib-log[data-state="live"] .hib-entry:not(.is-lit) .hib-phase{color:var(--mish-dim,#c1b4d0)}
.inner-how-i-build .hib-log[data-state="live"] .hib-entry.is-now:not(.hib-entry--decision) .hib-phase{color:var(--mish-light,#fbf7ff)}
/* The ring plays once, only on an entry the cable has just reached (the module sets is-plug), never on a snap or resume. */
.inner-how-i-build .hib-log[data-state="live"] .hib-entry.is-plug .hib-node::after{animation:hib-plug var(--mish-dur-4,700ms) var(--hib-ease) 1 both}
.inner-how-i-build .hib-log[data-state="live"] .hib-entry.is-now .hib-title{color:var(--mish-mint,#63d7e3)}
@keyframes hib-plug{from{opacity:.9;transform:scale(.55)}to{opacity:0;transform:scale(1.35)}}
/* Belt and braces: whatever the module last wrote, reduced motion and Pause motion show the still log. */
@media (prefers-reduced-motion:reduce){
  .inner-how-i-build .hib-log .hib-rail-fill{transform:none!important}
  .inner-how-i-build .hib-log .hib-packet{opacity:0!important}
  .inner-how-i-build .hib-log .hib-node::after{animation:none!important}
}
:root[data-motion="paused"] .inner-how-i-build .hib-log .hib-node::after{animation:none}

/* ---------- Who does what ---------- */
.inner-how-i-build .hib-rows>li{padding-bottom:var(--mish-space-5,24px)}
.inner-how-i-build .hib-who{grid-template-columns:repeat(3,minmax(0,1fr))}
.inner-how-i-build .hib-who dt{display:flex;align-items:center;gap:8px}
.inner-how-i-build .hib-who dt::before{content:'';flex:none;width:7px;height:7px;box-sizing:border-box}
.inner-how-i-build .hib-who-me dt::before{width:6px;height:6px;margin:0 1px;background:var(--mish-brass,#ffb16b);transform:rotate(45deg)}
.inner-how-i-build .hib-who-claude dt::before{background:var(--hib-signal)}
.inner-how-i-build .hib-who-check dt::before{border:1px solid var(--hib-muted)}
.inner-how-i-build .hib-who-check dd{display:flex;flex-wrap:wrap;gap:6px}

/* ---------- Made of, and checked ---------- */
.inner-how-i-build .hib-stack{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:var(--mish-space-4,16px)}
.inner-how-i-build .hib-block>*+*{margin-top:var(--mish-space-4,16px)}
.inner-how-i-build .hib-block+.hib-block{margin-top:var(--mish-space-7,48px)}
.inner-how-i-build .hib-block .mish-title{margin-bottom:var(--mish-space-2,8px)}

.inner-how-i-build .hib-fns,.inner-how-i-build .hib-files,.inner-how-i-build .hib-checks{list-style:none;margin:0;padding:0}
.inner-how-i-build .hib-fns>li{display:grid;grid-template-columns:minmax(150px,.62fr) minmax(0,1.6fr);gap:6px var(--mish-space-5,24px);
  padding:var(--mish-space-3,12px) 0;border-top:1px solid var(--hib-line)}
.inner-how-i-build .hib-fns>li:first-child{border-top-color:var(--hib-ink)}
.inner-how-i-build .hib-fns>li:last-child{border-bottom:1px solid var(--hib-line)}
.inner-how-i-build .hib-fns>li>code{align-self:start;justify-self:start;color:var(--hib-signal);background:none;padding:0;font-size:var(--mish-step-small,14px);font-weight:600}
.inner-how-i-build .hib-fns p{margin:0;max-width:62ch;font:400 var(--mish-step-small,14px)/1.6 var(--hib-body);color:var(--hib-ink)}
.inner-how-i-build .hib-test{display:block;margin-top:4px;font:400 var(--mish-step-label,12px)/1.5 var(--hib-mono);color:var(--hib-muted)}

.inner-how-i-build .hib-files>li{display:grid;grid-template-columns:minmax(0,1.25fr) 3.5ch minmax(0,1.6fr);align-items:baseline;gap:4px var(--mish-space-4,16px);
  padding:10px 0;border-top:1px solid var(--hib-line)}
.inner-how-i-build .hib-files>li:first-child{border-top-color:var(--hib-ink)}
.inner-how-i-build .hib-files>li>code{justify-self:start;background:none;padding:0;font-size:var(--mish-step-small,14px)}
.inner-how-i-build .hib-files>li>b{font:600 var(--mish-step-body,16px)/1.2 var(--hib-mono);color:var(--hib-signal);text-align:right}
.inner-how-i-build .hib-files>li>span{font:400 var(--mish-step-small,14px)/1.5 var(--hib-body);color:var(--hib-muted)}

.inner-how-i-build .hib-receipt{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;margin:var(--mish-space-4,16px) 0 0;padding:12px 16px;max-width:none;
  border-left:2px solid var(--hib-signal);background:var(--hib-raised);font:500 var(--mish-step-small,14px)/1.5 var(--hib-mono);color:var(--hib-ink)}
/* The command takes its own row, so the results below it read as one line and a wrap never starts with a separator. */
.inner-how-i-build .hib-receipt>code{flex-basis:100%;padding:0;background:none;margin:0 0 2px;font-size:1em}
.inner-how-i-build .hib-receipt>span{display:inline-flex;align-items:baseline;gap:.4ch}
.inner-how-i-build .hib-receipt>span+span::before{content:'·';margin:0 12px;color:var(--hib-muted)}
.inner-how-i-build .hib-receipt b{font-weight:600;color:var(--hib-signal)}

.inner-how-i-build .hib-checks>li{position:relative;padding:9px 0 9px 22px;border-top:1px solid var(--hib-line);font:400 var(--mish-step-small,14px)/1.6 var(--hib-body);color:var(--hib-ink);max-width:none}
.inner-how-i-build .hib-checks>li:last-child{border-bottom:1px solid var(--hib-line)}
.inner-how-i-build .hib-checks>li::before{content:'';position:absolute;left:2px;top:calc(9px + .62em);width:7px;height:7px;background:var(--hib-signal)}
.inner-how-i-build .hib-checks b{font:600 1em/1 var(--hib-mono);color:var(--hib-signal)}

.inner-how-i-build .hib-credit-list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--mish-space-4,16px)}
.inner-how-i-build .hib-credit-list dd,.inner-how-i-build .hib-stack dd,.inner-how-i-build .hib-who dd{max-width:52ch}

/* Lists sit a step below the paragraph that introduces them. */
.inner-how-i-build .hib-block>p+ul{margin-top:var(--mish-space-4,16px)}
.inner-how-i-build .hib-block>h3+ul{margin-top:var(--mish-space-3,12px)}
/* Consecutive reading sections share one gap instead of two. */
.inner-how-i-build .mish-read+.mish-read{padding-top:0}

/* ---------- The close: a dark band, as on every inner page ---------- */
.inner-how-i-build .hib-close{padding:var(--mish-space-8,64px) var(--mish-gutter,clamp(16px,4vw,56px))}
.inner-how-i-build .hib-close-in{box-sizing:border-box;max-width:var(--mish-max,1320px);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--mish-space-6,32px)}
.inner-how-i-build .hib-close .mish-text{margin-top:var(--mish-space-4,16px);max-width:54ch}
.inner-how-i-build .hib-close-contact{margin-top:var(--mish-space-3,12px);max-width:none;color:var(--mish-body,#ded7ea)}
.inner-how-i-build .hib-close-contact a{display:inline-block;padding:3px 0}

/* ---------- Narrower screens ---------- */
@media (max-width:899px){
  .inner-how-i-build .hib-log-in{grid-template-columns:minmax(0,1fr)}
  .inner-how-i-build .hib-log-head{position:static}
  .inner-how-i-build .hib-log-head .mish-heading{max-width:none}
  .inner-how-i-build .hib-stack{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .inner-how-i-build .hib-track{--hib-x:7px}
  .inner-how-i-build .hib-entry{grid-template-columns:minmax(0,1fr);padding-left:30px}
  .inner-how-i-build .hib-phase{grid-column:1;grid-row:1;text-align:left;padding:0 0 4px}
  .inner-how-i-build .hib-body{grid-column:1;grid-row:2}
  .inner-how-i-build .hib-node{top:3px}
  .inner-how-i-build .hib-who,.inner-how-i-build .hib-stack,.inner-how-i-build .hib-credit-list{grid-template-columns:minmax(0,1fr)}
  .inner-how-i-build .hib-fns>li{grid-template-columns:minmax(0,1fr)}
  .inner-how-i-build .hib-files>li{grid-template-columns:minmax(0,1fr) auto}
  .inner-how-i-build .hib-files>li>span{grid-column:1/-1}
  .inner-how-i-build .hib-receipt{flex-direction:column;align-items:flex-start}
  .inner-how-i-build .hib-receipt>code{margin:0 0 4px}
  .inner-how-i-build .hib-receipt>span+span::before{content:none}
}
@media (forced-colors:active){
  .inner-how-i-build .hib-rail-fill,.inner-how-i-build .hib-node,.inner-how-i-build .hib-packet{forced-color-adjust:none;background:CanvasText;border-color:CanvasText}
}