/* =========================================================
   Figures under a question — the crop from the book and the drawings js/figures.js builds from a
   figure spec. Kept apart from practice.css because the extraction pipeline's review pages load
   the same rules (scripts/extract: qa_report.html, figcheck).

   Tokens it expects: --text, --text-2, --panel, --line, --r-sm (css/styles.css defines them).
   ========================================================= */
/* figures cropped from the book: scale down on narrow screens, never up */
.qfig { margin: 0 0 18px; }
.qfig img { display: block; max-width: 100%; height: auto; border-radius: var(--r-sm); background: #fff; }
.qfig-opt { margin: 8px 0 0; }
/* drawn figures (js/figures.js): lines and text follow the theme's text colour */
.qfig-geometry, .qfig-chart { color: var(--text); }
.qfig .fig-svg { display: block; width: auto; max-width: min(100%, 420px); max-height: 340px; height: auto; overflow: visible; }
.fig-line { stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fig-thin { stroke-width: 1.1; }
.fig-dashed { stroke-dasharray: 6 5; }
.fig-thick { stroke-width: 2.6; }
.fig-axes line { stroke: currentColor; stroke-width: 1.2; }
.fig-grid { stroke: currentColor; stroke-width: 0.6; opacity: .35; }
.fig-bar { stroke: currentColor; stroke-width: 1.2; }
.fig-point, .fig-var { fill: currentColor; font: italic 21px "Times New Roman", Georgia, serif; }
/* a halo in the background colour keeps labels readable where they cross a line or a pattern */
.fig-point, .fig-len { paint-order: stroke; stroke: var(--fig-halo, var(--panel)); stroke-width: 5px; stroke-linejoin: round; }
.fig-len, .fig-tick { fill: currentColor; font: 17px "Times New Roman", Georgia, serif; }
.fig-len-in { font-size: 15px; }
.qfig .fig-illustration { display: block; max-width: 180px; height: auto; margin-top: 8px; border-radius: var(--r-sm); opacity: .9; }
.fig-table-wrap { max-width: 100%; overflow-x: auto; }
.fig-table { border-collapse: collapse; font-size: 15px; color: var(--text); }
.fig-table th { white-space: nowrap; }
.fig-table th, .fig-table td { border: 1px solid var(--line); padding: 6px 10px; text-align: center; }
.fig-table th { font-weight: 500; font-style: italic; color: var(--text-2); }
.fig-digits { display: inline-flex; gap: 0; }
.fig-digits span { border: 1px solid currentColor; min-width: 1.5em; padding: 1px 4px; margin-left: -1px; }