/* ================================================================================================================
   MOBILE REDESIGN: dense, sticky, thumb-first (phones, landscape phones, portrait tablets). Desktop (>= 901px, mouse) is untouched.
     - phone shell: 48px header that slides away on scroll down; iOS 26 tab bar (glass capsule + round Ask), shrinks on scroll down;
     - section toolbars stick under the header (--header-live follows it); bulk bar and Ask composer are pinned above the tab bar;
     - Transactions: one sticky toolbar row, applied-filter chips, two-line rows (~58px), filters in a slide-up sheet, select mode.
   ================================================================================================================ */
#toasts { z-index: 60; }
/* desktop defaults for the phone-only controls (the compact layout below turns them on) */
.tx-more-btn, .bulk-more-btn, .select-page-m { display: none; }
.tx-actions { display: contents; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.select-mode-btn, .filter-chips, .meta-m, .more-m, .sum-short, .bal-more-btn, .partial-inline { display: none; }
.fsheet, .fsheet-backdrop { display: none; }

/* ---- phone shell ------------------------------------------------------------------------------------------------------------- */
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
  :root { --page-x: .75rem; }
  .m-hide { display: none; }
  main { padding: .6rem max(var(--page-x), env(safe-area-inset-right, 0px)) 1rem max(var(--page-x), env(safe-area-inset-left, 0px)); }
  /* header: logo, org, bell, theme in 48px; slides up while you scroll down */
  header { z-index: 27; min-height: 48px; padding: 2px max(.6rem, env(safe-area-inset-right, 0px)) 2px max(.6rem, env(safe-area-inset-left, 0px)); gap: .35rem; transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
  body.chrome-hidden header { transform: translateY(-100%); }
  h1.brand img { width: 32px; height: 32px; border-radius: 9px; }
  header .org-select { min-height: 40px; padding: .2rem 1.9rem .2rem .65rem; font-size: .95rem; max-width: 52vw; text-overflow: ellipsis; }
  header .alerts-btn, header .icon-btn { width: 44px; height: 44px; min-height: 44px; border-color: transparent; background: transparent; border-radius: var(--radius-pill); }
  .alerts-count { top: .1rem; right: .1rem; }
  .alerts-panel { top: calc(var(--header-live) + .4rem); max-height: calc(100dvh - var(--header-live) - var(--tabbar-top) - 1.5rem); padding: .6rem .8rem; }
  h2 { font-size: 1.1rem; margin-bottom: .5rem; }
  .card { padding: .8rem .85rem; margin-top: .6rem; border-radius: var(--radius-md); }
  .card > p.muted, .card > .muted:not(.small) { font-size: .875rem; line-height: 1.45; }
  .grid2 { gap: .6rem; margin-top: .6rem; }
  .grid2 .card { margin-top: 0; }

  /* tab bar: one floating glass capsule above the home indicator, Ask in the middle */
  .tabbar { position: fixed; bottom: calc(.5rem + var(--safe-bottom)); z-index: 25; gap: .5rem; padding: 0; justify-content: space-between; align-items: center; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none; transition: transform var(--duration-slow) var(--ease-out), opacity var(--duration-base) var(--ease-out); }
  .tabbar > * { pointer-events: auto; }
  .tab-pill { background: color-mix(in srgb, var(--surface-raised) 88%, transparent); -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6); border: 1px solid var(--border-default); box-shadow: var(--shadow-lg), var(--inset-top); }
  .tab-pill { flex: 1 1 auto; min-width: 0; display: flex; gap: .1rem; padding: 4px; border-radius: 32px; animation: ns-scale-in var(--duration-base) var(--ease-out) backwards; transform-origin: left center; }
  .tab-pill button { flex: 1 1 0; min-width: 0; min-height: 52px; flex-direction: column; justify-content: center; gap: .1rem; padding: .3rem .1rem .25rem; border-radius: 26px; font-size: .75rem; font-weight: 600; letter-spacing: .01em; line-height: 1.1; color: var(--text-secondary); }
  .tabbar button .icon { width: 1.45rem; height: 1.45rem; stroke-width: 1.9; }
  .tabbar button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tab-pill button.active { background: var(--surface-accent-soft); color: var(--text-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-accent) 28%, transparent); }
  .tabbar .ask-tab:not(.active) .icon { color: var(--text-accent); }
  .tabbar button:active:not(:disabled) { transform: scale(.96); }
  /* scrolled down: the capsule keeps only the current section and Ask (icons) */
  .tabbar.min .tab-pill { flex: 0 0 auto; }
  .tabbar.min .tab-pill button:not(.active):not(.ask-tab) { display: none; }
  .tabbar.min .tab-pill:not(:has(button.active)) button:last-child { display: flex; }
  .tabbar.min .tab-pill button { flex: none; width: 60px; }
  .tabbar.min .tab-pill button span { display: none; }
  /* typing: the bar steps aside (the keyboard and the composer need the room) */
  body.composing .tabbar { transform: translateY(calc(100% + 1rem + var(--safe-bottom))); opacity: 0; pointer-events: none; }
  body.composing .tabbar > * { pointer-events: none; }
  #toasts { bottom: calc(max(var(--tabbar-top), 4.75rem) + .75rem); }

  /* sticky section toolbars: full-bleed glass strips that ride just under the header (or the top edge while the header is away) */
  #dashboard > .bar .period, #budgets > .bar, #reports > .bar, #balances .bal-controls, #transactions .tx-toolbar {
    position: sticky; top: var(--header-live); z-index: 20; transition: top var(--duration-base) var(--ease-out);
    margin-left: calc(-1 * max(var(--page-x), env(safe-area-inset-left, 0px))); margin-right: calc(-1 * max(var(--page-x), env(safe-area-inset-right, 0px)));
    padding: .4rem max(var(--page-x), env(safe-area-inset-right, 0px)) .4rem max(var(--page-x), env(safe-area-inset-left, 0px));
    background: color-mix(in srgb, var(--surface-base) 88%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid var(--border-subtle); border-radius: 0; box-shadow: none; }
  #dashboard > .bar .period, #budgets > .bar, #reports > .bar, #balances .bal-controls, #transactions .tx-toolbar { margin-top: -.6rem; }

  /* tiles: a dense 2 x 2, one line each for label and note, so every tile in a row is the same height */
  .tiles { gap: .5rem; }
  .tile { padding: .55rem .7rem .5rem; border-radius: var(--radius-md); min-width: 0; }
  .tile-label, .tile-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .tile-label { font-size: .75rem; }
  .tile-value { font-size: 1.3rem; line-height: 1.15; margin: .1rem 0 .05rem; }
  .tile-sub { font-size: .75rem; line-height: 1.35; }
  .tile-button { min-height: 0; gap: 0; line-height: inherit; font-weight: inherit; }
  .tiles > .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }

  .table-scroll { overflow-x: auto; overscroll-behavior-x: contain; } /* the Balances matrix and chart data tables scroll sideways inside their card (stacked tables never overflow) */
  .bal-table, .chart-table { font-size: .8125rem; }

  /* forms: two to a row, full width, no ragged wrapping */
  .rule-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .rule-form > * { min-width: 0; width: 100%; margin: 0; }
  .rule-form input[type=text], .rule-form input[type=password], .rule-form input:not([type]) { grid-column: 1 / -1; }
  .rule-form > label.inline { min-height: var(--touch-min); }
  .rule-form input[type=number], .amount-input, .budget-add .amount-input { width: 100%; }
}

/* landscape phones: a lower tab bar (icon beside label), Ask as a short pill */
@media (pointer: coarse) and (max-height: 500px) {
  .tab-pill { padding: 3px; border-radius: 26px; }
  .tab-pill button { flex-direction: row; min-height: 44px; gap: .4rem; border-radius: 22px; font-size: .8rem; }
  .tabbar.min .tab-pill button { width: 52px; }
  /* landscape: every pixel of height counts. Scrolling down hides the bar completely (scroll up brings it back), and while rows are
     selected the bar stays away so the list keeps its room; the bulk bar is then a single line at the bottom */
  body.chrome-hidden .tabbar, body.has-bulk .tabbar { transform: translateY(calc(100% + 1rem + var(--safe-bottom))); opacity: 0; pointer-events: none; }
  body.chrome-hidden .tabbar > *, body.has-bulk .tabbar > * { pointer-events: none; }
  body.chrome-hidden #ask .ask-form { bottom: calc(.5rem + var(--safe-bottom)); }
  .bulkbar { bottom: calc(.4rem + var(--safe-bottom)) !important; flex-wrap: nowrap !important; padding: .35rem .45rem .35rem .8rem !important; }
  .bulkbar::before { display: none; }
  .bulkbar #bulk-category { order: 2 !important; max-width: 14rem; }
  .bulkbar #bulk-apply-category { order: 3 !important; }
  .bulkbar #bulk-ignore { order: 4 !important; }
  .bulkbar .bulk-more-btn { order: 5 !important; }
  .bulkbar #bulk-clear { order: 6 !important; }
  .bulkbar #bulk-all { order: 7 !important; flex-basis: auto !important; white-space: nowrap; }
  .bulkbar.open { flex-wrap: wrap !important; }
  .bulkbar #bulk-apply-category .icon, .bulkbar #bulk-ignore .icon { display: none; }
  body.has-bulk { padding-bottom: calc(4.5rem + var(--safe-bottom)) !important; }
  .ask-sheet { height: calc(100vh - var(--kb)); height: calc(100dvh - var(--kb)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .ask-sheet-head { padding-top: .35rem; padding-bottom: .35rem; }
  .ask-sheet-body { padding-left: max(.75rem, env(safe-area-inset-left, 0px)); padding-right: max(.75rem, env(safe-area-inset-right, 0px)); }
}
@media (max-height: 430px) { body.composing.kb-open .ask-sheet-head { display: none; } } /* a tiny visual viewport while the keyboard is up: the composer and the newest lines get all of it (a focused box alone, e.g. on open, keeps Close) */

/* the account sits after the date only while its own column is hidden (901-1180px), cut to one short line so a long card name can't
   widen the date column and squeeze Merchant (the full name is its tooltip) */
.acct-inline { display: none; }
@media (min-width: 901px) and (max-width: 1180px) {
  #txns .col-account, #txns th.col-account { display: none; }
  #txns .acct-inline { display: inline-block; margin-left: .3em; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; color: var(--text-muted); }
}
/* ---- Transactions, compact layout (<= 900px, landscape phones) ------------------------------------------------------------------- */
@media (max-width: 900px), (pointer: coarse) and (max-height: 500px) {
  #transactions:not([hidden]) { display: flex; flex-direction: column; }
  #transactions > * { min-width: 0; }
  #transactions .tx-toolbar { order: -1; position: sticky; top: var(--header-live); z-index: 20; display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: .4rem; align-items: center; margin-bottom: .5rem;
    margin-left: calc(-1 * max(var(--page-x), env(safe-area-inset-left, 0px))); margin-right: calc(-1 * max(var(--page-x), env(safe-area-inset-right, 0px)));
    padding: .45rem max(var(--page-x), env(safe-area-inset-right, 0px)) .45rem max(var(--page-x), env(safe-area-inset-left, 0px));
    background: color-mix(in srgb, var(--surface-base) 88%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); border-bottom: 1px solid var(--border-subtle); transition: top var(--duration-base) var(--ease-out); }
  .tx-toolbar > label.inline, .tx-toolbar .tx-more-btn, .tx-toolbar > .tx-actions, #filter-panel, #filter-panel:not([hidden]) { display: none; }
  #q { min-width: 0; width: 100%; height: 44px; padding-left: 2.3rem; border-radius: var(--radius-md); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23B5AC95' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: .7rem center; }
  .tx-toolbar > button { min-height: 44px; min-width: 44px; padding: 0 .7rem; border-radius: var(--radius-md); white-space: nowrap; }
  .tx-toolbar #filters-toggle { gap: .35rem; }
  .tx-toolbar #filters-toggle .badge { margin: 0; background: var(--clay-500); color: var(--text-on-accent); border-color: transparent; min-width: 1.35rem; justify-content: center; padding: 0 .35rem; }
  .tx-toolbar .select-mode-btn { display: inline-flex; }
  .tx-toolbar .select-mode-btn .icon { display: none; }
  .tx-toolbar .select-mode-btn.on { background: var(--surface-accent-soft); color: var(--text-accent); border-color: var(--border-accent); }
  .tx-toolbar .add-txn { padding: 0; width: 44px; }
  .tx-toolbar .add-txn .btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .tx-toolbar .add-txn .icon { width: 1.3rem; height: 1.3rem; }
  /* applied filters: one scrollable row of removable chips (44px tall targets, 30px pills) */
  .filter-chips:not([hidden]) { grid-column: 1 / -1; display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; margin: -.2rem calc(-1 * max(var(--page-x), env(safe-area-inset-left, 0px))) -.35rem; padding: 0 max(var(--page-x), env(safe-area-inset-left, 0px)); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--page-x), #000 calc(100% - 1.5rem), transparent); mask-image: linear-gradient(to right, transparent 0, #000 var(--page-x), #000 calc(100% - 1.5rem), transparent); }
  .filter-chips::-webkit-scrollbar { display: none; }
  .fchip { flex: none; min-height: 44px; padding: 0; background: none; border: 0; box-shadow: none; color: var(--text-accent); font-weight: 600; font-size: .85rem; }
  .fchip:hover:not(:disabled) { background: none; border: 0; }
  .fchip-in { display: inline-flex; align-items: center; gap: .3rem; height: 32px; padding: 0 .55rem 0 .75rem; border-radius: var(--radius-pill); background: var(--surface-accent-soft); border: 1px solid color-mix(in srgb, var(--text-accent) 35%, transparent); white-space: nowrap; }
  .fchip-in .icon { width: .95rem; height: .95rem; }
  .fchip.clear .fchip-in { background: transparent; color: var(--text-secondary); border-color: var(--border-default); padding-right: .75rem; }
  /* select mode: "Select all" takes the search field's place (the list does not move under your finger) */
  #transactions:not(.select-mode) .select-page-m { display: none; }
  .select-mode .tx-toolbar #q { display: none; }
  .select-page-m { display: flex; grid-row: 1; grid-column: 1; align-items: center; gap: .55rem; min-height: 44px; padding: 0 .75rem; font-weight: 600; font-size: .95rem; color: var(--text-primary); border-radius: var(--radius-md); background: var(--surface-sunken); border: 1px solid var(--border-control); white-space: nowrap; overflow: hidden; }
  .select-page-m input { width: 1.35rem; height: 1.35rem; }
  /* the sync warning and the totals: one line each (tap the warning to read all of it) */
  #sync-banner { margin: 0 0 .5rem; padding: .4rem .7rem; font-size: .85rem; gap: .45rem; cursor: pointer; border-radius: var(--radius-sm); }
  #sync-banner:not([hidden]) { display: flex; }
  #sync-banner .banner-text { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #sync-banner.expanded .banner-text { white-space: normal; }
  .tx-summary { margin: 0 0 .4rem; padding: 0 .15rem; font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sum-long { display: none; }
  .sum-short { display: inline; }

  /* rows: line 1 name + amount, line 2 "category · date · account" + at most two small badges; one rounded list, hairline separators */
  :is(#txns, .group-table) thead { display: none; }
  :is(#txns, .group-table), :is(#txns, .group-table) tbody { display: block; width: 100%; }
  #txns tbody { background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--inset-top); }
  :is(#txns, .group-table) tr[data-id] { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name amount" "meta badges"; column-gap: .75rem; row-gap: .1rem; align-items: center; min-height: 58px; padding: .45rem .85rem; border-bottom: 1px solid var(--border-subtle); cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: background var(--duration-fast) var(--ease-out); }
  :is(#txns, .group-table) tr[data-id]:last-child { border-bottom: 0; }
  :is(#txns, .group-table) tr[data-id]:active { background: var(--surface-hover); }
  :is(#txns, .group-table) tr[data-id]:hover td { background: transparent; }
  :is(#txns, .group-table) tr[data-id].selected { background: color-mix(in srgb, var(--text-accent) 5%, var(--surface-raised)); box-shadow: inset 3px 0 0 var(--border-accent); }
  :is(#txns, .group-table) tr[data-id].selected td { background: transparent; }
  :is(#txns, .group-table) td { display: block; padding: 0; border: 0; min-width: 0; white-space: normal; }
  :is(#txns, .group-table) :is(.col-select, .col-date, .col-account, .col-category, .col-actions) { display: none; }
  :is(#txns, .group-table) td.col-merchant { display: contents; }
  :is(#txns, .group-table) .merchant { grid-area: name; min-width: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :is(#txns, .group-table) .meta-m { grid-area: meta; display: block; min-width: 0; font-size: .8125rem; line-height: 1.35; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :is(#txns, .group-table) .meta-cat { color: var(--text-primary); font-weight: 500; }
  :is(#txns, .group-table) .meta-cat.none { color: var(--warn-text); }
  :is(#txns, .group-table) .badges { grid-area: badges; display: flex; gap: .25rem; justify-content: flex-end; align-items: center; min-width: 0; }
  :is(#txns, .group-table) .badges:empty { display: none; }
  :is(#txns, .group-table) .badges .badge { margin: 0; padding: 0 .4rem; font-size: .75rem; line-height: 1.45; white-space: nowrap; max-width: 5.75rem; overflow: hidden; text-overflow: ellipsis; }
  :is(#txns, .group-table) .badges .badge:nth-child(n+3):not(.more-m) { display: none; }
  :is(#txns, .group-table) .badges .more-m { display: inline-flex; }
  :is(#txns, .group-table) .col-amount { grid-area: amount; justify-self: end; font-size: .95rem; text-align: right; white-space: nowrap; }
  :is(#txns, .group-table) tr.pending .merchant { font-style: italic; font-weight: 500; }
  :is(#txns, .group-table) tr.ignored .col-amount { text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 55%, transparent); color: var(--text-secondary); }
  /* select mode: a check column, a tap toggles the row */
  .select-mode :is(#txns, .group-table) tr[data-id] { grid-template-columns: 2rem minmax(0, 1fr) auto; grid-template-areas: "sel name amount" "sel meta badges"; }
  .select-mode :is(#txns, .group-table) .col-select { display: flex; grid-area: sel; align-items: center; justify-content: flex-start; min-height: 0; padding: 0; }
  .select-mode :is(#txns, .group-table) .col-select input { width: 1.35rem; height: 1.35rem; margin: 0; pointer-events: none; }
  #txns tbody tr:not([data-id]) { display: block; }
  #txns tbody tr:not([data-id]) td { display: block; padding: 1.25rem 1rem; text-align: center; }
  .pager { padding: .5rem 0 .25rem; gap: .75rem; font-size: .875rem; }
  .pager button { min-height: 44px; }
  /* grouped: compact group headers (name + totals, count under the name), the same dense rows inside */
  .tx-groups details.group { margin-bottom: .45rem; border-radius: var(--radius-md); overflow: hidden; }
  .tx-groups summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name spend" "count income"; gap: 0 .75rem; min-height: 52px; padding: .45rem .85rem; align-items: center; }
  .tx-groups summary .group-name { grid-area: name; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tx-groups summary > .muted { grid-area: count; font-size: .8125rem; }
  .tx-groups summary > .num.neg { grid-area: spend; }
  .tx-groups summary > .num.pos { grid-area: income; font-size: .8rem; }
  .group-body { padding: 0; overflow: visible; border-top: 1px solid var(--border-subtle); }
  .group-body > p { padding: .5rem .85rem; margin: 0; }

  /* bulk bar: a glass card pinned above the tab bar.  [count ......... Ignore  More  x] / [category ........ Set category] */
  .bulkbar { position: fixed; top: auto; left: max(.75rem, env(safe-area-inset-left, 0px)); right: max(.75rem, env(safe-area-inset-right, 0px)); bottom: calc(max(var(--tabbar-top), 4.75rem) + .5rem); z-index: 28; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; padding: .5rem .55rem .55rem .85rem; max-height: 60vh; overflow-y: auto; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface-raised) 88%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); border: 1px solid var(--border-default); box-shadow: var(--shadow-lg); animation: ns-sheet-in var(--duration-base) var(--ease-out) backwards; }
  .bulkbar[hidden] { display: none; }
  .bulkbar::before { content: ""; order: 5; flex-basis: 100%; height: 0; }
  .bulkbar > * { margin: 0; }
  .bulkbar #bulk-count { order: 1; flex: 1 1 auto; min-width: 0; white-space: nowrap; }
  .bulkbar #bulk-ignore { order: 2; }
  .bulkbar .bulk-more-btn { display: inline-flex; order: 3; }
  .bulkbar #bulk-clear { order: 4; width: 44px; min-height: 44px; padding: 0; justify-content: center; font-size: 0; color: var(--text-secondary); text-decoration: none; }
  .bulkbar #bulk-clear .icon { width: 1.25rem; height: 1.25rem; margin: 0; }
  .bulkbar #bulk-category { order: 6; flex: 1 1 0; min-width: 0; }
  .bulkbar #bulk-apply-category { order: 7; }
  .bulkbar #bulk-all { order: 8; flex-basis: 100%; justify-content: flex-start; }
  .bulkbar .bulk-more { order: 9; flex-basis: 100%; display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
  .bulkbar.open .bulk-more { display: grid; }
  .bulkbar :is(#bulk-note-wrap, #bulk-tag-wrap) { order: 10; flex-basis: 100%; min-width: 0; display: flex; gap: .4rem; }
  .bulkbar :is(#bulk-note-wrap, #bulk-tag-wrap) input { flex: 1; min-width: 0; }
  body.has-bulk { padding-bottom: calc(max(var(--tabbar-top), 4.75rem) + 9rem); }
  body.has-bulk .ask-fab { bottom: auto; top: calc(var(--header-live) + 4.5rem); }
  body.has-bulk #toasts { top: calc(var(--header-live) + .6rem); bottom: auto; } /* a toast never covers the bulk bar's buttons */ /* tablets: the floating Ask button moves out of the bulk bar's way */

  /* the filter sheet */
  .fsheet-backdrop:not([hidden]) { display: block; z-index: 41; }
  .fsheet:not([hidden]) { position: fixed; left: 0; right: 0; bottom: 0; margin: 0 auto; width: min(40rem, 100%); max-height: min(88vh, 50rem); max-height: min(88dvh, 50rem); z-index: 42; display: flex; flex-direction: column; background: var(--surface-base); border: 1px solid var(--border-default); border-bottom: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-xl); animation: ns-sheet-up var(--duration-slow) var(--ease-out) backwards; overscroll-behavior: contain; }
  .fsheet-head { flex: none; display: flex; align-items: center; gap: .5rem; padding: .55rem max(1rem, env(safe-area-inset-right, 0px)) .55rem max(1rem, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--border-default); position: relative; }
  .fsheet-head::before, .xsheet-head::before { content: ""; position: absolute; top: 5px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--border-strong); }
  .fsheet-head h2 { margin: 0 auto 0 0; font-size: 1.2rem; }
  .fsheet-head .link { font-size: .95rem; padding: 0 .4rem; }
  .fsheet-done { min-height: 44px; padding: 0 1.1rem; border-radius: var(--radius-pill); font-size: .95rem; }
  .fsheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .4rem max(1rem, env(safe-area-inset-right, 0px)) .75rem max(1rem, env(safe-area-inset-left, 0px)); }
  .fsec { border-bottom: 1px solid var(--border-subtle); }
  .fsec:last-child { border-bottom: 0; }
  .fsec > summary { list-style: none; display: flex; align-items: center; gap: .6rem; min-height: 50px; cursor: pointer; font-weight: 600; font-size: 1rem; }
  .fsec > summary::-webkit-details-marker { display: none; }
  .fsec > summary > span:first-child { display: inline-flex; align-items: center; gap: .55rem; }
  .fsec > summary > span:first-child .icon { color: var(--text-accent); }
  .fsec > summary::after { content: ""; margin-left: auto; width: .55rem; height: .55rem; border-right: 2px solid var(--text-secondary); border-bottom: 2px solid var(--text-secondary); transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--duration-fast) var(--ease-out); }
  .fsec[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
  .fsec-count { font-size: .75rem; font-weight: 700; padding: .05rem .5rem; border-radius: var(--radius-pill); background: var(--clay-500); color: var(--text-on-accent); }
  .fsec-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem .6rem; padding: 0 0 .85rem; }
  .fslot { grid-column: 1 / -1; display: grid; gap: .25rem; min-width: 0; }
  .fslot.half { grid-column: auto; }
  .fslot[hidden] { display: none; }
  .fslot-label { font-size: .8rem; font-weight: 600; color: var(--text-secondary); }
  .fslot :is(ui-picker, input:not([type=checkbox])) { width: 100%; max-width: none; min-width: 0; min-height: 44px; }
  .fslot.plain > label.inline { color: var(--text-primary); font-size: 1rem; gap: .6rem; }
  .fslot .presets { display: flex; flex-wrap: wrap; gap: .4rem; }
  .fslot .presets button { min-height: 44px; padding: 0 .9rem; border-radius: var(--radius-pill); background: var(--surface-raised); border: 1px solid var(--border-default); color: var(--text-primary); font-size: .9rem; font-weight: 500; text-decoration: none; }
  .fslot .tx-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .fslot .tx-actions > label.inline { display: none; }
  .fslot .tx-actions > button:not([hidden]) { display: inline-flex; min-height: 44px; }
  .fslot .tx-actions #view-name-wrap { grid-column: 1 / -1; display: flex; gap: .4rem; }
  .fslot .tx-actions #view-name-wrap input { flex: 1; min-width: 0; }
  .fsheet-foot { flex: none; padding: .6rem max(1rem, env(safe-area-inset-right, 0px)) calc(.6rem + var(--safe-bottom)) max(1rem, env(safe-area-inset-left, 0px)); border-top: 1px solid var(--border-default); background: var(--surface-base); }
  .fsheet-foot button { width: 100%; min-height: 48px; font-size: 1rem; border-radius: var(--radius-md); }

  /* Add transaction, Duplicates: slide-up sheets */
  #extras-panel.as-sheet:not([hidden]) { position: fixed; inset: 0; z-index: 43; display: flex; align-items: flex-end; justify-content: center; margin: 0; background: rgba(15, 17, 11, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: ns-fade-in var(--duration-fast) linear backwards; }
  #extras-panel.as-sheet > .card { width: min(40rem, 100%); max-height: 90vh; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 0 max(1rem, env(safe-area-inset-right, 0px)) calc(1rem + var(--safe-bottom)) max(1rem, env(safe-area-inset-left, 0px)); border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: var(--surface-base); box-shadow: var(--shadow-xl); animation: ns-sheet-up var(--duration-slow) var(--ease-out) backwards; }
  .xsheet-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem 0 .55rem; margin-bottom: .5rem; background: var(--surface-base); border-bottom: 1px solid var(--border-default); }
  .xsheet-head h2 { margin: 0; font-size: 1.2rem; }
  .xsheet-body .rule-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-bottom: .5rem; }
  .xsheet-body .rule-form > * { width: 100%; min-width: 0; }
  .xsheet-body .rule-form input[type=text] { grid-column: 1 / -1; }
  .xsheet-body .rule-form button.primary { grid-column: 1 / -1; min-height: 48px; }
  .xsheet-body .dup-group table td { padding: .3rem .4rem; }
}

/* ---- Ask on phones: the conversation is the page, the composer is a glass capsule pinned above the tab bar ------------------------ */
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
  .ask-head { margin: 0 0 .5rem; gap: .5rem; }
  .ask-head h2 { margin: 0; font-size: 1.15rem; }
  #ask .transcript { min-height: 0; max-height: none; overflow: visible; padding: 0; background: none; border: 0; border-radius: 0; gap: .6rem; }
  .msg { max-width: 100%; padding: .55rem .75rem; font-size: .9375rem; line-height: 1.5; border-radius: var(--radius-md); }
  .msg.user { max-width: 86%; border-radius: var(--radius-md) var(--radius-md) 4px var(--radius-md); }
  .msg.assistant { width: 100%; }
  .msg .md p { margin: .35rem 0; }
  .md-table { margin: .4rem 0; overflow-x: auto; }
  .md-table table { font-size: .8125rem; }
  .md-table :is(th, td) { padding: .2rem .45rem; }
  .ask-body .chart, .md .chart { margin: .5rem 0; }
  .steps-log { margin: 0 0 .5rem; padding: .2rem .6rem; font-size: .85rem; }
  .steps-log summary { min-height: 40px; }
  .proposal { margin: .5rem 0; padding: .65rem .75rem; gap: .45rem; border-radius: var(--radius-md); }
  .proposal-head strong { font-size: .95rem; line-height: 1.35; }
  .proposal-merchants .radio { min-height: 40px; font-size: .9rem; }
  .proposal-actions button { flex: 1 1 0; min-height: 44px; }
  .question-card { margin: .5rem 0; padding: .65rem .75rem; }
  .badge.via { margin-top: .35rem; }
  .ask-empty { margin: 0; text-align: left; }
  .ask-empty > p { font-size: .9rem; }
  /* suggestion chips: one row that scrolls sideways */
  #ask-app .chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin: .5rem calc(-1 * var(--page-x)) 0; padding: 0 var(--page-x); }
  #ask-app .chips::-webkit-scrollbar { display: none; }
  #ask-app .chip { flex: none; white-space: nowrap; font-size: .875rem; }
  /* the composer: [ text that grows to ~4 lines ............ (send) ] */
  #ask-app .ask-form { position: relative; flex-wrap: nowrap; align-items: flex-end; gap: .35rem; margin: 0; padding: 4px 4px 4px .9rem; border-radius: 26px; background: color-mix(in srgb, var(--surface-raised) 80%, transparent); -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6); border: 1px solid var(--border-default); box-shadow: var(--shadow-lg), var(--inset-top); }
  #ask-app .ask-form:focus-within { border-color: var(--focus-border); }
  #ask-app .ask-input-wrap { min-width: 0; align-self: stretch; display: flex; }
  #ask-app #ask-input { flex: 1; width: 100%; height: 44px; min-height: 44px; max-height: 128px; resize: none; padding: .6rem 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; line-height: 1.4; overflow-y: hidden; }
  #ask-app #ask-input:focus-visible { box-shadow: none; }
  #ask-app #ask-send { flex: none; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; }
  #ask-app #ask-send .btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  #ask-app #ask-send .icon { width: 1.2rem; height: 1.2rem; }
  /* status ("Looking that up…") floats above the composer instead of taking a row in it */
  #ask-app #ask-status { position: absolute; left: .75rem; bottom: calc(100% + .4rem); flex: none; order: 0; min-height: 0; max-width: calc(100% - 1.5rem); padding: .2rem .7rem; font-size: .8125rem; color: var(--text-primary); background: color-mix(in srgb, var(--surface-raised) 92%, transparent); border: 1px solid var(--border-default); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
  #ask-app #ask-status:empty { display: none; }
  #ask-app .palette { bottom: calc(100% + .6rem); left: -.9rem; right: -3.4rem; max-height: min(45vh, 20rem); z-index: 30; border-radius: var(--radius-md); }
  #ask-app .palette-item { min-height: 44px; align-items: center; }
  /* on the Ask tab: fixed above the tab bar (or the keyboard while typing) */
  #ask .ask-form { position: fixed; z-index: 24; left: max(.75rem, env(safe-area-inset-left, 0px)); right: max(.75rem, env(safe-area-inset-right, 0px)); bottom: calc(max(var(--tabbar-top), 4.75rem) + .5rem); } /* no transition: it moves with the keyboard, not after it */
  body.composing #ask .ask-form { bottom: calc(var(--kb) + .5rem + var(--safe-bottom)); }
  body:has(#ask:not([hidden])) { padding-bottom: calc(max(var(--tabbar-top), 4.75rem) + 6.5rem); }
  body.composing:has(#ask:not([hidden])) { padding-bottom: calc(var(--kb) + 6rem); }
  /* in the Ask sheet: the transcript scrolls inside the sheet, the composer sits at its foot */
  .ask-sheet { bottom: var(--kb); height: min(92vh, calc(100vh - var(--kb) - .5rem)); height: min(92dvh, calc(100dvh - var(--kb) - .5rem)); }
  .ask-sheet-head { padding: .55rem max(1rem, env(safe-area-inset-right, 0px)) .55rem max(1rem, env(safe-area-inset-left, 0px)); position: relative; }
  .ask-sheet-head::before { content: ""; position: absolute; top: 5px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--border-strong); }
  .ask-sheet-title h2 { font-size: 1.25rem; }
  .ask-sheet-title .badge { font-size: .75rem; padding: .15rem .55rem; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; }
  .ask-sheet-body { padding: .5rem max(.75rem, env(safe-area-inset-right, 0px)) calc(.5rem + var(--safe-bottom)) max(.75rem, env(safe-area-inset-left, 0px)); }
  .ask-sheet-body .transcript { padding: 0 0 .75rem; background: none; border: 0; border-radius: 0; gap: .6rem; }
  .ask-sheet-body .ask-form { margin-top: .25rem; }
  .ask-sheet-body #ask-app #ask-status { left: .5rem; }
}

/* ---- Dashboard, Budgets, Reports, Balances, Recurring, Rules on phones ------------------------------------------------------------ */
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
  /* Dashboard: one control row [period ....] [Compare], the note under it as a caption */
  #dashboard:not([hidden]) { display: flex; flex-direction: column; }
  #dashboard > .bar { display: contents; }
  #dashboard > .bar .period { order: -2; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .5rem; margin-bottom: 0; }
  #dashboard > .bar .bar-caption { order: -1; margin: .35rem 0 .45rem; font-size: .75rem; line-height: 1.35; }
  #dashboard > .bar .period > label:first-child { flex: 1 1 0; min-width: 0; }
  #dashboard > .bar .period > label:first-child { font-size: 0; gap: 0; } /* the picker says what it is; "Period" goes */
  #dashboard > .bar .period ui-picker { width: 100%; max-width: 16rem; font-size: 1rem; }
  #range-custom:not([hidden]) { order: 3; flex-basis: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .4rem; }
  #range-custom input { min-width: 0; width: 100%; }
  .compare-toggle { flex: none; gap: .45rem; padding: 0 .8rem 0 .6rem; min-height: 44px; border: 1px solid var(--border-control); border-radius: var(--radius-pill); color: var(--text-primary) !important; font-size: .9rem; font-weight: 600; background: var(--surface-raised); }
  .compare-toggle:has(input:checked) { background: var(--surface-accent-soft); border-color: var(--border-accent); color: var(--text-accent) !important; }
  .compare-toggle input { width: 1.2rem; height: 1.2rem; }
  #dashboard .partial-note { display: none; }
  .partial-inline { display: inline; }
  #dashboard .chart .muted.small { display: none; } /* "click a bar or slice…": a mouse hint */
  #dashboard .rule-form { grid-template-columns: minmax(0, 1fr) auto; } /* watchlist: [kind] [Watch] above a full-width name box */
  #dashboard .rule-form input[type=text] { grid-column: 1 / -1; grid-row: 2; }
  .chart > .link { min-height: 36px; font-size: .875rem; }

  /* Budgets, Reports: month navigation in the sticky strip; secondary actions icon-only */
  #budgets > .bar, #reports > .bar { flex-wrap: nowrap; gap: .4rem; margin-bottom: .5rem; }
  .month-nav { flex: 1 1 auto; min-width: 0; gap: .2rem; }
  .month-nav strong { flex: 1 1 auto; min-width: 0; text-align: center; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .month-nav button[data-icon]:not(.link) { min-width: 44px; width: 44px; padding: 0; border-radius: var(--radius-pill); }
  #budget-today { font-size: .875rem; padding: 0 .3rem; }
  #budgets .btn-text, #reports .btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  #budget-suggest-btn, .report-actions button { width: 44px; min-width: 44px; padding: 0; border-radius: var(--radius-pill); }
  .report-actions { display: flex; gap: .3rem; flex: none; }
  /* budget rows: [category ........ $208 left] / [=====meter=====  66% of $620 · $412 spent] / [$ budget] [roll over] [remove] */
  .budget-table.stack tr { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "cat cat left" "bar bar spent" "amt roll rm"; column-gap: .6rem; row-gap: .2rem; padding: .55rem 0; }
  .budget-table.stack td:nth-child(1) { grid-area: cat; }
  .budget-table.stack td:nth-child(2) { grid-area: amt; justify-content: flex-start; }
  .budget-table.stack td:nth-child(3) { grid-area: roll; }
  .budget-table.stack td:nth-child(4) { grid-area: spent; display: block; font-size: .8125rem; }
  .budget-table.stack td:nth-child(5) { grid-area: bar; display: block; text-align: left; }
  .budget-table.stack td:nth-child(6) { grid-area: left; font-weight: 600; }
  .budget-table.stack td:nth-child(7) { grid-area: rm; justify-content: flex-end; }
  .budget-table.stack td:is(:nth-child(4), :nth-child(5), :nth-child(6))::before { display: none; }
  .budget-table.stack td:nth-child(3)::before { content: "Roll over"; font-size: .8125rem; }
  .budget-table.stack td:nth-child(2)::before { display: none; }
  .budget-table.stack td:nth-child(2) .amount-input { max-width: 7.5rem; }
  .budget-table.stack td .meter { min-width: 0; margin-bottom: .15rem; }
  .budget-table.stack td:nth-child(5) .small { font-size: .75rem; }
  .budget-table.stack td:nth-child(4) .small { display: none; }
  .calendar li { padding: .35rem 0; gap: .15rem .6rem; font-size: .9rem; }
  /* Balances: the controls are one sticky row [period] [accounts] [...]; the rest folds behind "..." */
  #balances .bal-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem; margin-bottom: .5rem; }
  #balances .bal-controls > .rule-form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
  #balances .bal-controls > .rule-form:first-child { grid-column: 1; flex-wrap: nowrap; }
  #balances .bal-controls > .rule-form:first-child > label.inline:first-child { flex: 1 1 0; min-width: 0; font-size: 0; }
  #balances .bal-controls > .rule-form:first-child > label.inline:first-child ui-picker { width: 100%; font-size: 1rem; }
  #balances .bal-controls .bal-more-btn { display: inline-flex; grid-column: 2; grid-row: 1; width: 44px; padding: 0; border-radius: var(--radius-pill); }
  #balances .bal-controls:not(.more-open) :is(.bal-kind, .bal-row2) { display: none; }
  #balances .bal-controls .bal-kind { font-size: .875rem; }
  #balances .bal-controls > .rule-form > * { width: auto; }
  #balances .bal-controls .bal-row2, #balances .bal-controls .bal-extra { grid-column: 1 / -1; }
  #balances .bal-controls.more-open > .rule-form:first-child { flex-wrap: wrap; }
  #balances .bal-controls.more-open .bal-kind { order: 5; flex-basis: 100%; }
  #balances .bal-controls .bal-kind ui-picker { flex: 1; min-width: 0; }
  #balances .acct-picker { font-size: .9rem; }
  /* Rules: the rule builder in two columns; "then" goes */
  #rules .rule-form > span.muted { display: none; }
  #rules .rule-form #r-priority { width: 100%; }
}
@media (max-width: 360px) {
  .tx-toolbar #filters-toggle .btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .tab-pill button { font-size: .75rem; letter-spacing: 0; }
}

/* ---- QA round 2 carry-overs --------------------------------------------------------------------------------------------------- */
html.modal-open, html.modal-open body { overflow: hidden; overscroll-behavior: none; } /* the scroll lock also holds on touch (html clips overflow-x on phones) */
#txns td.col-merchant { overflow-wrap: anywhere; } /* table mode: an unbroken 80-character merchant wraps instead of widening the page */
#txns td.col-merchant .merchant { min-width: 6rem; }
@media (min-width: 701px) { main { padding-bottom: 6rem; } } /* room for the floating Ask button under the last row */
@media (min-width: 701px) and (pointer: coarse) { header a.signout { display: inline-flex; min-height: var(--touch-min); align-items: center; gap: .35rem; } }
@media (pointer: coarse) {
  td input[type=text], td input[type=number], td input[type=search], td ui-picker { font-size: 1rem; }
  td input[type=checkbox] { width: 1.5rem; height: 1.5rem; }
  th .sorthead { min-width: var(--touch-min); }
}
.sheet-fullname { margin: 0 0 .45rem; font-weight: 600; overflow-wrap: anywhere; }
/* the proposal card on phones: one inset, names and counts on their own lines (never broken mid-word) */
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
  .ask-body { overflow-wrap: break-word; }
  .proposal-merchants .radio { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .55rem; align-items: start; }
  .proposal-merchants .radio input { grid-row: 1 / span 2; margin-top: .15rem; }
  .proposal-merchants .radio .muted { grid-column: 2; font-size: .8125rem; }
  .proposal table.compact td { overflow-wrap: break-word; }
  .msg.assistant:has(.proposal) { padding-left: .6rem; padding-right: .6rem; }
}
.proposal td.muted { color: color-mix(in srgb, var(--text-secondary) 60%, var(--text-primary)); }
/* possible duplicates: each candidate is a card [name ...... amount] / [date · status] / [Keep this one] */
@media (max-width: 900px), (pointer: coarse) and (max-height: 500px) {
  .dup-group table, .dup-group tbody { display: block; width: 100%; }
  .dup-group tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name amount" "date status" "keep keep"; gap: .1rem .75rem; padding: .5rem .7rem; margin: 0 0 .45rem; background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }
  .dup-group td { display: block; padding: 0 !important; border: 0; min-width: 0; }
  .dup-group td:nth-child(1) { grid-area: date; font-size: .8125rem; color: var(--text-secondary); white-space: nowrap; }
  .dup-group td:nth-child(2) { grid-area: name; font-weight: 600; overflow-wrap: anywhere; }
  .dup-group td:nth-child(3) { grid-area: status; justify-self: end; font-size: .8125rem; color: var(--text-secondary); }
  .dup-group td:nth-child(4) { grid-area: amount; justify-self: end; }
  .dup-group td:nth-child(5) { grid-area: keep; margin-top: .35rem; }
  .dup-group td:nth-child(5) button { width: 100%; min-height: 44px; }
}
@media (max-width: 400px) {
  #budget-today { font-size: 0; width: 44px; justify-content: center; padding: 0; }
  #budget-today .icon { width: 1.2rem; height: 1.2rem; margin: 0; }
}

/* Ask details on phones: one status at a time, tight proposal card, readable slash palette */
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
  #ask-app:has(.msg.streaming .ask-body > p.muted:only-child) #ask-status { display: none; } /* the live bubble already says it */
  .msg.streaming .ask-body > p:only-child { margin: 0; }
  .proposal p { margin: 0; }
  .proposal-merchants { gap: .1rem; }
  .proposal-merchants .radio { min-height: 44px; align-content: center; row-gap: 0; }
  .proposal table.compact tr { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: .5rem; }
  .proposal table.compact td:nth-child(1) { grid-column: 1; grid-row: 2; }
  .proposal table.compact td:nth-child(2) { grid-column: 1 / 3; grid-row: 1; }
  .proposal table.compact td:nth-child(3) { grid-column: 2; grid-row: 2; font-size: .8125rem; }
  .proposal table.compact td:nth-child(3)::before { content: "· "; }
  .proposal table.compact td:nth-child(4) { grid-column: 3; grid-row: 1 / span 2; }
  .palette-item { flex-direction: column; align-items: flex-start; gap: .1rem; padding: .45rem .75rem; }
  .palette-item code { font-size: .8125rem; white-space: normal; overflow-wrap: anywhere; }
  .palette-item .muted { font-size: .8125rem; }
  /* transaction details: denser cards */
  .drawer-amount { font-size: 1.9rem; }
  .sheet-summary { padding-top: .55rem; }
  .sheet-chips { gap: .35rem; }
  .sheet-chips .badge { font-size: .8rem; padding: .15rem .6rem; }
  .sheet-desc { margin-top: .4rem; font-size: .875rem; }
  .sheet-grid { gap: .6rem; padding-top: .7rem; }
  .dcard { padding: .8rem .85rem; gap: .5rem; border-radius: var(--radius-md); }
  .drawer .dcard h3 { font-size: 1rem; }
  .drawer .dcard .radio { font-size: .9rem; line-height: 1.4; min-height: 44px; align-items: center; }
  .drawer .dcard .radio input { margin-top: 0; }
  .sheet-close { padding: 0 .85rem; font-size: .95rem; }
}

@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
  .budget-table.stack td:nth-child(3) { white-space: nowrap; gap: .4rem; }
  .card > p.muted.small, .card p.muted.small, .chart + p.muted.small { font-size: .8125rem; }
  .card > p.muted { margin: 0 0 .5rem; }
}
@media (max-width: 400px) {
  .bulkbar #bulk-ignore, .bulkbar .bulk-more-btn { font-size: 0; width: 44px; min-width: 44px; padding: 0; gap: 0; }
  .bulkbar #bulk-ignore .icon, .bulkbar .bulk-more-btn .icon { display: block; width: 1.2rem; height: 1.2rem; } /* icon-only here, even where the landscape rule hides the icon */
}
@media (max-width: 360px) {
  :is(#txns, .group-table) .badges .badge:nth-child(n+2), :is(#txns, .group-table) .badges .more-m { display: none; } /* the first (most important) badge only */
}
@media (pointer: coarse) and (max-height: 500px) {
  body.composing header { transform: translateY(-100%); } /* landscape + keyboard: the composer and the newest lines get the screen */
}
@media (max-width: 700px) {
  /* other banners (price changes, partial month): one block of text with the icon inline */
  .banner:not(#sync-banner) { display: block; padding: .55rem .8rem; font-size: .9rem; }
  .banner:not(#sync-banner) .icon { vertical-align: -.2em; margin-right: .35rem; }
  /* calendar: [date ........ total] / [what is due] */
  .calendar li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date total" "items items"; }
  .calendar .cal-date { grid-area: date; }
  .calendar .cal-items { grid-area: items; }
  .calendar .cal-total { grid-area: total; }
  /* Add a transaction: [date | in/out] [amount | category] [description] [merchant] [account] [book] [location] [Add] */
  .xsheet-body:has(.rule-form) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .xsheet-body:has(.rule-form) > p { grid-column: 1 / -1; margin: 0 0 .25rem; }
  .xsheet-body .rule-form { display: contents; }
  .xsheet-body .rule-form:nth-of-type(1) > :nth-child(1) { order: 1; } .xsheet-body .rule-form:nth-of-type(1) > :nth-child(2) { order: 2; }
  .xsheet-body .rule-form:nth-of-type(1) > :nth-child(3) { order: 3; } .xsheet-body .rule-form:nth-of-type(2) > :nth-child(2) { order: 4; }
  .xsheet-body .rule-form:nth-of-type(1) > :nth-child(4) { order: 5; } .xsheet-body .rule-form:nth-of-type(2) > :nth-child(1) { order: 6; }
  .xsheet-body .rule-form:nth-of-type(2) > :nth-child(n+3) { order: 7; grid-column: 1 / -1; }
  .xsheet-body .rule-form > button.primary { order: 9; }
  .xsheet-body > .place-field { order: 8; grid-column: 1 / -1; margin: 0; } /* Location, just above Add */
  .xsheet-body > p:last-child { order: 10; }
}

/* ---- data tables on phones: a dense two-line list (NetSuite-style), not a card per row ------------------------------------------
     [ title (first cell) ......................... main figure (second cell) ]
     [ label value · label value · label value                       action ]                                                  */
@media (max-width: 700px) {
  table.stack thead { display: none; }
  table.stack, table.stack tbody { display: block; width: 100%; }
  table.stack:not(.budget-table) tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .9rem; row-gap: .05rem; padding: .45rem 0; margin: 0; background: none; border: 0; border-bottom: 1px solid var(--border-subtle); border-radius: 0; }
  table.stack:not(.budget-table) tr::before { content: ""; order: 2; flex-basis: 100%; height: 0; }
  table.stack tbody tr:last-child { border-bottom: 0; }
  table.stack:not(.budget-table) td { display: inline-flex; align-items: baseline; gap: .3rem; order: 3; min-width: 0; padding: 0; border: 0; min-height: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; font-size: .8125rem; color: var(--text-secondary); background: none !important; }
  table.stack:not(.budget-table) td[data-label]::before { content: attr(data-label); flex: none; color: var(--text-muted); font-family: var(--font-sans); font-size: .75rem; font-weight: 500; letter-spacing: 0; }
  table.stack:not(.budget-table) td:first-child { order: 0; flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .4rem; font-size: .95rem; font-weight: 600; color: var(--text-primary); }
  table.stack:not(.budget-table) td:first-child::before { display: none; }
  table.stack:not(.budget-table) td:first-child .badge { margin: 0; }
  table.stack:not(.budget-table) td:nth-child(2) { order: 1; flex: none; font-size: .9rem; font-weight: 600; color: var(--text-primary); }
  table.stack:not(.budget-table) td:nth-child(2)::before { display: none; }
  table.stack:not(.budget-table) td.num, table.stack:not(.budget-table) td .num { font-size: inherit; }
  table.stack:not(.budget-table) td:not([data-label]):not(:first-child):not(:nth-child(2)) { order: 4; margin-left: auto; }
  table.stack:not(.budget-table) td:has(input:not([type=checkbox]), ui-picker) { order: 3; flex: 1 1 100%; display: flex; gap: .4rem; margin-top: .25rem; }
  table.stack:not(.budget-table) td:has(input:not([type=checkbox]), ui-picker)::before { align-self: center; }
  table.stack:not(.budget-table) td:has(input:not([type=checkbox]), ui-picker) > :is(input, ui-picker) { flex: 1; min-width: 0; max-width: none; }
  table.stack:not(.budget-table) td:empty { display: none; }
  table.stack:not(.budget-table) td[colspan] { display: block; flex-basis: 100%; text-align: center; }
  table.stack td button.link { min-height: 36px; font-size: .875rem; }
  table.stack td .meter { min-width: 6rem; }
  /* Recurring: the amount is the figure on line 1; how often, next, per month, per year on line 2 */
  .rec-table.stack td:nth-child(2) { order: 3; flex: none; font-size: .8125rem; font-weight: 400; color: var(--text-secondary); }
  .rec-table.stack td:nth-child(3) { order: 1; font-size: .9rem; font-weight: 600; color: var(--text-primary); }
  .rec-table.stack td:nth-child(3)::before { display: none; }
  /* Budgets keep their own three-line grid */
  .budget-table.stack tr { display: grid; margin: 0; background: none; border: 0; border-bottom: 1px solid var(--border-subtle); border-radius: 0; }
  .budget-table.stack td { display: flex; align-items: center; gap: .4rem; padding: 0; border: 0; min-height: 0; background: none !important; }
  .budget-table.stack td[data-label]::before { content: attr(data-label); color: var(--text-secondary); font-family: var(--font-sans); font-size: .8125rem; font-weight: 500; }
}
@media (max-width: 700px) {
  .budget-table.stack td:nth-child(1)::before { display: none; }
}
@media (max-width: 700px) {
  /* Rules: the rule itself is the title; priority and category on the second line */
  .rules-table.stack td:nth-child(2) { order: 0; flex: 1 1 0; font-size: .95rem; font-weight: 600; color: var(--text-primary); }
  .rules-table.stack td:nth-child(1) { order: 3; flex: none; font-size: .8125rem; font-weight: 400; color: var(--text-secondary); }
  .rules-table.stack td:nth-child(1)::before { display: inline; }
  .rules-table.stack td:nth-child(2)::before { display: none; }
}
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
  /* dense 36px text links keep their look; an invisible strip makes each tap target 44px tall */
  :is(.chart > .link, table.stack td button.link) { position: relative; }
  :is(.chart > .link, table.stack td button.link)::after { content: ""; position: absolute; top: -4px; bottom: -4px; left: 50%; width: max(100% + 12px, 44px); transform: translateX(-50%); } /* 44px tall, and at least 44px wide */
}
/* details sheet: long unbroken names wrap inside their card; nothing in a card can push it wider than its column */
.drawer .dcard > * { min-width: 0; max-width: 100%; }
.drawer .dcard .radio { min-width: 0; overflow-wrap: anywhere; }
.drawer .dcard input[type=file] { min-width: 0; max-width: 100%; }
.drawer .dcard div.inline { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
/* typing a tag or note in the bulk bar (.typing, set by transactions.js): it shows only the count, the form and Clear, and rides
   above an open keyboard. The class outlives the input's focus by a moment, so a tap on Apply lands before the bar changes */
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
  .bulkbar.typing { flex-wrap: wrap !important; }
  .bulkbar.typing > :not(#bulk-count, #bulk-clear, #bulk-tag-wrap, #bulk-note-wrap) { display: none !important; }
  body.kb-open .bulkbar.typing { bottom: calc(var(--kb) + .4rem) !important; }
}
/* tablets and touch laptops (wider than a phone): the section nav stays one row (it scrolls sideways) and the alerts panel
   opens from the screen's right edge, so it can never hang off the left */
@media (min-width: 701px) and (pointer: coarse) {
  header nav { flex-wrap: nowrap; }
  header nav.overflows { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent); padding-right: 2rem; } /* a fade says the row scrolls */
  header nav button { flex: none; }
  .alerts-panel { position: fixed; left: auto; right: max(.75rem, env(safe-area-inset-right, 0px)); top: calc(var(--header-h, 4rem) + .25rem); width: min(26rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - var(--header-h, 4rem) - 1.5rem); }
}
/* outside the phone layout the sticky header (styles.css) is z 5 and, with its backdrop-filter, a stacking context: the alerts panel
   inside it would sit under the sticky Transactions toolbar (z 20). It layers above that toolbar, and while the panel is open also
   above the floating Ask button (z 30); the drawer and sheets (39+) still cover it. Layering only: it stays sticky */
@media (min-width: 701px) and (min-height: 501px), (min-width: 701px) and (pointer: fine) {
  header { z-index: 21; }
  header:has(#alerts-panel:not([hidden])) { z-index: 35; }
}
/* Budgets: "Roll over" is a column header on desktop and the visible label (and tap target) on phones */
.budget-table .roll-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.budget-table .roll-label { display: inline-flex; align-items: center; gap: .45rem; margin: 0; }
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
  .budget-table.stack td:nth-child(3)::before { content: none; }
  .budget-table.stack .roll-label { min-height: 44px; padding-right: .4rem; cursor: pointer; }
  .budget-table.stack .roll-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: .8125rem; color: var(--text-secondary); font-weight: 500; }
  /* suggestions: one dense row each [pick] category / average [budget] */
  .suggest-table thead { display: none; }
  .suggest-table, .suggest-table tbody { display: block; }
  .suggest-table tr { display: grid; grid-template-columns: 44px minmax(0, 1fr) 7.5rem; grid-template-areas: "pick cat amt" "pick avg amt"; align-items: center; column-gap: .4rem; padding: .3rem 0; border-bottom: 1px solid var(--border-subtle); }
  .suggest-table td { display: block; padding: 0; border: 0; text-align: left; }
  .suggest-table td:nth-child(1) { grid-area: pick; }
  .suggest-table .sug-pick { display: flex; align-items: center; justify-content: center; min-height: 44px; }
  .suggest-table .sug-cat { grid-area: cat; font-weight: 600; overflow-wrap: anywhere; }
  .suggest-table .sug-avg { grid-area: avg; font-size: .8125rem; color: var(--text-secondary); }
  .suggest-table .sug-avg::before { content: attr(data-avg); }
  .suggest-table td:nth-child(4) { grid-area: amt; display: flex; align-items: center; gap: .2rem; }
  .suggest-table td:nth-child(4) .amount-input { width: 100%; min-width: 0; }
}
@media (max-width: 360px) {
  .month-nav strong[data-short] { font-size: 0; }
  .month-nav strong[data-short]::after { content: attr(data-short); font-size: 1rem; }
}
.load-error { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; border-color: var(--border-accent); }
.load-error p { margin: 0; flex: 1 1 14rem; }
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
  /* Balances, custom range: [period] [accounts] stay on the first line, From/To get the second; "…" keeps its size */
  #balances .bal-controls > .rule-form:first-child:has(> span.inline:not([hidden])) { flex-wrap: wrap; }
  #balances .bal-controls > .rule-form:first-child > span.inline:not([hidden]) { order: 4; flex: 1 1 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .4rem; font-size: .875rem; }
  #balances .bal-controls > .rule-form:first-child > span.inline input { width: 100%; min-width: 0; }
  #balances .bal-controls .bal-more-btn { align-self: start; height: 44px; }
  #balances .bal-controls .acct-picker { flex: 0 1 auto; max-width: 55%; }
  /* text inputs in forms never keep their desktop minimum width (the watchlist's "Watch" button sat on the input) */
  .rule-form input[type=text] { min-width: 0; }
  /* Recurring, add by hand: "Next" date and Add each take a full row */
  #recurring .rule-form > label.inline { grid-column: 1 / -1; display: flex; gap: .5rem; }
  #recurring .rule-form > label.inline input { flex: 1; min-width: 0; width: auto; }
  #recurring .rule-form > #rec-add { grid-column: 1 / -1; }
}
/* toasts are messages, not controls: taps go through them unless they hold a button */
.toast { pointer-events: none; }
.toast:has(button, a) { pointer-events: auto; }
/* iOS zooms into any focused control under 16px */
@media (pointer: coarse) { header .org-select { font-size: 1rem; } }
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
  /* Budgets: the amount box shrinks with its cell (it never runs under the Roll over checkbox) */
  .budget-table.stack td:nth-child(2) { min-width: 0; }
  .budget-table.stack td:nth-child(2) .amount-input { width: 100%; min-width: 0; }
}
@media (max-width: 380px) { .budget-table.stack td:nth-child(7) button.link .icon { display: none; } } /* "Remove" / "Sure?" keep their words; the icon gives the amount room */
/* the narrowest phones: a custom Balances range stacks From over To (each wide enough for "November 2026") */
@media (max-width: 360px) {
  #balances .bal-controls > .rule-form:first-child > span.inline:not([hidden]) { grid-template-columns: minmax(0, 1fr); font-size: 0; row-gap: .4rem; }
  #balances .bal-controls > .rule-form:first-child > span.inline input { font-size: 1rem; }
}


/* phones: the Ledger grows as it scrolls (app/transactions_list.js loadMore shows #tx-more on compact screens); no pager then */
.tx-more { display: flex; justify-content: center; padding: .9rem 0 1.4rem; }
.tx-more[hidden] { display: none; }
.tx-more:not([hidden]) ~ .pager { display: none; }