/* ============================================================
   diagram-freeze.css  —  FROZEN. Keep this file LAST in extra_css.

   The <figure class="agora-figure"> diagrams on
   agora-system/training-architecture (3) and research-foundations (1)
   are frozen: content AND size must stay pixel-identical. Everything
   they inherit from the page (fonts, size, line-height, colour, tokens,
   smoothing, SVG paint) and every global element rule that reaches
   inside them (code, strong, span, br, figcaption, svg, figure,
   box-sizing) is re-declared here with the values captured from the
   unmodified site (docs@91b8c47), so page redesign cannot leak in.

   Widths are today's values RELATIVE TO THE ARTICLE COLUMN, which the
   redesign keeps at 644 / 640 / 335px (1440 / 820 / 390). The column
   width is therefore a hard contract (site.css section 3). There is no
   body container query here on purpose: body{container-type} changes
   1-level edge anti-aliasing on figure frames and suppresses body
   background propagation.

   `:not(#_fz)` adds ID-level specificity, so these pins beat any
   class-based rule without !important. Do not edit values here unless a
   diagram is intentionally being changed (and re-baselined).
   ============================================================ */

/* 1. Figure root: tokens + everything inherited from the page. */
figure.agora-figure:not(#_fz) {
  /* Design tokens read by diagram rules (literal values). */
  --p-font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --p-font-code: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --p-ink: #111;
  --p-body: #2a2a2a;
  --p-text: #0d0f12;
  --p-text-strong: #000;
  --p-muted: #636363;
  --p-muted-soft: #6b7079;
  --p-faint: #929292;
  --p-rule: #e2e2e2;
  --p-bg: #fff;
  --p-bg-soft: #fafafa;
  --p-bg-figure: #f9f9f9;
  --p-code-link: #2a2a2a;
  --c-bg: #fff;
  --c-bg-figure: #fafafa;
  --c-bg-code: #fafafa;
  --c-bg-soft: initial;          /* deliberately UNDEFINED today: .zone-footer bg resolves to transparent */
  --c-border: #e2e2e2;
  --c-border-soft: #e2e2e2;
  --c-text-strong: #111;
  --c-list: #2a2a2a;
  --c-muted: #636363;
  --c-muted-soft: #929292;
  --c-link: #0969da;
  --c-link-bg: #f0f7ff;
  --c-warn: #bf8700;
  --c-ok: #1a7f37;
  --c-discovery: #1a7f37;
  --radius: 4px;
  --radius-soft: 4px;
  --radius-card: 8px;
  --font-code: initial;          /* undefined today */
  --md-code-font-family: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, SFMono-Regular, Consolas, Menlo, monospace;
  --md-code-fg-color: #36464e;
  --md-code-bg-color: #f5f5f5;
  --p-swarm-zoom: 1;

  /* Inherited text properties (computed values on the figure today). */
  font-family: Times, "Times New Roman", serif;
  font-size: 15.5px;
  line-height: 1.52;             /* unitless: descendants inherit the factor */
  font-weight: 400;
  font-style: normal;
  font-stretch: 100%;
  font-variant: normal;
  font-kerning: auto;
  font-optical-sizing: auto;
  font-feature-settings: "kern", "liga";
  font-variation-settings: normal;
  font-synthesis: weight style small-caps;
  font-size-adjust: none;
  font-palette: normal;
  letter-spacing: normal;
  word-spacing: 0;
  text-transform: none;
  text-indent: 0;
  text-align: center;
  text-align-last: auto;
  text-shadow: none;
  text-wrap: wrap;
  white-space-collapse: collapse;
  word-break: normal;
  overflow-wrap: break-word;
  line-break: auto;
  hyphens: manual;
  tab-size: 8;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: auto;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  color: #2a2a2a;
  -webkit-text-fill-color: currentcolor;
  -webkit-text-stroke: 0;
  color-scheme: light;
  direction: ltr;
  writing-mode: horizontal-tb;
  visibility: visible;
  /* SVG paint properties inherited into the inline <svg> diagrams. */
  fill: #000;
  fill-opacity: 1;
  stroke: none;
  stroke-width: 1px;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-dasharray: none;
  paint-order: normal;
  shape-rendering: auto;

  /* Box of the figure frame. */
  box-sizing: border-box;
  display: flow-root;
  position: static;
  float: none;
  clear: none;
  min-width: 0;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 32px 0;
  padding: 18px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  background: #fafafa;
  box-shadow: none;
  outline: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  transform: none;
  filter: none;
  opacity: 1;
  zoom: 1;
  counter-increment: agora-fig;
}
figure.agora-figure:not(#_fz):has(> .swarm-fig) {
  overflow-x: hidden;
  overflow-y: visible;
}

/* 2. Size and placement: today's values, relative to the unchanged column.
   (No body container query here: `body { container-type }` was measured to
   change 1-level edge anti-aliasing on three figure frames.) */
figure.agora-figure:not(#_fz) {
  width: 100%;
  max-width: 100%;
}
@media (min-width: 1220px) {
  figure.agora-figure:not(#_fz):has(> .swarm-fig) {
    width: min(1280px, calc(100vw - ((100vw - 1080px) / 2 + 237px) - 32px));
    max-width: none;                      /* left edge = column left; extends right under the TOC rail */
  }
}
@media (max-width: 760px) {
  figure.agora-figure:not(#_fz):has(> .swarm-fig) {
    width: calc(100% + 40px);             /* full-bleed on phones */
    max-width: none;
    margin-left: -20px;
    margin-right: -20px;
  }
}
@media screen and (max-width: 700px) {
  figure.agora-figure:not(#_fz) {
    width: calc(100% + 40px);             /* capped by max-width: 100% -> 335px flush-left (today's quirk) */
    margin-left: -20px;
    margin-right: -20px;
    padding: 18px 20px;
    border-left: 0;
    border-right: 0;
    border-radius: 0;
  }
}

/* Swarm diagram zoom ladder (same breakpoints as before). */
@media (max-width: 760px)                         { figure.agora-figure:not(#_fz):has(> .swarm-fig) { --p-swarm-zoom: 0.47; } }
@media (min-width: 761px) and (max-width: 900px)  { figure.agora-figure:not(#_fz):has(> .swarm-fig) { --p-swarm-zoom: 0.58; } }
@media (min-width: 901px) and (max-width: 1399px) { figure.agora-figure:not(#_fz):has(> .swarm-fig) { --p-swarm-zoom: 0.68; } }
@media (min-width: 1400px) and (max-width: 1599px){ figure.agora-figure:not(#_fz):has(> .swarm-fig) { --p-swarm-zoom: 0.78; } }
@media (min-width: 1600px) and (max-width: 1799px){ figure.agora-figure:not(#_fz):has(> .swarm-fig) { --p-swarm-zoom: 0.86; } }
@media (min-width: 1800px) and (max-width: 1919px){ figure.agora-figure:not(#_fz):has(> .swarm-fig) { --p-swarm-zoom: 0.94; } }

/* 3. Global element rules that reach inside the diagrams. */
figure.agora-figure:not(#_fz) *,
figure.agora-figure:not(#_fz) *::before,
figure.agora-figure:not(#_fz) *::after {
  box-sizing: border-box;
}

figure.agora-figure:not(#_fz) code {
  display: inline;
  margin: 0;
  padding: 1px 4px;
  border: 0;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.035);
  box-shadow: none;
  color: #2a2a2a;
  font-family: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.82em;
  font-weight: inherit;
  font-style: inherit;
  line-height: 1.5;
  letter-spacing: normal;
  word-spacing: 0;
  text-transform: none;
  text-decoration: none;
  font-feature-settings: "kern";
  font-variant-ligatures: none;
  direction: ltr;
  word-break: break-word;
  white-space: inherit;
  vertical-align: baseline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Inline phrasing elements: inherit everything from their diagram
   parent; the specific diagram rules below re-apply weight/colour. */
figure.agora-figure:not(#_fz) :is(span, strong, br) {
  font: inherit;
  letter-spacing: inherit;
  word-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: none;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  text-decoration: none;
}
figure.agora-figure:not(#_fz) strong {
  color: #111;
  font-weight: 600;
}
figure.agora-figure:not(#_fz) .swarm-fig .badge-text strong { color: #2a2a2a; }

figure.agora-figure:not(#_fz) .t-discovery { color: #1a7f37; font-weight: 500; }

figure.agora-figure:not(#_fz) > figcaption {
  display: block;
  box-sizing: border-box;
  width: auto;
  max-width: 680px;
  margin: 12px auto 0;
  padding: 0;
  border: 0;
  background: none;
  color: #929292;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.55;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
}
figure.agora-figure:not(#_fz) > figcaption::before {
  content: "Figure " counter(agora-fig) ". ";
  color: #111;
  font-weight: 600;
  font-style: normal;
}
figure.agora-figure:not(#_fz) > figcaption .fig-forward   { color: #0969da; font-weight: 600; font-style: normal; }
figure.agora-figure:not(#_fz) > figcaption .fig-backward  { color: #bf8700; font-weight: 600; font-style: normal; }
figure.agora-figure:not(#_fz) > figcaption .fig-discovery { color: #1a7f37; font-weight: 600; font-style: normal; }

figure.agora-figure:not(#_fz) :is(.trainer-fig, .ssn-fig) > svg {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  overflow: hidden;
  vertical-align: baseline;
}