@layer components{.diagram{margin:var(--space-6) 0 var(--space-7);padding:var(--space-5);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}.diagram h2{margin:0 0 var(--space-4);font-size:var(--text-lg)}.diagram-canvas{margin-bottom:var(--space-5);overflow-x:auto}.diagram-hint{align-items:center;gap:var(--space-2);margin-bottom:var(--space-3);font-size:var(--text-sm);color:var(--color-text-subtle);display:none}@container (width<=41rem){.diagram-hint{display:flex}}.diagram-canvas svg{width:100%;min-width:38rem;height:auto;font-family:var(--font-sans)}.diagram-boundary rect{fill:var(--diagram-boundary-bg);stroke:var(--color-border-strong);stroke-width:1.25px;stroke-dasharray:7 5}.diagram-boundary text{fill:var(--color-text-subtle);font-weight:var(--weight-bold);letter-spacing:.08em;text-transform:uppercase}.diagram-actor rect{fill:var(--diagram-actor-bg);stroke:var(--color-border-strong);stroke-width:1.25px}.diagram-actor text{fill:var(--color-text);font-weight:var(--weight-bold)}.diagram-lifeline{stroke:var(--color-border-strong);stroke-width:1px;stroke-dasharray:2 5}.diagram-arrow{stroke:var(--diagram-line);stroke-width:1.75px}.diagram-head{fill:var(--diagram-line)}.diagram-note{fill:var(--color-surface-2);stroke:var(--color-border-strong);stroke-width:1px}.diagram-label,.diagram-boundary text{paint-order:stroke;stroke:var(--diagram-boundary-bg);stroke-width:5px;stroke-linejoin:round}.diagram-label{fill:var(--color-text-prose)}.diagram-note+.diagram-label{stroke:var(--color-surface-2)}.diagram-flow.is-untrusted .diagram-arrow{stroke:var(--diagram-attack);stroke-dasharray:7 5}.diagram-flow.is-untrusted .diagram-head{fill:var(--diagram-attack)}.diagram-flow.is-untrusted .diagram-label{fill:var(--color-danger);font-weight:var(--weight-semibold)}.diagram-badge circle{fill:var(--color-accent)}.diagram-badge text{fill:var(--color-accent-contrast);font-weight:var(--weight-bold)}.diagram-legend-label{fill:var(--color-text-muted)}.diagram-legend-boundary rect{fill:var(--diagram-boundary-bg);stroke:var(--color-border-strong);stroke-dasharray:4 3}.diagram-legend-untrusted line{stroke:var(--diagram-attack);stroke-width:1.75px;stroke-dasharray:5 4}.diagram-legend-untrusted path{fill:var(--diagram-attack)}.diagram-steps{gap:var(--space-3) var(--space-5);margin:0;padding:0;list-style:none;display:grid}.diagram-steps li{gap:var(--space-3);max-width:none;font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--color-text-muted);grid-template-columns:1.75rem minmax(0,1fr);margin:0;display:grid}.diagram-steps strong{font-size:var(--text-base);display:block}.diagram-step-number{border-radius:var(--radius-full);background:var(--color-accent);width:1.5rem;height:1.5rem;color:var(--color-accent-contrast);font-size:var(--text-xs);font-weight:var(--weight-bold);place-items:center;margin-top:.1em;display:grid}.diagram figcaption{margin-top:var(--space-4);padding-top:var(--space-4);border-top:var(--border-width) solid var(--color-border);font-size:var(--text-sm);line-height:var(--leading-normal);color:var(--color-text-muted)}@container (width>=40rem){.diagram-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=47.99em){.diagram{padding:var(--space-4)}}}
