/* Detailed architecture explorer. The SVG keeps its own type colours when exported. */
.architecture-shell{position:relative;margin:32px 0}
.diagram-explorer{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden}
.diagram-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px 16px;padding:12px 20px;border-bottom:1px solid var(--line-2);background:#fff}
.head-title{grid-column:2;position:relative;display:flex;align-items:center;justify-content:center;min-width:0}
.diagram-head h3{text-align:center}
.head-right{grid-column:3;display:flex;align-items:center;justify-content:flex-end;gap:10px}
.diagram-explorer:not(.is-expanded) .map-legend,.diagram-explorer:not(.is-expanded) .map-actions{display:none}
.diagram-head h3{font-size:18px;font-weight:600;margin:0}
.map-open,.map-control{font:inherit;font-size:14px;line-height:1.2;cursor:pointer;border:1px solid transparent;border-radius:7px;padding:9px 15px;background:transparent;color:#4d5c70}
.map-open{position:absolute;left:100%;top:50%;margin-left:14px;transform:translateY(-50%);display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border-color:#b4cbee;background:#eef4fd;color:#174b92;font-weight:600;transition:background .18s,border-color .18s,margin-left .18s}
.map-open:hover{background:#e0ebfb;border-color:#8fb2e4;margin-left:18px}
@media(max-width:760px){.head-title{position:static;flex-wrap:wrap;gap:10px}.map-open{position:static;transform:none;margin-left:0}.map-open:hover{margin-left:0}}
.diagram-explorer.is-expanded .map-open{display:none}
.map-open:focus-visible,.map-control:focus-visible,.map-viewport:focus-visible{outline:3px solid #0b57d0;outline-offset:-3px}
.diagram-panel[hidden]{display:none!important}
.diagram-panel .spine{border:0;border-radius:0;margin:0;box-shadow:none}
.map-legend{grid-column:1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:13px;color:#263c59}
.map-legend span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.map-key{width:18px;height:13px;border:1px solid;display:inline-block;border-radius:4px}
/* one class agent, three roles as tones of the same blue: orchestration agent (root) · stage agent (stage box) · utility agent (every called agent, variants and shared included) */
.map-key.root{background:#e1eaf6;border-color:#7fa4d1;border-radius:5px;width:22px;height:15px}
.map-key.stage{background:#f0f4f9;border-color:#b9cde5;border-radius:5px;width:22px;height:15px}
.map-key.agent{background:#fff;border-color:#aac5e7;border-radius:4px}
.map-key.consult{border:0;width:auto;height:auto;font-style:normal;color:#2f6f7e;font-weight:700}
.map-key.decision{background:#fff5dc;border-color:#dbb464;width:11px;height:11px;margin:0 3px;transform:rotate(45deg);border-radius:2px}
.map-key.precip{background:#f8f3fe;border-color:#a98cc9;border-radius:0 50% 50% 50%;width:12px;height:12px;transform:rotate(45deg);margin:0 3px}   /* a drop, point up, like the mark on the map */
/* the two edge keys carry the renderer's EDGE colours */
.map-key.flow{height:0;border:0;border-top:2px solid #7e97b5;border-radius:0}
.map-key.return{height:0;border:0;border-top:2px dashed #967aaf;border-radius:0}

.map-key.skill{background:#e7f5ef;border-color:#a0cbb9;border-radius:999px}
.map-key.tool{background:#eef2f7;border-color:#40546e;border-radius:2px;border-width:2px}
.map-key-help{font-size:12px;color:#2f5c9e;text-decoration:none;white-space:nowrap}
.map-key-help:hover{text-decoration:underline}
.map-actions{display:flex;gap:5px;flex:none}
.map-control{border-color:#d7e0ec;background:#fff;padding:7px 11px}
.map-control[aria-pressed=true]{background:#e7f0fe;color:#174b92;border-color:#b4cbee}
.map-viewport{height:620px;max-height:1240px;overflow:auto;position:relative;background:#f7f9fc;overscroll-behavior:contain;cursor:default;touch-action:pan-x pan-y}
.map-canvas{position:relative;margin:0 auto;overflow:hidden;flex:none}
.agent-map-svg{display:block;max-width:none!important;transform-origin:0 0}
/* the board: what the hovered or locked node is, full width, three lines and the details on the right */
.map-board{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:4px 28px;padding:10px 20px 12px;height:176px;border-top:1px solid #dce4ee;background:#fff;font-size:13.5px;line-height:1.4;color:#36485f}
.map-board.is-locked{background:#f5f9ff;border-top:2px solid #6f97c9;padding-top:9px}
.board-main,.board-side{min-width:0;overflow:auto;scrollbar-width:thin}
.board-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:5px}
.board-title strong{font-size:16px;color:#164c8f;overflow-wrap:anywhere}
.board-kind{font-size:11.5px;color:#5c728d;text-transform:uppercase;letter-spacing:.05em}
.board-links{margin-left:auto;display:inline-flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.board-links .map-tech-link{font-size:12px;}
.board-state{font-size:12px;color:#7a8ba3;margin:6px 0 0;text-align:right}
.map-board.is-locked .board-state{color:#174b92;font-weight:600}
.board-side{display:flex;flex-direction:column}
.board-side .board-state{margin-top:auto}
.board-line{display:grid;grid-template-columns:36px minmax(0,1fr);gap:8px;margin:0 0 3px}
.board-line b,.board-row b{color:#4d6280;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em}
.board-line b{padding-top:2px}
.board-line span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.board-idle{margin:0;color:#526278;max-width:78ch}
.board-row{display:flex;flex-wrap:wrap;align-items:center;gap:2px 5px;margin:0 0 3px}
.board-row b{margin-right:2px}
.board-row>span:not(.board-chip){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex:1 1 100%}
.board-chip{display:inline-block;padding:1px 8px;border-radius:999px;background:#e6f5ef;border:1px solid #a0cbb9;color:#24634e;font-size:12px;text-decoration:none;white-space:nowrap}
.board-chip:hover{background:#d5eee2}
.board-chip.is-candidate{background:#fff;border-style:dashed;border-color:#9ebddc;color:#3d5f8a}
.board-chip.is-skill{background:#e7f5ef;border-color:#a0cbb9;color:#24634e}
.board-chip.is-tool{background:#eef2f7;border-color:#40546e;color:#25374d;border-radius:4px}
.board-chip.is-consult{background:#ecf7f8;border-color:#b3d3db;color:#275f70}.board-chip.is-consult b{color:#725016;text-transform:none;letter-spacing:0;font-size:inherit;margin:0}
.board-row code{background:#f1f4f8;border:1px solid #d7e0ec;border-radius:4px;padding:1px 6px;font-size:12px;color:#34445a}
.map-tech-link{display:inline-block;margin-top:2px;padding:6px 10px;background:#edf4ff;border:1px solid #b2cae8;border-radius:6px;font-weight:600;font-size:13px}
.diagram-explorer.is-expanded{position:fixed;inset:0;z-index:110;display:flex;flex-direction:column;border:0;border-radius:0;background:#f7f9fc}
.diagram-explorer.is-expanded #diagram-detail{display:flex;flex-direction:column;min-height:0;flex:1}
.diagram-explorer.is-expanded .map-viewport{height:auto;flex:1;min-height:120px;max-height:none;overflow:auto;cursor:default;scrollbar-width:thin;scrollbar-color:#b4c4d8 #f1f4f8}
.diagram-explorer.is-dragging .map-viewport,.diagram-explorer.is-dragging .am-node{cursor:grabbing!important;user-select:none}
.diagram-explorer.is-expanded .diagram-head{padding:10px 20px}
.diagram-explorer.is-expanded #diagram-overview{display:none}
/* the detailed view grows out of the card it replaces: the clip starts at the card's place on the page */
.diagram-explorer.is-expanded{animation:map-open .34s cubic-bezier(.22,.61,.36,1) both}
.diagram-explorer.is-expanded #diagram-detail{animation:map-rise .34s cubic-bezier(.22,.61,.36,1) both}
@keyframes map-open{from{clip-path:inset(var(--open-top,25%) var(--open-right,12%) var(--open-bottom,25%) var(--open-left,12%) round 20px)}to{clip-path:inset(0 0 0 0 round 0)}}
@keyframes map-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.diagram-explorer.is-expanded,.diagram-explorer.is-expanded #diagram-detail{animation:none}.map-open{transition:none}}
.diagram-explorer.is-restored.is-expanded,.diagram-explorer.is-restored.is-expanded #diagram-detail{animation:none}
.diagram-explorer.is-expanded .map-board{height:190px;flex:none}
.mods{grid-template-columns:repeat(4,minmax(0,1fr))}
.modtree>.fan{margin:0 12.5%}
.modtree>.fan i:nth-child(1){left:0}.modtree>.fan i:nth-child(2){left:33.333%}.modtree>.fan i:nth-child(3){left:66.666%}.modtree>.fan i:nth-child(4){left:100%}
@media(max-width:900px){.mods{grid-template-columns:1fr}.map-viewport{height:530px}.map-board,.diagram-explorer.is-expanded .map-board{grid-template-columns:1fr;height:auto;max-height:240px;overflow:auto}.board-state{margin-left:0;flex:1 1 100%}}
@media(max-width:560px){.diagram-head{padding:12px 14px;align-items:flex-start}.diagram-head h3{font-size:15px}.map-open{padding:8px 10px}.map-board{padding-left:14px;padding-right:14px}.map-viewport{height:460px}.mods{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.diagram-explorer,.agent-map-svg{transition:none!important;scroll-behavior:auto}}