/* Transactions page (pages/transactions.js) and the shared transaction drawer (js/tx-drawer.js).
   In-page rules are scoped under .page-transactions. Overlays render into #overlay-root,
   outside the page, so their classes carry their own prefix instead:
     .txo-*  overlays the Transactions page opens (popovers, modals, the bulk-edit drawer)
     .txd-*  the shared transaction drawer and its modals (any page can open it)
   Every color, space, radius and shadow comes from the Organic tokens or the app.css aliases. */

/* ══ page ═════════════════════════════════════════════════════════════════ */
.page-transactions .txp-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.page-transactions .txp-layout.is-split { grid-template-columns: minmax(0, 1fr) 280px; }

/* header buttons: Search / Date show their value when set; Filters gets a dot */
.page-transactions .txp-hbtn { position: relative; max-width: 240px; }
.page-transactions .txp-hbtn-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-transactions .txp-hbtn.is-active { background: var(--color-accent-100); border-color: var(--color-accent-300); color: var(--color-accent-800); }
.page-transactions .txp-hbtn.is-active:hover { background: var(--color-accent-200); }
.page-transactions .txp-hbtn.is-active:active { background: var(--color-accent-300); }
.page-transactions .txp-dot {
  position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-accent); box-shadow: 0 0 0 2px var(--color-bg);
}
.page-transactions .txp-dot[hidden] { display: none; }
/* Add transaction without an open cash or credit account: disabled, with the reason beside it */
.page-transactions .txp-add-wrap { display: inline-flex; cursor: not-allowed; }
.page-transactions .txp-add-hint {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 0 0 var(--space-3); font-size: 13px; color: var(--muted);
}
.page-transactions .txp-add-hint svg, .page-transactions .txp-add-hint .icon { color: var(--color-accent-2-700); }

/* the transactions card */
.page-transactions .txp-card {
  container: txcard / inline-size;
  gap: 0; padding: var(--space-4) var(--space-4) var(--space-6);
}
.page-transactions .txp-toolbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3);
  min-height: 48px; padding-bottom: var(--space-3);
}
.page-transactions .txp-tb-left, .page-transactions .txp-tb-right { display: flex; align-items: center; gap: var(--space-2); }
.page-transactions .txp-view .select { min-width: 220px; }
.page-transactions .txp-selall {
  display: inline-flex; align-items: center; gap: var(--space-3); padding-left: var(--space-3);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.page-transactions .txp-hint { margin-left: calc(-1 * var(--space-2)); font-size: 13px; font-weight: 400; color: var(--muted); }

/* active-filter strip */
.page-transactions .txp-active { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding: 0 0 var(--space-3) var(--space-1); }
.page-transactions .txp-result { margin-right: var(--space-1); font-size: 13px; color: var(--muted); }
.page-transactions .txp-chip {
  display: inline-flex; align-items: center; gap: var(--space-1); max-width: 280px;
  padding: var(--space-1) var(--space-2) var(--space-1) calc(var(--space-2) * 1.25);
  border: 0; border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 600;
  background: var(--color-accent-2-100); color: var(--color-accent-2-800);
}
.page-transactions .txp-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-transactions .txp-chip:hover { background: var(--color-accent-2-200); }
.page-transactions .txp-chip:active { background: var(--color-accent-2-300); }
.page-transactions .txp-link {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-2); border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--color-accent-700);
}
.page-transactions .txp-link:hover { background: var(--color-accent-100); }
.page-transactions .txp-link:active { background: var(--color-accent-200); }
.page-transactions .txp-link:disabled { opacity: 0.45; cursor: not-allowed; background: none; }

/* list: date bands + rows. Rows share fixed side tracks so columns line up across the card. */
.page-transactions .txp-list {
  --txp-main: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.1fr) 64px 7.5em 16px;
  --txp-check: 20px;
  --txp-date: 52px;
  display: flex; flex-direction: column;
}
.page-transactions .txp-day + .txp-day { margin-top: var(--space-4); }
.page-transactions .txp-band {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-bottom: var(--space-1); padding: calc(var(--space-1) * 1.2) var(--space-3);
  border-radius: 999px; background: var(--inset);
  font-size: 12px; font-weight: 600; color: var(--muted);
}
.page-transactions .txp-band .is-pos { color: var(--positive); }

.page-transactions .txp-row {
  position: relative; display: grid; grid-template-columns: var(--txp-main); align-items: center; column-gap: var(--space-3);
  width: 100%; min-height: 46px; padding: var(--space-2) var(--space-3);
  border: 0; border-radius: var(--radius-md); background: none; cursor: pointer;
  font-size: 14px; text-align: left; color: var(--color-text);
}
.page-transactions .is-flat .txp-row { grid-template-columns: var(--txp-date) var(--txp-main); }
.page-transactions .is-selecting .txp-row { grid-template-columns: var(--txp-check) var(--txp-main); }
.page-transactions .is-selecting.is-flat .txp-row { grid-template-columns: var(--txp-check) var(--txp-date) var(--txp-main); }
.page-transactions .txp-row:hover { background: var(--hover); }
.page-transactions .txp-row:active { background: var(--press); }
.page-transactions .txp-row.is-selected { background: var(--color-accent-100); }
.page-transactions .txp-row.is-selected:hover { background: var(--color-accent-200); }
.page-transactions .txp-row.is-selected:active { background: var(--color-accent-300); }
/* whisper separators between rows of a day; they step aside for hovered/selected rows */
.page-transactions .txp-row + .txp-row::before {
  content: ''; position: absolute; top: 0; left: var(--space-3); right: var(--space-3); height: 1px;
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
}
.page-transactions .txp-row:is(:hover, :focus-visible, .is-selected)::before,
.page-transactions .txp-row:is(:hover, :focus-visible, .is-selected) + .txp-row::before { opacity: 0; }
.page-transactions .txp-row.is-new { animation: txp-flash 2.6s ease-out; }
@keyframes txp-flash { 0%, 35% { background: var(--color-accent-2-200); } 100% { background: transparent; } }

.page-transactions .txp-c { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.page-transactions .txp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.page-transactions .txp-pending { flex: none; }
.page-transactions .txp-c-cat { color: color-mix(in srgb, var(--color-text) 85%, transparent); }
.page-transactions .txp-c-acct { font-size: 13px; color: var(--muted); }
.page-transactions .txp-acct-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.page-transactions .txp-mask { color: var(--muted); }
.page-transactions .txp-c-date { font-size: 13px; color: var(--muted); }
.page-transactions .txp-c-ind { justify-content: flex-end; gap: var(--space-1); color: var(--muted); }
.page-transactions .txp-ind { display: inline-flex; }
.page-transactions .txp-tagdot { width: 9px; height: 9px; flex: none; border-radius: 50%; }
.page-transactions .txp-c-amt { justify-content: flex-end; }
.page-transactions .txp-chev { color: var(--muted); }
.page-transactions .is-selecting .txp-chev { visibility: hidden; }
.page-transactions .txp-row.is-hidden > :not(.txp-c-ind):not(input) { opacity: 0.5; }

/* footer of the list */
.page-transactions .txp-more { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-3) 0; font-size: 13px; color: var(--muted); }
.page-transactions .txp-sentinel { width: 1px; height: 1px; }

/* summary panel */
.page-transactions .txp-summary { gap: var(--space-4); padding: var(--space-4) var(--space-4) var(--space-4); }
.page-transactions .txp-kv { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }
.page-transactions .txp-kv-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: 14px; }
.page-transactions .txp-kv-row dt { color: var(--muted); flex: none; max-width: 55%; }
.page-transactions .txp-kv-row dd { margin: 0; min-width: 0; font-weight: 700; text-align: right; }
.page-transactions .txp-kv-sub { display: block; font-size: 12px; font-weight: 400; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-transactions .txp-note { margin: 0; font-size: 12px; color: var(--muted); }
.page-transactions .txp-csv { align-self: flex-start; margin-left: calc(-1 * var(--space-2)); }

/* narrow card (summary open on a mid-size screen, or a small window): drop the account column */
@container txcard (max-width: 700px) {
  .page-transactions .txp-list { --txp-main: minmax(0, 1.3fr) minmax(0, 1fr) 56px 7.5em 16px; }
  .page-transactions .txp-c-acct { display: none; }
}
@container txcard (max-width: 480px) {
  .page-transactions .txp-list { --txp-main: minmax(0, 1fr) 7.5em 16px; }
  .page-transactions .txp-c-cat, .page-transactions .txp-c-ind { display: none; }
}
/* Below 1180px the Summary stacks. It goes ABOVE the card as a compact stat strip: under an
   infinitely loading list it would sit thousands of pixels down, and the header toggle would
   appear to do nothing. */
@media (max-width: 1180px) {
  .page-transactions .txp-layout.is-split { grid-template-columns: minmax(0, 1fr); }
  .page-transactions .txp-summary { order: -1; }
  .page-transactions .txp-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3) var(--space-6); }
  .page-transactions .txp-kv-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .page-transactions .txp-kv-row dt { max-width: none; font-size: 13px; }
  .page-transactions .txp-kv-row dd { text-align: left; max-width: 100%; }
}

/* ══ shared controls (used in the page and in its overlays) ═══════════════ */
.txo-check {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; display: inline-grid; place-content: center;
  width: 18px; height: 18px; margin: 0; cursor: pointer;
  border: 1.5px solid color-mix(in srgb, var(--color-text) 35%, transparent); border-radius: var(--radius-sm);
  background: var(--color-bg);
}
.txo-check:hover { border-color: var(--color-accent); }
.txo-check:active { background: var(--color-accent-100); }
.txo-check:checked, .txo-check:indeterminate { background: var(--color-accent); border-color: var(--color-accent); }
.txo-check:checked:hover, .txo-check:indeterminate:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); }
.txo-check:checked:active, .txo-check:indeterminate:active { background: var(--color-accent-700); border-color: var(--color-accent-700); }
.txo-check::after { content: ''; display: none; }
.txo-check:checked::after {
  display: block; width: 5px; height: 9px; margin-top: -2px;
  border: solid var(--color-bg); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.txo-check:indeterminate::after { display: block; width: 9px; height: 2px; border-radius: 2px; background: var(--color-bg); }

.txo-select, .txd-select { display: flex; width: 100%; }
.txo-select .select, .txd-select .select { width: 100%; min-height: 36px; font-size: 14px; background: var(--color-surface); }
.txo-select .select:hover, .txd-select .select:hover { background: var(--color-surface); border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.txo-select .select:active, .txd-select .select:active { background: var(--color-neutral-300); }

.txo-money, .txd-money { position: relative; display: block; }
.txo-money[hidden], .txd-money[hidden] { display: none; }
.txo-affix, .txd-affix {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 14px; color: var(--muted); pointer-events: none;
}
.txo-money .input, .txd-money .input { padding-left: calc(var(--space-6) + 2px); }
.txd-money.is-pct .input { padding-left: var(--space-3); padding-right: calc(var(--space-6) + 2px); }
.txd-affix-end { left: auto; right: 14px; }

.txo-dot, .txd-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; }
.txo-label { display: block; margin-bottom: 5px; font-size: 12px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.txo-hint { display: block; margin-top: var(--space-1); font-size: 12px; color: var(--muted); }
.txo-link {
  padding: 2px var(--space-2); border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--color-accent-700);
}
.txo-link:hover { background: var(--color-accent-100); }
.txo-link:active { background: var(--color-accent-200); }

/* destructive buttons: terracotta 700 (body-size text contrast) */
.txd-danger { border-color: color-mix(in srgb, var(--color-accent-700) 55%, transparent); background: transparent; color: var(--color-accent-700); }
.txd-danger:hover { background: var(--color-accent-100); }
.txd-danger:active { background: var(--color-accent-200); }
.txd-danger-solid { background: var(--color-accent-700); color: var(--color-bg); }
.txd-danger-solid:hover { background: var(--color-accent-800); }
.txd-danger-solid:active { background: var(--color-accent-900); }
.txo-foot-left, .txd-foot-left { margin-right: auto; }

/* ══ popovers: Search / Date / Filters ═════════════════════════════════════ */
.txo-pop-title { display: block; margin-bottom: var(--space-2); font-size: 14px; font-weight: 700; }
.txo-help { margin: var(--space-2) 0 0; font-size: 12px; color: var(--muted); }
.txo-error { margin: 0; font-size: 12px; font-weight: 600; color: var(--negative); }
.txo-error[hidden] { display: none; }
.txo-pop-foot { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
.txo-grow { flex: 1; }
.txo-input-icon { position: relative; display: block; }
.txo-input-icon[hidden] { display: none; }
.txo-input-icon > svg, .txo-input-icon > .icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none;
}
.txo-input-icon .input { padding-left: calc(var(--space-8) + 1px); }

.txo-date { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-4); }
.txo-preset-list { display: flex; flex-direction: column; gap: 2px; }
.txo-preset {
  padding: calc(var(--space-1) * 1.4) var(--space-3); border: 0; border-radius: 999px; background: none; cursor: pointer;
  text-align: left; font-size: 14px;
}
.txo-preset:hover { background: var(--color-accent-100); }
.txo-preset:active { background: var(--color-accent-200); }
.txo-preset[aria-pressed='true'] { background: var(--color-accent-100); color: var(--color-accent-800); font-weight: 600; }
.txo-custom { display: flex; flex-direction: column; gap: var(--space-3); padding-top: calc(var(--space-6) + 2px); }
.txo-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-1); }
.txo-label-row label { font-size: 12px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }

.txo-filters { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--space-4); }
.txo-filters.has-sel { grid-template-columns: 140px minmax(0, 1fr) 210px; }
.txo-ftabs { display: flex; flex-direction: column; gap: 2px; }
.txo-ftab {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  padding: calc(var(--space-1) * 1.4) var(--space-3); border: 0; border-radius: 999px; background: none; cursor: pointer;
  text-align: left; font-size: 14px;
}
.txo-ftab:hover { background: var(--color-accent-100); }
.txo-ftab:active { background: var(--color-accent-200); }
.txo-ftab[aria-pressed='true'] { background: var(--color-accent-100); color: var(--color-accent-800); font-weight: 600; }
.txo-ftab-n {
  min-width: 18px; height: 18px; padding: 0 var(--space-1); border-radius: 999px; display: inline-grid; place-items: center;
  background: var(--color-accent); color: var(--color-bg); font-size: 11px; font-weight: 700;
}
.txo-ftab-n:empty { display: none; }
.txo-fmain { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding-top: calc(var(--space-6) + 2px); }
.txo-fmain-head { display: flex; align-items: center; gap: var(--space-3); }
.txo-fmain-head .txo-input-icon { flex: 1; min-width: 0; }
.txo-fcount { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }
.txo-ftree { display: flex; flex-direction: column; gap: 1px; max-height: 300px; overflow-y: auto; padding-right: var(--space-1); }
.txo-opt {
  display: flex; align-items: center; gap: var(--space-2); padding: calc(var(--space-1) * 1.2) var(--space-2);
  border-radius: 999px; cursor: pointer; font-size: 14px;
}
.txo-opt:hover { background: var(--color-accent-100); }
.txo-opt:active { background: var(--color-accent-200); }
.txo-opt-all { font-weight: 600; }
.txo-opt-group { margin-top: var(--space-1); font-weight: 600; }
.txo-fchildren { display: flex; flex-direction: column; gap: 1px; padding-left: var(--space-6); }
.txo-opt-lead { display: inline-flex; width: 18px; justify-content: center; flex: none; color: var(--muted); font-size: 14px; }
.txo-opt-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.txo-opt-meta { font-size: 12px; color: var(--muted); }
.txo-empty-note { margin: 0; padding: var(--space-3); font-size: 13px; color: var(--muted); }
.txo-fsel {
  display: flex; flex-direction: column; gap: var(--space-3); max-height: 380px; overflow-y: auto;
  padding: var(--space-3); border-radius: var(--radius-lg); background: var(--color-surface);
}
.txo-fsel[hidden] { display: none; }
.txo-fsel-group { display: flex; flex-direction: column; gap: var(--space-1); }
.txo-fsel-head { display: flex; align-items: baseline; justify-content: space-between; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.txo-fsel-item { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; }
.txo-fsel-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.txo-x {
  width: 22px; height: 22px; flex: none; display: inline-grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--color-text) 8%, transparent); color: var(--color-text);
}
.txo-x:hover { background: var(--color-accent-200); }
.txo-x:active { background: var(--color-accent-300); }
.txo-amount { display: flex; flex-direction: column; gap: var(--space-3); }
.txo-amount-vals { display: flex; align-items: center; gap: var(--space-2); }
.txo-amount-vals .txo-money { flex: 1; min-width: 0; }
.txo-and { font-size: 13px; color: var(--muted); }
.txo-and[hidden] { display: none; }

/* ══ modals (page: .txo-modal, drawer: .txd-modal) ════════════════════════ */
.txo-modal .dialog-body, .txd-modal .dialog-body { opacity: 1; display: flex; flex-direction: column; gap: var(--space-3); }
.txo-modal .dialog-body p, .txd-modal .dialog-body p { margin: 0; }
.txo-modal .input, .txd-modal .input,
.txo-modal .select, .txd-modal .select,
.txo-modal .txo-select .select:hover, .txd-modal .txd-select .select:hover { background: var(--color-bg); }
.txo-add { display: flex; flex-direction: column; gap: var(--space-3); }
.txo-add .seg { align-self: flex-start; }
.txo-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.txo-tagpick { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.txo-tagopt {
  display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-divider); border-radius: 999px; background: transparent; cursor: pointer; font-size: 13px;
}
.txo-tagopt:hover { background: var(--color-accent-100); }
.txo-tagopt:active { background: var(--color-accent-200); }
.txo-tagopt[aria-pressed='true'] { background: var(--color-accent-2-100); border-color: var(--color-accent-2-400); color: var(--color-accent-2-800); font-weight: 600; }
.txo-tagopt[aria-pressed='true']:hover { background: var(--color-accent-2-200); }
/* Rules modal (.txr-*): a design-system .table of rules, and the add/edit form in its place */
.txr-modal .dialog-body { gap: var(--space-3); }
.txr-intro { font-size: 14px; color: var(--muted); }
.txr-note { font-size: 14px; color: var(--muted); }
.txr-scroll { overflow-x: auto; margin-inline: calc(-1 * var(--space-2)); padding-inline: var(--space-2); }
.txr-table { width: 100%; font-size: 14px; }
.txr-table td { vertical-align: middle; }
.txr-num { text-align: right; white-space: nowrap; }
.txr-op { color: var(--muted); }
.txr-thens { display: flex; flex-direction: column; gap: calc(var(--space-1) / 2); }
.txr-then { display: inline-flex; align-items: center; gap: var(--space-1); }
.txr-actions { text-align: right; white-space: nowrap; }
.txr-actions .btn { margin-left: var(--space-1); }
.txr-del { color: var(--muted); }
.txr-del:hover { background: var(--color-accent-100); color: var(--color-accent-800); }
.txr-del:active { background: var(--color-accent-200); }
.txr-form { display: flex; flex-direction: column; gap: var(--space-3); }
.txr-match { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-3); }
.txr-form .select-wrap, .txr-form .select { width: 100%; }
.txr-form-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
@media (max-width: 560px) { .txr-match { grid-template-columns: minmax(0, 1fr); } }

/* bulk-edit drawer */
.txo-bulk-info {
  display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); font-size: 14px;
}
.txo-bulk-info > svg, .txo-bulk-info > .icon { margin-top: 2px; color: var(--color-accent-2-700); }
.txo-bulk-sub { font-size: 13px; color: var(--muted); }
.txo-bulk-fields { display: flex; flex-direction: column; gap: var(--space-3); }
.txo-bulk .drawer-foot { flex-wrap: wrap; }

/* ══ transaction detail drawer (js/tx-drawer.js) ══════════════════════════ */
.drawer.txd { width: min(500px, calc(100vw - 2 * var(--space-3))); }
.drawer.txd .drawer-head { align-items: center; padding-bottom: var(--space-3); }
.txd-top { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; }
.txd-flags { display: flex; align-items: center; gap: var(--space-2); }
.txd-pill {
  display: inline-flex; align-items: center; gap: var(--space-1); height: 34px; padding: 0 var(--space-3);
  border: 0; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 600;
  background: var(--color-neutral-200); color: var(--color-neutral-800);
}
.txd-pill:hover { background: var(--color-neutral-300); }
.txd-pill:active { background: var(--color-neutral-400); }
.txd-pill-ok { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.txd-pill-ok:hover { background: var(--color-accent-2-200); }
.txd-pill-ok:active { background: var(--color-accent-2-300); }
.txd-more-wrap { position: relative; margin-left: auto; }
.txd-menu {
  position: absolute; z-index: 3; right: 0; top: calc(100% + var(--space-1)); min-width: 240px;
  padding: var(--space-2); border-radius: var(--radius-lg); background: var(--color-bg); box-shadow: var(--shadow-lg);
  animation: fade-in 0.12s ease-out;
}
.txd-menu[hidden] { display: none; }
.txd-menu .menu-item { width: 100%; }
.txd-menu-danger { color: var(--color-accent-700); }

.txd-hero { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); margin-bottom: var(--space-4); }
.txd-hero-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); align-self: stretch; }
.txd-hero-amt { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; }
.drawer.txd .txd-amount { margin: 0; font-size: 32px; font-weight: 700; line-height: 1.1; }
.txd-acct { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-1); font-size: 13px; color: var(--muted); }
.txd-merchant { margin: var(--space-3) 0 0; font-size: 26px; overflow-wrap: anywhere; }
.txd-sub { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-size: 14px; color: var(--muted); }
.drawer.txd .txd-link { margin-top: var(--space-1); padding: 2px 0; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; color: var(--color-accent-700); text-decoration: none; }
.drawer.txd .txd-link:hover { text-decoration: underline; }
.drawer.txd .txd-link:active { color: var(--color-accent-800); }

.txd-notice {
  display: flex; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg); background: var(--color-neutral-200); color: var(--color-neutral-800); font-size: 13px;
}
.txd-notice p { margin: 0; }
.txd-notice > svg, .txd-notice > .icon { margin-top: 2px; }
.txd-recurring {
  display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg); background: var(--color-accent-2-100); color: var(--color-accent-2-800); text-decoration: none;
}
.txd-recurring:hover { background: var(--color-accent-2-200); }
.txd-recurring:active { background: var(--color-accent-2-300); }
.txd-rec-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.txd-rec-title { font-size: 14px; font-weight: 600; }
.txd-rec-sub { font-size: 12px; }

.txd-form { display: flex; flex-direction: column; gap: var(--space-4); }
.txd-form .input { width: 100%; }
.drawer.txd textarea.input { min-height: 84px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); resize: vertical; }
.txd-label-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: 5px; }
.txd-label-row label, .txd-label { display: block; font-size: 12px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.txd-label { margin-bottom: 5px; }
.txd-link-btn {
  display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2);
  border: 0; border-radius: 999px; background: none; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--color-accent-700);
}
.txd-link-btn:hover { background: var(--color-accent-100); }
.txd-link-btn:active { background: var(--color-accent-200); }
.txd-tags { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.txd-tags .txd-select { width: auto; flex: 1; min-width: 150px; }
.txd-tag {
  display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px var(--space-1) 3px var(--space-3);
  border-radius: 999px; background: var(--color-surface); font-size: 13px;
}
.txd-tag-x {
  width: 22px; height: 22px; display: inline-grid; place-items: center;
  border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--muted);
}
.txd-tag-x:hover { background: var(--color-accent-100); color: var(--color-accent-800); }
.txd-tag-x:active { background: var(--color-accent-200); }
.txd-statement {
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
  font-size: 13px; letter-spacing: 0.04em; color: color-mix(in srgb, var(--color-text) 75%, transparent); overflow-wrap: anywhere;
}
.txd-other { margin: var(--space-8) 0 var(--space-2); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.txd-delete { width: 100%; }
.txd-autosave { display: flex; align-items: flex-start; gap: var(--space-1); margin: var(--space-4) 0 0; font-size: 12px; color: var(--muted); }
.txd-autosave > svg, .txd-autosave > .icon { margin-top: 2px; color: var(--positive); }

/* previous / next buttons, floating on the scrim beside the drawer */
.txd-nav {
  position: fixed; z-index: 51; bottom: var(--space-6);
  right: calc(min(500px, 100vw - 2 * var(--space-3)) + var(--space-3) * 2);
  display: flex; flex-direction: column; gap: var(--space-2); animation: fade-in 0.2s ease-out;
}
.txd-nav-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--color-bg); color: var(--color-text); box-shadow: var(--shadow-md);
}
.txd-nav-btn:hover { background: var(--color-accent-100); }
.txd-nav-btn:active { background: var(--color-accent-200); }
.txd-nav-btn:disabled { opacity: 0.45; cursor: not-allowed; background: var(--color-bg); }

/* drawer modals: delete, edit merchant, split */
.txd-fine { font-size: 13px; color: var(--muted); }
.txd-modal-form { display: flex; flex-direction: column; gap: var(--space-3); }
.txd-merchant-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--color-bg); }
.txd-mc-name { font-size: 16px; font-weight: 700; }
.txd-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.txd-split-orig {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2); border-radius: 999px; background: var(--color-bg);
}
.txd-so-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.txd-split-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); }
.txd-splits { display: flex; flex-direction: column; gap: var(--space-2); }
.txd-split-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 9em auto; align-items: center; gap: var(--space-3); }
.txd-split-del:hover { background: var(--hover); }
.txd-split-del:active { background: var(--press); }
.txd-split-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.txd-left { display: flex; flex-direction: column; align-items: flex-end; }
.txd-left-val { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 700; }
.txd-left-val.is-ok { color: var(--positive); }
.txd-left-val.is-off { color: var(--negative); }
.txd-left-cap { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

@media (max-width: 720px) {
  .txd-nav { display: none; }
  .txo-date, .txo-filters, .txo-filters.has-sel { grid-template-columns: minmax(0, 1fr); }
  .txo-custom, .txo-fmain { padding-top: 0; }
}