/* Section components: everything below the fold.

   Split out of style.css because that file hit the 600-line budget, and the last
   time it did I made room by deleting rules that were still in use -- .trio and
   .tag went, and the "trying things nobody else is" section rendered unstyled on
   a preview before anyone caught it. A second file is cheaper than that trade.

   style.css keeps the tokens, the base type, the nav and the hero. This has the
   pieces each section is built from, in the order they appear on the page. */

/* --- sections --------------------------------------------------------------*/

section { padding: clamp(3rem, 7vw, 4.5rem) 0; }
section + section { border-top: 1px solid var(--edge); }
.below { content-visibility: auto; contain-intrinsic-size: auto 700px; }
.head { max-width: 60ch; margin-bottom: 2rem; }
.head p { margin-top: 0.8rem; color: var(--fg-2); }

/* --- the lane strip --------------------------------------------------------*/

.board { position: relative; }
.lanes { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.lane {
  position: relative;
  padding: 0.9rem;
  border-radius: var(--r);
  background: var(--surface-1);
  border: 1px solid var(--edge);
}
.lane-name { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; color: var(--fg-2); }
.lane-name i { width: 7px; height: 7px; border-radius: 50%; background: var(--hue); }
.lane p { margin-top: 0.6rem; font-size: 0.87rem; color: var(--fg-3); }
.lane:nth-child(1) { --hue: var(--todo); }
.lane:nth-child(2) { --hue: var(--progress); }
.lane:nth-child(3) { --hue: var(--pending); }
.lane:nth-child(4) { --hue: var(--review); }
.lane:nth-child(5) { --hue: var(--done); }

/* The travelling card only exists where it can travel. Without scroll-driven
   animation the five lanes stand alone, which is also the reduced-motion state. */


/* --- the travelling ticket card -------------------------------------------*/

.rail { display: none; }
.tcard {
  display: grid;
  gap: 0.5rem;
  padding: 0.7rem 0.75rem;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--edge-3);
  box-shadow: 0 16px 34px -14px oklch(0 0 0 / 0.85);
}
.tid { font-family: var(--mono); font-size: 0.64rem; color: var(--fg-3); }
.ttitle { font-size: 0.8rem; line-height: 1.35; color: var(--fg); }
.tstates { display: grid; }  /* five status rows stacked in one cell */
.ts {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  color: var(--fg-2);
  opacity: 0;
}
.ts i { width: 6px; height: 6px; border-radius: 50%; background: var(--hue, var(--todo)); flex: none; }
.ts[data-s="todo"] { --hue: var(--todo); opacity: 1; }
.ts[data-s="prog"] { --hue: var(--progress); }
.ts[data-s="pend"] { --hue: var(--pending); }
.ts[data-s="rev"]  { --hue: var(--review); }
.ts[data-s="done"] { --hue: var(--done); }
.tfoot { display: flex; align-items: center; gap: 0.5rem; }
.tbranch { font-family: var(--mono); font-size: 0.62rem; color: var(--fg-3); }
.tbar { flex: 1; height: 3px; border-radius: 2px; background: var(--edge-2); overflow: hidden; }
.tbar b { display: block; height: 100%; width: 8%; border-radius: 2px; background: var(--progress); }

/* --- interactive bits: the gate and the plan mock -------------------------*/

.art-note { margin-top: 0.8rem; font-size: 0.82rem; color: var(--fg-3); }
.art-note[data-said] { color: var(--fg-2); }

.choices button {
  padding: 0.4rem 0.75rem; border-radius: var(--r-sm); border: 1px solid var(--edge-2);
  background: var(--surface-2); color: var(--fg-2); cursor: pointer;
  font: 500 0.78rem var(--sans);
  transition: transform 0.3s var(--spring), background 0.15s, color 0.15s;
}
.choices button:hover { background: var(--surface-1); color: var(--fg); }
.choices button:active { transform: scale(0.95); }
.choices button[data-primary] { background: var(--accent-hi); border-color: transparent; color: oklch(0.17 0.03 285); }
.choices button[data-deny] { color: oklch(0.78 0.15 25); }
.choices button[data-chosen] { outline: 2px solid var(--accent-hi); outline-offset: 2px; }

.plan-bar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.8rem; }
.plan-bar .art-head { margin: 0; }
.plan-toggle {
  margin-left: auto; padding: 0.25rem 0.6rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--edge-2); background: var(--surface-2);
  font: 500 0.72rem var(--sans); color: var(--fg-2);
}
.plan-toggle[aria-pressed="true"] { background: var(--accent-hi); border-color: transparent; color: oklch(0.17 0.03 285); }

.plan-body { display: grid; gap: 0.45rem; }
.plan-opts { display: grid; gap: 0.45rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pel-k { display: block; margin-bottom: 0.25rem; font-family: var(--mono);
  font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
.plan-svg { display: block; width: 100%; height: auto; margin-top: 0.2rem; color: var(--fg-2); }

/* Every element is pickable, not just designated ones: that is what the board
   does, and a demo that only lets you click four chosen rows misdescribes it. */
.pel {
  position: relative; padding: 0.55rem 0.7rem; border-radius: var(--r-sm);
  border: 1px solid transparent; background: var(--surface-0);
  color: var(--fg-2); font: 400 0.84rem/1.4 var(--sans);
}
[data-annotating] .pel { border-style: dashed; border-color: var(--edge-2); cursor: crosshair; }
[data-annotating] .pel:hover, [data-annotating] .pel:focus-visible { border-color: var(--accent-hi); color: var(--fg); }
.pel[data-picked] { border-style: solid; border-color: var(--accent-hi); }
.pel[data-pinned]::after {
  content: attr(data-pinned); position: absolute; top: -8px; right: -8px;
  width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%;
  background: var(--accent-hi); color: oklch(0.17 0.03 285);
  font: 600 0.6rem var(--sans); box-shadow: 0 0 0 3px var(--surface-1);
}

/* Docked at the bottom of the plan, as it is on the board. */
.plan-composer {
  margin-top: 0.8rem; display: grid; gap: 0.5rem; padding: 0.7rem; border-radius: var(--r-sm);
  border: 1px solid var(--edge-2); background: var(--surface-2);
}
.composer-head { font-size: 0.76rem; color: var(--fg-3); }
.composer-head b { color: var(--fg); font-family: var(--mono); font-size: 0.72rem; font-weight: 400; }
.composer-types { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.composer-types button {
  padding: 0.22rem 0.55rem; border-radius: var(--r-sm); cursor: pointer;
  border: 1px solid var(--edge-2); background: var(--surface-1); font: 500 0.72rem var(--sans); color: var(--fg-3);
}
.composer-types button[aria-pressed="true"] { border-color: var(--accent-hi); color: var(--fg); }
.plan-composer input {
  padding: 0.45rem 0.6rem; border-radius: var(--r-sm); border: 1px solid var(--edge-2);
  background: var(--surface-0); font: 400 0.82rem var(--sans); color: var(--fg);
}
.composer-actions { display: flex; gap: 0.5rem; align-items: center; }
.composer-actions .plan-toggle { margin-left: 0; }

.plan-notes { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.note-row {
  display: flex; align-items: baseline; gap: 0.45rem; padding: 0.4rem 0.5rem;
  border-radius: var(--r-sm); background: var(--surface-0); font-size: 0.78rem; color: var(--fg-2);
}
.note-n {
  flex: none; width: 16px; height: 16px; display: grid; place-items: center;
  align-self: center; border-radius: 50%; background: var(--accent-hi);
  color: oklch(0.17 0.03 285); font: 600 0.58rem var(--sans);
}
.note-type {
  flex: none; font-family: var(--mono); font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-3);
}
.note-row[data-type="delete"] .note-type { color: oklch(0.78 0.15 25); }
.note-row[data-type="replace"] .note-type { color: var(--accent-hi); }
.note-ref { flex: none; font-family: var(--mono); font-size: 0.62rem; color: var(--fg-3); }
.note-body { flex: 1; min-width: 0; }
.note-x { flex: none; border: 0; background: none; cursor: pointer; padding: 0 0.2rem;
  color: var(--fg-3); font-size: 0.95rem; line-height: 1; }
.note-x:hover { color: var(--fg); }

/* --- the pipeline diagram -------------------------------------------------*/

/* Colour and dim state live here, not on the SVG's presentation attributes, so
   the motion layer has something to animate. CSS beats a presentation attribute,
   so the inline fill/stroke are just the no-CSS fallback. Nodes are dim and the
   flow is invisible by default: that is the still state, and the whole diagram
   is readable in it. */
.nodes > g { --hue: var(--progress); }
.nodes > g:last-child { --hue: var(--pending); }   /* the gate */
.nodes rect {
  fill: var(--hue); fill-opacity: 0.16;
  stroke: var(--hue); stroke-opacity: 0.8; stroke-width: 1;
}
/* The edges are structure, not signal: they should sit back so the thing moving
   along them is what the eye goes to. At full currentColor they read as harsh
   white wires and out-shout the nodes. */
.edges path { opacity: 0.3; }
.flow path { stroke: var(--accent-hi); opacity: 0; }

/* --- engines --------------------------------------------------------------*/

/* One row shape, three fillings: engines, the quality report, the manifest. The
   panels differ in what each row says, not in how a row looks. */
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.rows li {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.6rem;
  min-width: 0; padding: 0.5rem 0.65rem; border: 1px solid transparent;
  border-radius: var(--r-sm); background: var(--surface-0);
}
.er-id { flex: none; font-family: var(--mono); font-size: 0.64rem; color: var(--fg-3); }
.er-t {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.82rem; color: var(--fg-2);
}
/* The engine chip carries the accent; codex gets the review hue so the row reads
   as "two different things" at a glance rather than needing to be read. */
.er-e {
  flex: none; padding: 0.12rem 0.45rem; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--progress) 45%, transparent);
  background: color-mix(in oklab, var(--progress) 12%, transparent);
  font-family: var(--mono); font-size: 0.62rem; font-weight: 400; color: var(--fg);
}
.er-e[data-e="codex"] {
  border-color: color-mix(in oklab, var(--review) 45%, transparent);
  background: color-mix(in oklab, var(--review) 12%, transparent);
}

/* --- the self-correction log ----------------------------------------------*/

/* Three steps, and the point is the third one: the agent was told and fixed it.
   A static pass/fail report showed the rule existed, not that it works. */
.fx-n {
  flex: none; width: 15px; height: 15px; display: grid; place-items: center;
  border-radius: 50%; background: var(--surface-2); color: var(--fg-3);
  font: 500 0.58rem var(--mono);
}
.fx-t { flex: 1; min-width: 8rem; font-size: 0.82rem; color: var(--fg-2); }
.fx-t code { color: var(--fg); }
.fx-v {
  flex: none; padding: 0.1rem 0.45rem; border-radius: 999px;
  font: 400 0.62rem var(--mono);
}
.fx-v[data-bad] { background: color-mix(in oklab, oklch(0.7 0.19 25) 15%, transparent); color: oklch(0.82 0.14 25); }
.fx-v[data-good] { background: color-mix(in oklab, var(--done) 14%, transparent); color: var(--done); }

/* --- what a plugin adds ---------------------------------------------------*/

.m-d { flex: 1; min-width: 9rem; font-size: 0.82rem; color: var(--fg-2); }
/* The one row that runs code is marked: that distinction is the whole security
   story, and it is the only reason a reader should care how plugins load. */
.rows li[data-exec] { border-color: color-mix(in oklab, var(--pending) 32%, transparent); }
.m-t {
  flex: none; font-family: var(--mono); font-size: 0.58rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: oklch(0.84 0.13 80);
}

/* --- the phone ------------------------------------------------------------*/

.phone-wrap { display: flex; justify-content: center; }
.phone {
  width: 268px; height: 540px; padding: 10px; flex: none; border-radius: 38px;
  background: var(--surface-2); border: 1px solid var(--edge-3); box-shadow: 0 40px 70px -34px oklch(0 0 0 / 0.9);
}
.phone-bar { display: block; width: 78px; height: 5px; margin: 2px auto 8px;
  border-radius: 999px; background: var(--edge-3); }
.phone-screen {
  height: calc(100% - 15px); overflow: hidden; border-radius: 28px;
  background: var(--surface-0); border: 1px solid var(--edge);
  /* fade both ends so the feed reads as a longer list than the frame shows */
  mask-image: linear-gradient(transparent, #000 9%, #000 91%, transparent); }
.phone-feed { display: grid; gap: 8px; padding: 12px; }
.pcard {
  display: grid; gap: 4px; padding: 9px 10px; border-radius: 9px;
  background: var(--surface-1); border: 1px solid var(--edge); font-size: 0.62rem; color: var(--fg-3);
}
.pcard i { width: 6px; height: 6px; border-radius: 50%; display: inline-block;
  margin-right: 5px; vertical-align: 1px; background: var(--hue, var(--todo)); }
.pcard b { font-weight: 450; font-size: 0.72rem; color: var(--fg-2); }
.pcard[data-s="todo"] { --hue: var(--todo); }
.pcard[data-s="prog"] { --hue: var(--progress); }
.pcard[data-s="pend"] { --hue: var(--pending); }
.pcard[data-s="rev"]  { --hue: var(--review); }
.pcard[data-s="done"] { --hue: var(--done); }

/* --- what the board is experimenting with --------------------------------*/

.trio { display: grid; gap: 1.8rem 2rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.trio h3 { margin-bottom: 0.4rem; }
.trio p { color: var(--fg-2); font-size: 0.94rem; }

/* exploring / shipping, in the board's own "pending" amber */
.tag {
  display: inline-block; margin-bottom: 0.6rem; padding: 0.1rem 0.5rem;
  border: 1px solid color-mix(in oklab, var(--pending) 40%, transparent);
  border-radius: 999px; font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.04em; text-transform: uppercase; color: oklch(0.84 0.13 80);
}

/* --- closing: provenance and the invitation, one section ------------------*/

.endcta { text-align: center; padding-block: clamp(5rem, 12vw, 8.5rem); }
/* The big lockup: the nav's tile, wordmark and byline at display size. */
.lockup { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.lockup .brand { gap: 0.9rem; }
.lockup .brand img { width: 56px; height: 56px; border-radius: var(--r); }
.lockup .wm { font-size: clamp(2.6rem, 8vw, 4.2rem); letter-spacing: -0.03em; }
.lockup .byline { font-size: 1rem; }
.endcta .endcta-tag { margin-top: 1.4rem; font: 400 0.8rem var(--mono); color: var(--fg-3); }
.endcta .badge-alt { margin-top: 1rem; }
.endcta h2 { margin: 0.6rem auto 0; max-width: 22ch; font-size: clamp(1.8rem, 4.6vw, 2.8rem); }
.endcta p { margin: 1.1rem auto 0; max-width: 58ch; color: var(--fg-2); }
.endcta-row { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center;
  align-items: center; margin-top: 2rem; }

/* --- artifacts -------------------------------------------------------------*/

.split { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.points { display: grid; gap: 1.4rem; }
.points h3 { margin-bottom: 0.4rem; }
.points p { color: var(--fg-2); font-size: 0.94rem; }

.art { padding: 1rem; border-radius: var(--r); background: var(--surface-1); border: 1px solid var(--edge); }
.art-head { display: flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.72rem; color: var(--fg-3); margin-bottom: 0.8rem; }
.art-head i { width: 7px; height: 7px; border-radius: 50%; background: var(--pending); }
.quote { padding: 0.8rem; border-radius: var(--r-sm); background: var(--surface-0); border: 1px solid var(--edge); font-size: 0.87rem; color: var(--fg-2); }
.quote code { color: var(--accent-hi); }
.choices { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.9rem; }
.choices b {
  padding: 0.35rem 0.7rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--edge-2);
  background: var(--surface-2);
  font: 500 0.78rem var(--sans);
  color: var(--fg-2);
}
.choices b:nth-child(3) { background: var(--accent-hi); border-color: transparent; color: oklch(0.17 0.03 285); }
.choices b:last-child { color: oklch(0.78 0.15 25); }
.dag { display: block; width: 100%; height: auto; }

/* --- footer -----------------------------------------------------------*/

footer { border-top: 1px solid var(--edge); padding: 2.5rem 0 3.5rem; }
footer .shell { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: center; font-size: 0.88rem; color: var(--fg-3); }
footer a { color: var(--fg-2); text-decoration: none; }
footer a:hover { color: var(--fg); }