/* System map: dark network stage, inspector, chips. Colours for kinds mirror system-map-canvas.js. */
.sysmap-pane{padding:18px}
.sysmap-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:12px}.sysmap-toolbar>div{display:flex;gap:3px}
.sysmap-toolbar button{display:inline-flex;gap:7px;align-items:baseline}.sysmap-toolbar button small{font-size:11px;opacity:.7}
.sysmap-toolbar button[aria-pressed=true]{background:#245348;border-color:#245348;color:#fff}.sysmap-toolbar button[aria-pressed=true] small{color:#d7e8de;opacity:1}
.sysmap-impact{margin:0 0 0 auto;font-size:12px;font-weight:500;max-width:300px}.sysmap-impact select{margin-top:3px;font-size:12px;padding:6px}
.sysmap-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.sysmap-stage{position:relative;border-radius:10px;overflow:hidden;background:#07110e;border:1px solid #1d3a31}.sysmap-stage.is-page{height:clamp(440px,68vh,760px)}.sysmap-stage.is-canvas{height:340px;margin-top:10px}
.sysmap-stage canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}.sysmap-stage canvas.is-over-node{cursor:pointer}.sysmap-stage canvas.is-dragging{cursor:grabbing}.sysmap-stage canvas:focus-visible{outline:3px solid #8ee7c8;outline-offset:-3px}
.sysmap-inspector{max-height:clamp(440px,68vh,760px);overflow:auto;padding:2px 4px 8px}.sysmap-inspector.is-compact{max-height:none;margin-top:12px;border-top:1px solid #e2e7dc;padding-top:12px}
.sysmap-inspector h2{font-size:18px;margin:2px 0 8px}.sysmap-inspector h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#59645e;margin:20px 0 6px}
.sysmap-explain{font-size:14px;line-height:1.7;margin:10px 0 6px;max-width:none}.sysmap-trust{font-size:12px;color:#59645e;margin:0 0 10px}
.sysmap-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0}.sysmap-chip{font-size:12px;font-weight:600;padding:2px 9px;border-radius:99px;background:#eef1ec;border:1px solid #d9dfd6;color:#33433a}
.sysmap-chip.is-confirmed{background:#dff5e6;border-color:#9bd3ac;color:#17542c}.sysmap-chip.is-inferred{background:#fff3da;border-color:#ecc983;color:#6b4708}.sysmap-chip.is-added{background:#e8e4fb;border-color:#c0b7ef;color:#3d3182}.sysmap-chip.is-live{background:#dff5e6;border-color:#78c48f;color:#14502a}
.sysmap-actions{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}.sysmap-actions button{font-size:12px;padding:6px 10px}
.sysmap-form{margin:10px 0;padding:12px;background:#f6f8f4;border:1px solid #dfe5da;border-radius:8px}.sysmap-form.pane{margin:0 0 16px}
.sysmap-links,.sysmap-history{list-style:none;padding:0;margin:0}.sysmap-links li,.sysmap-history li{padding:7px 0;border-bottom:1px solid #e8ece4;font-size:13px}.sysmap-links button{border:0;background:transparent;padding:2px 0;text-align:left}.sysmap-history small,.sysmap-links small{display:block;color:#59645e;font-size:12px}.sysmap-history code{font-size:12px;background:#eef1ec;padding:1px 5px;border-radius:4px}
.sysmap-evidence,.sysmap-coverage,.sysmap-hidden,.sysmap-text,.sysmap-export{margin-top:14px;font-size:13px}.sysmap-evidence li,.sysmap-hidden li,.sysmap-text li{margin:6px 0}.sysmap-hidden button{margin-left:8px;font-size:12px;padding:3px 8px}.sysmap-text li button{border:0;background:transparent;padding:0;text-decoration:underline;font-weight:600}
.sysmap-status{min-height:20px;font-size:13px;color:#245348;margin:10px 0 0}.sysmap-live{font-size:13px;margin:0 0 14px}
.sysmap-legend,.sysmap-key{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;padding:0;margin:10px 0;font-size:12px;color:#33433a}.sysmap-legend li,.sysmap-key li{display:flex;align-items:center;gap:6px}
.sysmap-dot{width:11px;height:11px;border-radius:50%;display:inline-block}.key-ring{width:13px;height:13px;border-radius:50%;border:2px solid #5eead4;display:inline-block;background:#07110e}.key-ring.is-dashed{border-style:dashed;border-color:#fbbf24}.key-ring.is-confirmed{border-color:#4ade80}.key-ring.is-live{border-color:#4ade80;box-shadow:0 0 0 3px #4ade8040}.key-ring.is-active{border-color:#4ade80;border-style:dotted}
.k-client{background:#7dd3fc;color:#10211c}.k-cdn{background:#a5b4fc;color:#10211c}.k-gateway{background:#a5b4fc;color:#10211c}.k-app{background:#5eead4;color:#10211c}.k-function{background:#5eead4;color:#10211c}.k-screens{background:#86efac;color:#10211c}.k-api{background:#67e8f9;color:#10211c}.k-page{background:#86efac;color:#10211c}.k-endpoint{background:#67e8f9;color:#10211c}.k-module{background:#99f6e4;color:#10211c}.k-worker{background:#fdba74;color:#10211c}.k-database{background:#fbbf24;color:#10211c}.k-cache{background:#fb923c;color:#10211c}.k-queue{background:#fb7185;color:#10211c}.k-storage{background:#facc15;color:#10211c}.k-search{background:#fcd34d;color:#10211c}.k-infra{background:#cbd5e1;color:#10211c}.k-auth{background:#c4b5fd;color:#10211c}.k-payments{background:#f0abfc;color:#10211c}.k-email{background:#f9a8d4;color:#10211c}.k-ai{background:#d8b4fe;color:#10211c}.k-realtime{background:#93c5fd;color:#10211c}.k-external{background:#e2e8f0;color:#10211c}
.canvas-system h2{font-size:15px}.canvas-system .sysmap-toolbar{margin:8px 0 0}.canvas-system .sysmap-impact{margin:6px 0 0;max-width:none}
@media(max-width:1050px){.sysmap-layout{grid-template-columns:1fr}.sysmap-inspector{max-height:none}.sysmap-impact{margin-left:0}}
@media(max-width:700px){.sysmap-stage.is-page{height:560px}.sysmap-pane{padding:12px}}
.canvas-open .sysmap-layout{grid-template-columns:minmax(0,1fr)}.canvas-open .sysmap-inspector{max-height:none}.canvas-open .sysmap-stage.is-page{height:clamp(380px,56vh,620px)}
.key-ring{width:16px;height:16px;background:transparent}.key-ring.is-dashed{border-style:dashed;border-color:#d99a00}.key-ring.is-active{border-style:dotted;border-width:3px}
.sysmap-time{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:flex-end;margin:0 0 12px;padding:10px 12px;background:#f3f6f1;border:1px solid #dfe5da;border-radius:8px}.sysmap-time label{flex:1 1 320px;margin:0;font-size:12px;font-weight:600}.sysmap-time-label{display:block;font-weight:500;color:#33433a;margin:2px 0 4px;min-height:18px;overflow-wrap:anywhere}.sysmap-time input[type=range]{padding:0;border:0;background:transparent;accent-color:#245348;margin-top:0}.sysmap-time .actions{display:flex;gap:6px}.sysmap-time button{font-size:12px;padding:6px 10px}
.sysmap-old{margin:0 0 12px;padding:8px 12px;background:#fff3da;border:1px solid #ecc983;border-radius:8px;font-size:13px;color:#5b3d05;max-width:none}.sysmap-old button{margin-left:8px;font-size:12px;padding:4px 9px}.sysmap-old code{font-size:12px;background:#ffe9b8;padding:1px 5px;border-radius:4px}
.sysmap-health{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin:0 0 12px;padding:8px 12px;background:#f3f6f1;border:1px solid #dfe5da;border-radius:8px;font-size:13px;max-width:none}.sysmap-health>span{flex:1 1 240px}.sysmap-health>small{flex-basis:100%}.sysmap-health button{font-size:12px;padding:5px 10px}.sysmap-health.has-trouble{background:#fdeceb;border-color:#f1b2ad}
.sysmap-health-line{font-size:14px;margin:4px 0;font-weight:600}.sysmap-health-line.is-healthy,.sysmap-health-line.is-protected,.sysmap-health-line.is-redirect{color:#17542c}.sysmap-health-line.is-slow,.sysmap-health-line.is-limited,.sysmap-health-line.is-missing{color:#8a4b00}.sysmap-health-line.is-failing,.sysmap-health-line.is-unreachable{color:#a1241b}
.h-healthy{background:#4ade80}.h-warn{background:#fb923c}.h-bad{background:#f87171}
.sysmap-mission{margin:0 0 14px;padding:12px 14px;background:#f8faf6;border:1px solid #dfe5da;border-radius:10px;font-size:13px;max-width:none}.sysmap-mission h3{margin:0 0 4px;font-size:15px}.sysmap-mission h4{margin:12px 0 4px;font-size:13px}.mc-summary{margin:0 0 6px}.mc-needs{color:#9a6b00}.mc-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mc-item{padding:7px 9px;background:#fff;border:1px solid #e3e8df;border-left:4px solid #8a98a6;border-radius:8px;display:grid;gap:2px}.mc-item.is-running{border-left-color:#2fbf71}.mc-item.is-review{border-left-color:#e0a000;background:#fffaf0}.mc-item.is-failed{border-left-color:#d64545;background:#fff6f6}.mc-item.is-merged{border-left-color:#3b82f6}.mc-item.is-focused{outline:2px solid #174c3e}
.mc-focus{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:transparent;border:0;padding:0;text-align:left;font:inherit;cursor:pointer}.mc-badge{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:50%;background:#8a98a6;color:#08130e;font-size:11px;font-weight:700}.mc-badge.is-running{background:#2fbf71}.mc-badge.is-review{background:#e0a000}.mc-badge.is-failed{background:#d64545;color:#fff}.mc-badge.is-merged{background:#3b82f6;color:#fff}
.mc-stage{font-size:11px;font-weight:700;padding:1px 8px;border-radius:99px;background:#eef1ec;color:#33433a}.mc-stage.is-running{background:#dff6e8;color:#14683a}.mc-stage.is-review{background:#fdeec7;color:#7a5200}.mc-stage.is-failed{background:#fbdcdc;color:#8e1f1f}.mc-stage.is-merged{background:#dbe8fd;color:#1d4fa8}.mc-item small{color:#52675c;display:block}.mc-integration{margin:0 0 4px}
.change-impact{margin:0 0 16px;padding:12px 14px;background:#f8faf6;border:1px solid #dfe5da;border-left:5px solid #8a98a6;border-radius:10px;font-size:13px}.change-impact.is-low{border-left-color:#2fbf71}.change-impact.is-medium{border-left-color:#e0a000}.change-impact.is-high{border-left-color:#d64545}.change-impact h3{margin:0 0 6px;font-size:15px}.change-impact h4{margin:10px 0 2px;font-size:13px}
.ci-head{margin:0 0 6px;font-size:14px}.ci-badge{display:inline-block;padding:2px 10px;border-radius:99px;font-weight:700;font-size:12px;background:#eef1ec}.ci-badge.is-low{background:#dff6e8;color:#14683a}.ci-badge.is-medium{background:#fdeec7;color:#7a5200}.ci-badge.is-high{background:#fbdcdc;color:#8e1f1f}
.ci-reasons,.ci-favours,.ci-files{margin:4px 0 8px;padding-left:20px}.ci-reasons li::marker{color:#c47f00}.ci-favours li::marker{color:#2a7d4f}.ci-files{max-height:220px;overflow:auto;list-style:none;padding-left:4px}.ci-files code{overflow-wrap:anywhere}
.sysmap-stage.is-impact{height:260px;margin:8px 0}.ci-legend{margin:0 0 6px}.ci-swatch{display:inline-block;width:12px;height:12px;border-radius:50%;vertical-align:-2px;margin:0 3px 0 8px;border:3px solid #e0a000}.ci-swatch.is-relies{border-style:dotted;background:transparent}
