/* /pipeline -- the visual explainer for how BODS data becomes a report.

   This began life as a standalone artifact, which owned the whole document and
   could style bare `body`, `section`, `table`. On the site it is one article
   inside a page that already has a header, so every rule here is scoped to
   `.pipe` and nothing leaks into the nav.

   The palette is deliberately its own: warm paper, serif body text, Archivo
   headings. The reports are dashboards and read like dashboards; this page is
   an argument you talk a room through, and it is the only page on the site set
   as a document. The tokens sit on `body.pipe-page` rather than on `.pipe` so
   the strip of page either side of the article is the same paper, not the grey
   the dashboards use. The status colours -- early/on time/late -- keep the same
   meanings they have everywhere else on the site.

   Loaded after nav.css: nothing below touches `.site-*`, so the header keeps
   its own type and palette. */


body.pipe-page{
  --paper:#f5f4ef; --surface:#fffefa; --surface-2:#eceada;
  --ink:#12120f; --ink-2:#54524a; --ink-3:#8a887e;
  --rule:#e0ded2; --rule-2:#cdcabb;
  --accent:#1f5fae; --accent-soft:#e6edf8;
  --early:#4a7fd0; --ontime:#1f9e57; --late:#c9741a; --vlate:#a4243b;
  --parked:#b6b3a6;
  --shadow:0 1px 2px rgba(18,18,15,.05), 0 8px 24px -18px rgba(18,18,15,.35);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) body.pipe-page{
    --paper:#0e0e0c; --surface:#171715; --surface-2:#232320;
    --ink:#f6f5ef; --ink-2:#b8b6ab; --ink-3:#817f76;
    --rule:#2a2a26; --rule-2:#3a3a34;
    --accent:#7fb0f0; --accent-soft:#1a2534;
    --early:#5b93de; --ontime:#29a468; --late:#d99a3a; --vlate:#c94f66;
    --parked:#4a4941;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -20px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"] body.pipe-page{
  --paper:#0e0e0c; --surface:#171715; --surface-2:#232320;
  --ink:#f6f5ef; --ink-2:#b8b6ab; --ink-3:#817f76;
  --rule:#2a2a26; --rule-2:#3a3a34;
  --accent:#7fb0f0; --accent-soft:#1a2534;
  --early:#5b93de; --ontime:#29a468; --late:#d99a3a; --vlate:#c94f66;
  --parked:#4a4941;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -20px rgba(0,0,0,.8);
}

.pipe *{box-sizing:border-box}
.pipe{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.pipe .wrap{max-width:1140px; margin:0 auto; padding:0 24px}
.pipe h1, .pipe h2, .pipe h3, .pipe .disp{font-family:Archivo,"Helvetica Neue",Arial,sans-serif; text-wrap:balance}
.pipe .mono, .pipe code, .pipe .num, .pipe th, .pipe .chip, .pipe .rail, .pipe .tag{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.pipe .num{font-variant-numeric:tabular-nums}
.pipe a{color:var(--accent)}
.pipe :where(a, .pipe button, .pipe input, .pipe summary):focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}

/* ---------- masthead ---------- */
.pipe .masthead{border-bottom:1px solid var(--rule); background:var(--surface)}
.pipe .masthead .wrap{padding-top:44px; padding-bottom:36px}
.pipe .eyebrow{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 18px}
.pipe h1{font-size:clamp(40px,6.4vw,72px); line-height:.98; font-weight:700; letter-spacing:-.025em; margin:0 0 18px}
.pipe .standfirst{font-size:clamp(19px,2.1vw,22px); line-height:1.45; color:var(--ink-2); max-width:62ch; margin:0 0 26px}
.pipe .standfirst strong{color:var(--ink); font-weight:600}
.pipe .provenance{display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center}
.pipe .tag{font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2);
  border:1px solid var(--rule-2); border-radius:2px; padding:5px 9px; background:var(--paper)}
.pipe .tag.live{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}

/* ---------- generic section rhythm ---------- */
.pipe section{border-bottom:1px solid var(--rule)}
.pipe section.hero{background:var(--paper)}
.pipe .stage{display:grid; grid-template-columns:170px minmax(0,1fr); gap:40px; padding:56px 0}
.pipe .rail{position:relative}
.pipe .rail .cadence{font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
  font-weight:500; display:block; margin-bottom:8px}
.pipe .rail .rail-note{font-family:"Source Serif 4",serif; font-size:14.5px; line-height:1.45; color:var(--ink-3)}
.pipe .stage h2{font-size:clamp(26px,3.2vw,34px); line-height:1.1; letter-spacing:-.02em; margin:0 0 14px; font-weight:600}
.pipe .stage h3{font-size:15px; letter-spacing:.02em; margin:32px 0 10px; font-weight:600}
.pipe .body p{max-width:66ch; margin:0 0 16px}
.pipe .body p.wide{max-width:none}
.pipe .lede{font-size:19px; color:var(--ink-2)}

/* ---------- hero replay ---------- */
.pipe .replay{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:34px; padding:44px 0 52px; align-items:start}
.pipe .side{display:grid; gap:14px; align-content:start}
.pipe .mapstack{display:grid; gap:14px}
.pipe .panel{background:var(--surface); border:1px solid var(--rule); border-radius:4px; box-shadow:var(--shadow); overflow:hidden}
.pipe .panel-hd{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:10px 14px; border-bottom:1px solid var(--rule); background:var(--surface-2)}
.pipe .panel-hd .who{font-family:Archivo,sans-serif; font-weight:600; font-size:13.5px; letter-spacing:.01em}
.pipe .panel-hd .bbox{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--ink-3)}
.pipe canvas{display:block; width:100%; height:auto; background:var(--surface)}
.pipe .controls{display:flex; align-items:center; gap:14px; padding:13px 14px; flex-wrap:wrap}
.pipe button.play{font-family:Archivo,sans-serif; font-size:13px; font-weight:600; letter-spacing:.02em;
  background:var(--ink); color:var(--paper); border:0; border-radius:3px; padding:8px 16px; cursor:pointer; min-width:92px}
.pipe button.play:hover{opacity:.86}
.pipe input[type=range]{flex:1; min-width:140px; accent-color:var(--accent)}
.pipe .clock{font-family:"IBM Plex Mono",monospace; font-size:13px; font-variant-numeric:tabular-nums; color:var(--ink-2); white-space:nowrap}
.pipe .toggle{display:flex; align-items:center; gap:7px; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-2); cursor:pointer}
.pipe .legend{display:flex; flex-wrap:wrap; gap:6px 16px; padding:0 14px 14px; border-top:1px solid var(--rule); padding-top:12px}
.pipe .legend span{display:inline-flex; align-items:center; gap:6px; font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--ink-2)}
.pipe .dot{width:9px; height:9px; border-radius:50%; display:inline-block}

/* ---------- readouts ---------- */
.pipe .readout{display:grid; gap:0; border:1px solid var(--rule); border-radius:4px; background:var(--surface); box-shadow:var(--shadow)}
.pipe .readout .row{display:grid; grid-template-columns:1fr auto; gap:16px; align-items:baseline;
  padding:13px 16px; border-bottom:1px solid var(--rule)}
.pipe .readout .row:last-child{border-bottom:0}
.pipe .readout .k{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-3)}
.pipe .readout .v{font-family:Archivo,sans-serif; font-weight:600; font-size:24px; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.pipe .readout .v small{font-family:"IBM Plex Mono",monospace; font-weight:400; font-size:12px; color:var(--ink-3); margin-left:6px}
.pipe .side .caption{margin-top:4px}
.pipe .caption{font-size:14.5px; line-height:1.5; color:var(--ink-3); max-width:52ch; margin:14px 0 0}

/* ---------- stat strip ---------- */
.pipe .strip{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); border-top:1px solid var(--rule)}
.pipe .strip .cell{padding:22px 20px 24px; border-right:1px solid var(--rule)}
.pipe .strip .cell:last-child{border-right:0}
.pipe .strip .big{font-family:Archivo,sans-serif; font-weight:700; font-size:clamp(26px,3.4vw,36px);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1}
.pipe .strip .lbl{font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-3); margin-top:9px; line-height:1.4}

/* ---------- tables, code, figures ---------- */
.pipe .scroller{overflow-x:auto; border:1px solid var(--rule); border-radius:4px; background:var(--surface)}
.pipe table{border-collapse:collapse; width:100%; font-family:"IBM Plex Mono",monospace; font-size:13px}
.pipe th{text-align:left; font-weight:500; font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); padding:11px 14px; border-bottom:1px solid var(--rule-2); white-space:nowrap; background:var(--surface-2)}
.pipe td{padding:10px 14px; border-bottom:1px solid var(--rule); vertical-align:top; color:var(--ink-2)}
.pipe tr:last-child td{border-bottom:0}
.pipe td.n{text-align:right; font-variant-numeric:tabular-nums; color:var(--ink)}
.pipe td strong{color:var(--ink); font-weight:500}
.pipe pre{margin:0; padding:16px 18px; overflow-x:auto; font-family:"IBM Plex Mono",monospace;
  font-size:12.5px; line-height:1.55; color:var(--ink-2); background:var(--surface);
  border:1px solid var(--rule); border-radius:4px}
.pipe pre b{color:var(--ink); font-weight:500}
.pipe pre em{color:var(--vlate); font-style:normal}
.pipe figure{margin:0}
.pipe figcaption{font-size:14px; color:var(--ink-3); margin-top:12px; max-width:64ch; line-height:1.5}
.pipe svg.diagram{width:100%; height:auto; color:var(--ink-2)}

/* ---------- notes / callouts ---------- */
.pipe .note{border-left:2px solid var(--accent); padding:2px 0 2px 18px; margin:24px 0; max-width:64ch}
.pipe .note p{margin:0; font-size:16px; color:var(--ink-2)}
.pipe .note .h{font-family:Archivo,sans-serif; font-weight:600; font-size:13px; letter-spacing:.02em;
  text-transform:uppercase; color:var(--accent); display:block; margin-bottom:6px}

/* ---------- two-up ---------- */
.pipe .twoup{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin:22px 0}

/* ---------- trip chart ---------- */
.pipe .tripwrap{border:1px solid var(--rule); border-radius:4px; background:var(--surface); box-shadow:var(--shadow); padding:18px 18px 8px}
.pipe .bandbar{display:flex; height:34px; border-radius:3px; overflow:hidden; gap:2px; margin:18px 0 10px}
.pipe .bandbar div{display:flex; align-items:center; justify-content:center; font-family:"IBM Plex Mono",monospace;
  font-size:11.5px; color:#fff; min-width:2px}
.pipe .bandkey{display:flex; flex-wrap:wrap; gap:6px 18px}
.pipe .bandkey span{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-2); display:inline-flex; gap:7px; align-items:center}
.pipe details{margin-top:14px}
.pipe summary{font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--accent); cursor:pointer}

/* ---------- gaps ---------- */
.pipe .gaps{display:grid; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:4px; overflow:hidden}
.pipe .gaps .g{background:var(--surface); padding:18px 20px}
.pipe .gaps .g h4{font-family:Archivo,sans-serif; font-size:15px; margin:0 0 6px; font-weight:600}
.pipe .gaps .g p{margin:0; font-size:15.5px; color:var(--ink-2); max-width:70ch}

.pipe footer{padding:40px 0 60px; color:var(--ink-3); font-size:14.5px}
.pipe footer p{max-width:70ch; margin:0 0 10px}

/* grid children must be allowed to shrink, or a wide table drags the page sideways */
.pipe .stage>*, .pipe .replay>*, .pipe .twoup>*, .pipe .mapstack>*, .pipe .readout .row>*, .pipe .strip>*, .pipe .gaps>*{min-width:0}
.pipe .body, .pipe .rail{min-width:0}

@media (max-width:900px){
  .pipe .stage{grid-template-columns:1fr; gap:18px; padding:44px 0}
  .pipe .replay{grid-template-columns:1fr; gap:26px}
  .pipe .rail{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:baseline}
  .pipe .rail .cadence{margin-bottom:0}
}
@media (prefers-reduced-motion:reduce){ .pipe *{animation:none !important; transition:none !important} }

/* The site's other pages put a max-width on main; this article manages its own
   measure per section, so it opts out. */
body.pipe-page main{max-width:none; margin:0; padding:0}
body.pipe-page{margin:0; background:var(--paper); color:var(--ink)}

/* nav.css is loaded on its own here, without performance.css underneath it, so
   the five tokens it reads have to come from somewhere. Mapping them onto this
   page's palette rather than the dashboards' is the point: the header is the
   masthead of a document, and a grey chrome bar above warm paper looked like
   two pages stapled together. */
body.pipe-page.viz-root{
  --surface-1:var(--surface); --border:var(--rule);
  --text-primary:var(--ink); --text-secondary:var(--ink-2); --series-1:var(--accent);
}
body.pipe-page .site-head-inner{max-width:1140px; padding:0 24px}
body.pipe-page .wordmark,
body.pipe-page .site-nav{font-family:Archivo,"Helvetica Neue",Arial,sans-serif}

/* Until the replay arrives the canvases are empty boxes of the right size, so
   the page does not jump when 1.4 MB of positions finishes loading. */
.pipe canvas{min-height:120px}
.pipe .loading{display:flex; align-items:center; justify-content:center;
  font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--ink-3);
  padding:22px 14px; text-align:center}
.pipe .loading.failed{color:var(--vlate)}