/* Recurring page styles. Page markup is scoped under .page-recurring; overlays the
   page opens (drawer, modals, popovers) render into #overlay-root, so their classes
   carry the .recurring- prefix instead. Colors, spacing, radii and shadows all come
   from the Organic tokens and the app.css aliases. */

.page-recurring {
  --rec-more-w: 34px;
  --rec-whisper: color-mix(in srgb, var(--color-text) 8%, transparent);
}
.page-recurring .rec-content { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

/* ── header extras ───────────────────────────────────────────────────── */
.page-recurring .rec-filter-btn.is-active { background: var(--color-accent-100); border-color: var(--color-accent-300); }
.page-recurring .rec-filter-btn.is-active:hover { background: var(--color-accent-200); }
.page-recurring .rec-filter-btn.is-active:active { background: var(--color-accent-300); }
.page-recurring .rec-filter-count {
  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-family: var(--font-body); font-size: 11px; font-weight: 700;
}

/* ── review banner ───────────────────────────────────────────────────── */
.page-recurring .rec-banner {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  border-radius: 999px;
  background: var(--color-accent-100); color: var(--color-accent-800);
}
.page-recurring .rec-banner-icon {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-accent-200); color: var(--color-accent-700);
}
.page-recurring .rec-banner-avatars { display: inline-flex; flex: none; }
.page-recurring .rec-banner-avatars .avatar { box-shadow: 0 0 0 2px var(--color-accent-100); }
.page-recurring .rec-banner-avatars .avatar + .avatar { margin-left: calc(-1 * var(--space-2)); }
.page-recurring .rec-banner-text { flex: 1; min-width: 220px; margin: 0; font-size: 14px; line-height: 1.4; }
.page-recurring .rec-banner-text strong { font-weight: 700; margin-right: var(--space-1); }
.page-recurring .rec-banner-names { color: var(--color-accent-700); }
.page-recurring .rec-banner-btn {
  flex: none; background: var(--color-bg); color: var(--color-accent-800);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.page-recurring .rec-banner-btn:hover { background: var(--color-accent-200); }
.page-recurring .rec-banner-btn:active { background: var(--color-accent-300); }

/* ── month summary card ──────────────────────────────────────────────── */
.page-recurring .rec-summary { padding: var(--space-4) var(--space-6) var(--space-6); gap: var(--space-4); }
.page-recurring .rec-sum-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.page-recurring .rec-month { margin: 0; font-size: 25px; }
.page-recurring .rec-sum-controls { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.page-recurring .rec-view .seg-opt .icon { flex: none; }
.page-recurring .rec-view .seg-opt:not(:has(input:checked)):active { background: var(--press); }
.page-recurring .rec-view .seg-opt:has(input:checked):active { background: var(--color-accent-600); }

.page-recurring .rec-sum-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.page-recurring .rec-sum {
  display: flex; flex-direction: column; gap: var(--space-2); min-width: 0;
  padding: var(--space-4); border-radius: var(--radius-lg); background: var(--inset);
}
.page-recurring .rec-sum-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 26px; }
.page-recurring .rec-sum-label { display: inline-flex; align-items: center; gap: var(--space-1); font-weight: 600; font-size: 15px; }
.page-recurring .rec-sum-total { font-size: 12px; color: var(--muted); white-space: nowrap; }
.page-recurring .rec-sum .progress { margin-top: var(--space-1); }
.page-recurring .rec-sum-foot {
  display: flex; justify-content: space-between; gap: var(--space-1) var(--space-3); flex-wrap: wrap;
  font-size: 13px; color: var(--muted);
}
.page-recurring .rec-sum-foot strong { font-size: 15px; font-weight: 700; color: var(--color-text); }
.page-recurring .rec-sum-add { align-self: flex-start; color: var(--color-accent-700); padding-inline: var(--space-2); margin-left: calc(-1 * var(--space-2)); }

/* info "i" with a hover/focus tooltip */
.page-recurring .rec-info {
  position: relative; display: inline-grid; place-items: center;
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--muted); cursor: help;
}
.page-recurring .rec-info:hover { background: var(--hover); color: var(--color-text); }
.page-recurring .rec-info:active { background: var(--press); }
/* Hidden tooltips are display:none, not just invisible, so they take no room and never widen the
   page (at 375px three 250px tips pushed it to ~460px). aria-describedby still reads them. */
.page-recurring .rec-info-tip {
  display: none;
  position: absolute; top: calc(100% + var(--space-1)); left: calc(-1 * var(--space-2)); z-index: 4;
  width: 250px; max-width: calc(100vw - 2 * var(--space-4));
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
  background: var(--color-neutral-900); color: var(--color-neutral-100); box-shadow: var(--shadow-md);
  font-size: 12px; font-weight: 400; line-height: 1.45; text-align: left; white-space: normal;
  pointer-events: none;
}
/* the right-hand tile's tooltip opens leftward: a rightward one runs ~50px past the viewport at 1100px wide */
.page-recurring .rec-sum:last-child .rec-info-tip { left: auto; right: calc(-1 * var(--space-2)); }
.page-recurring .rec-info:hover .rec-info-tip,
.page-recurring .rec-info:focus-visible .rec-info-tip { display: block; animation: fade-in 0.12s ease-out; }

/* ── grouped list cards ──────────────────────────────────────────────── */
.page-recurring .rec-group { padding: var(--space-3) var(--space-4); gap: 0; }
.page-recurring .rec-grid-month {
  --rec-cols: minmax(0, 2.5fr) minmax(0, 1.6fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1.4fr) var(--rec-more-w);
}
.page-recurring .rec-grid-all {
  --rec-cols: minmax(0, 2.4fr) minmax(0, 1.2fr) minmax(0, 1.7fr) minmax(0, 1.9fr) minmax(0, 1.8fr) minmax(0, 1.3fr) var(--rec-more-w);
}
.page-recurring .rec-row {
  display: grid; grid-template-columns: var(--rec-cols); align-items: center; gap: var(--space-3);
  padding: var(--space-2); border-radius: var(--radius-md); font-size: 14px;
}
.page-recurring .rec-rows { display: flex; flex-direction: column; gap: calc(var(--space-1) / 2); }
.page-recurring .rec-rows[hidden] { display: none; }
.page-recurring .rec-rows .rec-row { cursor: pointer; }
.page-recurring .rec-rows .rec-row:hover { background: var(--hover); }
.page-recurring .rec-rows .rec-row:active { background: var(--press); }
/* ended streams (collapsed "Ended" group): quieter, with the last payment instead of a next date */
.page-recurring .rec-row.is-ended .rec-name,
.page-recurring .rec-row.is-ended .amt { color: var(--muted); }

.page-recurring .rec-head { padding-block: var(--space-1) var(--space-2); }
.page-recurring .rec-colhead { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-recurring .rec-colhead.c-amt { text-align: right; }
.page-recurring .rec-group-title { margin: 0; font-size: 18px; }
.page-recurring .rec-collapse {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-left: calc(-1 * var(--space-2)); padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
  border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.page-recurring .rec-collapse:hover { background: var(--hover); }
.page-recurring .rec-collapse:active { background: var(--press); }
.page-recurring .rec-chev { color: var(--muted); transition: transform 0.15s ease-out; }
.page-recurring .rec-collapse[aria-expanded='false'] .rec-chev { transform: rotate(-90deg); }
.page-recurring .rec-count {
  padding: 1px var(--space-2); border-radius: 999px;
  background: var(--color-bg); color: var(--color-neutral-800);
  font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: 0;
}

/* cells */
.page-recurring .rec-cell { min-width: 0; }
.page-recurring .c-merchant { display: flex; align-items: center; gap: var(--space-3); }
.page-recurring .rec-merchant-text { display: flex; flex-direction: column; min-width: 0; }
.page-recurring .rec-name-line { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.page-recurring .rec-name {
  min-width: 0; max-width: 100%; padding: 0; border: 0; border-radius: var(--radius-sm); background: none;
  font: inherit; font-weight: 600; color: inherit; text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.page-recurring .rec-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.page-recurring .rec-name:active { color: var(--color-accent-700); }
.page-recurring .rec-new { flex: none; padding: 1px var(--space-2); }
.page-recurring .rec-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-recurring .rec-sub.is-overdue { color: var(--negative); }

/* date + relative hint sit inline, "Nov 7 (Tomorrow)"; the hint wraps under the date when the column is narrow */
.page-recurring .c-date { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-1); }
.page-recurring .c-date > .num { white-space: nowrap; }
.page-recurring .c-date > .rec-sub { max-width: 100%; }
.page-recurring .rec-sub-freq { display: none; }
.page-recurring .c-freq { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-recurring .c-acct { display: flex; align-items: center; gap: var(--space-2); }
.page-recurring .c-acct .acct { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.page-recurring .rec-acct-icon {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-bg); color: var(--color-neutral-700);
}
.page-recurring .c-cat .cat { max-width: 100%; }
.page-recurring .c-amt { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); }
.page-recurring .rec-paid {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-accent-2-200); color: var(--color-accent-2-800);
}
.page-recurring .rec-approx { color: var(--muted); font-weight: 600; }
.page-recurring .c-menu { display: flex; justify-content: flex-end; }
.page-recurring .rec-more { width: var(--rec-more-w); height: var(--rec-more-w); color: var(--muted); }
.page-recurring .rec-more:hover { background: var(--hover); color: var(--color-text); }
.page-recurring .rec-more:active { background: var(--press); }

/* totals footer: a soft sage bar; the last stat lines up under the Amount column */
.page-recurring .rec-totals {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-3) calc(var(--space-4) + var(--space-2) + var(--space-3) + var(--rec-more-w)) var(--space-3) calc(var(--space-4) + var(--space-2));
  border-radius: var(--radius-lg);
  background: var(--color-accent-2-100);
}
.page-recurring .rec-totals-label { display: flex; flex-direction: column; }
.page-recurring .rec-totals-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; line-height: 1.2; }
.page-recurring .rec-totals-stats { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.page-recurring .rec-stat { display: flex; flex-direction: column; align-items: flex-end; }
.page-recurring .rec-stat-label { font-size: 12px; color: var(--muted); }
.page-recurring .rec-stat .amt { font-size: 15px; font-weight: 700; }

/* ── calendar ────────────────────────────────────────────────────────── */
.page-recurring .rec-cal { padding: var(--space-4) var(--space-4) var(--space-6); gap: var(--space-4); }
.page-recurring .rec-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: calc(var(--space-1) * 1.5); }
.page-recurring .rec-cal-wd { padding-bottom: var(--space-1); text-align: center; font-size: 12px; color: var(--muted); }
.page-recurring .rec-wd-short { display: none; }
.page-recurring .rec-cal-cell {
  display: flex; flex-direction: column; gap: calc(var(--space-1) * 0.75); min-width: 0; min-height: 108px;
  padding: calc(var(--space-1) * 1.5); border-radius: var(--radius-md); background: var(--inset);
}
.page-recurring .rec-cal-cell.is-blank { background: transparent; }
.page-recurring .rec-cal-cell.is-today { box-shadow: inset 0 0 0 1.5px var(--color-accent-300); }
.page-recurring .rec-cal-num {
  width: 24px; height: 24px; margin-bottom: calc(var(--space-1) / 2); border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600;
}
.page-recurring .rec-cal-cell.is-past .rec-cal-num { color: var(--muted); }
.page-recurring .rec-cal-cell.is-today .rec-cal-num { background: var(--color-accent-700); color: var(--color-bg); }

.page-recurring .rec-chip {
  display: flex; align-items: center; gap: var(--space-1); width: 100%; min-width: 0;
  padding: calc(var(--space-1) * 0.75) var(--space-2); border: 0; border-radius: 999px; cursor: pointer;
  font-size: 11.5px; line-height: 1.35; text-align: left;
}
.page-recurring .rec-chip-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-recurring .rec-chip-amt { flex: none; font-weight: 700; }
.page-recurring .rec-chip.is-due { background: var(--color-accent-200); color: var(--color-accent-800); }
.page-recurring .rec-chip.is-due:hover { background: var(--color-accent-300); }
.page-recurring .rec-chip.is-due:active { background: var(--color-accent-400); }
.page-recurring .rec-chip.is-due.is-income { background: var(--color-accent-2-200); color: var(--color-accent-2-800); }
.page-recurring .rec-chip.is-due.is-income:hover { background: var(--color-accent-2-300); }
.page-recurring .rec-chip.is-due.is-income:active { background: var(--color-accent-2-400); }
.page-recurring .rec-chip.is-due.is-card { background: var(--color-neutral-300); color: var(--color-neutral-900); }
.page-recurring .rec-chip.is-due.is-card:hover { background: var(--color-neutral-400); }
.page-recurring .rec-chip.is-due.is-card:active { background: var(--color-neutral-500); }
/* paid chips step back, but their text stays legible at chip size (neutral-700 is ~4.7:1 here; --muted is ~3.7:1) */
.page-recurring .rec-chip.is-paid { background: var(--hover); color: var(--color-neutral-700); }
.page-recurring .rec-chip.is-paid:hover { background: var(--press); color: var(--color-text); }
.page-recurring .rec-chip.is-paid:active { background: color-mix(in srgb, var(--color-text) 16%, transparent); }
.page-recurring .rec-chip-check { color: var(--color-accent-2-700); }
.page-recurring .rec-chip-more {
  align-self: flex-start; padding: calc(var(--space-1) / 2) var(--space-2); border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-size: 11.5px; font-weight: 600; color: var(--color-accent-700);
}
.page-recurring .rec-chip-more:hover { background: var(--color-accent-100); }
.page-recurring .rec-chip-more:active { background: var(--color-accent-200); }

.page-recurring .rec-cal-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 12px; color: var(--muted); }
.page-recurring .rec-key { display: inline-flex; align-items: center; gap: var(--space-1); }
.page-recurring .rec-key-swatch { width: 18px; height: 10px; border-radius: 999px; }
.page-recurring .rec-key-due { background: var(--color-accent-200); }
.page-recurring .rec-key-income { background: var(--color-accent-2-200); }
.page-recurring .rec-key-card { background: var(--color-neutral-300); }
.page-recurring .rec-key-paid { background: var(--press); }

/* ── empty state ─────────────────────────────────────────────────────── */
.page-recurring .rec-empty { padding: var(--space-4); }
.page-recurring .rec-empty .btn { margin-top: var(--space-3); }

/* ══ overlays (render outside the page, in #overlay-root) ═══════════════ */

/* review modal */
.recurring-review-intro { margin: 0 0 var(--space-4); }
.recurring-review-list { display: flex; flex-direction: column; gap: var(--space-2); }
.recurring-review-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border-radius: var(--radius-lg); background: var(--color-bg);
}
.recurring-review-row.is-done { background: var(--inset); }
.recurring-review-main { min-width: 0; }
.recurring-review-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recurring-review-meta { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--space-1) / 2) var(--space-3); font-size: 12px; color: var(--muted); }
.recurring-review-amt { font-size: 15px; }
.recurring-review-actions { display: flex; align-items: center; gap: var(--space-2); }
.recurring-review-undo { color: var(--color-accent-700); padding-inline: var(--space-2); }

/* manage modal */
.recurring-manage-intro { margin: 0 0 var(--space-4); }
.recurring-manage-count { display: inline-block; margin-left: var(--space-1); color: var(--muted); font-size: 13px; }
.recurring-manage-group + .recurring-manage-group { margin-top: var(--space-4); }
.recurring-manage-heading { margin: 0 0 var(--space-1); font-size: 16px; }
.recurring-manage-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
  margin-inline: calc(-1 * var(--space-2)); padding: var(--space-2);
  border-radius: var(--radius-md); cursor: pointer;
}
.recurring-manage-row:hover { background: var(--hover); }
.recurring-manage-row:active { background: var(--press); }
.recurring-manage-main { display: flex; flex-direction: column; min-width: 0; }
.recurring-manage-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recurring-manage-meta { font-size: 12px; color: var(--muted); }
.recurring-manage-row.is-off .avatar,
.recurring-manage-row.is-off .recurring-manage-main { opacity: 0.55; }

.recurring-switch { position: relative; display: inline-flex; flex: none; }
.recurring-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.recurring-switch-track {
  position: relative; width: 40px; height: 24px; border-radius: 999px;
  background: var(--color-neutral-400); transition: background 0.15s ease-out;
}
.recurring-switch-track::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-bg); box-shadow: var(--shadow-sm); transition: transform 0.15s ease-out;
}
.recurring-switch input:checked + .recurring-switch-track { background: var(--color-accent); }
.recurring-switch input:checked + .recurring-switch-track::after { transform: translateX(16px); }
.recurring-manage-row:hover .recurring-switch input:not(:checked) + .recurring-switch-track { background: var(--color-neutral-500); }
.recurring-manage-row:hover .recurring-switch input:checked + .recurring-switch-track { background: var(--color-accent-600); }
.recurring-manage-row:active .recurring-switch input:checked + .recurring-switch-track { background: var(--color-accent-700); }
.recurring-switch input:focus-visible + .recurring-switch-track { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* filters popover */
.recurring-filter { display: flex; flex-direction: column; gap: var(--space-4); }
.recurring-filter-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; line-height: 1.2; }
.recurring-filter-label { margin-bottom: var(--space-2); font-size: 12px; color: var(--muted); }
.recurring-filter .seg-opt:not(:has(input:checked)):active { background: var(--press); }
.recurring-filter .seg-opt:has(input:checked):active { background: var(--color-accent-600); }
.recurring-filter-list {
  display: flex; flex-direction: column; gap: calc(var(--space-1) / 2);
  max-height: 240px; overflow-y: auto; margin-inline: calc(-1 * var(--space-2));
}
.recurring-filter-opt {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-2); border-radius: 999px; font-size: 14px; cursor: pointer;
}
.recurring-filter-opt:hover { background: var(--color-accent-100); }
.recurring-filter-opt:active { background: var(--color-accent-200); }
.recurring-filter-opt input { width: 16px; height: 16px; margin: 0; accent-color: var(--color-accent); cursor: pointer; }
.recurring-filter-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recurring-filter-count { font-size: 12px; color: var(--muted); }
.recurring-filter-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

/* calendar day popover ("+2 more") */
.recurring-day-head { margin-bottom: var(--space-2); font-weight: 600; }
.recurring-day-list { display: flex; flex-direction: column; gap: calc(var(--space-1) / 2); margin-inline: calc(-1 * var(--space-2)); }
.recurring-day-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2);
  width: 100%; padding: var(--space-1) var(--space-2); border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-size: 14px; text-align: left;
}
.recurring-day-item:hover { background: var(--color-accent-100); }
.recurring-day-item:active { background: var(--color-accent-200); }
.recurring-day-main { display: flex; flex-direction: column; min-width: 0; }
.recurring-day-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recurring-day-status { font-size: 12px; color: var(--muted); }

/* stream detail drawer */
.recurring-drawer-title { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.recurring-drawer-sub { font-size: 13px; color: var(--muted); }
.recurring-drawer-amount { margin-bottom: var(--space-1); font-size: 34px; font-weight: 700; line-height: 1.1; }
.recurring-drawer-per { margin-left: var(--space-2); font-size: 15px; font-weight: 400; color: var(--muted); }
.recurring-drawer-meta { margin-bottom: var(--space-6); font-size: 14px; color: var(--muted); }
.recurring-drawer-section { margin-top: var(--space-6); }
.recurring-drawer-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); font-size: 12px; }
.recurring-drawer-h { margin: 0 0 var(--space-2); font-size: 17px; }
.recurring-drawer-section-head .recurring-drawer-h { margin: 0; }
.recurring-drawer-chart { min-height: 140px; }
.recurring-drawer-none { margin: 0; font-size: 13px; color: var(--muted); }
.recurring-hist { display: flex; flex-direction: column; gap: calc(var(--space-1) / 2); margin-inline: calc(-1 * var(--space-2)); }
.recurring-hist-row {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-md); background: none; cursor: pointer;
  font-size: 14px; text-align: left;
}
.recurring-hist-row:hover { background: var(--hover); }
.recurring-hist-row:active { background: var(--press); }
.recurring-hist-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.recurring-hist-acct { font-size: 12px; color: var(--muted); }
.recurring-hist-chev { color: var(--muted); }
.recurring-drawer-remove { color: var(--negative); }

/* ── responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1240px) {
  .page-recurring .c-acct .acct .text-muted { display: none; }
  /* All recurring: the Frequency column gets too narrow; fold it into the merchant sub-line */
  .page-recurring .rec-grid-all { --rec-cols: minmax(0, 2.4fr) minmax(0, 1.7fr) minmax(0, 1.9fr) minmax(0, 1.8fr) minmax(0, 1.3fr) var(--rec-more-w); }
  .page-recurring .rec-grid-all .c-freq { display: none; }
  .page-recurring .rec-sub-freq { display: inline; }
}
@media (max-width: 1180px) {
  .page-recurring .rec-wd-long { display: none; }
  .page-recurring .rec-wd-short { display: inline; }
  .page-recurring .rec-cal-cell { min-height: 96px; padding: var(--space-1); }
  /* cells drop to ~105px: put the amount on its own line so names keep more than a few letters */
  .page-recurring .rec-chip { flex-wrap: wrap; row-gap: 0; padding-inline: var(--space-1); border-radius: var(--radius-md); }
  .page-recurring .rec-chip-name { flex: 1 1 0; }
  .page-recurring .rec-chip-amt { flex: 1 0 100%; font-weight: 600; }
  .page-recurring .rec-summary { padding-inline: var(--space-4); }
  .page-recurring .rec-totals-stats { gap: var(--space-6); }
}
@media (max-width: 980px) {
  .page-recurring .rec-sum-grid { grid-template-columns: minmax(0, 1fr); }
  .page-recurring .rec-grid-month { --rec-cols: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1.2fr) var(--rec-more-w); }
  .page-recurring .rec-grid-all { --rec-cols: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1.2fr) var(--rec-more-w); }
  .page-recurring .rec-grid-month .c-acct,
  .page-recurring .rec-grid-month .c-cat,
  .page-recurring .rec-grid-all .c-freq,
  .page-recurring .rec-grid-all .c-acct,
  .page-recurring .rec-grid-all .c-cat { display: none; }
  .page-recurring .rec-chip-amt { display: none; }
  /* one tile per row: an open tooltip hangs from the tile's header, inside the tile, so it stays on screen */
  .page-recurring .rec-sum-head { position: relative; }
  .page-recurring .rec-info { position: static; }
  .page-recurring .rec-info-tip,
  .page-recurring .rec-sum:last-child .rec-info-tip { left: 0; right: auto; width: min(250px, 100%); }
}