/* 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:1240px}   /* Q736 — use the wider app frame so Money in / Money out (the 1fr 1fr ledger) get room; the Money-out table stops truncating (was 1040, the marketing frame) */
  .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}
  /* Q668 — screen-07 header: the H1 left, the live topline tiles header-RIGHT (not a stacked card); stacks ≤560 */
  .bg-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px 20px;margin:0 0 4px}
  .bg-head>.display{margin:0}
  .bg-topline{flex:0 0 auto}
  .bg-tiles--head{margin:0;grid-template-columns:repeat(3,minmax(92px,auto))}
  /* Q830 — tiles are .stat-tile (components.css): the compact head padding + 1.15rem number override are dropped for the canonical prominent sizing. */
  @media (max-width:560px){ .bg-head{flex-direction:column} .bg-topline{width:100%} .bg-tiles--head{grid-template-columns:1fr 1fr} .bg-tiles--head .stat-tile--pop{grid-column:1 / -1} }
  /* Q668 — the goal control + progress bars sit in a slim block atop the ledger (not a "Where you stand" card) */
  .bg-goalwrap{margin:12px 0 0}
  /* Q668 — Money IN compose form (screen 06): a Cash/Check toggle + who/what + $-chip amount + Add it */
  .bg-compose{margin:4px 0 12px}
  .bg-compose__q{font-size:13px;font-weight:var(--fw-semibold,600);margin:0 0 6px;color:var(--ink,#121016)}
  .bg-toggle{display:inline-flex;gap:8px;margin:0 0 10px}
  .bg-tgl{min-height:44px;padding:8px 18px;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-tgl.is-on{border-color:var(--accent,#2238FF);color:var(--accent,#2238FF);box-shadow:inset 0 0 0 1px var(--accent,#2238FF)}
  .bg-tgl:focus-visible{outline:var(--focus-ring);outline-offset:2px}
  .bg-compose .bg-new-note{width:100%;margin:0 0 4px}
  .bg-compose .bg-new-amt{max-width:110px;text-align:right}
  .bg-actions{margin:10px 0 0}
  /* Q668 — the logged-lines read list (GoodChange aggregate + cash/check lines): a clean ledger, not inputs */
  .bg-inlist{list-style:none;margin:12px 0 0;padding:0}
  .bg-inrow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line,#E6E2D8)}
  .bg-inrow__tag{flex:0 0 auto;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-2,#56535F)}
  .bg-inrow__note{flex:1 1 auto;color:var(--ink,#121016);font-size:14px}
  .bg-inrow__amt{flex:0 0 auto;font-weight:var(--fw-semibold,600);font-variant-numeric:tabular-nums}
  .bg-inrow.bg-gc-row{background:var(--surface-sunken,#F2EFE6);border-radius:var(--r-sm,8px);padding:8px 10px}
  /* Q586/Q830 — the topline is three §6 stat tiles (Raised · Spent · On hand); On hand is the one dark pop tile.
     Q830 — tiles are .stat-tile (components.css): the frame / value font / label / pop coloring all live there now;
     budget keeps ONLY the .bg-tiles row-layout grid (incl. the mobile pop-span). */
  .bg-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 2px}
  @media (max-width:560px){ .bg-tiles{grid-template-columns:1fr 1fr} .stat-tile--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 30px 6px 10px;border:1px solid var(--line,#E6E2D8);border-radius:var(--r-sm,8px);background-color:var(--surface,#fff);color:var(--ink,#121016);font:inherit;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2210%22%20height=%227%22%3E%3Cpath%20d=%22M1%201l4%204%204-4%22%20stroke=%22%2356535F%22%20stroke-width=%221.7%22%20fill=%22none%22%20stroke-linecap=%22round%22/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
  .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}
  /* Q820 — the Verify-connection row (button + a live status line). */
  .bg-gc-verify{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0 4px}
  .bg-gc-vstatus{font-size:13px;color:var(--muted,#56535F)}
  .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:12px}
  /* 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} }
  /* Q653 — the "Week by week" pulse card: paired in/out weekly bars (the one chart language), a goal chip + one nudge. */
  .bg-weekcard .bg-week__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .bg-week__goal{font:600 12.5px/1 var(--font-ui);color:var(--ink-2,#56535F);background:var(--surface-2);border:1.5px solid var(--line-strong);border-radius:var(--r-pill);padding:5px 11px}
  .bg-week__chart{display:flex;align-items:flex-end;gap:14px;height:96px;margin:14px 0 0}
  .bg-week__col{flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center}
  .bg-week__bars{display:flex;align-items:flex-end;gap:4px;height:100%;width:100%;justify-content:center}
  .bg-week__in,.bg-week__out{width:16px;border-radius:2px 2px 0 0;min-height:3px}
  .bg-week__in{background:var(--chart-a,#2238FF)}
  .bg-week__out{background:var(--chart-b,#C9C4B6)}
  .bg-week__onhand{margin:12px 0 0;color:var(--ink,#211E29);font-size:14.5px}
  .bg-week__empty{margin:12px 0 0;color:var(--muted,#79757F);font-size:14px}
  .bg-week__nudge{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 0;color:var(--ink-2,#56535F);font-size:14px}
  .bg-week__chip{font:700 11px/1 var(--font-ui);letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:var(--r-pill);border:1.5px solid var(--line-strong)}
  .bg-week__chip.is-ahead{color:var(--ok);background:var(--ok-soft);border-color:var(--ok-border)}
  .bg-week__chip.is-watch{color:var(--ink);background:var(--highlight-soft);border-color:var(--warn-border)}

  /* ============================================================================
     BROAD-DAYLIGHT MOBILE SKIN (≤760 ONLY) — the prototype app grammar.
     Skin only: no control is added/removed here, only restyled. Tokens only.
     Ground = --paper behind cards; cards = --surface + thin --line + --r-lg with
     the offset stamp shadow; primary buttons = --accent w/ 2px --ink border +
     stamp; inputs = 16px (no iOS zoom), --r-lg; stat tiles carry the stamp +
     uppercase eyebrow. Desktop (>760) is untouched.
     ========================================================================== */
  @media (max-width:760px){
    /* warm/cool ground behind the cards; give the dock clearance is handled by tool-rail */
    .bg{max-width:100%;padding:0}
    main.prose{background:var(--paper,#F4F6F8)}

    /* --- section header: H1 + topline tiles stack, tiles read as a stat band --- */
    .bg-head{gap:14px}
    .bg-head>.display{font-size:1.9rem;line-height:1.08}
    .eyebrow{font-size:var(--fs-eyebrow,12px);letter-spacing:var(--ls-eyebrow,.16em);text-transform:uppercase;color:var(--muted,#56535F);font-weight:700}

    /* --- STAT TILES (Raised · Spent · On hand): 2-across, the On-hand pop tile spans full width.
       Q830 — tiles are .stat-tile (components.css): the frame / stamp-free surface / eyebrow label / value font /
       pop coloring all live there now (quiet/soft, no stamp, at every width); budget keeps only the row layout
       + the mobile full-width pop span. --- */
    .bg-tiles{gap:10px;margin:10px 0 2px}
    .bg-tiles--head{grid-template-columns:1fr 1fr}
    .stat-tile--pop{grid-column:1 / -1}

    /* --- APP CARDS: white surface, thin border, big radius, stamp shadow --- */
    .bg-card,.card.bg-card{background:var(--surface,#fff);border:1.5px solid var(--line,#E3E7ED);border-radius:var(--r-lg,16px);box-shadow:var(--shadow-pop-sm,2px 3px 0 var(--ink));padding:18px 16px;margin:16px 0 0}
    .bg-card h2{font-family:var(--font-display,inherit);font-size:1.15rem}
    /* stack the two ledger cards; keep the desktop 2-up only above 760 (already gated) */
    .bg-ledger{gap:16px}

    /* --- SECTION EYEBROW on the goal block progress note --- */
    .bg-goalwrap{margin:14px 0 0}
    .bg-bar{height:14px;margin:8px 0 4px}

    /* --- INPUTS / SELECTS: 16px (no iOS zoom), --r-lg, min-height 46, thin --line --- */
    .bg-compose .bg-new-note,
    .bg-rows input,.bg-rows select,
    .bg-goal input,#bg-goal-in,
    .bg-hookline input{font-size:16px;min-height:46px;border-radius:var(--r-lg,16px);border:1.5px solid var(--line,#E3E7ED);background:var(--surface,#fff);color:var(--ink,#121016);padding:0 12px}
    .bg-quickrow .bg-new-amt{font-size:16px;min-height:46px;border-radius:var(--r-lg,16px);border:1.5px solid var(--line,#E3E7ED);background:var(--surface,#fff)}
    .bg-rows input:focus-visible,.bg-rows select:focus-visible,#bg-goal-in:focus-visible,.bg-new-amt:focus-visible{outline:var(--focus-ring,3px solid var(--accent));outline-offset:1px}

    /* --- MONEY-IN compose: Cash/Check toggle = ghost pills, selected = accent fill --- */
    .bg-toggle{gap:10px;margin:2px 0 12px}
    .bg-tgl{min-height:46px;border-radius:var(--r-pill,999px)}
    .bg-tgl.is-on{background:var(--accent,#2238FF);border-color:var(--ink,#121016);color:var(--on-accent,#fff);box-shadow:none}
    .bg-compose__q{font-size:14px;font-weight:600}

    /* --- QUICK-ADD chips + the $25 ANC cap named beside them --- */
    .bg-quickrow{gap:10px;margin:12px 0 0}
    .bg-quick{min-height:46px;border-radius:var(--r-pill,999px)}
    .bg-quick.is-on,.bg-quick[aria-pressed="true"]{background:var(--accent,#2238FF);border-color:var(--ink,#121016);color:var(--on-accent,#fff)}
    .bg-quick-cap{flex-basis:100%;font-size:12.5px;color:var(--muted,#56535F)}

    /* --- PRIMARY BUTTON (Add it): accent fill, 2px ink border, stamp, pressed pushes in --- */
    .bg-actions{margin:14px 0 0}
    .bg-add,.btn.bg-add{min-height:50px;width:100%;padding:0 18px;border:2px solid var(--ink,#121016);border-radius:var(--r,12px);background:var(--accent,#2238FF);color:var(--on-accent,#fff);font-family:var(--font-display,inherit);font-weight:600;font-size:16px;box-shadow:var(--shadow-pop-sm,2px 3px 0 var(--ink));cursor:pointer}
    .bg-add:active,.btn.bg-add:active{transform:translate(1px,2px);box-shadow:0 0 0 var(--ink,#121016)}
    .bg-add:focus-visible{outline:var(--focus-ring,3px solid var(--accent));outline-offset:2px}
    /* the "+ Add a line" table add-button keeps its ghost look but grows the tap target */
    .bg-addline .bg-add{width:auto;min-height:46px;background:var(--surface,#fff);color:var(--accent,#2238FF);border:1.5px solid var(--line-strong,#D8DCE2);box-shadow:none;font-family:var(--font-ui,inherit)}
    .bg-addline .bg-add:active{transform:none;box-shadow:none}

    /* --- LOGGED-LINES read list: clean ledger rows, comfortable tap targets --- */
    .bg-inrow{padding:12px 0;gap:12px}
    .bg-inrow.bg-gc-row{padding:12px 12px;border-radius:var(--r,12px)}
    .bg-inrow__amt{font-size:15px}

    /* --- MONEY-OUT on phone: each expense is a STACKED CARD, not a cramped 4-column table (Steven 2026-07-27 —
       the fixed-column table crushed the inputs + truncated headers). Category + Date are hidden; "What" is the card
       title, Estimated/Actual become labeled fields (label left, value right), the × sits in the top-right corner.
       No horizontal scroll, no tiny boxes. --- */
    .bg-rows th.bg-cat,.bg-rows td.bg-cat,
    .bg-rows th.bg-datecol,.bg-rows td.bg-datecol{display:none}
    .bg-rows,.bg-rows tbody,.bg-rows tr,.bg-rows td{display:block;width:auto}
    .bg-rows{overflow:visible}
    .bg-rows thead{display:none}
    .bg-rows tr{position:relative;border:1.5px solid var(--line,#E3E7ED);border-radius:var(--r,12px);background:var(--surface,#fff);padding:14px 14px 12px;margin:0 0 10px}
    .bg-rows tr:last-child{margin-bottom:0}
    .bg-rows td{padding:0;border:none}
    .bg-rows td:first-child{margin:0;padding-right:52px}
    .bg-rows td:first-child input{width:100%;font-weight:600}
    .bg-rows td.bg-amt{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0 0;text-align:left}
    .bg-rows td.bg-amt::before{content:attr(data-label);flex:0 0 auto;font-size:13px;font-weight:600;color:var(--muted,#56535F)}
    .bg-rows td.bg-amt input.bg-in-amt{flex:0 0 48%;width:48%;max-width:48%;text-align:right}
    .bg-rows td.bg-actcol{position:absolute;top:10px;right:10px;width:auto;padding:0}
    /* the "+ Add a line" card: no corner × (it has the Add button); drop the button to the bottom, full width */
    .bg-addline td:first-child{padding-right:0}
    .bg-addline td.bg-actcol{position:static;margin:12px 0 0}
    .bg-addline .bg-add{width:100%}

    /* --- DELETE: keep the guarded ×; armed state stays the pink confirm pill --- */
    .bg-del{min-height:46px;min-width:46px;border-radius:var(--r,12px)}
    .bg-del.is-armed{border-radius:var(--r-pill,999px)}

    /* --- CHART tabs = ghost pills; selected = accent fill (the one chart language) --- */
    .bg-tabs{gap:10px;margin:4px 0 14px;flex-wrap:wrap}
    .bg-tab{min-height:46px;border-radius:var(--r-pill,999px)}
    .bg-tab[aria-pressed="true"]{border-color:var(--ink,#121016)}
    .bg-svg{max-width:100%}

    /* --- WEEK-BY-WEEK paired bars: slightly taller for touch legibility --- */
    .bg-week__chart{height:104px;gap:10px}
    .bg-week__goal{align-self:flex-start}

    /* --- DISCLOSURES (GoodChange how-to, "Show the numbers") — comfortable summary tap --- */
    .bg-gc-help summary,.bg-chart-data summary{min-height:44px;display:flex;align-items:center}

    /* --- COPY / GOAL secondary buttons keep a ghost pill look at a real tap size --- */
    #bg-goal-save,#bg-hook-copy{min-height:46px;border-radius:var(--r,12px)}
  }

  @media (prefers-reduced-motion:reduce){
    .bg-add:active,.btn.bg-add:active{transform:none}
  }