/* B16-GUARD-001 -- Attribution ≠ Authority demonstration.
   Pure HTML/CSS (radio-driven tabs, no JavaScript): this section is
   fetched as static markup into the Inspection Console's CHALLENGE mode
   (assets/js/inspect-console.js clones DOM nodes; a cloned <script> does
   not execute), so it must work correctly with zero script, both
   standalone on inspect-siw/challenge.html and injected into the
   Console. Reuses the site's theme variables and the existing .fip-chip /
   .lifecycle-flow-* vocabulary rather than inventing a new one.

   Structure (see challenge.html): five radio inputs, then .guard-tabs
   (labels only), then the five .guard-panel blocks, then the always-
   visible .guard-outcome -- radios, .guard-tabs and each .guard-panel are
   siblings, so the general-sibling combinator can reach both the matching
   tab label and the matching panel from whichever radio is checked. */

.guard-demo { border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; background: var(--surface); margin: 14px 0; }
.guard-radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.guard-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.guard-tab { padding: 7px 13px; border: 1.5px solid var(--line); border-radius: 999px; font-size: .84rem; font-weight: 700; cursor: pointer; background: var(--surface-2); color: var(--ink-soft); display: inline-block; }
.guard-panel { display: none; }

#guard-src-ai:focus-visible ~ .guard-tabs label[for="guard-src-ai"],
#guard-src-standards:focus-visible ~ .guard-tabs label[for="guard-src-standards"],
#guard-src-health:focus-visible ~ .guard-tabs label[for="guard-src-health"],
#guard-src-gov:focus-visible ~ .guard-tabs label[for="guard-src-gov"],
#guard-src-research:focus-visible ~ .guard-tabs label[for="guard-src-research"] { outline: 3px solid var(--brand); outline-offset: 2px; }

#guard-src-ai:checked ~ .guard-tabs label[for="guard-src-ai"],
#guard-src-standards:checked ~ .guard-tabs label[for="guard-src-standards"],
#guard-src-health:checked ~ .guard-tabs label[for="guard-src-health"],
#guard-src-gov:checked ~ .guard-tabs label[for="guard-src-gov"],
#guard-src-research:checked ~ .guard-tabs label[for="guard-src-research"] { background: var(--brand); color: #fff; border-color: var(--brand); }

#guard-src-ai:checked ~ #guard-panel-ai,
#guard-src-standards:checked ~ #guard-panel-standards,
#guard-src-health:checked ~ #guard-panel-health,
#guard-src-gov:checked ~ #guard-panel-gov,
#guard-src-research:checked ~ #guard-panel-research { display: block; }

.guard-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 20px; margin: 10px 0 4px; }
.guard-fields dt { font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.guard-fields dd { margin: 3px 0 0; font-size: .9rem; }
.guard-fields dd.guard-not-established { font-style: italic; color: var(--ink-soft); }

.guard-outcome { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 18px; }
.guard-outcome-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--surface-2); text-align: center; }
.guard-outcome-card h4 { margin: 0 0 8px; font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }

@media (max-width: 640px) {
  .guard-fields, .guard-outcome { grid-template-columns: 1fr; }
}