/* Q479+ — budget tracker styles. Extracted from budget/index.html so the real page AND the read-only
   demo sandbox (demo/budget/) link ONE source — the demo can never drift from the shipped UI. Tokens only. */
  .bg{max-width:1040px}
  .bg-card{margin:16px 0 0}
  .bg-card h2{margin:0 0 4px}
  .bg-sub{color:var(--ink-2,#56535F);font-size:14px;margin:0 0 14px}
  /* Q586 — the topline is three §6 stat tiles (Raised · Spent · On hand); On hand is the one dark pop tile */
  .bg-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 2px}
  .bg-tile{border:1.5px solid var(--tile-bd,#DAD6CB);border-radius:var(--r,10px);padding:12px 14px;background:var(--surface,#fff)}
  .bg-tile.is-pop{background:var(--tile-pop-bg,#121016);border-color:var(--tile-pop-bg,#121016)}
  .bg-tile.is-pop .bg-tile__n,.bg-tile.is-pop .bg-tile__l{color:var(--tile-pop-fg,#F7F5EF)}
  .bg-tile__n,.bg-fig__n{font-family:var(--font-display,inherit);font-weight:var(--fw-bold,800);font-size:1.5rem;line-height:1.1;color:var(--ink,#121016)}
  .bg-tile__l{color:var(--ink-2,#56535F);font-size:12px;margin:4px 0 0}
  @media (max-width:560px){ .bg-tiles{grid-template-columns:1fr 1fr} .bg-tile.is-pop{grid-column:1 / -1} }
  .bg-bar{height:12px;border:2px solid var(--ink,#121016);border-radius:var(--r-pill,999px);overflow:hidden;background:var(--surface,#fff);margin:6px 0 2px}
  .bg-bar span{display:block;height:100%;background:var(--accent,#2238FF)}
  .bg-bar.is-actual span{background:var(--secondary-strong,#C4145A)}
  /* Q518 — overspend: the spend bar recolors to the warn token + a calm ratio/note beside it (no rainbow) */
  .bg-bar.is-over{border-color:var(--warn,#8A5A07)}
  .bg-bar.is-over span{background:var(--warn,#8A5A07)}
  .bg-over{margin:2px 0 8px;font-size:13px;color:var(--warn,#8A5A07)}
  .bg-over-pct{font-weight:700}
  .bg-over-note{color:var(--ink-2,#2A2730);font-weight:500}
  .bg-rows{width:100%;border-collapse:collapse;margin:8px 0 0}
  .bg-rows th,.bg-rows td{text-align:left;padding:8px 8px 8px 0;border-bottom:1px solid var(--line,#E6E2D8);vertical-align:middle}
  .bg-rows th{font-size:12px;color:var(--ink-2,#56535F);font-weight:var(--fw-semibold,600)}
  .bg-rows td.bg-amt,.bg-rows th.bg-amt{text-align:right;font-variant-numeric:tabular-nums}
  .bg-rows input,.bg-rows select{width:100%;min-width:60px}
  .bg-rows input.bg-in-amt{max-width:96px;text-align:right}
  /* Q527 — Cash/Check + category dropdowns match the input kit (token border, same height, no bespoke chrome) */
  .bg-rows select{min-height:44px;padding:6px 8px;border:1px solid var(--line,#E6E2D8);border-radius:var(--r-sm,8px);background:var(--surface,#fff);color:var(--ink,#121016);font:inherit}
  .bg-rows select:focus-visible{outline:var(--focus-ring);outline-offset:1px}
  /* the pinned, read-only GoodChange aggregate row — no inputs, quietly distinct on the sunken surface */
  .bg-gc-row td,.bg-gc-row th{background:var(--surface-sunken,#F2EFE6)}
  .bg-gc-row .bg-gc-type{font-weight:var(--fw-semibold,600)}
  .bg-gc-row .bg-gc-note{color:var(--ink-2,#56535F);font-size:13px}
  .bg-gc-row .bg-gc-amt{font-weight:var(--fw-semibold,600);font-variant-numeric:tabular-nums}
  .bg-rows td.bg-actcol,.bg-rows th.bg-actcol{width:52px;padding-right:0}
  .bg-rowact{display:flex;gap:6px;justify-content:flex-end}
  .bg-rowact button{min-height:44px;padding:6px 12px}
  /* per-row × delete — a subtle icon button, 44px target, pink on hover (no bespoke panel) */
  .bg-del{border:none;background:transparent;color:var(--ink-2,#56535F);font-size:20px;line-height:1;min-height:44px;min-width:44px;border-radius:var(--r-sm,8px);cursor:pointer}
  .bg-del:hover{color:var(--secondary-strong,#C4145A);background:var(--surface-sunken,#F2EFE6)}
  .bg-del:focus-visible{outline:var(--focus-ring);outline-offset:2px}
  /* Q512 — the armed (two-tap) confirm state: a clear pill so an accidental first tap can't delete a line */
  .bg-del.is-armed{width:auto;min-width:44px;padding:0 12px;font-size:13px;font-weight:600;color:var(--on-secondary,#fff);background:var(--secondary-strong,#C4145A)}
  /* "+ Add a line" — the always-present last row reads like the next empty spreadsheet line */
  .bg-addline .bg-new-label::placeholder{color:var(--accent,#2238FF);font-weight:var(--fw-semibold,600)}
  .bg-addline td{border-bottom:none}
  .bg-add{min-height:44px;padding:6px 14px;border:1px solid var(--line,#E6E2D8);background:var(--surface,#fff);border-radius:var(--r-sm,8px);font-weight:var(--fw-semibold,600);color:var(--accent,#2238FF);cursor:pointer}
  .bg-add:hover{border-color:var(--accent,#2238FF)}
  .bg-add:focus-visible{outline:var(--focus-ring);outline-offset:2px}
  .bg-empty{color:var(--ink-2,#56535F);font-size:14px;margin:10px 0}
  /* Q575 — money-in quick amounts: clean chips (never a dotted pill), the $25 ANC cap named beside them */
  .bg-quickrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:8px 0 0}
  .bg-quick-lbl{font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted,#56535F)}
  .bg-quick{min-height:44px;min-width:44px;padding:6px 14px;border:1.5px solid var(--line-strong,#C9C4B6);border-radius:var(--r-pill,999px);background:var(--surface,#fff);font-weight:600;font-size:14px;color:var(--ink,#121016);cursor:pointer}
  .bg-quick:hover,.bg-quick:focus-visible{border-color:var(--accent,#2238FF);color:var(--accent,#2238FF)}
  .bg-quick:focus-visible{outline:var(--focus-ring);outline-offset:2px}
  .bg-quick-cap{font-size:12px;color:var(--muted,#56535F)}
  /* connect step — canonical .card + numbered .platform steps; the copy-link sits in step 1 */
  .bg-steps{margin:14px 0 4px}
  .bg-hookline{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 2px}
  .bg-hookline input{flex:1;min-width:180px;max-width:360px}
  .bg-goal{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:10px 0 0}
  .bg-goal input{max-width:140px}
  .bg-msg{min-height:18px;font-size:13px;font-weight:var(--fw-semibold,600);margin:8px 0 0}
  .bg-note{color:var(--ink-2,#56535F);font-size:13px;margin:14px 0 0}
  .bg-rows input.bg-in-date{max-width:150px}
  /* Q528 — Money In + Money Out side by side like a ledger on desktop; stack (income above expenses) on mobile */
  .bg-ledger{display:grid;gap:16px;grid-template-columns:1fr;margin:16px 0 0}
  .bg-ledger .bg-card{margin:0}
  @media (min-width:760px){ .bg-ledger{grid-template-columns:1fr 1fr;align-items:start} }
  /* Q528 — the budgeting chart: hand-drawn SVG, tokens only (two brand colors, never a rainbow), no animation */
  .bg-tabs{display:flex;gap:8px;margin:2px 0 12px}
  .bg-tab[aria-pressed="true"]{background:var(--accent,#2238FF);color:var(--on-accent,#fff);border-color:var(--accent,#2238FF)}
  .bg-svg{width:100%;height:auto;max-width:360px;display:block}
  .bg-svg text{fill:var(--ink,#121016);font-size:11px}
  /* Q575 — the ONE chart language (§21): income = --chart-a (primary), expenses = --chart-b (comparison); ≤2 series, no rainbow */
  .bg-chart-inc{fill:var(--chart-a,#2238FF)}
  .bg-chart-exp{fill:var(--chart-b,#C9C4B6)}
  .bg-line{fill:none;stroke-width:2.5}
  .bg-strk-inc{stroke:var(--chart-a,#2238FF)}
  .bg-strk-exp{stroke:var(--chart-b,#C9C4B6)}
  .bg-legend{display:flex;gap:16px;margin:8px 0 0;font-size:13px;color:var(--ink-2,#56535F)}
  .bg-legend span{display:inline-flex;align-items:center;gap:6px}
  .bg-sw{width:12px;height:12px;border-radius:var(--r-sm,3px);display:inline-block}
  .bg-sw.inc{background:var(--chart-a,#2238FF)}
  .bg-sw.exp{background:var(--chart-b,#C9C4B6)}
  .bg-chart-data{margin:12px 0 0}
  .bg-datatable caption{text-align:left;caption-side:top}
  @media (max-width:560px){ .bg-rows th.bg-cat,.bg-rows td.bg-cat,.bg-rows th.bg-optcol,.bg-rows td.bg-optcol,.bg-rows th.bg-datecol,.bg-rows td.bg-datecol{display:none} }