/* ThreadSync — Agent Control Stack diagram (UI campaign item S5)
   External + fingerprinted by necessity: this site's CSP sets style-src 'self'
   with a single hash, so any page-level inline <style> is silently dropped.

   THE METAPHOR — and why the diagram is shaped this way:
   the page's own claim is "One stack. Five layers. Every layer auditable."
   Five equal stacked boxes would say the opposite — that governance is a fifth
   floor sitting on top of the other four. It isn't. Governance is the SPINE
   running through all four, and that is precisely what makes each one provable.
   The diagram leads with that shape so a newcomer sees the argument before
   reading it.

   ACCESSIBILITY CONTRACT — read before changing:
   the SVG is decorative: aria-hidden="true", focusable="false", and it carries
   NO role/aria-label. The five layers already exist on this page as real
   headings and prose; that text is and must remain the accessible source of
   truth. Consult 20260801T091112Z found that wrapping such a container in
   role="img" + aria-label caused assistive tech to SUPPRESS the real text. */

.sov-stack{
  position:relative;
  margin:38px auto 8px;
  max-width:760px;
  padding:0 4px;
}

.sov-stack svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
}

/* Layer plates. Fill and stroke are set on the shapes so the whole diagram
   survives with CSS disabled as a plain — if plainer — figure. */
.sov-stack .plate{ fill:rgba(20,26,36,.92); stroke:rgba(232,234,240,.10) }
.sov-stack .plate-risk{ stroke:rgba(52,211,153,.34) }

.sov-stack .layer-num{
  font-family:var(--sov-mono,ui-monospace,monospace);
  font-size:11px; letter-spacing:.12em; fill:#34D399;
}
.sov-stack .layer-name{
  font-family:var(--sov-sans,system-ui,sans-serif);
  font-size:15px; font-weight:600; fill:#E8EAF0;
}
.sov-stack .layer-sub{
  font-family:var(--sov-sans,system-ui,sans-serif);
  font-size:12px; fill:#9CA3B4;
}

/* The governance spine — one continuous member, not a fifth plate. */
.sov-stack .spine{ stroke:url(#sovSpineGrad); stroke-width:2; fill:none }
.sov-stack .tap{ stroke:rgba(52,211,153,.55); stroke-width:1.25 }
.sov-stack .tap-dot{ fill:#34D399 }

.sov-stack .spine-label{
  font-family:var(--sov-mono,ui-monospace,monospace);
  font-size:10.5px; letter-spacing:.14em; fill:#34D399;
}
.sov-stack .spine-sub{
  font-family:var(--sov-sans,system-ui,sans-serif);
  font-size:11.5px; fill:#7c8695;
}

/* Two variants, one shown at a time. A viewBox cannot be changed by CSS, so a
   single wide viewBox scaled into a phone renders 15px type at about 7px, and
   bumping font-size in a media query only overflows the plates because the
   plate widths are viewBox units too. */
.sov-stack .stack-narrow{display:none}

@media (max-width:640px){
  .sov-stack{margin-top:26px}
  .sov-stack .stack-wide{display:none}
  .sov-stack .stack-narrow{display:block}
  /* narrow viewBox is ~half the width, so type is set larger in user units to
     land at a real-world size close to the desktop reading experience */
  .sov-stack .stack-narrow .layer-name{font-size:17px}
  .sov-stack .stack-narrow .layer-num{font-size:12px}
  .sov-stack .stack-narrow .spine-label{font-size:11px;letter-spacing:.1em}
  .sov-stack .stack-narrow .spine-sub{font-size:12px}
}

/* Decoration never overrides a stated preference. The figure is a summary of
   text that is already on the page, so removing it costs no information. */
@media (prefers-contrast:more){
  .sov-stack .plate{fill:#0A0B0F;stroke:rgba(232,234,240,.34)}
  .sov-stack .tap,.sov-stack .spine{opacity:.5}
}
@media (prefers-reduced-transparency:reduce){
  .sov-stack .plate{fill:#0A0B0F}
}