@import url("../_shared/TOKENS.css");

/* CM1 anchor visuals: local additions keep the shared paper/editorial system intact. */
.anchor-wrap{display:flex;flex-direction:column;gap:10px;min-height:0;width:100%}
.anchor-visual{display:block;width:100%;height:auto;max-height:390px;min-height:0}
.anchor-visual text{font-family:var(--sans)}
.anchor-visual .svg-card{fill:rgba(255,255,255,.42);stroke:var(--blue);stroke-width:3}
.anchor-visual .svg-host-shell{fill:rgba(226,237,240,.36);stroke:var(--blue);stroke-width:3}
.anchor-visual .svg-kicker{font-size:22px;font-weight:700;letter-spacing:.12em;fill:var(--blue)}
.anchor-visual .svg-title{font-size:30px;font-weight:600;fill:var(--ink)}
.anchor-visual .svg-copy{font-size:21px;fill:var(--muted)}
.anchor-visual .svg-label{font-size:22px;font-weight:700;letter-spacing:.04em;fill:var(--ink)}
.anchor-visual .svg-arrow{fill:none;stroke:var(--blue);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.anchor-visual .svg-arrow.healthy{stroke:var(--healthy)}
.anchor-visual .svg-arrow.caution{stroke:var(--caution)}
.anchor-visual .svg-arrow.danger{stroke:var(--danger)}
.anchor-visual .svg-arrow-label{font-size:20px;font-weight:600;fill:var(--blue)}
.anchor-visual .svg-arrow-label.healthy{fill:var(--healthy)}
.anchor-visual .svg-arrow-label.caution{fill:var(--caution)}
.anchor-visual .svg-arrow-label.danger{fill:var(--danger)}
.anchor-visual .svg-boundary-label{font-size:19px;fill:var(--muted)}
.anchor-visual .svg-boundary-label.caution{fill:var(--caution)}
.anchor-visual .svg-boundary-label.danger{fill:var(--danger)}
.anchor-visual .svg-causal,.anchor-visual .svg-kernel-column,.anchor-visual .svg-kernel-callout{transition:opacity .18s ease}
.anchor-visual .svg-causal.is-muted,.anchor-visual .svg-kernel-column.is-muted,.anchor-visual .svg-kernel-callout.is-muted{opacity:.16}
.anchor-controls{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.anchor-controls button{font-size:17px;padding:6px 12px;border-color:var(--blue)}
.anchor-controls button[aria-pressed="true"]{background:var(--pale);border-color:var(--blue)}
.anchor-status{font-size:18px;color:var(--muted);margin-left:6px}
.kernel-visual .svg-divider{stroke:var(--line);stroke-width:2;stroke-dasharray:5 9}
.kernel-visual .svg-layer{fill:rgba(255,255,255,.52);stroke:var(--blue);stroke-width:2}
.kernel-visual .svg-kernel-layer{fill:var(--ink);stroke:var(--ink)}
.kernel-visual .inverse{fill:var(--paper)}
.kernel-visual .svg-boundary-layer{fill:var(--caution);fill-opacity:.12;stroke:var(--caution)}
.kernel-visual .svg-shared-kernel{fill:var(--healthy);fill-opacity:.18;stroke:var(--healthy)}
.kernel-visual .svg-hardware{fill:var(--inactive);fill-opacity:.14;stroke:var(--inactive)}
.lifecycle-visual .svg-state{opacity:.36;transition:opacity .18s ease}
.lifecycle-visual .svg-state.is-current{opacity:1}
.lifecycle-visual .svg-state.is-past{opacity:.7}
.lifecycle-visual .svg-state rect{stroke-width:3}
.lifecycle-visual .svg-state.is-current rect{stroke-width:6}
.lifecycle-visual .svg-state-created rect{fill:var(--inactive);fill-opacity:.12;stroke:var(--inactive)}
.lifecycle-visual .svg-state-running rect{fill:var(--healthy);fill-opacity:.13;stroke:var(--healthy)}
.lifecycle-visual .svg-state-stopped rect{fill:var(--caution);fill-opacity:.13;stroke:var(--caution)}
.lifecycle-visual .svg-state-removed rect{fill:var(--danger);fill-opacity:.11;stroke:var(--danger)}
.lifecycle-visual .svg-transition{opacity:.3;transition:opacity .18s ease}
.lifecycle-visual .svg-transition.is-current{opacity:1}
.lifecycle-visual .svg-image-rail{fill:none;stroke:var(--healthy);stroke-width:5;stroke-dasharray:11 9;opacity:.8}
.lifecycle-visual .svg-image-card{fill:var(--paper);stroke:var(--healthy);stroke-width:2}
.lifecycle-visual .svg-image-card + .svg-boundary-label{fill:var(--healthy)}
.narrow-only{display:none}
.narrow-summary{border-top:2px solid var(--line);border-bottom:2px solid var(--line);padding:12px 0;gap:10px}
.narrow-step{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}
.narrow-step:last-child{border-bottom:0}
.narrow-step b{font-size:20px;color:var(--blue)}
.narrow-step span{font-size:20px;color:var(--ink)}
.narrow-step small{grid-column:1 / -1;font-size:17px;color:var(--muted)}
.narrow-callout{padding:10px 12px;border-left:4px solid var(--caution);background:var(--paper);font-size:19px;color:var(--ink)}
@media screen and (min-width:1600px){.anchor-visual{max-height:500px}.anchor-controls button{font-size:19px}}
@media screen and (max-width:700px){.anchor-visual{display:none}.narrow-only{display:grid}.architecture-anchor .anchor-controls,.kernel-anchor .anchor-controls{display:none}.anchor-controls{justify-content:flex-start}.anchor-controls button{font-size:15px;padding:6px 8px}.anchor-status{font-size:15px;margin-left:0}.lifecycle-anchor .narrow-summary{display:grid}.narrow-step b,.narrow-step span{font-size:19px}.narrow-step small{font-size:18px}.narrow-callout{font-size:18px}}
@media print{.anchor-controls{display:none!important}.anchor-visual{max-height:390px!important}.anchor-visual .svg-causal,.anchor-visual .svg-kernel-column,.anchor-visual .svg-kernel-callout,.lifecycle-visual .svg-state,.lifecycle-visual .svg-transition{opacity:1!important}.lifecycle-visual .svg-state rect{stroke-width:3}.lifecycle-visual .svg-state.is-current rect{stroke-width:3}}