/* =========================================================
   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); }
/* Headers wrap at spaces. A language book's column header is often a whole
   instruction ("Fərqli (həqiqidirsə məcazi…) mənada işlədin"); kept on one line
   it pushed the table past the panel and hid the last column. A short label
   ("x", "f(x)") still sits on one line: auto layout only wraps a header when
   the table would not fit otherwise. */
.fig-table th { white-space: normal; overflow-wrap: break-word; text-wrap: balance; }
/* a phone fits three columns of long words only with less padding and type */
@media (max-width: 560px) {
  .fig-table { font-size: 13.5px; }
  .fig-table th, .fig-table td { padding: 5px 6px; }
  .fig-table .fig-slot-input { min-width: 4.5em; padding: 6px 7px; }
}
.fig-table { width: 100%; table-layout: auto; }
.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; }

/* =========================================================
   Answer slots and diagrams — the written half of a language paper

   A "fill" question IS its figure: the table, cluster or Venn is drawn as the
   book prints it, and the cells left blank become boxes the student writes in.
   Printed cells stay plain text, so the page still reads like the page.
   ========================================================= */
.fig-slot { padding: 0 !important; vertical-align: top; }
.fig-table td.fig-slot { background: var(--slot-bg, rgba(127, 127, 127, .06)); }
.fig-slot-input {
  display: block; width: 100%; min-width: 7em; box-sizing: border-box;
  font: inherit; font-size: 15px; line-height: 1.5; color: var(--text);
  background: transparent; border: 0; border-radius: 0;
  padding: 7px 9px; margin: 0; resize: none; overflow: hidden; text-align: left;
}
.fig-slot-input:focus { outline: 2px solid var(--brand); outline-offset: -2px; }
.fig-slot-input.locked { color: var(--text-3); }
.fig-slot-input::placeholder { color: var(--text-3); }
/* what the book had, shown under the student's words in a review */
.fig-slot-key {
  padding: 5px 9px 7px; font-size: 14px; line-height: 1.45; color: var(--text-2);
  border-top: 1px dashed var(--line);
}
.fig-slot-key::before { content: 'kitabda: '; color: var(--text-3); }

/* ---- cluster: a hub on the left, its branches boxed on the right ---- */
.fig-dg { color: var(--text); }
.fig-dg-cluster { display: flex; align-items: stretch; gap: 14px; }
.fig-dg-hub {
  flex: none; display: flex; align-items: center; justify-content: center;
  max-width: 8em; padding: 12px 14px; text-align: center; font-size: 15px;
  border: 1px solid var(--line); border-radius: 999px;
}
.fig-dg-branches { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.fig-dg-branch {
  position: relative; border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 15px; line-height: 1.5;
}
.fig-dg-branch .fig-dg-text { padding: 9px 11px; }
/* the connector from the hub to each branch */
.fig-dg-branch::before {
  content: ''; position: absolute; top: 50%; left: -14px; width: 14px;
  border-top: 1px solid var(--line);
}
.fig-dg-branch.fig-slot { background: var(--slot-bg, rgba(127, 127, 127, .06)); }

/* ---- Venn: two sets as three labelled regions, which is what a phone can read ---- */
.fig-dg-venn .fig-venn-labels { display: flex; gap: 10px; margin-bottom: 8px; font-size: 14px; color: var(--text-2); }
.fig-dg-venn .fig-venn-labels span { flex: 1 1 0; font-style: italic; }
.fig-venn-rows { display: flex; flex-direction: column; gap: 8px; }
.fig-venn-row { display: flex; align-items: stretch; gap: 10px; }
.fig-venn-key {
  flex: none; width: 9em; padding: 9px 0; font-size: 13.5px; color: var(--text-3);
}
.fig-venn-cell {
  flex: 1 1 auto; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 15px; line-height: 1.5;
}
.fig-venn-cell .fig-dg-text { padding: 9px 11px; }
.fig-venn-cell.fig-slot { background: var(--slot-bg, rgba(127, 127, 127, .06)); }
.fig-venn-both .fig-venn-cell { border-style: solid; box-shadow: inset 3px 0 0 var(--line); }

@media (max-width: 560px) {
  .fig-dg-cluster { flex-direction: column; gap: 10px; }
  .fig-dg-hub { max-width: none; border-radius: var(--r-sm); }
  .fig-dg-branch::before { display: none; }
  .fig-venn-row { flex-direction: column; gap: 4px; }
  .fig-venn-key { width: auto; padding: 0; }
}