/* /guard extras: the "where Guard sits" diagram and small spacing helpers. */

.g-diagram { margin: 0 auto clamp(40px, 6vw, 72px); max-width: 440px; }
.g-diagram svg { display: block; width: 100%; height: auto; }
.g-box { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.g-world { stroke: var(--world); stroke-width: 3; }
.g-guard { fill: var(--ink); }
.g-layer { fill: var(--ink-2); stroke: var(--line-ink); }
.g-arrow { stroke: var(--ink); stroke-width: 1.5; fill: none; }
.g-head { fill: var(--ink); }
.g-t { font: 500 20px var(--sans); fill: var(--ink); text-anchor: middle; }
.g-t-inv { fill: var(--paper); }
.g-s { font: 400 15px var(--sans); fill: var(--paper); }
.g-c { fill: var(--ink); text-anchor: middle; }
.g-note { font: 400 13px var(--mono); fill: var(--gray-600); }

.g-more { margin-top: 28px; max-width: 62ch; overflow-wrap: anywhere; }
.p-quote p { overflow-wrap: anywhere; }
.dark .p-strip a { color: inherit; text-underline-offset: 3px; }
/* Footer labels are longer here than on the home page; let the three columns shrink at 320px. */
.footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.footer-cols .label, .footer-cols a { overflow-wrap: anywhere; }
/* Keep the Copy button off the first line of code on narrow screens. */
@media (max-width: 720px) { .p-code pre { padding-top: 64px; } }