/* ============================================================
   PRACTICE — the books drills (js/practice-types-books.js)
   Lessons 17–20: costs, ledger, breakeven, margin.
   Shared chrome lives in css/practice.css; only what those four need
   on top is here. .pr-books- is the prefix for the two helpers the
   four types share (a checked stage of typed rows, a choice card).
   ============================================================ */

/* ---- typed-answer stage: label | input, feedback under the row ----
   The feedback carries the arithmetic, which is a sentence, not a
   badge, so it takes the full row width rather than a third column. */
.pr-books-form .pr-row {
  grid-template-columns: minmax(140px, 1.6fr) minmax(150px, 1fr);
}
.pr-books-form .pr-check { grid-column: 1 / -1; line-height: 1.5; font-weight: 500; }
.pr-books-form .pr-check:empty { display: none; }
.pr-books-form .pr-check b { font-weight: 700; }
.pr-books-in { display: flex; align-items: center; gap: 6px; }
.pr-books-in .pr-input { max-width: 160px; text-align: right; font-variant-numeric: tabular-nums; }
.pr-books-unit { font-size: 14px; color: var(--muted); white-space: nowrap; }
.pr-books-stage .pr-actions { margin-top: 14px; }
/* A stage nested inside another card (the ledger's follow-up) */
.pr-books-stage:not(.pr-card) { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.pr-books-stage:not(.pr-card) .pr-q { font-size: 15.5px; }

/* ---- costs: the sort list ---- */
.pr-costs-list { list-style: none; margin: 0 0 8px; padding: 0; }
.pr-costs-item { padding: 10px 0; border-bottom: 1px solid var(--line); }
.pr-costs-item:last-child { border-bottom: 0; }
.pr-costs-name { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.pr-costs-amt { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-costs-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.pr-costs-btns .pr-chip { min-width: 96px; justify-content: center; }
.pr-costs-btns .pr-chip:disabled { cursor: default; }
.pr-costs-item .pr-why { margin: 8px 0 0; }

/* ---- ledger ---- */
.pr-ledger-card .pr-q { font-size: 16px; }
.pr-ledger-hint { color: #9a3412; }
.pr-ledger-cols { margin: 4px 0 12px; }
.pr-ledger-cols .pr-chip { min-width: 120px; justify-content: center; }
.pr-ledger-cols .pr-chip:disabled { cursor: default; }
.pr-ledger-verdict { margin-top: 12px; }
.pr-ledger-wrap { margin-top: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pr-ledger-empty { font-size: 14px; color: var(--muted); margin: 8px 0; }
.pr-ledger-cap { caption-side: top; text-align: left; font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); padding: 0 8px 6px; }
.pr-ledger-table { min-width: 460px; }
.pr-ledger-table td.pr-ledger-bal { font-weight: 600; }
.pr-ledger-table td.pr-ledger-bal.is-neg { color: #991b1b; }
/* A row whose balance moved on the last post — the back-dated entry
   above it did that. Fades so the eye is drawn once, not nagged. */
.pr-ledger-table tr.pr-ledger-shift td { background: #fef3c7; animation: pr-ledger-fade 2.4s ease-out forwards; }
@keyframes pr-ledger-fade { from { background: #fde68a; } to { background: #fffbeb; } }
@media (prefers-reduced-motion: reduce) {
  .pr-ledger-table tr.pr-ledger-shift td { animation: none; background: #fef3c7; }
}

/* ---- breakeven / margin use the shared stage; nothing extra beyond
   keeping long option text readable on a phone ---- */
.pr-books-choice .pr-opt { line-height: 1.45; }

@media (max-width: 640px) {
  .pr-books-form .pr-row { grid-template-columns: 1fr; }
  .pr-books-in .pr-input { max-width: none; }
  .pr-costs-btns .pr-chip { flex: 1 1 0; }
  .pr-ledger-cols .pr-chip { flex: 1 1 0; min-width: 0; }
  .pr-ledger-table { min-width: 420px; font-size: 13px; }
}