:root{
  --ink:#16222c;
  --ink-soft:#4a5964;
  --paper:#eef1ee;
  --surface:#ffffff;
  --line:rgba(22,34,44,0.14);
  --line-strong:rgba(22,34,44,0.28);
  --accent:#b25e18;
  --accent-ink:#7a3f0f;
  --accent-soft:#f2e0c9;
  --resolved:#336752;
  --resolved-soft:#dbe8e1;
  --risk:#a3402f;
  --risk-soft:#f2ddd6;
  --font-display:"Newsreader", ui-serif, Georgia, serif;
  --font-body:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#eef1ee; --ink-soft:#aab6bc; --paper:#111a20; --surface:#17222a;
    --line:rgba(238,241,238,0.14); --line-strong:rgba(238,241,238,0.26);
    --accent:#dd9a4d; --accent-ink:#f0b878; --accent-soft:rgba(221,154,77,0.16);
    --resolved:#68ab8f; --resolved-soft:rgba(104,171,143,0.14);
    --risk:#e2857a; --risk-soft:rgba(226,133,122,0.14);
  }
}
:root[data-theme="dark"]{
  --ink:#eef1ee; --ink-soft:#aab6bc; --paper:#111a20; --surface:#17222a;
  --line:rgba(238,241,238,0.14); --line-strong:rgba(238,241,238,0.26);
  --accent:#dd9a4d; --accent-ink:#f0b878; --accent-soft:rgba(221,154,77,0.16);
  --resolved:#68ab8f; --resolved-soft:rgba(104,171,143,0.14);
  --risk:#e2857a; --risk-soft:rgba(226,133,122,0.14);
}

*{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
::selection{ background:var(--accent-soft); }

.page{ max-width:720px; margin:0 auto; padding:40px 26px 64px; }

/* ---- crumb / lateral nav ---- */
.crumb-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
  margin-bottom:28px;
}
.back-link{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ink-soft);
  text-decoration:none;
  border:1px solid var(--line);
  padding:5px 10px;
}
.back-link:hover{ border-color:var(--line-strong); color:var(--ink); }
.pill{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.02em;
  color:var(--ink-soft);
  text-decoration:none;
  border:1px solid var(--line);
  padding:5px 9px;
}
.pill:hover{ border-color:var(--accent-ink); color:var(--accent-ink); }
.pill.current{ background:var(--accent-soft); color:var(--accent-ink); border-color:transparent; }

/* ---- masthead ---- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:0.09em;
  text-transform:uppercase;
  color:var(--accent-ink);
  display:flex; align-items:center; gap:10px;
  margin:0 0 16px;
}
.eyebrow::before{ content:""; width:7px; height:7px; background:var(--accent); display:inline-block; }

h1.doc-title{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(24px, 4vw, 30px);
  line-height:1.22;
  letter-spacing:-0.01em;
  margin:0 0 12px;
  text-wrap:balance;
}
p.dek{
  font-size:15.5px;
  line-height:1.6;
  color:var(--ink-soft);
  max-width:64ch;
  margin:0 0 14px;
}
.meta-line{
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--ink-soft);
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
}
.meta-line b{ color:var(--ink); font-weight:500; }

/* ---- section rhythm ---- */
section{ margin-top:34px; padding-top:28px; border-top:1px solid var(--line); }
h2.label{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin:0 0 14px;
  font-weight:500;
}
h2.label .count{
  color:var(--accent-ink);
  margin-left:4px;
}

/* ---- generic card grid (personas, metrics, components, api) ---- */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:10px; }
.card-grid.cols-2{ grid-template-columns:1fr 1fr; }
.card{
  background:var(--surface);
  border:1px solid var(--line);
  padding:13px 15px;
}
.card .k{
  display:block;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--accent-ink);
  margin-bottom:5px;
}
.card .t{
  display:block;
  font-family:var(--font-display);
  font-size:15px;
  font-weight:500;
  color:var(--ink);
  margin-bottom:4px;
  line-height:1.3;
}
.card .d{ font-size:13px; color:var(--ink-soft); line-height:1.5; }

/* ---- lane cards (semantic colour) ---- */
.lane-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
.lane-card{ background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--line-strong); padding:13px 15px; }
.lane-card.auto{ border-top-color:var(--resolved); }
.lane-card.suggest{ border-top-color:var(--accent); }
.lane-card.escalate{ border-top-color:var(--risk); }
.lane-card .name{ font-family:var(--font-mono); font-size:12px; font-weight:500; margin-bottom:6px; }
.lane-card.auto .name{ color:var(--resolved); }
.lane-card.suggest .name{ color:var(--accent-ink); }
.lane-card.escalate .name{ color:var(--risk); }
.lane-card .d{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; }

/* ---- flow strip (pipeline stages) ---- */
.flow-strip{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.flow-strip .step{
  background:var(--surface); border:1px solid var(--line);
  padding:8px 11px; font-size:12px; font-weight:500; color:var(--ink);
  font-family:var(--font-mono);
}
.flow-strip .arrow{ color:var(--ink-soft); font-size:13px; }

/* ---- formula card ---- */
.formula{
  background:var(--surface); border:1px solid var(--line);
  padding:14px 16px; font-family:var(--font-mono); font-size:13px;
  color:var(--ink); margin-bottom:12px; overflow-x:auto; white-space:nowrap;
}
.formula .fn{ color:var(--accent-ink); }

/* ---- compact requirement / flag table ---- */
table.req-table{ width:100%; border-collapse:collapse; font-size:13px; }
table.req-table td{ padding:8px 10px; border-top:1px solid var(--line); vertical-align:top; }
table.req-table tr:first-child td{ border-top:none; }
table.req-table td.id{ font-family:var(--font-mono); font-size:11.5px; color:var(--accent-ink); white-space:nowrap; width:52px; }
table.req-table td.txt{ color:var(--ink-soft); line-height:1.5; }

/* ---- epic bar chart ---- */
.bar-list{ display:flex; flex-direction:column; gap:10px; }
.bar-row{ display:flex; align-items:center; gap:12px; }
.bar-row .name{ flex:0 0 168px; font-size:12.5px; color:var(--ink); font-weight:500; }
.bar-track{ flex:1; height:7px; background:var(--line); position:relative; }
.bar-fill{ height:100%; background:var(--resolved); }
.bar-row .pts{ flex:0 0 auto; font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); white-space:nowrap; }

/* ---- story card (Given/When/Then) ---- */
.story-card{ background:var(--surface); border:1px solid var(--line); padding:16px 18px; margin-bottom:12px; }
.story-card .story-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin-bottom:6px; }
.story-card .story-id{ font-family:var(--font-mono); font-size:11.5px; color:var(--accent-ink); }
.story-card .story-title{ font-family:var(--font-display); font-size:15.5px; font-weight:500; color:var(--ink); }
.story-card .story-text{ font-size:13.5px; color:var(--ink-soft); margin:0 0 10px; line-height:1.55; }
.story-card .tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.tag{ font-family:var(--font-mono); font-size:10.5px; border:1px solid var(--line); padding:2px 7px; color:var(--ink-soft); }
.gwt{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.gwt li{ font-size:13px; color:var(--ink-soft); line-height:1.5; padding-left:0; }
.gwt b{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.04em; color:var(--accent-ink); margin-right:5px; }

/* ---- phase timeline ---- */
.phase-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.phase-card{ background:var(--surface); border:1px solid var(--line); padding:14px 15px; }
.phase-card .num{ font-family:var(--font-mono); font-size:11px; color:var(--accent-ink); margin-bottom:4px; }
.phase-card .name{ font-family:var(--font-display); font-size:15px; font-weight:500; color:var(--ink); margin-bottom:6px; line-height:1.3; }
.phase-card .scope{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin-bottom:10px; }
.gate-label{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); margin:8px 0 4px; }
.gate-label:first-of-type{ margin-top:0; }
.gate-list{ list-style:none; margin:0; padding:0; }
.gate-list li{ font-size:12px; color:var(--ink-soft); line-height:1.5; padding-left:11px; position:relative; }
.gate-list li::before{ content:"\2013"; position:absolute; left:0; }

/* ---- architecture flow (vertical) ---- */
.arch-flow{ display:flex; flex-direction:column; align-items:stretch; gap:0; }
.arch-node{
  background:var(--surface); border:1px solid var(--line);
  padding:10px 14px; font-size:12.5px; font-weight:500; color:var(--ink);
  text-align:center;
}
.arch-connector{ height:18px; width:1px; background:var(--line-strong); margin:0 auto; }
.arch-branch{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.arch-branch .arch-node{ font-size:12px; }

/* ---- decision / callout ---- */
.callout{
  background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent);
  padding:14px 16px; font-size:13.5px; color:var(--ink-soft); line-height:1.55;
}
.callout strong{ color:var(--ink); }
.callout.north{ border-left-color:var(--resolved); }

/* ---- plain list ---- */
ul.plain{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
ul.plain li{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; padding-left:14px; border-left:2px solid var(--line-strong); }

footer{ margin-top:36px; padding-top:20px; border-top:1px solid var(--line); }
.credit{ font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); }

@media (max-width:640px){
  .lane-grid, .phase-grid, .arch-branch, .card-grid.cols-2{ grid-template-columns:1fr; }
  .bar-row .name{ flex-basis:120px; }
  .page{ padding:32px 18px 48px; }
}