/* /work/ai-pipeline/ — six sessions, one coordinator, no shared files. Mobile first. */

body[data-page="ai-pipeline"] {
  --ap-bg: #030805;
  --ap-panel: #06100a;
  --ap-panel-2: #0a1810;
  --ap-line: rgba(41, 255, 131, .22);
  --ap-line-2: rgba(41, 255, 131, .45);
  --ap-green: #29ff83;
  --ap-green-dim: #8fd9ad;
  --ap-amber: #ffb547;
  --ap-cyan: #77f5ff;
  --ap-text: #e3ece6;
  --ap-body: #c6d3cb;
  --ap-muted: #8ea398;
  --ap-mono: "JetBrains Mono", var(--font-mono);
}
body[data-page="ai-pipeline"] main { background: var(--ap-bg); }
.ap { color: var(--ap-text); overflow-x: clip; }
.ap .eyebrow { margin: 0 0 14px; color: var(--ap-green); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.ap .eyebrow a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; }
.ap-h2 { margin: 0; font-family: "Space Grotesk", var(--font-display); font-size: clamp(1.8rem, 6vw, 3.1rem); line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; color: #fff; }
.ap-prose, .ap-prose p, .ap-prose li { color: var(--ap-body); }
.ap-prose strong { color: #fff; }
.ap-prose a { color: var(--ap-green); }
.ap-em { color: #fff; }
.ap code { font: .85em/1.4 var(--ap-mono); color: var(--ap-green-dim); word-break: break-all; }

/* ---------- cover ---------- */
.ap-cover { padding-top: clamp(12px, 3vw, 32px); padding-bottom: clamp(28px, 5vw, 56px); }
.ap-title { margin: 0; font-family: "Space Grotesk", var(--font-display); font-size: clamp(2.3rem, 11vw, 5.4rem); line-height: .98; letter-spacing: -.05em; text-wrap: balance; color: #fff; }
.ap-deck { margin: 16px 0 0; max-width: 34ch; color: var(--ap-body); font-size: clamp(1.05rem, 1rem + .6vw, 1.4rem); line-height: 1.45; }

/* the wall: six panes, the coordinator, the output */
.ap-wall { position: relative; margin: clamp(26px, 5vw, 48px) 0 0; padding: 10px; border: 1px solid var(--ap-line); background: radial-gradient(120% 90% at 50% 0%, #07150c 0%, #020604 70%); box-shadow: 0 0 80px rgba(41, 255, 131, .06); }
.ap-panes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ap-pane { min-width: 0; }
.ap-pane__open {
  display: flex; flex-direction: column; gap: 6px; width: 100%; height: 100%; min-height: 148px; padding: 0 0 10px; text-align: left; cursor: pointer;
  border: 1px solid rgba(41, 255, 131, .26); border-radius: 3px; background: var(--ap-panel); color: var(--ap-text);
  font: 400 .8125rem/1.45 var(--ap-mono);
  transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.ap-pane__open:hover { border-color: var(--ap-line-2); background: var(--ap-panel-2); }
.ap-pane__open:active { transform: translateY(1px); }
.ap-pane__bar { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid rgba(41, 255, 131, .16); background: rgba(41, 255, 131, .06); color: var(--ap-muted); font-size: .75rem; }
.ap-pane__bar b { color: var(--ap-green); font-weight: 700; }
.ap-pane__slice { padding: 4px 8px 0; color: #fff; font: 600 .9375rem/1.25 "Space Grotesk", var(--font-display); }
.ap-pane__line { padding: 0 8px; color: var(--ap-body); }
.ap-pane__ok { margin-top: auto; padding: 0 8px; color: var(--ap-green); font-size: .75rem; }
.ap-pane__ok::before { content: "● "; }
.ap-pane__ok--retry { color: var(--ap-amber); }
.ap-rec { display: none; }
.ap-coord { margin-top: 8px; padding: 0 0 10px; border: 1px solid rgba(119, 245, 255, .35); border-radius: 3px; background: #04090d; font: .8125rem/1.5 var(--ap-mono); }
.ap-coord__bar { margin: 0; padding: 6px 8px; border-bottom: 1px solid rgba(119, 245, 255, .2); background: rgba(119, 245, 255, .07); color: var(--ap-cyan); font-size: .75rem; }
.ap-coord__bar b { margin-right: 6px; }
.ap-coord__lead { margin: 8px 8px 6px; color: var(--ap-text); }
.ap-coord__log { list-style: none; margin: 0 8px; padding: 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 2px 14px; color: var(--ap-body); }
.ap-coord__log b { color: var(--ap-cyan); font-weight: 600; margin-right: 6px; }
.ap-output { display: flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 8px; padding: 8px 12px; border: 1px solid var(--ap-line); color: #fff; text-decoration: none; font: 600 1.125rem/1.2 "Space Grotesk", var(--font-display); transition: border-color .2s var(--ease-out); }
.ap-output span:first-child { color: var(--ap-muted); font: .75rem/1 var(--ap-mono); text-transform: uppercase; letter-spacing: .1em; }
.ap-output:hover { border-color: var(--ap-line-2); }
.ap-wall figcaption { margin: 12px 2px 2px; color: var(--ap-muted); font: .75rem/1.6 var(--ap-mono); }

/* the focused pane (JS): one record, large */
.ap-focus {
  position: absolute; z-index: 5; inset: 10px; overflow: auto; overscroll-behavior: contain;
  border: 1px solid var(--ap-line-2); border-radius: 3px; background: #020a05; box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  font: .9375rem/1.6 var(--ap-mono); color: var(--ap-text);
}
.ap-focus__bar { position: sticky; top: 0; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-bottom: 1px solid rgba(41, 255, 131, .2); background: #06140b; color: var(--ap-muted); font-size: .8125rem; }
.ap-focus__bar b { color: var(--ap-green); }
.ap-focus__close { margin-left: auto; min-height: 44px; min-width: 44px; padding: 0 14px; border: 1px solid var(--ap-line-2); border-radius: 2px; background: transparent; color: var(--ap-text); font: 600 1rem/1 "Space Grotesk", var(--font-display); cursor: pointer; }
.ap-focus__close:hover { background: rgba(41, 255, 131, .08); }
.ap-focus__body { padding: 14px 16px 18px; }
.ap-focus__slice { margin: 0 0 12px; color: #fff; font: 600 clamp(1.25rem, 4vw, 1.6rem)/1.2 "Space Grotesk", var(--font-display); }
.ap-focus .ap-rec { display: grid; grid-template-columns: 1fr; gap: 2px 18px; }
.ap-focus .ap-rec p { margin: 0 0 10px; color: var(--ap-body); }
.ap-rec__q { margin: 0 0 12px; padding: 0 0 0 14px; list-style: none; border-left: 2px solid var(--ap-line-2); }
.ap-rec__q li { margin: 0 0 8px; color: var(--ap-green-dim); font-size: .875rem; line-height: 1.55; word-break: break-word; }
.ap-focus .ap-rec .ap-rec__k { margin: 6px 0 2px; color: var(--ap-green); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; }

/* ---------- intro, photo, sections ---------- */
.ap-intro { padding-bottom: clamp(30px, 6vw, 64px); }
.ap-meta { list-style: none; margin: 0; padding: 14px 0; display: flex; flex-wrap: wrap; gap: 8px 20px; border-block: 1px solid var(--ap-line); font: .75rem/1.6 var(--ap-mono); color: var(--ap-muted); }
.ap-meta > li > span:not(.badge) { margin-right: 6px; color: var(--ap-green); text-transform: uppercase; letter-spacing: .08em; }
.ap-meta a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ap-text); }
.ap-intro .lead { margin: 22px 0 0; max-width: 62ch; color: var(--ap-body); font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem); line-height: 1.6; }
.ap-intro .lead strong { color: #fff; }
.ap-photo { margin: 0 auto; }
.ap-photo picture, .ap-march img { display: block; overflow: hidden; border: 1px solid var(--ap-line); }
.ap-photo img { display: block; width: 100%; height: auto; }
.ap-photo figcaption, .ap-march figcaption { margin-top: 10px; color: var(--ap-muted); font: .75rem/1.6 var(--ap-mono); }
.ap-sec { padding-top: clamp(40px, 8vw, 96px); }
.ap-sec .ap-h2 { margin-bottom: 18px; }
.ap-split { display: grid; gap: 24px; }
.ap-march { margin: 0; }
.ap-march img { width: 100%; height: auto; }
.ap-table { margin-top: 24px; }

/* ---------- seven windows ---------- */
.ap-wave { margin-top: clamp(48px, 9vw, 112px); padding-top: clamp(36px, 7vw, 80px); border-top: 1px solid var(--ap-line); background: radial-gradient(110% 60% at 50% 0%, #0a1a10 0%, var(--ap-bg) 60%); }
.ap-wave__head { max-width: 900px; padding-bottom: 24px; }
.ap-wave__lede { margin: 16px 0 0; max-width: 60ch; color: var(--ap-body); line-height: 1.65; }
.ap-wave__note { margin-top: 18px; padding-bottom: 8px; color: var(--ap-muted); font: .75rem/1.6 var(--ap-mono); }
/* static: the steps as a list */
.ap-stage, .ap-rail { display: none; }
.ap-steps { list-style: none; margin: 0 auto; padding: 0 var(--rebuild-gutter); max-width: var(--rebuild-max); display: grid; gap: 14px; }
.ap-step { padding: 14px 16px; border: 1px solid var(--ap-line); border-left: 3px solid var(--ap-green); background: var(--ap-panel); }
.ap-step__tag { margin: 0 0 6px; color: var(--ap-green); font: 700 .75rem/1.4 var(--ap-mono); text-transform: uppercase; letter-spacing: .1em; }
.ap-step__tag span { color: var(--ap-muted); margin-right: 8px; }
.ap-step__what { margin: 0; color: #fff; font: 500 1rem/1.5 "Space Grotesk", var(--font-display); }
.ap-step__sys { margin: 10px 0 0; padding-top: 8px; border-top: 1px dashed rgba(119, 245, 255, .35); color: var(--ap-body); font-size: .9375rem; line-height: 1.55; }
.ap-step__sys b { color: var(--ap-cyan); font-weight: 600; }

/* live: pinned, the round types itself into seven windows over the rig */
.ap-wave.is-live .ap-wave__pin { position: relative; height: 100svh; overflow: hidden; }
.ap-wave.is-live .ap-stage { display: block; position: absolute; inset: 0; background: #020504; }
.ap-stage__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: .22; }
.ap-screens {
  position: absolute; left: 10px; right: 10px; top: 10px; bottom: 46%;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)) minmax(0, .9fr); gap: 6px;
  transform-origin: 50% 0;
}
/* the site header returns on scroll up and sits over the pinned scene: the windows step down with it (phone) */
.ap-wave.is-live .ap-screens { transition: translate .5s cubic-bezier(.22, .61, .36, 1); }
body:has(.site-header:not(.is-tucked)) .ap-wave.is-live .ap-screens { translate: 0 72px; }
.ap-screen { position: relative; min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; border: 1px solid rgba(41, 255, 131, .3); border-radius: 3px; background: rgba(3, 10, 6, .92); }
.ap-screen--coord { grid-column: 1 / -1; border-color: rgba(119, 245, 255, .4); background: rgba(3, 8, 12, .94); }
.ap-screen__bar { margin: 0; padding: 4px 6px; border-bottom: 1px solid rgba(41, 255, 131, .16); color: var(--ap-green); font: 700 .75rem/1.2 var(--ap-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-screen--coord .ap-screen__bar { color: var(--ap-cyan); border-bottom-color: rgba(119, 245, 255, .2); }
.ap-screen__log { flex: 1; margin: 0; padding: 4px 6px; overflow: hidden; color: var(--ap-body); font: .75rem/1.4 var(--ap-mono); white-space: pre-wrap; word-break: break-word; }
@media (max-width: 820px) { .ap-screen__log { display: flex; flex-direction: column; justify-content: flex-end; } }
.ap-screen__log .is-retry { color: var(--ap-amber); }
.ap-screen__log .is-ok { color: var(--ap-green); }
.ap-screen.is-flag { border-color: var(--ap-amber); }
.ap-wave.is-live .ap-steps { position: absolute; left: 10px; right: 10px; bottom: 26px; padding: 0; display: grid; max-width: none; margin: 0; }
.ap-wave.is-live .ap-step { grid-area: 1 / 1; align-self: end; opacity: 0; visibility: hidden; background: rgba(4, 12, 7, .96); box-shadow: 0 14px 40px rgba(0, 0, 0, .6); }
.ap-wave.is-live .ap-rail { display: flex; position: absolute; left: 10px; right: 10px; bottom: 10px; margin: 0; padding: 0; list-style: none; gap: 4px; }
.ap-wave.is-live .ap-rail li { position: relative; flex: 1; height: 4px; background: rgba(41, 255, 131, .16); overflow: hidden; }
.ap-wave.is-live .ap-rail li i { position: absolute; inset: 0; background: var(--ap-green); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- the record, as dots ---------- */
.ap-strip { padding-top: clamp(48px, 9vw, 112px); }
.ap-strip__head { max-width: 900px; }
.ap-strip__lede { margin: 16px 0 0; max-width: 64ch; color: var(--ap-body); line-height: 1.65; }
.ap-legend { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--ap-body); font: .8125rem/1.5 var(--ap-mono); }
.ap-legend li { display: inline-flex; align-items: center; gap: 8px; }
.ap-legend b { color: #fff; font-weight: 600; }
.ap-legend i { width: 10px; height: 10px; display: inline-block; }
.k-build { background: #29ff83; } .k-fix { background: #ff9f43; } .k-polish { background: #77f5ff; } .k-check { background: #c69cff; } .k-none { background: #6f7a86; }
.k-lost { border: 2px solid #ff5d5d; border-radius: 50%; }
.ap-dots { margin: 18px 0 0; }
.ap-dots__frame { position: relative; overflow: hidden; border: 1px solid var(--ap-line); background: #030805; cursor: crosshair; }
.ap-dots__frame img { display: block; width: 100%; height: auto; }
.ap-dots__veil { position: absolute; inset: 0; background: #030805; transform-origin: 50% 100%; transform: scaleY(0); pointer-events: none; }
.ap-dots__readout { min-height: 3em; margin: 10px 0 0; color: var(--ap-text); font: .8125rem/1.6 var(--ap-mono); }
.ap-dots__readout b { color: var(--ap-green); }
.ap-dots figcaption { margin-top: 6px; color: var(--ap-muted); font: .75rem/1.6 var(--ap-mono); }
.ap-notes { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.ap-notes li { padding: 10px 14px; border-left: 3px solid var(--ap-line-2); background: var(--ap-panel); color: var(--ap-body); font-size: .9375rem; line-height: 1.55; }
.ap-notes b { display: block; color: var(--ap-green); font: 700 .75rem/1.5 var(--ap-mono); text-transform: uppercase; letter-spacing: .1em; }

/* ---------- numbers, cta ---------- */
.ap-stats { margin-top: clamp(40px, 8vw, 96px); }
.ap-cta { padding-top: clamp(48px, 8vw, 96px); padding-bottom: clamp(48px, 8vw, 96px); text-align: center; }
.ap-cta .eyebrow { margin-top: 18px; }

/* ---------- wider screens ---------- */
@media (min-width: 600px) {
  .ap-panes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ap-focus .ap-rec { grid-template-columns: 110px 1fr; }
  .ap-focus .ap-rec .ap-rec__k { margin: 0; padding-top: 2px; }
}
@media (min-width: 821px) {
  .ap-cover { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.4fr); gap: clamp(28px, 4vw, 56px); align-items: end; }
  .ap-title { font-size: clamp(2.6rem, 5vw, 4.5rem); }
  .ap-wall { margin-top: 0; display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 8px; }
  .ap-panes { grid-column: 1; grid-row: 1 / span 2; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; }
  .ap-coord { grid-column: 2; grid-row: 1; margin: 0; }
  .ap-coord__log { grid-template-columns: 1fr; }
  .ap-output { grid-column: 2; grid-row: 2; margin: 0; align-self: end; }
  .ap-wall figcaption { grid-column: 1 / -1; }
  .ap-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
  .ap-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ap-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .ap-wave.is-live .ap-stage__photo { opacity: .3; object-position: 50% 30%; }
  body:has(.site-header:not(.is-tucked)) .ap-wave.is-live .ap-screens { translate: none; }
  .ap-wave.is-live .ap-screens { left: var(--rebuild-gutter); right: calc(var(--rebuild-gutter) + 440px); top: calc(72px + 3vh); bottom: 7vh; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)) minmax(0, .7fr); gap: 10px; }
  .ap-wave.is-live .ap-screen__log { font-size: .8125rem; padding: 6px 8px; }
  .ap-wave.is-live .ap-screen__bar { font-size: .8125rem; padding: 6px 8px; }
  .ap-wave.is-live .ap-steps { left: auto; right: var(--rebuild-gutter); top: 72px; bottom: 0; width: 400px; grid-template-columns: minmax(0, 1fr); align-content: center; }
  .ap-wave.is-live .ap-step { align-self: center; padding: 20px 22px; }
  .ap-wave.is-live .ap-step__what { font-size: 1.125rem; }
  .ap-wave.is-live .ap-rail { left: var(--rebuild-gutter); right: calc(var(--rebuild-gutter) + 440px); bottom: 3vh; }
}