/* ---------- Reset / base ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: #1c1c1e;
  background: #f4f5f7;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
  /* Suppress the browser's pull-to-refresh and rubber-band overscroll so the
     wrapped app doesn't feel like a web page (harmless on desktop). */
  overscroll-behavior-y: contain;
}
input, button, select, textarea {
  font: inherit;
  color: inherit;
}

/* ---------- View transitions (feels-native page changes) ---------------- */
/* Opt into cross-document view transitions: instead of a white flash on every
   nav tap, the browser crossfades from a snapshot of the old page to the new
   one. This is the highest-leverage "feels native" fix for our multi-page app
   and needs no SPA rewrite. Same-origin MPA opt-in; browsers/WebViews without
   support just navigate instantly (graceful degrade). The persistent header +
   nav are named so they stay anchored while only the main content transitions
   — the hallmark of a native app, not a website reloading. */
@view-transition { navigation: auto; }
html { background: #f4f5f7; }   /* web: any pre-paint frame matches the app, never white */

/* Turn the cross-document view transition OFF in the installed app. During the
   crossfade the ::view-transition overlay only covers the layout viewport — the
   safe-area strip behind the iOS status bar sits outside it, so the gray page
   background flashed there every navigation. The static app shell already makes
   navigation flash-free without the crossfade, so we keep the transition for the
   web (where there's no status-bar inset to expose) and drop it here. */
@media (display-mode: standalone) {
  @view-transition { navigation: none; }
}
.app-header { view-transition-name: app-header; }
.app-nav    { view-transition-name: app-nav; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation-duration: 0s !important; }
}

/* ---------- Layout ------------------------------------------------------ */
.app-header {
  background: #fff;
  color: #1f3d5a;
  /* max(base, env) clears the notch/status bar in standalone (PWA / Capacitor)
     mode; env insets are 0 on the normal web, so this is a no-op there. */
  padding: max(0.5rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
           0.5rem max(1rem, env(safe-area-inset-left));
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid #e6e9ee;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.app-logo-link { display: inline-flex; align-items: center; }
.app-logo { height: 40px; width: auto; display: block; }
.app-nav {
  display: flex;
  gap: 0.25rem;
  overflow-x: auto;
  background: #2a4c6e;
  padding: 0.4rem 0.5rem;
  position: sticky;
  /* Sit just below the header, which grows by the top inset in standalone mode. */
  top: calc(3.5rem + env(safe-area-inset-top));
  z-index: 9;
}
.app-nav a {
  color: #fff;
  text-decoration: none;
  padding: 0.5rem 0.85rem;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  white-space: nowrap;
  opacity: 0.85;
}
.app-nav a.active {
  background: rgba(255,255,255,0.15);
  opacity: 1;
  font-weight: 600;
}
.app-nav .spacer { flex: 1; }
.app-nav button.logout {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  padding: 0.35rem 0.7rem;
  border-radius: 0.5rem;
  font-size: 0.9rem;
}
main {
  max-width: 720px;
  margin: 0 auto;
  /* Honor side/bottom safe areas so content clears the home indicator and any
     landscape notch in standalone mode (no-op on the normal web). */
  padding: 1rem max(1rem, env(safe-area-inset-right))
           max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

/* ---------- Cards ------------------------------------------------------- */
.card {
  background: #fff;
  border-radius: 0.75rem;
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.card h2 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #5a6573;
}
.card .meta {
  font-size: 0.8rem;
  color: #6c757d;
  margin-top: -0.25rem;
  margin-bottom: 0.75rem;
}
/* A description line that sits directly under a card's title row needs breathing
   room from it — the negative margin-top above is for metas tucked under inline
   text, not under the bold card title (Treasurer Report, Monthly average, etc.). */
.card-head + .meta { margin-top: 0.4rem; }
/* Balances grid sits straight under the card header (no meta line), so give it
   the same breathing room — otherwise the top-right fund nearly touches the
   header's share/focus buttons. */
.card-head + .balance-grid { margin-top: 0.5rem; }

/* ---------- Forms ------------------------------------------------------- */
.form-row { display: flex; flex-direction: column; margin-bottom: 0.85rem; }
.form-row label {
  font-size: 0.85rem;
  color: #5a6573;
  margin-bottom: 0.35rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
input[type="text"], input[type="date"], input[type="number"],
input[type="password"], input[type="search"], input[type="file"],
input[type="email"],
textarea, select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  background: #fff;
  font-size: 1rem;
  line-height: 1.4;
  -webkit-appearance: none;        /* iOS strips the chunky native chrome */
  appearance: none;
}
input[type="file"] { padding: 0.5rem; background: #f9fafb; }
/* iOS Safari renders empty `<input type="date">` shorter than a text input
   because there's no value text. Pin min-height so it matches the others. */
input[type="date"] {
  -webkit-min-logical-width: 0;
  min-height: 2.85rem;
  display: block;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid #4a86c8;
  outline-offset: 0;
  border-color: #4a86c8;
}
textarea { min-height: 4.5rem; resize: vertical; }

/* Use grid (not flex) so children honor min-width and don't push container wider */
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.row-2 > * { min-width: 0; }

/* ---------- Buttons ----------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 0.85rem 1rem;
  border-radius: 0.65rem;
  border: 1px solid transparent;
  background: #4a86c8;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.btn:disabled { opacity: 0.6; cursor: default; }
.btn.primary  { background: #2a6d3c; }
.btn.danger   { background: #b6342a; }
.btn.neutral  { background: #6c757d; }
.btn.outline {
  background: #fff;
  border: 1px solid #d1d5db;
  color: #1c1c1e;
}
.btn.block { display: block; width: 100%; }
.btn.small { padding: 0.4rem 0.7rem; font-size: 0.9rem; border-radius: 0.5rem; }

/* Money In / Money Out toggle */
.type-toggle { display: flex; gap: 0.5rem; }
.type-toggle button {
  flex: 1;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 2px solid #d1d5db;
  background: #fff;
  color: #1c1c1e;
  font-weight: 600;
  font-size: 1.05rem;
  cursor: pointer;
}
.type-toggle button.active.in { background: #2a6d3c; color: #fff; border-color: #2a6d3c; }
.type-toggle button.active.out { background: #b6342a; color: #fff; border-color: #b6342a; }

/* Inline chip pickers (Fund, Source, Expense) — single-tap, wrap-around pills.
   Active fill is navy, matching the RN ChipGroup. */
.chip-group { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip-group button {
  padding: 0.45rem 0.8rem;
  border-radius: 0.55rem;
  border: 2px solid #d1d5db;
  background: #fff;
  color: #1c1c1e;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.chip-group button.active { background: #2a4c6e; color: #fff; border-color: #2a4c6e; }

/* ---------- Ledger ------------------------------------------------------ */
.ledger-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.ledger-header h2 { margin: 0; margin-right: auto; } /* push action buttons to the right */
.ledger-header + #summary { margin-top: 0.6rem; }

.ledger-list { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 0.5rem; }

/* Bulk select / edit / delete. The per-row checkbox is hidden until select mode,
   when the row grid grows a leading column for it. */
.row-check { display: none; }
/* No text highlighting while shift+click range-selecting. */
.ledger-list.selecting { user-select: none; }
.ledger-list.selecting .ledger-row { grid-template-columns: auto 1fr; cursor: pointer; }
.ledger-list.selecting .row-check {
  display: block; width: 1.15rem; height: 1.15rem; margin: 0; align-self: center;
  accent-color: #2a6d3c;
}
.bulk-bar {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.5rem 0.2rem; margin-top: 0.3rem;
  border-top: 1px solid #eef0f3; border-bottom: 1px solid #eef0f3;
}
.bulk-bar .bulk-spacer { flex: 1; }
.bulk-all { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.9rem; color: #5a6573; }
.bulk-all input, .bulk-bar input[type="checkbox"] { accent-color: #2a6d3c; }
.bulk-count { font-size: 0.9rem; color: #5a6573; }

/* Bulk-edit modal laid out two-up to stay compact; textareas span both columns. */
.bulk-grid, .edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 0.75rem; }
.bulk-grid .form-row, .edit-grid .form-row { margin-bottom: 0; }
.bulk-grid .span2, .edit-grid .span2 { grid-column: 1 / -1; }
.edit-grid { margin-bottom: 0.85rem; }

/* Section help: a "?" button toggles a callout with the section's explainer,
   so the settings cards stay uncluttered. */
.sec-head { display: flex; align-items: center; gap: 0.4rem; position: relative; margin-bottom: 0.6rem; }
.sec-head h2, .sec-head h3 { margin: 0; }
.sec-head.sub { margin-top: 1rem; } /* spacing for mid-card (h3) sections */
.help-tip-btn {
  flex: none;
  margin-left: auto; /* push the info button to the right edge of the heading */
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  border: 1px solid #c4ccd6;
  background: #f3f4f6;
  color: #5a6573;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.help-tip-btn:hover { background: #e7ebf0; color: #1f2933; }
.help-tip-btn[aria-expanded="true"] { background: #2a6d3c; color: #fff; border-color: #2a6d3c; }
.help-tip {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  right: 0;
  z-index: 30;
  background: #fff;
  color: #3a4250;
  font-size: 0.85rem;
  line-height: 1.45;
  padding: 0.65rem 0.8rem;
  border: 1px solid #d2d7de;
  border-radius: 0.55rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
}
.help-tip :first-child { margin-top: 0; }
.help-tip :last-child { margin-bottom: 0; }

.ledger-row {
  background: #f9fafb;
  border-radius: 0.55rem;
  padding: 0.25rem 0.6rem;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  border: 1px solid #eef0f3;
}
.row-toggle {
  background: none;
  border: none;
  padding: 0.2rem 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1rem auto 1fr auto;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.row-toggle .caret { color: #8a94a0; display: inline-flex; }
.row-toggle .caret svg { transition: transform 0.15s; }
.ledger-row.expanded .row-toggle .caret svg { transform: rotate(90deg); }

.row-date {
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  color: #1c1c1e;
  /* Fixed-width column (sized for the widest "May 28, 26") so the meta text
     starts at the same x on every row, regardless of month name or whether the
     day is 1 or 2 digits. Tabular figures keep the digits uniform. */
  min-width: 4.9rem;
  font-variant-numeric: tabular-nums;
}
.row-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Reserve two lines of height so single-line rows (Money In without a note)
     match two-line rows, with the fund text vertically centered in the gap —
     consistent row size across the list (mirrors the RN row's minHeight). */
  min-height: 1.95rem;
  line-height: 1.18;
  min-width: 0;
  overflow: hidden;
}
.row-meta .meta-line {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row-meta .meta-line-1 { font-size: 0.85rem; color: #1c1c1e; }
.row-meta .meta-line-2 { font-size: 0.74rem; color: #6c757d; margin-top: 1px; }
.row-amt {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
.row-lock { display: inline-flex; align-items: center; color: #6c757d; flex: none; }
/* The collapsed-row lock only matters while bulk-selecting (rows can't expand
   there, and locked rows will make a bulk edit/delete fail). */
.row-lock-head { display: none; }
.ledger-list.selecting .row-lock-head { display: inline-flex; }
.ledger-row.in  .row-amt { color: #2a6d3c; }
.ledger-row.out .row-amt { color: #b6342a; }

.icon-btn {
  background: none;
  border: none;
  padding: 0.45rem;
  border-radius: 0.4rem;
  color: #5a6573;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-btn:hover { background: #e9eef3; color: #1c1c1e; }

/* Per-row Edit / Delete — right-aligned in the expanded detail (matches the RN
   ledger row), replacing the old inline icon buttons. Edit is navy, Delete red. */
.row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1.1rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid #e6e9ee;
}
.row-action {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  padding: 0.15rem 0.1rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: #1f3d5a;
  cursor: pointer;
}
.row-action svg { width: 16px; height: 16px; }
.row-action.del-btn { color: #b6342a; }

.row-detail {
  grid-column: 1 / -1;
  display: none;
  padding: 0.5rem 0 0.2rem;
  margin-top: 0.35rem;
  border-top: 1px dashed #d1d5db;
}
.ledger-row.expanded .row-detail { display: block; }
.detail-row {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 0.5rem;
  padding: 0.15rem 0;
  font-size: 0.85rem;
}
.detail-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #6c757d;
}
.detail-value { word-break: break-word; }
@media (max-width: 420px) {
  .detail-row { grid-template-columns: 8rem 1fr; }
  .row-toggle { gap: 0.35rem; }
  .ledger-row { padding: 0.25rem 0.5rem; }

  /* Tighten the nav so all tabs + Logout fit on a narrow phone instead of
     the last item clipping at the right edge. overflow-x:auto still scrolls
     as a fallback on anything smaller. */
  .app-nav { gap: 0.1rem; padding: 0.4rem 0.4rem; }
  .app-nav a { padding: 0.45rem 0.55rem; font-size: 0.9rem; }
  .app-nav button.logout { padding: 0.3rem 0.5rem; font-size: 0.85rem; }
}

/* ---------- Dashboard --------------------------------------------------- */
/* A row-by-row 2-column grid (matching the mobile app) so funds pair up into
   tidy rows: paired cells share a row and stretch to equal height. With an odd
   number of funds, the last cell spans the full width (.balance-cell--full) so
   there's no lonely half-row. */
.balance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
/* Odd count with a portion-reserve fund: that fund is ~double height, so it
   spans two rows (top-left) and the rest stack beside it (dense backfill),
   keeping the columns balanced. */
.balance-grid--stack { grid-auto-flow: row dense; }
/* The spanning cell stretches over both rows so its (gray) box reaches the
   bottom of the neighbouring stack; its content stays top-aligned. */
.balance-cell--tall { grid-column: 1; grid-row: 1 / span 2; }
/* Odd count, equal-height cells: the last cell spans the full width. */
.balance-cell--full { grid-column: 1 / -1; }
.balance-cell {
  background: #f9fafb;
  border-radius: 0.6rem;
  padding: 0.75rem;
}
.balance-cell .name {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: #6c757d;
  letter-spacing: 0.4px;
}
.balance-cell .amt {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 0.2rem;
  font-variant-numeric: tabular-nums;
}
.balance-cell.total {
  background: #1f3d5a;
  color: #fff;
  grid-column: 1 / -1;   /* full width */
}
/* Total | Available split shown when a prudent reserve is set: two equal cells
   side by side, spanning the full width below the fund grid. */
.balance-split { grid-column: 1 / -1; display: flex; gap: 0.5rem; }
.balance-split > .balance-cell { flex: 1; }
/* Full-width prudent-reserve bar above the split — matches the Treasurer
   Report's .tr-reserve-row thin amber bar. */
.balance-reserve-bar {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.9rem;
  border-radius: 0.6rem;
  background: #fff4e6;
  border: 1px solid #f3e2c6;
  font-size: 0.92rem;
  font-weight: 600;
}
.balance-reserve-bar > span:first-child { color: #8a6d3b; }
.balance-reserve-bar > span:last-child { color: #a15c00; font-variant-numeric: tabular-nums; white-space: nowrap; }
.balance-cell.total .name { color: #cdd9e6; }
.balance-cell.reserve { background: #fff4e6; }
.balance-cell.reserve .amt { color: #a15c00; }
.balance-cell.reserve .reserve-note {
  font-size: 0.72rem;
  color: #8a6d3b;
  margin-top: 0.2rem;
}
.balance-cell.available { background: #e7f6ec; }
.balance-cell.available .amt { color: #1c7a43; }
/* In-cell reserve breakdown (portion mode: reserve lives inside one fund). */
.balance-cell .reserve-breakdown {
  margin-top: 0.5rem;
  padding-top: 0.45rem;
  border-top: 1px solid #e3e7ec;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.balance-cell .reserve-line {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.balance-cell .reserve-line span:first-child { color: #6c757d; }
.balance-cell .reserve-line span:last-child { color: #a15c00; font-weight: 600; }
.balance-cell .reserve-line.available span:first-child { color: #1c7a43; }
.balance-cell .reserve-line.available span:last-child { color: #1c7a43; }

/* ---------- Treasurer report -------------------------------------------- */
.tr-report { display: flex; flex-direction: column; gap: 0.6rem; }

/* Starting / ending balance: prominent navy rows that bookend the statement. */
.tr-balance {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  border-radius: 0.6rem;
  background: #f1f4f8;
  border: 1px solid #ececf0;
}
.tr-balance-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  color: #5b6b7d;
}
.tr-balance-amt {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f3d5a;
  font-variant-numeric: tabular-nums;
}
.tr-balance.end { background: #eaf0f7; border-color: #cfdbe9; }
.tr-balance.end .tr-balance-amt { font-size: 1.7rem; }

/* The full-report bookends (and only those — the per-fund carousel slides
   deliberately get none of this) carry a navy left accent. When a per-fund
   breakdown sits beneath a bookend, the accent continues down the left and a
   thin gray line closes across the bottom and back up the right, bracketing the
   funds and tying them to the bookend. .has-funds squares the bookend's bottom
   so the box and the bracket read as one shape. */
.tr-bookend-group .tr-balance { border-left: 4px solid #1f3d5a; }
.tr-balance.has-funds {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-right-color: #cdd6e0;
}
/* Per-fund breakdown beneath each Starting/Ending bookend — the bracket. */
.tr-bookend-funds {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  padding: 0.25rem 0.9rem 0.4rem;
  border-left: 4px solid #1f3d5a;
  border-right: 1px solid #cdd6e0;
  border-bottom: 1px solid #cdd6e0;
  border-bottom-left-radius: 0.6rem;
  border-bottom-right-radius: 0.6rem;
}

/* Sections (in / out / available): tinted header + colored left accent. */
.tr-section {
  border: 1px solid #ececf0;
  border-left: 4px solid #ccc;
  border-radius: 0.5rem;
  overflow: hidden;
}
.tr-section-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tr-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.tr-section-sub {
  margin-left: auto;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.72rem;
  color: #97a2af;
}
.tr-lines { padding: 0.4rem 0.8rem 0.6rem; display: flex; flex-direction: column; gap: 0.18rem; }
.tr-line { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.92rem; }
.tr-line > span:first-child { color: #41505f; }
.tr-amt { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.tr-line.sub { padding-left: 0.9rem; font-size: 0.86rem; }
.tr-line.sub > span:first-child { color: #6c757d; }
.tr-subtotal {
  margin-top: 0.3rem;
  padding-top: 0.4rem;
  border-top: 1px dashed #d8dee6;
}
.tr-subtotal > span:first-child { color: #2c3a48; font-weight: 700; }
.tr-fund { margin-bottom: 0.4rem; }
.tr-fund-head { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.92rem; font-weight: 600; }
.tr-fund-head > span:first-child { color: #41505f; }
.tr-empty { color: #97a2af; font-size: 0.88rem; font-style: italic; padding: 0.1rem 0; }

.tr-section.tr-in { border-left-color: #2a6d3c; }
.tr-in .tr-section-head { background: #eef7f0; color: #2a6d3c; }
.tr-in .tr-amt { color: #2a6d3c; }

.tr-section.tr-out { border-left-color: #b6342a; }
.tr-out .tr-section-head { background: #fbeeec; color: #b6342a; }
.tr-out .tr-amt { color: #b6342a; }

.tr-section.tr-available { border-left-color: #1c7a43; }
.tr-available .tr-section-head { background: #e7f6ec; color: #1c7a43; }
.tr-available .tr-amt { color: #1c7a43; }

/* Prudent reserve: amber pill between ending balance and available. */
.tr-reserve-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.9rem;
  border-radius: 0.6rem;
  background: #fff4e6;
  border: 1px solid #f3e2c6;
  font-size: 0.92rem;
  font-weight: 600;
}
.tr-reserve-row > span:first-child { color: #8a6d3b; }
.tr-reserve-row .tr-amt { color: #a15c00; }

/* Treasurer-report carousel: the full report, then one statement per fund, as
   swipeable slides (native scroll-snap) with prev/next + dot navigation. */
.tr-hint {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  color: #6c757d;
  text-align: center;
}
.tr-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  transition: height 0.2s ease;
}
.tr-viewport::-webkit-scrollbar { display: none; } /* WebKit */
/* Slim segmented progress bar across the top — one segment per slide. */
.tr-carousel-top { display: flex; gap: 0.3rem; margin-bottom: 0.75rem; }
.tr-seg {
  flex: 1 1 0;
  height: 4px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #e2e7ee;
  cursor: pointer;
  transition: background 0.15s ease;
}
.tr-seg.active { background: #1f3d5a; }
.tr-track { display: flex; align-items: flex-start; }
.tr-slide {
  flex: 0 0 100%;
  width: 100%;
  scroll-snap-align: start;
}
.tr-slide-head {
  font-size: 0.95rem;
  font-weight: 700;
  color: #1f3d5a;
  margin-bottom: 0.5rem;
}
.tr-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0.7rem;
}
.tr-arrow {
  flex: 0 0 auto;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: 1px solid #d7dde4;
  background: #fff;
  color: #1f3d5a;
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tr-arrow:disabled { opacity: 0.3; cursor: default; }
.tr-dots { display: flex; align-items: center; gap: 0.4rem; }
.tr-dot {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #cdd6e0;
  cursor: pointer;
}
.tr-dot.active { background: #1f3d5a; }

/* Prudent reserve option list (Settings → Group) */
.reserve-options { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.reserve-option {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem;
  border: 1px solid #e3e7ec;
  border-radius: 0.6rem;
  cursor: pointer;
}
.reserve-option.active { border-color: #1f3d5a; background: #f7faff; }
.reserve-option input[type="radio"] { margin-top: 0.2rem; }
.reserve-option-body { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; min-width: 0; }
.reserve-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.reserve-inline select { max-width: 100%; }
.reserve-amt { display: inline-flex; align-items: center; gap: 0.4rem; }
.reserve-amt input { width: 6.5rem; }
.reserve-newfund { width: 12rem; max-width: 100%; }
/* Inactive options sit muted until their radio is chosen. */
.reserve-option:not(.active) .reserve-inline { opacity: 0.55; }
.totals-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.totals-table th, .totals-table td {
  padding: 0.45rem 0.5rem;
  border-bottom: 1px solid #eef0f3;
}
.totals-table td.amt { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.totals-table tfoot td { font-weight: 600; border-top: 2px solid #d1d5db; border-bottom: none; }
.totals-table tr.in  td.amt.in-amt  { color: #2a6d3c; }
.totals-table tr.out td.amt.out-amt { color: #b6342a; }
.totals-table td.amt.in-amt  { color: #2a6d3c; }
.totals-table td.amt.out-amt { color: #b6342a; }

/* Reports with a variable column count (the Money-In source→fund matrix grows a
   column per fund) can outgrow a phone's width. Wrap them so they scroll
   horizontally instead of cramming/wrapping the numbers. Few columns still fill
   the card (min-width:100%); many columns overflow and scroll. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > .totals-table { width: max-content; min-width: 100%; }

/* 13-month meeting-to-meeting tables */
h3.thirteen-account {
  margin: 1rem 0 0.4rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #5a6573;
  border-bottom: 1px solid #eef0f3;
  padding-bottom: 0.25rem;
}
h3.thirteen-account:first-child { margin-top: 0; }
table.thirteen-table { font-size: 0.85rem; }
table.thirteen-table td:first-child, table.thirteen-table th:first-child {
  white-space: nowrap;
}
/* Shrink any totals-style table on phones so 4-5 numeric columns still fit */
@media (max-width: 480px) {
  .totals-table { font-size: 0.78rem; }
  .totals-table th, .totals-table td { padding: 0.35rem 0.25rem; }
}

/* ---------- Settings list ---------------------------------------------- */
.setting-card {
  background: #f9fafb;
  border: 1px solid #eef0f3;
  border-radius: 0.55rem;
  padding: 0.75rem;
  margin-bottom: 0.6rem;
}
.setting-card.archived { background: #f2f3f5; border-style: dashed; }
.setting-card.locked { background: #f7f7fa; opacity: 0.92; }
/* Drag-reorder: handle beside the name field; row follows the pointer on drag. */
.setting-card { position: relative; transition: transform 0.15s ease; }
/* Name field + drag handle on one line, handle vertically centered on the input. */
.setting-card .name-row { display: flex; align-items: center; gap: 0.5rem; }
.setting-card .name-row input { flex: 1 1 auto; min-width: 0; }
.setting-card .drag-handle {
  flex: 0 0 auto;
  cursor: grab;
  touch-action: none;
  user-select: none;
  color: #9aa4b0;
  font-size: 1.2rem;
  line-height: 1;
  padding: 0 0.2rem;
  align-self: center;
}
.setting-card .drag-handle:active { cursor: grabbing; }
.setting-card.dragging {
  z-index: 5;
  opacity: 0.97;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  background: #fff;
  transition: none;
}

/* Compact one-line rows for funds / expenses / sources (edit via modal). */
.setting-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--row-bg, #f9fafb);
  border: 1px solid var(--row-border, #eef0f3);
  border-radius: 0.55rem;
  padding: 0.35rem 0.5rem 0.35rem 0.75rem;
  margin-bottom: 0.4rem;
  position: relative;
  transition: transform 0.15s ease;
  /* Whole row is a long-press drag trigger — don't let a press on the label
     start a text selection / iOS callout before the drag arms. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.setting-row.archived { border-style: dashed; opacity: 0.6; }
.setting-row.locked { opacity: 0.82; }
.setting-row.dragging {
  z-index: 5; background: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22); transition: none;
}
/* Per-list tints: funds green, sources blue, expenses red. */
#accounts-list   { --row-bg: #eef7f0; --row-border: #d3e7da; }
#sources-list    { --row-bg: #eef3fb; --row-border: #d6e2f3; }
#categories-list { --row-bg: #fbeeec; --row-border: #f1d9d5; }
.setting-row-name {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 500;
}
.setting-row-badge { flex: 0 0 auto; }
.setting-row-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 0.15rem; }
.setting-row .drag-handle {
  cursor: grab; touch-action: none; user-select: none;
  color: #9aa4b0; font-size: 1.2rem; line-height: 1; padding: 0 0.2rem;
}
.setting-row .drag-handle:active { cursor: grabbing; }

/* Drag handles: suppress the iOS long-press callout (we use long-press to start
   a drag) and give a brief "press registered" cue while the hold completes. */
[data-drag] { -webkit-touch-callout: none; }
[data-drag].drag-pending {
  color: #2a6d3c;
  transform: scale(1.25);
  transition: transform 0.12s ease, color 0.12s ease;
}

/* Push the left (delete/archive) and right (cancel/save) modal button groups apart. */
.actions-spacer { flex: 1 1 auto; }

/* Compact inline "add new" row: field(s) + a square + button at the end. */
/* Ledger filter actions (Clear) — filters apply live, so there's no Apply. */
.filter-actions { margin-top: 0.6rem; }

/* Collapsible filters panel — same caret + count pattern as the dashboard's
   Customize toggle. The panel starts hidden (.hidden) and expands on click. */
#filters-toggle .cust-caret { display: inline-block; transition: transform 0.15s; }
#filters-toggle[aria-expanded="true"] .cust-caret { transform: rotate(90deg); }
.filter-count {
  display: inline-block;
  margin-left: 0.4rem;
  min-width: 1.1rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #2a6d3c;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
}

/* Fund + Source share a row; when the group has no extra source, Fund spans
   the full width (Source is hidden) — matches the mobile filter sheet. */
.row-2.filter-fund-source:not(.has-source) { grid-template-columns: 1fr; }

/* Type segmented control — the web analogue of the mobile Segmented: a track
   with equal-width segments and a navy active pill. */
.seg-control {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: #e9ecf1;
  border-radius: 8px;
}
.seg-control .seg {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.4rem 0.5rem;
  border: none;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-weight: 600;
  color: #41505f;
  cursor: pointer;
  line-height: 1.2;
}
.seg-control .seg.active {
  background: #1f3d5a;
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.add-row { display: flex; gap: 0.4rem; align-items: stretch; margin-top: 0.55rem; }
.add-row input { flex: 1 1 auto; min-width: 0; }
.add-row input.add-amt { flex: 0 0 8rem; }
.add-plus {
  flex: 0 0 auto;
  width: 2.6rem; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.4rem; line-height: 1; font-weight: 600;
}

.readonly-bal {
  padding: 0.7rem 0.85rem;
  border: 1px solid transparent;
  background: #fff;
  border-radius: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.readonly-bal .amt { font-weight: 600; font-size: 1rem; }
.readonly-bal .muted { display: block; font-size: 0.75rem; }

/* Inbound resting-view status overview (above the "Set up inbound" button). */
.inbound-summary { display: flex; flex-direction: column; gap: 0.45rem; margin: 0.6rem 0 0.2rem; }
.inbound-summary .readonly-bal { border-color: #eef0f3; }

/* Inline copy-to-clipboard: plain value + a small copy-icon button right after
   it (flips to ✓ on success). No box — just text and an icon. */
.copy-field { display: inline-flex; align-items: center; gap: 0.1rem; max-width: 100%; vertical-align: middle; }
span.copy-field code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem; color: #1f2933; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  background: none; padding: 0; border-radius: 0; /* override .muted code etc. */
}
.copy-field.block { display: flex; width: 100%; margin: 0.35rem 0 0.5rem; }
.copy-field.block code { white-space: normal; word-break: break-all; flex: 0 1 auto; font-weight: 600; font-size: 0.95rem; }
.copy-icon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; padding: 0; border: none; background: transparent;
  color: #6b7280; border-radius: 0.35rem; cursor: pointer; line-height: 0;
}
.copy-icon:hover { background: #eef0f3; color: #1f2933; }
.copy-icon.copied { color: #2a6d3c; }

/* Square icon-only button (e.g. the rule delete trashcan). */
.icon-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; padding: 0; border: none; background: transparent;
  color: #6b7280; border-radius: 0.35rem; cursor: pointer; line-height: 0;
}
.icon-btn:hover { background: #eef0f3; color: #1f2933; }
.icon-btn.danger { color: #b6342a; }
.icon-btn.danger:hover { background: #fdecea; color: #b6342a; }
.icon-btn.ok { color: #2a6d3c; }
.icon-btn.ok:hover { background: #e3f3e7; color: #2a6d3c; }

/* Export dropdown (ledger): button + CSV/Excel/PDF menu. */
.export-menu { position: relative; display: inline-block; }
.export-dropdown {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20;
  background: #fff; border: 1px solid #e2e5ea; border-radius: 0.5rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); padding: 0.25rem; min-width: 8.5rem;
}
.export-opt {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 0.45rem 0.6rem; border-radius: 0.35rem; cursor: pointer; font: inherit; color: #1f2933;
}
.export-opt:hover { background: #f1f2f4; }

/* Confirmation modal body (reuses .modal-backdrop/.modal). */
.cm-body .setting-card { margin-bottom: 0.5rem; }
button.linklike { background: none; border: none; color: #2a6d3c; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; }

/* Attention callout inside provider guides (e.g. "Gmail settings are desktop-only"). */
.guide-callout {
  display: flex; align-items: flex-start; gap: 0.5rem;
  background: #eaf2fd; border: 1px solid #cadcf5; border-left: 3px solid #3b82f6;
  border-radius: 0.5rem; padding: 0.6rem 0.75rem; margin: 0 0 0.8rem;
  font-size: 0.86rem; line-height: 1.4; color: #1f2933;
}
.guide-callout svg { flex: 0 0 auto; color: #2563eb; margin-top: 1px; }

/* Loud, hard-to-miss version of the callout — used for the "Gmail forwarding is
   desktop-only" warning, which is its own wizard step so it can't be skimmed past. */
.guide-callout-strong {
  display: flex; align-items: center; gap: 0.85rem;
  background: #fff7e6; border: 1px solid #f3d8a0; border-left: 5px solid #e8920c;
  border-radius: 0.6rem; padding: 1rem 1.1rem; margin: 0.25rem 0 0.5rem;
  color: #5c3b04;
}
.guide-callout-strong svg { flex: 0 0 auto; color: #e8920c; }
.guide-callout-strong b { display: block; font-size: 1.05rem; line-height: 1.35; margin-bottom: 0.25rem; }
.guide-callout-strong span { display: block; font-size: 0.9rem; line-height: 1.45; color: #6b4a14; }

/* Inbound wizard step 1: the Venmo-email field we detect the provider from. */
.provider-detect { margin: 0.3rem 0 0.5rem; }
.provider-detect input {
  width: 100%; box-sizing: border-box;
  padding: 0.5rem 0.65rem; border: 1px solid #cdd4dc; border-radius: 0.5rem; font-size: 0.95rem;
}

.provider-picker { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.3rem 0 0.7rem; }
.guide-steps { margin: 0; padding-left: 1.2rem; }
.guide-steps li { margin-bottom: 0.65rem; line-height: 1.45; }
.guide-steps li .btn { margin: 0.25rem 0.3rem 0 0; vertical-align: middle; }
.guide-steps li.small-note { list-style: none; margin-left: -1.2rem; }

/* Action buttons inside a guide sit on their own line, full button styling. */
.guide-action { margin: 0.5rem 0; }
/* "Copy AI prompt" pairs a copy icon with its label. */
#copy-ai-prompt { display: inline-flex; align-items: center; gap: 0.4rem; }
/* The AI prompt is shown in a read-only box so it's always selectable even if
   the one-tap copy is blocked (some mobile webviews). */
.ai-prompt-text {
  width: 100%; margin: 0.4rem 0 0.3rem; padding: 0.6rem 0.7rem;
  border: 1px solid #d8dce3; border-radius: 0.5rem; background: #f8fafc;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem; line-height: 1.45; color: #1f2933; resize: vertical;
}

/* "Build by hand" / rule criteria — From / Subject on their own indented lines. */
.hand-filter {
  margin: 0.45rem 0; padding-left: 0.85rem; border-left: 2px solid #e2e5ea;
  display: flex; flex-direction: column; gap: 0.35rem;
}
.hand-filter > div { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.hand-label { font-weight: 600; color: #1f2933; }

/* Verified email-address rows: email + badge + inline Remove on one line. */
.fwd-row { display: flex; align-items: center; gap: 0.5rem; }
.fwd-row .amt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fwd-row .badge, .fwd-row .btn { flex: 0 0 auto; }

/* Routing rules: one compact, drag-reorderable row each. */
.rule-row { display: flex; align-items: center; gap: 0.4rem; position: relative; transition: transform 0.15s ease; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* The match-term field must stay selectable/editable despite the row-level none. */
.rule-row input, .rule-row textarea { -webkit-user-select: text; user-select: text; }
.rule-row .drag-handle {
  flex: 0 0 auto; cursor: grab; touch-action: none; user-select: none;
  color: #9aa4b0; font-size: 1.1rem; line-height: 1; padding: 0 0.15rem;
}
.rule-row .drag-handle:active { cursor: grabbing; }
.rule-row .rule-term { flex: 1 1 4rem; min-width: 0; }
.rule-row select { flex: 1 1 5rem; min-width: 0; }
.rule-row .btn { flex: 0 0 auto; }
.rule-row.dragging { z-index: 5; opacity: 0.97; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22); background: #fff; transition: none; }

/* Captured provider confirmation(s) — the "do this now" panel. */
.confirm-panel {
  border: 1px solid #f0d8b0;
  background: #fffaf2;
  border-radius: 0.55rem;
  padding: 0.75rem;
  margin: 0.8rem 0;
}
.confirm-panel .add-heading { margin-top: 0; }

.setting-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.6rem;
}
.small-note {
  font-size: 0.75rem;
  color: #8a94a0;
  font-style: italic;
}
h3.add-heading {
  font-size: 0.9rem;
  margin: 1rem 0 0.5rem;
  color: #5a6573;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.muted code {
  background: #eef0f3;
  padding: 0.05rem 0.3rem;
  border-radius: 0.25rem;
  font-size: 0.85em;
}

/* ---------- Misc -------------------------------------------------------- */
.error-banner {
  background: #fce8e6;
  color: #8a1f17;
  border: 1px solid #f1b4ad;
  border-radius: 0.5rem;
  padding: 0.6rem 0.8rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.success-banner {
  background: #e3f2e6;
  color: #1f5b30;
  border: 1px solid #b8d8c0;
  border-radius: 0.5rem;
  padding: 0.6rem 0.8rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.muted { color: #6c757d; font-size: 0.85rem; }
.center { text-align: center; }
.right { text-align: right; }
.hidden { display: none !important; }

/* ---------- Login ------------------------------------------------------- */
.login-box {
  max-width: 360px;
  margin: 4rem auto 1rem;
  background: #fff;
  padding: 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.login-box h1 {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  text-align: center;
}
.login-logo {
  display: block;
  width: 80%;
  max-width: 240px;
  margin: 0 auto 1.25rem;
}
.login-logo img { display: block; width: 100%; height: auto; }

/* Subscription plan buttons on Settings → Group. */
.billing-plans { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }

/* ---------- Saved-confirmation overlay --------------------------------- */
.checkmark-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.55);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-out;
}
.checkmark-overlay.show { opacity: 1; }
.checkmark-overlay .check-circle {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: #2a6d3c;
  box-shadow: 0 6px 18px rgba(42, 109, 60, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.4);
  opacity: 0;
}
.checkmark-overlay.show .check-circle {
  animation: cm-pop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes cm-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
.checkmark-overlay .check-circle svg { width: 58px; height: 58px; }
.checkmark-overlay .check-circle svg path {
  stroke: white;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
}
.checkmark-overlay.show .check-circle svg path {
  animation: cm-draw 0.38s 0.18s ease-out forwards;
}
@keyframes cm-draw { to { stroke-dashoffset: 0; } }

/* ---------- Modal ------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  /* Track the visual viewport (set by util.js) so the on-screen keyboard
     doesn't cover the modal; falls back to the full viewport. */
  top: var(--modal-top, 0px);
  height: var(--modal-h, 100%);
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1rem;
}
.modal {
  background: #fff;
  border-radius: 0.75rem;
  padding: 1.25rem;
  width: 100%;
  max-width: 460px;
  max-height: min(90vh, calc(var(--modal-h, 100vh) - 2rem));
  overflow-y: auto;
}
.modal.wide { max-width: 640px; }
.modal h2 { margin-top: 0; font-size: 1.1rem; }
.modal .actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* ---------- Phase 2: org switcher, auth tabs, members ----------------- */

/* Lay the org control out at the right of the sticky header. */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.org-name { color: #5a6573; font-size: 0.9rem; }
.org-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #f1f4f7;
  color: #1f3d5a;
  border: 1px solid #cdd4dc;
  border-radius: 0.5rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.9rem;
  cursor: pointer;
  max-width: 55vw;
  /* Let the button shrink below its text width so a long group name
     ellipsizes inside the header instead of spilling off the right edge. */
  min-width: 0;
  overflow: hidden;
}
.org-btn-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;   /* flex child must allow shrink for the ellipsis to engage */
}
/* flex:none keeps the caret visible as the name ellipsizes beside it. */
.org-caret { opacity: 0.8; font-size: 0.75rem; flex: none; }

/* Login: sign-in / sign-up tabs, divider, aux link. */
.auth-tabs { display: flex; gap: 0.25rem; margin-bottom: 1rem; }
.auth-tabs button {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid #cdd4dc;
  background: #f1f4f7;
  color: #5a6573;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  cursor: pointer;
}
.auth-tabs button.active {
  background: #1f3d5a;
  color: #fff;
  border-color: #1f3d5a;
  font-weight: 600;
}
.auth-aux { text-align: center; margin: 0.75rem 0; font-size: 0.9rem; }
.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: #9aa4b0;
  margin: 1rem 0;
  font-size: 0.85rem;
}
.auth-divider::before, .auth-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #e1e6ea;
}
.auth-divider span { padding: 0 0.75rem; }

/* Google's official branded sign-in button (gsi-material-button), light theme,
   stretched full-width to match the login form's block buttons. */
.gsi-material-button {
  -webkit-user-select: none; user-select: none; -webkit-appearance: none;
  background-color: #fff; background-image: none;
  border: 1px solid #747775; border-radius: 4px; box-sizing: border-box;
  color: #1f1f1f; cursor: pointer;
  font-family: "Roboto", -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px; height: 44px; letter-spacing: 0.25px; outline: none;
  overflow: hidden; padding: 0 12px; position: relative; text-align: center;
  transition: background-color .218s, border-color .218s, box-shadow .218s;
  vertical-align: middle; white-space: nowrap; width: 100%;
}
.gsi-material-button .gsi-material-button-icon {
  height: 20px; margin-right: 12px; min-width: 20px; width: 20px;
}
.gsi-material-button .gsi-material-button-content-wrapper {
  align-items: center; display: flex; flex-direction: row; flex-wrap: nowrap;
  height: 100%; justify-content: space-between; position: relative; width: 100%;
}
.gsi-material-button .gsi-material-button-contents {
  flex-grow: 1; font-family: inherit; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; vertical-align: top;
}
.gsi-material-button .gsi-material-button-state {
  transition: opacity .218s; bottom: 0; left: 0; opacity: 0;
  position: absolute; right: 0; top: 0;
}
.gsi-material-button:disabled { cursor: default; background-color: rgba(255,255,255,.38); border-color: rgba(31,31,31,.12); }
.gsi-material-button:disabled .gsi-material-button-contents,
.gsi-material-button:disabled .gsi-material-button-icon { opacity: .38; }
.gsi-material-button:not(:disabled):active .gsi-material-button-state,
.gsi-material-button:not(:disabled):focus .gsi-material-button-state { background-color: #303030; opacity: .12; }
.gsi-material-button:not(:disabled):hover { box-shadow: 0 1px 2px 0 rgba(60,64,67,.30), 0 1px 3px 1px rgba(60,64,67,.15); }
.gsi-material-button:not(:disabled):hover .gsi-material-button-state { background-color: #303030; opacity: .08; }

/* Apple's branded sign-in button: black, system font, same metrics as the
   Google button above. */
.apple-signin-button {
  -webkit-user-select: none; user-select: none; -webkit-appearance: none;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background-color: #000; color: #fff;
  border: 1px solid #000; border-radius: 4px; box-sizing: border-box;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px; font-weight: 500; height: 44px; width: 100%;
  margin-top: 0.6rem; padding: 0 12px; white-space: nowrap;
}
.apple-signin-button:hover { background-color: #1a1a1a; }
.apple-signin-button svg { width: 17px; height: 17px; display: block; flex: none; margin-top: -2px; }

/* Members card + onboarding invite rows. */
.member-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #eef1f4;
}
.member-row:last-child { border-bottom: 0; }
/* Pending-invite rows carry an email + badge + Cancel. On narrow screens give
   the email its own full-width line and let the badge + Cancel sit below it. */
.member-row--editable { flex-wrap: wrap; }
.member-row--editable .member-email { flex-basis: 100%; }
/* Owner's managed rows: email, then the pencil right after it, with the role
   badge pushed to the far right. The email shrinks (ellipsis) before anything
   else so the pencil stays beside it. */
.member-row--managed .member-email { flex: 0 1 auto; }
.member-row--managed .member-edit { margin-left: 0.1rem; color: #4a86c8; }
.member-row--managed .member-edit:hover { background: #eaf1f8; color: #3a72b0; }
.member-row--managed .member-role-badge { margin-left: auto; }

/* Manage-member dialog (opened from a member row's pencil). */
.md-email { margin: -0.25rem 0 0.9rem; word-break: break-all; }
.md-actions { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.9rem; }
.member-email {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.95rem;
}
.member-role-badge {
  font-size: 0.8rem;
  color: #5a6573;
  background: #eef1f4;
  padding: 0.2rem 0.5rem;
  border-radius: 0.4rem;
  text-transform: capitalize;
}
/* "Switch" action in the group switcher: match the owner/current badge size so
   the row reads as evenly-weighted chips rather than a small button next to a
   small badge. */
.member-switch-btn {
  font-size: 0.8rem;
  padding: 0.2rem 0.5rem;
  border-radius: 0.4rem;
  line-height: 1.2;
}
.member-role {
  padding: 0.3rem 0.4rem;
  border-radius: 0.4rem;
  border: 1px solid #cdd4dc;
  font-size: 0.85rem;
}
/* Equal-width owner-action buttons (Make owner / Remove). Keep each on one line
   (don't let the flex item shrink and wrap "Make owner" to two rows). */
.member-action {
  min-width: 92px;
  text-align: center;
  white-space: nowrap;
  flex-shrink: 0;
}
.invite-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0;
}
.invite-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

/* Every drag handle, regardless of list. iOS needs the -webkit- variants: without
   -webkit-touch-callout/-webkit-user-select, a press-and-hold fires the native
   text-selection magnifier, which both highlights text AND cancels the pointer
   sequence so the reorder never arms. touch-action:none keeps the hold from
   scrolling. */
[data-drag] {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* While a row is actively dragging, suppress selection across the row too. */
.dragging, .dragging * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Group card: danger-zone separator + type-to-confirm input. */
.section-sep {
  border: 0;
  border-top: 1px solid #eef1f4;
  margin: 1.25rem 0 0.75rem;
}
.cd-require, .cd-code {
  width: 100%;
  margin-top: 0.75rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid #cdd4dc;
  border-radius: 0.5rem;
  font-size: 1rem;
  box-sizing: border-box;
}
.cd-code { letter-spacing: 3px; }
.cd-code-label {
  display: block; margin-top: 0.75rem; font-size: 0.85rem; color: #56606b;
}
.cd-code-label + .cd-code { margin-top: 0.25rem; }

/* ---------- Onboarding wizard ----------------------------------------- */
.login-box.onboarding { max-width: 560px; text-align: left; }
.login-box.onboarding > h1 { text-align: center; }
.ob-progress {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #9aa4b0;
  margin-bottom: 0.25rem;
}
.ob-title { margin: 0 0 0.4rem; font-size: 1.2rem; }
.guide-instruction { font-size: 1.02rem; line-height: 1.5; margin: 0 0 0.5rem; }
.ob-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}
.editable-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.editable-row input { flex: 1; }
.editable-row.locked input { background: #f1f4f7; color: #5a6573; }
.icon-x {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: 1px solid #cdd4dc;
  background: #fff;
  border-radius: 0.5rem;
  font-size: 1.2rem;
  line-height: 1;
  color: #b6342a;
  cursor: pointer;
}
.starter-choices { display: flex; flex-direction: column; gap: 0.6rem; }
.starter-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  text-align: left;
  padding: 0.85rem 1rem;
  border: 1px solid #cdd4dc;
  border-radius: 0.6rem;
  background: #fff;
  cursor: pointer;
}
.starter-choice:hover { border-color: #2a6d3c; background: #f7faf8; }
.starter-choice.active { border-color: #1f3d5a; background: #f7faff; }
.starter-choice:disabled { opacity: 0.6; cursor: default; }
.sc-title { font-weight: 600; font-size: 1rem; }
.sc-desc { font-size: 0.85rem; color: #5a6573; }

/* ---------- Settings tabs --------------------------------------------- */
/* Wrapper provides the edge fades that hint at off-screen tabs. */
.settings-tabs-wrap { position: relative; margin-bottom: 1rem; }
.settings-tabs-wrap::before,
.settings-tabs-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 1;
}
.settings-tabs-wrap::before { left: 0;  background: linear-gradient(to right, #f4f5f7, rgba(244,245,247,0)); }
.settings-tabs-wrap::after  { right: 0; background: linear-gradient(to left,  #f4f5f7, rgba(244,245,247,0)); }
.settings-tabs-wrap.fade-left::before  { opacity: 1; } /* more tabs to the left  */
.settings-tabs-wrap.fade-right::after  { opacity: 1; } /* more tabs to the right */

.settings-tabs {
  display: flex;
  gap: 0.15rem;
  overflow-x: auto;
  overflow-y: hidden;             /* don't let the strip become a vertical scroller */
  touch-action: pan-x;            /* a vertical drag scrolls the page, not the tabs */
  overscroll-behavior-x: contain;
  border-bottom: 1px solid #e1e6ea;
  -webkit-overflow-scrolling: touch;
  /* Keep horizontal scrolling on narrow screens but hide the scrollbar. */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* old Edge/IE */
}
.settings-tabs::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.settings-tabs button {
  flex: 0 0 auto;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 0.6rem 0.85rem;
  font-size: 0.95rem;
  color: #5a6573;
  cursor: pointer;
  white-space: nowrap;
}
.settings-tabs button.active {
  color: #1f3d5a;
  border-bottom-color: #2a6d3c;
  font-weight: 600;
}
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Mobile section picker: replaces the tab strip on narrow screens. A "Section"
   label marks what the dropdown is; the select gets a custom caret since the
   base select styling strips the native one. */
.settings-section-picker {
  display: none;                 /* shown on mobile by the media query below */
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.settings-section-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #5a6573;
  white-space: nowrap;
}
.settings-tab-select {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  padding-right: 2.25rem;
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a6573' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
@media (max-width: 640px) {
  .settings-tabs-wrap { display: none; }        /* hide the tab strip */
  .settings-section-picker { display: flex; }   /* show the dropdown  */
}

/* ---------- Inbound "needs review" banner + dialog -------------------- */
.review-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: #fff4e5;
  border-bottom: 1px solid #f3d9b0;
  color: #8a5a16;
  padding: 0.6rem 1rem;
  font-size: 0.92rem;
  cursor: pointer;
}
.review-banner:hover { background: #ffefd6; }
.review-banner-cta { font-weight: 700; white-space: nowrap; }

#review-list { max-height: 60vh; overflow-y: auto; }
.review-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid #eef0f3;
}
.review-item-info { min-width: 0; }
.review-item-actions { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.review-item-actions select { width: auto; min-width: 7rem; padding: 0.45rem 0.6rem; }
@media (max-width: 560px) {
  .review-item { flex-direction: column; align-items: stretch; }
  .review-item-actions { justify-content: flex-end; }
  .review-item-actions select { flex: 1; }
}

/* ---------- Ownership-request banner + recovery toggle ---------------- */
.ownership-banner {
  background: #fff8e6;
  border-bottom: 1px solid #f0e0b0;
  color: #5a4a00;
}
.ob-item {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
}
.ob-item > span:first-child { flex: 1; min-width: 200px; }
.ob-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

/* Pending-invitation banner — same shape as the ownership banner, tinted
   blue/green so it reads as a friendly invite rather than an alert. */
.invites-banner {
  background: #eaf3ee;
  border-bottom: 1px solid #c7e0d2;
  color: #1e4d34;
}
.ib-item {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
}
.ib-item > span:first-child { flex: 1; min-width: 200px; }
.ib-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

.toggle-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  cursor: pointer;
}
.toggle-row input[type="checkbox"] {
  width: auto;
  min-width: 0;
  margin: 0;
  -webkit-appearance: auto;
  appearance: auto;
}

/* --- Inbound payments settings card ------------------------------------- */
.row-3 { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.5rem; align-items: end; }
.row-3 > * { min-width: 0; }
.form-row.end { display: flex; flex-direction: column; justify-content: flex-end; }
/* The "Send code" action sizes to its label, and the email field takes the
   rest of the row (instead of the default 1fr 1fr split). */
.fwd-add-row { grid-template-columns: 1fr auto; }
#fwd-add { align-self: flex-start; }
.reorder { flex-direction: row; gap: 0.35rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all; }
.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  margin-left: 0.4rem;
  vertical-align: middle;
}
.badge.ok   { background: #e3f3e7; color: #2a6d3c; }
.badge.warn { background: #fdeede; color: #9a5b18; }

@media (max-width: 560px) {
  .row-3 { grid-template-columns: 1fr; }
}

/* --- Dashboard customize / focus ---------------------------------------- */
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.card-head h2 { margin: 0; }
.focus-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  background: none;
  border: 1px solid #d8dce3;
  color: #6b7280;
  border-radius: 6px;
  padding: 5px 7px;
  cursor: pointer;
}
.focus-btn:hover { background: #f1f2f4; color: #1f2933; }
/* Action button cluster on the right of a card heading (share + focus). */
.card-actions { display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
/* "Share / save as PDF" button — mirrors the focus button's styling. */
.share-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  background: none;
  border: 1px solid #d8dce3;
  color: #6b7280;
  border-radius: 6px;
  padding: 5px 7px;
  cursor: pointer;
}
.share-btn:hover { background: #f1f2f4; color: #1f2933; }
/* While the PDF is being generated, dim the button and ignore further taps. */
.share-btn.is-busy { opacity: 0.5; pointer-events: none; }
/* Disable the ~300ms double-tap-zoom delay so taps register instantly. */
.share-btn, .focus-btn { touch-action: manipulation; }

/* --- Per-card "share as PDF" -------------------------------------------- */
/* Header rendered above the card in the off-screen PDF stage (dashboard-share.js). */
.pdf-head { margin: 0 0 16px; }
.pdf-head h1 { font-size: 20px; margin: 0 0 2px; }
.pdf-head .sub { color: #6b7280; font-size: 12px; }
/* Active (this card is the one being focused) — tap again to exit. */
[data-card].focus-target .focus-btn {
  background: #2a6d3c;
  border-color: #2a6d3c;
  color: #fff;
}
.focus-icon-btn { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
/* Active in the customize panel (its card is the one being focused). */
.focus-icon-btn.is-focused {
  background: #2a6d3c;
  border-color: #2a6d3c;
  color: #fff;
}
.card-hidden { display: none !important; }

/* Customize button expand/collapse caret. */
#customize-toggle .cust-caret { display: inline-block; transition: transform 0.15s; }
#customize-toggle[aria-expanded="true"] .cust-caret { transform: rotate(90deg); }

/* Focus mode: show only the focused card, overriding any persistent hide. */
#cards.focusing > [data-card] { display: none !important; }
#cards.focusing > [data-card].focus-target { display: block !important; }

.card-prefs { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.card-pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid #eef0f3;
  /* The whole row is a drag trigger (long-press), so a press on the title must
     not start a text selection / iOS callout before the drag arms. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.card-pref-row { position: relative; background: #fff; transition: transform 0.15s ease; }
.card-pref-row .drag-handle {
  flex: 0 0 auto;
  cursor: grab;
  touch-action: none;
  user-select: none;
  color: #9aa4b0;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.15rem;
}
.card-pref-row .drag-handle:active { cursor: grabbing; }
.card-pref-row.dragging {
  z-index: 5;
  opacity: 0.97;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  border-radius: 0.4rem;
  transition: none;
}
/* Show/hide eye toggle + title — mirrors the mobile customize sheet: an eye
   (visible) / eye-off (hidden) icon, with the title greyed + struck through
   when the card is hidden. */
.card-pref-row .eye-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  color: #2a3b4d;
  line-height: 0;
}
.card-pref-row .eye-btn:hover { color: #14202c; }
.card-pref-title { flex: 1 1 auto; min-width: 0; font-weight: 600; color: #1f2a37; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-pref-row.is-hidden .eye-btn { color: #9aa4b0; }
.card-pref-row.is-hidden .card-pref-title { color: #9aa4b0; text-decoration: line-through; }
.card-pref-controls { display: flex; gap: 0.35rem; flex-shrink: 0; }
.customize-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; }

.focus-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: #eef3ff;
  border: 1px solid #cdddff;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.92rem;
}

/* "Run reports as of" control inside the Customize panel. */
.customize-asof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0 0.75rem;
  font-size: 0.9rem;
  color: #41505f;
}
.customize-asof label { font-weight: 600; }
.customize-asof input[type="date"] {
  padding: 0.35rem 0.5rem;
  border: 1px solid #cfd6df;
  border-radius: 6px;
  font: inherit;
}
.customize-asof-hint { margin: -0.4rem 0 0.75rem; font-size: 0.8rem; }

/* Amber "showing historical data" banner (distinct from the blue focus bar). */
.asof-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: #fff4e6;
  border: 1px solid #f3e2c6;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: #8a6d3b;
}

/* ---------- Collapsible dashboard subsections -------------------------- */
.subsection { border-top: 1px solid #eef0f3; }
.subsection:first-of-type { border-top: none; }
.sub-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  padding: 0.7rem 0;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #5a6573;
  cursor: pointer;
  text-align: left;
}
.sub-caret { display: inline-block; transition: transform 0.15s; color: #8a94a0; }
.subsection:not(.collapsed) .sub-caret { transform: rotate(90deg); }
.sub-body { padding-bottom: 0.5rem; }
.subsection.collapsed .sub-body { display: none; }

/* ---------- Help tab: bug report / feature request ---------------------- */
.help-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
/* Match .card .meta's specificity (and come later) so this wins over its
   negative margin-top — the contact line needs clear space below the buttons. */
.card .help-contact { margin-top: 1.75rem; }
.help-action-btn {
  flex: 1 1 220px;
  display: flex; align-items: center; gap: 0.75rem;
  text-align: left; padding: 0.85rem 1rem; height: auto;
}
.help-action-icon { font-size: 1.5rem; line-height: 1; flex: 0 0 auto; }
.help-action-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.help-action-title { font-weight: 600; color: #1f2933; }
.help-action-sub { font-size: 0.8rem; color: #6c757d; font-weight: 400; }

/* Feedback modal: the "we'll attach context automatically" note under the field. */
.feedback-modal .fb-context { margin: 0.1rem 0 0; }