/* PlainQuantum diagram typography. Approved standard, pilot implementation.
   Applies only to SVG diagrams that opt in with class="dg"; every other diagram is unaffected.
   Fonts: IBM Plex Sans, Mono and Math, SIL Open Font License 1.1 (see /assets/fonts/plex/OFL.txt).
   Files are IBM's official, unmodified releases (@ibm/plex-sans 1.1.0, @ibm/plex-mono 2.5.0,
   @ibm/plex-math 1.1.0), self-hosted; unicode-range values are IBM's own, so a browser downloads
   a file only when a page uses characters in its range. No local() lookups, so rendering never
   depends on what a visitor has installed. The faces are registered under diagram-only family names
   (PQ Diagram Sans/Mono/Math) so they never merge with the site's Google-loaded "IBM Plex Mono", which
   stays in use for article text, eyebrows, tags and unmigrated diagrams. The font files are not renamed
   or modified. */

@font-face { font-family: "PQ Diagram Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/plex/IBMPlexSans-Regular-Latin1.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "PQ Diagram Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/plex/IBMPlexSans-Regular-Greek.woff2") format("woff2");
  unicode-range: U+037E, U+0386-038A, U+038C, U+038E-03A1, U+03A3-03CE; }
@font-face { font-family: "PQ Diagram Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/plex/IBMPlexSans-Regular-Pi.woff2") format("woff2");
  unicode-range: U+0E3F, U+2000-200D, U+2015, U+2028-2029, U+202F, U+2032-2033, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+ECE0, U+EFCC, U+FEFF, U+FFFD; }
@font-face { font-family: "PQ Diagram Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/plex/IBMPlexSans-Medium-Latin1.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "PQ Diagram Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/plex/IBMPlexSans-Medium-Pi.woff2") format("woff2");
  unicode-range: U+0E3F, U+2000-200D, U+2015, U+2028-2029, U+202F, U+2032-2033, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+ECE0, U+EFCC, U+FEFF, U+FFFD; }
@font-face { font-family: "PQ Diagram Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/plex/IBMPlexMono-Regular-Latin1.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02; }
@font-face { font-family: "PQ Diagram Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/plex/IBMPlexMono-Regular-Pi.woff2") format("woff2");
  unicode-range: U+03C0, U+0E3F, U+2000-200D, U+2010-2012, U+2015, U+2028-2029, U+202F, U+2032-2033, U+203E, U+205F, U+2070, U+2074-2079, U+2080-2089, U+2113, U+2116, U+2126, U+212E, U+2150-2151, U+2153-215E, U+2190-2199, U+21A9-21AA, U+21B0-21B3, U+21B6-21B7, U+21BA-21BB, U+21C4, U+21C6, U+2202, U+2206, U+220F, U+2211, U+2215, U+2219-221A, U+221E, U+222B, U+2236, U+2248, U+2260, U+2264-2265, U+2400-2421, U+2500-259F, U+25CA, U+2713, U+274C, U+2B0E-2B11, U+3000, U+FEFF, U+FFFD; }
@font-face { font-family: "PQ Diagram Math"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/plex/IBMPlexMath-Regular.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00B7, U+00D7, U+00F7, U+0391-03C9, U+2016, U+2026, U+2032-2034, U+210F, U+2190-21FF, U+2200-22FF, U+2300-23FF, U+25A0-25FF, U+27C0-27EF, U+2980-29FF, U+2A00-2AFF, U+1D400-1D7FF; }

:root {
  --dg-sans: "PQ Diagram Sans", "PQ Diagram Math", system-ui, sans-serif;
  --dg-mono: "PQ Diagram Mono", "PQ Diagram Math", ui-monospace, monospace;
  --dg-math: "PQ Diagram Math", "STIX Two Math", "Cambria Math", serif;
  --dg-size-title: 14px;
  --dg-size-label: 13px;
  --dg-size-note: 12px;
  --dg-size-mono: 12px;
  --dg-size-math: 15px;
  --dg-accent-text: #7C3AED;   /* 5.7:1 on the light surface */
  --dg-cyan-text: #0E7490;     /* cyan for TEXT in light mode: 4.6:1 on the figure surface, 5.4:1 on white; #22D3EE is 1.6-1.8:1 */
  --dg-cyan-mark: #0891B2;     /* Cyan for meaningful non-text marks in light mode: 3.2:1 on the figure surface, 3.7:1 on white;
                                  dark text on a cyan fill stays 5.0:1. Kept lighter than the text token so it stays distinct from violet. */
  --dg-violet-mark: #7C3AED;   /* violet marks: unchanged in light (4.9:1 on the figure surface) */
  --dg-bar2-mark: #1E1B4B;     /* second-series bars (Mosca Y): unchanged in light */
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --dg-accent-text: #A78BFA; --dg-cyan-text: #22D3EE; --dg-cyan-mark: #22D3EE; --dg-violet-mark: #8A4CF6; --dg-bar2-mark: #6A64D8; } }   /* 6.2:1; --violet is 3.0:1 */
:root[data-theme="dark"] { --dg-accent-text: #A78BFA; --dg-cyan-text: #22D3EE; --dg-cyan-mark: #22D3EE; --dg-violet-mark: #8A4CF6; --dg-bar2-mark: #6A64D8; }

/* Text roles. Labels, notes and identifiers are always 400; titles may use 500. */
.dg text, .dg tspan { font-family: var(--dg-sans); font-weight: 400; letter-spacing: 0; text-transform: none; }
.dg text { font-size: var(--dg-size-note); fill: var(--muted); }
.dg text.t-title { font-size: var(--dg-size-title); font-weight: 500; fill: var(--fg); }
.dg text.t-label, .dg text.cl { font-size: var(--dg-size-label); fill: var(--fg); }
.dg text.t-note { font-size: var(--dg-size-note); fill: var(--muted); }
.dg .t-mono, .dg .t-mono text { font-family: var(--dg-mono); font-size: var(--dg-size-mono); }
.dg .t-math { font-family: var(--dg-math); font-size: var(--dg-size-math); fill: var(--fg); }   /* variables in Unicode math italic */
.dg text.cl.t-math { font-size: var(--dg-size-math); }   /* notation keeps the notation size even when it is also a label */
.dg .t-num { font-variant-numeric: tabular-nums; }
.dg text.t-accent { fill: var(--dg-accent-text); }

/* Sizes assume a 330-unit-wide viewBox. Wider diagrams scale text by width / 330 so they stay legible
   on phones. Circuits use a 460-unit viewBox, which keeps today's sizes. */
.dg.circuit text, .dg.circuit .t-mono { font-size: 15px; }
.dg.circuit .t-note { font-size: 15px; }
.dg.circuit .gate text { fill: var(--fg); font-family: var(--dg-mono); font-size: 15px; }
.dg.circuit text.pole { font-size: 17px; fill: var(--fg); }
.dg.circuit .steps text { fill: var(--dg-accent-text); }

/* Violet text inside migrated diagrams uses the accessible accent (shapes keep --violet). */
.dg.entangle .mark text { fill: var(--dg-accent-text); }

/* Cyan TEXT in any SVG diagram (migrated or not) uses the accessible cyan. Lines, shapes, data marks and
   legend symbols that key a cyan mark keep --cyan. Specificity beats .grow text.cl. */
:root svg text.t-cyan, :root svg tspan.t-cyan { fill: var(--dg-cyan-text); }
/* Approved for the review branch 17 Oct 2026; production approval depends on the complete accessibility audit.
   Inside diagrams only, cyan shapes, lines, data marks and legend keys use the mark token.
   Every cyan graphic in a diagram was inventoried and carries meaning (none decorative). HTML visuals are untouched. */
/* Dark mode (F3): violet marks 2.7:1 -> 3.2:1 on the figure surface, Y bars 2.6:1 -> 3.2:1; white text on violet fills 4.7:1. */
svg[role="img"] { --cyan: var(--dg-cyan-mark); --violet: var(--dg-violet-mark); --bar2: var(--dg-bar2-mark); }

/* A technical identifier inside a title keeps the title's size (e.g. gate letters "X: flip"). */
.dg text.t-title .t-mono { font-size: inherit; }