/* Veriformatics explanatory figures. No site-wide selectors or external assets. */
.vg-figure {
  --vg-ink: var(--ink, #142d42);
  --vg-muted: var(--muted, #52616c);
  --vg-blue: var(--blue, #214f77);
  --vg-paper: var(--paper, #f5f7f9);
  --vg-line: var(--line, #cbd5dc);
  --vg-mid: #b4cee4;
  --vg-light: #dce9f4;
  --vg-dark: #315c80;
  box-sizing: border-box;
  container-type: inline-size;
  color: var(--vg-ink);
  font: 1rem/1.55 var(--sans, "Adwaita Sans", "Inter", "Helvetica Neue", Arial, sans-serif);
  margin: 2rem 0;
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--vg-line);
  background: #fff;
  overflow-wrap: anywhere;
}
.vg-figure *, .vg-figure *::before, .vg-figure *::after { box-sizing: border-box; }
.vg-figure :is(p,h2,h3,h4,figure,fieldset) { margin: 0; }
.vg-figure p { max-width: none; }
.vg-figure p + p { margin-top: .55rem; }
.vg-figure figcaption { margin-bottom: 1.75rem; }
.vg-figure .vg-kicker { font: .72rem/1.5 var(--mono, "Adwaita Mono", "DejaVu Sans Mono", monospace); letter-spacing: .055em; text-transform: uppercase; color: var(--vg-muted); margin-bottom: .7rem; }
.vg-figure .vg-title { font: 400 clamp(1.55rem, 3vw, 2rem)/1.18 var(--serif, Georgia, "DejaVu Serif", serif); letter-spacing: -.035em; margin-bottom: .65rem; }
.vg-figure .vg-lead { color: var(--vg-muted); font-size: .94rem; max-width: 47rem; }
.vg-figure .vg-small { font-size: .8rem; color: var(--vg-muted); }
.vg-figure .vg-mono { font-family: var(--mono, "Adwaita Mono", "DejaVu Sans Mono", monospace); }
.vg-figure .vg-tag { display: inline-block; padding: .15rem .5rem; border: 1px solid var(--vg-blue); font: .7rem/1.5 var(--mono, monospace); color: var(--vg-blue); }
.vg-figure .vg-foot { border-top: 1px solid var(--vg-line); margin-top: 1.5rem; padding-top: 1rem; font-size: .83rem; color: var(--vg-muted); }
.vg-figure .vg-note { margin-top: 1rem; padding: .85rem 1rem; background: var(--vg-paper); border-left: 2px solid var(--vg-blue); font-size: .84rem; }
.vg-figure a { color: var(--vg-blue); text-underline-offset: .2em; }
.vg-figure :is(summary,input,a):focus-visible { outline: 3px solid #317bad; outline-offset: 4px; }
.vg-figure details { margin-top: 1rem; border-top: 1px solid var(--vg-line); }
.vg-figure summary { padding: .85rem .2rem; cursor: pointer; font-size: .86rem; color: var(--vg-blue); min-height: 44px; }
.vg-figure details[open] summary { border-bottom: 1px solid var(--vg-line); margin-bottom: .9rem; }
.vg-figure details > :last-child { margin-bottom: .8rem; }
.vg-figure .vg-key { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; font-size: .76rem; color: var(--vg-muted); margin-top: 1rem; }
.vg-figure .vg-key span { display: inline-flex; align-items: center; gap: .4rem; }
.vg-figure .vg-key i { display: inline-block; width: .8rem; height: .8rem; border: 1px solid var(--vg-blue); background: var(--vg-light); }
.vg-figure .vg-key i.vg-open-mark { background: #fff; border-style: dashed; }
.vg-figure .vg-key i.vg-check-mark { background: var(--vg-blue); }
.vg-figure .vg-flow { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1.2rem; list-style: none; padding: 0; margin: 0; }
.vg-figure .vg-stage { position: relative; min-width: 0; border-top: 2px solid var(--vg-blue); padding-top: .85rem; }
.vg-figure .vg-stage:not(:last-child)::after { content: "→"; position: absolute; right: -1rem; top: 4.3rem; color: var(--vg-blue); }
.vg-figure .vg-stage :is(h3,h4) { font-size: .93rem; font-weight: 600; margin: .6rem 0 .35rem; }
.vg-figure .vg-stage > p { font-size: .82rem; }
.vg-figure .vg-number { font: .72rem/1.3 var(--mono, monospace); color: var(--vg-muted); }
.vg-figure .vg-stage-art { display: block; width: 100%; height: 90px; margin: .7rem 0; color: var(--vg-blue); }
.vg-figure .vg-stage-art .vg-fill { fill: var(--vg-light); }
.vg-figure .vg-stage-art .vg-stroke { fill: none; stroke: currentColor; stroke-width: 1.7; }
.vg-figure .vg-stage-check { margin-top: .9rem; padding: .65rem .7rem; background: var(--vg-paper); font-size: .76rem; border-left: 2px solid var(--vg-blue); }
.vg-figure .vg-stage-check b { display: block; font-weight: 600; margin-bottom: .2rem; }
.vg-figure .vg-assumptions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; margin-top: 1.4rem; padding: 1rem; border: 1px dashed var(--vg-blue); }
.vg-figure .vg-assumptions p { font-size: .79rem; }
.vg-figure .vg-assumptions p + p { margin-top: 0; }
.vg-figure .vg-assumptions b { display: block; margin-bottom: .2rem; }
.vg-figure .vg-matrix-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 1.8rem; align-items: start; }
.vg-figure .vg-matrix { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; font-size: .82rem; }
.vg-figure .vg-matrix caption { text-align: left; margin: 0 0 .8rem; font-size: .78rem; color: var(--vg-muted); }
.vg-figure .vg-matrix th { font-weight: 400; padding: .25rem 0; }
.vg-figure .vg-matrix th:first-child { width: 23%; text-align: left; }
.vg-figure .vg-matrix thead th { font-size: .73rem; }
.vg-figure .vg-matrix td { height: 2.9rem; text-align: center; border: 1px solid transparent; font-family: var(--mono, monospace); }
.vg-figure .vg-v0 { background: #fff; color: #52616c; border-color: var(--vg-line) !important; }
.vg-figure .vg-v1 { background: var(--vg-light); color: #254563; }
.vg-figure .vg-v2 { background: var(--vg-mid); color: #173955; }
.vg-figure .vg-v3 { background: var(--vg-dark); color: #fff; }
.vg-figure .vg-matrix tbody tr { outline: 0 solid transparent; }
.vg-figure .vg-choice { padding: 0; border: 0; min-width: 0; }
.vg-figure .vg-choice legend { padding: 0; font-size: .82rem; margin-bottom: .6rem; }
.vg-figure .vg-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.vg-figure .vg-choices label { min-height: 44px; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .7rem; border: 1px solid var(--vg-line); cursor: pointer; font-size: .82rem; }
.vg-figure .vg-choices label:has(input:checked) { background: var(--vg-paper); border-color: var(--vg-blue); }
.vg-figure input { accent-color: var(--vg-blue); width: 1rem; height: 1rem; margin: 0; }
.vg-figure .vg-gene-result { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--vg-line); }
.vg-figure .vg-gene-result h4 { font-size: .95rem; margin-bottom: .6rem; }
.vg-figure .vg-gene-result p { font-size: .8rem; }
.vg-figure .vg-bars { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .6rem; margin: 1.1rem 0 .8rem; }
.vg-figure .vg-bar { display: flex; flex-direction: column; align-items: stretch; gap: .3rem; font-size: .72rem; text-align: center; }
.vg-figure .vg-bar-track { height: 7rem; display: flex; align-items: flex-end; border-bottom: 1px solid var(--vg-blue); background: var(--vg-paper); }
.vg-figure .vg-bar-track i { display: block; width: 100%; height: var(--vg-height); background: var(--vg-dark); }
.vg-figure .vg-gene-result .vg-equation { font: 1.1rem/1.5 var(--mono, monospace); margin-top: 1rem; }
/* Without :has(), every result remains available as a useful static fallback. */
@supports selector(:has(*)) {
  .vg-matrix-figure:has(input[value="a"]:checked) .vg-gene-result:not([data-gene="a"]),
  .vg-matrix-figure:has(input[value="b"]:checked) .vg-gene-result:not([data-gene="b"]),
  .vg-matrix-figure:has(input[value="c"]:checked) .vg-gene-result:not([data-gene="c"]) { display: none; }
  .vg-matrix-figure:has(input[value="a"]:checked) tr[data-gene="a"],
  .vg-matrix-figure:has(input[value="b"]:checked) tr[data-gene="b"],
  .vg-matrix-figure:has(input[value="c"]:checked) tr[data-gene="c"] { outline: 2px solid var(--vg-blue); outline-offset: 1px; }
}
.vg-figure .vg-contract { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); border: 1px solid var(--vg-blue); }
.vg-figure .vg-contract-text { padding: 1.2rem; background: var(--vg-paper); border-right: 1px solid var(--vg-blue); }
.vg-figure .vg-contract-text blockquote { font: 1.22rem/1.45 var(--serif, Georgia, serif); margin: .8rem 0 0; }
.vg-figure .vg-invariants { margin: 0; padding: 1.1rem 1.1rem 1.1rem 2.3rem; font-size: .82rem; }
.vg-figure .vg-invariants li + li { margin-top: .6rem; }
.vg-figure .vg-boundary { display: grid; grid-template-columns: minmax(0,1fr) 3rem minmax(0,1fr); align-items: stretch; margin-top: 1.5rem; }
.vg-figure .vg-model, .vg-figure .vg-execution { padding: 1.1rem; border: 1px solid var(--vg-blue); }
.vg-figure .vg-execution { border-style: dashed; }
.vg-figure .vg-boundary h4 { font-size: .95rem; margin: .4rem 0 .7rem; }
.vg-figure .vg-boundary p { font-size: .82rem; }
.vg-figure .vg-gap { display: flex; align-items: center; justify-content: center; font: 1.65rem/1 var(--serif, Georgia, serif); color: var(--vg-blue); }
.vg-figure .vg-gap svg { width: 2rem; height: 2rem; }
.vg-figure .vg-proof-art { display: block; width: 100%; height: 90px; margin: .7rem 0 1rem; }
.vg-figure .vg-bridge { border-block: 1px solid var(--vg-line); margin-top: 1rem; padding-block: .9rem; font-size: .82rem; }
.vg-figure .vg-family { border: 1px solid var(--vg-blue); padding: 1rem; background: var(--vg-paper); }
.vg-figure .vg-family-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; align-items: baseline; font-size: .85rem; }
.vg-figure .vg-members { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: .45rem; margin-top: 1rem; }
.vg-figure .vg-member { background: #fff; border: 1px solid var(--vg-blue); text-align: center; padding: .6rem .2rem; font: .77rem/1.5 var(--mono, monospace); }
.vg-figure .vg-member b { display: block; font-weight: 400; color: var(--vg-muted); font-size: .7rem; }
.vg-figure .vg-member.vg-member-focus { background: var(--vg-blue); color: #fff; }
.vg-figure .vg-member.vg-member-focus b { color: #fff; }
.vg-figure .vg-branch { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 1.5rem; margin-top: 1.2rem; }
.vg-figure .vg-branch-box { position: relative; padding-top: .8rem; }
.vg-figure .vg-branch-box::before { content: "↓"; display: block; color: var(--vg-blue); font-size: 1.3rem; margin-bottom: .5rem; }
.vg-figure .vg-branch-box h4 { font-size: .93rem; margin-bottom: .5rem; }
.vg-figure .vg-branch-box p { font-size: .82rem; }
.vg-figure .vg-report-groups { display: flex; flex-wrap: wrap; gap: .6rem; margin: .9rem 0; }
.vg-figure .vg-report-groups span { padding: .4rem .6rem; background: var(--vg-paper); border: 1px solid var(--vg-line); font: .73rem/1.5 var(--mono, monospace); }
.vg-figure .vg-calculation { border-top: 1px solid var(--vg-line); padding-top: .8rem; font: 1.05rem/1.6 var(--mono, monospace); }
.vg-figure .vg-outcome { display: block; font: .82rem/1.5 var(--sans, Arial, sans-serif); color: var(--vg-muted); margin-top: .3rem; }
.vg-figure .vg-scale { margin-top: 1.8rem; }
.vg-figure .vg-scale-labels { display: flex; justify-content: space-between; font: .7rem/1.5 var(--mono, monospace); color: var(--vg-muted); }
.vg-figure .vg-scale-row { display: grid; grid-template-columns: 7rem minmax(0,1fr) 3.4rem; gap: .8rem; align-items: center; margin: .7rem 0; font-size: .78rem; }
.vg-figure .vg-scale-track { height: 1.6rem; background: var(--vg-paper); position: relative; }
.vg-figure .vg-scale-track::after { content: ""; position: absolute; inset: -.35rem auto -.35rem 50%; border-left: 2px dashed var(--vg-blue); }
.vg-figure .vg-scale-track i { display: block; width: var(--vg-width); height: 100%; background: var(--vg-dark); }
.vg-figure .vg-scale-row:last-of-type i { background: var(--vg-mid); border: 1px solid var(--vg-blue); }
.vg-figure .vg-values { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .77rem; }
.vg-figure .vg-values th, .vg-figure .vg-values td { text-align: left; padding: .5rem .3rem; border-bottom: 1px solid var(--vg-line); }
.vg-figure .vg-values th { font-weight: 600; }
@container (max-width: 760px) {
  .vg-figure .vg-flow { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.6rem; }
  .vg-figure .vg-stage:nth-child(2)::after { content: none; }
  .vg-figure .vg-assumptions { grid-template-columns: 1fr; gap: .8rem; }
}
@container (max-width: 560px) {
  .vg-figure .vg-matrix-layout, .vg-figure .vg-contract, .vg-figure .vg-branch { grid-template-columns: minmax(0,1fr); }
  .vg-figure .vg-contract-text { border-right: 0; border-bottom: 1px solid var(--vg-blue); }
  .vg-figure .vg-boundary { grid-template-columns: minmax(0,1fr); }
  .vg-figure .vg-gap { min-height: 2.8rem; }
  .vg-figure .vg-gap svg { transform: rotate(90deg); }
  .vg-figure .vg-members { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .vg-figure .vg-scale-row { grid-template-columns: 5.2rem minmax(0,1fr) 3rem; gap: .45rem; }
}
@container (max-width: 360px) {
  .vg-figure .vg-flow { grid-template-columns: minmax(0,1fr); }
  .vg-figure .vg-stage:not(:last-child)::after { content: none; }
}
@media (prefers-reduced-motion: reduce) {
  .vg-figure *, .vg-figure *::before, .vg-figure *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .vg-figure :is(.vg-bar-track i,.vg-scale-track i) { background: CanvasText; }
  .vg-figure .vg-member-focus { border-width: 3px; }
}
@media print {
  .vg-figure { break-inside: avoid; padding: 1rem; }
  .vg-figure .vg-gene-result { display: block !important; }
}

/* Static dimensions remain in this stylesheet under the strict CSP. */
.vg-figure .vg-height-0 { --vg-height: 0%; }
.vg-figure .vg-height-25 { --vg-height: 25%; }
.vg-figure .vg-height-87-5 { --vg-height: 87.5%; }
.vg-figure .vg-height-12-5 { --vg-height: 12.5%; }
.vg-figure .vg-height-50 { --vg-height: 50%; }
.vg-figure .vg-height-37-5 { --vg-height: 37.5%; }
.vg-figure .vg-height-62-5 { --vg-height: 62.5%; }
.vg-figure .vg-width-72 { --vg-width: 72%; }
.vg-figure .vg-width-36 { --vg-width: 36%; }

/* Keep the quantitative scale visible when enlarged text consumes the side columns. */
@container (max-width: 360px) {
  .vg-figure .vg-scale-row { grid-template-columns: minmax(0,1fr) auto; }
  .vg-figure .vg-scale-row:first-child { display: block; }
  .vg-figure .vg-scale-row:first-child > span { display: none; }
  .vg-figure .vg-scale-track { grid-column: 1 / -1; grid-row: 2; }
  .vg-figure .vg-scale-row > .vg-mono { grid-column: 2; grid-row: 1; }
}