/* Theme, part 2: base elements and components (header, controls, pickers, cards, dense tables, badges, sheets, toasts, Ask, motion, phone tab bar, print). Loaded in order by index.html; later parts override earlier ones. */
/* ---- base ---------------------------------------------------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h, 4.5rem) + .75rem); }
body { font: 400 1rem/1.55 var(--font-sans); background: var(--surface-base); color: var(--text-primary); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "kern", "liga"; }
::selection { background: var(--clay-500); color: var(--text-on-accent); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; }
h1 { font-size: 1.25rem; }
h2 { font-size: 1.3rem; margin: 0 0 .75rem; }
h3 { font-size: 1.05rem; }
a { color: var(--text-accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
.muted { color: var(--text-muted); }
.small { font-size: .86rem; }
.note { font-size: .9rem; }
code, pre, .mono { font-family: var(--font-mono); }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); }
.icon { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }

/* ---- header and navigation ---------------------------------------------------------------------------------- */
header { background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border-default); padding: .6rem 1.25rem; gap: .75rem 1rem; }
h1.brand img { width: 36px; height: 36px; border-radius: 10px; box-shadow: var(--shadow-sm); }
header { align-items: center; }
/* the row scrolls sideways, so it clips: room below keeps a hovered or pressed tab's bottom border and the focus ring whole (the
   negative bottom margin takes the room back, so nothing moves) */
header nav { order: 10; flex: 1 1 100%; gap: .2rem; margin: .1rem -.25rem -.55rem; padding: .45rem 0 .35rem; border-top: 1px solid var(--border-subtle); overflow-x: auto; scrollbar-width: none; }
header nav::-webkit-scrollbar { display: none; }
header .alerts-wrap { margin-left: auto; }
header .brand-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; letter-spacing: -0.015em; }
nav button, .tabbar button { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid transparent; border-radius: var(--radius-sm); padding: .3rem .75rem; min-height: 34px; color: var(--text-secondary); font-weight: 500; font-size: .92rem; background: transparent; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
@media (hover: hover) { nav button:hover, .tabbar button:hover { background: var(--surface-hover); color: var(--text-primary); border-color: transparent; } }
nav button.active, .tabbar button.active { background: var(--surface-accent-soft); color: var(--text-accent); font-weight: 600; }
#who { color: var(--text-muted); font-size: .88rem; }
header a { font-size: .92rem; }
.org-select { font-weight: 600; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: var(--radius-sm); background: transparent; border: 1px solid var(--border-default); color: var(--text-secondary); }
@media (hover: hover) { .icon-btn:hover:not(:disabled) { background: var(--surface-hover); color: var(--text-primary); border-color: var(--border-strong); } }

/* ---- controls ------------------------------------------------------------------------------------------------ */
button, input, ui-picker, textarea { font: inherit; }
input, ui-picker, textarea { color: var(--text-primary); background: var(--surface-sunken); border: 1px solid var(--border-control); border-radius: var(--radius-sm); padding: .3rem .65rem; min-height: 32px; transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); }
:root:not([data-theme="dark"]) input, :root:not([data-theme="dark"]) ui-picker, :root:not([data-theme="dark"]) textarea { background-color: #fff; }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: .9; }
@media (hover: hover) { input:hover, ui-picker:hover, textarea:hover { border-color: var(--text-secondary); } }
input:focus-visible, ui-picker:focus-visible, ui-picker[aria-expanded="true"], textarea:focus-visible { outline: none; border-color: var(--focus-border); box-shadow: 0 0 0 3px var(--focus-ring); }
/* ---- pickers: <ui-picker> (app/picker.js) is every dropdown in the app; no native select menus anywhere ------------------
   The trigger is styled with the other controls above (same border, radius, height); these rules add its layout. Its parts
   live in a shadow root: ::part(value) is the current choice, ::part(sizer) are hidden copies of the longest choices that
   make the trigger as wide as its widest option (like a select), ::part(chevron) the Lucide chevron. */
ui-picker { display: inline-flex; align-items: center; gap: .45rem; box-sizing: border-box; min-width: 0; max-width: min(100%, 26rem); padding: .3rem .55rem .3rem .65rem; line-height: 1.35; vertical-align: middle; text-align: left; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } /* as wide as its widest choice (like a select) up to 26rem; longer values end in an ellipsis */
ui-picker[hidden] { display: none; }
ui-picker > :is(option, optgroup) { display: none; } /* the choices are data for the list (and stay hidden before the element is defined) */
ui-picker::part(box) { display: grid; grid-template-columns: minmax(0, 1fr); flex: 1 1 auto; min-width: 0; }
ui-picker::part(value) { grid-area: 1 / 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
ui-picker::part(placeholder) { color: var(--text-muted); }
ui-picker::part(sizer) { grid-area: 2 / 1; height: 0; overflow: hidden; visibility: hidden; white-space: nowrap; }
ui-picker::part(lead) { flex: none; display: inline-flex; width: 16px; height: 16px; color: var(--text-secondary); }
ui-picker::part(lead-empty) { display: none; }
ui-picker::part(chevron) { flex: none; width: 16px; height: 16px; color: var(--text-muted); transition: transform var(--duration-fast) var(--ease-out); }
ui-picker[aria-expanded="true"]::part(chevron) { transform: rotate(180deg); }
ui-picker[disabled] { opacity: .55; cursor: not-allowed; }
/* The list: a popover in the browser's top layer, so it is above the sticky header and bars, drawers, sheets and the tab bar and
   no overflow: hidden ancestor clips it. Without the Popover API it is a fixed layer at --z-picker (above every app layer
   except toasts). picker.js positions it (CSSOM, CSP-safe); its width is the trigger's at least, fitted to the longest choice
   up to 26rem; rows are flex and long labels end in an ellipsis. */
.picker-pop { position: fixed; z-index: var(--z-picker); inset: auto; top: 0; left: 0; width: auto; height: auto; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--text-primary); overflow: visible; font: 400 .92rem/1.4 var(--font-sans); text-align: left; }
.picker-pop::backdrop { background: transparent; }
.picker-panel { display: flex; flex-direction: column; box-sizing: border-box; width: max-content; overflow: hidden; background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); animation: ns-scale-in var(--duration-fast) var(--ease-out) backwards; transform-origin: top left; }
.picker-pop.up .picker-panel { transform-origin: bottom left; }
.picker-panel:focus { outline: none; }
.picker-search { flex: none; display: flex; align-items: center; gap: .45rem; padding: .2rem .65rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-muted); }
.picker-pop .picker-q, :root .picker-pop .picker-q, .icon-pop .picker-q, :root .icon-pop .picker-q { flex: 1 1 auto; width: 100%; min-width: 0; min-height: 32px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--text-primary); font-size: .92rem; }
.picker-pop .picker-q:focus-visible, .icon-pop .picker-q:focus-visible { outline: none; border: 0; box-shadow: none; }
.picker-tools { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .9rem; padding: .2rem .75rem; border-bottom: 1px solid var(--border-subtle); }
.picker-tools .picker-tool { min-height: 28px; padding: 0; font-size: .85rem; }
.picker-tools .picker-tool:disabled { opacity: .45; }
.picker-count { margin-left: auto; color: var(--text-muted); font-size: .8rem; white-space: nowrap; }
.picker-list { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .25rem; }
.picker-opt { display: flex; align-items: center; gap: .5rem; min-width: 0; min-height: 32px; padding: .3rem .65rem .3rem .45rem; border-radius: var(--radius-xs); color: var(--text-primary); cursor: pointer; }
.picker-opt[hidden], .picker-group[hidden], .picker-empty[hidden] { display: none; }
.picker-opt.is-active { background: var(--surface-hover); }
.picker-opt.is-selected { color: var(--text-accent); font-weight: 600; }
.picker-opt[aria-disabled="true"] { color: var(--text-muted); cursor: default; }
.picker-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; }
.picker-mark .icon { width: 1rem; height: 1rem; vertical-align: 0; }
.picker-opt-icon { flex: none; display: inline-flex; color: var(--text-secondary); }
.picker-opt-icon .icon { width: 1rem; height: 1rem; vertical-align: 0; }
.picker-opt:not(.is-selected) .picker-mark .icon { visibility: hidden; }
.multi .picker-mark { width: 1.05rem; height: 1.05rem; box-sizing: border-box; border: 1.5px solid var(--border-control); border-radius: 4px; background: var(--surface-sunken); color: var(--text-on-accent); }
.multi .picker-opt.is-selected { color: var(--text-primary); font-weight: 500; }
.multi .picker-opt.is-selected .picker-mark { background: var(--clay-500); border-color: var(--clay-500); }
.multi .picker-mark .icon { width: .75rem; height: .75rem; stroke-width: 3; }
.picker-group-label { padding: .45rem .55rem .2rem; font-size: .72rem; font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); }
.picker-hit { background: none; color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--clay-500); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.picker-empty { padding: .6rem .85rem .75rem; color: var(--text-muted); font-size: .9rem; }
@media (pointer: coarse) {
  .picker-opt { min-height: var(--touch-min); }
  .picker-pop .picker-q { min-height: 40px; font-size: 1rem; }
  .picker-tools .picker-tool { min-height: 40px; }
}
/* phones (picker.js uses the app's phone query): a bottom sheet over the dimmed page, sized to the visual viewport so it sits
   above an on-screen keyboard; safe areas respected; 48px rows */
.picker-pop.as-sheet { display: flex; flex-direction: column; justify-content: flex-end; background: rgba(15, 17, 11, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: ns-fade-in var(--duration-fast) linear backwards; }
.as-sheet .picker-panel { width: min(40rem, 100%); max-width: none; max-height: min(85%, 46rem); margin: 0 auto; padding-bottom: var(--safe-bottom); border-bottom: 0; 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; }
.picker-head { flex: none; position: relative; display: flex; align-items: center; gap: .5rem; padding: .8rem max(1rem, var(--safe-right)) .5rem max(1rem, var(--safe-left)); border-bottom: 1px solid var(--border-default); }
.picker-head::before { content: ""; position: absolute; top: 5px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: var(--border-strong); }
.picker-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; }
.picker-done { flex: none; min-height: var(--touch-min); padding: 0 1.1rem; border-radius: var(--radius-pill); font-size: .95rem; }
.as-sheet .picker-search { padding: .3rem max(1rem, var(--safe-right)) .3rem max(1rem, var(--safe-left)); }
.picker-pop.as-sheet .picker-q { min-height: var(--touch-min); font-size: 1rem; }
.as-sheet .picker-tools { padding: .15rem max(1rem, var(--safe-right)) .15rem max(1rem, var(--safe-left)); }
.as-sheet .picker-list { padding: .35rem max(.5rem, var(--safe-right)) .6rem max(.5rem, var(--safe-left)); }
.as-sheet .picker-opt { min-height: 48px; padding: .5rem .75rem; gap: .7rem; font-size: 1rem; border-radius: var(--radius-sm); }
.as-sheet.multi .picker-mark { width: 1.35rem; height: 1.35rem; }
input[type=checkbox], input[type=radio] { min-height: 0; width: 1.1rem; height: 1.1rem; accent-color: var(--clay-500); padding: 0; vertical-align: -0.2em; }
input[type=date] { color-scheme: inherit; }
button { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 32px; padding: .3rem .85rem; font-weight: 600; font-size: .9rem; color: var(--text-primary); background: var(--surface-raised); border: 1px solid var(--border-control); border-radius: var(--radius-md); cursor: pointer; transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); }
@media (hover: hover) { button:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--text-secondary); } }
button:active:not(:disabled) { transform: translateY(1px) scale(.99); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.primary { background: var(--clay-500); border-color: transparent; color: var(--text-on-accent); box-shadow: var(--shadow-sm); }
@media (hover: hover) { button.primary:hover:not(:disabled) { background: var(--clay-400); border-color: transparent; box-shadow: 0 6px 20px rgba(217, 119, 87, 0.28); } }
button.link { display: inline; min-height: 0; padding: 0; background: none; border: 0; color: var(--text-accent); font-weight: 500; font-size: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
@media (hover: hover) { button.link:hover:not(:disabled) { background: none; text-decoration-color: currentColor; transform: none; } }
button.link.danger, .danger { color: var(--neg-text); }
button.link.cat { color: inherit; text-decoration-style: dotted; font-weight: 500; text-align: left; }
.sorthead { min-height: 0; display: inline; }

/* ---- layout, cards, tiles ------------------------------------------------------------------------------------ */
main { max-width: 80rem; padding: 1.25rem 1.25rem 3rem; }
.card { background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card), var(--inset-top); padding: 1.25rem; }
.tile { background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-card), var(--inset-top); padding: 1rem 1.15rem; }
.tile-label { color: var(--text-secondary); font-size: .85rem; font-weight: 600; letter-spacing: .02em; }
.tile-value { font-family: var(--font-display); font-weight: 600; font-size: 1.95rem; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; margin: .15rem 0; }
.tile-sub { color: var(--text-muted); font-size: .84rem; }
.tile-button { transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); }
@media (hover: hover) { .tile-button:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-md), var(--inset-top); background: var(--surface-raised); } }
.pos { color: var(--pos-text); } .neg { color: var(--neg-text); }
.banner { border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--surface-raised); padding: .7rem 1rem; display: flex; gap: .6rem; align-items: center; }
.banner.warn { border-color: var(--warn-text); color: var(--text-primary); background: color-mix(in srgb, var(--warn-text) 12%, var(--surface-raised)); }
.empty { color: var(--text-muted); }

/* ---- tables: dense, NetSuite-list style (one header band, ~30px rows, hairline separators), in our colours ------------- */
:root { --row-pad-y: .18rem; --row-pad-x: .6rem; --table-font: .875rem; }
table { border-collapse: separate; border-spacing: 0; font-size: var(--table-font); line-height: 1.3; }
th { position: sticky; top: 0; z-index: 1; background: var(--surface-sunken); color: var(--text-secondary); font-size: .8rem; font-weight: 600; text-transform: none; letter-spacing: 0; padding: .4rem var(--row-pad-x); border-bottom: 1px solid var(--border-strong); border-left: 1px solid var(--border-subtle); white-space: nowrap; text-align: left; }
th:first-child { border-left: 0; }
th.num { text-align: right; }
td { padding: var(--row-pad-y) var(--row-pad-x); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
tbody tr { transition: background var(--duration-fast) var(--ease-out); }
@media (hover: hover) { tbody tr:hover td { background: color-mix(in srgb, var(--surface-hover) 55%, var(--surface-raised)); } }
tbody tr:last-child td { border-bottom: 0; }
.num { font-family: var(--font-mono); font-size: .82rem; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
th.num { font-family: var(--font-sans); letter-spacing: 0; font-size: .8rem; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
tr.pending td { color: var(--text-secondary); }
tr.selected td, tr.selected:hover td { background: var(--surface-accent-soft); }
tr.focused td { outline: 0; box-shadow: inset 0 2px 0 var(--focus-border), inset 0 -2px 0 var(--focus-border); }
tr.focused td:first-child { box-shadow: inset 0 2px 0 var(--focus-border), inset 0 -2px 0 var(--focus-border), inset 2px 0 0 var(--focus-border); }
tr.focused td:last-child { box-shadow: inset 0 2px 0 var(--focus-border), inset 0 -2px 0 var(--focus-border), inset -2px 0 0 var(--focus-border); }
tr.ignored td { opacity: 1; color: var(--text-secondary); }
tr.disabled td { opacity: 1; }
tr.disabled td:not(:last-child) { color: var(--text-muted); font-style: italic; }
td.col-date, td.col-actions { white-space: nowrap; }
/* controls inside rows are compact too (phones restore 44px targets in the phone block below) */
td ui-picker { height: 24px; min-height: 24px; line-height: 1.1; padding: 0 .4rem 0 .5rem; gap: .3rem; font-size: .85rem; border-radius: var(--radius-xs); }
td ui-picker::part(chevron) { width: 14px; height: 14px; }
td input[type=text], td input[type=number], td input[type=search] { height: 24px; min-height: 24px; padding: 0 .45rem; font-size: .85rem; border-radius: var(--radius-xs); }
td button:not(.link):not(.primary) { min-height: 24px; padding: 0 .55rem; font-size: .85rem; border-radius: var(--radius-xs); }
td input[type=checkbox] { width: 1rem; height: 1rem; }
td.col-account { white-space: nowrap; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; } /* one line, cut short: a long card name must not squeeze Merchant (full name in its tooltip) */
td .badge { margin-left: .3rem; padding: 0 .4rem; font-size: .7rem; line-height: 1.25; }
td button.link { font-size: .85rem; }
.chart-table { font-size: .82rem; }
.chart-table td, .chart-table th { padding: .22rem .5rem; }

/* ---- badges, chips ------------------------------------------------------------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: .3rem; margin-left: .4rem; padding: .12rem .55rem; font-size: .75rem; font-weight: 600; letter-spacing: .02em; line-height: 1.35; color: var(--text-secondary); background: var(--surface-sunken); border: 1px solid var(--border-default); border-radius: var(--radius-pill); }
.badge.warn { color: var(--warn-text); background: color-mix(in srgb, var(--warn-text) 6%, var(--surface-raised)); border-color: color-mix(in srgb, var(--warn-text) 45%, transparent); }
.badge.book { color: var(--text-accent); background: var(--surface-accent-soft); border-color: transparent; }
.badge.tag { background: transparent; border-style: dashed; }
.chip { border-radius: var(--radius-pill); }

/* ---- budgets progress, charts -------------------------------------------------------------------------------- */
.meter { height: .6rem; background: var(--surface-sunken); border: 1px solid var(--border-subtle); }
.meter .fill { background: var(--s1); transition: width var(--duration-slow) var(--ease-out); }
.meter .fill.warn { background: var(--s4); } .meter .fill.over { background: var(--s8); }
.chart figcaption { font-family: var(--font-display); font-size: 1.05rem; }

/* ---- drawer, panels, toasts ---------------------------------------------------------------------------------- */
#toasts { position: fixed; left: 0; right: 0; bottom: calc(1.2rem + var(--safe-bottom)); z-index: 40; display: flex; flex-direction: column; align-items: center; gap: .5rem; pointer-events: none; }
.toast { width: max-content; max-width: min(90vw, 38rem); pointer-events: auto; display: flex; align-items: center; gap: .6rem; background: var(--surface-inverse); color: var(--text-inverse); border: 1px solid var(--border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: .7rem 1.1rem; font-weight: 500; overflow-wrap: anywhere; animation: ns-fade-in-up var(--duration-base) var(--ease-out) backwards; }
.toast.error { background: #B23F29; color: #fff; border-color: transparent; }
.alerts-panel, .palette { background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.alerts-panel { animation: ns-scale-in var(--duration-base) var(--ease-out) backwards; transform-origin: top right; }
.alerts-btn { position: relative; }
.alerts-count { background: var(--clay-500); color: var(--text-on-accent); }
.alerts-count.critical { background: #E56565; color: #181A12; }
.alert-item { border-top: 1px solid var(--border-subtle); }
.alert-item.critical .alert-icon { color: var(--neg-text); } .alert-item.warn .alert-icon { color: var(--warn-text); } .alert-item.info .alert-icon { color: var(--info-text); }
@media (hover: hover) { .palette-item:hover { background: var(--surface-hover); } }

/* ---- Ask ----------------------------------------------------------------------------------------------------- */
.transcript { background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: none; }
.msg { border-radius: var(--radius-md); border: 1px solid var(--border-default); }
.msg.user { background: var(--clay-500); color: var(--text-on-accent); border-color: transparent; }
.msg.assistant { background: var(--surface-raised); border-color: var(--border-subtle); }
.cat-rows { display: grid; grid-template-columns: minmax(0, 1fr); gap: .35rem; } /* a long name ellipsizes; it never widens the list */
.cat-row { min-width: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-raised); }
.cat-row[open] { border-color: var(--border-default); }
.cat-row > summary { display: flex; align-items: center; gap: .75rem; min-height: 52px; padding: .45rem .75rem; cursor: pointer; list-style: none; }
.cat-row > summary::-webkit-details-marker { display: none; }
.cat-row-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2rem; height: 2rem; border-radius: var(--radius-sm); background: var(--surface-accent-soft); color: var(--text-accent); }
.cat-row-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.cat-row-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-row-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem; flex: 0 1 auto; }
.cat-edit { display: grid; gap: .6rem; padding: .25rem .75rem .85rem; }
.cat-edit-line { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.cat-edit-line input[type=text] { flex: 1 1 12rem; min-width: 0; }
.cat-delete { padding-top: .5rem; border-top: 1px solid var(--border-subtle); }
.cat-aliases { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.cat-feed-row { display: grid; gap: .4rem; padding: .6rem 0; border-top: 1px solid var(--border-subtle); }
.cat-feed-row:first-child { border-top: 0; }
.rules-cats-link { margin: 0 0 .75rem; }
@media (max-width: 700px) { .cat-row-badges { display: none; } .cat-edit-line ui-picker { flex: 1 1 10rem; } } /* phones: the badges are in the editor's own words */
.push-actions { display: flex; flex-wrap: wrap; gap: .5rem; } /* Settings: Turn on · Send a test · Turn off */
.list-tools { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: .35rem 0 0; } /* Show all · Download CSV under a list answer */
.list-tools .link { min-height: 36px; }
.takeaway { border-left-color: var(--clay-500); background: var(--surface-sunken); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.md code { font-size: .88em; }
.md pre { background: var(--surface-sunken); border-color: var(--border-subtle); border-radius: var(--radius-sm); }

/* ---- form rows ----------------------------------------------------------------------------------------------- */
.filter-panel, .bulkbar { background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.bulkbar { border-color: var(--clay-500); box-shadow: var(--shadow-md); }
label.inline { color: var(--text-secondary); }
.field { color: var(--text-secondary); }
.steps a, .card a { color: var(--text-accent); }
.tx-groups details.group { background: var(--surface-raised); border-color: var(--border-subtle); border-radius: var(--radius-md); }
.alerts-wrap { position: relative; }

/* ---- motion: soft and brief; everything stops under prefers-reduced-motion --------------------------------- */
@keyframes ns-fade-in-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ns-fade-in { from { opacity: 0; } to { opacity: 1; } } /* backdrops: a fade only */
@keyframes ns-scale-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes ns-drawer-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes ns-sheet-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes ns-shimmer { from { background-position: -180% 0; } to { background-position: 180% 0; } }
main > section:not([hidden]) { animation: ns-fade-in-up var(--duration-base) var(--ease-out) backwards; }
.tiles > .tile { animation: ns-fade-in-up var(--duration-base) var(--ease-out) backwards; }
.tiles > .tile:nth-child(2) { animation-delay: 45ms; } .tiles > .tile:nth-child(3) { animation-delay: 90ms; } .tiles > .tile:nth-child(4) { animation-delay: 135ms; } .tiles > .tile:nth-child(5) { animation-delay: 180ms; }
.card, .tx-groups details.group { animation: ns-fade-in-up var(--duration-base) var(--ease-out) backwards; } /* backwards, never both: a fill-forwards transform animation makes the element a containing block for position: fixed (drawer, sheet) and traps z-index (popovers) */
.skeleton { background: linear-gradient(90deg, var(--surface-raised) 25%, var(--surface-hover) 50%, var(--surface-raised) 75%); background-size: 200% 100%; animation: ns-shimmer 1.4s linear infinite; border-radius: var(--radius-sm); min-height: 1rem; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---- mobile: bottom tab bar, bottom-sheet drawer, 44px targets ------------------------------------------------ */
.tabbar { display: none; }
.sheet-backdrop { position: fixed; inset: 0; background: rgba(15, 17, 11, 0.55); z-index: 30; animation: ns-fade-in var(--duration-fast) linear backwards; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 31; background: var(--surface-raised); border-top: 1px solid var(--border-default); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-lg); padding: 1rem 1rem calc(1rem + var(--safe-bottom)); max-height: 80vh; overflow: auto; animation: ns-sheet-in var(--duration-slow) var(--ease-out) backwards; }
.sheet h2 { font-size: 1.1rem; }
.sheet .sheet-list { display: grid; gap: .25rem; }
.sheet .sheet-list button { justify-content: flex-start; width: 100%; min-height: var(--touch-min); background: transparent; border-color: transparent; font-weight: 500; }
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
  html { font-size: 87.5%; } /* phones: 14px root; every size is in rem, touch targets stay 44px */
  body { padding-bottom: calc(max(var(--tabbar-top), 4.75rem) + .75rem); font-size: 1rem; }
  header { position: sticky; top: 0; padding: .5rem .85rem; }
  header nav { display: none; }
  #who { display: none; }
  .tabbar { display: flex; }
  main { padding: .9rem .85rem 2rem; }
  button, input, ui-picker, textarea { min-height: var(--touch-min); }
  button.link { min-height: var(--touch-min); display: inline-flex; align-items: center; }
  input[type=checkbox], input[type=radio], td input[type=checkbox] { width: 1.5rem; height: 1.5rem; min-height: 0; }
  td:has(> input[type=checkbox]) { padding: .6rem .5rem; }
  summary, .steps-log summary, details > summary, label.radio, label.inline, .switch { min-height: var(--touch-min); display: flex; align-items: center; }
  td ui-picker { height: auto; min-height: var(--touch-min); font-size: 1rem; }
  td input[type=text], td input[type=number], td input[type=search], td button:not(.link):not(.primary) { min-height: var(--touch-min); font-size: 1rem; }
  td { padding: .5rem var(--row-pad-x); }
  .icon-btn, .alerts-btn { min-width: var(--touch-min); min-height: var(--touch-min); }
  input, ui-picker, textarea { font-size: 1rem; }
  h2 { font-size: 1.2rem; }
  .tile-value { font-size: 1.6rem; }
  .card { padding: 1rem; border-radius: var(--radius-md); }
  .alerts-panel { position: fixed; left: .5rem; right: .5rem; top: 3.8rem; width: auto; max-height: calc(100vh - 8rem); }
  #toasts { bottom: calc(5.2rem + var(--safe-bottom)); }
  .table-scroll th { position: static; }
  .period, .tx-toolbar, .bar { gap: .5rem; }
}
@media (min-width: 701px) and (min-height: 501px), (min-width: 701px) and (pointer: fine) { .sheet, .sheet-backdrop { display: none; } }

/* ---- print: the monthly report on paper ---------------------------------------------------------------------- */
@media print {
  :root { color-scheme: light; --surface-base: #fff; --surface-raised: #fff; --surface-sunken: #fff; --text-primary: #000; --text-secondary: #333; --text-muted: #444; --text-accent: #7a2e17; --border-default: #bbb; --border-subtle: #ddd; --fg: #000; --muted: #444; --line: #bbb; --pos: #1f5c1f; --neg: #9b1c1c; --pos-text: #1f5c1f; --neg-text: #9b1c1c; --warn-text: #6b4200; }
  body { background: #fff; color: #000; padding: 0; font-size: 11pt; }
  .card, .tile { box-shadow: none; background: #fff; border-color: #bbb; animation: none; }
  th { position: static; background: #fff; }
  .tabbar, .sheet, .sheet-backdrop { display: none !important; }
}

/* ---- icons, toast, sheet details ----------------------------------------------------------------------------------- */
button .icon, a .icon { width: 1.1em; height: 1.1em; }
button.link .icon { width: 1em; height: 1em; vertical-align: -0.15em; margin-right: .25rem; }
button.link[data-icon-after] .icon, [data-icon-after] .icon { margin: 0 0 0 .25rem; }
.chip-x { margin-left: .2rem; }
.chip-x .icon { margin: 0 !important; width: .95em; height: .95em; }
.toast .icon { flex: none; width: 1.2em; height: 1.2em; }
.toast.error .icon { color: #fff; }
.toast.leaving { animation: ns-fade-out var(--duration-fast) var(--ease-in-out) both; }
@keyframes ns-fade-out { from { opacity: 1; } to { opacity: 0; } }
.alert-icon { display: inline-flex; padding-top: .15rem; }
.alert-icon .icon { width: 1.15rem; height: 1.15rem; }
.banner .icon { flex: none; }
.sheet-signout, .sheet > button, .sheet .with-label { font-size: 1rem; display: flex; align-items: center; gap: .55rem; min-height: var(--touch-min); padding: .5rem .6rem; border-radius: var(--radius-sm); color: var(--text-primary); text-decoration: none; font-weight: 500; }
.sheet .with-label { width: 100%; background: transparent; border-color: transparent; justify-content: flex-start; }
@media (hover: hover) { .sheet-signout:hover { background: var(--surface-hover); } }
#txns th, .table-scroll th { top: var(--header-h, 4rem); }
.table-scroll th { top: 0; }
.bulkbar { top: calc(var(--header-h, 4rem) + .25rem); }
th .sorthead { display: inline-flex; align-items: center; gap: .25rem; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; }
@media (hover: hover) { th .sorthead:hover { color: var(--text-primary); } }
.org-select { min-height: 40px; }
@media (max-width: 700px) {
  header a.signout, header #orgname { display: none; }
  header { gap: .5rem; }
}

.tile-button { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 100%; text-align: left; }


@media (max-width: 700px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .tiles > .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tile { padding: .8rem .9rem; }
  .tile-value { font-size: 1.45rem; }
  .tile-label { font-size: .8rem; }
  .tile-sub { font-size: .78rem; }
}
.month-nav .icon-btn, .month-nav button[data-icon] { min-width: 44px; }

header a.signout { color: var(--text-secondary); }
@media (hover: hover) { header a.signout:hover { color: var(--text-primary); } }