/* =====================================================================================================================
   Budgets 2.0 (the /admin/budgets area): the hub, the automations page, the dialogs, the one-tap Add to budget chip and
   the mounts on other pages. Builds on the Reports primitives (rp-*, rc-*) and adds the budgets' own fuchsia tokens
   (--bg-*). Tones reuse --rp-positive / --rp-negative / --rp-caution; people reuse --rp-you / --rp-partner. Phone first;
   the rail moves beside the lines from 1100px. Dark through [data-bs-theme="dark"].
   ===================================================================================================================== */

:root {
    --bg-icon: #C026D3;
    --bg-icon-bg: #FAE8FF;
    --bg-badge: #FAE8FF;
    --bg-badge-text: #A21CAF;
    --bg-hero-border: #EBC9F2;
    --bg-hero-bg: linear-gradient(158deg, #FBEAFF 0%, #F3F0FF 45%, #FFFFFF 100%);
    --bg-hero-text: var(--rp-text, #0B0F19);
    --bg-hero-muted: var(--rp-muted, #565973);
    --bg-soft: #FDF4FF;
    --bg-ring-track: rgba(192, 38, 211, .14);
    --bg-glass: rgba(255, 255, 255, .72);
    --bg-glass-border: rgba(192, 38, 211, .14);
    --bg-track: var(--rp-track, #EEF0F8);
    --bg-today: #0B0F19;
    --bg-projected: #7C3AED;
    --bg-ai-soft: #F5F3FF;
    --bg-shadow: 0 10px 30px rgba(120, 40, 140, .08);
    --bg-radius: 16px;
}

[data-bs-theme="dark"] {
    --bg-icon: #E879F9;
    --bg-icon-bg: #3B1F44;
    --bg-badge: #3B1F44;
    --bg-badge-text: #F5D0FE;
    --bg-hero-border: #4A2A55;
    --bg-hero-bg: linear-gradient(158deg, #2A1733 0%, #171426 45%, #0B0F19 100%);
    --bg-hero-text: #F3F4FA;
    --bg-hero-muted: #B4B7C9;
    --bg-soft: #2A1733;
    --bg-ring-track: rgba(232, 121, 249, .18);
    --bg-glass: rgba(255, 255, 255, .06);
    --bg-glass-border: rgba(255, 255, 255, .10);
    --bg-today: #F3F4FA;
    --bg-projected: #C4B5FD;
    --bg-ai-soft: #1F1A36;
    --bg-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

/* ---- Page frame ------------------------------------------------------------------------------------------------- */
.bg-page { --rp-tone: var(--bg-icon); }
.bg-page .rc-eyebrow.bg-eyebrow { color: var(--bg-icon); }
.bg-page .rc-eyebrow.bg-eyebrow i { color: var(--bg-icon); }
.bg-head-actions { gap: .5rem; }
.bg-plan-select.tx-field-box { width: min(260px, 100%); flex: 0 1 260px; }
.bg-plan-select.txc-field .e-input-group.e-control-wrapper.txc-combo,
.bg-plan-select.txc-field .e-input-group.e-control-wrapper.txc-combo input.e-input { min-height: 38px; height: 38px; font-size: 14px; }
.bg-scope-seg { max-width: 100%; }
.bg-ask-btn { color: var(--rp-accent); border-color: color-mix(in srgb, var(--rp-accent) 40%, transparent); }
.bg-menu-seg { margin-bottom: .25rem; }

/* The toolbar under the Budget / Automations menu: the plan controls on the left, the page's actions on the right with
   "How this page works" last. Each side wraps on its own; under 768px the sides stack and fill the width. */
.bg-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin: .5rem 0 1rem; min-width: 0; }
.bg-toolbar-start,
.bg-toolbar-end { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 0; }
.bg-toolbar-start { flex: 1 1 auto; }
.bg-toolbar-end { flex: 0 1 auto; justify-content: flex-end; margin-left: auto; }
.bg-toolbar a.rc-ghost-btn { text-decoration: none; }
.bg-toolbar .bg-scope-seg { flex: 0 0 auto; }
.bg-toolbar .help-icon-button.rp-page-help {
    display: inline-flex; flex: 0 0 auto; align-items: center; gap: .4rem; height: var(--ci-act-height, 36px); padding: 0 .7rem;
    border-radius: var(--ci-act-radius, 12px); font-size: .8rem; font-weight: 600; line-height: 1; white-space: nowrap;
}
/* Set by js/chipin-layout.js (chipInToolbarFit) when the right side would otherwise wrap under the left: its buttons
   become icons (their titles still name them) so both sides keep one row. */
.bg-toolbar.is-compact .bg-toolbar-end { gap: .4rem; }
.bg-toolbar.is-compact .bg-toolbar-end > :is(.rc-ghost-btn, .rp-btn, .help-icon-button) { width: var(--ci-act-height, 36px); padding: 0; justify-content: center; }
.bg-toolbar.is-compact .bg-toolbar-end > :is(.rc-ghost-btn, .rp-btn, .help-icon-button) > span { display: none; }
@media (max-width: 767.98px) {
    .bg-toolbar-start, .bg-toolbar-end { flex: 1 1 100%; }
    .bg-toolbar-end { justify-content: flex-start; margin-left: 0; }
    .bg-toolbar .bg-scope-seg { flex: 1 1 100%; }
    .bg-toolbar .bg-plan-select.tx-field-box { flex: 1 1 200px; width: auto; }
}
@media (max-width: 575.98px) {
    .bg-toolbar .help-icon-button.rp-page-help { width: var(--ci-act-height, 36px); padding: 0; justify-content: center; margin-left: auto; }
    .bg-toolbar .help-icon-button.rp-page-help > span { display: none; }
}
.bg-banner { margin-bottom: .75rem; }
.bg-skeleton { display: grid; gap: 12px; }
.bg-bone-hero { height: 220px; border-radius: var(--bg-radius); }
.bg-bone-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bg-bone-row .dsh-bone { height: 76px; border-radius: 14px; }
.bg-page .rp-text-positive { color: var(--rp-positive) !important; }
.bg-page .rp-text-negative { color: var(--rp-negative) !important; }
.bg-page .rp-text-caution { color: var(--rp-caution) !important; }
.bg-page .rp-text-neutral { color: var(--rp-muted) !important; }
.bg-section-title { display: flex; align-items: baseline; gap: .5rem; margin: 0; font-size: 15px; font-weight: 700; color: var(--rp-text); }
.bg-section-title small { font-size: 12px; font-weight: 500; color: var(--rp-muted); }
.bg-sub-title { margin: 12px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rp-muted); }

/* ---- Period nav ------------------------------------------------------------------------------------------------- */
.bg-period-nav { display: flex; align-items: center; gap: .5rem; margin: .25rem 0 .75rem; }
.bg-period-title { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.bg-period-title strong { font-size: 17px; font-weight: 700; color: var(--rp-text); }
.bg-period-title .rp-hint { font-size: 12px; }
.bg-plan-settings { margin-left: .25rem; }

/* ---- Hero ------------------------------------------------------------------------------------------------------- */
.bg-hero {
    position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: 1fr; gap: 18px;
    padding: 20px 18px 18px; border-radius: var(--bg-radius);
    border: 1px solid var(--bg-hero-border); background: var(--bg-hero-bg); color: var(--bg-hero-text);
    box-shadow: var(--bg-shadow);
}
.bg-hero-glow { position: absolute; width: 260px; height: 260px; border-radius: 50%; filter: blur(60px); opacity: 0; pointer-events: none; z-index: -1; transition: opacity .3s ease; }
.bg-hero.has-couple .bg-hero-glow { opacity: .35; }
.bg-hero-glow-you { right: -80px; top: -120px; background: var(--rp-you); }
.bg-hero-glow-partner { left: -90px; bottom: -140px; background: var(--rp-partner); }
.bg-hero-wave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 90px; z-index: -1; pointer-events: none; }
.bg-hero-wave-fill { fill: var(--bg-icon); opacity: .06; }
.bg-hero-wave-line { fill: none; stroke: var(--bg-icon); stroke-width: 2; opacity: .35; }
.bg-hero-ring { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bg-hero-ring svg { width: 148px; height: 148px; }
.bg-hero-caption { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bg-hero-muted); }
.bg-ring-track { fill: none; stroke: var(--bg-ring-track); stroke-width: 12; }
.bg-ring-fill { fill: none; stroke: var(--rp-tone, var(--bg-icon)); stroke-width: 12; stroke-linecap: round; transition: stroke-dasharray .6s cubic-bezier(.2, .8, .2, 1); }
.bg-ring-score { font-size: 44px; font-weight: 800; fill: var(--bg-hero-text); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.bg-ring-band { font-size: 11px; font-weight: 700; letter-spacing: .12em; fill: var(--rp-tone, var(--bg-icon)); }
.bg-hero-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bg-hero-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.bg-hero-figure { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bg-hero-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bg-hero-muted); }
.bg-hero-value { font-size: 30px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--bg-hero-text); line-height: 1.1; }
.bg-hero-note { font-size: 12px; color: var(--bg-hero-muted); }
.bg-period { display: flex; flex-direction: column; gap: 6px; }
.bg-period-track { position: relative; height: 12px; border-radius: 999px; background: var(--bg-glass); border: 1px solid var(--bg-glass-border); overflow: visible; }
.bg-period-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--rp-tone, var(--bg-icon)); opacity: .85; transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.bg-period-today { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--bg-today); border-radius: 2px; }
.bg-period-today::after { content: "today"; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bg-hero-muted); white-space: nowrap; }
.bg-period-projected { position: absolute; top: -3px; width: 10px; height: 18px; margin-left: -5px; border-radius: 3px; background: transparent; border: 2px dashed var(--bg-projected); box-sizing: border-box; }
.bg-period-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--bg-hero-muted); }
.bg-hero-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bg-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--bg-glass); border: 1px solid var(--bg-glass-border); backdrop-filter: blur(6px); min-width: 0; }
.bg-tile-label { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--bg-hero-muted); }
.bg-tile-value { font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--bg-hero-text); }
.bg-tile-value small { font-size: 12px; font-weight: 500; color: var(--bg-hero-muted); }
.bg-couple-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; }
.bg-you { color: var(--rp-you); }
.bg-partner { color: var(--rp-partner); }
.bg-couple-bar { position: relative; display: flex; height: 6px; border-radius: 999px; background: var(--rp-track); overflow: hidden; min-width: 40px; }

/* ---- Buckets ---------------------------------------------------------------------------------------------------- */
.bg-buckets { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 10px; margin: 14px 0; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
.bg-bucket {
    display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 12px 10px; text-align: left; cursor: pointer; scroll-snap-align: start;
    border-radius: 14px; border: 1px solid var(--rp-card-border); background: var(--rp-card); color: var(--rp-text); font: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.bg-bucket:hover { border-color: var(--rp-tone); box-shadow: var(--bg-shadow); }
.bg-bucket.is-selected { border-color: var(--rp-tone); background: var(--rp-tone-soft); box-shadow: inset 0 0 0 1px var(--rp-tone); }
.bg-bucket:focus-visible { outline: 2px solid var(--rp-focus); outline-offset: 2px; }
.bg-bucket-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12px; }
.bg-bucket-name { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--rp-text); min-width: 0; }
.bg-bucket-name .tx-glyph { color: var(--rp-tone); font-size: 11px; }
.bg-bucket-state { font-size: 11px; font-weight: 600; color: var(--rp-tone); white-space: nowrap; }
.bg-bucket-value { font-size: 19px; font-weight: 750; font-variant-numeric: tabular-nums; }
.bg-bucket-track { height: 6px; border-radius: 999px; background: var(--bg-track); overflow: hidden; }
.bg-bucket-fill { display: block; height: 100%; border-radius: 999px; background: var(--rp-tone); transition: width .5s ease; }
.bg-bucket-note { font-size: 11px; color: var(--rp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Layout: lines + rail --------------------------------------------------------------------------------------- */
.bg-layout { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.bg-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bg-rail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bg-lines-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.bg-lines-head .rp-seg { margin-left: auto; }
.bg-lines-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.bg-lines { display: flex; flex-direction: column; gap: 10px; }
.bg-lines-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 16px; text-align: center; border-radius: var(--bg-radius); border: 1px dashed var(--rp-card-border); color: var(--rp-muted); }
.bg-lines-empty .tx-glyph { font-size: 22px; color: var(--rp-tone); }
.bg-lines-empty p { margin: 0; font-size: 13px; }
.bg-show-more { align-self: center; margin-top: 4px; }
.bg-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-top: 6px; }
.bg-highlight { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--rp-tone-soft); color: var(--rp-text); font-size: 12.5px; }
.bg-highlight .tx-glyph { color: var(--rp-tone); margin-top: 2px; }
.bg-highlight strong { font-weight: 700; }

/* ---- Line card -------------------------------------------------------------------------------------------------- */
.bg-line {
    position: relative; display: grid; grid-template-columns: 4px 40px minmax(0, 1fr); grid-template-areas: "bar chip main" "bar figures figures" "bar actions actions";
    gap: 8px 12px; padding: 12px 12px 12px 0; border-radius: var(--bg-radius); border: 1px solid var(--rp-card-border); background: var(--rp-card);
    overflow: hidden; transition: box-shadow .2s ease, border-color .2s ease;
}
.bg-line:hover { box-shadow: var(--bg-shadow); }
.bg-line.is-paused { opacity: .62; }
.bg-line.is-highlight { border-color: var(--bg-icon); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg-icon) 25%, transparent); animation: bg-pulse 1.6s ease 1; }
@keyframes bg-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bg-icon) 55%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }
.bg-line.needs-look .bg-line-bar { animation: bg-bar-glow 2.2s ease-in-out infinite; }
@keyframes bg-bar-glow { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 10px 1px color-mix(in srgb, var(--rp-tone) 70%, transparent); } }
.bg-line-bar { grid-area: bar; align-self: stretch; background: var(--rp-tone); border-radius: 0 3px 3px 0; }
.bg-line-chip { grid-area: chip; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--bg-cat, var(--bg-icon)) 16%, transparent); color: var(--bg-cat, var(--bg-icon)); font-size: 15px; }
.bg-line-main { grid-area: main; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.bg-line-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.bg-line-name { font-size: 15px; font-weight: 700; color: var(--rp-text); background: none; border: 0; padding: 0; font-family: inherit; text-align: left; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
button.bg-line-name { cursor: pointer; }
button.bg-line-name:hover { color: var(--bg-icon); text-decoration: underline; }
.bg-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--rp-neutral-soft); color: var(--rp-muted); font-size: 10.5px; font-weight: 650; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.bg-pill .tx-glyph { font-size: 9.5px; }
.bg-pill-matcher { background: var(--bg-badge); color: var(--bg-badge-text); }
.bg-pill-streak { background: var(--rp-gold-soft); color: var(--rp-gold); }
.bg-pill-status { background: var(--rp-tone-soft); color: var(--rp-tone); margin-left: auto; }
.bg-pill-ai { background: var(--rp-ai-grad); color: #FFFFFF; }
.bg-track { position: relative; height: 10px; border-radius: 999px; background: var(--bg-track); overflow: visible; }
/* The painted layer: clipped to the pill so the blended fill and the over hatch keep its rounded ends; the ticks sit outside it. */
.bg-track-paint { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.bg-track-fill { position: absolute; inset: 0 auto 0 0; display: flex; border-radius: inherit; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
/* Past the budget mark: a light hatch over the red that fades in after the seam, so the overage reads without a hard edge. */
.bg-track-over {
    position: absolute; top: 0; bottom: 0; right: 0;
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .30) 0 3px, transparent 3px 7px);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 min(18px, 60%));
    mask-image: linear-gradient(90deg, transparent 0, #000 min(18px, 60%));
}
.bg-track-target { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--rp-text); box-shadow: 0 0 0 2px var(--rp-card); }
.bg-track-today { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--bg-today); border-radius: 2px; opacity: .75; }
.bg-track-projected { position: absolute; top: -2px; width: 8px; height: 14px; margin-left: -4px; border: 2px dashed var(--bg-projected); border-radius: 3px; box-sizing: border-box; }
.bg-track-projected.is-over { border-color: var(--rp-negative); }
.bg-line-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 12px; color: var(--rp-muted); }
.bg-line-sentence { min-width: 0; }
.bg-couple-mini { display: inline-grid; grid-template-columns: auto minmax(40px, 80px) auto; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; }
.bg-line-figures { grid-area: figures; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; padding-left: 52px; }
.bg-line-target { font-size: 17px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--rp-text); }
.bg-line-sub { font-size: 11.5px; color: var(--rp-muted); }
.bg-line-note { font-size: 11px; color: var(--rp-light); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.bg-line-actions { grid-area: actions; display: flex; gap: 6px; padding-left: 52px; }
.bg-line-actions .rp-icon-btn { width: 32px; height: 32px; }
@media (min-width: 720px) {
    .bg-line { grid-template-columns: 4px 40px minmax(0, 1fr) auto auto; grid-template-areas: "bar chip main figures actions"; align-items: center; }
    .bg-line-figures { align-items: flex-end; text-align: right; padding-left: 0; min-width: 110px; }
    .bg-line-note { max-width: 180px; }
    .bg-line-actions { padding-left: 0; opacity: .55; transition: opacity .15s ease; }
    .bg-line:hover .bg-line-actions, .bg-line:focus-within .bg-line-actions { opacity: 1; }
}

/* ---- Rail cards ------------------------------------------------------------------------------------------------- */
.bg-ai-dock .rc-card-body, .bg-ai-dock { --rp-tone: var(--rp-accent); }
.bg-ai-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bg-ai-chip .tx-glyph { color: var(--rp-accent); }
.bg-ai-followups { margin-top: 10px; }
.bg-ai-ask { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.bg-ai-box.tx-field-box { padding: 4px 10px; }
.bg-ai-input.tx-field-textarea { min-height: 128px; max-height: 300px; overflow-y: auto; resize: vertical; font-size: 14px; line-height: 1.45; }
.bg-ai-ask-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bg-ai-status { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 12px; border-radius: 10px; background: var(--bg-ai-soft); color: var(--rp-text); font-size: 12.5px; }
.bg-ai-status .tx-glyph { color: var(--rp-accent); }
.bg-ai-error { margin-top: 10px; }
.bg-ai-answer { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--bg-ai-soft); border: 1px solid color-mix(in srgb, var(--rp-accent) 22%, transparent); }
.bg-ai-question { display: flex; gap: 6px; margin: 0; font-size: 12px; color: var(--rp-muted); font-style: italic; }
.bg-ai-question .tx-glyph { color: var(--rp-accent); margin-top: 2px; }
.bg-ai-headline { margin: 0; font-size: 15px; font-weight: 750; color: var(--rp-text); }
.bg-ai-text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--rp-text); }
.bg-ai-proposal, .bg-ai-whatif { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--rp-card); border: 1px solid var(--rp-card-border); }
.bg-ai-proposal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; }
.bg-ai-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.bg-ai-line { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--rp-tile); font-size: 13px; }
.bg-ai-line.is-add { background: var(--rp-positive-soft); }
.bg-ai-line.is-remove { background: var(--rp-negative-soft); text-decoration: line-through; }
.bg-ai-op { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; background: var(--rp-card); font-size: 10px; color: var(--rp-muted); }
.bg-ai-line-name { display: flex; flex-direction: column; min-width: 0; font-weight: 650; }
.bg-ai-line-name small { font-size: 11px; font-weight: 500; color: var(--rp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-ai-line-amount { display: inline-flex; gap: 6px; align-items: baseline; font-variant-numeric: tabular-nums; }
.bg-ai-line-amount s { color: var(--rp-light); font-size: 11.5px; }
.bg-ai-actions { padding-top: 8px; justify-content: flex-end; }
.bg-ai-whatif-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.bg-ai-whatif-cell { display: grid; grid-template-columns: auto auto auto; grid-template-areas: "label label label" "before arrow after"; gap: 2px 6px; align-items: baseline; padding: 8px 10px; border-radius: 10px; background: var(--rp-tile); font-size: 13px; }
.bg-ai-whatif-cell small { grid-area: label; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rp-muted); }
.bg-ai-whatif-cell i { font-style: normal; color: var(--rp-light); }
.bg-ai-whatif-cell b { font-variant-numeric: tabular-nums; }
.bg-ai-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.bg-ai-feedback { display: inline-flex; gap: 4px; }
.bg-ai-feedback .rp-icon-btn { width: 30px; height: 30px; }
/* The answer reads to the width it's given: in the wide hub rail the what-if figures sit in one row of four, the
   proposal's line changes pair up, and the headline and prose step up a size. */
.bg-ai-answer { container-type: inline-size; }
@container (min-width: 500px) {
    .bg-ai-headline { font-size: 16.5px; }
    .bg-ai-text { font-size: 14px; line-height: 1.55; }
    .bg-ai-whatif-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
    .bg-ai-whatif-cell b { font-size: 14px; }
}
@container (min-width: 580px) {
    .bg-ai-proposal .bg-ai-lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
}

/* Under the lines: what needs a look, the forecast and the budget email side by side at one height (ci-row), two and
   one on a tablet, stacked on a phone. */
.bg-insights { margin-top: 16px; }
.bg-insights > * { grid-column: span 4; }
@media (max-width: 1199.98px) {
    .bg-insights > * { grid-column: span 6; }
    .bg-insights > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
    .bg-insights > *, .bg-insights > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.bg-forecast-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bg-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--rp-tile); border: 1px solid var(--rp-tile-border); min-width: 0; }
.bg-stat-label { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--rp-muted); }
.bg-stat-value { font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--rp-text); }
.bg-stat-value small { font-size: 12px; font-weight: 500; color: var(--rp-muted); }
.bg-stat-note { font-size: 11.5px; color: var(--rp-muted); }
.bg-upcoming { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bg-upcoming-item { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; background: var(--rp-tile); }
.bg-upcoming-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; background: var(--bg-badge); color: var(--bg-badge-text); line-height: 1; }
.bg-upcoming-date b { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; }
.bg-upcoming-date span { font-size: 17px; font-weight: 750; }
.bg-upcoming-text { display: flex; flex-direction: column; min-width: 0; }
.bg-upcoming-text strong { font-size: 13px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-upcoming-text small { font-size: 11px; color: var(--rp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-upcoming-amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.bg-look-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bg-look-item { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--rp-tile-border); background: var(--rp-tile); color: var(--rp-text); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.bg-look-item:hover { border-color: var(--rp-tone); background: var(--rp-tone-soft); }
.bg-look-item:focus-visible { outline: 2px solid var(--rp-focus); outline-offset: 2px; }
.bg-look-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rp-tone); box-shadow: 0 0 0 3px var(--rp-tone-soft); }
.bg-look-glyph { display: inline-flex; width: 14px; justify-content: center; color: var(--rp-tone); font-size: 12px; }
.bg-look-text { display: flex; flex-direction: column; min-width: 0; }
.bg-look-text strong { font-size: 13px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-look-text small { font-size: 11px; color: var(--rp-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-look-figure { font-size: 11px; font-weight: 700; color: var(--rp-tone); white-space: nowrap; }
.bg-digest-form { display: flex; flex-direction: column; gap: 12px; }
.bg-digest-bones { display: grid; gap: 8px; }
.bg-digest-bones .dsh-bone { height: 36px; border-radius: 10px; }

/* ---- Templates and the empty state ------------------------------------------------------------------------------ */
.bg-empty { display: flex; flex-direction: column; gap: 14px; }
.bg-empty-hero { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 22px 20px; border-radius: var(--bg-radius); border: 1px solid var(--bg-hero-border); background: var(--bg-hero-bg); color: var(--bg-hero-text); box-shadow: var(--bg-shadow); }
.bg-empty-icon { display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; border-radius: 16px; background: var(--bg-icon-bg); color: var(--bg-icon); font-size: 22px; }
.bg-empty-copy h2 { margin: 0 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.bg-empty-copy p { margin: 0; font-size: 13.5px; color: var(--bg-hero-muted); max-width: 62ch; }
.bg-empty-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bg-empty-upsell { max-width: 420px; }
.bg-empty-ai { max-width: 720px; }
@media (min-width: 720px) { .bg-empty-hero { grid-template-columns: auto 1fr; grid-template-areas: "icon copy" "actions actions"; } .bg-empty-icon { grid-area: icon; } .bg-empty-copy { grid-area: copy; } .bg-empty-actions { grid-area: actions; } }
.bg-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.bg-template { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--bg-radius); border: 1px solid var(--rp-card-border); background: var(--rp-card); transition: box-shadow .2s ease, border-color .2s ease; }
.bg-template:hover { box-shadow: var(--bg-shadow); border-color: var(--rp-tone); }
.bg-template-head { display: flex; gap: 10px; align-items: flex-start; }
.bg-template-icon { display: inline-flex; width: 38px; height: 38px; flex: 0 0 auto; align-items: center; justify-content: center; border-radius: 12px; background: var(--rp-tone-soft); color: var(--rp-tone); font-size: 15px; }
.bg-template-copy { min-width: 0; }
.bg-template-title { margin: 0; font-size: 15px; font-weight: 750; color: var(--rp-text); }
.bg-template-desc { margin: 2px 0 0; font-size: 12.5px; color: var(--rp-muted); }
.bg-template-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.bg-template-lines li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; border-radius: 8px; background: var(--rp-tile); }
.bg-template-lines b { font-variant-numeric: tabular-nums; }
.bg-template-more { color: var(--rp-muted); justify-content: center !important; }
.bg-template-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; }

/* ---- Automations ------------------------------------------------------------------------------------------------ */
.bg-compose-result { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--rp-tone-soft); border: 1px solid color-mix(in srgb, var(--rp-tone) 25%, transparent); }
.bg-assumptions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--rp-muted); }
.bg-assumptions li { display: flex; gap: 6px; align-items: flex-start; }
.bg-assumptions .tx-glyph { margin-top: 3px; color: var(--rp-tone); }
/* Composer questions: picks from the user's own lines (suggested first), an optional typed value, what's settled so far. */
.bg-compose-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--rp-muted); }
.bg-compose-steps li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.bg-compose-steps .tx-glyph { color: var(--rp-positive, var(--rp-tone)); font-size: 10px; }
.bg-compose-steps strong { color: var(--rp-text); font-weight: 650; }
.bg-compose-sofar { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: 12.5px; color: var(--rp-muted); }
.bg-compose-sofar .tx-glyph { margin-top: 3px; color: var(--rp-tone); }
.bg-compose-question { font-weight: 650; }
/* The composer's picks: a card each, with an icon chip (a line's own category icon and color, else the trigger's or
   the action's), the label and its detail, and a "Best match" badge on the assistant's suggestion. "Don't move money"
   (leave this part out) is a quieter dashed card with a stop sign. Picks that don't fit as cards are in an icon
   dropdown (ChipSelect) beneath. */
.bg-compose-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.bg-compose-option {
    --bg-opt: var(--rp-tone);
    position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 12px; border-radius: 14px;
    border: 1px solid var(--rp-card-border); background: var(--rp-card); color: var(--rp-text); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.bg-compose-option:hover:not(:disabled), .bg-compose-option:focus-visible {
    border-color: color-mix(in srgb, var(--bg-opt) 60%, transparent); background: color-mix(in srgb, var(--bg-opt) 7%, var(--rp-card));
    box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--bg-opt) 70%, transparent); transform: translateY(-1px); outline: none;
}
.bg-compose-option:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--bg-opt) 45%, transparent); }
.bg-compose-option:active:not(:disabled) { transform: translateY(0); }
.bg-compose-option:disabled { opacity: .55; cursor: default; }
.bg-compose-option-chip {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px;
    background: color-mix(in srgb, var(--bg-opt) 15%, transparent); color: var(--bg-opt); font-size: 14px;
}
.bg-compose-option-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.bg-compose-option-label { font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; }
.bg-compose-option-detail { font-size: 11.5px; line-height: 1.3; color: var(--rp-muted); overflow-wrap: anywhere; }
.bg-compose-option.is-suggested {
    padding-top: 16px; border-color: color-mix(in srgb, var(--bg-opt) 55%, transparent);
    background: linear-gradient(135deg, color-mix(in srgb, var(--bg-opt) 10%, var(--rp-card)), var(--rp-card) 70%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg-opt) 12%, transparent);
}
.bg-compose-option-badge {
    position: absolute; top: -9px; left: 12px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
    background: var(--bg-opt); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
    box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--bg-opt) 70%, transparent);
}
.bg-compose-option-badge .tx-glyph { font-size: 9px; }
.bg-compose-option.is-drop {
    --bg-opt: var(--rp-muted); border-style: dashed; border-color: color-mix(in srgb, var(--rp-muted) 45%, transparent);
    background: repeating-linear-gradient(-45deg, transparent 0 8px, color-mix(in srgb, var(--rp-muted) 5%, transparent) 8px 16px), var(--rp-card);
}
.bg-compose-option.is-drop .bg-compose-option-chip { background: color-mix(in srgb, var(--rp-negative, #e5484d) 12%, transparent); color: var(--rp-negative, #e5484d); }
.bg-compose-option.is-drop .bg-compose-option-label { color: var(--rp-text); }
.bg-compose-option.is-drop:hover:not(:disabled), .bg-compose-option.is-drop:focus-visible {
    --bg-opt: var(--rp-negative, #e5484d); border-style: solid; background: color-mix(in srgb, var(--rp-negative, #e5484d) 5%, var(--rp-card));
}
.bg-compose-more { width: 100%; }
.bg-compose-more .e-input-group, .bg-compose-more .e-input-group.e-control-wrapper { border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .bg-compose-option { transition: none; } .bg-compose-option:hover:not(:disabled) { transform: none; } }
.bg-compose-custom { display: flex; align-items: center; gap: 8px; }
.bg-compose-custom-box { flex: 1 1 auto; min-width: 0; }
.bg-automations { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bg-automation { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--bg-radius); border: 1px solid var(--rp-card-border); background: var(--rp-card); }
.bg-automation.is-off { opacity: .7; }
.bg-automation-switch { margin: 0; }
.bg-automation-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bg-automation-name { display: flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 700; color: var(--rp-text); }
.bg-automation-summary { font-size: 13px; color: var(--rp-text); }
.bg-automation-actions { display: flex; gap: 6px; }
.bg-about-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--rp-text); }
.bg-about-list li { display: flex; gap: 10px; align-items: flex-start; }
.bg-about-list .tx-glyph { margin-top: 3px; color: var(--bg-icon); }
.bg-action-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bg-action-card { display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--tx-tile-border); background: var(--tx-page); }
.bg-action-head { display: flex; align-items: center; gap: 8px; }
.bg-action-head > .bg-select { flex: 1 1 auto; }
.bg-add-action { align-self: flex-start; color: var(--tx-primary); }

/* ---- Dialogs and forms: the site's standard popup (tx-dialog) ----------------------------------------------------
   Head, a scrolling body and a pinned footer, sized to the content (no fixed height) and capped at the viewport, so
   short forms don't leave a gap and long ones scroll inside. The footer has its own padding and top rule, so the
   buttons never touch the rounded corners. Fields are the transaction popup's tx-field boxes; selects are BudgetSelect
   (the Category combo box); switches are tx-switch; buttons are tx-btn. */
.e-dialog.bg-dialog .e-dlg-content { height: auto; }
.bg-dlg { display: flex; flex-direction: column; min-height: 0; max-height: calc(100dvh - 2rem); background: var(--tx-page); }
.bg-dlg-head { flex: 0 0 auto; }
.bg-dlg-head .bg-dlg-help, .bg-qa-head .bg-dlg-help { margin-left: auto; flex: 0 0 auto; }
.bg-dlg-head .bg-dlg-help + .rc-icon-btn, .bg-qa-head .bg-dlg-help + .rc-icon-btn { margin-left: 0; }
.bg-dlg-copy { display: flex; flex-direction: column; min-width: 0; }
.bg-dlg-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 18px 18px; }
.bg-dlg-foot { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 18px 18px; border-top: 1px solid var(--tx-border); background: var(--tx-page); }
.bg-dlg-foot-spacer { flex: 1 1 auto; }
.bg-dlg-foot > .tx-btn-secondary,
.bg-dlg-foot > .tx-btn-primary { min-width: 120px; }
@media (max-width: 640px) {
    .e-dialog.tx-dialog-full.bg-dialog .bg-dlg { height: 100dvh; max-height: 100dvh; }
}
@media (max-width: 480px) {
    .bg-dlg-foot > .tx-btn-secondary,
    .bg-dlg-foot > .tx-btn-primary { flex: 1 1 0; min-width: 0; }
    .bg-dlg-foot-spacer { flex-basis: 100%; height: 0; }
}
.bg-chip-icon { background: var(--bg-icon-bg); color: var(--bg-icon); }
.bg-form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.bg-form-section { display: flex; flex-direction: column; gap: 12px; }
.bg-form-title { display: flex; align-items: center; gap: 8px; }
.bg-form-title .tx-glyph { font-size: 12px; color: var(--bg-icon); }
.bg-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.bg-field-glyph { flex: 0 0 auto; font-size: 13px; color: var(--tx-primary); }
.tx-field-box.bg-money { gap: 6px; }
.bg-money-sign { flex: 0 0 auto; font-family: var(--tx-font); font-weight: 600; font-size: 15px; color: var(--tx-muted); }
.bg-dlg .tx-field-input,
.bg-qa-sheet .tx-field-input,
.bg-digest-form .tx-field-input { min-width: 0; text-overflow: ellipsis; }
.bg-dlg .tx-field-input[type="date"] { cursor: text; }
.bg-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.bg-switch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bg-switch-row .e-switch-wrapper { flex: 0 0 auto; }
.bg-form-error { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--rp-negative-soft); color: var(--rp-negative); font-size: 13px; line-height: 1.4; }
.bg-btn-danger.tx-btn { color: var(--rp-negative); }
.bg-inline-link { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--tx-primary); font-family: var(--tx-font); font-weight: 600; font-size: 13px; cursor: pointer; }
.bg-inline-link:hover { text-decoration: underline; }
.bg-form-more summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--tx-muted); }
.bg-form-more summary::-webkit-details-marker { display: none; }
.bg-form-more summary .tx-glyph { color: var(--bg-icon); }
.bg-form-more[open] summary { margin-bottom: 12px; }
.bg-form-more > .bg-field-grid { margin-bottom: 12px; }
.bg-json.tx-field-textarea { min-height: 120px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.bg-move-preview { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--bg-soft); color: var(--tx-text); white-space: normal; }

/* ---- BudgetSelect: the Category combo box for any list ---------------------------------------------------------- */
.bg-select.tx-field-box { width: 100%; min-width: 0; }
.bg-select.txc-field .e-input-group.e-control-wrapper.txc-combo { cursor: pointer; }
.bg-select.txc-field .e-input-group.e-control-wrapper.txc-combo input.e-input { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.e-ddl.e-popup.bg-select-combo .txc-item { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.e-ddl.e-popup.bg-select-combo .txc-item-glyph { flex: 0 0 24px; }
.e-ddl.e-popup.bg-select-combo .txc-item-label { flex: 1 1 auto; }
.e-ddl.e-popup.bg-select-combo .txc-item-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-select-hint { flex: 0 0 auto; margin-left: auto; padding-left: 10px; font-weight: 500; font-size: 12px; color: var(--tx-muted); }

/* ---- Add to budget: chip and sheet ------------------------------------------------------------------------------ */
.bg-qa { position: relative; display: inline-flex; align-items: center; vertical-align: middle; }
.bg-qa-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--bg-icon) 35%, transparent); background: var(--bg-badge); color: var(--bg-badge-text); font: inherit; font-size: 11px; font-weight: 650; cursor: pointer; white-space: nowrap; line-height: 1.4; transition: background .15s ease, border-color .15s ease; }
.bg-qa-chip .tx-glyph { font-size: 10px; color: var(--bg-icon); }
.bg-qa-chip:hover, .bg-qa.is-open .bg-qa-chip { border-color: var(--bg-icon); background: color-mix(in srgb, var(--bg-icon) 18%, transparent); }
.bg-qa-chip:focus-visible { outline: 2px solid var(--rp-focus); outline-offset: 1px; }
.bg-qa-chip.is-covered { background: var(--rp-positive-soft); color: var(--rp-positive); border-color: color-mix(in srgb, var(--rp-positive) 35%, transparent); }
.bg-qa-chip.is-covered .tx-glyph { color: var(--rp-positive); }
.bg-qa-chip.is-compact { padding: 0; width: 26px; height: 26px; justify-content: center; }
.bg-qa-backdrop { position: fixed; inset: 0; z-index: 1049; background: transparent; }
.bg-qa-sheet {
    position: absolute; z-index: 1050; top: calc(100% + 8px); right: 0; width: min(360px, calc(100vw - 24px));
    display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px;
    border: 1px solid var(--bg-hero-border); background: var(--bg-hero-bg); color: var(--bg-hero-text); box-shadow: var(--rp-shadow-pop);
    text-align: left; font-size: 13px; cursor: default;
}
.bg-qa-head { display: flex; align-items: center; gap: 10px; }
.bg-qa-body { display: contents; }
.bg-qa-inline { display: flex; flex-direction: column; gap: 10px; text-align: left; font-size: 13px; }
.bg-qa-icon { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 11px; background: var(--bg-icon-bg); color: var(--bg-icon); flex: 0 0 auto; }
.bg-qa-titles { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.bg-qa-titles strong { font-size: 14.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-qa-titles small { font-size: 11px; color: var(--bg-hero-muted); }
.bg-qa-seg { width: 100%; }
.bg-qa-bones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bg-qa-bones .dsh-bone { height: 52px; border-radius: 12px; }
.bg-qa-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bg-qa-stat { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; background: var(--bg-glass); border: 1px solid var(--bg-glass-border); }
.bg-qa-stat small { font-size: 10px; color: var(--bg-hero-muted); }
.bg-qa-stat b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bg-qa-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bg-qa-covered { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--bg-glass); border: 1px solid var(--bg-glass-border); }
.bg-qa-covered p { margin: 0; font-size: 13px; }
.bg-qa-covered .bg-pill-status { align-self: flex-start; margin-left: 0; }
.bg-qa-covered .tx-btn { align-self: flex-start; text-decoration: none; }
.bg-qa-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.bg-qa-actions .tx-btn { text-decoration: none; }
@media (max-width: 560px) {
    .bg-qa-sheet { position: fixed; top: auto; right: 12px; left: 12px; bottom: 12px; width: auto; max-height: calc(100dvh - 24px); overflow: auto; }
}

/* ---- Mounts on other pages -------------------------------------------------------------------------------------- */
.qc-cell-budget { margin-left: 4px; }

/* ---- Transactions: the Budget column ---------------------------------------------------------------------------- */
/* A chip per row saying where the transaction lands (the line, colored by it, with that line's percent used as a ring),
   and a popover anchored to it (position: fixed, placed by js/chipin-popover.js so the grid cell can't clip it). */
.bcv { position: relative; display: inline-flex; max-width: 100%; vertical-align: middle; }
.bcv-empty { display: inline-block; width: 1px; height: 1px; }
.bcv-chip {
    --bcv-c: var(--bg-icon);
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 28px; padding: 0 10px 0 4px; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--bcv-c) 38%, transparent); background: color-mix(in srgb, var(--bcv-c) 11%, transparent);
    color: var(--rp-text); font-family: inherit; font-size: 12px; font-weight: 650; line-height: 1; white-space: nowrap; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.bcv-chip:hover, .bcv-chip:focus-visible, .bcv.is-open > .bcv-chip {
    background: color-mix(in srgb, var(--bcv-c) 20%, transparent); border-color: color-mix(in srgb, var(--bcv-c) 60%, transparent);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--bcv-c) 22%, transparent); outline: none; transform: translateY(-1px);
}
.bcv-chip:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bcv-c) 35%, transparent); }
.bcv-chip-icon {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
    background: color-mix(in srgb, var(--bcv-c) 24%, transparent); color: var(--bcv-c); font-size: 10px;
}
.bcv-chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bcv-ring {
    flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%;
    background: conic-gradient(var(--rp-tone, var(--bcv-c)) var(--p, 0%), color-mix(in srgb, var(--rp-text) 14%, transparent) 0);
    -webkit-mask: radial-gradient(circle, transparent 3.5px, #000 4px); mask: radial-gradient(circle, transparent 3.5px, #000 4px);
}
.bcv-ring.rp-tone-positive { --rp-tone: var(--rp-positive); }
.bcv-chip-pct { flex: 0 0 auto; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--rp-muted); }
.bcv-chip.rp-tone-negative .bcv-chip-pct { color: var(--rp-negative); }
.bcv-chip.rp-tone-caution .bcv-chip-pct { color: var(--rp-caution); }
.bcv-chip-more { flex: 0 0 auto; padding: 2px 6px; border-radius: 999px; background: color-mix(in srgb, var(--bcv-c) 22%, transparent); color: var(--bcv-c); font-size: 10px; font-weight: 750; }
.bcv-chip.is-refund { --bcv-c: var(--rp-positive); }
.bcv-chip.is-flex-pool { --bcv-c: var(--bg-icon); }
/* Unbudgeted: an invitation, not a status. */
.bcv-chip.is-unbudgeted { border-style: dashed; background: transparent; color: var(--bg-icon); padding-left: 6px; }
.bcv-chip.is-unbudgeted .bcv-chip-icon { width: 18px; height: 18px; background: var(--bg-icon); color: #FFFFFF; font-size: 9px; }
/* Not counted, pending, outside the plan: quiet, still tappable for the reason. */
.bcv-chip.is-not-counted, .bcv-chip.is-pending, .bcv-chip.is-outside {
    --bcv-c: var(--rp-muted); border-color: transparent; background: transparent; color: var(--rp-muted); font-weight: 600; padding-left: 2px;
}
.bcv-chip.is-not-counted .bcv-chip-icon, .bcv-chip.is-pending .bcv-chip-icon, .bcv-chip.is-outside .bcv-chip-icon { background: var(--rp-neutral-soft); }
.bcv-chip.is-loading { width: 120px; padding: 0; border: 0; background: none; cursor: default; }
.bcv-bone { display: block; width: 100%; height: 22px; border-radius: 999px; background: linear-gradient(90deg, var(--rp-neutral-soft) 0%, color-mix(in srgb, var(--rp-neutral-soft) 40%, transparent) 50%, var(--rp-neutral-soft) 100%); background-size: 200% 100%; animation: bcv-shimmer 1.4s ease-in-out infinite; }
@keyframes bcv-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.bcv-backdrop { position: fixed; inset: 0; z-index: 1059; background: transparent; cursor: default; }
.bcv-pop {
    position: absolute; z-index: 1060; top: calc(100% + 8px); left: 0; width: min(388px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto;
    display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 18px;
    border: 1px solid var(--bg-hero-border); background: var(--bg-hero-bg); color: var(--bg-hero-text); box-shadow: var(--rp-shadow-pop);
    text-align: left; font-size: 13px; line-height: 1.4; white-space: normal; cursor: default; outline: none;
    animation: bcv-pop-in .16s cubic-bezier(.2, .8, .2, 1);
}
/* Placed by js/chipin-popover.js: moved to <body> and fixed to the viewport so the grid cell can't clip or restyle it,
   capped to the room on its side and scrolled inside when taller (without the script it sits under the chip). */
.bcv-pop.is-placed { position: fixed; visibility: hidden; overscroll-behavior: contain; }
.bcv-pop > * { flex-shrink: 0; }
.bcv-pop.is-detached .bcv-pop-arrow { display: none; }
.bcv-pop::-webkit-scrollbar { width: 8px; }
.bcv-pop::-webkit-scrollbar-thumb { border-radius: 8px; background: color-mix(in srgb, var(--bg-hero-text) 18%, transparent); }
@keyframes bcv-pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.bcv-pop-arrow {
    position: absolute; top: -7px; left: calc(var(--pop-arrow-x, 24px) - 7px); width: 14px; height: 14px; transform: rotate(45deg);
    background: var(--bg-hero-bg); border-left: 1px solid var(--bg-hero-border); border-top: 1px solid var(--bg-hero-border); border-radius: 3px 0 0 0;
}
.bcv-pop.is-above .bcv-pop-arrow { top: auto; bottom: -7px; border: 0; border-right: 1px solid var(--bg-hero-border); border-bottom: 1px solid var(--bg-hero-border); border-radius: 0 0 3px 0; }
.bcv-head { display: flex; align-items: center; gap: 10px; }
.bcv-head-icon {
    --bcv-c: var(--bg-icon);
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px;
    background: color-mix(in srgb, var(--bcv-c) 18%, transparent); color: var(--bcv-c); font-size: 15px;
}
.bcv-head-icon.is-refund { --bcv-c: var(--rp-positive); }
.bcv-head-icon.is-not-counted, .bcv-head-icon.is-pending, .bcv-head-icon.is-outside { --bcv-c: var(--rp-muted); }
.bcv-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.bcv-titles strong { font-size: 14.5px; font-weight: 750; line-height: 1.25; }
.bcv-titles small { font-size: 11px; color: var(--bg-hero-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcv-body { display: flex; flex-direction: column; gap: 10px; }
.bcv-line { display: flex; flex-direction: column; gap: 9px; padding: 11px 12px; border-radius: 14px; background: var(--bg-glass); border: 1px solid var(--bg-glass-border); }
.bcv-line-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
.bcv-line-chip { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px; background: color-mix(in srgb, var(--bg-cat, var(--bg-icon)) 18%, transparent); color: var(--bg-cat, var(--bg-icon)); font-size: 12px; }
.bcv-line-titles { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.bcv-line-titles b { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcv-line-titles small { font-size: 10.5px; color: var(--bg-hero-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcv-line .bg-pill-status { margin-left: 0; flex: 0 0 auto; }
/* This purchase, lit inside the line's bar. */
.bcv-slice {
    position: absolute; top: 0; bottom: 0; border-radius: 999px; min-width: 4px;
    background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .62) 0 2px, rgba(255, 255, 255, .18) 2px 5px);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .9), 0 0 10px 1px color-mix(in srgb, var(--bg-cat, var(--bg-icon)) 70%, transparent);
    animation: bcv-slice-glow 1.8s ease-in-out 2;
}
@keyframes bcv-slice-glow { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.bcv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.bcv-stat { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 7px 9px; border-radius: 10px; background: color-mix(in srgb, var(--bg-hero-text) 5%, transparent); }
.bcv-stat small { font-size: 10px; font-weight: 650; letter-spacing: .02em; text-transform: uppercase; color: var(--bg-hero-muted); }
.bcv-stat b { font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bcv-stat em { font-size: 10.5px; font-style: normal; color: var(--bg-hero-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcv-stat.rp-tone-negative b { color: var(--rp-negative); }
.bcv-stat.rp-tone-positive b { color: var(--rp-positive); }
.bcv-stat.is-this { background: color-mix(in srgb, var(--bg-cat, var(--bg-icon)) 14%, transparent); }
.bcv-stat.is-this b { color: var(--bg-cat, var(--bg-icon)); }
.bcv-detail { margin: 0; font-size: 12.5px; color: var(--bg-hero-muted); }
/* The next steps: a quiet tonal button in the Budgets hue (open the line) and a ghost one (change the category). Text
   colors are the area's badge text, readable on the popover in both themes; links in a grid cell can't recolor them. */
.bcv-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.bcv-btn {
    display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; height: 34px; padding: 0 13px;
    border: 1px solid transparent; border-radius: 11px; font-family: inherit; font-size: 12.5px; font-weight: 650; line-height: 1;
    text-decoration: none !important; white-space: nowrap; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s ease;
}
.bcv-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bcv-btn .tx-glyph, .bcv-btn i { flex: 0 0 auto; font-size: 11.5px; }
.bcv-btn:active { transform: scale(.98); }
.bcv-btn:focus-visible { outline: 2px solid var(--bg-icon); outline-offset: 2px; }
.bcv-btn.bcv-btn-primary,
.bcv-btn.bcv-btn-primary:visited {
    flex: 1 1 auto; justify-content: center;
    background: color-mix(in srgb, var(--bg-icon) 11%, transparent); border-color: color-mix(in srgb, var(--bg-icon) 30%, transparent);
    color: var(--bg-badge-text);
}
.bcv-btn.bcv-btn-primary .tx-glyph, .bcv-btn.bcv-btn-primary i { color: var(--bg-icon); }
.bcv-btn.bcv-btn-primary:hover { background: color-mix(in srgb, var(--bg-icon) 18%, transparent); border-color: color-mix(in srgb, var(--bg-icon) 48%, transparent); color: var(--bg-badge-text); }
.bcv-btn.bcv-btn-ghost { background: transparent; border-color: var(--bg-glass-border); color: var(--bg-hero-text); }
.bcv-btn.bcv-btn-ghost .tx-glyph, .bcv-btn.bcv-btn-ghost i { color: var(--bg-hero-muted); }
.bcv-btn.bcv-btn-ghost:hover { background: color-mix(in srgb, var(--bg-hero-text) 6%, transparent); border-color: color-mix(in srgb, var(--bg-hero-text) 22%, transparent); }
.bcv-link {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 0; border: 0; background: none;
    font-family: inherit; font-size: 12.5px; font-weight: 650; color: var(--bg-icon); text-decoration: none; cursor: pointer;
}
.bcv-link:hover, .bcv-link:focus-visible { text-decoration: underline; outline: none; }
.bcv-more { display: flex; flex-direction: column; gap: 8px; padding-top: 2px; }
.bcv-add { display: flex; flex-direction: column; gap: 10px; padding: 11px 12px; border-radius: 14px; background: var(--bg-glass); border: 1px solid var(--bg-glass-border); }
.bcv-foot { display: flex; align-items: center; gap: 6px; padding-top: 9px; border-top: 1px solid var(--bg-glass-border); font-size: 11px; color: var(--bg-hero-muted); }
.bcv-foot > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcv-foot a { margin-left: auto; color: var(--bg-icon); font-weight: 650; text-decoration: none; white-space: nowrap; }
.bcv-foot a:hover { text-decoration: underline; }
@media (max-width: 560px) {
    .bcv-backdrop { background: rgba(11, 15, 25, .35); }
    .bcv-pop, .bcv-pop.is-placed { position: fixed; top: auto !important; left: 12px !important; right: 12px; bottom: 12px; width: auto; max-height: calc(100dvh - 24px); }
    .bcv-pop-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .bcv-chip, .bcv-pop, .bcv-slice, .bcv-bone { transition: none; animation: none; }
}
.qc-option-budget { cursor: default; }
.qc-chip-budget { background: var(--bg-icon-bg) !important; color: var(--bg-icon) !important; }
.qc-budget-chip, .rt-budget-chip { margin-left: auto; }
.rt-budget-row { cursor: default; }
.rt-budget-badge { background: var(--bg-icon-bg) !important; color: var(--bg-icon) !important; }
.rc-budget-chip { margin-left: 6px; align-self: center; }
.rp-breakdown-budget { margin-left: 6px; align-self: center; }
.rp-drill-budget { margin-right: 4px; }
.rt-foot-budget { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font-size: 12px; color: var(--rp-muted, #565973); }
.rt-foot-budget-text { white-space: nowrap; }
.admin-nav-budgets .bx { color: inherit; }
.fin-preview--bud2 .fin-bud-name { text-decoration: none; color: inherit; }
.fin-preview--bud2 .fin-bud-name:hover { text-decoration: underline; }

/* ---- Breakpoints ------------------------------------------------------------------------------------------------ */
@media (min-width: 640px) {
    .bg-hero { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ring main" "tiles tiles"; }
    .bg-hero-ring { grid-area: ring; }
    .bg-hero-main { grid-area: main; }
    .bg-hero-tiles { grid-area: tiles; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .bg-forecast-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
    .bg-layout { grid-template-columns: minmax(0, 1fr) 360px; }
    .bg-layout-automations { grid-template-columns: minmax(0, 1fr) 320px; }
    .bg-rail { position: sticky; top: 76px; }
    /* The hub: the assistant gets a wide rail (about a third of the page, never under 360px or over 640px) so its
       answers, proposals and what-ifs read at full size; it rides along as the lines scroll and never runs past the
       window: a long answer scrolls inside the panel, the question box stays above it and a proposal's Apply / Dismiss
       pin to the foot of the answer while its changes scroll. On a short window the whole panel scrolls instead. */
    .bg-page-hub .bg-layout { grid-template-columns: minmax(0, 1fr) clamp(360px, 36%, 640px); }
    .bg-hero { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ring main tiles"; }
    .bg-hero-tiles { grid-template-columns: repeat(2, minmax(150px, 1fr)); align-content: center; }
}
@media (min-width: 1100px) and (min-height: 640px) {
    .bg-ai-rail .bg-ai-dock { display: flex; flex-direction: column; max-height: calc(100vh - 92px); }
    .bg-ai-rail .bg-ai-dock > .rc-card-body { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
    .bg-ai-rail .bg-ai-dock > .rc-card-body > * { flex: 0 0 auto; }
    .bg-ai-rail .bg-ai-dock > .rc-card-body > .bg-ai-answer { flex: 0 1 auto; min-height: 200px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
    .bg-ai-rail .bg-ai-proposal .bg-ai-actions {
        position: sticky;
        bottom: 0;
        z-index: 1;
        margin: 0 -12px -10px;
        padding: 10px 12px;
        border-top: 1px solid var(--rp-card-border);
        border-radius: 0 0 12px 12px;
        background: var(--rp-card);
    }
}
@media (prefers-reduced-motion: reduce) {
    .bg-ring-fill, .bg-period-fill, .bg-track-fill, .bg-bucket-fill, .bg-line, .bg-template, .bg-bucket { transition: none; }
    .bg-line.is-highlight { animation: none; }
}

/* ---- Key insights (under the heading) and the paused state ------------------------------------------------------ */
/* Pills carry the plan's key facts (health band, lines over / at risk / nearing, pace) instead of one muted sentence;
   a paused plan gets a solid amber PAUSED pill, a hatched amber banner above the period and a dashed frame on the hero. */
.bg-insights { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; min-width: 0; }
.bg-insight-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bg-insight-sentence { margin: 0; font-size: 12.5px; color: var(--rp-muted); }
.bg-pill {
    --rp-tone: var(--rp-muted); --rp-tone-soft: var(--rp-neutral-soft);
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--rp-tone) 38%, transparent); background: var(--rp-tone-soft); color: var(--rp-tone);
    font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap;
}
.bg-pill.rp-tone-positive { --rp-tone: var(--rp-positive); --rp-tone-soft: var(--rp-positive-soft); }
.bg-pill.rp-tone-negative { --rp-tone: var(--rp-negative); --rp-tone-soft: var(--rp-negative-soft); }
.bg-pill.rp-tone-caution { --rp-tone: var(--rp-caution); --rp-tone-soft: var(--rp-caution-soft); }
.bg-pill .tx-glyph { font-size: 12px; color: inherit; }
.bg-pill strong { font-weight: 800; font-variant-numeric: tabular-nums; }
.bg-pill-strong { font-weight: 750; }
.bg-pill-quiet { --rp-tone: var(--rp-muted); --rp-tone-soft: transparent; font-weight: 500; opacity: .85; }
button.bg-pill { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
button.bg-pill:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 4px 12px color-mix(in srgb, var(--rp-tone) 28%, transparent); }
button.bg-pill:disabled { cursor: default; }
button.bg-pill:focus-visible { outline: 2px solid var(--rp-tone); outline-offset: 2px; }
.bg-pill.bg-pill-paused {
    --rp-tone: var(--rp-caution);
    background: var(--rp-caution); color: #FFFFFF; border-color: transparent;
    font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}
[data-bs-theme="dark"] .bg-pill.bg-pill-paused { color: #1A1203; }
.bg-pill.bg-pill-sm { height: 21px; padding: 0 8px; gap: 5px; font-size: 10px; }
.bg-pill.bg-pill-sm .tx-glyph { font-size: 9px; }
.bg-period-label { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }

.bg-paused {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 14px;
    margin: .25rem 0 .75rem; padding: 14px 16px; border-radius: var(--bg-radius);
    border: 1px solid color-mix(in srgb, var(--rp-caution) 50%, transparent); border-left: 5px solid var(--rp-caution);
    background: repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--rp-caution) 8%, transparent) 14px 28px), var(--rp-caution-soft);
    color: var(--rp-text);
}
.bg-paused-icon {
    display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
    background: var(--rp-caution); color: #FFFFFF; font-size: 17px;
    animation: bg-paused-pulse 2.4s ease-in-out infinite;
}
[data-bs-theme="dark"] .bg-paused-icon { color: #1A1203; }
.bg-paused-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bg-paused-copy strong { font-size: 15.5px; font-weight: 750; color: var(--rp-caution); }
.bg-paused-copy span { font-size: 13px; color: var(--rp-text); }
.bg-paused-action { grid-column: 1 / -1; justify-self: start; }
.bg-paused .rp-btn.bg-paused-resume { background: var(--rp-caution); border-color: var(--rp-caution); color: #FFFFFF; font-weight: 700; }
[data-bs-theme="dark"] .bg-paused .rp-btn.bg-paused-resume { color: #1A1203; }
.bg-paused .rp-btn.bg-paused-resume:not(:disabled):hover { filter: brightness(1.08); }
.bg-hero-frame { border-radius: var(--bg-radius); }
.bg-hero-frame.is-paused { outline: 2px dashed color-mix(in srgb, var(--rp-caution) 75%, transparent); outline-offset: 4px; }
.bg-hero-frame.is-paused .bg-hero { filter: saturate(.6); }
@keyframes bg-paused-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rp-caution) 45%, transparent); }
    50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--rp-caution) 0%, transparent); }
}
@media (min-width: 768px) {
    .bg-paused { grid-template-columns: auto minmax(0, 1fr) auto; }
    .bg-paused-action { grid-column: auto; justify-self: end; }
}
@media (prefers-reduced-motion: reduce) {
    .bg-paused-icon { animation: none; }
    button.bg-pill { transition: none; }
}

/* ---- The hub hero while its summary loads (BudgetHubHero) ------------------------------------------------------- */
.bg-hero-bone { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "side" "tiles"; gap: 12px; margin-bottom: 16px; }
.bg-hero-bone .dsh-bone { display: block; border-radius: 22px; }
.bg-hero-bone-main { grid-area: main; height: 300px; }
.bg-hero-bone-side { grid-area: side; height: 220px; }
.bg-hero-bone-tiles { grid-area: tiles; height: 96px; border-radius: 16px; }
@media (min-width: 1100px) {
    .bg-hero-bone { grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "main side" "tiles tiles"; }
    .bg-hero-bone-side { height: 300px; }
}
@media (prefers-reduced-motion: reduce) { .bg-line.needs-look .bg-line-bar { animation: none; } }

/* ---- Plan editor > Income: what Chip In sees, picked paychecks, lookback (BudgetIncomeSources) -------------------- */
.bg-inc { display: flex; flex-direction: column; gap: 12px; }
.bg-inc-lookback { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.bg-inc-lb { min-height: 36px; padding: 0 4px; border: 1px solid var(--bg-glass-border); border-radius: 10px; background: transparent; color: var(--tx-muted); font-family: var(--tx-font); font-weight: 600; font-size: 13px; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; white-space: nowrap; }
.bg-inc-lb:hover { border-color: var(--bg-hero-border); color: var(--tx-text); }
.bg-inc-lb.is-on { background: var(--bg-badge); border-color: var(--bg-hero-border); color: var(--bg-badge-text); }
.bg-inc-lb:focus-visible { outline: 2px solid var(--bg-icon); outline-offset: 1px; }
.bg-inc-lb-unit { font-weight: 500; font-size: 11px; opacity: .8; }
.bg-inc-card { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--bg-glass-border); background: var(--bg-soft); }
.bg-inc-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.bg-inc-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tx-muted); }
.bg-inc-eyebrow .tx-glyph { color: var(--bg-icon); font-size: 11px; }
.bg-inc-estimate { display: inline-flex; align-items: baseline; gap: 4px; color: var(--tx-muted); font-size: 12px; }
.bg-inc-estimate strong { font-size: 18px; font-weight: 700; color: var(--rp-positive); font-variant-numeric: tabular-nums; }
.bg-inc-summary { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--tx-text); }
.bg-inc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bg-inc-summary.is-stale, .bg-inc-list.is-stale { opacity: .55; transition: opacity .15s ease; }
.bg-inc-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--bg-glass); border: 1px solid transparent; }
.bg-inc-row.is-you { border-left: 3px solid var(--rp-you); }
.bg-inc-row.is-partner { border-left: 3px solid var(--rp-partner); }
.bg-inc-row.is-off { opacity: .5; }
.bg-inc-row.is-off .bg-inc-amount strong { text-decoration: line-through; }
.bg-inc-glyph { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--rp-positive-soft); color: var(--rp-positive); font-size: 13px; }
.bg-inc-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bg-inc-name { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; font-size: 13.5px; color: var(--tx-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-inc-pill.bg-pill { background: var(--rp-positive-soft); color: var(--rp-positive); flex: 0 0 auto; }
.bg-inc-detail { font-size: 11.5px; color: var(--tx-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-inc-deposits { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.bg-inc-dep { padding: 1px 7px; border-radius: 999px; background: var(--rp-neutral-soft); color: var(--tx-muted); font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bg-inc-amount { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.bg-inc-amount strong { font-weight: 700; font-size: 14px; color: var(--tx-text); font-variant-numeric: tabular-nums; }
.bg-inc-amount span { font-size: 10.5px; color: var(--tx-muted); }
.bg-inc-empty { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 12.5px; color: var(--tx-muted); }
.bg-inc-skel { display: flex; flex-direction: column; gap: 8px; }
.bg-inc-bone.dsh-bone { height: 46px; border-radius: 12px; }
.bg-inc-bone-short.dsh-bone { width: 62%; height: 14px; border-radius: 7px; }
.bg-inc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bg-inc-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 4px 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; border: 1px solid transparent; }
.bg-inc-chip.is-you { background: color-mix(in srgb, var(--rp-you) 14%, transparent); color: var(--rp-you); border-color: color-mix(in srgb, var(--rp-you) 30%, transparent); }
.bg-inc-chip.is-partner { background: color-mix(in srgb, var(--rp-partner) 14%, transparent); color: var(--rp-partner); border-color: color-mix(in srgb, var(--rp-partner) 30%, transparent); }
.bg-inc-chip.is-missing { border-style: dashed; opacity: .75; }
.bg-inc-chip .tx-glyph { font-size: 11px; }
.bg-inc-chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tx-text); }
.bg-inc-chip-x { width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; font-size: 11px; }
.bg-inc-chip-x:hover, .bg-inc-chip-x:focus-visible { background: color-mix(in srgb, currentColor 18%, transparent); outline: none; }
.bg-inc-reset, .bg-inc-suggest { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.bg-inc-suggest { margin-left: 4px; }
@media (max-width: 420px) {
    .bg-inc-lb-unit { display: none; }
    .bg-inc-row { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; padding: 8px; }
    .bg-inc-glyph { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) { .bg-inc-lb, .bg-inc-list.is-stale, .bg-inc-summary.is-stale { transition: none; } }