/* avd-ops.dev layout on top of avd-ops.css: the three questions run as a strip of cards, the layer built on top of them as bands. */
.lifecycle{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);margin-top:var(--space-4)}
.stage{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-4);display:flex;flex-direction:column;gap:.35rem;min-width:0}
.stage h3 a{text-decoration:none;color:var(--fg)} .stage h3 a:hover{color:var(--accent)}
.stage p{margin:0;font-size:.95rem;color:var(--muted)}
.layerband{grid-column:1/-1;background:var(--accent-soft);border-color:transparent}
.principles{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--space-4) var(--space-5);padding:0;list-style:none}
.principles li strong{display:block;font-family:var(--display)}
td:first-child{white-space:nowrap}
@media (max-width:44rem){.lifecycle{grid-template-columns:minmax(0,1fr)} td:first-child{white-space:normal}}
.kicker{margin-top:var(--space-6)} .kicker+h1{margin-top:var(--space-1)}

/* Architecture page: the layers as a stack (the picture), then the contract flows as one drawing. */
.stack{display:grid;gap:var(--space-3);margin-top:var(--space-4)}
.layer{border-radius:var(--radius);padding:var(--space-4);display:grid;gap:var(--space-3);min-width:0}
.layer>.eyebrow{display:block}
.l-front{background:var(--surface);border:1px solid var(--line)}
.l-front p{margin:0;color:var(--muted)}
.l-top{background:var(--accent-soft)}
.l-top>.eyebrow,.l-base>.eyebrow{color:var(--accent)}
.l-base{background:var(--sunken);border:1px solid var(--line)}
.l-ground{background:var(--surface);border:1px solid var(--line-strong);color:var(--fg);text-align:center;font:600 .95rem var(--display)}
.l-ground span{display:block;font:400 .82rem var(--mono);color:var(--muted);margin-top:.2rem}
.row2,.row3{display:grid;gap:var(--space-3)}
.row2{grid-template-columns:repeat(2,minmax(0,1fr))} .row3{grid-template-columns:repeat(3,minmax(0,1fr))}
.piece{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);display:flex;flex-direction:column;gap:.3rem;min-width:0}
.piece .q{font:700 1.2rem/1.25 var(--display);color:var(--accent);margin:0}
.piece .q .repo{color:var(--fg);text-decoration:none} .piece .q a.repo:hover{color:var(--accent-hover)}
.piece .who{font:600 .8rem var(--mono);color:var(--accent);text-decoration:none}
.piece .who:hover{color:var(--accent-hover)}
.piece p{margin:0;font-size:.93rem;color:var(--muted)}
.pairnote{margin:0;font-size:.9rem;color:var(--muted)}
.reads{text-align:center;font:500 .8rem var(--mono);color:var(--muted)}
figure.flows{margin:var(--space-4) 0 0}
.flows .scroll{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.flows svg{display:block;width:100%;min-width:760px;height:auto;color:var(--muted)}
.flows figcaption{font-size:.9rem;color:var(--muted);margin-top:var(--space-2)}
.d-box{fill:var(--surface);stroke:var(--line-strong);stroke-width:1.2}
.d-top{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.2}
.d-ext{fill:var(--bg);stroke:var(--line-strong);stroke-width:1.2;stroke-dasharray:5 4}
.d-tier{fill:var(--tier-soft);stroke:var(--tier);stroke-width:1.2;stroke-dasharray:5 4}
.d-ground{fill:var(--sunken);stroke:var(--line-strong);stroke-width:1.2}
.d-pair{fill:none;stroke:var(--accent);stroke-width:1.2;stroke-dasharray:2 4}
.d-edge{fill:none;stroke:currentColor;stroke-width:1.4}
.d-opt{fill:none;stroke:currentColor;stroke-width:1.4;stroke-dasharray:5 4}
.d-head{fill:currentColor}
.d-name{fill:var(--fg);font:700 14px var(--display)}
.d-sub{fill:var(--muted);font:12px var(--body)}
.d-lbl{fill:var(--fg);font:600 11.5px var(--mono)}
.d-band{fill:var(--accent);font:600 11px var(--mono);letter-spacing:.08em}
.d-gname{fill:var(--fg);font:700 14px var(--display)}
.d-gsub{fill:var(--muted);font:12px var(--body)}
.d-mask{fill:var(--surface)}
@media (max-width:44rem){.row2,.row3{grid-template-columns:minmax(0,1fr)}}
.wrap.wide{max-width:60rem}
/* The docs (site/docs/, built from docs/knowledge/): backlinks and the page graph (assets/graph.js). */
.backlinks{columns:2;padding-left:1.1rem} @media (max-width:44rem){.backlinks{columns:1}}
.graph{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.graph svg{display:block;width:100%;height:auto}
.g-edge{stroke:var(--line-strong);stroke-width:1}
.g-node circle{fill:var(--accent);stroke:var(--surface);stroke-width:2}
.g-node text{fill:var(--fg);font:600 12px var(--body);text-anchor:middle}
.g-node:hover circle,.g-node:focus circle{fill:var(--accent-hover)}
.g-repos circle{fill:var(--brand)} .g-decisions circle{fill:var(--muted)} .g-roadmap circle{fill:var(--tier)}