/* Pipeline page (pipeline.html): tokens the site doesn't already define. */
:root{--gate:#8a4a00;--gate-soft:#fff3e2;--stop:#a3322a;--stop-soft:#f7e2df;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--gate:#f3c27e;--gate-soft:#3a2a12;--stop:#ef8c82;--stop-soft:#3a201d}}
:root[data-theme="dark"]{--gate:#f3c27e;--gate-soft:#3a2a12;--stop:#ef8c82;--stop-soft:#3a201d}

/* Layout: a left-to-right run of stages (code -> checks -> deploy -> verify -> release), each stage a column of
   the jobs that run inside it; stacks top-to-bottom on phones. A security band and two feedback loops sit under it. */

.pl-wrap{max-width:76rem;margin:0 auto;padding-block:24px 56px;display:grid;gap:36px}
.pl-head{display:grid;gap:10px;max-width:46rem}
.pl-eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.pl-head h1{margin:0;font-size:clamp(28px,4.4vw,42px);line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
.pl-head p{margin:0;color:var(--muted);font-size:17px}

/* stages */
.pl-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;align-items:stretch}
.pl-stage{display:grid;grid-template-rows:auto 1fr;gap:10px;padding:0 10px;position:relative;min-width:0}
.pl-stage+.pl-stage::before{content:"→";position:absolute;left:-8px;top:2px;color:var(--muted);font-weight:700}
.pl-stage h2{margin:0;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:flex;gap:8px;align-items:baseline}
.pl-stage h2 b{color:var(--accent);font-family:var(--mono);font-size:12px}
.pl-trigger{font-family:var(--mono);font-size:11.5px;color:var(--muted);display:block;text-transform:none;letter-spacing:0;font-weight:400}
.pl-jobs{display:grid;gap:8px;align-content:start}
.pl-job{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 13px;display:grid;gap:4px;min-width:0}
.pl-job b{font-size:14px}
.pl-job span{font-size:13px;color:var(--muted);line-height:1.45}
.pl-job.pl-key{border-color:var(--accent);background:var(--accent-soft)}
.pl-job.pl-gate{border-color:var(--gate);background:var(--gate-soft)}
.pl-job.pl-gate b{color:var(--gate)}
.pl-tag{justify-self:start;font-family:var(--mono);font-size:11px;padding:1px 7px;border-radius:99px;background:var(--bg);border:1px solid var(--line);color:var(--muted)}
.pl-fail{font-size:12.5px;color:var(--stop);background:var(--stop-soft);border-radius:8px;padding:6px 9px}
@media (max-width:980px){
  .pl-flow{grid-template-columns:minmax(0,1fr);gap:22px}
  .pl-stage{padding:0}
  .pl-stage+.pl-stage::before{content:"↓";left:auto;right:0;top:-20px}
  .pl-jobs{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))}
}

/* security band + loops */
.pl-band{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;display:grid;gap:14px}
.pl-band h2{margin:0;font-size:18px}
.pl-band p.pl-sub{margin:0;color:var(--muted)}
.pl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1000px){.pl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pl-grid{grid-template-columns:minmax(0,1fr)}}
.pl-item{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px}
.pl-item::before{content:"✓";color:var(--accent);font-weight:800}
.pl-item b{display:block;font-size:14px}
.pl-item span{font-size:13.5px;color:var(--muted)}
.pl-loops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:820px){.pl-loops{grid-template-columns:minmax(0,1fr)}}
.pl-loop{border:1px dashed var(--line);border-radius:14px;padding:16px;display:grid;gap:6px;background:var(--bg)}
.pl-loop b{font-size:14px}
.pl-loop span{font-size:13.5px;color:var(--muted)}
.pl-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.pl-legend i{display:inline-block;width:12px;height:12px;border-radius:4px;vertical-align:-2px;margin-right:6px;border:1px solid var(--line)}
.pl-legend .k{background:var(--accent-soft);border-color:var(--accent)}
.pl-legend .g{background:var(--gate-soft);border-color:var(--gate)}
.pl-legend .s{background:var(--stop-soft);border-color:var(--stop)}
.pl-foot{color:var(--muted);font-size:13px;max-width:52rem;margin:0}
/* the site gives every <section> an 80px bottom margin; inside the pipeline that would break the columns */
.pl-wrap section{margin-bottom:0;scroll-margin-top:0}
.pl-stage h2{flex-wrap:wrap;row-gap:2px}
.pl-trigger{flex-basis:100%;padding-left:20px}