/* Pocket (PK-001). Loaded last so it wins over the inline styles and per-screen files.
   Look only: no selector here changes what a screen shows or does.
   Brief: docs/briefs/pocket-theme.md · Design: design/pocket-theme.html, design/pocket-analytics.html
   Chart category colours live in js/chart-theme.js and js/app.js (validated for colour-blind readers, both themes). */

/* Dark is the default. Its own palette, not an inversion: violet one step brighter, pastels as deep tints with light ink. */
:root {
  --bg:           #121022;
  --surface:      #1C1932;
  --surface-2:    #272343;
  --surface-3:    #312C52;
  --border:       #2E2A4A;
  --border-hi:    #3D3863;
  --accent:       #7F72FF;
  --accent-hi:    #A79CFF;
  --accent-dim:   rgba(127,114,255,.18);
  --accent-glow:  rgba(127,114,255,.28);
  --green:        #4ADE9B;
  --green-dim:    rgba(74,222,155,.14);
  --red:          #FF8170;
  --red-dim:      rgba(255,129,112,.14);
  --yellow:       #F5C04A;
  --yellow-dim:   rgba(245,192,74,.14);
  --text:         #F2F0FF;
  --text-mid:     #C4C0E0;
  --text-dim:     #9A95B8;
  --pink:         #F06BB8;
  --pink-dim:     rgba(240,107,184,.16);
  --pink-ink:     #FF9ED2;
  --lime:         #C9F27A;
  --lime-ink:     #2F4A00;
  --red-on-lime:  #A33522;
  --hero:         #6858F9;
  --accent-fill:  #6858F9;  /* any violet fill under white text: 4.82:1 in both themes (dark --accent is only 3.65:1) */
  --accent-fill-hi: #5443E0; /* its hover, 6.45:1 under white */
  --red-fill:     #C2412D;  /* red fill under white text, 5.1:1 (dark --red is too light) */
  --red-ink:      #FF8170;  /* red amounts on tinted tiles (dark: same as --red) */
  --green-ink:    #4ADE9B;  /* green amounts on tinted tiles */
  --cal-heat:     var(--accent-fill);  /* Month heat calendar tint (violet, 3-14%) */
  /* Category slots: the validated chart palette in fixed order (dark steps here, light steps below) */
  --cat-0: #8A85A8; --cat-1: #229E7E; --cat-2: #DC6632; --cat-3: #4F8FE6; --cat-4: #D2559E; --cat-5: #AD8812; --cat-6: #8478FF; --cat-7: #2397B2; --cat-8: #C06C50;
  --mood-happy:   #C9F27A;
  --mood-okay:    #FFE27A;
  --mood-tight:   #FFC9B5;
  --mood-ink:     #1C1838;
  --font-sans:    'Figtree','Avenir Next',system-ui,sans-serif;
  --font-mono:    'Bricolage Grotesque','Avenir Next',system-ui,sans-serif;
  --font-numeric: 'Bricolage Grotesque','Avenir Next',system-ui,sans-serif;
  --font-display: 'Bricolage Grotesque','Avenir Next',system-ui,sans-serif;
  --shadow-sm:    0 2px 12px rgba(0,0,0,.30);
  --shadow-md:    0 10px 32px rgba(0,0,0,.36);
  --shadow-lg:    0 20px 50px rgba(0,0,0,.45);
  --shadow-panel: -20px 0 60px rgba(0,0,0,.45);
  --shadow-bar:   0 -6px 24px rgba(0,0,0,.18);
  --radius-sm:    14px;
  --radius-md:    24px;
  --r-card:       24px;
  --r-tile:       20px;
  --r-input:      14px;
  --r-ctl:        999px;
  --label-tracking: .01em;
}

[data-theme="light"] {
  --bg:           #F5F3FF;
  --surface:      #FFFFFF;
  --surface-2:    #EFEBFF;
  --surface-3:    #E6E1F7;
  --border:       #E6E1F7;
  --border-hi:    #D6CFF0;
  --accent:       #6858F9;
  --accent-hi:    #5443E0;
  --accent-dim:   #ECE9FF;
  --accent-glow:  rgba(104,88,249,.18);
  --green:        #0E7A52;
  --green-dim:    #D7F5E7;
  --red:          #C2412D;
  --red-dim:      #FFE2DA;
  --yellow:       #9A6200;
  --yellow-dim:   #FFF0C7;
  --text:         #1C1838;
  --text-mid:     #4A4568;
  --text-dim:     #757091;
  --pink:         #D6409F;
  --pink-dim:     #FFE3F3;
  --pink-ink:     #A3227A;
  --cat-0: #8A85A8; --cat-1: #14967A; --cat-2: #E0662E; --cat-3: #3A86E8; --cat-4: #C2418F; --cat-5: #B58A00; --cat-6: #6858F9; --cat-7: #0E8FA8; --cat-8: #A8553A;
  --red-ink:      #A33522;  /* 4.5:1+ on the hottest violet day tint */
  --green-ink:    #0A6644;
  --lime:         #C9F27A;
  --lime-ink:     #2F4A00;
  --red-on-lime:  #A33522;
  --hero:         #6858F9;
  --shadow-sm:    0 2px 10px rgba(60,40,160,.06);
  --shadow-md:    0 10px 30px rgba(60,40,160,.10);
  --shadow-lg:    0 20px 50px rgba(40,25,120,.18);
  --shadow-panel: -20px 0 60px rgba(40,25,120,.16);
  --shadow-bar:   0 -6px 24px rgba(60,40,160,.07);
}

/* Terminal atmosphere off */
body::before, body::after { display: none; }
body { font-family: var(--font-sans); }

/* Numbers line up everywhere */
.lg-num, .num, [class*="-amt"], [class*="-amount"], [class*="-val"], [class*="-value"], [class*="kpi"] { font-variant-numeric: tabular-nums; }

/* ── Buttons, badges, cards ── */
.btn { border-radius: var(--r-ctl); font: 600 14px/1.2 var(--font-sans); letter-spacing: 0; text-transform: none; padding: 10px 20px; }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-accent { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
.btn-accent:hover { background: var(--accent-fill-hi); border-color: var(--accent-fill-hi); color: #fff; }
.btn-outline, .btn-ghost { background: var(--surface-2); border-color: transparent; color: var(--text); }
.btn-outline:hover, .btn-ghost:hover { background: var(--surface-3); border-color: transparent; color: var(--text); }
.btn-danger { background: var(--red-dim); border-color: transparent; color: var(--red); }
.btn-danger:hover { background: var(--red-fill); border-color: var(--red-fill); color: #fff; }
.badge { border: 0; border-radius: 999px; font: 700 12px var(--font-sans); letter-spacing: 0; text-transform: none; padding: 3px 10px; }
.card { border: 0; border-radius: var(--r-card); box-shadow: var(--shadow-sm); }
.card-title { font: 700 16px var(--font-display); letter-spacing: 0; text-transform: none; color: var(--text); }
#page-app .chart-card, #page-app .recent-txn-card, #page-app .settings-card, #page-app .rule-card, #page-app .budget-card, #page-app .card {
  border-radius: var(--r-card);
}

/* UI-013 made every control square; Pocket makes them pills (same selectors, later in the cascade). */
#page-app .btn, #page-app .home-btn, #page-app .txn-filter-btn, #page-app .txn-tray-btn,
#page-app .nav-tab, #page-app .spend-seg, #page-app .spend-seg-btn, #page-app .spend-periods, #page-app .spend-period,
#page-app .date-tabs, #page-app .date-tab, #page-app .txn-sheet-close, #page-app .gear-item, #page-app .nav-theme-btn,
#page-app .ana-calendar-mode, #page-app .budget-nav-btn,
#page-app .nav-gear-btn { border-radius: var(--r-ctl); }
#page-app .txn-search, #page-app .txn-select, #page-app .txn-textarea, #page-app .txn-cat-trigger { border-radius: var(--r-input); }
#page-app .txn-cat-popover { border-radius: 18px; box-shadow: var(--shadow-md); }
input[type="text"], input[type="search"], input[type="email"], input[type="number"], input[type="date"], input:not([type]), select, textarea { border-radius: var(--r-input); }

/* ── Dense Ledger primitives, softened ── */
.lg-grid { gap: 12px; background: transparent; border: 0; }
.lg-tile { border-radius: var(--r-card); box-shadow: var(--shadow-sm); }
.lg-tile-h > b, .lg-label { font: 700 15px/1.3 var(--font-display); color: var(--text); }
.lg-num { font-family: var(--font-numeric); font-weight: 700; }
.lg-mlogo { border-radius: 30%; }
.lg-blogo { border-radius: 28%; }
.lg-btn { border-radius: var(--r-ctl); border-color: transparent; background: var(--surface-2); font: 600 13px var(--font-sans); padding: 0 14px; }
.lg-btn.is-primary { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; }
.lg-seg { border: 0; background: var(--surface-2); border-radius: var(--r-ctl); padding: 3px; gap: 2px; }
.lg-seg > * { border-radius: var(--r-ctl); font: 600 13px var(--font-sans); padding: 0 12px; }
.lg-seg > [aria-pressed="true"], .lg-seg > .is-on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.lg-toggle { width: 40px; height: 24px; border: 0; border-radius: var(--r-ctl); }
.lg-toggle::after { top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; }
.lg-toggle[aria-checked="true"]::after { left: 19px; }
.lg-box { border-radius: var(--r-card); box-shadow: var(--shadow-sm); }
.lg-btn:focus-visible, .lg-seg > *:focus-visible, .lg-toggle:focus-visible, .lg-link:focus-visible, .btn:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }

/* Pocket headings run larger than the old 11.5px labels, so fixed-height tiles grow with their text on phone */
@media (max-width: 768px) { .hg-grid .hg-stat { height: auto; min-height: 96px; } }

/* ── Shell (PK-002): top tabs on desktop, bottom tab bar on phone, sliding lens pill ── */
.app-nav { background: var(--bg); border-bottom: 1px solid var(--border); }
#page-app .nav-tab { border-radius: var(--r-ctl); padding: 8px 16px; font: 600 14.5px var(--font-sans); color: var(--text-mid); }
#page-app .nav-tab:hover { color: var(--text); background: var(--surface-2); }
#page-app .nav-tab.active { background: var(--accent-dim); color: var(--accent-hi); }
[data-theme="light"] #page-app .nav-tab.active { color: var(--accent); }
.nav-gear-btn, .nav-theme-btn { border: 0; background: var(--surface-2); border-radius: 50%; }
.nav-gear-btn:hover, .nav-theme-btn:hover { color: var(--accent-hi); }
#page-app .gear-item { border-radius: 12px; }

@media (max-width: 768px) {
  #app-mobile-bottom-nav {
    height: auto; min-height: 64px; background: var(--surface); border-top: 0;
    box-shadow: var(--shadow-bar); padding: 6px 4px env(safe-area-inset-bottom, 0px);
  }
  #page-app .app-main { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}
.app-bnav-item { font: 600 11.5px var(--font-sans); color: var(--text-dim); gap: 4px; }
.app-bnav-item:active { background: none; }
.app-bnav-item:active svg { background: var(--accent-dim); }
.app-bnav-item svg { box-sizing: content-box; padding: 3px 14px; border-radius: 999px; transition: background .2s, color .2s; }
.app-bnav-item.active { color: var(--accent-hi); }
[data-theme="light"] .app-bnav-item.active { color: var(--accent); }
.app-bnav-item.active svg { background: var(--accent-dim); border-radius: 999px; }

#page-app .spend-seg { position: relative; background: var(--surface); box-shadow: var(--shadow-sm); padding: 4px; gap: 2px; border-radius: var(--r-ctl); }
#page-app .spend-seg-btn { position: relative; z-index: 1; border-radius: var(--r-ctl); padding: 8px 16px; font: 600 14px var(--font-sans); color: var(--text-mid); background: none; transition: color .25s; }
#page-app .spend-seg-btn.active { background: var(--accent-fill); color: #fff; transition: color .2s ease .15s; }
#page-app .spend-seg.has-ind .spend-seg-btn.active { background: none; }
.spend-seg:not(.has-ind) .spend-seg-ind { display: none; }
.spend-seg-ind {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: var(--r-ctl);
  background: var(--accent-fill); pointer-events: none;
  transition: transform .45s cubic-bezier(.3,1.3,.5,1), width .45s cubic-bezier(.3,1.3,.5,1);
}
@media (prefers-reduced-motion: reduce) { .spend-seg-ind { transition: none; } }

/* Phone: the lens row keeps its breathing room and slides sideways instead of shrinking or cutting off.
   Snaps gently, doesn't drag the page, and fades the edge that has more behind it. */
@media (max-width: 768px) {
  #page-app #dsn-tabs-container { overflow-x: auto !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scroll-padding-inline: 16px; padding-inline: 16px; scrollbar-width: none; }
  #page-app #dsn-tabs-container::-webkit-scrollbar { display: none; }
  #page-app #dsn-tabs-container .spend-seg { flex-shrink: 0; margin: 8px 0; }
  #page-app .spend-seg-btn { flex-shrink: 0; white-space: nowrap; scroll-snap-align: center; min-height: 40px; }
  #page-app #dsn-tabs-container.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  #page-app #dsn-tabs-container.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
  #page-app #dsn-tabs-container.fade-l.fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent); }
}

/* ── Home (PK-003): violet Safe-to-spend card with a mood face, rounded tiles, a celebration on all clear ── */
.hg-grid .lg-tile { border-radius: var(--r-card); border: 0; }
/* Light: the lower Home cards are white like the rest, so they stand apart from the lavender page (PK-018) */
[data-theme="light"] .hg-grid .hg-z4 { background: var(--surface); box-shadow: var(--shadow-sm); }
.hg-grid .hg-hero { background: var(--hero); color: #fff; border: 0; }
/* Room for the face beside the label and number only; the lines and runway use the full width. */
.hg-hero > .lg-label, .hg-hero > .hg-hero-row { margin-right: 72px; }
/* When short, the heading becomes "[Short] until payday · <date>", right above the negative number: in flow, and shorter than "Safe to spend …" */
.hg-hero .hg-hero-row { display: block; }
.hg-hero .hg-hero-num { white-space: nowrap; }
/* 769-1040px: the face strip leaves ~190px, so a 7-character amount (−$12,298) needs the smaller size to stay on one line */
@media (min-width: 769px) and (max-width: 1040px) { .hg-hero .hg-hero-num { font-size: 40px; } }
.hg-hero .lg-label { color: #fff; }
.hg-hero .hg-empty { color: #fff; }
.hg-hero .lg-btn:not(.is-primary) { background: transparent; border: 1.5px solid #fff; color: #fff; }
.hg-hero .hg-hero-num, .hg-hero .hg-hero-num.is-negative { color: #fff; }
.hg-hero .hg-short { display: inline-block; line-height: 1.3; padding: 1px 9px; border-radius: 999px; background: #FFE3F3; color: #A3227A; font: 700 12.5px var(--font-sans); }
.hg-hero .hg-line { color: #fff; border-top-color: rgba(255,255,255,.18); }
.hg-hero .hg-line .lg-num { color: #fff; }
.hg-hero .hg-runway { background: rgba(255,255,255,.22); height: 10px; border-radius: 99px; }
.hg-hero .hg-runway .is-committed { background: var(--lime); border-radius: 99px; }
.hg-hero .hg-runway-meta { color: #fff; }
.hg-hero .hg-runway-meta .lg-link { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.hg-hero .hg-panel { border-radius: var(--r-card); color: var(--text); }
.hg-hero .lg-btn.is-primary { background: #fff; color: var(--hero); border-color: #fff; }
.hg-mood { position: absolute; top: 16px; right: 16px; width: 60px; height: 60px; animation: hg-mood-in .7s cubic-bezier(.3,1.6,.5,1) both; }
.hg-mood-bg { fill: var(--mood-happy); }
.hg-mood.is-okay .hg-mood-bg { fill: var(--mood-okay); }
.hg-mood.is-tight .hg-mood-bg { fill: var(--mood-tight); }
.hg-mood-eye { fill: var(--mood-ink); transform-box: fill-box; transform-origin: center; animation: hg-blink 4.6s infinite; }
.hg-mood-mouth { fill: none; stroke: var(--mood-ink); stroke-width: 3.6; stroke-linecap: round; }
@keyframes hg-mood-in { from { transform: translateY(8px) scale(.85); opacity: 0; } }
@keyframes hg-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

.hg-needs { position: relative; overflow: hidden; }
.hg-needs.is-celebrating .hg-check { display: inline-block; animation: hg-stamp .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes hg-stamp { from { transform: scale(2.2) rotate(-12deg); opacity: 0; } }
.hg-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hg-confetti i { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; animation: hg-fall 1.4s ease-in forwards; }
@keyframes hg-fall { to { transform: translateY(320px) rotate(540deg); opacity: .15; } }
@media (max-width: 768px) { .hg-hero > .lg-label, .hg-hero > .hg-hero-row { margin-right: 62px; } .hg-mood { width: 52px; height: 52px; } }
@media (prefers-reduced-motion: reduce) { .hg-mood, .hg-mood-eye { animation: none; } .hg-confetti { display: none; } .hg-needs.is-celebrating .hg-check { animation: none; } }

/* ── Transactions (PK-004): pill toolbar, rounded list card, touch-sized phone rows, rounded drawer and sheet.
   Row heights live in css/transactions.css and js/transactions.js (virtual scroll); only the look changes here. ── */
#view-transactions .txn-header .view-title { font: 800 26px var(--font-display); letter-spacing: -.02em; }
#view-transactions .txn-search { height: 40px; padding: 0 16px; border: 0; border-radius: var(--r-ctl); background: var(--surface);
  box-shadow: var(--shadow-sm); font: 400 14px var(--font-sans); }
#view-transactions .txn-search:focus { outline: 3px solid var(--pink); outline-offset: 1px; }
#view-transactions .txn-period { border: 0; border-radius: var(--r-ctl); background: var(--surface); box-shadow: var(--shadow-sm); padding: 4px; gap: 2px; }
#view-transactions .txn-period .date-tab { height: 32px; padding: 0 14px; border-radius: var(--r-ctl); font: 600 13.5px var(--font-sans); color: var(--text-mid); }
#view-transactions .txn-period .date-tab.active { background: var(--accent-fill); color: #fff; }
#view-transactions .txn-filter-btn { height: 40px; padding: 0 16px; border: 0; background: var(--surface); box-shadow: var(--shadow-sm); font: 600 13.5px var(--font-sans); color: var(--text); }
#view-transactions .txn-filter-btn:hover { background: var(--surface-2); }
#view-transactions .txn-filter-btn[aria-expanded="true"] { background: var(--accent-dim); color: var(--accent-hi); }
#view-transactions .txn-skel-logo { width: 26px; height: 26px; border-radius: 30%; }
#view-transactions .txn-filter-tray { border: 0; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-sm); padding: 12px; }
#view-transactions .txn-filter-tray .txn-select, #view-transactions .txn-tray-btn { height: 36px; font-size: 13.5px; }
#view-transactions .txn-summary { font: 500 13px var(--font-sans); }
#view-transactions .txn-sum-item b { font: 800 15px var(--font-numeric); }

#view-transactions .txn-vs-wrap { border-radius: var(--r-card); box-shadow: var(--shadow-sm); padding-bottom: 6px; }
#view-transactions .txn-head th { font: 600 12.5px var(--font-sans); height: 36px; }
#view-transactions .txn-table td { font: 400 14px/1.2 var(--font-sans); border-top-color: var(--border); }
#view-transactions .txn-row-name { font: 600 14px var(--font-sans); }
#view-transactions .txn-cat-main { font: 400 13.5px var(--font-sans); }
#view-transactions .txn-row .txn-logo { width: 26px; height: 26px; font-size: 9.5px; border-radius: 30%; }
#view-transactions td.txn-amt { font: 800 14.5px var(--font-numeric); }
#view-transactions .txn-group-cell { font: 400 13.5px var(--font-sans); }
#view-transactions .txn-group-cell b { font: 700 14px var(--font-display); }
#view-transactions .txn-group-total { font: 600 13px var(--font-numeric); }
#view-transactions .txn-flag { font: 700 11px var(--font-sans); padding: 2px 8px; }

@media (max-width: 899px) {
  #view-transactions .txn-row .txn-logo, #view-transactions .txn-skel-logo { width: 40px; height: 40px; font-size: 13px; border-radius: 30%; }
  #view-transactions .txn-row-name { font-size: 16px; }
  #view-transactions .txn-row-sub { font: 400 13.5px var(--font-sans); }
  #view-transactions td.txn-amt { font-size: 16px; }
  #view-transactions .txn-table col.txn-col-amt { width: 128px; }  /* "-$123,456.78" at 16px/800 fits */
  #view-transactions .txn-amt-logo { width: 16px; height: 16px; font-size: 7px; }
  #view-transactions .txn-search, #view-transactions .txn-filter-btn { height: 44px; font-size: 16px; }
  #view-transactions .txn-period .date-tab { height: 36px; font-size: 14px; }
}

/* Detail: drawer on desktop (full height, rounded leading edge), bottom sheet on phone */
.fx-drawer { border-left: 0; border-radius: 28px 0 0 28px; background: var(--surface); }
.fx-drawer-title, .fx-drawer .txn-detail-title { font: 700 19px var(--font-display); }
.fx-drawer-x, .fx-drawer-back { border: 0; background: var(--surface-2); border-radius: var(--r-ctl); padding: 8px 14px; font: 600 13.5px var(--font-sans); }
.fx-drawer-x:hover, .fx-drawer-back:hover { background: var(--surface-3); color: var(--text); }
.fx-drawer-total, .fx-drawer .txn-detail-amount { font-family: var(--font-numeric); font-weight: 800; }
.fx-drawer .txn-detail-amount { font-size: 34px; }
.fx-drawer-row { font-size: 14px; }
.fx-drawer-amt { font: 800 14px var(--font-numeric); }
.fx-drawer .tdb-section { border: 0; border-radius: 18px; background: var(--surface-2); }
.fx-drawer .txn-detail-panel .txn-select, .fx-drawer .txn-detail-panel .txn-textarea { border-radius: var(--r-input); font-size: 14px; }
.fx-drawer .txn-detail-save-bar .btn { border-radius: var(--r-ctl); font-size: 14px; }
@media (max-width: 768px) {
  .fx-drawer { border-top: 0; border-radius: 28px 28px 0 0; }
  .fx-drawer-grab { width: 42px; height: 5px; margin-top: 10px; border-radius: 9px; }
  .fx-drawer-row { font-size: 16px; min-height: 56px; }
  .fx-drawer-amt { font-size: 16px; }
  .fx-drawer .txn-detail-panel .txn-select, .fx-drawer .txn-detail-panel .txn-textarea { font-size: 16px; min-height: 44px; }
}

/* Transactions has its own detail panel (not .fx-drawer): side panel above 1100px, bottom sheet below */
#view-transactions .txn-detail-panel { border: 0; border-radius: 28px 0 0 28px; background: var(--surface); box-shadow: var(--shadow-panel); }
#view-transactions .txn-detail-title { font: 700 19px var(--font-display); }
#view-transactions .txn-detail-amount { font-family: var(--font-numeric); font-weight: 800; font-size: 36px; }
#view-transactions .txn-detail-hero { background: none; }
#view-transactions .tdb-section { border-radius: 18px; background: var(--surface-2); }
#view-transactions .txn-detail-panel .txn-select, #view-transactions .txn-detail-panel .txn-textarea, #view-transactions .txn-cat-trigger { border-radius: var(--r-input); font-size: 14px; }
#view-transactions .txn-detail-save-bar .btn { border-radius: var(--r-ctl); font-size: 14px; }
#view-transactions .txn-detail-actions .btn, #view-transactions .txn-detail-actions button { border-radius: var(--r-ctl); }
@media (max-width: 1100px) {
  #view-transactions .txn-detail-panel { border-radius: 28px 28px 0 0; border-top: 0; }
}
@media (max-width: 768px) {
  #view-transactions .txn-detail-panel .txn-select, #view-transactions .txn-detail-panel .txn-textarea, #view-transactions .txn-cat-trigger { font-size: 16px; min-height: 44px; }
}

/* ── Spending lenses: Merchants, Subscriptions, Compare (PK-005). Same lists, sorting and drill-ins; look only. ── */
#page-app .spend-list { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-sm); overflow: hidden; padding: 4px 0; }
#page-app .spend-row { padding: 8px 16px; border-top: 1px solid var(--border); }
#page-app .spend-list > .spend-row:first-child, #page-app .spend-row.is-head + .spend-row, #page-app .spend-group-h + .spend-row { border-top: 0; }
#page-app .spend-row:hover { background: var(--surface-2); }
#page-app .spend-row.is-head { font: 600 12.5px var(--font-sans); }
#page-app .spend-name-text { font: 600 14.5px var(--font-sans); }
#page-app .spend-habit { font-size: 13px; }
#page-app .spend-num { font-family: var(--font-numeric); font-weight: 800; }
#page-app .spend-row .spend-num { font-size: 14.5px; }
#page-app .spend-row.is-head .spend-num { font: 600 12.5px var(--font-sans); }
#page-app .spend-rank { font: 700 13px var(--font-numeric); }
#page-app .spend-row .txn-logo { border-radius: 30%; }
#page-app .spend-hero-num { font-family: var(--font-numeric); font-weight: 800; }
#page-app .spend-kicker, #page-app .spend-hero-meta { font-size: 14px; }
#page-app .spend-group-h { font: 700 13px var(--font-display); letter-spacing: 0; text-transform: none; color: var(--text); padding: 14px 16px 6px; }
#page-app .spend-flag, #page-app .spend-move.is-new { font: 700 11.5px var(--font-sans); padding: 2px 8px; }
#page-app .spend-flag:not(.is-up) { color: var(--text-mid); }
#page-app .spend-bar { height: 8px; background: var(--surface-2); }
#page-app .spend-bar i { background: var(--accent-fill); }
#page-app .spend-periods { background: var(--surface); box-shadow: var(--shadow-sm); padding: 4px; gap: 2px; border-radius: var(--r-ctl); }
#page-app .spend-period { border-radius: var(--r-ctl); padding: 7px 16px; font: 600 13.5px var(--font-sans); color: var(--text-mid); }
#page-app .spend-period.active { background: var(--accent-fill); color: #fff; }
#page-app .spend-toggle { font-size: 14px; }
#page-app .spend-foot { font-size: 13px; }

@media (max-width: 768px) {
  #page-app .spend-row { min-height: 56px; padding: 8px 14px; }
  #page-app .spend-name-text, #page-app .spend-row .spend-num { font-size: 16px; }
  #page-app .spend-habit { font-size: 13.5px; }
  #page-app .spend-row .txn-logo { width: 36px; height: 36px; font-size: 12px; }
  #page-app .spend-merchant-row { grid-template-columns: 18px 36px minmax(0, 1fr) auto; }
  #page-app .spend-sub-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
  #page-app .spend-period { padding: 9px 16px; font-size: 14px; }
}

/* ── Spending › Days: the month calendar (PK-006; the Live analytics and Insights pages went in SL-006). ── */
/* The glance panel holds the merchant finder popover, so it rounds its corners without clipping. */
#dsub-month .ana-month-glance {
  border: 0; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-sm); }

#dsub-month .ana-calendar-modes { border: 0; border-radius: var(--r-ctl); background: var(--surface-2); padding: 3px; }
#dsub-month .ana-calendar-mode { color: var(--text-mid); }
#dsub-month .ana-calendar-mode.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
#dsub-month .ana-glance-nav > button { border: 0; border-radius: 50%; background: var(--surface-2); }
#dsub-month .ana-calendar { border: 0; border-radius: 18px; overflow: hidden; }
#dsub-month .ana-calendar-day { border-color: var(--border); }
#dsub-month button.ana-calendar-day:hover { box-shadow: inset 0 0 0 2px var(--accent); }
#dsub-month .ana-calendar-day.is-today { box-shadow: inset 0 0 0 2px var(--pink); }
#dsub-month .ana-calendar-spent { font-family: var(--font-numeric); font-weight: 800; color: var(--red-ink); }
/* On heat-tinted days the date and income need deeper ink (both failed AA under the old red tint too) */
#dsub-month .ana-calendar-date { color: var(--text-mid); font: 600 11px var(--font-sans); }
#dsub-month .ana-calendar-income { color: var(--green-ink); }
#dsub-month .month-merchant-search, #dsub-month .month-merchant-chip { border-radius: var(--r-ctl); }
#dsub-month .month-merchant-options { border-radius: 16px; }

@media (max-width: 768px) {
  #dsub-month .ana-calendar-spent { font-size: 11.5px; }
}

/* ── Island sidebar (PK-014): on wide screens the nav floats as a rounded panel on the left with the four tabs,
   and the gear and theme buttons (NAV-002: no accounts list; Accounts is its own page and Home has the tile). Tablet keeps top tabs, phone keeps the bottom bar. ── */
.nav-ico, .nav-collapse-btn, .nav-signout-btn { display: none; }
.nav-foot { display: contents; }
@media (min-width: 1101px) {
  #page-app { padding-left: 272px; }
  #page-app .app-nav {
    position: fixed; top: 16px; left: 16px; bottom: 16px; width: 240px; height: auto; z-index: 100;
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 4px;
    padding: 20px 12px 14px; border: 0; border-radius: 28px; background: var(--surface); box-shadow: var(--shadow-md);
    backdrop-filter: none; overflow: hidden;
  }
  #page-app .app-nav .app-logo { position: static; margin: 0 8px 18px; }
  #page-app .app-nav .app-logo .brand-wordmark { display: inline; }
  #page-app .nav-tab { justify-content: flex-start; gap: 12px; padding: 11px 14px; font-size: 15px; }
  .nav-ico { display: block; width: 20px; height: 20px; flex: none; }
  .nav-foot { display: flex; gap: 8px; align-items: center; padding: 12px 6px 0; border-top: 1px solid var(--border); margin-top: auto; }
  #page-app .nav-foot .nav-gear-btn, #page-app .nav-foot .nav-theme-btn { position: static; width: 38px; height: 38px; }
  /* One-click Sign out (PK-024): a quiet pill at the end of the foot; red only on hover */
  .nav-signout-btn { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; height: 38px; padding: 0 14px; border: 0; border-radius: 19px;
    background: transparent; color: var(--text-mid); font: 700 13.5px var(--font-sans); cursor: pointer; transition: background .2s ease, color .2s ease; }
  .nav-signout-btn svg { width: 18px; height: 18px; flex: none; }
  .nav-signout-btn:hover { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }
  .nav-signout-btn:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
  /* The paywall used to leave the top bar (gear, Sign out) uncovered; now it leaves the island uncovered. Its styles are inline, hence !important. */
  #sub-paywall-overlay { top: 0 !important; left: 272px !important; }
  /* Transactions selection bar: keep it off the island's gear and theme buttons */
  #page-app .rpt-fab-bar { left: 288px; }

  /* Auto sidebar (PK-021, PK-028): unpinned, the island is an icon rail and the content takes the space; hover or
     keyboard focus opens it over the page (.nav-peek) and leaving closes it. The pin keeps it open. Labels stay for screen readers. */
  #page-app .app-nav { transition: width .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease; }
  #page-app { transition: padding-left .28s cubic-bezier(.2,.8,.2,1); }
  #page-app .nav-tab { white-space: nowrap; }
  .nav-collapse-btn { position: absolute; top: 18px; right: 12px; width: 32px; height: 32px; display: grid; place-items: center; padding: 0;
    border: 0; border-radius: 50%; background: transparent; color: var(--text-dim); cursor: pointer; }
  .nav-collapse-btn:hover { background: var(--surface-2); color: var(--text); }
  .nav-collapse-btn[aria-pressed="true"] { background: var(--accent-dim); color: var(--accent-hi); }
  .nav-collapse-btn svg { width: 18px; height: 18px; transition: transform .28s ease; }
  .nav-collapse-btn[aria-pressed="false"] svg { transform: rotate(35deg); }
  .nav-collapse-btn:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
  .nav-collapsed #page-app { padding-left: 108px; }
  .nav-collapsed #page-app .app-nav { width: 76px; padding-left: 10px; padding-right: 10px; }
  .nav-peek #page-app .app-nav { width: 240px; padding-left: 12px; padding-right: 12px; box-shadow: var(--shadow-lg); }
  .nav-collapsed:not(.nav-peek) .nav-collapse-btn { visibility: hidden; }
  .nav-collapsed:not(.nav-peek) #page-app .app-nav .app-logo { margin: 0 auto 18px; }
  .nav-collapsed:not(.nav-peek) #page-app .app-nav .app-logo .brand-wordmark { display: none; }
  .nav-collapsed:not(.nav-peek) #page-app .nav-tab { justify-content: center; padding: 11px 0; }
  .nav-collapsed:not(.nav-peek) .app-nav .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav-collapsed:not(.nav-peek) .nav-foot { flex-direction: column; padding: 12px 0 0; }
  .nav-collapsed:not(.nav-peek) .nav-signout-btn { margin-left: 0; width: 38px; padding: 0; justify-content: center; }
  .nav-collapsed #sub-paywall-overlay { left: 108px !important; }
  .nav-peek #sub-paywall-overlay { left: 272px !important; }  /* the open island (and its Sign out) stays above a lock */
  .nav-collapsed #page-app .rpt-fab-bar { left: 124px; }
}
@media (min-width: 1101px) and (prefers-reduced-motion: reduce) { #page-app, #page-app .app-nav { transition: none; } }

/* Flow (PK-007 → SL-002): the Categories lens owns its whole look, draw-in included, in css/flow.css. */

/* ── Plan (PK-008): same flexible bar, budgets and goals; rounded card, pill Edit, and a ring that shows the same
   percentage as each bar (around the budget icon, beside each goal). Over budget is red; nothing else changes meaning. ── */
.fx-ring { display: block; }
.fx-ring-track { fill: none; stroke: var(--surface-3); stroke-width: 3.2; }
/* Ring colours mirror the bars: budgets.css (default accent incl. ok and spent, warn yellow, over red); goals (accent, behind yellow, done green) */
.fx-ring-fill { fill: none; stroke: var(--accent); stroke-width: 3.2; stroke-linecap: round; }
.rings-drawing .fx-ring-fill { animation: fx-ring-in .9s cubic-bezier(.3,.8,.3,1) both; }
.fx-ring.is-warn .fx-ring-fill { stroke: var(--yellow); }
.fx-ring.is-over .fx-ring-fill { stroke: var(--red); }
.fx-ring.is-goal .fx-ring-fill { stroke: var(--accent); }
.fx-ring.is-done .fx-ring-fill { stroke: var(--green); }
@keyframes fx-ring-in { from { stroke-dasharray: 0 100; } }
@media (prefers-reduced-motion: reduce) { .fx-ring-fill { animation: none; } }
#view-budgets .bl-card { border: 0; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-sm); padding: 4px 18px; }
#view-budgets .brow { grid-template-columns: 40px minmax(120px, 1.2fr) 3fr 160px 96px auto; }
#view-budgets .bico { position: relative; width: 40px; height: 40px; background: none; border-radius: 50%; }
#view-budgets .bico .fx-ring { position: absolute; inset: 0; width: 40px; height: 40px; }
#view-budgets .bico > svg:not(.fx-ring) { width: 17px; height: 17px; }
#view-budgets .bname { font: 600 15px var(--font-sans); }
#view-budgets .brow .track { height: 8px; border-radius: 99px; background: var(--surface-2); }
#view-budgets .brow .track b { border-radius: 99px; }
#view-budgets .bleft { font: 800 14px var(--font-numeric); }
#view-budgets .bc-action-btn { border: 0; border-radius: var(--r-ctl); background: var(--surface-2); color: var(--text); font: 600 13px var(--font-sans); letter-spacing: 0; padding: 6px 14px; }
#view-budgets .bc-action-btn:hover { background: var(--surface-3); color: var(--text); }
#view-budgets .bl-sum strong { font: 700 17px var(--font-display); }
#view-budgets .bl-sum-num { font: 800 15px var(--font-numeric); }
#view-budgets .goal-row .bh-row-label { justify-content: flex-start; align-items: center; }
#view-budgets .goal-row .bh-vals { margin-left: auto; }
#view-budgets .goal-ring { display: inline-block; width: 26px; height: 26px; margin-right: 10px; vertical-align: middle; flex: none; }
#view-budgets .goal-ring .fx-ring { width: 26px; height: 26px; }
#view-budgets .bh-track { height: 8px; border-radius: 99px; overflow: hidden; }
#view-budgets .bh-fill { border-radius: 99px; }
@media (max-width: 900px) {
  #view-budgets .brow { grid-template-columns: 40px minmax(100px, 1fr) 2fr 130px 90px auto; gap: 12px; }
}
@media (max-width: 640px) {
  #view-budgets .bl-card { padding: 4px 12px; }
  #view-budgets .brow { grid-template-columns: 40px 1fr auto auto; }
  #view-budgets .bc-action-btn { min-height: 40px; }
}

/* ── Settings, Accounts, Rules, Reports, sign-in (PK-009): same fields and actions, Pocket shapes ── */
#page-app .st-nav-item { border-radius: 12px; font: 600 14px var(--font-sans); }
#page-app .st-input, #page-app .rule-input, #page-app .rule-select, #page-app .rpt-modal-input { border-radius: var(--r-input); border-color: var(--border); background: var(--surface-2); font-size: 14px; }
#page-app .toggle-slider { border: 0; border-radius: 999px; }
#page-app .toggle-slider::before { border-radius: 50%; }
.rule-modal, #report-modal, #add-to-report-modal { border: 0; border-radius: var(--r-card); box-shadow: var(--shadow-lg); }
#page-app .logic-btn, #page-app .rule-add-btn, #page-app .rule-remove-btn { border-radius: var(--r-ctl); }
#page-app .rule-test-bar { border: 0; border-radius: 14px; }
#page-app .st-inv-badge { border-radius: 999px; }
#page-app .st-title { font: 800 22px var(--font-display); letter-spacing: -.01em; }

#page-login::before { display: none; }
#page-login .login-card-header, #page-login .login-term { display: none; }
#page-login .login-card { max-width: 400px; border: 0; border-radius: 28px; background: var(--surface); box-shadow: var(--shadow-lg); }
[data-theme="light"] #page-login .login-card { box-shadow: var(--shadow-lg); }
#page-login .login-body { padding: 36px 32px 30px; }
#page-login .login-tag { font: 500 15px var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--text-mid); margin-bottom: 26px; }
#page-login .login-divider span { font: 600 12px var(--font-sans); letter-spacing: .04em; }
#page-login .google-btn { border: 0; border-radius: var(--r-ctl); background: var(--surface-2); font: 600 15px var(--font-sans); min-height: 50px; }
#page-login .google-btn:hover { background: var(--surface-3); }
#page-login .login-demo-note { font: 400 12.5px/1.6 var(--font-sans); letter-spacing: 0; color: var(--text-dim); border-top-color: var(--border); }

/* ── Phone island tab bar (PK-015): the bottom bar floats inset from the edges and above the home indicator,
   fully rounded and translucent with a blur behind it (person's request, 2026-10-12). ── */
@media (max-width: 768px) {
  #app-mobile-bottom-nav {
    left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); min-height: 64px; padding: 6px 4px;
    border-radius: 30px; border: 1px solid color-mix(in srgb, var(--border-hi) 60%, transparent);
    background: color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
    box-shadow: var(--shadow-lg);
  }
  /* Labels stay AA when coloured cards scroll under the glass (checked over --hero at 86%) */
  #app-mobile-bottom-nav .app-bnav-item { color: var(--text-mid); }
  #app-mobile-bottom-nav .app-bnav-item.active { color: var(--accent-hi); }
  #fx-toast-container { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
  #page-app .rpt-fab-bar { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); left: 12px; right: 12px; border-radius: 22px; border-top: 0; box-shadow: var(--shadow-lg); }
  #page-app .app-main { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Phone pass (PK-011): readable text and touch-sized controls at phone widths.
   Text floors are generated from every rule that set text under 12px in these screens (tests/pocket-phone.test.cjs
   keeps the list honest): nothing under 12px, calendar day cells 11px (seven columns of ~50px), logo initials exempt. ── */
@media (max-width: 768px) {
  .goal-sub { font-size: 12px; }
  .goal-badge { font-size: 12px; }
  .goal-trend { font-size: 12px; }
  .bh-empty { font-size: 12.5px; }
  .bh-cat { font-size: 12.5px; }
  .bh-vals { font-size: 12.5px; }
  .data-stamp { font-size: 12px; }
  .txn-group-cell { font-size: 12px; }
  .txn-group-count { font-size: 12px; }
  #dsub-month .ana-calendar-mode { font-size: 12px; }
  #dsub-month .ana-calendar-context { font-size: 13px; }
  #dsub-month .ana-calendar-weekday { font-size: 11px; }
  #dsub-month .ana-calendar-date { font-size: 11px; }
  #dsub-month .ana-calendar-income { font-size: 11px; }
  #dsub-month .ana-calendar-note { font-size: 11px; }
  #dsub-month .ana-calendar-count { font-size: 11px; }
  #dsub-month .ana-calendar-bill b { font-size: 11px; }
  #dsub-month .ana-calendar-bill em { font-size: 11px; }
  #dsub-month .ana-calendar-status { font-size: 11px; }
  #dsub-month .month-merchant-search { font-size: 12px; }
  #dsub-month .month-merchant-option-name { font-size: 12px; }
  #dsub-month .month-merchant-option-meta { font-size: 12px; }
  #dsub-month .month-merchant-chip { font-size: 12px; }
  #dsub-month .month-merchant-limit { font-size: 12px; }
  #dsub-month .ana-calendar-merchant-total { font-size: 11px; }
  #dsub-month .ana-calendar-merchant-visits { font-size: 11px; }
  #dsub-month .ana-master-empty { font-size: 12px; }
  #dsub-month .ana-side-stat-lbl { font-size: 12px; }
  #dsub-month .ana-side-txn-meta { font-size: 12px; }
  #dsub-month .ana-side-txn-amt { font-size: 12.5px; }
  #dsub-month .ana-bill-review-head span { font-size: 12.5px; }
  #dsub-month .ana-bill-review-hint { font-size: 12.5px; }
  #dsub-month .ana-bill-review-state { font-size: 12.5px; }
  #dsub-month .ana-table-title { font-size: 12px; }
  #dsub-month .ana-table-empty { font-size: 12px; }
  #dsub-month .ana-calendar-income, #dsub-month .ana-calendar-note { font-size: 11px; }
  #page-app #dsub-month .ana-calendar-mode { font-size: 12px; }
  .spend-flag { font-size: 12px; }
  .spend-move { font-size: 12.5px; }
  .spend-move.is-new { font-size: 12px; }
  .hg-runway-meta { font-size: 12.5px; }
  .hg-need-sub small { font-size: 12.5px; }
  .hg-need-sub .lg-link { font-size: 12.5px; }
  .hg-tag { font-size: 12px; }
  .hg-clear-row.hg-fact .hg-dim { font-size: 12.5px; }
  .hg-z4 .lg-tile-h > b { font-size: 12.5px; }
  .hg-up .hg-urow .lg-num:first-child { font-size: 12.5px; }
  /* Tap targets: 44px for navigation and primary controls, 40px for chips and in-list actions */
  #page-app #dsub-month .ana-glance-nav > button { width: 44px; height: 44px; flex-basis: 44px; }
  #page-app .ana-side-panel .ana-txn-drawer-close { width: 48px; height: 48px; }
  #page-app .nav-theme-btn, #page-app .nav-gear-btn { width: 44px; height: 44px; }
  #page-app .spend-seg-btn { min-height: 48px; }  /* the Live · Shift pills: a full touch target (SL-012) */
  #page-app .spend-period, #view-transactions .txn-period .date-tab, #page-app .budget-nav-btn, #page-app .txn-sheet-close,
  #page-app .ana-calendar-mode { min-height: 44px; }
  #page-app .budget-nav-btn { min-width: 44px; }
  #page-app .home-btn, #page-app .btn, #page-app .lg-btn, #page-app .bc-action-btn { min-height: 40px; }
  #page-app .hg-hero .lg-link, #page-app .lg-tile-h .lg-link, #page-app .txn-link-btn { display: inline-flex; align-items: center; min-height: 40px; }
  #view-transactions .txn-check, #page-app .spend-toggle input { width: 22px; height: 22px; }
  #page-app .spend-toggle { min-height: 44px; }
  #page-app .txn-sheet-close { min-width: 44px; }
  /* Stragglers held by older two-id rules */
  #app-mobile-bottom-nav .app-bnav-item { font-size: 12px; }
  #view-transactions .data-stamp, #view-transactions .txn-group-rel, #view-transactions .txn-scroll-hint { font-size: 12.5px; }
  #page-app .view-subtitle, #page-app .txn-link-btn { font-size: 12px; }
  /* The grab strip of a sheet takes the drag instead of scrolling the page */
  .fx-drawer-grab, .fx-drawer-top, #view-transactions .txn-detail-header { touch-action: none; }
}

/* ── Liquid motion (PK-012): the tapped tile grows into its panel and shrinks back (js/pocket-motion.js);
   small smileys only on the Home all-clear and a goal that is done. All of it is off under reduced motion. ── */
.fx-morph { position: fixed; z-index: 800; pointer-events: none; background: var(--surface); box-shadow: var(--shadow-lg); }
/* SL-030: a lens card's ghost sits in a layer the page's own height (set inline), which clips it: a ghost at a taller old box never lengthens the page */
.fx-morph-layer { position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; pointer-events: none; z-index: 800; }
/* while a card grows or shrinks (js/pocket-motion.js fxFlip), the boxes sliding from their old places do not lengthen the page; clip changes no layout
   (no new formatting context, sticky headers still stick), and the column always reaches the window's bottom, so nothing visible is cut */
.fx-flipping #page-app .app-main { overflow: clip; }
.hg-mood-mini { position: static; display: inline-block; width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; animation: hg-mood-in .5s cubic-bezier(.3,1.6,.5,1) both; }
.hg-check:has(.hg-mood-mini) { color: inherit; }
.goal-smile { display: inline-block; margin-left: 6px; }
.goal-smile .hg-mood-mini { width: 16px; height: 16px; margin: 0; }
@media (prefers-reduced-motion: reduce) { .hg-mood-mini { animation: none; } .fx-morph, .fx-morph-layer { display: none; } }

/* ── Lime on money-in days (PK-016): the mockup's fluorescent paydays. Lime fill, dark lime ink, both themes. ── */
#dsub-month .ana-calendar-day.is-money-in { background: var(--lime); }
#dsub-month .ana-calendar-day.is-money-in :is(span, b, em, strong), b, em, strong) { color: var(--lime-ink); }
#dsub-month button.ana-calendar-day.is-money-in:hover { background: color-mix(in srgb, var(--lime) 85%, var(--text)); }
/* Lime is for paydays only; other tags (e.g. "biggest" expense) keep their quiet look */
.hg-tag.is-payday { background: var(--lime); color: var(--lime-ink); border-radius: 999px; padding: 1px 8px; font-weight: 700; }
/* Spent stays red on a payday (AA on lime at its weight); today and hover rings use lime ink so they show on lime */
#dsub-month .ana-calendar-day.is-money-in .ana-calendar-spent { color: var(--red-on-lime); }
#dsub-month .ana-calendar-day.is-money-in.is-today,
#dsub-month button.ana-calendar-day.is-money-in:hover { box-shadow: inset 0 0 0 2px var(--lime-ink); }

/* ── Old-theme leftovers (PK-020): the Transactions selection bar, the calendar/insights day drawer and the
   budget editor's trend and suggestion, in Pocket shapes and type. Behaviour unchanged. ── */
#page-app .rpt-fab-bar { border: 0; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-lg); }
@media (min-width: 769px) { #page-app .rpt-fab-bar { left: 16px; right: 16px; bottom: 16px; max-width: 820px; margin: 0 auto; padding: 10px 12px 10px 20px; } }
#page-app .rpt-fab-count { font: 700 14px var(--font-sans); color: var(--accent); }
#page-app .rpt-fab-bar .btn { border-radius: var(--r-ctl); font: 600 14px var(--font-sans); }
@media (min-width: 1101px) { #page-app .rpt-fab-bar { left: 288px; } }

.ana-side-panel { border-left: 0 !important; border-radius: 28px 0 0 28px; overflow: hidden; background: var(--surface) !important; box-shadow: var(--shadow-panel) !important; }
.ana-side-panel-header { border-bottom: 0 !important; padding: 18px 20px 10px !important; }
.ana-side-panel #ana-side-title { font: 700 19px var(--font-display); letter-spacing: 0; text-transform: none; color: var(--text); }
.ana-side-panel .ana-txn-drawer-close { width: 38px; height: 38px; display: inline-grid; place-items: center; padding: 0; border: 0 !important; border-radius: 50%;
  background: var(--surface-2) !important; color: var(--text) !important; font-size: 15px; }
.ana-side-panel .ana-txn-drawer-close:hover { background: var(--surface-3) !important; }
.ana-side-panel .ana-side-stats { gap: 8px !important; padding: 4px 16px 14px; background: transparent !important; border-bottom: 0 !important; }
.ana-side-panel .ana-side-stat { border-radius: 16px; background: var(--surface-2) !important; padding: 12px 6px !important; }
.ana-side-panel .ana-side-stat-val { font: 800 16px var(--font-numeric) !important; }
.ana-side-panel .ana-side-stat-lbl { font: 600 12px var(--font-sans) !important; letter-spacing: 0 !important; text-transform: none; }
.ana-side-panel .ana-side-txn-row { margin: 0 10px; padding: 11px 10px !important; border-bottom: 1px solid var(--border) !important; border-radius: 12px; }
.ana-side-panel .ana-side-txn-name { font: 600 14px var(--font-sans) !important; }
.ana-side-panel .ana-side-txn-meta { font: 400 12px var(--font-sans) !important; letter-spacing: 0 !important; color: var(--text-dim); }
.ana-side-panel .ana-side-txn-amt { font: 800 14.5px var(--font-numeric) !important; }
@media (max-width: 768px) { .ana-side-panel { border-radius: 28px 28px 0 0; } }

/* ── One Settings page (PK-022): every section stacked with room between them; the list follows the scroll ── */
#settings-shell .st-view.view:not(.hidden) + .st-view.view, #view-settings .st-section + .st-section { margin-top: 40px; }
#settings-shell .st-view, #settings-shell .st-section { scroll-margin-top: 20px; }
#settings-shell .st-nav { top: 16px; }
#settings-shell .st-title { font: 700 20px var(--font-display); }
#page-app .st-nav-item.is-danger { color: var(--red-ink, var(--red)); }
@media (max-width: 768px) {
  #settings-shell .st-view, #settings-shell .st-section { scroll-margin-top: 112px; }
  /* the chips stick under the app's top bar (44px); the strip itself names the page */
  #settings-shell .st-nav { top: 44px; padding-top: 8px; }
  #settings-shell .st-nav-title { display: none; }
  #page-app .st-nav-item { border: 0; border-radius: var(--r-ctl); background: var(--surface); }
  #page-app .st-nav-item.is-on { background: var(--accent-fill); color: #fff; }
}

/* ── Home, This month (PK-023): where the money went (category donut) beside the pace; the three numbers
   below get a smaller, shorter row. Phone: the donut sits above Spent and Net worth. ── */
.lg-grid.hg-grid { --hg-r2: 206px; }
.hg-grid .hg-cats { grid-column: span 12; height: var(--hg-r2); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 1101px) {
  .hg-grid .hg-cats, .hg-grid .hg-pace { grid-column: span 6; }
  .hg-grid .hg-stat, .hg-grid .hg-stat.hg-m-where { grid-column: span 4; height: auto; min-height: 0; }
}
.hg-m-cats .hg-ic { background: var(--accent-dim); color: var(--accent); }
.hg-cats-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 18px; align-items: center; }
.hg-donut-wrap { position: relative; width: 136px; height: 136px; }
.hg-donut { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.hg-donut circle { fill: none; stroke-width: 15; }
.hg-donut-track { stroke: var(--surface-2); }
.hg-donut-seg { stroke: var(--c); stroke-linecap: butt; transition: stroke-width .2s ease; cursor: default; }
.hg-donut-seg:hover { stroke-width: 19; }
.hg-donut-mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.hg-donut-mid b { font: 800 19px/1.1 var(--font-numeric); color: var(--text); }
.hg-donut-mid small { font: 600 12px var(--font-sans); color: var(--text-dim); }
.hg-cats-list { list-style: none; margin: 0; padding: 0; display: grid; align-content: center; }
.hg-cats-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 38px; gap: 9px; align-items: center; height: 27px; border-top: 1px solid var(--lg-line); font: 13px var(--font-sans); color: var(--text); }
.hg-cats-row:first-child { border-top: 0; }
.hg-cats-row i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.hg-cats-row .lg-num { font: 800 13px var(--font-numeric); }
.hg-cats-pct { font: 600 12px var(--font-numeric); color: var(--text-dim); text-align: right; }
.hg-cats .hg-empty { font-size: 13.5px; }
@media (max-width: 768px) {
  .hg-grid .hg-cats { grid-column: span 2; height: auto; order: 6; }
  .hg-cats-body { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; }
  .hg-donut-wrap { width: 112px; height: 112px; }
  .hg-cats-row { height: 30px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .hg-donut-seg { transition: none; } }

/* ── Pocket dropdowns (PK-026): on desktop the chosen selects open a rounded menu instead of the browser's square
   list (js/fx-select.js). The native select stays in the page, visually hidden, and keeps its handlers. ── */
.fxs { position: relative; display: inline-flex; vertical-align: middle; }
/* !important: older, more specific select rules (heights, min-widths, padding) must not give the hidden select a size */
.fxs > select.fxs-native { position: absolute !important; width: 1px !important; min-width: 0 !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: -1px !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 !important; }
.fxs-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; padding: 0 12px 0 16px;
  border: 0; border-radius: var(--r-ctl); background: var(--surface-2); color: var(--text); font: 600 14px var(--font-sans); cursor: pointer;
  white-space: nowrap; transition: background .15s ease, box-shadow .15s ease; }
.fxs-btn:hover { background: var(--surface-3); }
.fxs-btn:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.fxs-btn[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--accent); }
.fxs-btn:disabled { opacity: .5; cursor: default; }
.fxs-chev { width: 16px; height: 16px; flex: none; color: var(--text-mid); transition: transform .2s ease; }
.fxs-btn[aria-expanded="true"] .fxs-chev { transform: rotate(180deg); }
.fxs-for-txn-select .fxs-btn { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-hi); font-size: 13.5px; }
.fxs-for-txn-select .fxs-btn:hover { background: var(--surface-2); }
.fxs-for-ana-filter-select .fxs-btn { font: 500 13.5px var(--font-sans); min-width: 120px; }
/* SL-028: Spending's filter pills and Month by month's selects. In a pill the label stays the surface and the button inside is
   see-through, so the closed pill looks as the native select did; the open and focus rings go on the pill. The sub-nav is a
   scroll box (overflow-x: auto clips in both directions), so it lets an open menu out and is a scroll box again once it closes. */
#page-app .spend-filter .fxs { align-self: stretch; min-width: 0; }
#page-app .spend-filter .fxs-btn { min-height: 0; max-width: 220px; min-width: 0; gap: 8px; padding: 0 8px 0 0; background: transparent; box-shadow: none; outline: none; font: 600 14px var(--font-sans); color: var(--text); }
#page-app .spend-filter .fxs-label { overflow: hidden; text-overflow: ellipsis; }
#page-app .spend-filter:hover { background: var(--surface-2); }
#page-app .spend-filter:has(.fxs-btn[aria-expanded="true"]) { box-shadow: inset 0 0 0 2px var(--accent), var(--shadow-sm); }
#page-app .spend-filter:has(.fxs-btn:focus-visible) { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
#page-app .dash-subnav:has(.fxs-menu), #page-app .spend-filters:has(.fxs-menu) { overflow: visible; }
.months-add .fxs-btn, .months-net .fxs-btn { min-height: 32px; padding: 0 8px 0 12px; background: var(--surface); font: 600 13px var(--font-sans); }
.fxs-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 400; min-width: 100%; max-height: 320px; overflow-y: auto; margin: 0; padding: 6px;
  list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-md);
  scrollbar-width: thin; scrollbar-color: var(--border-hi) transparent; animation: fxs-in .14s cubic-bezier(.2,.8,.2,1); transform-origin: top; }
.fxs-menu.is-right { left: auto; right: 0; }
.fxs-menu.is-up { top: auto; bottom: calc(100% + 6px); transform-origin: bottom; }
@keyframes fxs-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fxs-menu { animation: none; } .fxs-chev { transition: none; } }
.fxs-opt { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; color: var(--text); font: 500 14px var(--font-sans);
  white-space: nowrap; cursor: pointer; }
.fxs-opt.is-active { background: var(--surface-2); }
.fxs-opt.is-selected { color: var(--accent-hi); font-weight: 700; }
.fxs-opt.is-selected::after { content: ""; width: 7px; height: 12px; margin-left: auto; border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: translateY(-2px) rotate(45deg); }
.fxs-opt[aria-disabled="true"] { opacity: .45; cursor: default; }

/* ── Top banners (PK-027): the free-trial, payment-failed and sample-workspace notices were a full-width strip with
   square edges and mono type; now a rounded Pocket pill with a real button. Same text, same links. ── */
#app-banner.app-banner-trial, #app-banner.app-banner-past-due, body.fx-preview #app-banner {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  width: fit-content; max-width: calc(100% - 32px); box-sizing: border-box; margin: 12px auto 4px; padding: 6px 6px 6px 16px;
  border: 0; border-radius: 999px; box-shadow: var(--shadow-sm);
  font: 600 13.5px/1.3 var(--font-sans); letter-spacing: 0; text-transform: none; text-align: left;
}
#app-banner .app-banner-ico { width: 18px; height: 18px; flex: none; }
#app-banner.app-banner-trial strong, #app-banner.app-banner-past-due strong { font-weight: 800; }
#app-banner.app-banner-trial a, #app-banner.app-banner-past-due a {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 999px;
  font: 700 13px var(--font-sans); text-decoration: none; white-space: nowrap;
}
#app-banner.app-banner-trial { background: var(--yellow-dim); color: var(--yellow); }
#app-banner.app-banner-trial a { background: var(--yellow); color: var(--mood-ink); }
#app-banner .app-banner-short { display: none; }
[data-theme="light"] #app-banner.app-banner-trial { background: #FFF0C7; color: #7A4F0F; border: 0; }
[data-theme="light"] #app-banner.app-banner-trial a { background: #7A4F0F; color: #fff; }
#app-banner.app-banner-past-due { background: var(--red-dim); color: var(--red-ink); }
#app-banner.app-banner-past-due a { background: var(--red-fill); color: #fff; }
#app-banner.app-banner-trial a:hover, #app-banner.app-banner-past-due a:hover { filter: brightness(1.08); }
#app-banner a:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
body.fx-preview #app-banner { background: var(--surface); color: var(--text-mid); gap: 14px; padding-right: 16px; }
body.fx-preview #app-banner .preview-back { min-height: 32px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px;
  background: var(--accent-fill); color: #fff; font: 700 13px var(--font-sans); }
body.fx-preview #app-banner .preview-signin { color: var(--accent-hi); }
@media (max-width: 520px) {
  #app-banner.app-banner-trial, #app-banner.app-banner-past-due, body.fx-preview #app-banner { font-size: 12.5px; gap: 8px; margin-top: 8px; flex-wrap: nowrap; padding-left: 14px; }
  #app-banner .app-banner-ico, #app-banner .app-banner-long { display: none; }
  #app-banner .app-banner-short { display: inline; }
  #app-banner.app-banner-trial a, #app-banner.app-banner-past-due a { padding: 0 12px; font-size: 12.5px; }
  body.fx-preview #app-banner { justify-content: space-between; width: auto; }
}

/* ── Reports in the sample workspace (PK-031): the Settings page shows only its Reports section, with a short how-to ── */
.st-preview-note { display: none; }
body.fx-preview .st-preview-note { display: block; margin: 0 0 14px; padding: 12px 16px; border-radius: 16px; background: var(--accent-dim); color: var(--text); font-size: 14px; line-height: 1.55; }
body.fx-preview .st-preview-note .lg-link { font: inherit; font-weight: 700; padding: 0; }
body.fx-preview #settings-shell .st-nav, body.fx-preview #view-connections, body.fx-preview #view-rules, body.fx-preview #view-settings { display: none !important; }
body.fx-preview #settings-shell:not([hidden]) { display: block; max-width: 900px; }
/* the sample has no Accounts page and no deductible marks: no Manage links, no Tax report; a Reports link in its banner */
body.fx-preview .hg-acct .lg-tile-h .lg-link, body.fx-preview #view-reports [onclick="openTaxReport()"] { display: none; }
body.fx-preview #app-banner .preview-reports { color: var(--text); font-weight: 700; }
body.fx-preview .hg-stat[onclick*="connections"] { cursor: default; pointer-events: none; }   /* net worth leads to Accounts, which the sample has not */
body.fx-preview #app-banner .pv-short { display: none; }
@media (max-width: 520px) { body.fx-preview #app-banner .pv-long { display: none; } body.fx-preview #app-banner .pv-short { display: inline; } }

/* ── Sign-in scenes (PK-032): soft colour blobs and one little money moment behind the card, one of six at random
   (js/login-scenes.js). Wide screens: an illustration either side of the card; narrower: one above it. Decorative,
   transform/opacity-only motion, still for reduced motion. ── */
.login-scene { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
#page-login .login-stage { position: fixed; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; }
.ls-blob { position: absolute; width: 520px; height: 520px; border-radius: 50%; filter: blur(70px); opacity: .55; }
.ls-blob1 { left: -120px; top: -80px; background: radial-gradient(circle, rgba(127,114,255,.55), transparent 65%); }
.ls-blob2 { right: -140px; bottom: -120px; background: radial-gradient(circle, rgba(240,107,184,.45), transparent 65%); }
[data-theme="light"] .ls-blob { opacity: .45; }
.ls-slot { position: absolute; top: 50%; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; animation: ls-in .7s cubic-bezier(.2,.8,.2,1) both; }
.ls-slot svg { display: block; width: 100%; height: auto; overflow: visible; }
.ls-a { left: max(28px, calc(50% - 600px)); width: 300px; transform: translateY(-50%); }
.ls-b { right: max(28px, calc(50% - 560px)); width: 220px; transform: translateY(-30%); animation-delay: .15s; }
.ls-chip { padding: 8px 16px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-md); color: var(--text); font: 700 14px var(--font-sans); white-space: nowrap; }
@keyframes ls-in { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
/* below ~1120px the side slots would reach the card: one illustration above it instead, the card starting under it */
@media (max-width: 1120px) {
  .ls-b { display: none; }
  .ls-a { left: 50%; top: 24px; width: 160px; transform: translateX(-50%); gap: 8px; }
  .ls-a .ls-chip { font-size: 12.5px; padding: 6px 12px; }
  #page-login .login-stage { align-items: flex-start; padding-top: 250px; }
}
@media (max-width: 1120px) and (max-height: 600px) { .ls-a { display: none; } #page-login .login-stage { align-items: center; padding-top: 24px; } }

.login-scene .ls-bob { animation: ls-bob 4.5s ease-in-out infinite; }
.login-scene .ls-slow { animation-duration: 6s; }
@keyframes ls-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.ls-fill { transform-box: fill-box; transform-origin: bottom; animation: ls-grow 2.4s cubic-bezier(.2,.8,.2,1) .4s both; }
@keyframes ls-grow { from { transform: scaleY(.25); } }
.ls-drop { animation: ls-drop 2.6s ease-in infinite; opacity: 0; }
.ls-d2 { animation-delay: .9s; } .ls-d3 { animation-delay: 1.8s; }
@keyframes ls-drop { 0% { opacity: 0; translate: 0 0; } 15% { opacity: 1; } 70% { opacity: 1; translate: 0 120px; } 85%, 100% { opacity: 0; translate: 0 130px; } }
.ls-ring { animation: ls-ring 2.4s cubic-bezier(.2,.8,.2,1) .3s both; }
@keyframes ls-ring { from { stroke-dasharray: 0 100; } }
.ls-twinkle { transform-box: fill-box; transform-origin: center; animation: ls-twinkle 2.4s ease-in-out infinite; }
.ls-t2 { animation-delay: 1.2s; }
@keyframes ls-twinkle { 0%, 100% { opacity: .3; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.1); } }
.ls-confetti { transform-box: fill-box; transform-origin: center; animation: ls-confetti 4s linear infinite; opacity: 0; }
.ls-c1 { animation-delay: .8s; } .ls-c2 { animation-delay: 1.6s; } .ls-c3 { animation-delay: 2.4s; } .ls-c4 { animation-delay: 3.2s; }
@keyframes ls-confetti { 0% { opacity: 0; transform: translateY(-10px) rotate(0); } 10% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(130px) rotate(320deg); } }
.ls-bar { transform-box: fill-box; transform-origin: bottom; animation: ls-grow 1.4s cubic-bezier(.2,.8,.2,1) both; }
.ls-b1 { animation-delay: .15s; } .ls-b2 { animation-delay: .3s; } .ls-b3 { animation-delay: .45s; } .ls-b4 { animation-delay: .6s; }
.ls-pop { transform-box: fill-box; transform-origin: center; animation: ls-pop .6s cubic-bezier(.3,1.6,.5,1) 1.4s both, ls-bobs 4s ease-in-out 2s infinite; }
@keyframes ls-pop { from { transform: scale(0); } }
@keyframes ls-bobs { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.ls-draw { stroke-dasharray: 1 1; animation: ls-draw 2s ease-out .5s both; }
@keyframes ls-draw { from { stroke-dashoffset: 1; } }
.ls-hop { animation: ls-hop 2.8s ease-in-out infinite; }
@keyframes ls-hop { 0% { opacity: 0; translate: -40px 0; } 20% { opacity: 1; } 55% { opacity: 1; translate: 0 44px; } 70%, 100% { opacity: 0; translate: 0 56px; } }
.ls-rain { animation: ls-rain 1.8s linear infinite; }
.ls-r1 { animation-delay: .6s; } .ls-r2 { animation-delay: 1.2s; }
@keyframes ls-rain { 0% { opacity: 0; translate: 0 0; } 20% { opacity: 1; } 100% { opacity: 0; translate: 0 52px; } }
.ls-sun { animation: ls-rise 2s cubic-bezier(.2,.8,.2,1) .2s both; }
@keyframes ls-rise { from { translate: 0 50px; } }
.ls-rays { transform-box: view-box; transform-origin: 120px 150px; animation: ls-spin 40s linear infinite; }
@keyframes ls-spin { to { transform: rotate(360deg); } }
.ls-tick { stroke-dasharray: 1 1; animation: ls-draw .6s ease-out both; }
.ls-k0 { animation-delay: .8s; } .ls-k1 { animation-delay: 1.3s; } .ls-k2 { animation-delay: 1.8s; }
.ls-roof { animation: ls-roof .9s cubic-bezier(.3,1.4,.5,1) .4s both; }
@keyframes ls-roof { from { opacity: 0; translate: 0 -50px; } }
.ls-puff { animation: ls-puff 3s ease-out infinite; }
.ls-p2 { animation-delay: 1.5s; }
@keyframes ls-puff { 0% { opacity: 0; translate: 0 10px; } 30% { opacity: 1; } 100% { opacity: 0; translate: 6px -26px; } }
.ls-window { animation: ls-light .5s ease-out 1.3s both; }
.ls-w2 { animation-delay: 1.7s; }
@keyframes ls-light { from { opacity: .15; } }
.ls-swing { transform-box: fill-box; transform-origin: 30% 50%; animation: ls-swing 3s ease-in-out infinite; }
@keyframes ls-swing { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
[data-theme="light"] .login-scene .ls-twinkle { fill: #F5C04A; }
[data-theme="light"] .login-scene .ls-puff { fill: #C4C0E0; }
@media (prefers-reduced-motion: reduce) { .login-scene *, .login-scene *::before { animation: none !important; } .ls-drop, .ls-confetti, .ls-hop, .ls-rain { opacity: 0; } }

/* Small phones: the amount column was 128px wide for any amount, squeezing names to ~100px. */
@media (max-width: 480px) { /* TXN-phone */
  #view-transactions .txn-table col.txn-col-amt { width: 104px; }  /* "-$123,456.78" at 15px/800 still fits */
  #view-transactions td.txn-amt { font-size: 15px; padding-right: 10px; }
  #view-transactions .txn-row td.txn-desc-cell { padding-left: 6px; padding-right: 4px; }
}

/* Recurring: a charge first seen in the last three months (SL-003) */
#dsub-subscriptions .spend-flag.is-new { background: var(--lime); color: var(--lime-ink); }

/* ── Spending filters (SL-008): one row under the Live · Compare pills, a month pill and an accounts pill ── */
#page-app .dash-subnav { flex-wrap: wrap; }  /* the pills, then the filter row on its own line */
#page-app .spend-filters { flex-basis: 100%; width: 100%; display: flex; justify-content: center; gap: 8px; padding: 0 12px 10px; }
#page-app .spend-filters.hidden { display: none; }
/* SL-025 (the person: the pills sat too far left). The pills centre over the content and the filter row sits under them,
   as the tablet and phone already do: Live's row (Month · Baseline · Accounts, 668px) is wider than the room centred pills
   leave beside them on any laptop. SL-027 (the person: the filters moved off to the right, out of the eye line): that holds
   at every width; a wide window no longer moves the filters to the right edge. */
#page-app .spend-filter { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 6px 0 14px; border-radius: var(--r-ctl); background: var(--surface); box-shadow: var(--shadow-sm); font: 600 13px var(--font-sans); color: var(--text-dim); }
#page-app .spend-filter select { min-height: 40px; border: 0; background: transparent; color: var(--text); font: 600 14px var(--font-sans); cursor: pointer; max-width: 220px; }
#page-app .spend-filter select:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 1px; border-radius: 8px; }
@media (max-width: 768px) {
  #page-app .spend-filters { padding: 0 10px 8px; }
  #page-app .spend-filter, #page-app .spend-filter select { min-height: 48px; }
  #page-app .spend-filter { flex: 1; min-width: 0; padding-left: 10px; }
  #page-app .spend-filter select { max-width: 100%; min-width: 0; }
}
@media (max-width: 480px) {
  /* Short labels come from js (compact); no label text, and the row scrolls sideways rather than cut a value short */
  #page-app .spend-filters { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  #page-app .spend-filters::-webkit-scrollbar { display: none; }
  #page-app .spend-filter > span { display: none; }
  #page-app .spend-filter { flex: none; padding-left: 8px; }
  #page-app .spend-filter select { width: auto; max-width: none; font-size: 13.5px; }
}
/* SL-032 (the person: "I cannot identify where the first row and the second row starts"): two levels, two looks. The pills
   above are a filled, raised control that picks the page; the filters under them sit in one outlined tray, unfilled and
   divided, as wide as its filters, so it reads as the second strip. The phone keeps its full-width row. */
@media (min-width: 769px) {
  #page-app .dash-subnav #dsn-tabs-container { flex-basis: 100%; }  /* the pills have their own line; the tray, under them, is its own width */
  #page-app .dash-subnav .spend-filters { flex: none; width: auto; max-width: calc(100% - 24px); margin: 0 auto 6px; padding: 0 2px; gap: 0; align-items: center; border-radius: calc(var(--r-ctl) + 3px); background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
  #page-app .dash-subnav .spend-filter { background: transparent; box-shadow: none; }
  /* Shift's 3M · 6M · YTD (the person, 2026-10-20: the chips were bigger than the strip behind them): no track of its own in
     the tray, and the picked pill is drawn 4px inside its 36px target (a clear border, the fill clipped to the padding box) */
  #page-app .dash-subnav .spend-range { padding: 0; gap: 0; background: transparent; box-shadow: none; }
  #page-app .dash-subnav .spend-range-btn { border: 4px solid transparent; padding: 0 10px; }
  #page-app .dash-subnav .spend-range-btn.active { background-clip: padding-box; }  /* after the fill: its shorthand resets the clip */
  #page-app .dash-subnav .spend-filters > * + * { position: relative; margin-left: 9px; }
  #page-app .dash-subnav .spend-filters > * + :not(.spend-vs)::before {  /* Shift's "vs May – Jul" belongs to its period: no divider between them */
    content: ''; position: absolute; left: -5px; top: 50%; width: 1px; height: 18px; margin-top: -9px; background: var(--border); }
}

/* ── Spending › Live (SL-001, SL-009, SL-012): the overview bento. Position · Rhythm on top, Where it went below ── */
#dsub-live { display: grid; gap: 14px; max-width: 1180px; margin: 0 auto; padding: 8px 0 0; grid-template-columns: minmax(0, 1fr); }
#dsub-live.hidden { display: none; }
.live-bento { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.live-sec { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 8px; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-sm); padding: 12px 14px 14px; }
.live-sec-h { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.live-sec-n { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--accent-dim); color: var(--accent-hi); font: 700 11px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
[data-theme="light"] .live-sec-n { color: var(--accent); }
.live-sec-h h2 { margin: 0; font: 800 18px var(--font-display); color: var(--text); min-width: 0; }
.live-sec-meta { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.live-sec-expand { flex: none; margin-left: auto; width: 32px; height: 32px; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--text-mid); font-size: 16px; cursor: pointer; }
@media (pointer: coarse) and (min-width: 769px) { .live-sec-expand { width: 48px; height: 48px; border-radius: 14px; } }
.live-sec-expand:hover { background: var(--surface-3); color: var(--text); }
.live-sec-expand[aria-expanded="true"] { background: var(--accent-fill); color: #fff; }
.live-sec-body { min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; }
#live-stage .spend-view, .live-sec-body .spend-view { padding-top: 0; }
/* The stage container used to be content-sized (its month chips made it wide); it fills its card (SL-008). */
#live-sec-flow > .live-sec-body > #dsub-flow { width: 100%; max-width: none; justify-self: stretch; margin: 0; }
#dsub-month.live-days .ana-month-glance { box-shadow: none; }
/* Rhythm (SL-014): the headline over the calendar, then the calendar filling the rest of the card */
.rh-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 0 0 8px; }
.rh-day { font: 600 13px var(--font-sans); color: var(--text-mid); }
.rh-spent { font: 800 20px/1 var(--font-display); color: var(--text); }
.rh-usual { font-size: 13px; color: var(--text-dim); }
.rh-chip { margin-left: auto; align-self: center; padding: 3px 10px; border-radius: 999px; background: var(--lime); color: var(--lime-ink); font: 700 12px var(--font-sans); }
.rh-chip.is-over { background: var(--red-dim); color: var(--red-ink); }
.rh-chip.is-nohistory, .rh-chip.is-empty { background: var(--surface-2); color: var(--text-mid); }
#live-sec-rhythm > .live-sec-body { display: flex; flex-direction: column; overflow: hidden; }  /* the finder's list is a popover (top layer), so nothing inside needs to hang out */
#live-sec-rhythm .rh-headline { flex: none; }
#dsub-month.live-days { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#dsub-month.live-days .ana-month-glance { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#dsub-month.live-days .ana-calendar-wrap { flex: 1; min-height: 0; padding: 6px 0 0; overflow: auto; }
#dsub-month.live-days .ana-calendar { height: 100%; min-width: 0; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); grid-template-rows: auto; }
#dsub-month.live-days .ana-calendar-day { min-height: 0; padding: 3px 4px; overflow: hidden; }
#dsub-month.live-days .ana-calendar-count { display: none; }
#dsub-month.live-days .ana-glance-head { padding: 0 0 6px; }
#dsub-month.live-days .ana-calendar-modes { padding: 2px; }
#dsub-month.live-days .ana-calendar-due-sum { display: block; font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; color: var(--pink-ink); }
#dsub-month.live-days .ana-calendar-due-sum.is-paid { color: var(--green-ink); }
/* The finder: one row, the search box beside the chosen merchants (chips scroll sideways), the count line only when it errs */
#dsub-month.live-days .month-merchant-tools { grid-template-columns: minmax(150px, .8fr) minmax(0, 1.2fr); gap: 8px; align-items: center; padding: 0 0 4px; }
#dsub-month.live-days .month-merchant-search { height: 28px; }
#dsub-month.live-days .month-merchant-selected { flex-wrap: nowrap; min-height: 0; overflow-x: auto; scrollbar-width: none; }
#dsub-month.live-days .month-merchant-selected::-webkit-scrollbar { display: none; }
#dsub-month.live-days .month-merchant-chip { flex: none; }
#dsub-month.live-days .month-merchant-limit { display: none; width: auto; flex: none; white-space: nowrap; }
#dsub-month.live-days .month-merchant-limit.is-error { display: block; }
@media (min-width: 769px) {
  /* Inside the card every row is lean, so a five-week month has room: a 30px modes row, a 16px weekday row, 3px cell padding */
  #dsub-month.live-days .ana-calendar-mode { height: 30px; min-height: 30px; font-size: 12px; }
  #dsub-month.live-days .ana-calendar-weekday { padding: 2px; font-size: 10px; line-height: 1.2; }
  #dsub-month.live-days .ana-calendar-wrap { padding-top: 4px; }
  #dsub-month.live-days .ana-calendar-date { margin-bottom: 1px; font-size: 10px; line-height: 1.1; }
  #dsub-month.live-days .ana-calendar-spent { font-size: 11.5px; line-height: 1.15; }
  #dsub-month.live-days .ana-calendar-income { margin-top: 0; font-size: 9px; line-height: 1.1; }
  #dsub-month.live-days .ana-calendar-context.is-shown { display: none; }  /* the mode's explainer costs two rows the calendar needs */
  /* Until the card is expanded the cells carry one fact each: the amount, the due total, the chosen merchants' total.
     The merchant line, the bill rows and status, the logo stack and the visits line come back in the expanded card */
  #live-sec-rhythm:not(.is-expanded) #dsub-month.live-days :is(.ana-calendar-note, .ana-calendar-bill, .ana-calendar-status, .ana-calendar-merchant-stack, .ana-calendar-merchant-visits) { display: none; }
  #live-sec-rhythm:not(.is-expanded) #dsub-month.live-days .ana-calendar-merchant-total { margin: 0; font-size: 11.5px; }
  /* The expanded card at 1280×800 gives a day about 80px: the date, two bill rows, "+N more" and a one-line status fit when the gaps are 1-2px */
  #live-sec-rhythm.is-expanded #dsub-month.live-days .ana-calendar-day { padding: 4px 6px; }
  #live-sec-rhythm.is-expanded #dsub-month.live-days .ana-calendar-due-sum { display: none; }  /* the rows carry the amounts */
  #live-sec-rhythm.is-expanded #dsub-month.live-days .ana-calendar-bill { margin-top: 1px; }
  #live-sec-rhythm.is-expanded #dsub-month.live-days .ana-calendar-due-more { margin-top: 2px; }
  #live-sec-rhythm.is-expanded #dsub-month.live-days .ana-calendar-status { margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* A short laptop window (1280×800): the cells are about 30px, so the date and the one fact share a line */
@media (min-width: 769px) and (max-height: 820px) {
  #live-sec-rhythm:not(.is-expanded) #dsub-month.live-days .ana-calendar-day { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; flex-wrap: wrap; padding: 2px 4px; }
  #live-sec-rhythm:not(.is-expanded) #dsub-month.live-days .ana-calendar-date { margin: 0; }
  #live-sec-rhythm:not(.is-expanded) #dsub-month.live-days .ana-calendar-income { display: none; }
}
@media (max-width: 768px) {
  #dsub-month.live-days .ana-calendar-day { min-height: 56px; }  /* the phone scrolls the page, so the cells keep their height */
  /* a phone's cell is ~45px wide: the date, one fact and the merchant's name; the income line (the cell is lime), the bill rows and the status wait in the day sheet */
  #dsub-month.live-days :is(.ana-calendar-income, .ana-calendar-bill, .ana-calendar-status, .ana-calendar-due-more) { display: none; }
  #dsub-month.live-days .month-merchant-tools { grid-template-columns: 1fr; }
  #dsub-month.live-days .month-merchant-search { height: 44px; }
  #dsub-month .month-merchant-option { min-height: 44px; align-items: center; }  /* a tap target (review round 2) */
}
@media (max-width: 768px) { .live-sec-expand { display: none; } }
@media (min-width: 769px) {
  .live-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #live-sec-flow { grid-column: 1 / -1; }
  /* Expanded: the card takes the stage; the other two stay live, smaller. Position or Rhythm expanded: a right rail.
     Where it went expanded: it keeps the full width and most of the height, the other two sit in a row under it. */
  .live-bento.has-expanded { grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .live-bento.has-expanded .live-sec.is-expanded { grid-column: 1; grid-row: 1 / span 2; }
  .live-bento.has-expanded .live-sec:not(.is-expanded) { grid-column: 2; }
  .live-bento.has-expanded #live-sec-flow:not(.is-expanded) { grid-column: 2; grid-row: 2; }
  .live-bento.has-expanded.expanded-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) minmax(0, 180px); }
  /* under the expanded flow the two small cards keep their headline: the hero and the pace line; the tiles and the calendar wait (SL-015) */
  .live-bento.expanded-flow #live-sec-position .pos-tiles, .live-bento.expanded-flow #live-sec-rhythm #dsub-month { display: none; }
  .live-bento.has-expanded #live-sec-flow:not(.is-expanded) :is(.fl-stage, .fl-foot, .fl-hint) { display: none; }  /* in the rail the flow keeps its legend; a 220px stage is a thumbnail */
  .live-bento.expanded-flow #live-sec-flow { grid-column: 1 / -1; grid-row: 1; }
  .live-bento.expanded-flow #live-sec-position { grid-column: 1; grid-row: 2; }
  .live-bento.expanded-flow #live-sec-rhythm { grid-column: 2; grid-row: 2; }
}
@media (min-width: 1101px) {
  /* The laptop fit: the bento is sized to the window (js sets --live-h); the cards scroll, the page does not */
  .live-bento { height: var(--live-h, auto); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1.4fr) minmax(0, 1fr); }
  .live-bento.has-expanded { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .live-bento.has-expanded.expanded-flow { grid-template-rows: minmax(0, 1fr) minmax(0, 180px); }
}
/* ── Position (SL-013): the violet hero and four tiles with sparklines; a tile opens its transactions ── */
.pos-hero { position: relative; display: grid; gap: 3px; background: var(--hero); color: #fff; border-radius: var(--r-tile); padding: 10px 14px; box-shadow: var(--shadow-sm); }
.pos-hero-k { display: flex; justify-content: space-between; gap: 8px; font: 600 11.5px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; opacity: .92; }
.pos-asof { font: 600 11px var(--font-sans); letter-spacing: 0; text-transform: none; opacity: .9; white-space: nowrap; }
.pos-hero-v { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 800 30px/1 var(--font-display); min-width: 0; }
.pos-chip { font: 700 12px var(--font-sans); padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; }
.pos-hero-s { margin: 0; font-size: 13px; line-height: 1.3; max-width: 44ch; }
.pos-hero-badge { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.16); font: 800 22px var(--font-display); }
.pos-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.pos-tile { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k k" "v s" "d d"; gap: 0 10px; align-items: end; text-align: left; border: 0; border-radius: var(--r-tile); background: var(--surface-2); color: var(--text); padding: 8px 12px 7px; cursor: pointer; min-height: 48px; font-family: var(--font-sans); }
.pos-tile:hover, .pos-tile:focus-visible { box-shadow: 0 0 0 2px var(--accent) inset; outline: none; }
.pos-tile-k { grid-area: k; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0 8px; font: 600 12px/1.3 var(--font-sans); color: var(--text-mid); }
.pos-tile-k small { font-size: 12px; color: var(--text-mid); }
.pos-tile-v { grid-area: v; font: 800 20px/1.1 var(--font-display); color: var(--text); }
.pos-tile.is-income .pos-tile-v { color: var(--green-ink); }
.pos-tile.is-rate .pos-tile-v { color: var(--green-ink); }
.pos-tile-d { grid-area: d; font: 600 12px/1.3 var(--font-sans); color: var(--text-mid); min-width: 0; overflow-wrap: anywhere; }  /* the words wrap; they are never cut */
.pos-tile-d.is-down, .pos-tile.is-spent .pos-tile-d.is-down, .pos-tile.is-kept .pos-tile-d.is-up, .pos-tile.is-income .pos-tile-d.is-up { color: var(--green-ink); }
.pos-tile.is-spent .pos-tile-d.is-up, .pos-tile.is-kept .pos-tile-d.is-down, .pos-tile.is-income .pos-tile-d.is-down { color: var(--red-ink); }
.pos-spark { grid-area: s; color: var(--accent); align-self: center; }
.pos-tile.is-spent .pos-spark { color: var(--red-ink); }
.pos-tile.is-income .pos-spark, .pos-tile.is-kept .pos-spark { color: var(--green-ink); }
.pos-tile.is-rate .pos-spark { color: var(--green-ink); }
.has-expanded .live-sec:not(.is-expanded) .pos-tiles { grid-template-columns: minmax(0, 1fr); }
/* SL-023: on a laptop Position fills its card to the bottom like Rhythm beside it: the tiles share the room under the hero,
   their figures spaced inside, the sparklines drawn larger. Not when Position itself is expanded (its own layout) or on phones. */
@media (min-width: 1101px) {
  #live-sec-position:not(.is-expanded) > .live-sec-body { display: grid; grid-template-rows: minmax(0, 1fr); }
  #live-sec-position:not(.is-expanded) #live-position { display: grid; grid-template-rows: auto minmax(auto, 1fr); gap: 6px; }  /* auto floors: in the rail (less room than content) the tiles keep their size and the body scrolls as before */
  #live-sec-position:not(.is-expanded) .pos-tiles { margin-top: 0; grid-auto-rows: minmax(auto, 1fr); }
  #live-sec-position:not(.is-expanded) .pos-tile { grid-template-rows: auto minmax(auto, 1fr) auto; align-content: stretch; }
  #live-sec-position:not(.is-expanded) .pos-tile { container-type: inline-size; }
  #live-sec-position:not(.is-expanded) .pos-spark { width: clamp(64px, 100cqi - 100px, 112px); height: auto; }  /* the room beside the figure (about 100px of text and gap), 64 to 112px; the viewBox keeps the line's proportions and its stroke does not scale */
  .live-bento.expanded-flow #live-sec-position #live-position { grid-template-rows: auto; }  /* under the expanded flow the hero is alone */
}
/* Phone tiles: the number gets the whole width and the sparkline moves under the words (the rail keeps "v s" at 252px) */
@media (max-width: 480px) {
  .pos-tile { grid-template-areas: "k k" "v v" "d d" "s s"; }
  .pos-spark { justify-self: start; }
}
.has-expanded .live-sec:not(.is-expanded) .pos-hero-badge { display: none; }
@media (max-width: 768px) {
  #dsub-live { padding: 0 0 8px; gap: 10px; }
  .pos-hero-v { font-size: 30px; }
  .pos-hero-badge { display: none; }
}

/* ── Spending › Shift (SL-016): the period against the one before it ── */
#dsub-shift { display: grid; gap: 14px; max-width: 1180px; margin: 0 auto; padding: 8px 0 0; grid-template-columns: minmax(0, 1fr); grid-template-areas: "track" "cats" "driver" "rail" "months"; }
#dsub-shift > .shift-track { grid-area: track; } #dsub-shift > .shift-cats { grid-area: cats; } #dsub-shift > .shift-driver { grid-area: driver; } #dsub-shift > .shift-rail { grid-area: rail; } #dsub-shift > .shift-months { grid-area: months; }
#dsub-shift > .shift-driver:empty { display: none; }
@media (min-width: 1101px) {
  /* a laptop: the lens cards sit in a rail at the right of Shift by category (SL-017), the rail one grid item so its cards
     stack with their own gap. An expanded card grows where it sits (SL-022): the rail column widens for it (1fr : 1.25fr),
     Shift by category narrows and keeps its own height, the other two cards keep their order; nothing moves to the top */
  #dsub-shift { grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "track track" "cats rail" "driver rail" "months months"; grid-template-rows: auto auto 1fr auto; align-items: start; }
  #dsub-shift > .shift-cats { align-self: stretch; }
  /* SL-029 (the person: white space in the panel just to match the rail, then the insight card): the driver card sits right
     under Shift by category, beside the rail, which spans both rows; a taller rail's extra height goes to the driver's row
     (the 1fr), under the card, not inside the panel. With no driver card the panel spans both rows and matches the rail. */
  #dsub-shift:not(.is-months):has(> .shift-driver:empty) { grid-template-areas: "track track" "cats rail" "cats rail" "months months"; }
  #dsub-shift.has-lens { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  #dsub-shift.has-lens > .shift-cats { align-self: start; }
}
.shift-rail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; min-width: 0; }  /* the column is the rail's own width: a card animating its width (SL-022) never widens the column and the cards beside it */
.lens-card { border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-sm); padding: 12px 14px 12px; min-width: 0; }
.lens-head { display: flex; align-items: flex-start; gap: 8px; }
.lens-titles { min-width: 0; flex: 1; }
.lens-kicker { font: 700 11px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-hi); }
.lens-trend .lens-kicker { color: var(--accent-hi); } .lens-merchants .lens-kicker { color: var(--green-ink); } .lens-recurring .lens-kicker { color: var(--pink-ink); }
.lens-title { margin: 2px 0 0; font: 800 16px var(--font-display); color: var(--text); }
.lens-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--text-dim); }
.lens-expand { flex: none; width: 32px; height: 32px; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--text-mid); font-size: 15px; cursor: pointer; }
.lens-expand:hover { background: var(--surface-3); color: var(--text); }
.lens-expand[aria-expanded="true"] { background: var(--accent-fill); color: #fff; }
.lens-body { margin-top: 10px; }
.lens-line { margin: 8px 0 0; font-size: 12.5px; color: var(--text-mid); }
.lens-line b { color: var(--text); font-family: var(--font-numeric); }
.lens-dim { color: var(--text-dim); }
.lens-story { margin: 0 0 10px; font: 500 14px/1.45 var(--font-sans); color: var(--text-mid); }
.lens-story b { color: var(--text); font-family: var(--font-numeric); }
.lens-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; align-items: end; height: 72px; }
.lens-bars.is-big { height: 180px; gap: 8px; }
.lens-bar { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; height: 100%; min-width: 0; text-align: center; }
.lens-bar i { display: block; align-self: end; border-radius: 4px 4px 0 0; background: var(--surface-3); min-height: 2px; }
.lens-bar.is-period i { background: var(--accent-fill); }
.lens-bar.is-now i { box-shadow: 0 0 0 2px var(--lime); }
.lens-bar.is-future i { background: var(--surface-2); }
.lens-bar small { font-size: 10px; color: var(--text-dim); line-height: 1.4; }
.lens-bar b { font-size: 10.5px; color: var(--text-mid); font-family: var(--font-numeric); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lens-rows { display: grid; }
.lens-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name amt" "bar delta"; column-gap: 10px; row-gap: 3px; align-items: center; width: 100%; padding: 7px 0; border: 0; border-top: 1px solid var(--border); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; min-height: 44px; }
.lens-row:first-child { border-top: 0; }
.lens-row:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.lens-row:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: -2px; border-radius: 8px; }
.lens-row-name { grid-area: name; display: flex; align-items: center; gap: 6px; min-width: 0; font: 600 13px var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lens-row-bar { grid-area: bar; height: 5px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.lens-row-bar i { display: block; height: 100%; border-radius: 3px; background: var(--green-ink); }
.lens-row-amt { grid-area: amt; font: 800 13px var(--font-numeric); text-align: right; }
.lens-row-amt small { font-weight: 500; color: var(--text-dim); }
.lens-row-delta { grid-area: delta; font-size: 11.5px; color: var(--text-dim); text-align: right; }
.lens-row-delta.is-up { color: var(--red-ink); } .lens-row-delta.is-down { color: var(--green-ink); }
.lens-row-next { grid-area: delta; font-size: 11.5px; color: var(--text-dim); text-align: right; }
.lens-recurring .lens-row { grid-template-areas: "name amt" "name delta"; }
.lens-flag { padding: 1px 7px; border-radius: 999px; font: 700 10.5px var(--font-sans); font-style: normal; white-space: nowrap; }
.lens-flag.is-up { background: var(--red-dim); color: var(--red-ink); } .lens-flag.is-down { background: var(--green-dim); color: var(--green-ink); } .lens-flag.is-new { background: var(--accent-dim); color: var(--accent-hi); }
.lens-paid-due { display: flex; gap: 12px; margin-top: 8px; font-size: 12.5px; color: var(--text-mid); }
.lens-paid-due b { color: var(--text); font-family: var(--font-numeric); }
.lens-full > .spend-view { padding-top: 0; }
/* SL-024: a long list scrolls inside the open card instead of growing it past the window. The cap is the height the window leaves
   (the card's header above, the page's own room below; 320px at least), a thin scrollbar shows where the list is, and the Merchants
   toolbar or the list's column header stay pinned while the rows pass under them. A short list opens at its own height. */
.lens-card.is-expanded .lens-full { max-height: max(320px, calc(100dvh - 220px)); overflow-y: auto; scrollbar-width: thin; scroll-padding-top: 32px; }  /* scroll-padding: a row focused by keyboard scrolls in under the pinned header, not behind it */
@media (max-width: 768px) { .lens-card.is-expanded .lens-full { max-height: max(320px, calc(100dvh - 240px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))); scroll-padding-top: 56px; } }  /* the phone's top bar and tab bar (124px) and their safe areas; its pinned headers are 56px touch rows */
#page-app .lens-full .spend-list { overflow: clip; }  /* (over #page-app .spend-list) clip keeps the corners without making the list a scroll container (a sticky header inside overflow: hidden never sticks) */
.lens-full .spend-toolbar, .lens-full .spend-row.is-head { position: sticky; top: 0; z-index: 2; background: var(--surface); }
.lens-full .spend-toolbar { margin: 0; padding: 0 0 8px; }
@media (max-width: 768px) { .lens-expand { width: 44px; height: 44px; } .lens-row { min-height: 48px; } }
@media (pointer: coarse) and (min-width: 769px) { .lens-expand { width: 48px; height: 48px; } .lens-row { min-height: 48px; } .lens-full .spend-row { min-height: 48px; } .lens-full .spend-toggle { min-height: 48px; display: inline-flex; align-items: center; gap: 10px; } .lens-full .spend-toggle input { width: 24px; height: 24px; } }
#dsub-shift.hidden { display: none; }
.shift-track-card { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-sm); }
.shift-track-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 12px; background: var(--surface-2); color: var(--text-mid); font: 800 18px var(--font-display); }
.shift-track-icon.is-up { background: var(--red-dim); color: var(--red-ink); }
.shift-track-icon.is-down { background: var(--green-dim); color: var(--green-ink); }
.shift-track-text { margin: 0; flex: 1 1 320px; min-width: 0; font: 700 15px/1.35 var(--font-display); color: var(--text); }
.shift-track-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; font-size: 12.5px; color: var(--text-dim); }
.shift-track-sel { margin-right: 2px; }
.shift-track-tot { margin-left: 10px; white-space: nowrap; }
.shift-track-tot b { color: var(--text); font-family: var(--font-numeric); }
.shift-mchip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-mid); font: 600 11.5px var(--font-sans); white-space: nowrap; }
.shift-mchip.is-on { background: var(--accent-dim); color: var(--accent-hi); }
.shift-mchip.is-up { background: var(--red-dim); color: var(--red-ink); }
.shift-mchip.is-down { background: var(--green-dim); color: var(--green-ink); }
.shift-panel { border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-sm); padding: 14px 16px 10px; min-width: 0; }
.shift-cats-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.shift-cats-head h2 { margin: 0; font: 800 17px var(--font-display); color: var(--text); }
.shift-comparing { margin: 3px 0 0; font-size: 12.5px; color: var(--text-dim); }
.shift-cats-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.shift-mode { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-ctl); background: var(--surface-2); }
.shift-mode button { min-height: 30px; padding: 0 12px; border: 0; border-radius: var(--r-ctl); background: none; color: var(--text-mid); font: 600 12.5px var(--font-sans); cursor: pointer; }
.shift-mode button.active { background: var(--accent-fill); color: #fff; }
.shift-legend { display: inline-flex; gap: 12px; align-items: center; font: 600 12px var(--font-sans); color: var(--text-mid); white-space: nowrap; }
.shift-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.shift-legend .is-less i { background: var(--green-ink); }
.shift-legend .is-more i { background: var(--red-ink); }
.shift-legend .is-net { color: var(--text); }
.shift-rows { display: grid; }
.shift-row { display: grid; grid-template-columns: minmax(200px, 1.4fr) auto minmax(80px, .8fr) auto; align-items: center; gap: 8px 14px; width: 100%; padding: 10px 2px; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; min-height: 56px; }
.shift-row:last-of-type { border-bottom: 0; }
.shift-row:hover { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
.shift-row:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: -2px; border-radius: 10px; }
.shift-row-name { display: grid; grid-template-columns: 10px auto 1fr; grid-template-areas: "dot name tag" "sub sub sub"; align-items: center; column-gap: 6px; min-width: 0; }
.shift-row-name .shift-dot { grid-area: dot; }
.shift-row-name b { grid-area: name; font: 700 14px var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shift-row-name small { grid-area: sub; font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shift-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--fl-c, var(--accent)); flex: none; }
.shift-tag { grid-area: tag; justify-self: start; padding: 1px 7px; border-radius: 999px; font: 700 10.5px var(--font-sans); font-style: normal; letter-spacing: .04em; text-transform: uppercase; }
.shift-tag.is-new { background: var(--accent-dim); color: var(--accent-hi); }
.shift-tag.is-gone { background: var(--surface-2); color: var(--text-dim); }
.shift-row-months { display: flex; gap: 4px; flex-wrap: wrap; }
.shift-bar { display: grid; grid-template-columns: 1fr 1fr; align-items: center; height: 14px; position: relative; }
.shift-bar::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--border-hi); }
.shift-bar-less { display: flex; justify-content: flex-end; }
.shift-bar-less i { display: block; height: 14px; border-radius: 7px 0 0 7px; background: var(--green-ink); min-width: 3px; }
.shift-bar-more i { display: block; height: 14px; border-radius: 0 7px 7px 0; background: var(--red-ink); min-width: 3px; }
.shift-row-delta { display: grid; justify-items: end; min-width: 68px; }
.shift-row-delta b { font: 800 14px var(--font-numeric); }
.shift-row-delta small { font-size: 11.5px; color: var(--text-dim); }
.shift-row-delta.is-up b { color: var(--red-ink); }
.shift-row-delta.is-down b { color: var(--green-ink); }
/* A row on one line needs about 470px of panel (438px inside its 16px padding). The panel is a container, and below that
   the row stacks as on a phone, whatever made the panel narrow: a small laptop, or an open lens card beside it (SL-022). */
#dsub-shift > .shift-cats { container-type: inline-size; }
@container (max-width: 437px) {
  .shift-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name delta" "months months" "bar bar"; }
  .shift-row-name { grid-area: name; }
  .shift-row-delta { grid-area: delta; }
  .shift-row-months { grid-area: months; }
  .shift-bar { grid-area: bar; }
}
.shift-more { margin: 8px 0 0; min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-ctl); background: var(--surface-2); color: var(--accent-hi); font: 600 12.5px var(--font-sans); cursor: pointer; justify-self: start; }
.shift-empty { margin: 14px 0; font-size: 13px; color: var(--text-dim); }
.shift-cats-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-mid); }
.shift-months-link { min-height: 36px; padding: 0 6px; border: 0; background: none; color: var(--accent-hi); font: 700 13px var(--font-sans); cursor: pointer; }
.shift-months-link:hover { text-decoration: underline; }
.shift-driver-card { border-radius: var(--r-card); background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1.5px var(--pink-dim); padding: 14px 16px; }
.shift-driver-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 14px; }
.shift-driver-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 12px; background: var(--pink-dim); color: var(--pink-ink); font: 800 18px var(--font-display); }
.shift-driver-text { flex: 1 1 300px; min-width: 0; }
.shift-kicker { font: 700 11px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--pink-ink); }
.shift-driver-text h3 { margin: 2px 0 2px; font: 800 16px/1.3 var(--font-display); color: var(--text); }
.shift-driver-text p { margin: 0; font-size: 13px; color: var(--text-mid); }
.shift-driver-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.shift-btn { min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--r-ctl); background: var(--surface-2); color: var(--text); font: 600 13px var(--font-sans); cursor: pointer; }
.shift-btn.is-primary { background: var(--accent-fill); color: #fff; }
.shift-receipts { list-style: none; margin: 10px 0 0; padding: 4px 10px; border-radius: 14px; background: var(--surface-2); }
.shift-receipts li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.shift-receipts li:last-child { border-bottom: 0; }
.shift-receipts .shift-receipt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shift-receipts small { color: var(--text-dim); }
.shift-receipts b { font: 800 13px var(--font-numeric); }
.shift-receipts li.is-sum { grid-template-columns: minmax(0, 1fr) auto; color: var(--green-ink); font-weight: 600; }
.shift-receipts li.is-sum b { color: var(--text); }
.shift-months { display: grid; gap: 14px; }
.shift-months[hidden] { display: none; }
/* Month by month (SL-018): the overview parts step aside; the explorer and the table take the page */
#dsub-shift.is-months > :is(.shift-cats, .shift-driver, .shift-rail), #dsub-shift.is-months .lens-card { display: none; }
@media (min-width: 1101px) { #dsub-shift.is-months { grid-template-columns: minmax(0, 1fr); grid-template-areas: "track" "months"; grid-template-rows: none; } }
.shift-months-head { display: flex; align-items: center; gap: 14px; }
.shift-months-head h2 { margin: 0; font: 800 18px var(--font-display); color: var(--text); }
.shift-back { min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-ctl); background: var(--surface); box-shadow: var(--shadow-sm); color: var(--accent-hi); font: 600 13px var(--font-sans); cursor: pointer; white-space: nowrap; }
.months-explorer-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.months-explorer-head h3 { margin: 0; font: 800 16px var(--font-display); color: var(--text); }
.months-explorer-head p { margin: 2px 0 0; font-size: 12.5px; }
.months-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0 4px; }
.months-chips-label { font: 600 12.5px var(--font-sans); color: var(--text-dim); margin-right: 4px; }
.months-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--text-mid); font: 600 13px var(--font-sans); cursor: pointer; white-space: nowrap; }
.months-chip small { font-weight: 500; color: var(--text-mid); }  /* mid ink on the tinted chip: AA in both themes (review) */
.months-chip.is-on { background: var(--accent-dim); color: var(--accent-hi); }
.months-chip.is-active { background: var(--accent-fill); color: #fff; } .months-chip.is-active small { color: #fff; }  /* solid white, never dimmed */
.months-limit { flex-basis: 100%; font-size: 12.5px; }
.months-chip .months-x { font-size: 15px; line-height: 1; opacity: .7; }
.months-chip:disabled { opacity: .5; cursor: default; }  /* six columns: the "+" chips wait (review) */
.months-add { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; border-radius: var(--r-ctl); background: var(--surface-2); font: 600 12.5px var(--font-sans); color: var(--text-dim); }
.months-add select, .months-net select { min-height: 32px; border: 0; border-radius: 8px; background: var(--surface); color: var(--text); font: 600 13px var(--font-sans); padding: 0 8px; cursor: pointer; }
.months-net { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 8px; font-size: 13px; color: var(--text-mid); }
.months-net b { color: var(--text); }
.months-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.months-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.months-table th, .months-table td { padding: 9px 10px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
.months-table thead th.months-net-h { white-space: normal; min-width: 150px; }  /* six columns at 1280: the Net shift header wraps rather than push the column behind a scroll */
.months-table thead th.months-net-h small { display: block; }
.months-table thead th { font: 600 12px var(--font-sans); color: var(--text-dim); }
.months-table thead th small, .months-net-h small { font-weight: 500; }
.months-table th[scope="row"], .months-table thead th:first-child { text-align: left; position: sticky; left: 0; background: var(--surface); z-index: 1; font: 600 13.5px var(--font-sans); color: var(--text); }
.months-table th[scope="row"] .shift-dot { margin-right: 8px; vertical-align: middle; }
.months-table td.is-active, .months-table th.is-active { background: color-mix(in srgb, var(--accent-fill) 8%, transparent); }
.months-table thead th.is-active { color: var(--accent-hi); }
.months-table td { font-family: var(--font-numeric); }
.months-cell { min-height: 36px; padding: 0 6px; border: 0; border-radius: 8px; background: none; color: var(--text); font: 600 13.5px var(--font-numeric); cursor: pointer; }
.months-cell:hover { background: var(--surface-2); }
.months-cell:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: -2px; }
.months-zero { color: var(--text-dim); }
.months-net-pill { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 10px; border-radius: 999px; font: 700 13px var(--font-numeric); background: var(--surface-2); color: var(--text-mid); }
.months-net-pill small { font: 600 11.5px var(--font-sans); }
.months-net-pill.is-up { background: var(--red-dim); color: var(--red-ink); }
.months-net-pill.is-down { background: var(--green-dim); color: var(--green-ink); }
.months-total th, .months-total td { border-top: 2px solid var(--border-hi); border-bottom: 0; font-weight: 800; }
.months-hint { margin: 10px 0 0; font-size: 12.5px; }
@media (max-width: 768px) { .shift-back, .months-chip, .months-add, .months-cell { min-height: 44px; } .months-add select, .months-net select { min-height: 44px; } }
@media (pointer: coarse) and (min-width: 769px) { .shift-back, .months-chip, .months-add, .months-cell { min-height: 48px; } }
/* The shared row on Shift: the period, "vs" the prior span, the range */
#page-app .spend-vs { align-self: center; font: 600 13px var(--font-sans); color: var(--text-dim); white-space: nowrap; }
#page-app .spend-vs b { color: var(--text-mid); }
#page-app .spend-range { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-ctl); background: var(--surface); box-shadow: var(--shadow-sm); }
#page-app .spend-range-btn { min-height: 34px; padding: 0 12px; border: 0; border-radius: var(--r-ctl); background: none; color: var(--text-mid); font: 600 13px var(--font-sans); cursor: pointer; }
#page-app .spend-range-btn.active { background: var(--accent-fill); color: #fff; }
@media (max-width: 768px) {
  .shift-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name delta" "months months" "bar bar"; }
  .shift-row-name { grid-area: name; }
  .shift-row-delta { grid-area: delta; }
  .shift-row-months { grid-area: months; }
  .shift-bar { grid-area: bar; }
  .shift-track-meta { margin-left: 0; }
  .shift-driver-actions { margin-left: 0; width: 100%; }
  .shift-btn, .shift-more, .shift-months-link, .shift-mode button { min-height: 48px; }
  .shift-row-months .shift-mchip { min-height: 40px; padding: 0 12px; }  /* the only way to open one month: a tap target */
  #page-app .spend-range-btn { min-height: 48px; }
  #page-app .spend-vs { display: none; }
}
@media (pointer: coarse) and (min-width: 769px) {
  /* a touch tablet in the desktop view (touch.md): every control a finger can land on */
  .shift-btn, .shift-more, .shift-months-link, .shift-mode button, #page-app .spend-range-btn { min-height: 48px; }
  .shift-row-months .shift-mchip { min-height: 40px; padding: 0 12px; }
}
.shift-receipts li.is-more { color: var(--text-dim); grid-template-columns: minmax(0, 1fr) auto; }
.shift-receipts li.is-sum .shift-change { color: var(--red-ink); }  /* wins over the sum line's text colour */

/* ── Desktop density, a notch (SL-026). The person, 2026-10-19: on a laptop the app read as an iPhone app, a little bloated.
   The island layout only (≥1101px): smaller corners, a narrower island, shorter sub-nav rows, tighter gutters and rows.
   The phone and tablet keep the Pocket values above. One block, last in the file: drop it to go back to the softer look. ── */
@media (min-width: 1101px) {
  :root { --r-card: 18px; --r-tile: 14px; --r-input: 12px; --radius-md: 18px; --radius-sm: 12px; }
  /* The island: 220px, 22px corners, 14px tabs (the collapsed rail keeps its 76px) */
  #page-app { padding-left: 252px; }
  #page-app .app-nav { width: 220px; border-radius: 22px; padding: 16px 10px 12px; }
  .nav-peek #page-app .app-nav { width: 220px; }
  #page-app .app-nav .app-logo { margin-bottom: 14px; }
  #page-app .nav-tab { padding: 10px 12px; font-size: 14px; }
  #sub-paywall-overlay, .nav-peek #sub-paywall-overlay { left: 252px !important; }
  /* The page: narrower gutters */
  #page-app .app-main { padding: 12px 20px 28px; }
  #page-app .dash-subnav { padding: 0 20px; }
  /* The sub-nav: the pill row and the filter row a notch shorter (every control stays 36px or taller) */
  #page-app .spend-seg { margin: 4px 0; }
  #page-app .spend-seg-btn { padding: 0 14px; min-height: 36px; }
  #page-app .spend-filters { padding: 0 12px 6px; }
  #page-app .spend-filter, #page-app .spend-filter select { min-height: 36px; }
  #page-app .spend-range { padding: 2px; }
  #page-app .spend-range-btn { min-height: 36px; }  /* Shift's 3M · 6M · YTD were 34px */
  /* A touch laptop or an iPad at this width keeps 48px targets, as the rest of the file does for touch (reviewer, SL-026); the range buttons again, since the 36px line above outranks their own touch rule by order */
  @media (pointer: coarse) { #page-app .spend-seg-btn, #page-app .spend-filter, #page-app .spend-filter select, #page-app .spend-range-btn { min-height: 48px; } }
  /* Spending: tighter grid gaps, panel padding, list rows and chips */
  .live-bento, .shift-rail, #dsub-shift, .shift-months { gap: 12px; }
  .lens-card { padding: 10px 12px; }
  .shift-panel { padding: 12px 16px 8px; }  /* the sides stay 16px: the 470px stacking threshold (shift.js) and the panel's container query count on them */
  .shift-row { min-height: 48px; padding: 7px 2px; }  /* the month chips inside keep their 28px: they open a month */
  .shift-track-card { padding: 10px 14px; }
  .shift-driver-card { padding: 12px 14px; }
}