/* The Counting House (School Launch Business & Finance side path): the pictures inside each station. The shared engine
   styles are in /courses/shared/shop-game-v2/shop-game.css; this file only adds the counting house's picture pieces.
   No style attributes anywhere. Every text color here keeps at least 4.5:1 contrast on the background it sits on. */
.noscript{font:18px Georgia,serif;padding:24px;color:#1F1A15;background:#F1E9D9}
.sg-app .sg-title{letter-spacing:.01em}
.ch-pic{max-width:640px;margin:0 auto}
.ch-svg{display:block;width:100%;height:auto;max-width:640px;margin:0 auto}
.sg-app .sg-choices{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.sg-app .sg-choices-wide{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.ch-note{margin:8px 0 0;font-size:15px;font-weight:700;color:#4D4239;text-align:center}
/* tables: the amortization schedule, the pay stub and the statements, ruled like a ledger page */
.ch-table{margin:0 auto;border-collapse:collapse;background:#FBF6EA;border:2px solid #5E3B22;font-size:17px;color:#1F1A15;font-variant-numeric:tabular-nums;min-width:min(100%,320px)}
.ch-table caption{caption-side:top;font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#4D4239;padding:0 0 6px}
.ch-table th,.ch-table td{padding:6px 12px;border-bottom:1px solid #CDBEA6;text-align:right}
.ch-table th[scope="row"]{text-align:left;font-weight:600}
.ch-table th[scope="col"]{background:#EADBC0;font-size:15px}
.ch-table td{font-weight:700}
.ch-amort td:first-child{text-align:center;color:#4D4239}
.ch-q{color:#7A2A22;font-size:19px}
.ch-dim{color:#7D7262}
.ch-hit{background:#F3E0A8}
.ch-total th,.ch-total td{border-top:2px solid #1F1A15;border-bottom:3px double #1F1A15}
.ch-ded td{color:#7A2A22}
.ch-h th{background:#EADBC0;text-align:left;font-size:15px;letter-spacing:.04em}
.ch-use th,.ch-use td{background:#E3EBD6}
.ch-off th,.ch-off td{color:#6E6458;text-decoration:line-through;text-decoration-color:#9C8A70}
/* the ledger: the working, inked on a ruled page with a red margin line */
.ch-ledger{margin:12px auto 0;max-width:640px;background:#FBF6EA;border:2px solid #5E3B22;border-radius:6px;padding:10px 16px 12px 30px;position:relative;
  background-image:repeating-linear-gradient(#FBF6EA 0 33px,#D9E4EC 33px 34px);color:#1F1A15}
.ch-ledger::before{content:"";position:absolute;left:20px;top:0;bottom:0;width:2px;background:#C8564B}
.ch-ledger-title{font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#2E5A44;margin-bottom:4px}
.ch-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.ch-lines li{display:flex;flex-wrap:wrap;gap:2px 14px;align-items:baseline;padding:3px 0}
.ch-move{flex:0 1 250px;font-size:15px;font-weight:700;color:#4D4239}
.ch-res{font-size:19px;font-weight:700;color:#1F1A15;font-variant-numeric:tabular-nums}
.ch-ink-note{margin:4px 0 0;font-size:15px;color:#4D4239}
@media (max-width:560px){
  .ch-table{font-size:15px}
  .ch-table th,.ch-table td{padding:5px 6px}
  .ch-amort{font-size:13px}
  .ch-amort th,.ch-amort td{padding:4px 3px}
  .ch-res{font-size:17px}
  .ch-ledger{padding-left:26px}
}