/* Layout uses shared reporting tokens; the process canvas always stays light. */
main{max-width:1600px;margin:auto;padding:18px 22px}
.skip-link{position:absolute;top:-100px;left:12px;background:var(--panel);padding:8px;z-index:100}
.skip-link:focus{top:8px}
.model-status{border-left:4px solid var(--accent);padding:8px 12px;background:var(--accent-soft)}
.process-intro{max-width:95ch}
.process-intro h2{font-size:1rem;margin-bottom:4px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:end;background:var(--panel);padding:12px;border:1px solid var(--line);border-radius:10px}
.toolbar label{display:flex;flex-direction:column;gap:3px;font-size:.85rem}
.toolbar select{max-width:36ch;border:1px solid var(--control-line);border-radius:6px;padding:6px}
.toolbar a.btn{display:inline-block;text-decoration:none}
.viewer-help{font-size:.85rem;color:var(--muted);margin:8px 0}
.process-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,330px);gap:14px}
.process-layout:not(.has-selection){grid-template-columns:minmax(0,1fr)}
[hidden]{display:none!important}
#canvas{position:relative;isolation:isolate;height:60vh;min-height:360px;border:1px solid var(--control-line);border-radius:8px;background:#fff;color:#1e2433;color-scheme:light;overflow:hidden}
#canvas svg:focus-visible{outline:2px solid var(--focus);outline-offset:-3px}
#inspector{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:14px;overflow:auto;max-height:60vh}
#inspector h2{font-size:1.1rem;margin-top:0}
#inspector .description{white-space:pre-wrap}
pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.8rem;background:var(--code-bg);padding:10px}
.process-elements{padding-left:24px;max-width:105ch}
.process-elements>li{padding:14px;border-bottom:1px solid var(--line);background:var(--panel);margin:8px 0}
.process-elements h3{font-size:1rem;margin:0 0 5px}
.process-elements p{margin:5px 0}
.element-select{padding:0;border:0;color:var(--accent);text-align:left;cursor:pointer;background:transparent;font-weight:600}
.element-select:hover{text-decoration:underline}
.process-cards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.process-cards>li{padding:18px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
.process-cards h2{font-size:1.1rem;margin:0}
#diagram-region:fullscreen{display:flex;flex-direction:column;background:var(--bg);padding:14px;overflow:auto;color:var(--ink)}
#diagram-region:fullscreen .process-layout{flex:1;min-height:360px}
#diagram-region:fullscreen #canvas{height:100%;min-height:360px}
#diagram-region:fullscreen #inspector{max-height:none}
@media(max-width:800px){main{padding:12px}.process-layout{grid-template-columns:1fr}#canvas{height:55vh}#inspector{max-height:none}.toolbar select{max-width:75vw}}
@media print{#diagram-region,.toolbar,.element-select{display:none}.process-elements{max-width:none}.process-elements>li{break-inside:avoid}}