/* =============================================================================
   builds.css — the project layer's own chrome. Loaded after site.css.

   A build page is not a paged reader. It is one scrolling page you keep open in
   another tab while you work, so everything is visible at once and nothing is
   behind a control.

   The spine is the only real invention here. A vertical rule with two kinds of
   node on it: a milestone you can see working, and a wall the build steers you
   into on purpose. The shape of the list is the shape of the idea, which is the
   only reason it earns a custom component instead of a plain <ol>.
   ========================================================================== */

.buildhead{ border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent) }
.buildhead .buildwrap{ padding-top:38px; padding-bottom:34px }
.buildwrap{ max-width:74ch; margin:0 auto; padding:0 20px }
.buildwrap.wide{ max-width:1040px }

/* Project pages are one long document. Give every major section a dependable
   break instead of inheriting whatever bottom margin its previous widget has. */
main.buildwrap:not(.wide){ padding-top:34px }
main.buildwrap:not(.wide) > section + section{ margin-top:44px }

.b-back{ font-size:.82rem; color:var(--dim); text-decoration:none; display:inline-block; margin-bottom:14px }
.b-back:hover{ color:var(--accent) }

/* The way back and the language switch share the top line, because a build page
   has no reader chrome above it to hang either one from. */
.b-top{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-bottom:14px }
.b-top .b-back{ margin-bottom:0 }
.b-title{ font-size:clamp(1.9rem,4.6vw,2.7rem); line-height:1.14; margin:0 0 12px;
  letter-spacing:-.015em }
.b-have{ font-size:1.1rem; color:var(--dim); max-width:62ch; margin:0 }

/* What you need before starting, and roughly how long. Facts, in a row. */
.b-facts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px }
.b-fact{ font-family:var(--mono); font-size:.76rem; color:var(--dim);
  border:1px solid var(--line2); border-radius:999px; padding:5px 12px }
.b-fact b{ color:var(--txt); font-weight:650 }
.b-fact.none{ color:var(--on); border-color:var(--on) }

/* ------------------------------------------------------------------ spine */
.spine{ list-style:none; margin:26px 0 0; padding:0 0 0 34px; position:relative }
.spine::before{ content:""; position:absolute; left:6px; top:10px; bottom:10px; width:2px;
  background:var(--line2) }
.spine > li{ position:relative; margin:0 0 22px }
.spine > li:last-child{ margin-bottom:0 }
.spine > li::before{ content:""; position:absolute; left:-34px; top:6px; width:14px; height:14px;
  border-radius:50%; background:var(--bg); border:2.5px solid var(--accent) }
.spine > li.wall::before{ border-color:var(--accent2); background:var(--accent2) }
.spine > li.done-node::before{ background:var(--accent) }

.s-do{ font-weight:650; font-size:1.02rem; display:block; margin-bottom:2px }
.s-note{ font-size:.94rem; color:var(--dim); margin:0 }

/* A wall says what breaks, then what you need, then where it is taught. The
   middle line is the load-bearing one: a link on its own teaches nothing. */
.s-need{ margin:8px 0 0; padding:11px 14px; background:var(--panel2);
  border-left:2.5px solid var(--accent2); border-radius:0 8px 8px 0 }
.s-need .lbl{ display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent2); font-weight:700; margin-bottom:4px }
.s-need p{ margin:0 0 7px; font-size:.94rem }
.s-need a{ display:block; font-size:.88rem; padding:2px 0; text-decoration:none;
  color:var(--accent) }
.s-need a:hover{ text-decoration:underline }
.s-need a .ct{ font-family:var(--mono); font-size:.74rem; color:var(--dimmer); margin-right:7px }

/* ------------------------------------------------------------------ passes */
.passes{ display:grid; gap:12px; margin-top:18px;
  grid-template-columns:repeat(auto-fit,minmax(228px,1fr)) }
.pass{ border:1px solid var(--line); border-radius:12px; background:var(--panel); padding:15px 16px }
.pass h3{ margin:0 0 5px; font-size:.98rem }
.pass p{ margin:0; font-size:.9rem; color:var(--dim) }
.pass.first{ border-color:var(--on) }

/* ------------------------------------------------------------ the gallery */
.tierband{ margin:44px 0 0 }
.tierband h2{ margin:0 0 3px; font-size:1.35rem }
.tierband .tb-blurb{ margin:0 0 16px; color:var(--dim); font-size:.95rem }
.buildgrid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)) }
.bcard{ display:flex; flex-direction:column; gap:7px; padding:17px 18px;
  border:1px solid var(--line); border-radius:14px; background:var(--panel);
  text-decoration:none; color:inherit; transition:border-color .14s }
.bcard:hover{ border-color:var(--accent2); text-decoration:none }
.bcard .bc-name{ font-weight:650; font-size:1.06rem; color:var(--txt) }
.bcard .bc-have{ font-size:.9rem; color:var(--dim) }
.bcard .bc-foot{ margin-top:auto; padding-top:11px; border-top:1px dashed var(--line);
  font-family:var(--mono); font-size:.73rem; color:var(--dimmer); line-height:1.6 }
.bcard.pending{ opacity:.72; cursor:default }
.bcard.pending:hover{ border-color:var(--line) }
.bc-soon{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--hot); font-weight:700 }

/* ------------------------------------------------- the two doors, on the hub */
.doors{ display:grid; gap:16px; grid-template-columns:1fr 1fr; margin:30px 0 0 }
@media (max-width:660px){ .doors{ grid-template-columns:1fr } }
.door{ display:flex; flex-direction:column; gap:8px; padding:24px 24px 22px;
  border:1px solid var(--line2); border-radius:16px; background:var(--panel);
  text-decoration:none; color:inherit; transition:border-color .14s, transform .14s }
.door:hover{ border-color:var(--accent); text-decoration:none }
@media (prefers-reduced-motion:no-preference){ .door:hover{ transform:translateY(-2px) } }
.door .d-k{ font-family:var(--mono); font-size:.7rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent); font-weight:700 }
.door.b .d-k{ color:var(--accent2) }
.door .d-t{ font-size:1.28rem; font-weight:650; color:var(--txt); line-height:1.24 }
.door .d-w{ font-size:.94rem; color:var(--dim); margin:0 }
.door .d-go{ margin-top:6px; font-size:.88rem; color:var(--accent); font-weight:600 }
.door.b .d-go{ color:var(--accent2) }

/* The one named default, for the visitor who cannot answer the two doors. */
.nodefault{ margin:18px 0 0; padding:14px 18px; border:1px dashed var(--line2);
  border-radius:12px; background:var(--panel2); font-size:.95rem; color:var(--dim) }
.nodefault a{ font-weight:650 }

/* ---------------------------------------------------------------- the hero
   A real widget lives here, not a picture of one. The frame is deliberately
   quiet so the thing inside it is what you look at. */
.herolab{ border:1px solid var(--line2); border-radius:16px; background:var(--panel);
  padding:18px 18px 14px; margin:26px 0 0; box-shadow:var(--shadow) }
.herolab .hl-cap{ margin:12px 0 0; font-size:.95rem; color:var(--dim) }
.herolab .hl-cap b{ color:var(--txt) }

/* --------------------------------------------------------- project diagrams
   These are working sketches, not hero decoration. Each one exposes a state,
   signal or failure that the project text asks the reader to reason about. */
.project-visual{ padding:0; overflow:hidden; margin-top:30px }
.pv-head{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px;
  align-items:start; padding:18px 20px 16px; border-bottom:1px solid var(--line) }
.pv-kicker{ margin:0 0 4px; font-family:var(--mono); font-size:.68rem; line-height:1.4;
  letter-spacing:.11em; text-transform:uppercase; color:var(--accent); font-weight:700 }
.pv-title{ margin:0; font-size:1.12rem; line-height:1.28 }
.pv-explain{ margin:6px 0 0; color:var(--dim); font-size:.91rem; max-width:64ch }
.pv-badge{ align-self:center; border:1px solid var(--line2); border-radius:999px;
  padding:5px 9px; color:var(--dim); font-family:var(--mono); font-size:.68rem;
  white-space:nowrap }
.pv-work{ padding:18px 20px; background:var(--panel2) }
.pv-stage{ min-height:250px; display:grid; place-items:center; overflow:auto;
  border:1px solid var(--line); border-radius:12px; background:var(--panel) }
.pv-svg{ display:block; width:100%; height:auto; min-height:250px; color:var(--txt) }
.pv-svg .ink{ stroke:var(--txt); fill:none }
.pv-svg .line{ stroke:var(--line2); fill:none }
.pv-svg .accent{ stroke:var(--accent); fill:none }
.pv-svg .accent-fill{ fill:var(--accent); stroke:var(--accent) }
.pv-svg .hot{ stroke:var(--accent2); fill:none }
.pv-svg .hot-fill{ fill:var(--accent2); stroke:var(--accent2) }
.pv-svg .panel{ fill:var(--panel2); stroke:var(--line2) }
.pv-svg .paper{ fill:var(--panel); stroke:var(--line) }
.pv-svg .muted-fill{ fill:var(--line2); stroke:var(--line2) }
.pv-svg .panel.accent{ stroke:var(--accent) }
.pv-svg .paper.hot{ stroke:var(--accent2) }
.pv-svg text{ fill:var(--txt); font-family:var(--mono); font-size:12px }
.pv-svg text.dim{ fill:var(--dim) }
.pv-svg text.tiny{ font-size:10px }
.pv-controls{ display:flex; flex-wrap:wrap; align-items:end; gap:10px; margin-top:14px }
.pv-btn{ appearance:none; border:1px solid var(--line2); border-radius:9px;
  background:var(--panel); color:var(--txt); min-height:38px; padding:8px 13px;
  font:600 .82rem/1.2 var(--sans); cursor:pointer }
.pv-btn:hover{ border-color:var(--accent) }
.pv-btn:disabled{ opacity:.55; cursor:wait }
.pv-btn:focus-visible,.pv-field input:focus-visible,.pv-field select:focus-visible,
.pv-column:focus-visible{ outline:3px solid color-mix(in srgb,var(--accent) 32%,transparent);
  outline-offset:2px }
.pv-btn.primary{ color:var(--on); border-color:var(--on) }
.pv-btn[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent);
  color:var(--on-accent) }
.pv-field{ display:grid; gap:4px; min-width:150px; color:var(--dim);
  font:600 .72rem/1.2 var(--mono) }
.pv-field input[type="range"]{ width:180px; accent-color:var(--accent) }
.pv-field input[type="text"]{ width:min(280px,72vw); border:1px solid var(--line2);
  border-radius:8px; background:var(--panel); color:var(--txt); padding:9px 10px;
  font:500 .86rem/1.2 var(--sans) }
.pv-status{ min-height:1.45em; margin:12px 0 0; color:var(--dim);
  font:.79rem/1.45 var(--mono) }
.pv-status strong{ color:var(--txt) }
.project-visual .hl-cap{ padding:0 20px 16px; margin:0; background:var(--panel2) }

/* Small real interfaces used by the app, parser and shell projects. */
.pv-split{ display:grid; grid-template-columns:minmax(210px,.8fr) minmax(300px,1.2fr);
  gap:16px; width:100%; padding:16px }
.pv-miniapp,.pv-readout{ border:1px solid var(--line); border-radius:10px;
  background:var(--panel2); padding:14px }
.pv-miniapp h4,.pv-readout h4{ margin:0 0 10px; font-size:.9rem }
.pv-miniapp label{ display:grid; gap:5px; color:var(--dim); font-size:.78rem }
.pv-miniapp input{ min-width:0; width:100%; box-sizing:border-box; padding:8px 9px;
  border:1px solid var(--line2); border-radius:7px; background:var(--panel); color:var(--txt) }
.pv-mini-card{ margin-top:12px; padding:10px; border-left:3px solid var(--accent);
  background:var(--panel); color:var(--txt); font-size:.86rem }
.pv-flow{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px }
.pv-node{ position:relative; border:1px solid var(--line2); border-radius:8px;
  min-height:56px; padding:10px; background:var(--panel); color:var(--dim);
  font:.73rem/1.35 var(--mono) }
.pv-node b{ display:block; margin-bottom:2px; color:var(--txt); font-family:var(--sans);
  font-size:.82rem }
.pv-node.active{ border-color:var(--accent); box-shadow:inset 3px 0 0 var(--accent) }
.pv-code{ margin:0; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--txt);
  font:.76rem/1.55 var(--mono) }

/* Connect Four is a real board. The column buttons remain large enough to use
   on a phone and carry a readable label for screen readers. */
.pv-game{ width:min(480px,100%); padding:16px }
.pv-game-legend{ margin:0 0 9px; color:var(--dim); font:.76rem/1.4 var(--mono) }
.pv-board{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px;
  padding:8px; background:color-mix(in srgb,var(--accent) 18%,var(--panel));
  border:1px solid var(--line2); border-radius:10px }
.pv-column{ appearance:none; display:grid; grid-template-rows:repeat(6,1fr); gap:5px;
  min-width:0; padding:0; border:0; background:transparent; cursor:pointer }
.pv-cell{ position:relative; aspect-ratio:1; border-radius:50%; border:1px solid var(--line2);
  background:var(--panel) }
.pv-cell.you{ background:var(--accent); border-color:var(--accent) }
.pv-cell.ai{ background:var(--accent2); border-color:var(--accent2) }
.pv-cell.you::after{ content:""; position:absolute; width:24%; aspect-ratio:1; border-radius:50%;
  background:var(--on-accent); left:38%; top:38% }
.pv-cell.ai::after{ content:""; position:absolute; width:34%; aspect-ratio:1; border-radius:50%;
  border:2px solid var(--on-accent); left:29%; top:29%; box-sizing:border-box }
.pv-column:hover .pv-cell:first-child{ border-color:var(--accent) }

/* The hub visual lets the project data itself drive the diagram. */
.pv-atlas{ margin:30px 0 6px }
.pv-atlas-grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(230px,.65fr);
  gap:18px; padding:18px 20px; background:var(--panel2) }
.pv-tier-row{ display:grid; grid-template-columns:90px minmax(0,1fr); gap:12px;
  align-items:start; padding:8px 0; border-bottom:1px solid var(--line) }
.pv-tier-row:last-child{ border-bottom:0 }
.pv-tier-label{ padding-top:6px; color:var(--dim); font:.7rem/1.3 var(--mono) }
.pv-projects{ display:flex; flex-wrap:wrap; gap:7px }
.pv-project-chip{ appearance:none; border:1px solid var(--line2); border-radius:999px;
  background:var(--panel); color:var(--txt); padding:6px 9px; cursor:pointer;
  font:600 .72rem/1.2 var(--sans) }
.pv-project-chip[aria-pressed="true"]{ border-color:var(--accent); color:var(--accent) }
.pv-atlas-card{ border:1px solid var(--line2); border-radius:12px; background:var(--panel);
  padding:16px; align-self:stretch }
.pv-atlas-card h3{ margin:0 0 8px; font-size:1rem }
.pv-atlas-card p{ margin:0 0 12px; color:var(--dim); font-size:.85rem }
.pv-atlas-card a{ display:inline-block; font-weight:650; font-size:.84rem }
.pv-atlas-meta{ margin-bottom:10px; color:var(--dimmer); font:.7rem/1.4 var(--mono) }

@media (max-width:700px){
  .pv-head{ grid-template-columns:1fr }
  .pv-badge{ justify-self:start }
  .pv-split,.pv-atlas-grid{ grid-template-columns:1fr }
  .pv-stage,.pv-svg{ min-height:220px }
  .pv-stage > .pv-svg{ width:640px; min-width:640px }
  .pv-tier-row{ grid-template-columns:1fr; gap:4px }
}
@media (max-width:430px){
  .project-visual{ margin-left:-4px; margin-right:-4px }
  .pv-head,.pv-work{ padding-left:14px; padding-right:14px }
  .project-visual .hl-cap{ padding-left:14px; padding-right:14px }
  .pv-field{ width:100% }
  .pv-field input[type="range"]{ width:100% }
  .pv-btn{ flex:1 1 auto }
}
@media (prefers-reduced-motion:reduce){
  .pv-svg *{ animation:none!important; transition:none!important }
}