/* Layered architecture: geometry identifies service group; glyph identifies tool;
   neutral reference panel is explanatory, never an execution component. */
#architecture .view-heading{margin-bottom:14px}#architecture .view-heading h1{font-size:1.85rem}#architecture .language-note{padding:7px 12px;font-size:.875rem}#architecture .scenario-controls{margin-bottom:12px;padding:10px 14px}.overlay-controls{padding:12px 16px;margin-bottom:16px;grid-template-columns:1fr 1fr}.overlay-controls h2{font-size:1rem}.overlay-controls p{font-size:.875rem}
.workbench{grid-template-columns:minmax(0,2.5fr) minmax(310px,1fr);gap:20px}.workbench.canvas-only{grid-template-columns:1fr}.diagram-map{padding:18px 24px 16px;background:#fff}.diagram-key{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;font-size:.875rem;color:#4b5d73;border-bottom:1px solid #dbe5e9;padding-bottom:10px;margin-bottom:12px}.diagram-key i{display:inline-block;width:12px;height:12px;margin-right:6px;border-radius:2px;vertical-align:middle}.tool-key{background:#e7f3fc;border:1px solid #007bb9}.reference-key{background:#f3f5f9;border:1px solid #76849a}.diagram-key button{margin-left:auto;font-size:.875rem;padding:5px 10px;min-height:36px}.trace-toolbar{margin:0 0 10px;flex-direction:row;align-items:center}.trace-story{position:static;border:0;background:#f3f6f8;border-radius:5px;padding:10px 14px;margin-bottom:20px;display:flex;align-items:center;gap:16px}.trace-story p{font-size:.875rem;min-height:0}.trace-story>div:first-child{flex:1}.trace-buttons{flex-shrink:0;margin:0}.trace-story .eyebrow{font-size:.75rem}
.stack-canvas{padding:0 18px 0 0;isolation:isolate}.architecture-layer{display:grid;grid-template-columns:140px minmax(0,1fr);gap:14px;position:relative;margin:0 0 24px;padding:14px 14px 14px 0;border-radius:6px;background:#f0f3f6;border:1px solid #d2dce3;border-left:0;box-shadow:0 5px 0 #dce4e9}.architecture-layer::after{content:'';position:absolute;left:140px;right:0;bottom:-5px;height:4px;background:#b4c4cd;z-index:-1}.layer-label{padding:0 12px 0 14px;align-self:center}.layer-label>span{display:block;font-size:.75rem;letter-spacing:.08em;color:#98c8eb;font-weight:750;margin-bottom:5px}.layer-label h2{font-size:.9375rem;line-height:1.25;margin:0 0 5px;letter-spacing:0}.layer-label p{font-size:.75rem;line-height:1.4;color:#d3e1ee;margin:0}.layer-content{min-width:0}.layer-content.stack-policy{margin:0;grid-template-columns:1fr 1fr;gap:14px}.front-layer{background:#edf3f9}.policy-layer{background:#f1f3f7}.execution-layer{background:#eaf2fb}.observation-layer{background:#f0f5fa}.security-layer{background:#eef0f3;border:1px dashed #8798a4;border-left:3px solid #617683;box-shadow:none}.security-layer::after{display:none}
.stack-canvas .node,.stack-canvas .runtime-box,.stack-canvas .cssp-service{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;align-content:center;text-align:left;background:#ffffff;color:#20254b;border:1px solid #b4c5d9;border-radius:6px;min-height:86px;padding:12px;margin:0;box-shadow:0 2px 0 #dce5ef;position:relative;z-index:2;width:100%}.stack-canvas .node strong,.stack-canvas .runtime-box strong,.stack-canvas .cssp-service strong{grid-column:2;font-size:.9375rem;line-height:1.3;letter-spacing:0}.stack-canvas .node small,.stack-canvas .runtime-box span,.stack-canvas .cssp-service span{grid-column:2;font-size:.8125rem;line-height:1.4;color:#52647b;margin-top:4px;display:block}.object-symbol{grid-column:1;grid-row:1 / span 2;width:36px;height:36px;align-self:center;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:#007bb9}.stack-canvas .node:hover{background:#f0f8ff;border-color:#007bb9}.stack-canvas .node[aria-pressed=true]{background:#e6f3ff;box-shadow:0 2px 0 #76b8e2,inset 0 0 0 1px #007bb9}.stack-canvas .node[aria-pressed=true] strong,.stack-canvas .node[aria-pressed=true] small{color:#143f65}.stack-lanes{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:22px}.stack-lanes section{padding:10px;background:#eef0f1;border:1px solid #b7c2c7;border-radius:5px}.stack-lanes .cloud-stack{background:#deecfa;border:1px solid #94b9d9}.stack-lane-title{min-height:0;margin-bottom:14px}.stack-lane-title h3{font-size:.875rem;color:#173f67;margin:0}.stack-lane-title .stage-label,.cloud-stack .stack-lane-title .stage-label{font-size:.7rem;color:#345a7b;margin:0 0 6px}.stack-lanes .node{margin-bottom:22px}.stack-canvas .retained-stack .node,.stack-canvas .retained-stack .runtime-box{background:#fafbfc;color:#405561;border-color:#acbbc4;box-shadow:0 2px 0 #d3dce0}.retained-stack .object-symbol{color:#617684}.stack-canvas .retained-stack small,.stack-canvas .retained-stack span{color:#586975}.stack-canvas .runtime-box{min-height:104px}.stack-canvas .cloud-stack .runtime-box{background:#123e63;border-color:#123e63}.return-nodes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.stack-canvas .cssp-service{min-height:90px;background:#f7f9fb;color:#354c5e;border-color:#92a8b9;box-shadow:none}.cssp-service .object-symbol{color:#4a667a}.stack-canvas .cssp-service span{color:#526979}.trace-current{outline:3px solid #b76316!important;outline-offset:3px}.trace-visited{border-color:#5d9fcc!important}.wire.current{animation:none;stroke-dasharray:6 4}.flow-legend{font-size:.8125rem}.map-foot{font-size:.8125rem;line-height:1.5}.inspector{background:#f8faff;border:1px solid #d8dfeb;border-top:4px solid #252650;box-shadow:none;padding:20px;position:sticky;top:78px;max-height:calc(100vh - 100px);overflow:auto}.inspector .pill{background:#e5eaf3;color:#454a6d}.inspector h2{font-size:1.3rem}.inspector:before{content:'REFERENCE PANEL';display:block;font-size:.75rem;letter-spacing:.12em;font-weight:750;color:#666b88;margin-bottom:16px}.inspector p,.inspector .detail-section p{font-size:.9375rem}.inspector .caution{background:#f7faff;border-left-color:#8caecc}.inspector select{width:100%}
@media(max-width:1200px){.architecture-layer{grid-template-columns:115px minmax(0,1fr);gap:10px}.architecture-layer::after{left:115px}.layer-label{padding-left:10px;padding-right:4px}.diagram-map{padding:14px}.workbench{grid-template-columns:minmax(0,2fr) minmax(290px,1fr)}.stack-canvas .node,.stack-canvas .runtime-box{grid-template-columns:30px minmax(0,1fr);column-gap:8px;padding:10px}.object-symbol{width:28px;height:28px}.stack-lanes{gap:14px}.stack-lanes section{padding:8px}.stack-canvas{padding-right:12px}}
@media(max-width:1000px){.workbench{grid-template-columns:1fr}.inspector{position:static;max-height:none}.architecture-layer{grid-template-columns:140px minmax(0,1fr)}.stack-lanes{grid-template-columns:1fr 1.4fr}.trace-toolbar{flex-direction:row}}
@media(max-width:600px){.architecture-layer{grid-template-columns:1fr;padding:12px;margin-bottom:22px;gap:12px;border-left:1px solid #d2dce3}.architecture-layer::after{left:0}.layer-label{display:grid;grid-template-columns:25px 1fr;column-gap:8px;padding:0}.layer-label>span{grid-row:1/3}.layer-label h2{font-size:1rem}.layer-label p{font-size:.8125rem}.stack-lanes{grid-template-columns:1fr}.retained-stack{order:2}.cloud-stack{order:1}.layer-content.stack-policy,.return-nodes{grid-template-columns:1fr}.stack-canvas .node,.stack-canvas .runtime-box{grid-template-columns:40px minmax(0,1fr)}.object-symbol{width:36px;height:36px}.trace-story{display:block}.trace-buttons{margin-top:10px}.trace-toolbar{flex-direction:column;align-items:stretch}.diagram-key{gap:10px;font-size:.8125rem}.diagram-key button{margin-left:0}.overlay-controls{grid-template-columns:1fr}.stack-canvas{padding-right:8px}.language-note a{white-space:normal}.inspector{top:0}}
@media print{.diagram-key{display:none}.inspector{max-height:none;overflow:visible;position:static}.inspector[hidden]{display:block!important}.stack-canvas .node,.stack-canvas .cssp-service{display:grid!important}.architecture-layer{break-inside:avoid;box-shadow:none}.architecture-layer::after{display:none}.architecture-layer{grid-template-columns:120px minmax(0,1fr)}.stack-lanes{grid-template-columns:1fr 1.3fr}.retained-stack{order:0}.stack-canvas{print-color-adjust:exact;-webkit-print-color-adjust:exact}}
/* Keep the controls subordinate to the architecture canvas. */
#architecture .overlay-controls>div:first-child p{display:none}#architecture .overlay-controls{align-items:center;grid-template-columns:1fr 2fr}#architecture .overlay-controls label{display:flex;align-items:center;gap:12px}#architecture .overlay-controls select{margin:0;flex:1}#architecture .view-heading>.text-link{font-size:.8125rem}#architecture .language-note{background:transparent;border:0;padding:0;font-size:.8125rem}#architecture .scenario-controls p{font-size:.8125rem}
@media(min-width:1001px){.canvas-only .stack-lanes{grid-template-columns:1fr 2fr}.canvas-only .cloud-stack{display:grid;grid-template-columns:1fr 1fr;gap:16px}.canvas-only .cloud-stack .stack-lane-title,.canvas-only .cloud-stack .runtime-box{grid-column:1/-1}.canvas-only .cloud-stack .node{margin-bottom:10px}.canvas-only .return-nodes{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:600px){#architecture .overlay-controls{grid-template-columns:1fr}#architecture .overlay-controls label{display:block}#architecture .overlay-controls select{margin-top:6px}}