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

.card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.healthy-text{color:var(--healthy)}
.node small{overflow-wrap:anywhere}
.flow .node b{font-size:clamp(24px,2vw,32px)}
.card{min-height:92px;border-top:3px solid var(--blue);background:rgba(255,255,255,.55);padding:15px 14px;display:flex;flex-direction:column;justify-content:space-between}
.card b{font-size:clamp(20px,1.7vw,28px);font-weight:600}
.card span{font-size:clamp(18px,1.45vw,24px);color:var(--muted);line-height:1.2}
.caption{font-size:clamp(18px,1.5vw,25px);color:var(--muted);margin:.6em 0 0}
.service-map{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,1.2fr) minmax(0,1fr);grid-template-rows:auto auto;gap:16px;align-items:center}
.service-box{border:2px solid var(--blue);padding:20px 16px;background:rgba(255,255,255,.55);text-align:center}
.service-box.durable{border-color:#2b7d72;background:#e0eee9}
.service-box b{font-family:var(--mono);font-size:clamp(23px,2vw,32px);display:block}
.service-box small{font-size:clamp(18px,1.5vw,24px);color:var(--muted)}
.service-link{text-align:center;color:var(--blue);font-size:clamp(19px,1.6vw,27px)}
.service-link span{display:block;font-family:var(--mono);font-size:clamp(18px,1.5vw,24px);margin-bottom:10px}
.service-link i{font-style:normal;font-size:38px}
.host-lane{grid-column:1 / -1;border-top:2px dashed var(--warm);padding:10px 14px;display:flex;justify-content:space-between;font-size:clamp(19px,1.6vw,26px)}
.host-lane strong{color:var(--warm);font-weight:600}
.timeline{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:clamp(22px,2vw,32px)}
.timeline span{border-bottom:3px solid var(--blue);padding:14px 10px;text-align:center;flex:1}
.timeline span.changed{border-color:var(--warm);background:#f4e1d6;color:var(--warm)}
.timeline i{font-style:normal;color:var(--blue);font-size:34px}
.storage-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.storage-lane{min-height:150px;border:2px solid var(--blue);padding:18px 14px;display:flex;flex-direction:column;justify-content:space-between;background:rgba(255,255,255,.5)}
.storage-lane b{font-family:var(--mono);font-size:clamp(20px,1.7vw,27px)}
.storage-lane span{font-size:clamp(18px,1.45vw,24px);color:var(--muted)}
.storage-lane.volume{border-color:#2b7d72;background:#e0eee9}
.storage-lane.bind{border-color:#bf865e;background:#f4e8dc}
.storage-lane.backup{border-color:var(--warm);background:#f4e1d6}
.pause-card{padding:34px 20px;border-top:3px solid var(--warm);background:#f4e1d6}
.network-object{border:2px solid var(--blue);background:rgba(255,255,255,.5);padding:14px 18px;display:flex;flex-direction:column;gap:10px}
.perspective-tabs{display:flex;gap:8px;flex-wrap:wrap}
.perspective-tabs button{font-size:clamp(18px,1.45vw,24px);padding:8px 12px;border-top:3px solid var(--blue)}
.perspective-tabs button.active{background:var(--pale);border-color:var(--blue);color:var(--ink)}
.network-map{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center}
.network-caller,.network-target{padding:16px;border:2px solid var(--blue);min-width:0}
.network-target{border-color:var(--blue);background:var(--pale)}
.network-caller .label,.network-target .label{font-size:24px}
.network-caller strong,.network-target strong{display:block;font-size:clamp(24px,1.8vw,29px);margin-bottom:8px}
.network-caller code,.network-target code{font-size:clamp(24px,1.65vw,28px);overflow-wrap:anywhere}
.network-arrow{font-size:42px;color:var(--blue)}
.network-message{border-left:4px solid var(--warm);padding:8px 16px;margin:0;background:#f4e1d6;font-size:clamp(19px,1.5vw,25px)}
.network-controls{display:flex;gap:10px;flex-wrap:wrap}
.network-controls button{font-size:18px}
.network-static{display:none;margin:0;color:var(--muted);font-size:clamp(18px,1.35vw,22px)}
.network-static code{font-size:.95em}
@media screen and (max-width:900px){.card-grid,.storage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.timeline{flex-wrap:wrap}.timeline span{min-width:42%}.timeline i{display:none}}
@media screen and (max-width:700px){.card-grid,.storage-grid{grid-template-columns:1fr}.service-map,.network-map{grid-template-columns:1fr;gap:10px}.service-link,.network-arrow{transform:rotate(90deg);justify-self:center}.host-lane{grid-column:auto}.network-object{padding:14px}.network-caller .label,.network-target .label{font-size:20px}.network-caller strong,.network-target strong{font-size:22px}.network-caller code,.network-target code{font-size:20px}.network-controls button{font-size:17px}}
  @media print{.card-grid{gap:10px}.card{min-height:82px;padding:10px}.timeline span{padding:10px 6px}.service-box{padding:14px 10px}.storage-lane{min-height:110px;padding:12px 10px}.network-controls,.perspective-tabs{display:none!important}.network-object{padding:12px}.network-map{display:grid}.network-static{display:block}}

/* CM3 anchor visuals: bounded SVG maps preserve the shared paper/editorial system. */
.anchor-wrap{display:flex;flex-direction:column;gap:10px;min-height:0;width:100%}
.anchor-visual{display:block;width:100%;height:auto;max-height:420px;min-height:0}
.anchor-visual text{font-family:var(--sans)}
.anchor-visual .svg-contract-shell,.anchor-visual .svg-network-shell,.anchor-visual .svg-storage-shell{fill:rgba(255,255,255,.38);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-kicker.healthy{fill:var(--healthy)}
.anchor-visual .svg-kicker.caution{fill:var(--caution)}
.anchor-visual .svg-title{font-size:28px;font-weight:600;fill:var(--ink)}
.anchor-visual .svg-copy{font-size:20px;fill:var(--muted)}
.anchor-visual .svg-boundary-label{font-size:19px;fill:var(--muted)}
.anchor-visual .svg-boundary-label.healthy{fill:var(--healthy)}
.anchor-visual .svg-boundary-label.caution{fill:var(--caution)}
.anchor-visual .svg-boundary-label.danger{fill:var(--danger)}
.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-contract-card{fill:rgba(255,255,255,.62);stroke:var(--blue);stroke-width:2}
.anchor-visual .svg-contract-process,.anchor-visual .svg-contract-port{stroke:var(--caution);fill:rgba(255,255,255,.64)}
.anchor-visual .svg-contract-probe,.anchor-visual .svg-contract-recovery{stroke:var(--healthy);fill:rgba(236,247,242,.7)}
.anchor-visual .svg-network-private{fill:rgba(226,237,240,.45);stroke:var(--blue);stroke-width:2;stroke-dasharray:8 7}
.anchor-visual .svg-network-box{fill:rgba(255,255,255,.6);stroke:var(--blue);stroke-width:3}
.anchor-visual .svg-network-api{stroke:var(--caution);fill:rgba(255,248,230,.7)}
.anchor-visual .svg-network-db{stroke:var(--healthy);fill:rgba(236,247,242,.7)}
.anchor-visual .svg-network-callout{fill:rgba(255,255,255,.62);stroke:var(--blue);stroke-width:2}
.anchor-visual .svg-network-callout.caution{stroke:var(--caution);fill:rgba(255,248,230,.7)}
.anchor-visual .svg-storage-lane{stroke-width:2}
.anchor-visual .svg-storage-ephemeral{fill:rgba(255,255,255,.62);stroke:var(--danger)}
.anchor-visual .svg-storage-volume{fill:rgba(236,247,242,.7);stroke:var(--healthy)}
.anchor-visual .svg-storage-bind{fill:rgba(255,248,230,.7);stroke:var(--caution)}
.anchor-visual .svg-storage-backup,.anchor-visual .svg-storage-recovery{fill:rgba(226,237,240,.7);stroke:var(--blue);stroke-width:2}
.anchor-visual .svg-causal{transition:opacity .18s ease}
.anchor-visual .svg-causal.is-muted{opacity:.14}
.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"],.anchor-controls button.active{background:var(--pale);border-color:var(--blue)}
.anchor-status{font-size:18px;color:var(--muted);margin-left:6px}
.network-message{border-left:4px solid var(--caution);padding:8px 16px;margin:0;background:#f4e8cf;font-size:clamp(19px,1.45vw,25px)}
.network-static{display:none;margin:0;color:var(--muted);font-size:clamp(18px,1.35vw,22px)}
.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)}
.contract-visual,.network-visual,.storage-visual{max-height:420px}
@media screen and (min-width:1600px){.anchor-visual{max-height:500px}.anchor-controls button{font-size:19px}}
@media screen and (max-width:900px){.anchor-visual .svg-title{font-size:26px}.anchor-visual .svg-copy{font-size:19px}.anchor-visual .svg-kicker{font-size:20px}.anchor-visual .svg-boundary-label{font-size:18px}}
@media screen and (max-width:700px){.anchor-visual{display:none}.narrow-only{display:grid}.anchor-controls{justify-content:flex-start}.anchor-controls button{font-size:15px;padding:6px 8px}.anchor-status{font-size:15px;margin-left:0}.network-message{font-size:18px}.narrow-step b,.narrow-step span{font-size:19px}.narrow-step small{font-size:18px}}
@media print{.anchor-controls,.network-message{display:none!important}.anchor-visual{max-height:390px!important}.anchor-visual .svg-causal{opacity:1!important}.network-static{display:block}.narrow-only{display:none!important}}