/* ==========================================================
   Tally page — balance-scale hero, "Debit or Credit?" game,
   GST invoice builder. Shared bits live in course-page.css.
   ========================================================== */

/* ---------- Hero ---------- */
.tally-hero{ width:100%; max-width:500px; display:block; margin:0 auto; overflow:visible; filter: drop-shadow(0 30px 40px rgba(60,20,0,.3)); }
.tally-hero .floater{ font-family: var(--font-display); font-weight:800; font-size:24px; fill: rgba(255,255,255,.3); text-anchor:middle; }
.tally-hero .pan-label{ font-family: var(--font-display); font-weight:800; font-size:18px; fill: var(--coaching-accent); text-anchor:middle; }
.tally-hero .coin-text{ font-family: var(--font-display); font-weight:800; font-size:12px; fill:#7A4E12; text-anchor:middle; }
.tally-hero .balanced-text{ font-family: var(--font-display); font-weight:800; font-size:16px; fill: var(--study-accent); text-anchor:middle; }

/* ---------- Debit or Credit? ---------- */
.dc-progress{ font-family: var(--font-display); font-weight:700; font-size:.85rem; color: var(--slate); }
.dc-progress .bi{ color: var(--study-accent); }
.dc-card{ background: var(--navy); color:#fff; border-radius: var(--radius-md); padding:1.2rem 1.3rem; }
.dc-label{ font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color: var(--gold); }
.dc-txn{ font-family: var(--font-display); font-weight:700; font-size:1.25rem; color:#fff; margin:.25rem 0 .3rem; line-height:1.35; }
.dc-amount{ font-family: var(--font-display); font-weight:800; font-size:1.5rem; color: var(--gold); }
.dc-choices{ display:grid; grid-template-columns: 1fr 1fr; gap:.6rem; }
.dc-choices .btn{ grid-column: 1 / -1; justify-self:start; }
.dc-choice{
  border:2px solid var(--line); background:#fff; border-radius: var(--radius-sm); padding:.75rem .6rem; font-weight:700;
  color: var(--navy); font-size:.92rem; transition: border-color .2s ease, background .2s ease, transform .1s ease;
}
.dc-choice:hover:not(:disabled){ border-color: var(--coaching-accent); color: var(--coaching-accent); }
.dc-choice:active:not(:disabled){ transform: scale(.97); }
.dc-choice.is-debit{ border-color: var(--study-accent); background: rgba(31,122,99,.08); color: var(--study-accent); }
.dc-choice.is-debit::after{ content:" · Dr"; }
.dc-choice.is-credit{ border-color: rgba(217,114,44,.5); background: rgba(217,114,44,.06); color: var(--coaching-accent); }
.dc-choice.is-credit::after{ content:" · Cr"; }

.dc-entry{ display:none; }
.dc-entry.is-shown{
  display:block; margin-top:.9rem; background:#FFFDF6; border:1px solid var(--line); border-radius: var(--radius-sm); padding:.8rem 1rem;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-size:.85rem; animation: entryIn .3s ease;
}
@keyframes entryIn{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform:none; } }
.dc-voucher-head{ display:flex; justify-content:space-between; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--slate); border-bottom:1px dashed var(--line); padding-bottom:.35rem; margin-bottom:.4rem; }
.dc-line{ display:flex; justify-content:space-between; gap:1rem; color: var(--navy); }
.dc-line em{ font-style:normal; color: var(--study-accent); font-weight:700; }
.dc-to{ padding-left:1.4rem; color: var(--coaching-accent); }
.dc-narration{ color: var(--slate); font-style:italic; margin-top:.2rem; }
.dc-rule{ font-family: var(--font-body); font-size:.8rem; color: var(--ink); margin:.6rem 0 0; line-height:1.5; }
.dc-rule .bi{ color: var(--gold-deep); }
.dc-rules{ display:flex; flex-direction:column; gap:.15rem; font-size:.76rem; color: var(--slate); border-top:1px solid var(--line); }
.dc-rules b{ color: var(--navy); }
.dc-rules em{ font-style:normal; font-weight:700; color: var(--coaching-accent); }

/* ---------- GST invoice ---------- */
.invoice{ border:1px solid var(--line); border-radius: var(--radius-md); padding:1rem; background:#FFFDF6; }
.invoice-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; border-bottom:2px solid var(--navy); padding-bottom:.6rem; margin-bottom:.6rem; }
.invoice-head b{ display:block; font-family: var(--font-display); font-size:1.15rem; color: var(--navy); letter-spacing:.04em; text-transform:uppercase; }
.invoice-head span{ font-size:.8rem; color: var(--slate); }
.invoice-no{ font-family: "SFMono-Regular", Menlo, Consolas, monospace; white-space:nowrap; }
.inv-table{ width:100%; border-collapse:collapse; font-size:.85rem; min-width:520px; }
.inv-table th{ font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: var(--slate); padding:.35rem .3rem; border-bottom:1px solid var(--line); }
.inv-table td{ padding:.3rem; vertical-align:middle; border-bottom:1px dashed var(--line); }
.inv-table td:nth-child(2){ width:38%; }
.inv-table td:nth-child(3){ width:11%; }
.inv-table td:nth-child(4){ width:15%; }
.inv-table td:nth-child(5){ width:13%; }
.inv-table .form-control, .inv-table .form-select{ padding:.25rem .45rem; font-size:.85rem; border-radius:7px; }
.inv-sn{ color: var(--slate); font-weight:700; text-align:center; }
.inv-amt{ text-align:right; font-weight:700; color: var(--navy); font-variant-numeric: tabular-nums; white-space:nowrap; }
.inv-del{ border:none; background:none; color:#B9B2A2; padding:.2rem .4rem; border-radius:6px; }
.inv-del:hover{ color:#B8422E; background: rgba(184,66,46,.08); }
.invoice-foot{ display:flex; flex-direction:column; align-items:flex-end; margin-top:.8rem; }
.inv-totals{ width:100%; max-width:300px; }
.inv-row{ display:flex; justify-content:space-between; gap:1rem; font-size:.86rem; padding:.18rem 0; color: var(--slate); }
.inv-row b{ color: var(--navy); font-variant-numeric: tabular-nums; }
.inv-total{ border-top:2px solid var(--navy); margin-top:.3rem; padding-top:.45rem; font-size:1.05rem; }
.inv-total span, .inv-total b{ font-family: var(--font-display); font-weight:800; color: var(--navy); }
.inv-words{ width:100%; margin:.6rem 0 0; font-size:.8rem; font-weight:600; font-style:italic; color: var(--ink); text-align:right; }
.inv-note{ font-size:.78rem; color: var(--slate); margin-top:.8rem; }