/* Semantic diagrams: connectors enhance the same reading order at every width. */
.system-diagrams{padding-block:5rem}
.diagram-intro{max-width:60rem}
.diagram-intro .eyebrow{margin-bottom:1.2rem}
.diagram-intro h2{font-size:clamp(2.8rem,5vw,4.8rem)}
.diagram-intro>p{max-width:45rem;margin-top:1.5rem;color:var(--muted);font-size:1.1rem}
.system-map,.signal-diagram,.nisi-workflow-diagram{margin-top:3rem;border:1px solid var(--rule);background:var(--surface);padding:clamp(1.25rem,3vw,2.5rem)}
.diagram-topline{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;border-bottom:1px solid var(--rule);padding-bottom:1.3rem;margin-bottom:2rem}
.diagram-topline h3{font-size:1.25rem;letter-spacing:-.02em}
.diagram-topline>span{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.system-lane+.system-lane{margin-top:2.5rem;padding-top:2rem;border-top:1px dashed var(--rule)}
.system-lane-label{display:flex;align-items:baseline;gap:1rem;margin-bottom:1.25rem}
.system-lane-label b{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;background:var(--rule);padding:.35rem .65rem}
.system-lane-label>span{font-size:.9rem;color:var(--muted)}
.diagram-steps{list-style:none;padding:0;margin:0;display:grid;gap:2.5rem}
.diagram-trio{grid-template-columns:repeat(3,minmax(0,1fr))}
.diagram-steps>li{position:relative;min-width:0;border:1px solid var(--rule);background:var(--paper);padding:1.3rem;display:flex;flex-direction:column}
.diagram-steps>li:not(:last-child)::after{content:'→';position:absolute;left:100%;top:50%;width:2.5rem;text-align:center;color:var(--ink);font-size:1.5rem;line-height:1;transform:translateY(-50%)}
.diagram-step-number{font-size:.7rem;text-transform:uppercase;letter-spacing:.13em;font-weight:600;color:var(--muted);display:block;margin-bottom:1rem}
.diagram-steps h3,.diagram-steps h4{font-size:1.4rem;line-height:1.15;font-weight:600;letter-spacing:-.025em;margin:0}
.diagram-steps p{font-size:.95rem;line-height:1.5;color:var(--muted);margin-top:1rem}
.diagram-code{font:400 .75rem/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--muted);display:block;margin-top:auto;padding-top:1.5rem;overflow-wrap:anywhere}
.diagram-steps>.diagram-node-emphasis{background:var(--deep);color:var(--on-deep);border-color:var(--deep-rule)}
.diagram-node-emphasis .diagram-step-number,.diagram-node-emphasis p,.diagram-node-emphasis .diagram-code{color:var(--deep-muted)}
.diagram-return{display:flex;align-items:center;gap:1rem;border:1px dashed var(--deep-rule);border-left:3px solid var(--code);background:var(--paper);padding:1.1rem 1.25rem;margin-top:1.5rem}
.diagram-return>span{font-size:2rem;line-height:1;flex:none}
.diagram-return p{font-size:.95rem;color:var(--muted)}
.diagram-return strong{color:var(--ink)}
.system-map figcaption,.signal-diagram figcaption,.nisi-workflow-diagram figcaption{font-size:.85rem;color:var(--muted);line-height:1.6;margin-top:1.5rem;max-width:66rem}
.system-map figcaption a,.signal-diagram figcaption a,.nisi-workflow-diagram figcaption a{text-decoration:underline;text-underline-offset:4px}
.signal-diagram{background:var(--deep);color:var(--on-deep);border-color:var(--deep-rule);margin-top:2rem}
.signal-diagram .diagram-topline{border-color:var(--deep-rule)}
.signal-diagram .diagram-topline>span,.signal-diagram figcaption{color:var(--deep-muted)}
.signal-resident{display:flex;align-items:center;gap:1rem;border:1px solid var(--deep-rule);padding:1.25rem;max-width:48rem;margin-inline:auto}
.signal-resident h4,.signal-question h4,.signal-branch h4{margin:0;font-size:1.3rem;font-weight:500;line-height:1.2;letter-spacing:-.02em}
.signal-resident p,.signal-branch p{color:var(--deep-muted);font-size:.95rem;margin-top:.6rem}
.signal-dot{width:.65rem;height:.65rem;background:var(--on-deep);border-radius:50%;flex:none}
.signal-chip{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--deep-rule);padding:.4rem .6rem;white-space:nowrap;margin-left:auto}
.signal-question{text-align:center;margin:1.2rem auto 0}
.signal-question>span{display:block;font-size:1.8rem;color:var(--deep-muted);margin-bottom:.7rem}
.signal-question h4{display:inline-block;padding:1.25rem 2rem;border:1px solid var(--deep-rule);background:var(--deep)}
.signal-branches{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem;margin:2rem auto 0;max-width:48rem;padding-top:1.5rem}
.signal-branches::before{content:'';position:absolute;left:25%;right:25%;top:0;border-top:1px solid var(--deep-rule)}
.signal-branches::after{content:'';position:absolute;left:50%;top:-2rem;height:2rem;border-left:1px solid var(--deep-rule)}
.signal-branch{position:relative}
.signal-branch::before{content:'↓';position:absolute;left:50%;top:-1.9rem;transform:translateX(-50%);color:var(--deep-muted)}
.signal-answer{display:block;text-align:center;text-transform:uppercase;letter-spacing:.12em;font-size:.75rem;margin:.25rem 0 .75rem;color:var(--deep-muted)}
.signal-branch>div{border:1px solid var(--deep-rule);padding:1.4rem;min-height:9rem}
.signal-branch-yes>div{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.signal-branch-yes p{color:var(--muted)}
.nisi-workflow-diagram{padding:2rem 1.25rem;margin-top:3rem}
.nisi-diagram-steps{grid-template-columns:repeat(6,minmax(0,1fr));gap:1.6rem}
.nisi-diagram-steps>li{padding:1rem .8rem}
.nisi-diagram-steps>li:not(:last-child)::after{width:1.6rem}
.nisi-diagram-steps h3{font-size:1.08rem}
.nisi-diagram-steps p{font-size:.84rem}
.nisi-diagram-steps>li:last-child{background:var(--deep);color:var(--on-deep);border-color:var(--deep-rule)}
.nisi-diagram-steps>li:last-child .diagram-step-number,.nisi-diagram-steps>li:last-child p{color:var(--deep-muted)}
.diagram-stop{border-left:3px solid var(--deep-rule);padding:.3rem 1rem;margin-top:1.5rem;font-size:.9rem;color:var(--muted)}
@media(max-width:1100px){
 .nisi-diagram-steps{grid-template-columns:1fr}
 .nisi-diagram-steps>li{padding:1rem 1.25rem;display:grid;grid-template-columns:2rem 1fr;gap:.5rem 1rem;align-items:baseline}
 .nisi-diagram-steps .diagram-step-number{margin:0;grid-row:1/3}
 .nisi-diagram-steps p{margin:0;grid-column:2;font-size:.95rem}
 .nisi-diagram-steps h3{font-size:1.3rem}
 .nisi-diagram-steps>li:not(:last-child)::after{content:'↓';left:50%;top:100%;width:1.5rem;height:1.6rem;line-height:1.6rem;transform:translateX(-50%)}
}
@media(max-width:740px){
 .system-diagrams{padding-block:3.5rem}
 .diagram-topline{display:block;margin-bottom:1.5rem}
 .diagram-topline>span{display:block;margin-top:.65rem}
 .system-lane-label{display:block}
 .system-lane-label>span{display:block;margin-top:.65rem}
 .diagram-trio{grid-template-columns:1fr;gap:2rem}
 .diagram-trio>li:not(:last-child)::after{content:'↓';left:50%;top:100%;width:2rem;height:2rem;line-height:2rem;transform:translateX(-50%)}
 .diagram-trio .diagram-code{padding-top:1rem}
 .signal-resident{display:grid;grid-template-columns:.65rem minmax(0,1fr);align-items:start;gap:.8rem 1rem;padding:1rem}
 .signal-resident>div{flex:1;min-width:0}
 .signal-dot{margin-top:.45rem}
 .signal-chip{grid-column:2;justify-self:start;margin:0}
 .signal-question h4{padding:1rem;font-size:1.15rem}
 .signal-branches{gap:.75rem}
 .signal-branch>div{padding:1rem .75rem;min-height:14rem}
 .signal-branch h4{font-size:1.1rem;overflow-wrap:anywhere}
 .signal-branch p{font-size:.85rem}
 .diagram-return{align-items:flex-start;padding:1rem;gap:.75rem}
 .nisi-workflow-diagram{padding:1.25rem}
}
/* Focus sits on the containing panel; inverse-panel links use its light foreground. */
.signal-diagram :focus-visible,.diagram-node-emphasis :focus-visible,.nisi-diagram-steps>li:last-child :focus-visible{outline-color:var(--on-deep)}
.signal-branch-yes :focus-visible{outline-color:var(--focus)}