/* Concept figures on /tools/ pages (content wave, November 2026). This file is a verbatim copy of two blocks of
   web/public/biases/_assets/biases.css: the .bx-figure-svg base rules and the "Bespoke figure vocabulary" (fx-) block.
   biases.css is the source of truth; scripts/check_figure_css_sync.py fails the build if the two drift. Tokens only. */

.bx-figure-svg { display: block; width: 100%; max-width: 700px; height: auto; margin: auto; }
/* Two canvases per figure, one shown at a time: the 620 drawing for the article column, the 342
   drawing for phones, so labels keep their real size instead of scaling to 8px (PSY-2571 review F1). */
.bx-figure-svg.is-narrow { display: none; }
@media (max-width: 640px) {
  .bx-figure-svg.is-wide { display: none; }
  .bx-figure-svg.is-narrow { display: block; max-width: 420px; }
}
.bx-figure-svg text { font-family: var(--sans); font-size: 15px; fill: var(--ink); }
.bx-figure-svg .small { font-size: 14px; }
.bx-figure-svg .strong { font-weight: 600; }
.bx-figure-svg .panel { fill: var(--surface); stroke: var(--line-2); }
.bx-figure-svg .excluded { fill: none; stroke: var(--ink-soft); stroke-dasharray: 5 4; }
.bx-figure-svg .rule, .bx-figure-svg .arrow { stroke: var(--ink-soft); }
.bx-figure-svg .arrow { stroke-width: 2; }
.bx-figure-svg .gap { stroke: var(--brand); stroke-width: 3; }
.bx-figure-svg .actual { fill: var(--ink); }
.bx-figure-svg .estimate, .bx-figure-svg .bar { fill: var(--brand); }
.bx-figure-svg .track { fill: var(--line); }
/* Record-to-representation tokens (PSY-2571). Shape carries the status so the transformation reads
   without colour alone: filled square survived, diamond survived but was reshaped, dashed outline
   was dropped, outline with a cross was never in the world. */
.bx-figure-svg .tok { fill: var(--line-2); }
.bx-figure-svg .tok-keep { fill: var(--brand); }
.bx-figure-svg .tok-drop { fill: none; stroke: var(--ink-soft); stroke-dasharray: 3 3; }
.bx-figure-svg .tok-add { fill: none; stroke: var(--brand); stroke-width: 2; }
.bx-figure-svg .tok-plus { stroke: var(--brand); stroke-width: 2; }
/* Controlled-contrast branches (PSY-2571): one band for what was held the same, one marked branch
   per version. Shape identifies the version so the key reads without relying on colour. */
.bx-figure-svg .cond { fill: none; stroke: var(--brand); }
.bx-figure-svg .cond-mark { fill: var(--brand); }
.bx-figure-svg .figure-big { font-size: 34px; font-weight: 600; fill: var(--brand); }
.figure.bx-concept-figure figcaption { font-size: 16px; line-height: 1.55; color: inherit; }
.bx-figure-data { margin-top: 16px; font-size: 16px; overflow-wrap: anywhere; }
.bx-figure-data summary { cursor: pointer; }
.bx-figure-data table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.bx-figure-data th, .bx-figure-data td { padding: 8px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
@media (max-width: 360px) {
  .bx-figure-svg { display: none; }
  .bx-figure-data:not([open]) > :not(summary) { display: block; }
  .bx-figure-data:not([open]) > table { display: table; }
}

/* Bespoke figure vocabulary (PSY-2571) */
.bx-figure-svg .fx-title { font-size: 19px; font-weight: 600; }
.bx-figure-svg .fx-muted { fill: var(--ink-soft); }
.bx-figure-svg .fx-center { text-anchor: middle; }
.bx-figure-svg .fx-end { text-anchor: end; }
.bx-figure-svg .fx-line { fill: none; stroke: var(--ink-soft); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.bx-figure-svg .fx-guide { fill: none; stroke: var(--line-2); stroke-width: 1.5; }
.bx-figure-svg .fx-route { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bx-figure-svg .fx-bias { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.bx-figure-svg .fx-ring { fill: none; stroke: var(--brand); stroke-width: 2; }
.bx-figure-svg .fx-moment { fill: none; stroke: var(--ink-soft); stroke-width: 1.5; stroke-dasharray: 4 5; }
.bx-figure-svg .fx-drop { fill: var(--bg); stroke: var(--ink-soft); stroke-width: 1.5; stroke-dasharray: 4 4; }
.bx-figure-svg .fx-object { fill: var(--bg); stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.bx-figure-svg .fx-quiet { fill: var(--line-2); }
.bx-figure-svg .fx-ink { fill: var(--ink); }
.bx-figure-svg .fx-accent { fill: var(--brand); }
.bx-figure-svg .fx-paper { fill: var(--bg); }
.bx-figure-svg .fx-hypothesis { fill: none; stroke: var(--brand); stroke-width: 3; stroke-dasharray: 6 6; stroke-linecap: round; stroke-linejoin: round; }