:root {
  --ink:#18191b;
  --mut:#64676d;
  --line:#dedfe3;
  --bg:#fbfbfa;
  --panel:#ffffff;
  --accent:#28666e;
  --accent-2:#8a5a28;
  --ok:#1f7a45;
  --warn:#9a6a00;
  --bad:#a23a45;
}
* { box-sizing:border-box; }
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.62 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
header {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 1.4rem;
  align-items:baseline;
  padding:1rem 1.4rem;
  border-bottom:1px solid var(--line);
}
.brand { color:var(--ink); font-weight:700; text-decoration:none; }
nav a {
  color:var(--mut);
  text-decoration:none;
  margin-right:1rem;
  font-size:.92rem;
}
nav a:hover { color:var(--accent); }
main {
  max-width:820px;
  margin:0 auto;
  padding:2rem 1.4rem 3rem;
}
h1 { font-size:1.85rem; margin:.2rem 0 .4rem; letter-spacing:0; }
h2 {
  font-size:1.24rem;
  margin-top:2rem;
  border-bottom:1px solid var(--line);
  padding-bottom:.25rem;
  letter-spacing:0;
}
h3 { font-size:1.02rem; margin:1.4rem 0 .4rem; letter-spacing:0; }
.subtitle, .muted { color:var(--mut); }
.subtitle { font-size:1.05rem; margin-top:0; }
.lede { font-size:1.08rem; }
a { color:var(--accent); }
code {
  background:#f0f0ee;
  border-radius:3px;
  padding:.1em .35em;
  font-size:.88em;
}
table {
  border-collapse:collapse;
  width:100%;
  margin:1rem 0;
  font-size:.9rem;
}
th, td {
  border:1px solid var(--line);
  padding:.45rem .6rem;
  text-align:left;
  vertical-align:top;
}
th { background:#f3f3f0; }
blockquote {
  margin:1rem 0;
  padding:.35rem 1rem;
  border-left:3px solid var(--accent);
  background:#f5f8f8;
  color:#303236;
}
footer {
  max-width:820px;
  margin:0 auto;
  padding:1.5rem 1.4rem 2.5rem;
  border-top:1px solid var(--line);
  color:var(--mut);
  font-size:.82rem;
}
.summary-grid, .rail-grid, .next-grid {
  display:grid;
  gap:.75rem;
  margin:1rem 0 1.4rem;
}
.summary-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.rail-grid { grid-template-columns:repeat(4, minmax(0, 1fr)); }
.next-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.tile, .rail-card, .next-card, .metric-card, .example-box {
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:6px;
  padding:.8rem;
}
.tile strong, .rail-card strong, .next-card strong, .metric-card strong {
  display:block;
  margin-bottom:.25rem;
}
.tile span, .rail-card span, .next-card span, .metric-card span {
  display:block;
  color:var(--mut);
  font-size:.92rem;
}
.flow {
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  align-items:center;
  gap:.55rem;
  margin:1.2rem 0;
}
.flow-node {
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:6px;
  padding:.75rem .65rem;
  text-align:center;
  font-weight:700;
}
.flow-node.side { border-color:#b6cfd3; background:#f6fbfb; }
.flow-node.policy { border-color:#d9c4aa; background:#fffaf2; }
.flow-arrow {
  color:var(--accent);
  font-weight:700;
  text-align:center;
}
.rail-stack {
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr);
  gap:.85rem;
  margin:1rem 0 1.4rem;
}
.stack-lane {
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:6px;
  padding:.85rem;
}
.lane-title {
  color:var(--accent);
  display:block;
  font-weight:700;
  margin-bottom:.55rem;
}
.rail-row {
  display:grid;
  grid-template-columns:7.5rem minmax(0, 1fr);
  gap:.45rem;
  align-items:center;
  margin:.4rem 0;
}
.rail-label {
  color:var(--mut);
  font-size:.86rem;
  font-weight:700;
}
.rail-value {
  border:1px solid var(--line);
  border-radius:5px;
  padding:.45rem .55rem;
  background:#fcfcfb;
  font-size:.9rem;
}
.decision {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.55rem;
  margin:1rem 0 1.4rem;
}
.decision div {
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:6px;
  padding:.7rem;
  text-align:center;
  font-weight:700;
}
.decision .ok { color:var(--ok); }
.decision .warn { color:var(--warn); }
.decision .bad { color:var(--bad); }
.metrics {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.75rem;
  margin:1rem 0 1.4rem;
}
.metric-card .number {
  color:var(--accent);
  font-size:1.45rem;
  line-height:1.2;
}
.status-line {
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin:.8rem 0 1.2rem;
}
.pill {
  display:inline-block;
  border:1px solid var(--line);
  border-radius:999px;
  padding:.2rem .55rem;
  background:#fff;
  color:var(--mut);
  font-size:.84rem;
  font-weight:700;
}
.pill.done { color:var(--ok); border-color:#bcd9c8; background:#f5fbf7; }
.pill.warn { color:var(--bad); border-color:#e0b6bc; background:#fff5f6; }
.pill.next { color:var(--warn); border-color:#e2d0a4; background:#fffaf0; }
.example-box { margin:1rem 0 1.4rem; }
.example-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.65rem;
  margin-top:.6rem;
}
.example-grid div {
  border:1px solid var(--line);
  border-radius:5px;
  padding:.65rem;
  background:#fcfcfb;
}
@media (max-width: 760px) {
  .summary-grid, .rail-grid, .next-grid, .flow, .rail-stack, .decision, .metrics, .example-grid {
    grid-template-columns:1fr;
  }
  .flow-arrow { transform:rotate(90deg); }
  .rail-row { grid-template-columns:1fr; gap:.2rem; }
}
.mermaid {
  display:flex;
  justify-content:center;
  margin:1.2rem 0;
  padding:.75rem;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:6px;
  overflow-x:auto;
}
.mermaid svg { max-width:100%; height:auto; }
details summary { cursor:pointer; color:var(--accent); font-weight:600; margin:.6rem 0; }
details[open] summary { margin-bottom:.4rem; }
details {
  border:1px solid var(--line);
  border-left:3px solid var(--accent-2);
  border-radius:5px;
  padding:.4rem .85rem;
  margin:.8rem 0;
  background:#fcfcfb;
}