/* Switch a safeguard off: the five safeguards (Community Architecture,
   section 10) as switches on a living network. Shared by the Community
   Architecture page and the home page (2026-10-22). Base .sfi styles live in
   site.css; behaviour in assets/safeguards.js on top of sf-interactive.js. */
.sg{
  margin:44px 0 0;padding:32px;border-radius:var(--radius);color:var(--paper);
  background:radial-gradient(700px 420px at 30% 0%, rgba(49,143,154,.22), transparent 65%), var(--teal);
  border:1px solid rgba(251,250,246,.13);box-shadow:0 30px 60px -40px rgba(4,56,63,.6);
}
.sg-hint a{color:var(--sagefire);text-decoration:underline;text-underline-offset:3px}
/* a safeguard switched off turns red */
.sg .sfi-switch[aria-checked="false"]{border-color:#E25248;background:rgba(226,82,72,.34)}
.sg .sfi-switch[aria-checked="false"] .knob{background:#E25248}
.sg .sfi-switch[aria-checked="false"] .n{color:#FF9A92}
.sg-cap .lab.off{color:#FF9A92}
.sg .sg-title{margin:0 0 4px;font-size:24px;color:var(--paper)}
.sg-hint{font-size:14.5px;line-height:1.6;color:rgba(251,250,246,.62);max-width:70ch}
.sg-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:34px;margin-top:22px;align-items:start}
@media(max-width:900px){.sg-layout{grid-template-columns:1fr;gap:20px}}
@media(max-width:520px){.sg{padding:22px 14px}}
.sg-stage svg{display:block;width:100%;max-width:440px;margin:0 auto;overflow:visible}
/* the three rings: bolder since 2026-10-22 (owner's call) */
.sg-ring{fill:none;stroke:rgba(251,250,246,.34);stroke-width:1.6px;stroke-dasharray:4 5;vector-effect:non-scaling-stroke}
.sg-lab{
  fill:rgba(251,250,246,.4);font-family:var(--sans);font-size:9.5px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;text-anchor:middle;
}
.sg-ceiling{fill:none;stroke:var(--river);stroke-width:4px;opacity:0;transition:opacity .5s;vector-effect:non-scaling-stroke}
.sg-system{fill:rgba(49,143,154,.25);stroke:var(--river);stroke-width:2px;opacity:0;transition:opacity .5s;vector-effect:non-scaling-stroke}
.sg.off-5 .sg-ceiling,.sg.off-4 .sg-system{opacity:1}
.sg .sfi-node.elder{fill:var(--sagefire);stroke:var(--paper);stroke-width:1.5px}
.sg .sfi-node.family{fill:var(--forest);stroke:var(--sagefire)}
.sg .sfi-node.friend{fill:var(--teal);stroke:var(--sage);stroke-width:1.5px}
.sg .sfi-node.solo{fill:var(--sagefire);stroke:var(--paper);stroke-width:3px}
.sg .sfi-node.shrunk{fill:var(--forest);stroke:var(--sage)}
.sg .sfi-node.appointed{fill:var(--river);stroke:var(--paper);stroke-dasharray:3 2}
.sg .sfi-node.rushed{fill:var(--teal);stroke:var(--river);stroke-dasharray:3 2}
.sg .sfi-node.sys{fill:none;stroke:none}
.sg .sfi-edge{stroke:rgba(22,166,55,.55);stroke-width:1.2px}
.sg .sfi-edge.thin{stroke:rgba(49,143,154,.6);stroke-dasharray:3 3}
.sg .sfi-edge.sys{stroke:rgba(49,143,154,.55);stroke-dasharray:2 3}
.sg .sfi-edge.wheel{stroke:rgba(22,166,55,.85);stroke-width:1.6px}
.sg-status{margin-top:10px;text-align:center;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--sagefire)}
.sg-switches{display:grid;gap:8px}
.sg-cap{
  margin-top:16px;min-height:120px;padding:18px 20px;border-radius:16px;
  background:rgba(4,56,63,.55);border:1px solid rgba(251,250,246,.12);
}
.sg-cap .q{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.5;color:var(--paper);margin:0}
.sg-cap .o{margin:10px 0 0;font-size:14.5px;line-height:1.6;color:rgba(251,250,246,.72)}
.sg-cap .lab{display:block;font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--sagefire);margin-bottom:6px}