/* ===========================================================================
   practice-bank.css — figures inside Practice questions (practice-bank.js)
   ---------------------------------------------------------------------------
   Spectra, plots, bar charts, lab-data tables, particle boxes, orbital
   diagrams and lattice slices, all in the house tokens. The question cards
   themselves are styled by house.css (.ced-question.h-q).
   =========================================================================== */
html body .ced-question .pq-fig { margin: 14px 0 18px; padding: 12px 14px; border: 1px solid var(--h-line); border-radius: 14px; background: rgba(0,0,0,.22); overflow-x: auto; }
.pq-svg { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
.pq-axis { stroke: rgba(237,230,216,.35); stroke-width: 1; }
.pq-t { fill: var(--h-muted); font: 500 10px var(--h-sans); }
.pq-t.is-b { fill: var(--h-text); font-weight: 700; }
.pq-l { fill: var(--h-muted); font: 500 10px var(--h-sans); }
.pq-v { fill: var(--h-gold-1); font: 700 10.5px var(--h-sans); }
.pq-v.is-1 { fill: #7FB2F0; }
.pq-peak { stroke: var(--h-gold-2); stroke-width: 6; stroke-linecap: round; }
.pq-line { fill: none; stroke: var(--h-gold-2); stroke-width: 2.2; }
.pq-line.is-1 { stroke: #7FB2F0; }
.pq-dot { fill: var(--h-gold-1); }
.pq-dot.is-1 { fill: #7FB2F0; }
.pq-bar { fill: var(--h-gold-2); opacity: .85; }
.pq-box { fill: rgba(255,255,255,.03); stroke: rgba(237,230,216,.4); stroke-width: 1.2; rx: 8; }
.pq-orb { fill: rgba(255,255,255,.03); stroke: rgba(237,230,216,.5); stroke-width: 1.4; rx: 4; }
.pq-arrow { fill: none; stroke: var(--h-gold-1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pq-ion { fill: #0B0A09; font: 700 8.5px var(--h-sans); }
html body .ced-question .pq-table { width: auto; min-width: 60%; margin: 0 auto; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .92rem; }
html body .ced-question .pq-table caption { caption-side: top; padding: 0 0 8px; font: 600 .82rem/1.3 var(--h-sans); letter-spacing: .02em; color: var(--h-muted); text-align: left; }
/* captions keep their own case: uppercasing turned kJ into KJ, g/mol into G/MOL and NO(g) into NO(G) */
html body .ced-question .pq-table th, html body .ced-question .pq-table td { padding: 7px 14px; border-bottom: 1px solid var(--h-line); text-align: left; background: none; }
html body .ced-question .pq-table thead th { font: 600 .78rem/1.3 var(--h-sans) !important; color: var(--h-muted); text-transform: none; letter-spacing: 0; }
html body .ced-question .pq-table tbody th { font: 500 .92rem/1.3 var(--h-sans) !important; color: var(--h-text); }
html body .ced-question .pq-table td { color: var(--h-text); text-align: right; }
html body .ced-question .pq-table tr:last-child th, html body .ced-question .pq-table tr:last-child td { border-bottom: 0; }
html body .ced-question .ced-quiz-choice { text-align: left; }
.h-qs-actions .h-qs-retry { margin-left: 10px; }
/* Unit 2: several small diagrams side by side inside one figure, each with a roman-numeral label */
.pq-multi { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.pq-multi > figure { margin: 0; border: 1px solid var(--h-line, rgba(255,255,255,.12)); border-radius: 10px; padding: 6px; background: rgba(255,255,255,.02); }
.pq-multi .lw-svg, .pq-multi .b27-shape { width: 100%; height: auto; max-width: none; }
.pq-multi figcaption { text-align: center; font: 700 .8rem/1.3 var(--h-sans, Inter, sans-serif); color: var(--h-gold-1, #F2BF5E); margin-top: 4px; }
/* Unit 3: the scenario paragraph that some sets share in place of a figure */
html body .ced-question .pq-fig .pq-lab { margin: 0; color: var(--h-text); font-size: .98rem; line-height: 1.55; }
.pq-lead { display: block; font: 600 .74rem/1.3 var(--h-sans, Inter, sans-serif); letter-spacing: .1em; text-transform: uppercase; color: var(--h-text-2, #B8B0A0); margin-bottom: 6px; }
/* Unit 4: worked solutions, the mistake behind a wrong choice, and build-the-equation items */
html body .ced-question .ced-feedback > p { margin: 0; }
.pq-mistake { color: var(--h-text); font-weight: 600; }
.pq-solution { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--h-line); }
.pq-sol-k { margin: 0 0 6px !important; font: 600 .7rem/1.2 var(--h-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--h-gold-2); }
html body section[id$="-practice"] .pq-sol-k { font: 700 .78rem/1.2 var(--h-sans); }   /* reading.css enlarges practice p; keep the label small, as Learn's .wx-lab */
/* worked-solution steps in the Learn worked-example layout (reading.css .wx): why on the left, the math on the right */
html body .pq-solution .wx-steps > li {
  counter-increment: wx; display: grid; grid-template-columns: 34px minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 18px;
  padding: 12px 0; margin: 0; border-top: 1px dashed var(--h-line-2); align-items: start;
}
html body .pq-solution .wx-steps > li:first-child { border-top: 0; }
html body .pq-solution .wx-steps > li::before { width: 30px; height: 30px; font-size: .92rem; }
html body .pq-solution .wx-steps > li:not(:has(.wx-work)) .wx-why { grid-column: 2 / -1; }
html body .pq-solution .wx-why p { margin: 0; color: var(--h-text-2); }
html body .pq-solution .wx-why p + p { margin-top: .3em; }
html body .pq-solution .wx-st { font-weight: 700; color: var(--h-text) !important; }
html body .pq-solution .wx-work { font-size: 1rem; }
html body .pq-solution .wx-ans { margin-top: 12px; padding: 10px 16px; }
html body .pq-solution .wx-ans .wx-lab { margin: 0; padding: 6px 11px; border-radius: 999px; background: var(--h-good); color: #0B1A12; font: 700 .74rem/1.2 var(--h-sans); letter-spacing: .14em; text-transform: uppercase; }
html body .pq-solution .wx-val { font-size: 1.15rem; }
@media (max-width: 760px) {
  html body .pq-solution .wx-steps > li { grid-template-columns: 30px minmax(0, 1fr); gap: 8px 12px; }
  html body .pq-solution .wx-val { font-size: 1.02rem; }
}
.pq-build { margin: 14px 0 12px; }
.pq-build .eqt-actions, .pq-build .eqt-fb { display: none !important; }
.pq-build.is-locked { pointer-events: none; }
.pq-build.is-locked .eqt-tray, .pq-build.is-locked .eqt-how { opacity: .55; }
html body .ced-question .pq-build-check { text-align: center; font-weight: 600; }
.pq-build-hint { margin: 8px 0 0; color: var(--h-text-2); font-size: .92rem; }
/* phones: side-by-side particle boxes get the room their labels need */
@media (max-width: 420px) {
  html body .ced-question .pq-table th, html body .ced-question .pq-table td { padding: 7px 10px; }
  html body .ced-question .pq-fig:has(.pq-multi) { padding: 8px 6px; }
  .pq-multi { gap: 6px; }
  .pq-multi > figure { padding: 3px; }
}