/* ─────────────────────────────────────────────────────────────
   Palette, edit these to reskin the whole page.
   ───────────────────────────────────────────────────────────── */
:root {
  --bg:             #F5F3EE;
  --surface:        #FBFAF7;
  --surface-raised: #EEE9E0;

  --border:        #DED8CE;
  --border-strong: #C7BFB2;

  --text:       #34322F;
  --text-muted: #726D65;
  --text-faint: #9B948A;

  /* Brand / interaction, Slate Ink */
  --accent:        #5C7686;
  --accent-soft:   #EDF3F5;
  --accent-strong: #486170;

  /* Semantic, Moss (positive), Antique Brass (pending/review), Terracotta (risk) */
  --positive:      #6F8A73;
  --positive-soft: #EDF3EE;

  --pending:      #B39258;
  --pending-soft: #F7F2E7;

  --risk:      #A96A60;
  --risk-soft: #F8EEEB;

  --confirmed: #7F9087;

  /* Data visualization */
  --data-neutral: #A7AAA5;
  --data-focus:   #5C7686;

  /* Category-identification colors (rule 11 amendment), light-mode static
     defaults; applyCategoryColors() overrides these for dark mode. Kept
     theme-independent on purpose, see the comment in app.js. */
  --cat-groceries: #B37B84;
  --cat-dining: #BC7A63;
  --cat-gas: #C08552;
  --cat-transport: #6E8CA0;
  --cat-subscriptions: #8C7BA6;
  --cat-health: #6FA090;
  --cat-shopping: #B08A5C;
  --cat-credit-card: #6B7A99;
  --cat-uncategorized: #8C8C86;

  /* Shared categorical chart palette, deliberately vivid (not the muted
     --cat-* set above). applyChartSeriesColors() supplies dark-mode values. */
  --viz-series-0: #2a78d6;
  --viz-series-1: #1baf7a;
  --viz-series-2: #eda100;
  --viz-series-3: #008300;
  --viz-series-4: #4a3aa7;
  --viz-series-5: #e34948;
  --viz-series-6: #e87ba4;
  --viz-series-7: #eb6834;

  --radius:    8px;
  --radius-sm: 6px;

  color-scheme: light;
}

/* Final 2026-07-09 pass: recurring/transaction grouping and compact credit
   account cards. Kept at EOF so older table/mobile rules above cannot leak
   priority fields or tall stacked metrics back into the UI. */
.viz-summary {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.bank-explorer-list {
  gap: 10px;
  border-top: 0;
}

.bank-explorer-month-group {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.bank-explorer-month-divider {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: var(--surface-raised);
  color: var(--text-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
}

.bank-explorer-month-rows {
  display: flex;
  flex-direction: column;
}

.bank-explorer-row-card {
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.bank-explorer-row-card--selected {
  background: var(--surface-raised);
  box-shadow: inset 3px 0 0 var(--accent);
}

.bank-explorer-row-card .bank-explorer-row {
  border-top: 0;
  min-height: 52px;
  padding: 10px 12px;
  cursor: pointer;
  background: transparent;
}

.bank-explorer-row-actions-panel {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 12px 12px 52px;
}

.bank-explorer-row-hint {
  color: var(--accent);
  font-size: 11px;
}

.finance-credit-head,
.finance-credit-row {
  grid-template-columns: minmax(150px, 1.4fr) 86px 66px 58px 78px 86px 82px 86px 82px 86px;
}

.finance-credit-summary {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 8px 12px;
}

.finance-credit-row {
  padding: 9px 0;
}

.finance-credit-priority,
.finance-payment-priority,
.finance-credit-input--priority {
  display: none !important;
}

@media (max-width: 760px) {
  .bank-explorer-list {
    gap: 8px;
    border: 0;
    background: transparent;
  }

  .bank-explorer-row-card .bank-explorer-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-areas:
      "icon desc amount"
      "icon date amount";
    gap: 5px 10px;
    min-height: 58px;
    padding: 10px 12px;
  }

  .bank-explorer-row-card .bank-explorer-row::before {
    display: none;
    content: none;
  }

  .bank-explorer-row-card .bank-explorer-date { grid-area: date; }
  .bank-explorer-row-card .bank-explorer-desc { grid-area: desc; }
  .bank-explorer-row-card .bank-explorer-amount { grid-area: amount; }

  .bank-explorer-row-actions-panel {
    padding: 0 12px 12px 56px;
  }

  .finance-credit-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 0;
    background: transparent;
    overflow: visible;
  }

  .finance-credit-head {
    display: none;
  }

  .finance-credit-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 12px;
    min-height: 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
  }

  .finance-credit-row--selected {
    background: var(--surface-raised);
  }

  .finance-credit-row > span {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
  }

  .finance-credit-row > span::before {
    content: attr(data-label);
    color: var(--text-faint);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.45px;
    text-transform: uppercase;
  }

  .finance-credit-row > span:nth-child(1) {
    flex: 1 1 min(100%, 190px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .finance-credit-row > span:nth-child(1)::before {
    display: none;
  }

  .finance-credit-row > span:nth-child(2) {
    flex: 0 0 auto;
    margin-left: auto;
    flex-direction: column;
    align-items: flex-end;
  }

  .finance-credit-row > span:nth-child(3) {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
  }

  .finance-credit-row > span:nth-child(n + 4):nth-child(-n + 10) {
    flex: 0 1 auto;
    font-size: 11.5px;
  }

  .finance-credit-card-hint {
    flex: 1 0 100%;
    padding: 0;
  }

  .finance-credit-card-hint::before {
    display: none;
  }
}

/* Clarity is light by default, deliberately, regardless of OS/browser dark
   preference, the project owner asked for this explicitly after finding
   the app rendering dark against their wishes. There is no automatic
   `@media (prefers-color-scheme: dark)` override; manual dark mode is an
   explicit, user-chosen Settings option, never something that silently kicks
   in because of an OS setting outside the app. */

/* ─────────────────────────────────────────────────────────────
   Reset & page shell
   ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  font-size: 15px;
  font-weight: 450;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Guarantee [hidden] always wins, even against later display:flex/grid rules
   on the same element (e.g. #login-view, #finance-body toggled from JS). */
[hidden] { display: none !important; }

.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 20px 80px;
}
/* .page is a static wrapper in index.html around everything the app
   renders, both the authenticated dashboard and the public marketing page
   share it. The 1120px cap is right for the dashboard's financial data, but
   it was also silently capping the marketing page underneath it, making
   .public-hero-grid's own (much wider) max-width pointless since its
   ancestor was already clamped tighter. */
.page:has(.public-page) {
  max-width: none;
  padding-inline: 0;
}

.page-header {
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.page-header h1 { font-size: 20px; font-weight: 650; color: var(--text); }
.header-settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.header-settings-btn:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--surface-raised);
}
.header-settings-btn svg,
.icon-btn svg {
  display: block;
}
.page-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.beta-badge {
  display: inline-flex;
  align-items: center;
  min-height: 17px;
  padding: 1px 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 72%, transparent);
  color: var(--accent-strong);
  font-size: 8.5px;
  font-weight: 750;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand-home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
}
/* A subtle always-on glow (not a border/background, which read as "clunky"
   in testing) so the logo reads as tappable even without hover, which
   touch devices never see anyway. */
.brand-home .clarity-logo {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent-strong) 32%, transparent));
  transition: filter 0.15s ease;
}
.brand-home:hover .clarity-logo,
.brand-home:active .clarity-logo {
  background-color: var(--accent);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent-strong) 55%, transparent));
}
.clarity-logo {
  display: block;
  width: 104px;
  height: 44px;
  flex-shrink: 0;
  background-color: var(--text);
  -webkit-mask-image: url('logo-cat-glasses.png');
  mask-image: url('logo-cat-glasses.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: background-color 0.15s;
}
.header-toggle-all {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.header-toggle-all::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
}
.header-toggle-all:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--surface-raised);
}

#account-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.account-menu {
  position: relative;
}
.icon-btn, .account-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.icon-btn:hover, .account-menu-trigger:hover { color: var(--text); border-color: var(--accent); }
.account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: var(--text);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.2px;
  line-height: 1;
}
.account-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 168px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}
.account-menu-email {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-bottom: 4px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--border);
}
.account-menu-panel .btn { width: 100%; justify-content: flex-start; }
.account-page-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.account-page-row,
.trusted-device-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--border);
}
.account-page-row:first-child,
.trusted-device-row:first-child { border-top: none; padding-top: 0; }
.account-page-row--quiet {
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.account-page-value {
  margin-top: 3px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  word-break: break-word;
}
.account-page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: none;
}
.account-page-muted {
  color: var(--text-faint);
  font-weight: 500;
}

#persist-status {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 7px 11px;
  border: 1px solid color-mix(in srgb, var(--risk) 35%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--risk) 10%, transparent);
  color: var(--risk);
  font-size: 12.5px;
}
#persist-status[hidden] { display: none; }
.persist-status-message { min-width: 0; }
.persist-status-recover-btn {
  border: 0;
  padding: 3px 5px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.persist-status-dismiss-btn {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.persist-status-dismiss-btn:hover,
.persist-status-dismiss-btn:focus-visible {
  background: color-mix(in srgb, var(--risk) 13%, transparent);
  outline: none;
}
@media (max-width: 520px) {
  #persist-status { grid-template-columns: minmax(0, 1fr) auto; }
  .persist-status-dismiss-btn { grid-column: 2; grid-row: 1; }
  .persist-status-recover-btn { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
}

.app-loading {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
}
.app-loading-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text);
}
.app-loading-logo {
  width: 92px;
  height: 42px;
  background-color: var(--text);
  -webkit-mask-image: url('logo-cat-glasses.png');
  mask-image: url('logo-cat-glasses.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  animation: clarity-loading-pulse 1.2s ease-in-out infinite;
}
.app-loading-title {
  font-size: 18px;
  font-weight: 750;
  line-height: 1.1;
}
.app-loading-copy {
  font-size: 12px;
  color: var(--text-muted);
}
@keyframes clarity-loading-pulse {
  0%, 100% { opacity: 0.58; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-1px); }
}

/* ── Welcome / public page (first-impression, pre-login) ─────────────
   Structural rebuild per direct design brief: a real public header, a
   hero with one confident idea and actual product visual (not feature
   pills or a stock photo), short focused sections each with one claim
   and one visual, a compact comparison section instead of a dialog, and
   explicit dimension tokens (not ad hoc spacing) so desktop and mobile
   both read as deliberate, not a compressed/stretched version of the
   other. Still built from the existing token palette, no new colors. */
#welcome-view { background: var(--bg); }
.public-page { width: 100%; }
.public-container {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 22px;
}
.public-final-cta > .public-container,
.public-privacy > .public-container,
.public-subpage-heading,
.public-pricing-grid,
.public-policy-layout {
  width: calc(100% - 28px);
  border: 1px solid color-mix(in srgb, var(--border-strong) 72%, transparent);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(20, 26, 30, 0.08);
  padding: 28px 22px;
}
@media (min-width: 1040px) {
  .public-container { padding-inline: 32px; }
  .public-final-cta > .public-container,
  .public-privacy > .public-container,
  .public-subpage-heading,
  .public-pricing-grid,
  .public-policy-layout { width: calc(100% - 64px); border-radius: 30px; padding: 48px; }
}
.public-h2 {
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 750;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 12px;
  text-wrap: balance;
}
.public-body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 52ch;
  margin: 0;
}
@media (min-width: 700px) {
  .public-body { font-size: 18px; }
}
.public-secondary-link {
  border: none;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
  padding: 4px 2px;
  text-align: left;
}
.public-secondary-link:hover { color: var(--text); }
.public-comparison-cta { display: flex; justify-content: center; margin-top: 20px; }
.public-secondary-link--pill {
  padding: 10px 18px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  text-align: center;
}
.public-secondary-link--pill:hover { border-color: var(--accent-strong); background: var(--accent-strong); color: #fff; }

.public-header { position: sticky; top: 0; z-index: 120; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(14px); }
.public-header-inner {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 22px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 900px) { .public-header-inner { padding-inline: 32px; } }
.public-brand { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--text); }
.public-brand-button { border: 0; background: none; font: inherit; cursor: pointer; padding: 8px 0; }
.public-header .welcome-logo { width: 64px; height: 28px; }
.public-header-link { border: none; background: none; font: inherit; font-size: 15px; color: var(--text-muted); cursor: pointer; }
.public-header-link:hover { color: var(--text); }
.public-desktop-nav,
.public-header-actions { display: none; }
.public-menu-toggle { width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 12px; background: none; color: var(--text); cursor: pointer; }
.public-menu-toggle:hover { background: var(--surface-raised); }
.public-menu-toggle span { display: grid; place-items: center; }

@media (min-width: 900px) {
  .public-header-inner {
    max-width: 1440px;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    gap: 28px;
  }
  .public-desktop-nav {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 1.7vw, 28px);
  }
  .public-desktop-nav button,
  .public-header-login {
    padding: 9px 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 13.5px;
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
  }
  .public-desktop-nav button:hover,
  .public-header-login:hover { color: var(--text); }
  .public-header-actions { display: flex; align-items: center; gap: 16px; }
  .public-header-cta {
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid var(--accent);
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-size: 13.5px;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
  }
  .public-header-cta:hover { border-color: var(--accent-strong); background: var(--accent-strong); }
  .public-menu-toggle,
  .public-menu-scrim { display: none !important; }
}

body.public-menu-is-open { overflow: hidden; }
@media (min-width: 1040px) { body.public-menu-is-open { overflow: auto; } }
.public-menu-scrim { position: fixed; inset: 69px 0 0; z-index: 110; background: rgba(20, 26, 30, 0.38); }
.public-menu-scrim[hidden] { display: none; }
.public-menu-panel { width: min(100%, 460px); height: 100%; margin-left: auto; display: flex; flex-direction: column; background: var(--bg); border-left: 1px solid var(--border); box-shadow: -18px 0 48px rgba(0, 0, 0, 0.12); }
.public-menu-scroll { flex: 1 1 auto; overflow-y: auto; padding: 26px 22px 18px; }
.public-menu-kicker { margin: 0 0 10px; color: var(--text-faint); font-size: 11px; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase; }
.public-menu-cards { display: flex; flex-direction: column; gap: 10px; }
.public-menu-card { min-height: 92px; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 16px; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.public-menu-card > span { display: flex; flex-direction: column; gap: 5px; }
.public-menu-card strong { font-size: 20px; line-height: 1.15; }
.public-menu-card small { color: var(--text-muted); font-size: 13px; line-height: 1.35; }
.public-menu-card--forecast { background: var(--accent-soft); }
.public-menu-card--plan { background: color-mix(in srgb, var(--positive) 11%, var(--surface)); }
.public-menu-card--reconcile { background: color-mix(in srgb, var(--pending) 14%, var(--surface)); }
.public-menu-card--insights { background: color-mix(in srgb, var(--data-neutral) 16%, var(--surface)); }
.public-menu-card--credit { background: color-mix(in srgb, var(--risk) 12%, var(--surface)); }
.public-menu-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.public-menu-links { display: flex; flex-direction: column; gap: 2px; padding-block: 20px 14px; }
.public-menu-link { width: 100%; padding: 9px 2px; border: 0; background: none; color: var(--text); font: inherit; font-size: 19px; font-weight: 700; text-align: left; cursor: pointer; }
.public-menu-link:hover { color: var(--accent-strong); }
.public-menu-downloads { display: flex; flex-direction: column; gap: 9px; padding-block: 14px; border-top: 1px solid var(--border); }
.public-menu-downloads > span { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--text-muted); font-size: 14px; }
.public-menu-downloads button { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.public-menu-downloads button:hover { color: var(--accent-strong); }
.public-menu-downloads small, .public-footer-links small { color: var(--text-faint); font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.public-language-control { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; color: var(--text-faint); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.public-language-control select { min-height: 46px; width: 100%; padding: 0 38px 0 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; letter-spacing: normal; text-transform: none; }
.public-menu-actions { flex: 0 0 auto; display: grid; gap: 10px; padding: 14px 22px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--bg); }
.public-menu-actions .welcome-cta-primary { width: 100%; background: var(--accent); color: #fff; }
.public-menu-login { min-height: 50px; border: 1px solid var(--accent); border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font: inherit; font-size: 16px; font-weight: 750; cursor: pointer; }
@media (max-width: 520px) {
  .public-menu-scrim { background: var(--bg); }
  .public-menu-panel { width: 100%; border-left: 0; box-shadow: none; }
  .public-menu-scroll { padding-top: 22px; }
}

.welcome-logo {
  width: 26px; height: 11px;
  background-color: var(--text);
  -webkit-mask-image: url('logo-cat-glasses.png');
  mask-image: url('logo-cat-glasses.png');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.welcome-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.welcome-cta-primary {
  padding: 15px 26px;
  min-height: 52px;
  border: none;
  border-radius: 999px;
  background: var(--text);
  color: var(--surface);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.welcome-cta-primary:hover { filter: brightness(1.2); }
.welcome-pill-mark { color: var(--positive); font-weight: 800; margin-right: 6px; }

/* Hero: text first on mobile (one confident idea, two actions), the
   product visual follows immediately after so the next section is
   already peeking, not a full-viewport block with empty space above
   and below it. Side-by-side on desktop. */
.public-hero { padding: 40px 0 0; }
.public-hero-grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
@media (min-width: 900px) {
  .public-hero-grid { flex-direction: row; align-items: center; gap: 48px; padding-block: 32px; }
  /* The 54% split was tuned for a three-line headline; now that the
     headline is back down to one short line, giving that much of the row
     to the text column left the product-preview mockup visibly cramped. */
  .public-hero-text { flex: 0 0 40%; }
  .public-hero-visual { flex: 1 1 auto; }
}
.public-hero-text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.public-headline {
  font-size: clamp(40px, 9vw, 44px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--text);
  max-width: 12ch;
  margin: 4px 0 0;
  text-wrap: balance;
}
@media (min-width: 900px) {
  .public-headline { font-size: clamp(52px, 5.4vw, 76px); }
}
.public-headline--long {
  max-width: 40ch;
  font-size: clamp(30px, 4.4vw, 48px);
}
.public-hero-ctas { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 6px; }

.public-manual-explainer { padding: 36px 0 12px; }
.public-manual-explainer .public-h2 { text-align: center; margin-inline: auto; max-width: 26ch; }
.public-manual-grid { display: grid; gap: 12px; margin-top: 22px; }
.public-manual-card { padding: 18px 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-raised); }
.public-manual-card h3 { margin: 0 0 6px; color: var(--text); font-size: 15.5px; font-weight: 700; }
.public-manual-card p { margin: 0; color: var(--text-muted); font-size: 14.5px; line-height: 1.55; }
.public-manual-note { margin: 22px 0 10px; padding: 14px 18px; border: 1px solid var(--accent); border-radius: 14px; background: var(--accent-soft); color: var(--text); font-size: 15px; font-weight: 650; text-align: center; }
.public-manual-explainer > .public-container > .public-secondary-link { display: block; margin: 0 auto; text-align: center; }
@media (min-width: 760px) {
  .public-manual-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

/* A literal numbered walkthrough, not a claims list - each step gets a
   filled accent-colored index badge instead of a bare list marker, so a
   long run of steps still reads as a clear sequence rather than a wall of
   paragraphs. */
.public-security-steps { list-style: none; margin: 26px 0 0; padding: 0; counter-reset: security-step; display: flex; flex-direction: column; gap: 22px; }
.public-security-steps li { counter-increment: security-step; position: relative; padding-left: 46px; }
.public-security-steps li::before {
  content: counter(security-step);
  position: absolute;
  left: 0; top: 1px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 750;
  display: flex; align-items: center; justify-content: center;
}
.public-security-steps h3 { margin: 0 0 5px; color: var(--text); font-size: 16.5px; font-weight: 700; line-height: 1.35; }
.public-security-steps p { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.65; max-width: 62ch; }
.public-security-grid { margin-top: 30px; }
@media (min-width: 1040px) {
  .public-manual-explainer { padding: 48px 0 16px; }
}

.public-credibility { position: relative; border-block: 1px solid var(--border); background: var(--surface-raised); }
.public-credibility-slot { display: none; }
.public-credibility::before {
  content: "";
  position: absolute;
  inset: -1px 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent 3%, color-mix(in srgb, var(--accent) 68%, transparent), color-mix(in srgb, var(--positive) 58%, transparent), color-mix(in srgb, var(--pending) 54%, transparent), rgba(143, 130, 168, 0.46), transparent 97%);
  pointer-events: none;
}
.public-credibility-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
  padding-block: 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
}
.public-credibility-row > span { white-space: nowrap; }
@media (min-width: 1040px) {
  .public-credibility-slot { display: block; }
  .public-header-inner {
    height: 76px;
    padding-inline: clamp(32px, 4vw, 64px);
    gap: clamp(40px, 5vw, 84px);
  }
  .public-desktop-nav { gap: clamp(28px, 3vw, 52px); }
  .public-header-actions { gap: 22px; }
  .public-hero { padding-top: 56px; }
  /* The credibility bar below the hero already goes uncapped edge-to-edge
     (max-width: none) on wide screens - the hero itself was still boxed in
     at 1320px, reading as noticeably narrower than everything around it on
     a large monitor. */
  /* At very wide viewports the text column (a straight 40% of the grid,
     see the 900px tier above) kept growing without bound while the visual
     column stretched to fill all remaining space (flex: 1 1 auto) - the
     card just centered within that oversized column instead of the pair
     centering as a unit, so extra width piled up on the outer right edge
     only, reading as everything shifted left. Both columns get a real max
     width here and the row centers them as a block instead. */
  .public-hero-grid { max-width: 1760px; gap: clamp(64px, 6vw, 96px); padding-block: 48px 68px; justify-content: center; }
  .public-hero-text { gap: 18px; flex: 0 1 620px; }
  .public-hero-visual { max-width: 680px; }
  .public-hero-ctas { gap: 22px; margin-top: 10px; }
  .public-credibility-row {
    max-width: none;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, max-content);
    justify-content: space-between;
    gap: clamp(10px, 1.4vw, 28px);
    padding-block: 18px;
    font-size: clamp(10px, 0.82vw, 13.5px);
  }
  .public-credibility-row > span { display: inline-flex; align-items: center; justify-content: center; text-align: center; }
  .public-section { padding-block: 104px; }
  .public-feature-grid { gap: clamp(64px, 7vw, 104px); }
  .public-feature-text { gap: 14px; }
  .public-feature-visual { padding: 34px; }
}
@media (min-width: 1040px) and (hover: hover) and (pointer: fine) {
  .public-credibility--pinned {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 105;
    box-shadow: 0 -12px 30px rgba(20, 26, 30, 0.06);
  }
}

@media (min-width: 1040px) and (hover: hover) and (pointer: fine) {
  .public-header button:active,
  .public-hero button:active { transform: translateY(1px) scale(0.985); }
}

.public-section { padding-block: 56px; }
@media (min-width: 900px) { .public-section { padding-block: 80px; } }
.public-section--alt {
  background: transparent;
}
.public-feature-grid { display: flex; flex-direction: column; gap: 24px; }
.public-feature-text { display: flex; flex-direction: column; gap: 10px; max-width: 46ch; }
.public-feature-visual {
  min-height: 160px;
  border-radius: 20px;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
@media (min-width: 900px) {
  .public-feature-grid { flex-direction: row; align-items: center; gap: 48px; }
  .public-feature-text { flex: 0 0 40%; }
  .public-feature-visual { flex: 1 1 auto; min-height: 220px; padding: 26px; }
  .public-feature-grid--reverse { flex-direction: row-reverse; }
}

/* Small proof-of-concept cards inside each feature visual, real UI
   colors/patterns (see .pub-preview-row/.home-tx-row), not generic
   illustrations. */
.pfv-card {
  width: 100%;
  max-width: 320px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
}
.pfv-stat { display: flex; flex-direction: column; gap: 2px; }
.pfv-stat .k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); }
.pfv-stat .v { font-size: 22px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.pfv-stat .d { font-size: 12px; color: var(--text-muted); }
.pfv-chart { width: 100%; height: 56px; }
.pfv-chart-dot { fill: var(--risk); }
.pfv-card--forecast { max-width: 440px; gap: 10px; }
.pfv-forecast-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pfv-forecast-title { color: var(--text); font-size: 14px; font-weight: 720; }
.pfv-forecast-link { color: var(--text-faint); font-size: 11px; font-weight: 650; white-space: nowrap; }
.pfv-chart-frame {
  padding: 12px 12px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 96%, var(--accent-soft));
}
.pfv-card--forecast .pfv-chart { display: block; height: 92px; }
.pfv-chart-baseline { stroke: var(--risk); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.48; }
.pfv-card--forecast .pub-preview-chart-line { stroke: var(--accent); stroke-width: 2.4; }
.pfv-card--forecast .pfv-chart-dot { fill: var(--accent); }
.pfv-chart-caption { margin: 3px 0 0; color: var(--text-faint); font-size: 10.5px; line-height: 1.35; }
.pfv-row { display: flex; justify-content: space-between; font-size: 13.5px; padding: 8px 0; border-top: 1px solid var(--border); }
.pfv-row:first-child { border-top: none; padding-top: 0; }
.pfv-row .pos { color: var(--positive); font-weight: 650; }
.pfv-row .neg { color: var(--risk); font-weight: 650; }
.pfv-row--add { padding-left: 14px; color: var(--accent-strong); font-weight: 600; border-style: dashed; }
.pfv-card--match {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-color: var(--accent);
  background: var(--accent-soft);
}
.pfv-match-label { font-size: 13.5px; color: var(--accent-strong); }
.pfv-match-label strong { color: var(--text); }
.pfv-match-amount { font-size: 15px; font-weight: 700; color: var(--text); flex-shrink: 0; font-variant-numeric: tabular-nums; }

.pfv-card--insights { max-width: 480px; gap: 10px; }
.pfv-mini-charts { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 6px; }
.pfv-mini-chart { flex: 1 1 0; width: 100%; max-width: 128px; height: auto; }
.pfv-card--credit { max-width: 380px; gap: 6px; border-color: var(--risk); }
.pfv-card--credit .pfv-row { padding: 4px 0; font-size: 12.5px; }
.pfv-card--credit .pfv-row b { color: var(--text); font-weight: 700; }
.pfv-card--credit .debt-payoff-mini-chart { height: 28px; margin-top: 2px; }

.public-privacy { text-align: center; }
.public-privacy .public-body { max-width: 62ch; margin-inline: auto; }

.public-compare-list { display: flex; flex-direction: column; margin-top: 18px; }
.public-compare-header,
.public-compare-row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(88px, 0.8fr) minmax(104px, 1fr);
  column-gap: 14px;
  align-items: start;
}
.public-compare-header {
  padding: 0 0 9px;
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.public-compare-row {
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.public-compare-feature { font-size: 15px; font-weight: 650; color: var(--text); }
.public-compare-value { color: var(--text-muted); font-size: 14px; font-weight: 600; line-height: 1.4; }
.public-compare-value.v--positive { color: var(--positive); font-weight: 700; }
@media (max-width: 520px) {
  .public-compare-header,
  .public-compare-row { grid-template-columns: minmax(0, 1.25fr) minmax(68px, 0.72fr) minmax(78px, 0.9fr); column-gap: 8px; }
  .public-compare-header { font-size: 8.5px; }
  .public-compare-feature, .public-compare-value { font-size: 12px; }
}

.public-platform-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
}
@media (min-width: 700px) {
  .public-platform-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.public-platform-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
}
.public-platform-icon { color: var(--text-faint); }
.public-platform-card strong { font-size: 14px; color: var(--text); }
.public-platform-card span:last-child { font-size: 12.5px; color: var(--text-faint); }
.public-platform-card--live { border-color: var(--positive); }
.public-platform-card--live .public-platform-icon { color: var(--positive); }
.public-platform-card--live span:last-child { color: var(--positive); font-weight: 650; }

.public-final-cta { padding-block: 64px; text-align: center; border-top: 1px solid var(--border); }
.public-final-cta .public-h2 { margin-inline: auto; max-width: 20ch; }
.public-final-cta .welcome-cta-primary { margin-top: 18px; }

.public-footer { padding-block: 42px calc(30px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); font-size: 13px; color: var(--text-faint); }
.public-footer-grid { display: grid; gap: 30px; }
.public-footer-brand { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px; color: var(--text); }
.public-footer-brand p { grid-column: 1 / -1; margin: 3px 0 0; color: var(--text-muted); font-size: 14px; }
.public-footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }
.public-footer-links > div { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.public-footer-links strong { margin-bottom: 2px; color: var(--text-faint); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; }
.public-footer-links button { padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
.public-footer-links span { color: var(--text-muted); font-size: 14px; }
.public-language-control--footer { max-width: 260px; margin: 0; }
.public-footer-note { margin: 0; padding-top: 18px; border-top: 1px solid var(--border); line-height: 1.5; }
@media (min-width: 760px) {
  .public-footer-grid { grid-template-columns: minmax(180px, 0.8fr) minmax(420px, 1.7fr); align-items: start; }
  .public-footer-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .public-language-control--footer { grid-column: 1; }
  .public-footer-note { grid-column: 1 / -1; }
}

.public-subpage { min-height: 72vh; padding-block: 54px 80px; }
.public-subpage-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 38px; }
.public-subpage-heading .public-headline { max-width: 14ch; }
.public-pricing-grid { display: grid; gap: 18px; }
.public-price-card { display: flex; flex-direction: column; align-items: flex-start; padding: 26px 22px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); }
.public-price-card--accent { border-color: var(--accent); background: var(--accent-soft); }
.public-price-name { margin: 0 0 18px; color: var(--text); font-size: 17px; font-weight: 750; }
.public-price { display: flex; align-items: baseline; gap: 7px; margin: 0; color: var(--text); }
.public-price strong { font-size: 42px; line-height: 1; letter-spacing: -0.03em; }
.public-price span, .public-price-alt { color: var(--text-muted); font-size: 14px; }
.public-price-alt { margin: 7px 0 0; }
.public-price-card > p:not(.public-price-name, .public-price, .public-price-alt) { color: var(--text-muted); line-height: 1.55; }
.public-price-card ul { flex: 1 1 auto; margin: 8px 0 24px; padding-left: 20px; color: var(--text); line-height: 1.8; }
.public-price-card .welcome-cta-primary { width: 100%; }
.public-pricing-note { margin-top: 20px; padding: 20px 22px; border-radius: 16px; background: var(--surface-raised); color: var(--text); }
.public-pricing-note p { margin: 7px 0 0; color: var(--text-muted); line-height: 1.55; }
.public-pricing-note--emphasis { border: 1px solid var(--accent); background: var(--accent-soft); }
.public-pricing-note--emphasis strong { font-size: 15px; }
.public-pricing-note--emphasis p { color: var(--text); }
@media (min-width: 760px) { .public-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.public-policy-layout { display: grid; gap: 30px; min-width: 0; }
/* Built for the 2-item legal-page nav (Privacy/Terms), where a plain flex
   row was fine on any width. The Trust & Security page reuses this same
   component with 9 items, and a non-wrapping flex row that size drags the
   whole grid track wider than the viewport below the 800px breakpoint,
   cutting off the body copy next to it, not just clipping the nav itself.
   min-width: 0 lets this grid item actually shrink to the track's width
   (grid/flex items default to min-width: auto, i.e. "at least as wide as my
   content", which is exactly what caused the blowout) so overflow-x can
   scroll internally instead of stretching the layout. */
.public-policy-nav { display: flex; gap: 8px; position: sticky; top: 84px; align-self: start; min-width: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.public-policy-nav::-webkit-scrollbar { display: none; }
.public-policy-nav a { flex-shrink: 0; padding: 8px 13px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); font-size: 13px; font-weight: 650; text-decoration: none; background: var(--bg); white-space: nowrap; }
.public-policy-copy { max-width: 68ch; }
.public-policy-copy section { scroll-margin-top: 96px; padding-bottom: 46px; }
.public-policy-copy h2 { margin: 0 0 16px; color: var(--text); font-size: clamp(25px, 4vw, 34px); line-height: 1.15; }
.public-policy-copy h3 { margin: 28px 0 8px; color: var(--text); font-size: 17px; }
.public-policy-copy p { color: var(--text-muted); font-size: 16px; line-height: 1.7; }
.public-policy-copy .public-menu-kicker { font-size: 11px; }
.public-policy-updated { padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-raised); font-size: 13px !important; }
.public-inline-link { border: none; background: none; padding: 0; font: inherit; font-size: inherit; color: var(--accent-strong); text-decoration: underline; cursor: pointer; }
/* A table this wide (3 columns of real sentences) will overflow a narrow
   viewport if placed directly in flowing copy - same class of bug as the
   nav-pill overflow fixed earlier, wrap it in its own scroll container
   instead of letting it stretch the page. */
.public-table-wrap { overflow-x: auto; margin: 18px 0; border: 1px solid var(--border); border-radius: 12px; }
.public-notice-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.public-notice-table th, .public-notice-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); white-space: normal; min-width: 160px; }
.public-notice-table th { background: var(--surface-raised); color: var(--text); font-weight: 700; }
.public-notice-table td { color: var(--text-muted); }
.public-notice-table tr:last-child td { border-bottom: none; }
@media (min-width: 800px) {
  .public-policy-layout { grid-template-columns: 170px minmax(0, 1fr); }
  /* Column layout has room to wrap a long label onto a second line inside
     the pill instead of needing horizontal scroll, so the nowrap/no-shrink
     rules added for the mobile row are reset back to normal here. */
  .public-policy-nav { flex-direction: column; overflow-x: visible; }
  .public-policy-nav a { white-space: normal; flex-shrink: 1; }
}

.trust-diagram { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 22px 0 26px; }
.trust-diagram-step { width: 100%; max-width: 420px; padding: 14px 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-raised); color: var(--text); font-size: 14.5px; font-weight: 650; text-align: center; }
.trust-diagram-step small { display: block; margin-top: 3px; color: var(--text-muted); font-size: 12.5px; font-weight: 500; }
.trust-diagram-arrow { color: var(--text-faint); font-size: 18px; line-height: 1; }
.trust-diagram-result { border-color: var(--positive); background: color-mix(in srgb, var(--positive) 12%, var(--surface)); }

.trust-access-grid { display: grid; gap: 16px; margin: 18px 0 8px; }
.trust-access-col { padding: 18px 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-raised); }
.trust-access-col h4 { margin: 0 0 10px; font-size: 12.5px; font-weight: 750; color: var(--text); text-transform: uppercase; letter-spacing: 0.03em; }
.trust-access-col ul { margin: 0; padding-left: 18px; color: var(--text-muted); font-size: 14.5px; line-height: 1.75; }
.trust-access-col--no { border-color: var(--positive); }
.trust-access-col--no h4 { color: var(--positive); }
@media (min-width: 700px) { .trust-access-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.trust-checklist { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.trust-checklist li { display: flex; gap: 10px; align-items: flex-start; color: var(--text); font-size: 15px; line-height: 1.55; }
.trust-checklist li::before { content: "\2713"; flex-shrink: 0; color: var(--positive); font-weight: 800; }

/* Hero product preview: a compact mobile Clarity screen built from the
   real Home hierarchy, not a generic browser mockup or stock image. */
.public-hero-visual { display: flex; justify-content: center; }
.public-preview-desktop { display: none; width: 100%; }
.public-preview-mobile { display: flex; justify-content: center; width: 100%; }
.public-desktop-preview {
  width: 100%;
  /* Capped independently of how wide the hero grid gets - aspect-ratio
     scales height with width, so on a very wide screen the card was
     growing taller than the text column next to it (eyebrow through the
     CTA buttons). 680px wide at 4:3 keeps it under ~510px tall, sized to
     that column rather than to however much horizontal room is available.
     Matches .public-hero-visual's own max-width at the wide breakpoint. */
  max-width: 680px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.10);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
}
.public-desktop-preview-bar { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface-raised); }
.public-desktop-preview-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--border-strong); }
.public-desktop-preview-body { position: relative; padding: 16px 18px; flex: 1 1 auto; min-height: 0; overflow: hidden; }
@media (min-width: 1040px) {
  .public-preview-desktop { display: block; }
  .public-preview-mobile { display: none; }
}
.public-phone-preview {
  width: min(100%, 320px);
  border: 5px solid color-mix(in srgb, var(--text) 88%, var(--border));
  border-radius: 34px;
  background: var(--bg);
  box-shadow: 0 24px 54px rgba(20, 26, 30, 0.16);
  overflow: hidden;
  aspect-ratio: 9 / 16;
  display: flex;
  flex-direction: column;
}
.public-phone-status { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 6px; color: var(--text); font-size: 8px; font-weight: 750; }
.public-phone-status-icons { display: inline-flex; align-items: center; gap: 3px; }
.public-phone-status-icons i { display: block; width: 8px; height: 5px; border: 1px solid currentColor; border-radius: 2px; }
.public-phone-status-icons i:first-child { width: 3px; height: 3px; border: 0; border-radius: 50%; background: currentColor; }
.public-phone-appbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.public-phone-appbar .pub-preview-brand { font-size: 12px; }
.public-phone-account { width: 25px; height: 25px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-strong); border-radius: 50%; color: var(--text-muted); font-size: 10px; }
.public-phone-appbar-actions { justify-self: end; display: flex; gap: 5px; }
.public-phone-body { position: relative; padding: 12px 12px 8px; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.pub-preview-scroll-stage { display: flex; flex-direction: column; gap: 8px; }
.pub-preview-brand { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text); }
.pub-preview-logo { width: 20px; height: 8px; background-color: var(--text); -webkit-mask-image: url('logo-cat-glasses.png'); mask-image: url('logo-cat-glasses.png'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.pub-preview-greeting { display: flex; flex-direction: column; gap: 4px; padding: 3px 1px 2px; }
.pub-preview-date { color: var(--text-faint); font-size: 8px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.pub-preview-greeting strong { color: var(--text); font-size: 18px; line-height: 1.1; }
.pub-preview-overview { display: flex; flex-direction: column; gap: 7px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.pub-preview-overview-head { display: flex; align-items: center; justify-content: space-between; }
.pub-preview-overview-head::after { content: "▲"; color: var(--text-faint); font-size: 6px; }
.pub-preview-kicker { color: var(--text-faint); font-size: 8px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.pub-preview-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pub-preview-stat { flex: 1 1 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-raised); display: flex; flex-direction: column; gap: 2px; }
.pub-preview-stat .k { font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); }
.pub-preview-stat .v { font-size: 14px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.pub-preview-stat .d { color: var(--text-faint); font-size: 8.5px; }
.pub-preview-forecast,
.pub-preview-upcoming { border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.pub-preview-forecast { padding: 8px 10px 7px; }
.pub-preview-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text); font-size: 10px; font-weight: 720; }
.pub-preview-section-head span:last-child { color: var(--text-faint); font-size: 8.5px; font-weight: 650; }
.pub-preview-chart { width: 100%; height: 48px; flex-shrink: 0; }
.pub-preview-chart-zero { stroke: var(--border); stroke-width: 1; }
.pub-preview-chart-baseline { stroke: var(--risk); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.42; }
.pub-preview-chart-line { stroke: var(--accent-strong); stroke-width: 2.5; }
.pub-preview-chart-caption { margin: -1px 0 0; color: var(--text-faint); font-size: 8px; line-height: 1.2; }
.pub-preview-upcoming { padding: 7px 10px; }
.pub-preview-row { display: flex; justify-content: space-between; font-size: 10px; padding: 5px 0; border-top: 1px solid var(--border); }
.pub-preview-upcoming .pub-preview-section-head { padding-bottom: 5px; }
.pub-preview-row .pos { color: var(--positive); font-weight: 650; }
.pub-preview-row .neg { color: var(--risk); font-weight: 650; }
.pub-preview-row--demo-target { position: relative; margin-inline: -6px; padding-inline: 6px; border-radius: 7px; }
.public-demo-pointer,
.public-demo-click { display: none; }
@media (min-width: 1040px) and (prefers-reduced-motion: no-preference) {
  .pub-preview-scroll-stage { animation: public-demo-scroll 8s 900ms cubic-bezier(0.4, 0, 0.2, 1) both; }
  .public-demo-pointer {
    position: absolute;
    z-index: 4;
    left: 28%;
    top: 50%;
    display: block;
    filter: drop-shadow(0 3px 5px rgba(20, 26, 30, 0.22));
    pointer-events: none;
    opacity: 0;
    animation: public-demo-pointer 8s 900ms cubic-bezier(0.22, 0.78, 0.24, 1) both;
  }
  .public-demo-click {
    position: absolute;
    z-index: 3;
    left: 28%;
    top: 50%;
    width: 14px;
    height: 14px;
    display: block;
    border: 2px solid var(--accent);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    animation: public-demo-click 8s 900ms ease-out both;
  }
  .pub-preview-row--demo-target { animation: public-demo-target 8s 900ms ease both; }
}
@keyframes public-demo-scroll {
  0%, 20% { transform: translateY(0); }
  40%, 100% { transform: translateY(-125px); }
}
@keyframes public-demo-pointer {
  0%, 42% { opacity: 0; transform: translate(220px, 120px) scale(1); }
  48% { opacity: 1; }
  64%, 68% { opacity: 1; transform: translate(0, 0) scale(1); }
  71% { opacity: 1; transform: translate(0, 0) scale(0.86); }
  74%, 88% { opacity: 1; transform: translate(0, 0) scale(1); }
  96%, 100% { opacity: 0; transform: translate(0, 0) scale(1); }
}
@keyframes public-demo-click {
  0%, 68% { opacity: 0; transform: translate(-50%, -50%) scale(0.25); }
  71% { opacity: 0.52; }
  82%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(3.4); }
}
@keyframes public-demo-target {
  0%, 68%, 92%, 100% { background: transparent; box-shadow: none; }
  72%, 86% { background: color-mix(in srgb, var(--accent-soft) 82%, transparent); box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent-soft) 52%, transparent); }
}

/* ── Login / signup ───────────────────────────────────────────── */
#login-view {
  display: flex;
  justify-content: center;
  padding-top: 60px;
}
.login-card {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 28px 24px 24px;
}
.login-card-logo {
  width: 100px;
  height: 42px;
  margin: 0 auto 2px;
  background-color: var(--text);
  -webkit-mask-image: url('logo-cat-glasses.png');
  mask-image: url('logo-cat-glasses.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.login-card h2 { font-size: 16px; font-weight: 650; color: var(--text); text-align: center; }
.login-back-link { align-self: flex-start; background: none; border: none; padding: 0; margin-bottom: -4px; color: var(--text-faint); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.login-back-link:hover { color: var(--text-muted); text-decoration: underline; }
.login-card form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.login-invite-field {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.login-card .btn { margin-top: 4px; }
.login-error {
  font-size: 12.5px;
  color: var(--risk);
}
.login-card--email-check {
  max-width: 360px;
}
.login-success-note {
  font-size: 12.5px;
  color: var(--ok);
}
.email-provider-link {
  justify-content: center;
  text-decoration: none;
}
.login-switch {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  text-align: left;
}
.login-switch:hover { text-decoration: underline; }
.login-unlock-note {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: -6px;
}
.recovery-code-box {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.5px;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  text-align: center;
  word-break: break-all;
  user-select: all;
}

.settings-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.settings-section:first-of-type { padding-top: 0; border-top: none; }
.settings-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.settings-section-copy {
  font-size: 12px;
  color: var(--text-muted);
}
.settings-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.settings-swatch {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: var(--text);
  cursor: pointer;
  padding: 0;
}
.settings-swatch:hover { border-color: var(--border-strong); }
.settings-swatch--active { border-color: var(--text); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.settings-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: max-content;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.settings-mode-btn {
  border: 0;
  border-radius: calc(var(--radius-sm) - 2px);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
}
.settings-mode-btn:hover { color: var(--text); }
.settings-mode-btn--active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 0 0 1px var(--border);
}
.settings-window {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.settings-group {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-raised);
}
.settings-group-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 60px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
}
.settings-group-row:first-child { border-top: 0; }
.settings-group-row--stacked {
  align-items: stretch;
  flex-direction: column;
  gap: 10px;
}
.settings-row-heading {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.settings-row-heading strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
}
.settings-row-heading > span {
  color: var(--text-muted);
  font-size: 11px;
}
.settings-save-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--accent-strong);
  cursor: pointer;
}
.settings-save-btn:hover { border-color: var(--accent); }

.admin-invite-code-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  font-size: 12.5px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.admin-invite-code-row > span { display: flex; flex-direction: column; gap: 2px; color: var(--text); }
.admin-invite-code-row > span > small { color: var(--text-faint); font-size: 10.5px; }
.admin-invite-code-row > code {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--text);
}
.admin-user-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 220px;
  overflow-y: auto;
}
.admin-user-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  font-size: 12.5px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
}
.admin-user-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px 10px;
}
.admin-user-delete { color: var(--risk); }
.admin-user-delete:hover { border-color: var(--risk); }
.admin-user-message-preview { font-style: italic; }
.admin-user-row span:first-child { color: var(--text); }
.admin-user-row span:last-child { color: var(--text-faint); font-variant-numeric: tabular-nums; }

/* ── About dialog: same comparison matrix as the marketing landing page,
   plain "Yes/No/Often/Varies" language, no checkmarks/color verdicts. ── */
.about-dialog { display: flex; flex-direction: column; gap: 12px; }
.about-dialog-brand { display: flex; align-items: center; gap: 8px; }
.about-dialog-logo {
  width: 60px; height: 25px;
  background-color: var(--text);
  -webkit-mask-image: url('logo-cat-glasses.png');
  mask-image: url('logo-cat-glasses.png');
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.about-dialog-title { font-size: 15px; font-weight: 700; color: var(--text); }
.about-dialog-tagline { font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin: 0; }
.about-dialog-intro { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin: 0; }
.about-dialog-heading { font-size: 14px; font-weight: 700; color: var(--text); margin: 6px 0 0; }
.about-dialog-foot { font-size: 11px; color: var(--text-faint); margin: 4px 0 0; line-height: 1.5; }

.install-instructions { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.install-instructions + .install-instructions { margin-top: 8px; }
.install-instructions summary {
  list-style: none; cursor: pointer; padding: 9px 12px;
  font-size: 12px; font-weight: 650; color: var(--text);
  background: var(--surface-raised);
  display: flex; align-items: center; justify-content: space-between;
}
.install-instructions summary::-webkit-details-marker { display: none; }
.install-instructions summary::after { content: "+"; color: var(--text-faint); font-size: 12px; }
.install-instructions[open] summary::after { content: "\2212"; }
.install-steps { padding: 10px 12px 12px 30px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.install-steps li + li { margin-top: 4px; }
.public-download-dialog { display: flex; flex-direction: column; gap: 12px; }
.public-download-status { margin: 0; padding: 10px 12px; border: 1px solid var(--positive); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--positive) 10%, var(--surface)); color: var(--positive); font-size: 12px; font-weight: 700; }
.public-download-availability { display: grid; gap: 7px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-raised); }
.public-download-availability span { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.public-download-availability strong { color: var(--text); font-size: 12px; }
.public-download-availability small { color: var(--text-faint); font-size: 10.5px; text-align: right; }

.about-matrix-category { border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.about-matrix-category + .about-matrix-category { margin-top: 8px; }
.about-matrix-category summary {
  list-style: none; cursor: pointer; padding: 9px 12px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-faint); background: var(--surface-raised);
  display: flex; align-items: center; justify-content: space-between;
}
.about-matrix-category summary::-webkit-details-marker { display: none; }
.about-matrix-category summary::after { content: "+"; color: var(--text-faint); font-size: 12px; }
.about-matrix-category[open] summary::after { content: "\2212"; }
.about-matrix-grid { border-top: 1px solid var(--border); }
.about-matrix-header,
.about-matrix-row {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.88fr) minmax(0, 1.04fr);
  column-gap: 12px;
  align-items: start;
  padding: 10px 12px;
}
.about-matrix-header {
  background: var(--surface);
  color: var(--text-faint);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.about-matrix-row { border-top: 1px solid var(--border); }
.about-matrix-feature { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.4; }
.about-matrix-row .clarity-val { font-size: 12.5px; font-weight: 700; color: var(--positive); line-height: 1.4; }
.about-matrix-row .typical-val { font-size: 12.5px; font-weight: 500; color: var(--text-muted); line-height: 1.4; }

.about-origin-story-body { padding: 18px 18px 22px; display: flex; flex-direction: column; gap: 22px; }
.about-story-dialog .about-dialog-intro { text-align: center; }
.about-story-header { padding: 2px 30px 4px; text-align: center; }
.about-story-header h3 { margin: 0; color: var(--text); font-size: 17px; font-weight: 750; line-height: 1.25; }
.about-story-byline { display: flex; align-items: center; justify-content: flex-start; gap: 10px; text-align: left; }
.about-story-byline > div { display: flex; flex-direction: column; gap: 1px; }
.about-story-byline strong { color: var(--text); font-size: 12.5px; line-height: 1.3; }
.about-story-byline span { color: var(--text-faint); font-size: 10.5px; line-height: 1.3; }
.about-story-headshot { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; object-position: center 28%; border: 1px solid var(--border); }
.about-story-signoff { align-self: center; margin-top: 2px; }
.about-story-section { display: flex; flex-direction: column; gap: 9px; }
.about-story-section h4 { display: flex; align-items: center; gap: 10px; margin: 1px 0 2px; color: var(--text-faint); font-size: 9.5px; font-weight: 750; letter-spacing: 0.07em; line-height: 1.35; text-align: center; text-transform: uppercase; }
.about-story-section h4::before,
.about-story-section h4::after { content: ""; height: 1px; flex: 1 1 auto; background: var(--border); }
.about-story-section h4 span { flex: none; max-width: 72%; }
.about-story-closing { display: flex; flex-direction: column; gap: 10px; padding-top: 2px; }
.about-story-tldr { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; padding: 14px 15px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-raised); }
.about-story-tldr h4 { margin: 0; color: var(--text); font-size: 10px; font-weight: 750; letter-spacing: 0.07em; text-align: left; text-transform: uppercase; }
.about-story-tldr p { margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
@media (max-width: 440px) {
  .about-matrix-header,
  .about-matrix-row { grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.8fr) minmax(0, 1fr); column-gap: 7px; padding-left: 9px; padding-right: 9px; }
  .about-matrix-header { font-size: 8px; }
  .about-matrix-feature, .about-matrix-row .clarity-val, .about-matrix-row .typical-val { font-size: 10.5px; }
  .about-origin-story-body { padding: 16px 6px 20px; }
  .about-story-headshot { width: 40px; height: 40px; }
}

/* ─────────────────────────────────────────────────────────────
   Buttons
   ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--text);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.1px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  user-select: none;
  -webkit-user-select: none;
}
.btn:hover {
  background: var(--surface);
  border-color: var(--border-strong);
}
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.btn--primary:hover { filter: brightness(0.94); }
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}
.btn--ghost:hover {
  color: var(--text);
  background: var(--surface-raised);
}
.btn--sm { padding: 4px 10px; font-size: 11.5px; }

.quiet-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  opacity: 0.5;
  transition: opacity 0.14s;
}
.quiet-actions:hover, .quiet-actions:focus-within { opacity: 1; }

/* ─────────────────────────────────────────────────────────────
   Finance, shared panel chrome
   ───────────────────────────────────────────────────────────── */
.finance-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.finance-shell--standalone {
  gap: 16px;
}

.finance-register-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-margin-top: 72px;
}

.full-page-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Underline tab selector (Rocket Money's mobile tab bar look), used for the
   Activity view's Transactions/Recurring split now that recurring schedules
   moved out of Cash Flow and into this destination. */
.activity-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
}
.activity-tab {
  flex: 1 1 0;
  padding: 10px 4px 9px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
}
.activity-tab:hover { color: var(--text); }
.activity-tab--active {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.activity-tab-count {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}
.activity-tab--active .activity-tab-count {
  background: var(--accent);
  color: #fff;
}
.finance-schedules-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.full-page-view--transactions .bank-explorer-dialog {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.full-page-view--transactions .bank-explorer-list {
  max-height: none;
  overflow: visible;
}
.full-page-view--transactions .bank-explorer-row {
  grid-template-columns: 64px minmax(0, 1fr) minmax(82px, auto) minmax(144px, auto);
}
.full-page-view--transactions .bank-explorer-desc {
  flex-direction: row;
  align-items: flex-start;
  white-space: normal;
}
.full-page-view--transactions .bank-explorer-desc-text {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.full-page-view--transactions .bank-explorer-desc-name {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}
.full-page-view--transactions .bank-explorer-desc-info {
  justify-content: flex-start;
  overflow: visible;
  white-space: normal;
  text-align: left;
}
.full-page-view--transactions .bank-explorer-row-actions {
  min-width: 0;
}
.full-page-view--transactions .bank-explorer-row-menu {
  max-width: 100%;
}

.more-sheet {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.more-sheet-header {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.more-sheet-header #dlg-msg {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: 0;
}
.more-sheet-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.more-sheet-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.more-sheet-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.more-sheet-action {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 66px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  text-align: left;
  padding: 10px 11px;
  cursor: pointer;
}
.more-sheet-action:hover {
  border-color: var(--border-strong);
  background: color-mix(in srgb, var(--surface-raised) 76%, var(--accent-soft));
}
.more-sheet-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--accent-strong);
}
.more-sheet-action-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.more-sheet-action-copy strong {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.more-sheet-action-copy > span {
  color: var(--text-muted);
  font-size: 10px;
  line-height: 1.25;
}

.still-water-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #607f84;
  touch-action: none;
}
.still-water-view {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
  overflow: hidden;
  background: #607f84;
}
.still-water-heading {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: calc(100% - 110px);
  color: #fff;
  pointer-events: none;
  text-shadow: 0 1px 14px rgba(9, 25, 28, 0.62);
}
.still-water-heading > span { font-size: 18px; font-weight: 650; }
.still-water-heading p { margin: 0; color: rgba(255,255,255,0.72); font-size: 11.5px; }
.still-water-controls {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 1;
  display: flex;
  gap: 7px;
}
.still-water-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  background: rgba(12, 31, 34, 0.28);
  color: rgba(255,255,255,0.88);
  backdrop-filter: blur(12px);
  cursor: pointer;
}
.still-water-controls button:hover { background: rgba(12, 31, 34, 0.42); }
#dlg-box:has(.more-sheet),
#dlg-box:has(.settings-window) {
  max-width: 520px;
  border-radius: 24px;
}
#dlg-box:has(.still-water-view) {
  width: min(920px, calc(100vw - 48px));
  max-width: 920px;
  height: min(720px, calc(100dvh - 48px));
  max-height: 720px;
  padding: 0;
  gap: 0;
  overflow: hidden;
  border-radius: 28px;
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  box-shadow: 0 24px 70px rgba(8, 23, 26, 0.3);
}
#dlg-box:has(.still-water-view) > .dlg-close-x {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  background: rgba(12, 31, 34, 0.28);
  color: rgba(255,255,255,0.88);
  backdrop-filter: blur(12px);
}

.finance-credit-score-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  padding: 12px;
}
.finance-credit-score-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.finance-credit-score-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.finance-credit-score-value {
  color: var(--text);
  font-size: 26px;
  line-height: 1;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.finance-credit-score-note {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}
.finance-credit-score-projection {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.finance-credit-score-projection-main {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.finance-credit-score-projection-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.finance-credit-score-projection-value {
  color: var(--text);
  font-size: 20px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.finance-credit-score-projection-delta {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.finance-credit-score-projection-delta--up { color: var(--positive); }
.finance-credit-score-projection-delta--down { color: var(--risk); }
.finance-credit-score-breakdown {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.finance-credit-score-breakdown-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}
.finance-credit-score-breakdown-label { color: var(--text-muted); }
.finance-credit-score-breakdown-value { color: var(--text); font-variant-numeric: tabular-nums; }

/* What-if fields are always visible/editable, at the bottom of the card,
   not behind a separate edit dialog. */
.finance-credit-score-whatif {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.finance-credit-score-whatif-label {
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.finance-credit-score-whatif-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(118px, 1fr));
  gap: 8px;
}
.finance-credit-score-whatif-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.finance-credit-score-whatif-field span {
  overflow: hidden;
  color: var(--text-faint);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.35px;
  line-height: 1.15;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.finance-credit-score-whatif-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  padding: 0;
}
.finance-credit-score-whatif-field:focus-within {
  border-color: var(--accent);
  background: var(--surface-raised);
}

.finance-planned-vs-actual-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.finance-planned-vs-actual-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  padding: 10px 12px;
}
.finance-planned-vs-actual-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.finance-planned-vs-actual-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.finance-planned-vs-actual-diff {
  font-size: 13px;
  font-weight: 600;
}
.finance-planned-vs-actual-diff--under { color: var(--positive); }
.finance-planned-vs-actual-diff--over { color: var(--risk); }
.finance-planned-vs-actual-detail {
  font-size: 12px;
  color: var(--text-muted);
}

/* A real, contained button, not the tiny 26x22px circular "⋯" icon style
   (.simplefin-overflow), which is built for a single glyph and looked
   cramped/blended-in when reused for text like "+ Add". */
.finance-add-menu {
  position: relative;
  display: inline-flex;
}
.finance-add-menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  min-height: 36px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.finance-add-menu > summary::-webkit-details-marker { display: none; }
.finance-add-menu > summary::after {
  content: "▾";
  font-size: 10px;
  color: var(--text-muted);
}
.finance-add-menu > summary:hover {
  border-color: var(--accent);
  color: var(--text);
}
.finance-add-menu-panel {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  left: 0;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.finance-add-menu-panel .btn {
  justify-content: flex-start;
}
.full-page-view--insights .visualizations-block {
  margin: 0;
}

.finance-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  padding: 12px 14px;
  background: var(--surface);
  position: relative;
}

.finance-assets-block--has-corner-action {
  padding-bottom: 46px;
}

.finance-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-faint);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.finance-section-toggle:hover { color: var(--text-muted); }
.finance-schedules-chevron { font-size: 8px; }

/* ── Assets ───────────────────────────────────────────────── */
.finance-assets-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.finance-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.finance-summary-item {
  position: relative;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  min-width: 0;
}

.finance-summary-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 2px;
}

.finance-summary-value {
  display: block;
  font-size: 18px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.finance-checking-source {
  display: block;
  font-size: 10.5px;
  color: var(--text-faint);
  margin-top: 2px;
}

.finance-summary-edit {
  font-size: 11px;
  color: var(--text-faint);
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px 0 0;
  font-family: inherit;
  display: block;
  text-align: left;
}
.finance-summary-edit:hover { color: var(--accent); }

.simplefin-tools {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 6px;
}
/* Neutral, not the celebratory --positive green it used to be, connecting
   a bank is an optional convenience, not an achievement to nudge toward. */
.simplefin-sync-pill {
  border: 1px dashed var(--border-strong);
  border-radius: 999px;
  background: none;
  color: var(--text-faint);
  font: inherit;
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
  padding: 5px 10px;
  cursor: pointer;
}
.simplefin-sync-pill:hover {
  color: var(--text);
  border-color: var(--accent);
}
.simplefin-sync-pill--corner {
  position: absolute;
  right: 14px;
  bottom: 12px;
}
.simplefin-sync-pill--item-corner {
  position: absolute;
  top: 8px;
  right: 0;
  border-style: solid;
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.simplefin-sync-pill--item-corner:hover { border-color: var(--accent); color: var(--accent-strong); }
.simplefin-sync-pill--gated {
  border-style: solid;
  border-color: var(--risk);
  color: var(--risk);
}
.simplefin-sync-pill--gated:hover { border-color: var(--risk); color: var(--risk); }
.bank-sync-gated-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--text);
}
.bank-sync-gated-note span { flex: 1 1 220px; }
.simplefin-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.simplefin-primary-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.simplefin-overflow {
  position: relative;
  display: inline-flex;
}
.simplefin-overflow > summary {
  width: 26px;
  height: 22px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-faint);
  background: var(--surface);
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.simplefin-overflow > summary::-webkit-details-marker { display: none; }
.simplefin-overflow > summary:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
.simplefin-overflow .simplefin-actions {
  position: absolute;
  z-index: 5;
  top: calc(100% + 5px);
  left: 0;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.simplefin-menu-note {
  display: block;
  max-width: 210px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 10.5px;
  line-height: 1.3;
}
.simplefin-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--text-faint);
  font: inherit;
  font-size: 10.5px;
  line-height: 1.2;
  cursor: pointer;
}
.simplefin-link + .simplefin-link::before {
  content: "/";
  color: var(--border-strong);
  margin-right: 7px;
}
.simplefin-overflow .simplefin-link + .simplefin-link::before,
.simplefin-primary-actions .simplefin-link + .simplefin-link::before {
  content: none;
  margin-right: 0;
}
.simplefin-link:hover { color: var(--accent); }
.simplefin-link--undo {
  color: var(--accent);
  font-weight: 650;
}
.simplefin-link--undo:hover { color: var(--risk); }
.simplefin-status {
  font-size: 10.5px;
  color: var(--text-faint);
  line-height: 1.25;
  max-width: 220px;
}

.finance-guidance {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  padding-right: 36px;
}
.finance-guidance-title {
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
  margin-bottom: 2px;
}
.finance-guidance-copy {
  max-width: 620px;
  font-size: 12px;
  color: var(--text-muted);
}
.finance-guidance-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.finance-guidance-minimize {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--text-faint);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.finance-guidance-minimize:hover { color: var(--text); background: rgba(0, 0, 0, 0.06); }
.finance-guidance-hide {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 11px;
  color: var(--text-faint);
  cursor: pointer;
}
.finance-guidance-hide:hover { color: var(--text-muted); text-decoration: underline; }
.finance-guidance-new-note {
  font-size: 10.5px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.finance-guidance-pill {
  align-self: flex-start;
  width: fit-content;
  border: 1px dashed var(--border-strong);
  border-radius: 999px;
  background: none;
  color: var(--text-faint);
  font: inherit;
  font-size: 11px;
  padding: 5px 12px;
  cursor: pointer;
}
.finance-guidance-pill:hover { color: var(--text); border-color: var(--accent); }


/* ── First-run setup ─────────────────────────────────────────── */
.setup-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.setup-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: end;
  padding: 18px 0 6px;
}
.setup-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 5px;
}
.setup-hero h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 7px;
}
.setup-hero p {
  max-width: 680px;
  font-size: 13px;
  color: var(--text-muted);
}
.setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.setup-defer-credit {
  margin-top: -4px;
}
.setup-card-title {
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
}
.setup-card-copy {
  font-size: 12px;
  color: var(--text-muted);
}
.setup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.setup-meta {
  font-size: 11px;
  color: var(--text-faint);
}
.setup-review {
  gap: 8px;
}
.setup-transaction-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}
.setup-transaction-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 92px 82px;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
}
.setup-transaction-row span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.setup-transaction-row span:nth-child(3) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.setup-empty {
  padding: 12px 0;
  font-size: 12px;
  color: var(--text-faint);
}

.hidden-assets-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0 4px;
  border-top: 1px solid var(--border);
}
.hidden-asset-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hidden-asset-name {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hidden-asset-bal {
  font-size: 13px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.conn-row-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}
.hidden-asset-row:hover .conn-row-actions,
.hidden-asset-row:focus-within .conn-row-actions {
  opacity: 1;
  pointer-events: auto;
}

/* ── Forecast / cash flow ─────────────────────────────────────── */
.finance-at-a-glance {
  gap: 12px;
}
.finance-at-a-glance-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.finance-at-a-glance-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.finance-planning {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.finance-planning-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.finance-planning-actions-row {
  justify-content: flex-end;
}
.finance-cashflow-controls-row {
  justify-content: space-between;
}
.finance-forecast-balance-toggles {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cashflow-filter-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.cashflow-filter-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cashflow-filter-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

.finance-planning-subtitle {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--text-muted);
}
.finance-forecast-summary-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.finance-forecast-summary-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.finance-forecast-summary-top-text {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.finance-forecast-summary-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.finance-forecast-summary-kicker,
.finance-forecast-summary-label,
.finance-lowpoint-label {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.finance-forecast-summary-horizon {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.finance-forecast-summary-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.finance-forecast-summary-value {
  font-size: 24px;
  line-height: 1.05;
  font-weight: 750;
  color: var(--positive);
}
.finance-forecast-summary-title {
  font-size: 15px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--text);
}
.finance-forecast-summary-subline {
  font-size: 13px;
  color: var(--text-muted);
}
.finance-insights-trajectory--embedded {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Trajectory: a step graph of the same rows the ledger renders below it,
   never smoothed, since the balance doesn't change gradually between events.
   In the forecast panel it is clickable; in Insights it can render as a
   static summary. */
.finance-trajectory {
  display: block;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  padding: 10px 12px 8px;
  margin: 2px 0 4px;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.finance-trajectory:hover {
  border-color: var(--border-strong);
}
.finance-trajectory--static {
  cursor: default;
}
.finance-trajectory--static:hover {
  border-color: var(--border);
}
.finance-trajectory-svg {
  display: block;
  width: 100%;
  height: 92px;
}
.finance-trajectory-line {
  stroke: var(--accent);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}
.finance-trajectory-zero {
  stroke: var(--risk);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.35;
  vector-effect: non-scaling-stroke;
}
.finance-trajectory-dot {
  fill: var(--accent);
}
.finance-trajectory-dot--neg {
  fill: var(--risk);
}
.finance-trajectory-caption {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-faint);
}

.finance-lowpoint-explain {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.finance-lowpoint-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.finance-lowpoint-value {
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--text);
  font-weight: 600;
}
.finance-lowpoint-note {
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--text-muted);
}

.finance-schedules {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.finance-schedules-count {
  font-weight: 400;
  opacity: 0.7;
  margin-left: 4px;
}

/* Each recurring schedule is its own contained card (not a table row), no
   visible Edit button; a tap selects/highlights the card, a second tap on
   the already-selected card opens the edit dialog. See
   'select-finance-schedule' in app.js. */
.finance-schedule-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.finance-schedule-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.finance-schedule-group {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.finance-schedule-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 0;
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.finance-schedule-group-head:hover .finance-schedule-group-label {
  color: var(--text);
}

.finance-schedule-group-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.finance-schedule-group-count {
  flex: 0 0 auto;
  color: var(--text-faint);
  font-size: 11px;
}

.finance-schedule-group-total {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.finance-schedule-group-total--pos { color: var(--positive); }
.finance-schedule-group-total--neg { color: var(--risk); }

.finance-schedule-cards--grouped {
  gap: 0;
}

.finance-schedule-cards--grouped .finance-schedule-card {
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}

.finance-schedule-cards--grouped .finance-schedule-card--selected {
  background: var(--surface-raised);
}

.finance-schedule-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.finance-schedule-card--selected {
  border-color: var(--accent);
  background: var(--surface-raised);
}

.finance-schedule-card-tap,
.finance-row-tap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  cursor: pointer;
}

.finance-schedule-card-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* A11Y-01/02: a persistent, always-visible sign these rows are tappable,
   not just a hint that appears after the first tap already selected one. */
.finance-row-chevron {
  flex: 0 0 auto;
  align-self: center;
  color: var(--text-faint);
}
.finance-schedule-card--selected .finance-row-chevron,
.finance-row--selected .finance-row-chevron {
  color: var(--accent);
}

.finance-schedule-card-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.finance-schedule-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.finance-schedule-card-amount {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.finance-schedule-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.finance-schedule-card-bottom-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.finance-schedule-card-tag {
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: 10.5px;
  white-space: nowrap;
}
.finance-schedule-card--selected .finance-schedule-card-tag {
  background: var(--surface);
}

.finance-schedule-card-hint {
  font-size: 11px;
  color: var(--accent);
}

.finance-row-name {
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.finance-row-subtle {
  font-size: 11px;
  color: var(--text-faint);
}

.finance-ledger {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

/* Archive rows are the one remaining consumer of the old dense grid layout
   (financeArchiveRow), the main ledger row (financeRow) moved to the same
   tap-to-select card as Recurring, so this is scoped to archive only now. */
.finance-archive-row {
  display: grid;
  grid-template-columns: 92px minmax(170px, 1.55fr) minmax(124px, 0.9fr) minmax(96px, 0.7fr) minmax(132px, 0.82fr) 64px;
  align-items: center;
  column-gap: 10px;
}
.finance-archive-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  min-width: 0;
}

.finance-balance-toggle {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: none;
  color: var(--text-faint);
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
}
.finance-balance-toggle:hover { color: var(--text); border-color: var(--accent); }
.finance-balance-hide-toggle {
  flex: 0 0 auto;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: none;
  color: var(--text-faint);
  font-size: 8.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1;
  padding: 3px 6px;
  cursor: pointer;
}
.finance-balance-hide-toggle:hover { color: var(--text); border-color: var(--accent); }

.finance-row {
  position: relative;
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  margin-bottom: 6px;
}
.finance-row--selected {
  border-color: var(--accent);
  background: var(--surface-raised);
}
.finance-row-balance-inline {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.finance-date-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.finance-date-note {
  font-size: 11px;
  color: var(--text-faint);
}
.finance-row-paid-note {
  color: var(--confirmed);
  font-weight: 700;
}

.finance-row--matched {
  border-color: color-mix(in srgb, var(--pending) 38%, var(--border));
  background: color-mix(in srgb, var(--pending) 7%, var(--surface));
}
.finance-row--archived {
  background: color-mix(in srgb, var(--text) 3%, var(--surface));
  opacity: 0.7;
}
.finance-row-match {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
  padding: 8px 14px 10px;
  border-top: 1px dashed var(--border-strong);
  border-color: color-mix(in srgb, var(--pending) 42%, var(--border));
  background: color-mix(in srgb, var(--pending) 8%, var(--surface));
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.finance-row-match-info {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 8px;
  min-width: 0;
  font-size: 12px;
}
.finance-row-match-label {
  color: var(--text);
  font-size: 11px;
}
.finance-row-match-desc {
  color: var(--text);
  font-weight: 600;
}
.finance-row-match-date,
.finance-row-match-amount {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.finance-row-match-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}
.finance-row-manual-match-link {
  background: none;
  border: none;
  padding: 4px 0 0;
  color: var(--text-faint);
  font: inherit;
  font-size: 10.5px;
  cursor: pointer;
  text-align: left;
}
.finance-row-manual-match-link:hover { color: var(--accent); }

.finance-readonly--name {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.finance-balance--neg { color: var(--risk); }

.finance-empty-row { padding: 12px 0 6px; }
.finance-empty-row .quiet-actions { justify-content: flex-start; }

/* ── Collapsible month groups ────────────────────────────────── */
.finance-month-summary-totals-pos { color: var(--positive); }
.finance-month-summary-totals-neg { color: var(--risk); }

.finance-month-group {
  border-top: 1px solid var(--border);
  margin-top: 5px;
}
.finance-month-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.finance-month-group-chevron {
  font-size: 9px;
  color: var(--text-faint);
  flex-shrink: 0;
}
.finance-month-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  flex-shrink: 0;
}
.finance-month-group-status {
  flex-shrink: 0;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.finance-month-group-head:hover .finance-month-group-label { color: var(--text); }
.finance-month-group-stats {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.finance-month-group-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  line-height: 1.2;
}
.finance-month-group-stat-label {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}
.finance-month-group-stat-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  /* Deliberately proportional, not tabular-nums, reads as a summary figure,
     not another column in the ledger's aligned number grid. */
}
.finance-month-group-stat--emphasize {
  padding-left: 10px;
  border-left: 1px solid var(--border);
}
.finance-month-group-stat-value--balance {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--positive);
}
.finance-month-group-stat-value--balance.finance-balance--neg { color: var(--risk); }
.finance-month-group-rows { padding-bottom: 4px; }

.finance-month-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0 10px;
  flex-wrap: wrap;
}
.finance-month-all--active {
  background: var(--surface-raised) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}
.finance-month-arrow { font-size: 14px; line-height: 1; padding: 4px 9px !important; }
.finance-month-input {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-raised);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  padding: 4px 8px;
  outline: none;
  transition: border-color 0.12s;
  cursor: pointer;
}
.finance-month-input:focus { border-color: var(--accent); }
.finance-month-sep { color: var(--text-faint); font-size: 13px; flex-shrink: 0; user-select: none; }

/* ── Credit accounts / payments ──────────────────────────────── */
.finance-credit-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.finance-credit-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.finance-credit-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-faint);
}
.finance-credit-tools {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 18px;
}
.finance-credit-footer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.finance-credit-table {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-top: 1px solid var(--border);
  overflow-x: auto;
}
.finance-credit-head,
.finance-credit-row {
  display: grid;
  grid-template-columns: 48px minmax(170px, 1.5fr) 58px 86px 86px 82px 66px 78px 86px 82px 86px;
  align-items: center;
  column-gap: 10px;
}
.finance-credit-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 8px 0 0;
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.finance-credit-head {
  padding: 8px 0 7px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--surface);
}
.finance-credit-row {
  position: relative;
  min-height: 42px;
  padding-right: 14px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}
.finance-credit-row:hover,
.finance-credit-row:focus-visible {
  background: var(--surface-raised);
  outline: none;
}
.finance-credit-row--selected {
  background: var(--surface-raised);
  box-shadow: inset 3px 0 0 var(--accent);
}
/* A11Y-01/02: same "this row is tappable" signal as the schedule/transaction
   cards, but as an absolutely-positioned pseudo-element here instead of a
   real grid child, so it can't disturb this row's precise
   grid-template-columns (or the mobile flex-wrap layout it switches to). */
.finance-credit-row::after {
  content: '';
  position: absolute;
  right: 2px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -4px;
  border-top: 1.5px solid var(--text-faint);
  border-right: 1.5px solid var(--text-faint);
  transform: rotate(45deg);
  pointer-events: none;
}
.finance-credit-row--selected::after {
  border-color: var(--accent);
}
.finance-credit-account { color: var(--text); font-weight: 500; }
.finance-credit-account-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.finance-credit-priority,
.finance-credit-cell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.finance-credit-money {
  text-align: right;
}
.finance-credit-card-hint {
  grid-column: 1 / -1;
  color: var(--accent);
  font-size: 11px;
  padding: 0 0 8px;
}
.finance-credit-input {
  width: 100%;
  min-width: 0;
  border: 1px solid transparent;
  border-bottom-color: var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-variant-numeric: tabular-nums;
  padding: 4px 1px;
  outline: none;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.finance-credit-input--name {
  color: var(--text);
  font-weight: 500;
}
.finance-credit-input--money { text-align: left; }
.finance-credit-input:hover,
.finance-credit-input:focus {
  border-bottom-color: var(--accent);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  color: var(--text);
}
.finance-credit-input--linked {
  color: var(--accent);
  font-weight: 500;
}
.finance-credit-linked { color: var(--accent); font-weight: 500; }
.finance-credit-unlinked { color: var(--text-faint); }
.finance-credit-row-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  opacity: 0.75;
  transition: opacity 0.12s;
}
.finance-credit-row:hover .finance-credit-row-actions { opacity: 1; }

.credit-import-map {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.credit-import-map-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.55fr);
  align-items: center;
  gap: 10px;
}
.credit-import-source {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.credit-import-source span {
  color: var(--text);
  font-size: 13px;
}
.credit-import-source small {
  color: var(--text-faint);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.credit-import-select {
  min-height: 34px;
}
.import-review-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.import-review-summary strong {
  color: var(--text);
}
.import-review-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.import-review-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 90px;
  gap: 8px;
  align-items: center;
  padding: 7px 9px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 12px;
}
.import-review-row:first-child { border-top: 0; }
.import-review-row span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.import-review-row span:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.finance-payment-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
.finance-payment-group { border-top: 1px solid var(--border); padding-top: 8px; }
.finance-payment-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.finance-payment-group-head:hover .finance-payment-account { color: var(--text); }
.finance-payment-account { font-size: 12px; color: var(--text); }
.finance-payment-total { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.finance-payment-items { display: flex; flex-direction: column; gap: 2px; }
.finance-payment-item {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.finance-payment-item--adhoc {
  color: var(--accent);
  font-style: italic;
}
.finance-adhoc-delete {
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  padding: 0 2px;
  font-size: 12px;
  line-height: 1;
  opacity: 0.3;
  transition: opacity 0.12s;
}
.finance-payment-item:hover .finance-adhoc-delete { opacity: 1; }
.finance-payment-empty {
  font-size: 11.5px;
  color: var(--text-faint);
  font-style: italic;
}
.finance-payment-group-actions {
  margin-top: 6px;
}

/* Forecast accuracy, deliberately the same quiet weight as the payment
   list above, not a new visual register: this is a look-back, not a call
   to action. */
.finance-accuracy-list { display: flex; flex-direction: column; gap: 8px; }
.finance-accuracy-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 14px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.finance-accuracy-month {
  font-size: 12px;
  color: var(--text);
  flex: 1 1 auto;
  min-width: 90px;
}
.finance-accuracy-figure {
  font-size: 11.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.finance-accuracy-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.finance-accuracy-pending {
  color: var(--text-faint);
  font-style: italic;
}
.finance-accuracy-diff { color: var(--positive); }
.finance-accuracy-diff.finance-balance--neg { color: var(--risk); }

/* ── Dialog modal (replaces browser prompt/confirm) ──────────── */
#dlg-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
#dlg-overlay[hidden] { display: none; }
#dlg-box {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
  padding: 20px 22px 16px;
  min-width: 300px;
  max-width: 440px;
  max-height: 85vh;
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}
.dlg-close-x {
  position: sticky;
  top: 0;
  align-self: flex-end;
  z-index: 1;
  border: none;
  background: none;
  color: var(--text-faint);
  font-size: 20px;
  line-height: 1;
  padding: 4px;
  margin: -10px -10px -28px 0;
  cursor: pointer;
}
.dlg-close-x:hover { color: var(--text); }
#dlg-box:has(.simplefin-help-dialog) {
  max-width: 760px;
}
#dlg-box:has(.bank-explorer-dialog) {
  max-width: 560px;
}
#dlg-box:has(.billing-dialog) {
  max-width: 360px;
}
#dlg-box:has(.about-dialog) {
  max-width: 520px;
}
#dlg-box:has(.about-story-dialog) {
  max-width: 600px;
}

/* A paid moment deserves a calmer, more deliberate layout than the generic
   dense CRUD-form dialog everything else in the app shares, centered,
   one clear price, one clear action, no competing controls. */
.billing-dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 6px 4px 2px;
}
.billing-dialog-icon {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.billing-dialog-title {
  font-size: 16.5px;
  font-weight: 650;
  color: var(--text);
  letter-spacing: -0.1px;
  margin: 0 0 8px;
  padding-right: 0;
  white-space: normal;
}
.billing-dialog-body {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0 0 16px;
  max-width: 30ch;
}
.billing-dialog-price-card {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  padding: 14px 16px;
  margin: 0 0 14px;
}
.billing-dialog-price {
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.billing-dialog-price-period {
  font-size: 12px;
  color: var(--text-faint);
  font-weight: 500;
}
/* Coverflow: a full-size center card (same footprint/style as a
   .billing-dialog-plan-card) with the prev/next feature peeking out
   smaller behind it on either side, center card layered on top via
   z-index. The three slots are physically fixed, hovering or clicking a
   side card swaps which feature's text is in which slot (see the focus()
   wiring in showBankSyncBillingPrompt) rather than moving cards around. */
.billing-coverflow {
  position: relative;
  width: 100%;
  height: 92px;
  margin: 0 0 6px;
}
.billing-coverflow-card {
  position: absolute;
  top: 50%;
  /* Fixed box for every card regardless of which feature's text is showing,
     the previous version sized to content, so a longer detail line (wrapping
     to a 2nd line) visibly changed that card's height/shape as the carousel
     advanced. overflow: hidden clips the rare case a line still doesn't
     fit, rather than growing the box. */
  height: 72px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  padding: 8px;
}
.billing-coverflow-card strong { font-size: 11.5px; color: var(--text); }
.billing-coverflow-card span { font-size: 10px; color: var(--text-faint); }
.billing-coverflow-card--center {
  left: 50%;
  width: 46%;
  transform: translate(-50%, -50%);
  z-index: 3;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}
/* Both side cards share one fixed width/scale at all times, hover only
   changes opacity/border, never size, so prev and next always stay
   identical to each other regardless of which one (if either) is hovered. */
.billing-coverflow-card--side {
  width: 38%;
  transform: translateY(-50%) scale(0.86);
  z-index: 1;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}
.billing-coverflow-card--side span { font-size: 9px; }
.billing-coverflow-card--side[data-carousel-nav="prev"] { left: 2%; }
.billing-coverflow-card--side[data-carousel-nav="next"] { right: 2%; }
.billing-coverflow-card--side:hover {
  opacity: 0.9;
  border-color: var(--accent);
}
.billing-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin: 0 0 14px;
}
.billing-carousel-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-strong);
  opacity: 0.35;
}
.billing-carousel-dot--active { opacity: 1; }
.billing-dialog-plan-row {
  display: flex;
  gap: 8px;
  width: 100%;
  margin: 0 0 14px;
}
.billing-dialog-plan-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  padding: 12px 8px;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.billing-dialog-plan-card--active {
  border-color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent-strong) 10%, var(--surface-raised));
}
.billing-dialog-plan-label {
  font-size: 11px;
  font-weight: 650;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.billing-dialog-tip-group {
  width: 100%;
  margin: 0 0 14px;
}
.billing-dialog-tip-label {
  display: block;
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 8px;
}
.billing-dialog-tip-row {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}
.billing-dialog-tip-chip {
  min-width: 48px;
  justify-content: center;
  background: var(--surface-raised);
}
.billing-dialog-note {
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.5;
  margin: 0 0 18px;
  max-width: 34ch;
}
.billing-dialog-invite-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  padding: 8px 16px;
  text-align: left;
  margin: 0 0 18px;
}
.billing-dialog-invite-link:hover { background: var(--accent); color: #fff; }
.billing-dialog-actions {
  display: flex;
  width: 100%;
  margin-top: 0;
}
.billing-dialog-cta {
  width: 100%;
  padding: 11px 16px;
  font-size: 13.5px;
}
/* Purely visual reinforcement of "this is a sheet, swipe/tap away to
   cancel", the close-x and backdrop already do the actual dismissing. */
.sheet-grabber {
  display: none;
}
@media (max-width: 640px) {
  .sheet-grabber {
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--border-strong);
    margin: -6px auto 4px;
  }
}
.schedule-sheet-new .btn {
  width: 100%;
  justify-content: center;
}
.schedule-sheet-divider {
  font-size: 11px;
  color: var(--text-faint);
  text-align: center;
  margin: 2px 0;
}
.schedule-sheet-search {
  margin-bottom: 6px;
}
.schedule-sheet-empty {
  font-size: 12px;
  color: var(--text-faint);
  text-align: center;
  padding: 10px 0;
}
.schedule-sheet-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 42vh;
  overflow-y: auto;
}
.schedule-sheet-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}
.schedule-sheet-row:hover, .schedule-sheet-row:active {
  border-color: var(--accent);
  background: var(--surface-raised);
}
.schedule-sheet-row-name {
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
}
.schedule-sheet-row-meta {
  font-size: 11.5px;
  color: var(--text-muted);
}
#dlg-msg { font-size: 13px; color: var(--text); white-space: pre-line; line-height: 1.45; padding-right: 28px; }
#dlg-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
#dlg-cancel {
  padding: 5px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 12.5px;
  color: var(--text-muted);
  cursor: pointer;
}
#dlg-ok {
  padding: 5px 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent);
  font-size: 12.5px;
  color: #fff;
  cursor: pointer;
}
#dlg-replace {
  padding: 5px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 12.5px;
  color: var(--text-muted);
  cursor: pointer;
}
#dlg-replace:hover { border-color: var(--accent); color: var(--text); }
.dlg-delete-btn {
  margin-right: auto;
  padding: 5px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 12.5px;
  color: var(--risk);
  cursor: pointer;
}
.dlg-delete-btn:hover { border-color: var(--risk); background: color-mix(in srgb, var(--risk) 10%, transparent); }
/* Non-destructive extra dialog actions (Mark as paid, Convert to
   recurring), same neutral look as Cancel. Always place before
   .dlg-delete-btn in markup so that button's margin-right:auto pushes the
   whole left-side cluster away from Cancel/OK correctly. */
.dlg-secondary-btn {
  padding: 5px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 12.5px;
  color: var(--text-muted);
  cursor: pointer;
}
.dlg-secondary-btn:hover { border-color: var(--accent); color: var(--text); }
.dlg-field { display: flex; flex-direction: column; gap: 3px; }
.dlg-label { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.dlg-field-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  font-size: 13px;
  color: var(--text);
  font-family: inherit;
  outline: none;
}
.dlg-field-input:focus { border-color: var(--accent); }
.password-field-wrap { position: relative; }
.password-field-wrap .dlg-field-input { padding-right: 34px; }
.password-toggle-btn {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
}
.password-toggle-btn:hover { color: var(--text-muted); }
.dlg-field-input:read-only { background: var(--surface); color: var(--text-muted); }
select.dlg-field-input, select.dlg-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 26px;
  cursor: pointer;
}

.simplefin-picker {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.simplefin-picker-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.simplefin-picker-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.simplefin-account-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.simplefin-account-choice input {
  flex: 0 0 auto;
}
.simplefin-picker-empty {
  font-size: 12px;
  color: var(--text-faint);
}
.simplefin-picker-maybe-credit summary {
  list-style: none;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 2px 0;
}
.simplefin-picker-maybe-credit summary::-webkit-details-marker { display: none; }
.simplefin-picker-maybe-credit summary:hover { color: var(--text-muted); }
.simplefin-picker-maybe-credit .bank-explorer-intro {
  margin-top: 6px;
}
.simplefin-picker-maybe-credit .simplefin-account-choice {
  margin-top: 5px;
}
.simplefin-help-intro {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.simplefin-billing-note {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
  padding: 12px;
}
.simplefin-token-top {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.simplefin-open-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  padding: 8px 13px;
  text-decoration: none;
}
.simplefin-open-link:hover {
  border-color: color-mix(in srgb, var(--accent) 65%, transparent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.simplefin-connect-top {
  align-self: flex-start;
}
.simplefin-help-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.simplefin-help-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.simplefin-help-copy {
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.simplefin-help-number {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}
.simplefin-help-title {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--text);
}
.simplefin-help-text {
  font-size: 11.5px;
  color: var(--text-muted);
}
.simplefin-help-image {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-raised);
}
.bank-explorer-intro {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.bank-explorer-intro p { margin: 0 0 8px; }
.bank-explorer-intro p:last-child { margin-bottom: 0; }
.import-instructions-list {
  margin: 0 0 8px;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.import-instructions-list strong { color: var(--text); }
.bank-explorer-empty-state {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 12px;
  text-align: center;
  align-items: center;
}
.bank-explorer-empty-title {
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
}
.bank-explorer-empty-copy {
  max-width: 340px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
}
.bank-explorer-empty-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 4px;
}
.bank-explorer-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
  max-height: min(46vh, 360px);
  overflow-y: auto;
}
/* Rocket Money-style month divider between groups in the continuous feed,
   plain label + that month's total spend, not an accordion/toggle. */
.bank-explorer-month-divider {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 2px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.bank-explorer-month-divider:first-child {
  padding-top: 2px;
}
/* Same row list, sitting directly on the page instead of in a dialog, a
   taller cap since there's no modal chrome competing for vertical space,
   but still capped so 14 days of activity can't push the rest of the page
   away. */
.bank-explorer-list--inline {
  max-height: min(50vh, 480px);
  border-top: none;
}
.finance-recent-activity-footer {
  display: flex;
  justify-content: center;
  padding-top: 10px;
}
.finance-recent-activity-block .bank-explorer-row {
  grid-template-columns: 58px minmax(0, 1fr) 78px;
  grid-template-areas:
    "date desc amount"
    "actions actions actions";
  row-gap: 6px;
  padding: 5px 0 8px;
}
.finance-recent-activity-block .bank-explorer-date { grid-area: date; }
.finance-recent-activity-block .bank-explorer-desc { grid-area: desc; }
.finance-recent-activity-block .bank-explorer-amount { grid-area: amount; }
.finance-recent-activity-block .bank-explorer-row-actions {
  grid-area: actions;
  width: 100%;
  justify-content: flex-start;
  flex-wrap: nowrap;
}
.finance-recent-activity-block .bank-explorer-row-menu {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  min-width: 0;
}
.category-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 999px;
}

.category-icon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.category-icon-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
}
.category-icon-option--active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.recurring-icon-details summary { list-style: none; cursor: pointer; }
.recurring-icon-details summary::-webkit-details-marker { display: none; }
.recurring-icon-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.recurring-icon-summary-current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-muted);
}
.recurring-icon-summary-current svg { width: 16px; height: 16px; }
.recurring-icon-summary::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--text-faint);
  border-bottom: 1.5px solid var(--text-faint);
  transform: rotate(45deg);
  margin-top: -2px;
  flex-shrink: 0;
}
.recurring-icon-details[open] .recurring-icon-summary::after { transform: rotate(-135deg); margin-top: 2px; }
.recurring-icon-picker {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}
.recurring-icon-grid {
  max-height: 132px;
  overflow: auto;
  padding: 2px 0 4px;
}
.recurring-icon-default {
  align-self: flex-start;
}
.recurring-icon-default--active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
/* Swipe-to-reveal shell: the row (front) sits on top of its own actions
   (back) and slides left to reveal them, instead of the actions ever being
   visible by default. See the pointerdown/move/up handlers in app.js. */
.bank-explorer-row-shell {
  position: relative;
  overflow: hidden;
}
.bank-explorer-row-back {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  background: var(--surface-raised);
}
.bank-explorer-row-back-content {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 4px;
  padding: 6px 6px;
}
.bank-explorer-row-back-content .btn {
  white-space: nowrap;
}
[data-swipe-front] {
  position: relative;
  touch-action: pan-y;
  transition: transform 0.18s ease;
  cursor: pointer;
}
.bank-explorer-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 78px auto;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
  /* Explicit, not just inherited from an ancestor, an unmodified ("new")
     row otherwise had no background of its own, showing through to
     whatever the panel painted. The status-modifier rows below already
     paint their own tinted background; plain ones need the same. */
  background: var(--surface);
}
.simplefin-picker-group .bank-explorer-row:not(:has(.bank-explorer-date)) {
  grid-template-columns: minmax(0, 1fr) 88px 82px;
}
.bank-explorer-date {
  font-size: 11px;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.bank-explorer-desc {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  color: var(--text);
}
.bank-explorer-desc-text {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
.bank-explorer-desc-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}
.bank-explorer-desc-info {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-align: right;
}
.bank-explorer-alias {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-faint);
  font-style: italic;
}
.bank-explorer-row--scheduled {
  /* Mixed into var(--surface), not transparent, a fully opaque tint of the
     row's own surface color, not a see-through wash over whatever's behind
     it (a transparent tint let the panel's background bleed through
     inconsistently). */
  background: color-mix(in srgb, var(--positive) 7%, var(--surface));
}
.bank-explorer-row--scheduled .bank-explorer-desc {
  color: var(--text-faint);
}
.bank-explorer-row--ignored {
  background: color-mix(in srgb, var(--text) 4%, var(--surface));
}
.bank-explorer-row--ignored .bank-explorer-desc {
  color: var(--text-faint);
}
.bank-explorer-row--discretionary {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}
.bank-explorer-row--discretionary .bank-explorer-desc {
  color: var(--text-faint);
}
.bank-explorer-row--accounted {
  background: color-mix(in srgb, var(--text) 4%, var(--surface));
}
.bank-explorer-row--accounted .bank-explorer-desc {
  color: var(--text-faint);
}
.bank-explorer-scheduled-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--positive) 14%, transparent);
  color: var(--positive);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  vertical-align: middle;
}
.bank-explorer-scheduled-tag--ignored {
  background: var(--surface-raised);
  color: var(--text-faint);
}
.bank-explorer-scheduled-tag--discretionary {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
.bank-explorer-scheduled-tag--accounted {
  background: var(--surface-raised);
  color: var(--text-faint);
}
.bank-explorer-scheduled-check {
  text-align: center;
  color: var(--positive);
  font-weight: 650;
}
/* Lives in the right-aligned info group next to the raw description now,
   not stacked as its own line underneath it. */
.bank-explorer-match-note {
  font-size: 11px;
  color: var(--text-faint);
  white-space: nowrap;
}
.bank-explorer-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.bank-explorer-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.bank-explorer-inline-actions {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
}
.bank-explorer-inline-actions .btn {
  min-height: 28px;
  white-space: nowrap;
}
.bank-explorer-inline-edit {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-basis: 100%;
  margin-top: 4px;
}
.bank-explorer-inline-edit-input {
  flex: 1 1 160px;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 12.5px;
}
/* Solid color block per action (Rocket Money's swipe-action treatment),
   mapped onto the existing semantic hues rather than new ones, these are
   actions, not data categories, so they stay inside the 5-hue system. Icon on
   top, one word below (see btn()'s `icon` option), every block is the same
   width and never wraps to a second row. */
.bank-row-action--accent, .bank-row-action--pending, .bank-row-action--risk, .bank-row-action--neutral {
  border: none;
  color: #fff;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 40px;
  padding: 5px 1px;
}
.bank-row-action--accent .btn-icon,
.bank-row-action--pending .btn-icon,
.bank-row-action--risk .btn-icon,
.bank-row-action--neutral .btn-icon {
  display: flex;
}
.bank-row-action--accent .btn-label,
.bank-row-action--pending .btn-label,
.bank-row-action--risk .btn-label,
.bank-row-action--neutral .btn-label {
  font-size: 9.5px;
  line-height: 1.1;
  white-space: nowrap;
}
.bank-row-action--accent { background: var(--accent); }
.bank-row-action--pending { background: var(--pending); }
.bank-row-action--risk { background: var(--risk); }
.bank-row-action--neutral { background: var(--data-neutral); }
/* Replaces what used to be up to six separate icon buttons on a single
   "new" row, one compact control standing in for all of them. */
.bank-explorer-row-menu {
  max-width: 128px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  font-size: 11px;
  padding: 4px 6px;
  cursor: pointer;
}
.bank-explorer-row-menu:hover { border-color: var(--accent); color: var(--text); }
/* Some browsers render <option> text using their own OS-level muted/disabled
   gray instead of the author color, especially for the first/placeholder
   option, invisible against a dark --surface. Force it explicitly rather
   than relying on inheritance from the <select>. */
.bank-explorer-row-menu option {
  color: var(--text);
  background: var(--surface);
}
.bank-explorer-status-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bank-explorer-filter-chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 11px;
  padding: 4px 10px;
  cursor: pointer;
}
.bank-explorer-filter-chip:hover { border-color: var(--border-strong); color: var(--text); }
@media (max-width: 760px) {
  /* Wrapping left uneven rows on narrow screens, a full row or two of
     similar-width chips followed by one short leftover chip stranded on
     its own line. A single scrollable row keeps every chip the same
     height/shape regardless of label length, the standard mobile pattern
     for filter pills. */
  .bank-explorer-status-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .bank-explorer-status-filters::-webkit-scrollbar { display: none; }
  .bank-explorer-filter-chip { flex: 0 0 auto; }
}
.bank-explorer-filter-chip--active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
}
.bank-explorer-filter-count {
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}
.info-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  cursor: help;
  font-style: normal;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
}
.info-tip:hover, .info-tip:focus-visible { color: var(--text-muted); }
.dlg-static-value {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 13px;
  color: var(--text-muted);
}
.dlg-checkbox-field {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
}
.dlg-checkbox-field input { flex: 0 0 auto; width: auto; }
.export-section-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.export-section-list .dlg-checkbox-field { align-items: flex-start; }
.export-section-list .dlg-checkbox-field input { margin-top: 2px; }
.dlg-radio-field {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
}
.dlg-radio-field input { flex: 0 0 auto; width: auto; }

/* Same undo/redo the header already offers, just still reachable once
   you've scrolled past it. No button chrome (border/background/box) on
   purpose, per direct feedback that a bordered pill looked clunky here,
   just the arrow itself with a soft glow, so it reads as floating rather
   than as another control competing with the page underneath it. */
.floating-history {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}
.floating-history-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  padding: 0;
  color: var(--accent-strong);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.85);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent-strong) 50%, transparent)) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.16));
  transition: opacity 0.2s ease, transform 0.2s ease, filter 0.15s ease;
}
.floating-history-btn:not([hidden]) { opacity: 1; transform: scale(1); }
.floating-history-btn:hover {
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--accent-strong) 75%, transparent)) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
}
/* Only reachable once actually scrolled past the header (see the scroll
   listener in app.js) - at scroll-top this sits at the exact same
   coordinates as the header's own account-menu button, and without this
   gate a click there could hit whichever one happened to be on top. */
.floating-history:not(.floating-history--scrolled) .floating-history-btn {
  opacity: 0;
  pointer-events: none;
}

/* Quiet, passive confirmation after undo/redo, never a blocking dialog,
   matches the "visible, obvious undo, not a confirm dialog" pattern
   (BUILD_CONSTRAINTS rule 5). Sits just above the dock so it's never hidden
   behind it. */
.undo-redo-toast {
  position: fixed;
  left: 50%;
  bottom: calc(78px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 700;
  max-width: min(90vw, 360px);
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--text);
  font-size: 13px;
  font-weight: 550;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.pull-refresh-indicator {
  position: fixed;
  top: env(safe-area-inset-top);
  left: 0;
  right: 0;
  z-index: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin-top: -44px;
  font-size: 12px;
  font-weight: 650;
  color: var(--text-muted);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  pointer-events: none;
}
.pull-refresh-indicator--ready,
.pull-refresh-indicator--active { color: var(--accent-strong); }

.feedback-button {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 590;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent-strong);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.13);
  cursor: pointer;
}
.feedback-button[hidden] { display: none; }
.feedback-button:hover { border-color: var(--accent); background: var(--accent-soft); }
.feedback-button--unread::after {
  content: '';
  position: absolute;
  top: 1px;
  right: 1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--risk);
  border: 1.5px solid var(--surface);
}
.feedback-button--attention {
  border-color: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 13%, transparent), 0 4px 16px rgba(0, 0, 0, 0.16);
  animation: feedback-attention 2.4s ease-in-out infinite;
}
@keyframes feedback-attention {
  0%, 100% { transform: translateY(0); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent), 0 4px 14px rgba(0, 0, 0, 0.13); }
  50% { transform: translateY(-2px); box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 16%, transparent), 0 7px 18px rgba(0, 0, 0, 0.17); }
}
@media (prefers-reduced-motion: reduce) {
  .feedback-button--attention { animation: none; }
}
.feedback-admin-note {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-raised);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 12px;
}
.feedback-admin-note--persistent { display: block; }
.feedback-admin-note--persistent summary,
.feedback-beta-review summary,
.feedback-history summary {
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}
.feedback-admin-note--persistent p { margin-top: 8px; }
.feedback-admin-note-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.feedback-admin-note p { margin: 0; }
.feedback-admin-note-dismiss {
  border: none;
  background: none;
  padding: 0;
  font-size: 12px;
  font-weight: 650;
  color: var(--accent-strong);
  cursor: pointer;
}
.feedback-admin-note-dismiss:hover { text-decoration: underline; }
.feedback-context-note {
  color: var(--text-muted);
  font-size: 12px;
}
.feedback-message-input { min-height: 118px; resize: vertical; line-height: 1.45; }
.feedback-prompt-input { min-height: 72px; }
.feedback-diagnostic-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.feedback-diagnostic-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.feedback-diagnostic-hint { font-size: 11px; color: var(--text-faint); }
.feedback-diagnostic-fields { display: flex; flex-direction: column; gap: 10px; }
.feedback-diagnostic-preview {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.feedback-diagnostic-row { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--text-muted); }
.feedback-diagnostic-row span:first-child { color: var(--text-faint); }
.feedback-diagnostic-row span:last-child { color: var(--text); text-align: right; }
.admin-feedback-diagnostics { margin-top: 6px; }
.feedback-beta-status {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: 11.5px;
}
.feedback-beta-status strong { color: var(--text); }
.feedback-beta-status--complete { border-color: color-mix(in srgb, var(--positive) 45%, var(--border)); }
.feedback-beta-note { color: var(--text-muted); font-size: 12px; }
.feedback-beta-review,
.feedback-history {
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.feedback-beta-review > p { margin: 8px 0 12px; color: var(--text-muted); font-size: 11.5px; }
.feedback-beta-review .dlg-field { margin-top: 10px; }
.feedback-history-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-height: 230px; overflow-y: auto; }
.feedback-history-empty { color: var(--text-faint); font-size: 11.5px; }
.feedback-history-item { padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.feedback-history-item p { margin: 7px 0 0; color: var(--text); font-size: 12px; line-height: 1.45; white-space: pre-wrap; }
.feedback-history-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--text-faint); font-size: 10px; }
.feedback-history-meta strong { color: var(--text-muted); }
.admin-user-row > span:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.admin-user-row small { color: var(--text-faint); font-size: 10.5px; }
.admin-feedback-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
}
.admin-feedback-toggle input { width: auto; }
.admin-feedback-access-status {
  min-height: 15px;
  color: var(--text-muted);
  font-size: 10.5px;
}
.admin-feedback-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}
.admin-feedback-message {
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
}
.admin-feedback-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-muted);
  font-size: 10.5px;
}
.admin-feedback-meta strong { color: var(--text); overflow-wrap: anywhere; }
.admin-feedback-message > summary { cursor: pointer; }
.admin-feedback-message p { margin: 7px 0; color: var(--text); font-size: 12.5px; white-space: pre-wrap; }
.admin-feedback-context { color: var(--text-faint); font-size: 10.5px; }
.feedback-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.feedback-tab-btn {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
}
.feedback-tab-btn--active { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }

/* ── Navigation dock: contained mobile-style bottom bar ─────────────── */
.dock {
  position: fixed;
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  bottom: calc(8px + env(safe-area-inset-bottom));
  z-index: 600;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.dock-icons {
  width: min(100%, 560px);
  min-height: 62px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  gap: 2px;
  padding: 4px 5px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 96%, var(--bg));
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
  pointer-events: auto;
  overflow: hidden;
}
.dock-icon {
  position: relative;
  min-width: 0;
  min-height: 58px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: 17px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  line-height: 1;
  cursor: pointer;
  overflow: hidden;
}
.dock-icon:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 4%, transparent);
}
.dock-icon--active {
  color: var(--text);
  background: color-mix(in srgb, var(--surface-raised) 82%, transparent);
}
.dock-icon--active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10px;
  right: 10px;
  height: 3px;
  border-radius: 999px;
  background: var(--accent);
}
.dock-icon-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  min-width: 20px;
  font-size: 18px;
  font-weight: 750;
}
/* The magnifying glass (Activity) and pie glyph (Insights) render visually
   smaller than $ and ☰ at the same font-size, bumped up to match weight. */
.dock-icon[data-id="activity"] .dock-icon-glyph,
.dock-icon[data-id="insights"] .dock-icon-glyph {
  font-size: 22px;
}
.dock-icon-glyph svg {
  width: 20px;
  height: 20px;
}
.dock-label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.1;
}
.dock-icon--active .dock-label,
.dock-icon--active .dock-icon-glyph {
  color: var(--text);
}
.dock-brand { display: none; }

/* ── Desktop: left sidebar instead of the bottom dock ─────────────
   Mobile's bottom bar is the right shape for a thumb, but on a wide
   screen with a mouse it wastes the one edge that's actually free
   (the left column), the same nav reads more like a real app there
   as a persistent sidebar instead. Same #dock element, same
   DOCK_SECTIONS/renderDock() markup, only the layout changes. */
@media (min-width: 900px) {
  /* Scoped to body.has-sidebar-dock (toggled in renderDock, see app.js),
     not unconditional, the welcome/login screens have no sidebar to
     reserve this space for and must not inherit the offset. */
  body.has-sidebar-dock { padding-left: 220px; }
  .page { padding-bottom: 40px; }
  /* The sidebar has its own brand mark (see .dock-brand below), a second
     logo plus the collapse-all button in the top header is redundant once
     it's there, mobile keeps both since it has no sidebar to show them in. */
  body.has-sidebar-dock .page-title { display: none; }
  .dock {
    position: fixed;
    inset: 0 auto 0 0;
    width: 220px;
    display: block;
    padding: 22px 14px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    pointer-events: auto;
  }
  .dock-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px 20px;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    width: 100%;
    text-align: left;
  }
  .dock-brand-logo {
    width: 74px;
    height: 31px;
    filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent-strong) 32%, transparent));
    transition: filter 0.15s ease;
  }
  .dock-brand:hover .dock-brand-logo { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent-strong) 55%, transparent)); }
  .dock-brand-title { font-size: 16px; font-weight: 700; color: var(--text); }
  .dock-icons {
    width: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    grid-template-columns: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
  }
  .dock-icon {
    flex-direction: row;
    justify-content: flex-start;
    min-height: 40px;
    width: 100%;
    gap: 11px;
    padding: 0 10px;
    border-radius: 12px;
  }
  .dock-icon--active { background: var(--surface-raised); }
  .dock-icon--active::before {
    top: 6px;
    bottom: 6px;
    left: 0;
    right: auto;
    width: 3px;
    height: auto;
  }
  .dock-icon-glyph { height: 18px; min-width: 18px; }
  .dock-label {
    font-size: 13px;
    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;
  }
}

/* ── Home page ─────────────────────────────────────────────────── */
.home-page {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 48px 8px;
}
.home-date {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.home-greeting {
  font-size: 34px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
}
.home-page { width: 100%; }
.home-pending-banner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent-strong);
  padding: 12px 14px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}
.home-pending-banner-amount { font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.home-overview { width: 100%; }
.home-overview-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.home-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.home-stat-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  min-width: 0;
}
.home-stat-card--link {
  width: 100%;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.home-stat-card--link:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--surface-raised) 88%, var(--accent-soft));
}
.home-stat-label {
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.home-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.home-stat-note {
  font-size: 11px;
  color: var(--text-muted);
}
.home-chart-card {
  display: block;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  padding: 12px 14px;
}
.home-chart-card--link {
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.home-chart-card--link:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--surface-raised) 88%, var(--accent-soft));
}
.home-chart-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
  margin-bottom: 6px;
}
.home-chart-card-hint {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
}
.home-chart-card--link:hover .home-chart-card-hint {
  color: var(--accent);
}
.home-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.home-lists--single { grid-template-columns: 1fr; }
.home-list-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  padding: 12px 14px;
  min-width: 0;
}
.home-list-card-head {
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
  margin-bottom: 4px;
}
.home-list-empty {
  font-size: 12px;
  color: var(--text-faint);
  padding: 6px 0;
}
.home-list-scroll {
  max-height: 300px;
  overflow-y: auto;
}
.home-tx-row {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid var(--border);
  border-inline: none;
  border-bottom: none;
  background: none;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}
.home-tx-row:first-of-type { border-top: none; }
.home-tx-row:hover { background: color-mix(in srgb, var(--accent-soft) 30%, transparent); }
.home-tx-row:active { transform: scale(0.99); }
@media (min-width: 1040px) {
  .home-list-scroll { max-height: 520px; }
}
.home-tx-row-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
.home-tx-row-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-tx-row-sub {
  font-size: 11px;
  color: var(--text-faint);
}
.home-tx-row-amount {
  font-size: 12.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.home-list-view-all { width: 100%; margin-top: 6px; }
@media (max-width: 560px) {
  .home-lists { grid-template-columns: 1fr; }
}
.settings-name-row {
  display: flex;
  gap: 8px;
}
.settings-name-row .dlg-field-input { flex: 1 1 auto; }

/* ── Touch devices: hover-gated affordances need to just be visible ──── */
@media (hover: none) {
  .finance-credit-row-actions,
  .conn-row-actions,
  .finance-adhoc-delete,
  .quiet-actions {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   Mobile, this isn't the desktop layout shrunk down. Dense grids
   (ledger, schedules, credit accounts) become stacked cards; column
   headers that no longer mean anything become inline labels instead;
   dialogs become bottom sheets within thumb reach.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }

  .page {
    padding-top: 20px;
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }

  /* ── Header ──────────────────────────────────────────────── */
  .page-header { align-items: flex-start; }
  .header-toggle-all { width: 26px; height: 26px; }
  #account-bar { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }

  /* ── Buttons: comfortable tap targets ────────────────────── */
  .btn { padding: 9px 14px; font-size: 13px; min-height: 36px; }
  .btn--sm { padding: 7px 11px; font-size: 12px; min-height: 32px; }

  /* ── Balances panel: the headline, so it leads and reads big ─ */
  .finance-summary { grid-template-columns: 1fr; gap: 14px; }
  .finance-summary-value { font-size: 21px; }

  .finance-guidance {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .finance-guidance-actions { justify-content: flex-start; }
  .setup-hero { grid-template-columns: 1fr; align-items: start; }
  .setup-grid { grid-template-columns: 1fr; }
  .setup-transaction-row { min-width: 620px; }

  /* ── Ledger: each transaction becomes a card, not a scrolling row ── */
  .finance-balance-toggle { width: 22px; height: 22px; font-size: 11px; }
  .finance-balance-hide-toggle { padding: 5px 9px; font-size: 10px; }

  .finance-month-group-head { flex-wrap: wrap; }
  .finance-month-group-stats { margin-left: 0; gap: 10px; }

  /* ── Credit accounts: column headers become inline labels ── */
  /* Layout itself lives in the single authoritative mobile block near EOF
     (search "EOF override"). Grid-based nth-child(N) => grid-area mappings
     used to live here and in two other now-deleted blocks; three competing
     copies drifted out of sync with the real DOM order (Min due was added
     as its own field after these were written) and, via CSS specificity,
     produced scrambled mobile labels/values even after one copy was fixed,
     because a later, more specific copy still won the cascade. */
  .finance-credit-row-actions {
    justify-content: flex-end;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }

  .finance-payment-groups { grid-template-columns: 1fr; }

  /* ── Bank transaction review: rows become cards too ─────── */
  .bank-explorer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "desc amount"
      "date amount"
      "actions actions";
    row-gap: 6px;
    column-gap: 12px;
    padding: 13px 10px;
    min-height: 64px;
    font-size: 14px;
    background: var(--surface);
  }
  .finance-recent-activity-block .bank-explorer-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "desc amount"
      "date amount"
      "actions actions";
    row-gap: 8px;
    column-gap: 12px;
    padding: 13px 10px;
    min-height: 86px;
  }
  .bank-explorer-row--scheduled {
    background: color-mix(in srgb, var(--positive) 11%, var(--surface));
  }
  .bank-explorer-row--ignored,
  .bank-explorer-row--accounted {
    background: color-mix(in srgb, var(--text) 6%, var(--surface));
  }
  .bank-explorer-row--discretionary {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  }
  .bank-explorer-date {
    grid-area: date;
    font-size: 11.5px;
    line-height: 1.2;
  }
  .bank-explorer-amount {
    grid-area: amount;
    align-self: start;
    padding-top: 1px;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.2;
    color: var(--text);
  }
  .bank-explorer-amount--credit { color: var(--positive); }
  .bank-explorer-amount--debit { color: var(--risk); }
  .bank-explorer-desc {
    grid-area: desc;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    white-space: normal;
  }
  .bank-explorer-desc-text {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
  }
  .bank-explorer-desc-name {
    display: block;
    width: 100%;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text);
  }
  .bank-explorer-row--scheduled .bank-explorer-desc-name,
  .bank-explorer-row--ignored .bank-explorer-desc-name,
  .bank-explorer-row--discretionary .bank-explorer-desc-name,
  .bank-explorer-row--accounted .bank-explorer-desc-name {
    color: var(--text-muted);
  }
  .bank-explorer-desc-info {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 4px 6px;
    width: 100%;
    overflow: visible;
    white-space: normal;
    text-align: left;
    font-size: 11.5px;
    line-height: 1.25;
  }
  .bank-explorer-alias,
  .bank-explorer-match-note {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .bank-explorer-alias {
    flex: 1 1 100%;
    color: var(--text-muted);
  }
  .bank-explorer-scheduled-tag {
    margin-left: 0;
    font-size: 10px;
  }
  .bank-explorer-row-actions {
    grid-area: actions;
    width: 100%;
    justify-content: flex-start;
    align-items: stretch;
    padding-top: 4px;
    border-top: 1px solid var(--border);
  }
  .finance-recent-activity-block .bank-explorer-row-actions {
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: wrap;
    padding-top: 8px;
  }
  .finance-recent-activity-block .bank-explorer-inline-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 6px;
  }
  .finance-recent-activity-block .bank-explorer-inline-actions .btn {
    width: 100%;
    min-height: 36px;
    padding-inline: 8px;
    justify-content: center;
  }
  .simplefin-picker-group .bank-explorer-row > .btn {
    grid-area: actions;
    justify-self: flex-start;
  }
  .bank-explorer-row-menu {
    flex: 1 1 190px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 36px;
    border-radius: var(--radius-sm);
    font-size: 12px;
  }
  .finance-recent-activity-block .bank-explorer-row-menu {
    flex: 1 1 220px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 38px;
  }
  /* Dialogs remain visibly separate from the device frame. The previous
     edge-to-edge bottom sheet made Settings and More feel like overflowing
     pages rather than contained app windows. */
  #dlg-overlay {
    align-items: center;
    padding:
      max(14px, env(safe-area-inset-top))
      max(14px, env(safe-area-inset-right))
      max(14px, env(safe-area-inset-bottom))
      max(14px, env(safe-area-inset-left));
  }
  #dlg-box {
    width: min(100%, 520px);
    max-width: 100%;
    max-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    border-radius: 24px;
    padding: 18px 18px 14px;
  }
  #dlg-btns {
    position: sticky;
    bottom: 0;
    margin: 8px -18px -14px;
    padding: 10px 18px 14px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-radius: 0 0 24px 24px;
  }
  #dlg-box:has(.still-water-view) {
    width: 100%;
    height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    max-height: none;
    border-radius: 28px;
    padding: 0;
  }
  .still-water-view { min-height: 0; }
  .still-water-heading { top: 20px; left: 20px; }
  .more-sheet-action { min-height: 64px; }
  .settings-group-row { padding-inline: 12px; }
  .settings-swatches { gap: 9px; }
  .settings-swatch { width: 26px; height: 26px; }
}

@media (max-width: 390px) {
  .more-sheet-actions { grid-template-columns: 1fr; }
  .more-sheet-action { min-height: 56px; }
  .settings-group-row {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
  }
  .settings-mode-toggle { width: 100%; }
  .settings-mode-btn { flex: 1 1 0; }
}

/* Match & archive state styling */
.finance-row-match-ambiguity {
  display: block;
  flex: 1 1 100%;
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--text-muted);
}

.finance-row-match--ambiguous {
  border-style: dashed;
}

.finance-archive-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--border);
  padding-top: 6px;
}
.finance-archive-list {
  display: flex;
  flex-direction: column;
}
.finance-archive-row {
  color: var(--text-muted);
}
.finance-archive-date,
.finance-archive-name,
.finance-archive-category,
.finance-archive-amount,
.finance-archive-muted {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.finance-archive-date,
.finance-archive-amount {
  font-variant-numeric: tabular-nums;
}
.finance-archive-muted {
  color: var(--text-muted);
}
.finance-archive-restore {
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent-strong);
  font-size: 11.5px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}
.finance-archive-restore:hover {
  text-decoration: underline;
}
.finance-archive-status {
  display: flex;
  justify-content: center;
}
.finance-archive-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.finance-archive-tag--paid,
.finance-archive-tag--received {
  background: color-mix(in srgb, var(--positive) 12%, transparent);
  color: var(--positive);
}
.finance-archive-tag--skipped {
  background: color-mix(in srgb, var(--pending) 14%, transparent);
  color: var(--text-muted);
}

.finance-match-archive-feedback {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 8px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--confirmed) 38%, var(--border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--confirmed) 8%, var(--surface));
  color: var(--text);
}

.finance-match-archive-feedback__text {
  font-weight: 800;
  color: var(--confirmed);
}

.finance-match-archive-feedback__detail {
  color: var(--text-muted);
  font-size: 12px;
}

/* Credit account table, sorting & priority order */
.finance-credit-head,
.finance-credit-row {
  grid-template-columns: 48px minmax(160px, 1.5fr) 58px 80px 80px 74px 66px 78px 82px 78px 80px;
  column-gap: 8px;
}

.finance-credit-sort {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: pointer;
}

.finance-credit-sort:hover,
.finance-credit-sort--active {
  color: var(--text);
}

.finance-credit-sort-arrow {
  color: var(--accent);
  font-size: 9px;
}

.finance-credit-account {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.finance-credit-input--priority {
  text-align: center;
}

.finance-payment-account {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.finance-payment-priority {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.finance-credit-minimum-note {
  border-top: 1px solid var(--border);
  padding-top: 8px;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .app-loading-logo { animation: none; }
}

@media (max-width: 760px) {
  .page {
    padding-top: calc(10px + env(safe-area-inset-top));
    padding-bottom: calc(86px + env(safe-area-inset-bottom));
  }

  .page-header {
    position: sticky;
    top: 0;
    z-index: 520;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) minmax(42px, auto);
    align-items: center;
    gap: 8px;
    margin: calc(-10px - env(safe-area-inset-top)) calc(-14px - env(safe-area-inset-left)) 14px calc(-14px - env(safe-area-inset-right));
    padding: calc(8px + env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 8px max(14px, env(safe-area-inset-left));
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 94%, var(--surface));
  }

  .header-settings-btn {
    grid-column: 1;
    justify-self: start;
    width: 28px;
    height: 28px;
  }

  .page-title {
    grid-column: 2;
    justify-content: center;
    min-width: 0;
  }

  .brand-home {
    justify-content: center;
    min-width: 0;
  }

  .clarity-logo {
    width: 42px;
    height: 28px;
  }

  .page-header h1 {
    font-size: 17px;
    line-height: 1;
  }

  .header-toggle-all {
    display: none;
  }

  #account-bar {
    grid-column: 3;
    justify-content: flex-end;
    flex-wrap: nowrap;
    min-width: 0;
  }

  #account-bar > .btn {
    display: none;
  }

  .account-menu-trigger,
  .icon-btn {
    width: 34px;
    height: 34px;
  }

  .account-menu-panel {
    right: 0;
    min-width: min(220px, calc(100vw - 28px));
  }

  .finance-shell,
  .finance-register-group,
  .finance-credit-section {
    gap: 12px;
  }

  .home-page {
    padding: 24px 2px 4px;
    scroll-margin-top: 72px;
  }

  .home-greeting {
    font-size: 28px;
  }

  .finance-panel {
    border-radius: 8px;
    padding: 14px;
    scroll-margin-top: 72px;
  }

  .finance-section-toggle {
    min-height: 32px;
    font-size: 11px;
  }

  .finance-transactions-entry {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-raised);
    color: var(--text-muted);
    font: inherit;
    cursor: text;
  }

  .finance-transactions-entry:focus-within {
    color: var(--text);
    border-color: var(--border-strong);
  }

  .finance-transactions-entry-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
  }

  .finance-transactions-entry-input {
    min-width: 0;
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 15px;
    color: var(--text);
  }
  .finance-transactions-entry-input::placeholder { color: var(--text-muted); }

  .full-page-view--transactions .bank-explorer-dialog {
    gap: 14px;
  }

  .full-page-view--transactions #dlg-msg {
    font-size: 22px;
    font-weight: 750;
    padding-right: 0;
  }

  .full-page-view--transactions .bank-explorer-search-field {
    position: relative;
  }

  .full-page-view--transactions .bank-explorer-search-field .dlg-label {
    display: none;
  }

  .full-page-view--transactions [data-bank-explorer-search] {
    min-height: 52px;
    border-radius: 14px;
    padding-left: 42px;
    padding-right: 42px;
    font-size: 16px;
    background: var(--surface-raised);
  }

  .full-page-view--transactions .bank-explorer-search-field::before {
    content: "⌕";
    position: absolute;
    left: 14px;
    top: 50%;
    z-index: 1;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 20px;
  }

  .full-page-view--transactions .bank-explorer-search-field::after {
    content: "≡";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 20px;
  }

  .bank-explorer-list,
  .finance-credit-table,
  .finance-payment-groups,
  .finance-month-group,
  .finance-archive-list {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    overflow: hidden;
  }

  .bank-explorer-list {
    border-top: 1px solid var(--border);
  }

  .bank-explorer-row,
  .finance-recent-activity-block .bank-explorer-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    border-top: 1px solid var(--border);
    border-radius: 0;
    padding: 13px 12px;
  }

  .bank-explorer-row {
    grid-template-areas:
      "icon desc amount"
      "icon date amount"
      "actions actions actions";
  }

  .full-page-view--transactions .bank-explorer-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-areas:
      "icon desc amount"
      "icon date amount"
      "actions actions actions";
    row-gap: 8px;
    min-height: 0;
  }

  .full-page-view--transactions .bank-explorer-row-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
  }

  .full-page-view--transactions .bank-explorer-row-menu {
    width: 100%;
    min-width: 0;
  }

  .full-page-view--transactions .bank-explorer-row-actions .btn {
    min-width: 38px;
    min-height: 36px;
    justify-content: center;
  }

  .bank-explorer-row::before {
    content: "$";
    grid-area: icon;
    align-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 13%, var(--surface));
    color: var(--accent);
    font-size: 13px;
    font-weight: 750;
    line-height: 1;
  }

  .bank-explorer-row--scheduled::before,
  .bank-explorer-row--accounted::before {
    content: "✓";
    background: color-mix(in srgb, var(--positive) 13%, var(--surface));
    color: var(--positive);
  }

  .bank-explorer-row--ignored::before {
    content: "–";
    background: var(--surface-raised);
    color: var(--text-muted);
  }

  .bank-explorer-row--discretionary::before {
    content: "•";
    background: color-mix(in srgb, var(--pending) 15%, var(--surface));
    color: var(--pending);
  }

  .bank-explorer-row:first-child,
  .finance-recent-activity-block .bank-explorer-row:first-child {
    border-top: 0;
  }

  .finance-credit-row,
  .finance-payment-group,
  .finance-archive-row {
    border-top: 1px solid var(--border);
    padding-left: 12px;
    padding-right: 12px;
  }

  .finance-credit-row:first-of-type,
  .finance-payment-group:first-child,
  .finance-archive-row:first-child {
    border-top: 0;
  }

  /* The desktop grid's minimum width (six fixed/minmax tracks) is wider
     than a phone screen with nothing to make it wrap, so text and the
     action buttons past the visible edge were simply clipped off-screen.
     Below this breakpoint the row stacks instead: date+name+amount on one
     line, tag/status/actions flowing below it, everything reachable. */
  .finance-archive-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 6px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .finance-archive-row .finance-date-cell { flex: 0 0 auto; }
  .finance-archive-row .finance-archive-name {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    order: 1;
  }
  .finance-archive-row .finance-archive-amount {
    flex: 0 0 auto;
    order: 2;
  }
  .finance-archive-row .finance-archive-category {
    flex: 1 1 auto;
    order: 3;
  }
  .finance-archive-row .finance-archive-status {
    flex: 0 0 auto;
    order: 4;
    margin-left: auto;
  }
  .finance-archive-row .finance-archive-actions {
    order: 5;
    flex-basis: 100%;
  }

  .finance-ledger {
    border-top: 0;
  }

  .finance-month-group {
    margin-top: 8px;
  }

  .finance-month-group-head {
    padding: 12px;
  }

  .finance-month-group-rows {
    padding-bottom: 0;
  }

  .finance-archive-amount,
  .bank-explorer-amount,
  .finance-payment-total,
  .finance-payment-item span:nth-child(2),
  .hidden-asset-bal {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .finance-payment-groups {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .finance-payment-group {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .finance-credit-table {
    border-top: 1px solid var(--border);
  }

  .finance-credit-summary {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
  }

  .dock {
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(10px + env(safe-area-inset-bottom));
    justify-content: center;
  }

  .dock-icons {
    width: min(100%, 430px);
    min-height: 66px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 22px;
  }
}

/* Authoritative fix for the transaction-name-unreadable bug: three earlier
   mobile media-query passes (~2873, ~2932, ~3477) left the description
   column narrow enough, combined with overflow-wrap:anywhere, that names
   were breaking every 3-4 characters instead of being readable. Rather than
   untangle which of those three wins in which combination, this is placed
   last and matches their same specificity, so it always wins outright:
   single-line ellipsis truncation, the same reliable pattern already used
   successfully on desktop, guarantees a readable name regardless of exactly
   how narrow the column ends up being. */
@media (max-width: 760px) {
  .bank-explorer-desc-name {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* Cosmetic mobile refinements for Credit Accounts (selected-row highlight,
   account name weight, money alignment, footer spacing). The row layout
   itself lives in the single authoritative block near EOF (search "EOF
   override"); this block only adds properties that block doesn't set, so
   there's nothing here to fight the cascade. */
@media (max-width: 760px) {
  .finance-credit-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 0;
    background: transparent;
    overflow: visible;
  }

  .finance-credit-summary {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    padding: 10px 12px;
  }

  .finance-credit-head {
    display: none;
  }

  .finance-credit-row--selected {
    border-color: var(--accent);
    box-shadow: none;
    background: var(--surface-raised);
  }

  .finance-credit-account-name {
    font-size: 13px;
    font-weight: 750;
    color: var(--text);
  }

  .finance-credit-money {
    align-items: flex-end;
    text-align: right;
  }

  .finance-credit-card-hint {
    padding: 0;
  }

  .finance-credit-footer-actions {
    margin-top: 2px;
    justify-content: flex-end;
  }
}

/* EOF override: the credit/transaction surfaces above have several historical
   mobile passes. This block is last on purpose. */
.viz-summary {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.finance-credit-head,
.finance-credit-row {
  grid-template-columns: minmax(150px, 1.4fr) 86px 66px 58px 78px 86px 82px 86px 82px 86px;
}

.finance-credit-priority,
.finance-payment-priority,
.finance-credit-input--priority {
  display: none !important;
}

.bank-explorer-list {
  gap: 10px;
  border-top: 0;
}

.bank-explorer-month-group {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.bank-explorer-month-divider {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: var(--surface-raised);
  color: var(--text-muted);
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
}

.bank-explorer-month-rows {
  display: flex;
  flex-direction: column;
}

.bank-explorer-row-card {
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.bank-explorer-row-card--selected {
  background: var(--surface-raised);
  box-shadow: inset 3px 0 0 var(--accent);
}

.bank-explorer-row-card .bank-explorer-row {
  border-top: 0;
  min-height: 52px;
  padding: 10px 12px;
  cursor: pointer;
  background: transparent;
}

.bank-explorer-row-actions-panel {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 12px 12px 52px;
}

.bank-explorer-row-hint {
  color: var(--accent);
  font-size: 11px;
}

@media (max-width: 760px) {
  .finance-credit-score-whatif-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bank-explorer-row-card .bank-explorer-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    grid-template-areas:
      "icon desc amount"
      "icon date amount";
    gap: 5px 10px;
    min-height: 58px;
    padding: 10px 12px;
  }

  .bank-explorer-row-card .bank-explorer-row::before {
    display: none;
    content: none;
  }

  .bank-explorer-row-card .bank-explorer-date { grid-area: date; }
  .bank-explorer-row-card .bank-explorer-desc { grid-area: desc; }
  .bank-explorer-row-card .bank-explorer-amount { grid-area: amount; }

  .bank-explorer-row-actions-panel {
    padding: 0 12px 12px 56px;
  }

  /* The collapsed month-divider row (e.g. "JULY 2026 ... $X spent") reused
     the same 10px/12px padding as desktop, which reads fine on a wider
     viewport but feels cramped against a narrow phone screen - more
     breathing room here only, desktop is untouched. Scoped through the
     parent .bank-explorer-month-group (matching this component's real
     markup) rather than the bare class, since a same-named but unrelated
     .bank-explorer-month-divider:first-child rule elsewhere (a separate
     inline-feed component) has equal specificity and would otherwise win
     on padding-top for the first item via source order alone. */
  .bank-explorer-month-group .bank-explorer-month-divider {
    padding: 14px 16px;
  }

  .finance-credit-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 12px;
    min-height: 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
  }

  .finance-credit-row > span {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
  }

  .finance-credit-row > span::before {
    content: attr(data-label);
    color: var(--text-faint);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: 0.45px;
    text-transform: uppercase;
  }

  .finance-credit-row > span:nth-child(1) {
    flex: 1 1 min(100%, 190px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .finance-credit-row > span:nth-child(1)::before {
    display: none;
  }

  .finance-credit-row > span:nth-child(2) {
    flex: 0 0 auto;
    margin-left: auto;
    flex-direction: column;
    align-items: flex-end;
  }

  .finance-credit-row > span:nth-child(3) {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
  }

  .finance-credit-row > span:nth-child(n + 4):nth-child(-n + 10) {
    flex: 0 1 auto;
    font-size: 11.5px;
  }

  .finance-credit-card-hint {
    flex: 1 0 100%;
    padding: 0;
  }

  .finance-credit-card-hint::before {
    display: none;
  }
}

@media (max-width: 380px) {
  .finance-credit-score-whatif-fields {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────────
   Story dialog - not a separate page or a separate dialog, the same
   About dialog box just swaps its inner content (#about-dialog-content)
   between the comparison matrix and this article, reached via "Read the
   story behind Clarity" at the bottom of the former.
   ───────────────────────────────────────────────────────────── */
#dlg-box:has(.story-dialog) {
  max-width: 700px;
}
.story-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  padding: 6px 8px;
  margin: 0 0 4px -8px;
  border-radius: var(--radius-sm);
}
.story-back-btn:hover { color: var(--text); background: var(--surface-raised); }
.story-dialog-article {
  padding: 4px 2px 8px;
}
.story-dialog-title {
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 20px;
  text-align: center;
}
.story-dialog-article p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  text-align: justify;
  text-justify: inter-word;
  margin: 0 0 18px;
  break-inside: avoid-column;
}
.story-dialog-article > p:first-of-type::first-letter {
  font-size: 2.2em;
  font-weight: 750;
  float: left;
  line-height: 0.85;
  padding: 0.04em 0.07em 0 0;
  color: var(--accent-strong);
}
.story-dialog-tldr {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px 4px;
  margin: 0 0 20px;
  break-inside: avoid-column;
}
.story-dialog-tldr-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.06em;
  color: var(--accent-strong);
  margin-bottom: 4px;
}
.story-dialog-tldr p {
  font-size: 13px;
  text-align: left;
}
/* A real two-column magazine spread once the widened dialog has room for
   it, collapsing to one column below that automatically. */
@media (min-width: 640px) {
  .story-dialog-article {
    columns: 2;
    column-gap: 32px;
  }
  .story-dialog-title,
  .story-dialog-tldr {
    column-span: all;
  }
}