/* ============================================================
   PRACTICE — funding and the long game (js/practice-types-funding.js)
   Everything shared lives in css/practice.css. These are the extras for
   the step drill (.pr-drill-), the cash line (.pr-cash-) and the balance
   sheet (.pr-sheet-). Mobile first: every layout stacks at 360px.
   ============================================================ */

/* ---- the step drill: parts, rows, feedback ---- */
.pr-drill-stage { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; background: #fff; margin-bottom: 14px; }
.pr-drill-stage.is-done { background: #fafafa; }
.pr-drill-intro { font-size: 15px; line-height: 1.55; margin: 0 0 8px; }
.pr-drill-intro p { margin: 0 0 8px; }
.pr-drill-h { font-size: 15px; margin: 14px 0 2px; font-family: "Montserrat", sans-serif; }
.pr-drill-block { margin: 6px 0; }

/* A drill row is label · input, with the feedback underneath at full
   width, because the working ("$33.21 × 36 = $1,195.56") needs room. */
.pr-drill .pr-row { grid-template-columns: minmax(160px, 1.3fr) minmax(220px, 1fr); }
.pr-drill .pr-row .pr-check { grid-column: 1 / -1; margin: 0; line-height: 1.5; font-weight: 500; }
.pr-drill .pr-row .pr-check:empty { display: none; }
.pr-drill-in { display: flex; align-items: center; gap: 8px; }
.pr-drill-in .pr-input { flex: 1 1 90px; min-width: 0; max-width: 170px; text-align: right; }
.pr-drill-unit { font-weight: 600; color: var(--ink-2); }
.pr-drill-check { white-space: nowrap; }
.pr-drill-next { margin-top: 14px; }

.pr-drill-pick { margin: 14px 0 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.pr-drill-pick .pr-q { font-size: 15.5px; }
.pr-drill-pick .pr-why { margin-bottom: 0; }

/* ---- L37: the cash line ---- */
.pr-cash { display: grid; gap: 10px; }
.pr-cash-month { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #f8fafc; }
.pr-cash-month.is-big { border-color: #fdba74; background: #fff7ed; }
.pr-cash-h { margin: 0 0 4px; font-size: 15.5px; font-family: "Montserrat", sans-serif; }
.pr-cash-note { margin: 0 0 6px; font-size: 14px; color: var(--ink-2); }
.pr-cash-facts { margin: 0 0 8px; font-size: 13px; color: var(--muted); line-height: 1.6; }
.pr-cash-line { display: grid; grid-template-columns: repeat(3, auto) 1fr; gap: 6px 14px; align-items: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.pr-cash-line > span b { display: block; font-size: 15px; }
.pr-cash-close { display: grid; gap: 6px; }
.pr-cash-eq { font-weight: 600; }
.pr-cash-close .pr-drill-in .pr-input { max-width: 140px; }
.pr-cash-close .pr-check { margin: 0; line-height: 1.5; }
.pr-cash-close .pr-check:empty { display: none; }

/* ---- L38: the balance sheet ---- */
.pr-sheet-tray { padding: 10px; border: 1px dashed var(--line); border-radius: 12px; margin-bottom: 10px; min-height: 52px; }
.pr-sheet-done { font-size: 14px; color: var(--muted); margin: 0 0 10px; }
.pr-sheet-hint { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); }
.pr-zone:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.pr-zone .pr-chips { min-height: 36px; }
.pr-zone .pr-chip { cursor: default; }
.pr-sheet-badge { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #991b1b; }
.pr-sheet-why { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; margin: 10px 0 0; min-height: 1.5em; }
.pr-chip.is-dragging { opacity: 0.4; }
.pr-sheet-ghost { position: fixed; z-index: 50; pointer-events: none; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); background: #fff; }

.pr-sheet-table .pr-sheet-sec th { font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); padding-top: 14px; background: #f8fafc; }
.pr-sheet-table tr.is-total td { border-bottom: 1px solid var(--line); }
.pr-sheet-table td.pr-sheet-cell, .pr-sheet-table td.pr-sheet-cell-total { text-align: right; }
.pr-sheet-table .pr-drill-in { justify-content: flex-end; }
.pr-sheet-table .pr-drill-in .pr-input { max-width: 120px; }
.pr-sheet-table .pr-check { margin: 6px 0 0; text-align: left; line-height: 1.5; }
.pr-sheet-table .pr-check:empty { display: none; }
.pr-sheet-line { margin-bottom: 8px; }
.pr-sheet-months th:first-child, .pr-sheet-months td:first-child { white-space: nowrap; }

@media (max-width: 640px) {
  .pr-drill-stage { padding: 14px; }
  .pr-drill .pr-row { grid-template-columns: 1fr; }
  .pr-drill-in .pr-input { max-width: none; }
  .pr-cash-line { grid-template-columns: 1fr 1fr; }
  .pr-cash-close { grid-column: 1 / -1; }
  .pr-sheet-table .pr-drill-in { flex-wrap: wrap; }
  .pr-sheet-table .pr-drill-in .pr-input { max-width: 110px; }
  .pr-sheet-months { font-size: 12.5px; }
  .pr-sheet-months th, .pr-sheet-months td { padding: 6px 4px; }
  .pr-sheet-months th:first-child, .pr-sheet-months td:first-child { white-space: normal; }
}