/* ============================================================
   PRACTICE — the skill drill on a lesson's Practice tab
   Shared chrome for every game type (see js/practice.js). Each type
   file may add its own classes; keep them prefixed with that type's
   name (.pr-ledger-…, .pr-sheet-…) so nothing here collides.
   ============================================================ */

.pr { position: relative; }
/* The engine hides things with the `hidden` attribute. academy.css gives
   every .btn an explicit display, and an author display beats the
   user-agent `[hidden] { display: none }` — so Play Again was on screen
   before the drill had started. Screenshots caught it; jsdom cannot
   (it does not lay out). This rule must outrank .btn. */
.pr [hidden] { display: none !important; }
.pr-head { margin-bottom: 16px; }
.pr-head-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pr-head h3 { margin: 0; font-size: 19px; }
.pr-badge {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe;
}
.pr-how { font-size: 14.5px; color: var(--muted); margin: 8px 0 0; }

.pr-body { min-height: 60px; }

.pr-foot { margin-top: 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pr-status { font-size: 14px; color: var(--ink-2); font-weight: 500; min-height: 1.45em; margin: 0; flex: 1 1 200px; }
.pr-status.is-good { color: #065f46; }
.pr-status.is-bad { color: #991b1b; }
.pr-score {
  flex: 1 1 100%; font-size: 16px; padding: 14px 16px; border-radius: 12px;
  background: #ecfdf5; border: 1px solid #a7f3d0; color: #064e3b;
}
.pr-score-note { display: block; font-size: 13.5px; color: #065f46; margin-top: 4px; }
.pr.is-finished .pr-body { opacity: 0.55; pointer-events: none; }

/* ---- shared building blocks ---- */
.pr-card { border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; background: #fff; }
.pr-count { font-size: 12.5px; color: var(--muted); margin: 0 0 8px; font-weight: 600; letter-spacing: 0.04em; }
.pr-q { font-size: 16.5px; font-weight: 600; margin: 0 0 14px; line-height: 1.5; }
.pr-opts { display: grid; gap: 8px; margin-bottom: 12px; }
.pr-opt {
  text-align: left; font: inherit; font-size: 15px; padding: 11px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: #f8fafc; color: var(--ink); cursor: pointer;
}
.pr-opt:hover:not(:disabled) { border-color: var(--primary); background: #eff6ff; }
.pr-opt:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.pr-opt:disabled { cursor: default; }
.pr-opt.is-right { border-color: #34d399; background: #d1fae5; color: #065f46; font-weight: 600; }
.pr-opt.is-wrong { border-color: #fca5a5; background: #fee2e2; color: #991b1b; }
.pr-why { font-size: 14.5px; color: var(--ink-2); margin: 0 0 12px; line-height: 1.55; }

/* numeric rows: label · input · feedback */
.pr-row { display: grid; grid-template-columns: minmax(140px, 1.4fr) minmax(110px, 1fr) minmax(90px, 1fr); gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.pr-row:last-child { border-bottom: 0; }
.pr-row .pr-label { font-size: 14.5px; }
.pr-row .pr-sub { display: block; font-size: 12.5px; color: var(--muted); }
.pr-input {
  font: inherit; font-size: 15px; padding: 8px 10px; border-radius: 8px; width: 100%;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
}
.pr-input:focus { outline: 3px solid rgba(37, 99, 235, 0.25); border-color: var(--primary); }
.pr-input.is-right { border-color: #34d399; background: #ecfdf5; }
.pr-input.is-wrong { border-color: #f87171; background: #fef2f2; }
.pr-check { font-size: 13.5px; font-weight: 600; }
.pr-check.is-right { color: #065f46; }
.pr-check.is-wrong { color: #991b1b; }

/* tables (ledgers, statements) */
.pr-table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 8px 0 12px; }
.pr-table th { text-align: left; font-size: 12.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); padding: 8px 8px; border-bottom: 2px solid var(--line); }
.pr-table td { padding: 8px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pr-table td.num, .pr-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.pr-table tr.is-total td { font-weight: 700; border-top: 2px solid var(--ink-2); border-bottom: 0; }
.pr-table .pr-input { max-width: 130px; text-align: right; }

/* drag/tap targets (statement sides, buckets, timelines) */
.pr-zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 12px 0; }
.pr-zone { border: 2px solid var(--line); border-radius: 14px; background: #f8fafc; min-height: 120px; padding: 12px; }
.pr-zone.is-armed { border-style: dashed; border-color: #93c5fd; cursor: pointer; }
.pr-zone.is-over { border-color: var(--primary); background: #eff6ff; }
.pr-zone-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pr-zone-t { font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 15px; }
.pr-zone-total { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.pr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pr-chip {
  font: inherit; font-size: 14px; padding: 8px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
}
.pr-chip:hover { border-color: var(--primary); }
.pr-chip:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.pr-chip.is-sel { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15); }
.pr-chip.is-right { border-color: #34d399; background: #d1fae5; }
.pr-chip.is-wrong { border-color: #fca5a5; background: #fee2e2; }
.pr-chip .pr-chip-n { font-variant-numeric: tabular-nums; color: var(--ink-2); }

/* the balance line at the bottom of a statement game */
.pr-balance { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; margin-top: 10px; font-weight: 600; background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; }
.pr-balance.is-balanced { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }

/* sliders */
.pr-slider { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; margin: 8px 0; }
.pr-slider label { font-size: 14px; grid-column: 1 / -1; }
.pr-slider input[type=range] { width: 100%; }
.pr-slider output { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 70px; text-align: right; }

.pr-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

@media (max-width: 640px) {
  .pr-row { grid-template-columns: 1fr; gap: 6px; }
  .pr-table { font-size: 13.5px; }
  .pr-table th, .pr-table td { padding: 6px 5px; }
}