/* Guard lab for "Agentic Admin API Configuration for Edge Delivery Services".
   Built on the site kit (/css/explainers.css): .lab, .chips, .gates, .verdict. */
.guard textarea { width: 100%; min-width: 0; min-height: 9.5em; resize: vertical; font: 400 12.5px/1.6 var(--font-mono); padding: 12px 14px; border-radius: 12px; border: 1px solid var(--night-line); background: var(--night); color: var(--bone); }
.guard textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.guard .chips { margin-bottom: 4px; }
.guard .gates li { grid-template-columns: 28px 1fr 24px; }
.guard .gate__msg { color: var(--ink-2); overflow-wrap: anywhere; }
.guard .gates li[data-state="hit"] { border-color: var(--differs); background: color-mix(in srgb, var(--differs) 7%, var(--bg)); }
.guard .gates li[data-state="hit"] .gate__state { background: var(--differs); }
.guard .gates li[data-state="hit"] .gate__msg { color: var(--differs); }
.guard .gates li[data-state="exit"] { border-color: var(--pass-ink); }
.guard .gates li[data-state="exit"] .gate__state { border: 2px solid var(--pass-ink); }
.guard .gates li[data-state="exit"] .gate__msg { color: var(--pass-ink); }
.guard .verdict pre { margin: 8px 0 0; padding: 0; background: none; border: 0; color: var(--bone-2); font: 400 12px/1.55 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.guard .verdict .ask { color: var(--gold); font-weight: 600; }
.guard .verdict .allow { color: var(--mint); font-weight: 600; }
.lab > figcaption { padding: 0 18px 18px; margin-top: 0; }

/* Quality pass, October 2026 */
/* gate text stays readable on the tinted "hit" card (was 3.4:1 and 3.9:1 in light mode) */
.guard .gates li[data-state="hit"] .gate__msg { color: color-mix(in srgb, var(--differs) 55%, var(--ink)); }
.guard .gates li[data-state="hit"] span, .guard .gates li[data-state="hit"] .gate__n { color: var(--ink-2); }
/* a small crop from the recording: show it at its own size instead of upscaling it */
.fig--native img { width: auto; max-width: min(100%, 690px); }
/* presets wrap on phones instead of scrolling out of view, and every control is a 44px target */
@media (max-width: 640px) {
  .guard .chips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .guard .chips button { min-height: 44px; }
}
/* Second pass, October 4: the verdict says the outcome in words first */
.guard .verdict .ask, .guard .verdict .allow { display: inline; margin-right: 4px; }
.guard .verdict__sub { margin: 10px 0 0; color: var(--bone-2); font-size: 13px; }