/* ==========================================================================
   Kinlend app — stylesheet
   Built entirely on the canonical Warm Clay tokens (../tokens.css).
   Reuses the brand packet's documented components (buttons, fields, badges,
   the loan card, avatar, meter) and adds the app's own layout.
   No new colors — only var(--...) tokens.
   ========================================================================== */

/* ---- reset & base (mirrors the brand packet) ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--color-primary); text-underline-offset: 2px; }
::selection { background: var(--color-peach); color: var(--color-text); }

/* A visually-hidden helper for screen-reader-only text. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Skip link — first focusable element, hidden until focused. */
.skip-link {
  position: absolute; left: var(--space-4); top: -48px;
  background: var(--color-card); color: var(--color-primary);
  border: var(--border-default); border-radius: var(--radius-md);
  padding: 10px 16px; z-index: 20; transition: top .16s ease-out;
}
.skip-link:focus-visible { top: var(--space-4); outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ---- type primitives (shared with packet) ---- */
.overline {
  font-size: var(--text-overline-size);
  line-height: var(--text-overline-line);
  font-weight: var(--text-overline-weight);
  letter-spacing: var(--text-overline-spacing);
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
  text-transform: none;
}
h1 { font-size: var(--text-h1-size); line-height: var(--text-h1-line); font-weight: var(--text-h1-weight); letter-spacing: var(--text-h1-spacing); margin: 0; }
h2 { font-size: var(--text-h2-size); line-height: var(--text-h2-line); font-weight: var(--text-h2-weight); letter-spacing: var(--text-h2-spacing); margin: 0 0 var(--space-3); }
h3 { font-size: var(--text-h3-size); line-height: var(--text-h3-line); font-weight: var(--text-h3-weight); letter-spacing: var(--text-h3-spacing); margin: 0 0 var(--space-3); }
/* Headings carry the brand DISPLAY font (Geist; Inter is the fallback stand-in).
   Heading classes are included because several sit on div/span, not h1–h3. */
h1, h2, h3, h4, .page-title, .section-title, .empty-title, .sign-name {
  font-family: var(--font-display);
}
h4 { font-size: var(--text-h4-size); line-height: var(--text-h4-line); font-weight: var(--text-h4-weight); margin: 0 0 var(--space-2); }
p  { margin: 0 0 var(--space-4); }
.small { font-size: var(--text-small-size); line-height: var(--text-small-line); }
.muted { color: var(--color-text-muted); }
.mono  { font-family: var(--font-mono); font-size: var(--text-mono-size); }

/* h1/h2 receive focus on route change; hide the focus ring (focus moves silently). */
h1:focus, h2:focus { outline: none; }

/* ==========================================================================
   APP SHELL — header, main, footer
   ========================================================================== */
.app-header {
  background: var(--color-card);
  border-bottom: var(--border-default);
  /* A soft anchor shadow so the sticky bar reads as a layer above the page. */
  box-shadow: 0 6px 16px -14px rgba(58, 30, 18, 0.28);
  position: sticky;
  top: 0;
  z-index: 10;
}
.header-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.brand-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-text);
  border-radius: var(--radius-md);
  padding: 4px 6px;
}
.brand-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.wordmark {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.6px;
}
/* ---- primary nav ---- */
.header-nav { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: var(--text-small-size);
  font-weight: 500;
  text-decoration: none;
  color: var(--color-text-muted);
  border: 1px solid transparent;
  transition: background-color .16s ease-out, color .16s ease-out, border-color .16s ease-out;
}
.nav-link:hover { background: var(--color-surface); color: var(--color-text); }
.nav-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* Gated links (Dashboard / New loan / Settings) carry the `hidden` attr until
   sign-in — but .nav-link's own `display` overrides the default [hidden], so they
   leaked into the signed-out nav. Honor hidden explicitly (mirrors .org-switcher). */
.nav-link[hidden] { display: none; }
/* Active route — solid peach pill in clay, the one highlighted item. */
.nav-link.is-active { background: var(--color-peach); color: var(--color-primary-deep); }
/* The "New loan" call-to-action stays outlined in clay, and fills when active. */
.nav-link.nav-cta { color: var(--color-primary); border-color: var(--color-primary); }
.nav-link.nav-cta:hover { background: var(--color-peach); color: var(--color-primary-deep); }
.nav-link.nav-cta.is-active { background: var(--color-primary); color: var(--color-bg); border-color: var(--color-primary); }

/* ---- mobile menu toggle (hidden on wide screens) ---- */
.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
  background: transparent;
  border: var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
}
.nav-toggle span { display: block; width: 18px; height: 2px; background: var(--color-text); border-radius: var(--radius-pill); }
.nav-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.app-main {
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-8);
  min-height: 60vh;
}

.app-footer {
  border-top: var(--border-default);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
}
.app-footer .word { font-family: var(--font-display); font-weight: 600; color: var(--color-text); }
.app-footer p { max-width: 60ch; margin: 0 auto var(--space-2); }
/* Footer nav: the secondary/info destinations (esp. the path to them on phones,
   where the header hamburger is hidden in favor of the bottom tab bar). */
.app-footer-nav { margin-top: var(--space-3); line-height: 2; }
.app-footer-nav a { color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 3px; }
.app-footer-nav a:hover { color: var(--color-primary); }

/* ==========================================================================
   PAGE LAYOUT
   ========================================================================== */
.page { display: block; animation: page-enter var(--dur-base) var(--ease-out) both; }
@keyframes page-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.page-title {
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line);
  font-weight: var(--text-h2-weight);
  letter-spacing: var(--text-h2-spacing);
  margin: 0;
}
.lead-muted {
  font-size: var(--text-lead-size);
  line-height: var(--text-lead-line);
  color: var(--color-text-muted);
  max-width: 60ch;
  margin: 0 0 var(--space-6);
}

/* ---- generic grid ---- */
.grid { display: grid; gap: var(--space-4); }
.metrics-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: var(--space-6); }
.loans-grid   { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-items: start; }

/* ==========================================================================
   CARD (shared)
   ========================================================================== */
.card {
  background: var(--color-card);
  border: var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

/* ==========================================================================
   BUTTONS (from the brand packet, verbatim tokens) + a danger variant
   ========================================================================== */
.btn {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  font-weight: 500;
  line-height: 1;
  padding: 13px var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.btn:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.btn-primary { background: var(--color-primary); color: var(--color-bg); border-color: var(--color-primary); box-shadow: var(--shadow-soft); }
.btn-primary:hover { background: var(--color-primary-deep); border-color: var(--color-primary-deep); box-shadow: var(--shadow-lift); }
.btn-secondary { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn-secondary:hover { background: var(--color-peach); }
.btn-ghost { background: transparent; color: var(--color-primary); border-color: transparent; }
.btn-ghost:hover { background: var(--color-surface); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed;
  background: var(--color-surface); color: var(--color-text-muted); border-color: var(--color-border);
}
.btn-primary:disabled { background: var(--color-surface); }
/* Danger variant — outline style in the danger color, used sparingly. */
.btn.btn-danger { color: var(--color-danger); border-color: var(--color-danger); background: transparent; }
.btn.btn-danger:hover { background: var(--color-danger-tint); }

/* ==========================================================================
   FORM FIELDS (from the brand packet) + select / textarea parity
   ========================================================================== */
.field { margin-bottom: var(--space-5); }
.field label { display: block; font-size: var(--text-small-size); font-weight: 500; margin-bottom: 6px; }
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  padding: 12px 14px;
  min-height: 44px;
  border: var(--border-default);
  border-radius: var(--radius-md);
  background: var(--color-card);
  color: var(--color-text);
}
.field textarea { min-height: 88px; resize: vertical; line-height: var(--text-body-line); }
.field select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
                    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px;
}
.field input::placeholder, .field textarea::placeholder { color: var(--color-text-muted); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-accent);
}
.field .help { font-size: var(--text-small-size); color: var(--color-text-muted); margin-top: 6px; }
.field.error input, .field.error select, .field.error textarea { border-color: var(--color-danger); }
.field.error .help { color: var(--color-danger); }

/* Two fields side by side (term length + unit). */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

.form-actions {
  display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center;
  margin-top: var(--space-5);
}
.fineprint {
  font-size: var(--text-small-size);
  color: var(--color-text-muted);
  margin: var(--space-5) 0 0;
  max-width: 60ch;
}

/* ==========================================================================
   BADGES (from the brand packet) + a Draft variant
   ========================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-small-size); font-weight: 500;
  padding: 6px 12px; border-radius: var(--radius-pill);
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: var(--radius-pill); background: currentColor; }
.badge-track { background: var(--color-success-tint); color: var(--color-success); }
/* Deeper clay text on the warm tint passes AA (5.5:1) where the warning color
   alone (3.26:1) did not — the colored dot keeps the warning hue. */
.badge-due   { background: var(--color-warning-tint); color: var(--color-primary-deep); }
.badge-due::before { background: var(--color-warning); }
.badge-paid  { background: var(--color-peach); color: var(--color-primary-deep); }
.badge-over  { background: var(--color-danger-tint); color: var(--color-danger); }
/* Draft — neutral sand, for an unsigned loan. */
.badge-draft { background: var(--color-surface); color: var(--color-text-muted); }

/* ==========================================================================
   AVATAR + METER (from the brand packet)
   ========================================================================== */
.avatar {
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  background: var(--color-peach); color: var(--color-primary-deep);
  display: flex; align-items: center; justify-content: center;
  font-weight: 500; flex: none;
}
.meterlabel {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px; font-size: var(--text-small-size);
}
.meterlabel strong { font-weight: 500; font-size: var(--text-body-size); }
.meter {
  height: 8px; background: var(--color-peach); border-radius: var(--radius-pill);
  overflow: hidden; margin-bottom: var(--space-5);
}
.meter > span { display: block; height: 100%; background: linear-gradient(90deg, var(--color-accent), var(--color-primary)); border-radius: var(--radius-pill); transition: width var(--dur-slow) var(--ease-out); }

/* ==========================================================================
   LOAN CARD (signature component, from the brand packet)
   The card is an anchor so the whole thing is clickable + keyboard-focusable.
   ========================================================================== */
.loancard {
  background: var(--color-card); border: var(--border-default);
  border-radius: var(--radius-xl); padding: var(--space-5); box-shadow: var(--shadow-card);
}
.loancard-link {
  display: block; text-decoration: none; color: inherit;
  transition: border-color .16s ease-out, box-shadow .16s ease-out, transform .16s ease-out;
}
.loancard-link:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
.loancard-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.loancard .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }
.loancard .brand { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: var(--text-small-size); }
.loancard .who { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.loancard .name { font-weight: 500; font-size: var(--text-h4-size); }
.loancard .next {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--color-surface); border-radius: var(--radius-md);
  padding: 12px 14px; margin-bottom: 0;
}
.loancard .next .lab { font-size: 12px; color: var(--color-text-muted); }
.loancard .next .val { font-weight: 500; }

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.empty {
  text-align: center;
  padding: var(--space-8) var(--space-5);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
}
.empty-title { margin: var(--space-2) 0 0; }
.empty-body { color: var(--color-text-muted); max-width: 54ch; margin: 0 0 var(--space-3); }

/* ==========================================================================
   METRIC CARDS
   ========================================================================== */
.metric { padding: var(--space-5); }
.metric-label { font-size: var(--text-small-size); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.metric-value { font-size: var(--text-h3-size); font-weight: var(--text-h3-weight); letter-spacing: var(--text-h3-spacing); color: var(--color-primary-deep); }

/* ==========================================================================
   CREATE — layout, summary, mini schedule
   ========================================================================== */
.create-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.form-card { margin: 0; }
.summary-card { position: sticky; top: calc(64px + var(--space-4)); }
.summary-plain {
  font-size: var(--text-lead-size); line-height: 1.5; font-weight: 400;
  margin: 0 0 var(--space-5);
}
.summary-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-3); margin-bottom: var(--space-5);
}
.summary-stat {
  background: var(--color-surface); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex; flex-direction: column; gap: 2px;
}
.summary-stat-label { font-size: 12px; color: var(--color-text-muted); }
.summary-stat-value { font-weight: 500; font-size: var(--text-h4-size); }
.summary-sub { font-weight: 500; font-size: var(--text-small-size); margin: 0 0 var(--space-2); }

/* Mini schedule (first 3 rows) + full schedule share table base styles. */
.mini-schedule, .schedule-table { width: 100%; border-collapse: collapse; font-size: var(--text-small-size); }
.mini-schedule th, .mini-schedule td { text-align: right; padding: 8px 6px; border-bottom: var(--border-default); }
.mini-schedule th:first-child, .mini-schedule td:first-child,
.mini-schedule th:nth-child(2), .mini-schedule td:nth-child(2) { text-align: left; }
.mini-schedule thead th { color: var(--color-text-muted); font-weight: 500; font-size: 12px; }
.mini-schedule tbody tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   DETAIL — overview, schedule table, danger zone
   ========================================================================== */
.detail-overview .who { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.detail-overview .name { font-weight: 500; font-size: var(--text-h4-size); }
.status-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); }
.memo-note { margin-top: var(--space-5); padding-top: var(--space-4); border-top: var(--border-default); }
.memo-text { margin: var(--space-1) 0 0; max-width: 60ch; }

.action-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0; }
/* Quiet variant: inline action cluster inside a row/card, no big block margin. */
.action-row-quiet { margin: 0; gap: var(--space-2); align-items: center; }
.section-title { font-size: var(--text-h3-size); font-weight: var(--text-h3-weight); letter-spacing: var(--text-h3-spacing); margin: var(--space-6) 0 var(--space-2); }

/* The schedule table scrolls horizontally on small screens. */
.table-wrap { padding: 0; overflow-x: auto; margin-top: var(--space-4); }
.schedule-table { min-width: 560px; }
.schedule-table th, .schedule-table td {
  text-align: right; padding: 12px var(--space-4); border-bottom: var(--border-default); white-space: nowrap;
}
.schedule-table th:first-child, .schedule-table td:first-child,
.schedule-table th:nth-child(2), .schedule-table td:nth-child(2),
.schedule-table th:nth-child(3), .schedule-table td:nth-child(3) { text-align: left; }
.schedule-table thead th { color: var(--color-text-muted); font-weight: 500; font-size: 13px; position: sticky; top: 0; background: var(--color-card); }
.schedule-table tbody tr:last-child td { border-bottom: 0; }
/* Generous cell padding plus a 24px control gives the per-row "paid" checkbox
   an effective tap target near the 44px guideline, while keeping the visual
   control compact enough for the horizontally-scrolling schedule table. */
.schedule-table .cell-paid { text-align: center; padding: 12px var(--space-4); }
.schedule-table input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--color-primary); cursor: pointer; }
.schedule-table input[type="checkbox"]:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
/* A subtle background fade when a row flips to paid registers the change. */
.schedule-table tbody tr { transition: background-color .15s ease-out; }
.row-paid { color: var(--color-text-muted); background: var(--color-surface); }
/* The next-due row carries a readable "next" text tag (not color alone); the
   clay left bar + faint surface tint reinforce it non-chromatically. */
.row-next td { box-shadow: inset 3px 0 0 var(--color-primary); background: var(--color-surface); }
.next-tag {
  display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 500;
  color: var(--color-primary-deep); background: var(--color-peach);
  padding: 2px 8px; border-radius: var(--radius-pill); vertical-align: middle;
}

.danger-zone { margin-top: var(--space-7); border-color: var(--color-border); }
.danger-title { font-size: var(--text-h4-size); margin-bottom: var(--space-2); }
.confirm-text { color: var(--color-danger); font-weight: 500; font-size: var(--text-small-size); margin-right: var(--space-2); }

/* ==========================================================================
   AGREEMENT — document, signatures
   ========================================================================== */
.agreement-doc { background: var(--color-card); padding: var(--space-6); }
.agreement-pre {
  white-space: pre-wrap; word-wrap: break-word;
  font-family: var(--font-body); font-size: var(--text-body-size);
  line-height: 1.7; margin: 0; color: var(--color-text);
}
.sign-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.sign-card { margin: 0; }
.sign-name { font-size: var(--text-h4-size); margin: 0 0 var(--space-4); }
.sign-body { display: block; }
.check-row {
  display: flex; align-items: center; gap: var(--space-2); min-height: 44px;
  font-size: var(--text-small-size); margin-bottom: var(--space-2); cursor: pointer;
}
.check-row input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--color-primary); flex: none; cursor: pointer; }
.check-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.sign-done {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--color-success-tint); border-radius: var(--radius-md); padding: var(--space-4);
}
.sign-check { font-weight: 500; color: var(--color-success); display: flex; align-items: center; gap: 6px; }
.sign-check::before { content: "✓"; font-weight: 700; }

.sign-banner {
  margin-top: var(--space-5); padding: var(--space-4) var(--space-5);
  border: var(--border-default); border-radius: var(--radius-lg);
  background: var(--color-surface);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
}
.sign-banner.signed { background: var(--color-success-tint); border-color: transparent; }
.sign-banner strong { color: var(--color-success); font-weight: 500; }

/* ==========================================================================
   SHARED PAGE SCAFFOLD (v0.2)
   Classes the standalone pages (types, tools, faq, about, settings) reuse.
   Built only on tokens; page agents must NOT edit this file — compose these.
   ========================================================================== */

/* pageHeader() wrapper: keeps the head row and its lead paragraph together. */
.page-head-wrap { display: block; }
.page-head-wrap .lead-muted { margin-top: calc(-1 * var(--space-3)); }

/* sectionCard() title. */
.section-card-title { font-size: var(--text-h4-size); font-weight: 500; margin: 0 0 var(--space-3); }

/* Long-form reading column (about / legal copy). */
.prose { max-width: 64ch; }
.prose p { color: var(--color-text); }
.prose p:last-child { margin-bottom: 0; }
.prose h3 { margin-top: var(--space-5); }
.prose ul { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.prose li { margin-bottom: var(--space-2); }
.prose a { color: var(--color-primary); }

/* A responsive auto-fit card grid for galleries and dashboards of cards. */
.card-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  align-items: start;
}
.card-grid.cols-2 { grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); }

/* galleryCard() — a clickable preset/feature tile. */
.gallery-card {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  background: var(--color-card);
  border: var(--border-default);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  color: inherit;
  transition: border-color .16s ease-out, transform .16s ease-out, box-shadow .16s ease-out;
}
.gallery-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(58, 30, 18, 0.08);
}
.gallery-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.gallery-icon {
  flex: none;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--color-peach);
  color: var(--color-primary-deep);
}
.gallery-body { min-width: 0; }
.gallery-title { font-weight: 500; font-size: var(--text-h4-size); margin-bottom: var(--space-1); }
.gallery-blurb { margin: 0 0 var(--space-2); font-size: var(--text-small-size); line-height: 1.5; }
.gallery-meta {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 500;
  color: var(--color-primary-deep); background: var(--color-peach);
  padding: 3px 10px; border-radius: var(--radius-pill);
}

/* accordionItem() — native <details>/<summary> FAQ list. */
.accordion { display: flex; flex-direction: column; gap: var(--space-3); }
.accordion-item {
  background: var(--color-card);
  border: var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.accordion-summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  list-style: none;
  font-weight: 500;
}
.accordion-summary::-webkit-details-marker { display: none; }
.accordion-summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.accordion-q { font-size: var(--text-body-size); }
/* A +/- mark drawn from a single rotating bar over a fixed bar. */
.accordion-mark { position: relative; flex: none; width: 16px; height: 16px; }
.accordion-mark::before, .accordion-mark::after {
  content: ""; position: absolute; left: 2px; top: 7px; width: 12px; height: 2px;
  background: var(--color-primary); border-radius: var(--radius-pill);
  transition: transform .16s ease-out;
}
.accordion-mark::after { transform: rotate(90deg); }
.accordion-item[open] .accordion-mark::after { transform: rotate(0deg); }
.accordion-body { padding: 0 var(--space-5) var(--space-5); color: var(--color-text-muted); }
.accordion-body p { margin: 0 0 var(--space-3); }
.accordion-body p:last-child { margin-bottom: 0; }

/* segment / tab control — a small inline group of toggle links or buttons. */
.segment {
  display: inline-flex;
  padding: 4px;
  gap: 2px;
  background: var(--color-surface);
  border: var(--border-default);
  border-radius: var(--radius-pill);
}
.segment-item {
  appearance: none;
  border: 0; background: transparent;
  font-family: var(--font-body); font-size: var(--text-small-size); font-weight: 500;
  color: var(--color-text-muted);
  padding: 10px 14px; min-height: 44px;
  border-radius: var(--radius-pill);
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .16s ease-out, color .16s ease-out;
}
.segment-item:hover { color: var(--color-text); }
.segment-item.is-active { background: var(--color-card); color: var(--color-primary-deep); box-shadow: var(--shadow-soft); }
.segment-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* tool / calculator layout — a controls column beside a results panel. */
.tool-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.tool-result { position: sticky; top: calc(64px + var(--space-4)); }
.tool-result-big { font-size: var(--text-h1-size); line-height: 1.1; font-weight: var(--text-h1-weight); letter-spacing: var(--text-h1-spacing); }
.tool-result-label { font-size: var(--text-small-size); color: var(--color-text-muted); margin-bottom: var(--space-1); }

/* settings — grouped sections of controls. */
.settings-section { margin-bottom: var(--space-5); }
.settings-section + .settings-section { margin-top: 0; }
.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-4) 0; border-bottom: var(--border-default);
}
.settings-row:last-child { border-bottom: 0; padding-bottom: 0; }
.settings-row:first-of-type { padding-top: 0; }
.settings-row-text { min-width: 0; }
.settings-row-title { font-weight: 500; }
.settings-row-help { font-size: var(--text-small-size); color: var(--color-text-muted); margin: var(--space-1) 0 0; max-width: 52ch; }

/* preset banner on the create form (#/new?type=...). */
.preset-banner {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2);
  background: var(--color-peach);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin: calc(-1 * var(--space-3)) 0 var(--space-5);
  font-size: var(--text-small-size);
}
.preset-banner-label { color: var(--color-primary-deep); font-weight: 500; }
.preset-banner strong { color: var(--color-text); font-weight: 600; }

/* A muted note / callout block reused across pages. */
.note {
  background: var(--color-surface);
  border: var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
}
.note strong { color: var(--color-text); font-weight: 500; }

/* The template-gallery escape hatch on the raw create form (no preset). */
.preset-banner-help { background: var(--color-surface); }
.preset-banner-link { color: var(--color-primary); font-weight: 500; text-decoration: underline; }

/* Required-field marker on a field label. */
.req-mark {
  display: inline-block; margin-left: var(--space-2);
  font-size: 11px; font-weight: 500; letter-spacing: 0.2px;
  color: var(--color-primary-deep); background: var(--color-peach);
  padding: 1px 7px; border-radius: var(--radius-pill);
  vertical-align: middle;
}

/* Inline save/feedback line near a form action (success or danger via inline
   color set in JS; defaults to muted). */
.form-status { margin: var(--space-2) 0 0; color: var(--color-text-muted); min-height: 1.2em; }

/* Stacked action group for empty states (primary + secondary). */
.empty-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }

/* ---- breadcrumb (deep sub-routes) ---- */
.breadcrumb { margin-bottom: var(--space-4); }
.breadcrumb-list {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1);
  list-style: none; margin: 0; padding: 0;
  font-size: var(--text-small-size);
}
.breadcrumb-item { display: inline-flex; align-items: center; }
.breadcrumb-item + .breadcrumb-item::before {
  content: "/"; margin: 0 var(--space-2); color: var(--color-text-muted);
}
.breadcrumb-link { color: var(--color-text-muted); text-decoration: none; border-radius: var(--radius-sm); }
.breadcrumb-link:hover { color: var(--color-primary); text-decoration: underline; }
.breadcrumb-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.breadcrumb-current { color: var(--color-text); font-weight: 500; }

/* ---- payoff celebration banner (detail) ---- */
.payoff-banner {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--color-success-tint); color: var(--color-success);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  animation: payoff-pop .18s ease-out both;
}
.payoff-banner svg { flex: none; }
.payoff-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.payoff-copy strong { font-weight: 600; }
.payoff-copy span { color: var(--color-text); font-size: var(--text-small-size); }
.payoff-close {
  margin-left: auto; flex: none;
  width: 32px; height: 32px; line-height: 1;
  background: transparent; border: 0; cursor: pointer;
  font-size: 22px; color: var(--color-success); border-radius: var(--radius-pill);
}
.payoff-close:hover { background: rgba(59, 109, 17, 0.12); }
.payoff-close:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@keyframes payoff-pop {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ---- toast (transient undo / status) ---- */
.toast {
  position: fixed; left: 50%; bottom: var(--space-5);
  transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--space-3);
  max-width: min(90vw, 460px);
  background: var(--color-card); color: var(--color-text);
  border: var(--border-default); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: var(--space-3) var(--space-4);
  z-index: 30;
  animation: toast-rise .18s ease-out both;
}
.toast-msg { font-size: var(--text-small-size); }
.toast .toast-action { margin-left: auto; flex: none; min-height: 36px; padding: 8px var(--space-4); }
@keyframes toast-rise {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translateX(-50%); }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 860px) {
  .create-layout { grid-template-columns: 1fr; }
  .summary-card { position: static; }
  .tool-layout { grid-template-columns: 1fr; }
}

/* Collapse the primary nav into a toggle below this width. The nav becomes a
   stacked drop-down panel that the #nav-toggle button opens (it adds .open). */
@media (max-width: 760px) {
  /* Ledger's header has no hamburger — keep the brand + account controls on one
     compact row. The "Get started" CTA is redundant with "Sign in" (both open
     sign-in) and the hero button, so hide it on phones to prevent wrapping. */
  .header-nav { display: inline-flex; flex-direction: row; flex-wrap: nowrap; gap: var(--space-2); width: auto; align-items: center; }
  .header-cta { display: none; }
  .nav-link { min-height: 44px; padding: 10px 14px; }
}
@media (max-width: 480px) {
  /* The signed-in email is long; drop it from the bar (still in the menu/account). */
  .header-email { display: none; }
  .app-header-inner { padding: var(--space-2) var(--space-3); gap: var(--space-2); }
}

@media (max-width: 560px) {
  .app-main { padding: var(--space-5) var(--space-4) var(--space-7); }
  .header-inner { padding: var(--space-3) var(--space-4); }
  .page-title { font-size: 26px; }
  .page-head { margin-bottom: var(--space-5); }
  .loans-grid { grid-template-columns: 1fr; }
  .card-grid, .card-grid.cols-2 { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .lead-muted { font-size: var(--text-body-size); }
  .form-actions .btn, .action-row .btn { flex: 1 1 auto; }

  /* Dashboard header: stack the title and the action so they don't crowd one
     tight row — the button drops below the title and goes full width. */
  .page-head { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .page-head > .btn { width: 100%; justify-content: center; }

  /* Metrics: a compact 2-up strip instead of three tall, full-width cards that
     pushed the actual loans a whole screen down. */
  .metrics-grid { grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-bottom: var(--space-5); }
  .metric { padding: var(--space-3) var(--space-4); }
  .metric-label { margin-bottom: var(--space-1); }
  .metric-value { font-size: 20px; }

  /* The optional verify tip shouldn't dominate the top of the list. */
  .verify-tip { margin-top: 0; }

  /* Tabs fill the full-width pill evenly — no dead space on the right. */
  .segment { width: 100%; display: flex; }
  .segment-item { flex: 1 1 0; padding-left: 8px; padding-right: 8px; }

  /* The next-payment row on a loan card wraps gracefully on the narrowest phones. */
  .loancard .next { flex-wrap: wrap; gap: var(--space-1); }

  /* Keep the create form's Save/Cancel reachable without scrolling past every
     field — pin them to the bottom of the viewport on small screens as a
     full-bleed action tray. Negative side margins cancel the card padding so
     the tray spans edge to edge; Submit stacks above Cancel so the long primary
     label never wraps awkwardly. Sticky keeps the bar in normal flow, so
     pinning causes no layout shift and the summary card below is untouched. */
  .form-actions-sticky {
    position: sticky;
    bottom: 0;
    z-index: 5;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    margin: var(--space-5) calc(-1 * var(--space-5)) 0;
    padding: var(--space-4) var(--space-5);
    padding-bottom: max(var(--space-4), env(safe-area-inset-bottom, 0px));
    background: var(--color-card);
    border-top: var(--border-default);
    box-shadow: 0 -4px 12px rgba(58, 30, 18, 0.07);
  }
  /* Both buttons go full width in the stacked tray (override the side-by-side
     flex:1 1 auto used by the in-flow .form-actions row above this breakpoint). */
  .form-actions-sticky .btn { flex: 0 0 auto; width: 100%; }

  /* Trim the schedule to what fits a phone: hide Principal + Interest so Paid,
     #, Due date, Payment and Remaining sit closer to the viewport. The full
     detail is still reachable via the table's horizontal scroll. */
  .schedule-table { min-width: 420px; }
  .schedule-table th:nth-child(5), .schedule-table td:nth-child(5),
  .schedule-table th:nth-child(6), .schedule-table td:nth-child(6) { display: none; }
}

/* ==========================================================================
   v0.3 — accounts + new flows (additive, clearly-scoped classes only).
   Owns: loading/error states, sign-in screen, header account area, invite-sent,
   and the two-sided payment rows. Reuses existing tokens/.card/.btn/.badge.
   ========================================================================== */

/* ---- loading + error states ---- */
.loading-card {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  text-align: center; padding: var(--space-7) var(--space-5);
}
.spinner {
  width: 28px; height: 28px; border-radius: var(--radius-pill);
  border: 3px solid var(--color-line);
  border-top-color: var(--color-primary);
  animation: kl-spin 0.8s linear infinite;
}
@keyframes kl-spin { to { transform: rotate(360deg); } }
.loading-text { margin: 0; }
.error-card { gap: var(--space-2); }

/* ---- narrow single-column pages (sign-in, invite-sent) ---- */
.page-narrow { max-width: 520px; margin-left: auto; margin-right: auto; }

/* ---- sign-in screen ---- */
.signin-page { padding-top: var(--space-6); }
.signin-brand {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  margin-bottom: var(--space-5);
}
.signin-wordmark { font-weight: 600; font-size: var(--text-h3-size); color: var(--color-primary); }
.signin-card-wrap { padding: var(--space-6); }
.signin-card-wrap .page-title { margin-top: var(--space-1); }
.signin-result { margin-top: var(--space-4); }
.signin-sent { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.signin-sent p { margin: 0; }
.signin-note { margin-bottom: var(--space-4); }
.signin-fineprint { text-align: center; margin-top: var(--space-5); }

/* dev-only magic/invite link panel */
.signin-dev {
  margin-top: var(--space-2); padding: var(--space-3);
  border: 1px dashed var(--color-primary); border-radius: var(--radius-md);
  background: var(--color-surface); width: 100%;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2);
}
.signin-dev-label {
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-primary-deep);
}
.signin-dev p { margin: 0; }

/* ---- enterprise SSO door on the sign-in screen ---- */
.signin-enterprise { margin-top: var(--space-5); }
/* a calm "or" divider between the magic-link form and the SSO option */
.signin-or {
  display: flex; align-items: center; gap: var(--space-3);
  color: var(--color-text-muted); font-size: var(--text-small-size);
  margin: var(--space-2) 0 var(--space-4);
}
.signin-or::before, .signin-or::after {
  content: ""; flex: 1; height: 1px; background: var(--color-border);
}
.signin-sso-toggle { width: 100%; justify-content: center; }
.signin-sso-panel {
  margin-top: var(--space-4); padding-top: var(--space-4);
  border-top: var(--border-default);
}
/* the collapsed "Testing options" disclosure inside the SSO panel */
.signin-sso-more { margin: 0 0 var(--space-4); }
.signin-sso-more-summary {
  cursor: pointer; font-size: var(--text-small-size); color: var(--color-text-muted);
  list-style: none; user-select: none; padding: var(--space-1) 0;
}
.signin-sso-more-summary::-webkit-details-marker { display: none; }
.signin-sso-more-summary::before { content: "+ "; color: var(--color-primary); }
.signin-sso-more[open] .signin-sso-more-summary::before { content: "– "; }
.signin-sso-more .field { margin-top: var(--space-3); margin-bottom: 0; }

/* ---- header account area ---- */
.nav-account { display: flex; align-items: center; gap: var(--space-2); margin-left: var(--space-2); }
.nav-account-email {
  display: inline-flex; align-items: center; gap: 6px; max-width: 200px;
  font-size: var(--text-small-size); color: var(--color-text-muted);
}
.nav-account-dot {
  width: 8px; height: 8px; border-radius: var(--radius-pill);
  background: var(--color-success); flex: none;
}
.nav-account-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-signout { color: var(--color-text-muted); }
.nav-signout:hover { color: var(--color-text); }

/* ---- invite-sent confirmation ---- */
.invite-sent-card .empty-body { max-width: 48ch; }

/* dashboard role tag on a borrowed-loan card */
.role-tag { margin-right: var(--space-2); }

/* ---- payments: hero "next step" card + calm status timeline ----
   One prominent card surfaces the single action for THIS person; the list below
   is pure status, read like a quiet timeline. (M1 / Coinbase / Robinhood feel.) */

.next-step-mount:empty { display: none; }
.next-step {
  position: relative;
  background: var(--color-card);
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-primary); /* warm clay edge = focal point */
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  margin-top: var(--space-3);
}
.next-step-head { display: flex; flex-direction: column; gap: 4px; }
.next-step-title {
  margin: 0; font-size: 1.25rem; line-height: 1.25; font-weight: 650;
  letter-spacing: -0.01em; color: var(--color-text);
}
.next-step-sub { margin: 0; color: var(--color-text-muted); font-size: 0.95rem; line-height: 1.5; }
.next-step-body { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.next-step-body:empty { margin-top: 0; }

/* The single big primary action. */
.next-step-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100%; padding: 15px 20px;
  font: inherit; font-size: 1.05rem; font-weight: 600; line-height: 1;
  color: #fff; background: var(--color-primary);
  border: none; border-radius: var(--radius-md); cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: transform .08s ease, background .15s ease, box-shadow .15s ease;
}
.next-step-btn:hover { background: var(--color-primary-deep); box-shadow: var(--shadow-card); }
.next-step-btn:active { transform: translateY(1px); }
.next-step-btn:disabled { opacity: .6; cursor: default; transform: none; }
.next-step-btn svg { width: 18px; height: 18px; }
.step-hint { margin: 0; text-align: center; }

/* Quiet secondary actions, tucked below the primary one. */
.next-step-more {
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center;
  margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-line);
}
.next-step-more:empty { display: none; }
.next-step-link {
  font: inherit; font-size: 0.92rem; font-weight: 500;
  color: var(--color-text-muted); background: none; border: none; cursor: pointer;
  /* A comfortable >=44px tap target (incl. a dispute action) without bloating
     the visual row — the underline stays tight to the text. */
  display: inline-flex; align-items: center; min-height: 44px; padding: 4px 0;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-line);
}
.next-step-link:hover { color: var(--color-primary); text-decoration-color: currentColor; }
.next-step-link:disabled { opacity: .6; cursor: default; }
.next-step-more .partial-confirm { width: 100%; }
/* The partial-amount toggle reads as a quiet link to match the others; the
   expanded form (input + Record received) keeps its normal control styling. */
.next-step-more .partial-confirm > .btn-ghost {
  align-self: flex-start; border: none; background: none;
  display: inline-flex; align-items: center; min-height: 44px; padding: 4px 0;
  font-size: 0.92rem; font-weight: 500; color: var(--color-text-muted);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-line);
}
.next-step-more .partial-confirm > .btn-ghost:hover {
  color: var(--color-primary); background: none; text-decoration-color: currentColor;
}
/* Bank-check group takes its own full row so the result sits under its trigger. */
.step-bankcheck { display: flex; flex-direction: column; gap: var(--space-2); flex-basis: 100%; }
.step-bankcheck .next-step-link { align-self: flex-start; }

/* Plan-upgrade nudge — quiet, dismissible, points the loan creator to the next
   tier up (esp. Plaid: "let the bank confirm payments"). */
.tier-nudge {
  position: relative; display: flex; align-items: center; gap: var(--space-4);
  margin-top: var(--space-5); padding: var(--space-4) var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-accent); border-radius: var(--radius-md);
}
.tier-nudge-text { flex: 1 1 auto; min-width: 0; }
.tier-nudge-title { font-weight: 650; color: var(--color-text); }
.tier-nudge-body { margin: 2px 36px 0 0; }
.tier-nudge-cta {
  flex: 0 0 auto; font-weight: 600; font-size: 0.92rem; text-decoration: none; white-space: nowrap;
  color: #fff; background: var(--color-primary); padding: 10px 16px; border-radius: var(--radius-md);
  transition: background .15s ease;
}
.tier-nudge-cta:hover { background: var(--color-primary-deep); }
.tier-nudge-x {
  position: absolute; top: 8px; right: 10px; border: none; background: none; cursor: pointer;
  color: var(--color-text-muted); font-size: 18px; line-height: 1; padding: 2px 6px;
}
.tier-nudge-x:hover { color: var(--color-text); }
@media (max-width: 600px) {
  .tier-nudge { flex-direction: column; align-items: stretch; }
  .tier-nudge-cta { text-align: center; }
}

/* The calm timeline: status only, hairline dividers, a colored node per row. */
.payments-list { display: flex; flex-direction: column; gap: 0; margin-top: var(--space-3); }
.payment-row {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-2); margin: 0;
  border: none; border-bottom: 1px solid var(--color-line); border-radius: 0; background: none;
}
.payment-row:last-child { border-bottom: none; }
.payment-row.is-current {
  background: var(--color-surface); border-radius: var(--radius-md);
  border-bottom-color: transparent; padding-left: var(--space-3); padding-right: var(--space-3);
}
.payment-dot {
  flex: 0 0 auto; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%;
  background: var(--color-line);
}
.payment-row.status-paid_pending .payment-dot { background: var(--color-warning); }
.payment-row.status-late .payment-dot { background: var(--color-danger); }
.payment-row.is-paid .payment-dot { background: var(--color-success); }
.payment-row.is-current .payment-dot { background: var(--color-primary); box-shadow: 0 0 0 4px var(--color-peach); }
.payment-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.payment-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.payment-num { font-weight: 600; color: var(--color-text); }
.payment-amt { font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }
.payment-row.is-paid .payment-num, .payment-row.is-paid .payment-amt { color: var(--color-text-muted); }
.payment-sub { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.payment-due { margin: 0; }
.payment-late { color: var(--color-danger); font-weight: 500; }
.payment-late.waived { color: var(--color-text-muted); font-weight: 400; text-decoration: line-through; }
.payment-partial { margin: 2px 0 0; }
.payment-progress {
  position: relative; height: 5px; max-width: 260px; margin-top: 4px;
  border-radius: 999px; background: var(--color-peach); overflow: hidden;
}
.payment-progress-fill { position: absolute; inset: 0 auto 0 0; height: 100%; background: var(--color-warning); border-radius: 999px; }

/* One-tap pay links on a due payment (borrower's view). */
.pay-methods { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); width: 100%; }
.pay-methods-label { width: 100%; font-size: var(--text-small-size); color: var(--color-text-muted); font-weight: 500; }
.pay-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-small-size); font-weight: 600; padding: 9px 16px;
  border-radius: 10px; text-decoration: none; cursor: pointer;
  border: 1px solid var(--color-line); background: #fff; color: var(--color-text);
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.pay-btn:hover { background: var(--color-bg); }
.pay-btn:active { transform: translateY(1px); }
.pay-venmo { border-color: #3D95CE; color: #1f6aa0; }
.pay-venmo:hover { background: #eef6fc; }
.pay-cashapp { border-color: #00C244; color: #036b29; } /* AA on white (>=4.5:1) */
.pay-cashapp:hover { background: #ecfbf1; }

/* Optional-section subhead in the create form (e.g. "How they can pay you back"). */
.form-subhead {
  margin: var(--space-5) 0 var(--space-2); padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-small-size); font-weight: 600; color: var(--color-text);
}

/* Payment dispute + proof-of-payment overlay (proof now shown in the hero card). */
.badge-disputed { background: #fbe9e7; color: var(--color-danger); }
.proof-view { display: flex; flex-direction: column; gap: 4px; margin-top: var(--space-2); }
.proof-label { font-weight: 500; }
.proof-img {
  max-width: 220px; max-height: 280px; width: auto; display: block;
  border: 1px solid var(--color-line); border-radius: 10px; background: #fff; object-fit: contain;
}
.proof-add { display: inline-flex; }

/* Optional identity / bank verification (read-only Plaid — no money moves). */
.verify-mount:empty { display: none; }
.verify-card { display: flex; flex-direction: column; gap: var(--space-3); }
.verify-row { display: flex; align-items: center; gap: var(--space-3); }
.verify-row-text { flex: 1 1 auto; min-width: 0; }
.verify-name { font-weight: 500; }
.verify-status { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: 2px; }
.verify-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px;
  font-size: var(--text-small-size); font-weight: 600; line-height: 1.5;
  background: var(--color-success-tint); color: var(--color-success);
}
/* Darker amber text on the warm tint so the "Demo/weak" pill clears AA (was
   #BA7517 ≈ 3.26:1 on the tint); clay-deep matches the .badge-due pairing. */
.verify-badge--weak { background: var(--color-warning-tint); color: var(--color-primary-deep); }
.verify-check { font-weight: 700; line-height: 1; }
.verify-btn { flex: 0 0 auto; align-self: center; }
.verify-foot { margin: 2px 0 0; }
/* Dashboard: verified badge on a loan card + the standing "verify available" tip. */
.badge-verified { background: var(--color-success-tint); color: var(--color-success); }
.card-verify { margin-left: 4px; }
.verify-tip { margin: calc(var(--space-3) * -1) 0 var(--space-4); }
/* On-demand bank check (slice #2) — inline result panel under a payment row. */
.bank-check-result:empty { display: none; }
.bank-check-result { margin-top: var(--space-2); }
.bank-match {
  display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start;
  border: 1px solid var(--color-line); border-radius: 10px;
  padding: var(--space-3); background: var(--color-surface);
}
.bank-match p { margin: 0; }
/* Partial payments — the lender's manual amount control (in the hero "more" row). */
.partial-confirm { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.partial-form { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.partial-input {
  width: 120px; padding: 6px 9px; font: inherit;
  border: 1px solid var(--color-line); border-radius: 8px; background: var(--color-card);
}

/* Skeleton loaders — content-shaped placeholders while a screen's data loads. */
.skel-row { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4); }
.skel-row > .skel-card { flex: 1 1 160px; margin-bottom: 0; }
.skel-card { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
.skel-line { background: var(--color-surface); border-radius: var(--radius-sm); position: relative; overflow: hidden; min-height: 10px; }
.skel-line::after {
  content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: skel-shimmer 1.4s ease-in-out infinite;
}
@keyframes skel-shimmer { to { transform: translateX(100%); } }

@media (max-width: 600px) {
  .next-step { padding: var(--space-4); }
  .next-step-more { gap: var(--space-3) var(--space-4); }
  .verify-row { flex-wrap: wrap; }
  .verify-btn { width: 100%; }
  .nav-account { width: 100%; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin-left: 0; }
  .nav-account-email { max-width: 100%; }
}

/* ==========================================================================
   ADMIN — org switcher (header), organization view, activity log
   ==========================================================================
   The admin surface for organizations. Everything here is additive: a pure
   consumer (personal org only) never sees the switcher or these views, so the
   original P2P header/flow is untouched. Built on the Warm Clay tokens. */

/* ---- header org switcher ---- */
.org-switcher { position: relative; display: inline-flex; }
.org-switcher[hidden] { display: none; }
.org-switcher-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 40px;
  padding: 6px 10px;
  background: var(--color-surface);
  border: var(--border-default);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--text-small-size);
  font-weight: 500;
  cursor: pointer;
  max-width: 200px;
  transition: background-color .16s ease-out, border-color .16s ease-out;
}
.org-switcher-trigger:hover { background: var(--color-peach); border-color: var(--color-primary); }
.org-switcher-trigger:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.org-switcher-label { display: inline-flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.15; }
.org-switcher-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.org-switcher-role { font-size: 11px; }

.org-switcher-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 248px;
  max-width: 300px;
  padding: var(--space-3);
  background: var(--color-card);
  border: var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.org-switcher-menu[hidden] { display: none; }
.org-switcher-heading { margin: 0 0 var(--space-2); padding: 0 var(--space-2); }
.org-switcher-options { display: flex; flex-direction: column; gap: 2px; }
.org-switcher-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: 8px var(--space-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  text-align: left;
  cursor: pointer;
  color: var(--color-text);
}
.org-switcher-option:hover { background: var(--color-surface); }
.org-switcher-option:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.org-switcher-option.is-active { background: var(--color-peach); cursor: default; }
.org-switcher-option-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.org-switcher-option-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-switcher-option-role { font-size: 12px; }
.org-switcher-check { color: var(--color-primary); font-weight: 600; }
.org-switcher-sep { height: 1px; background: var(--color-border); margin: var(--space-3) 0; }
.org-switcher-link {
  display: block;
  padding: 8px var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
  font-size: var(--text-small-size);
  font-weight: 500;
}
.org-switcher-link:hover { background: var(--color-surface); }
.org-switcher-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }

/* ---- organization view: role banner ---- */
.org-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
  border: var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}
.org-banner-info { background: var(--color-peach); border-color: transparent; }
.org-banner-role { display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.org-banner-text { margin: 0; font-size: var(--text-small-size); color: var(--color-text); }

/* ---- members table ---- */
/* Unlike the numeric schedule table, the members table holds interactive
   controls, so it must NOT force horizontal scroll. Override the inherited
   wide min-width and let it fill the card; on phones it becomes stacked cards. */
.members-table { min-width: 0; }
.member-actions-table .table-wrap { overflow-x: visible; }
.members-table th, .members-table td { vertical-align: middle; }
.member-cell { text-align: left; }
.member-who { display: flex; align-items: center; gap: var(--space-3); }
.member-who-text { min-width: 0; }
.member-name { display: flex; align-items: center; gap: var(--space-2); font-weight: 500; }
.member-email { word-break: break-word; }
.member-role-cell { text-align: left; white-space: nowrap; }
.member-actions-cell { text-align: right; white-space: nowrap; }
.member-controls { display: inline-flex; align-items: center; gap: var(--space-2); justify-content: flex-end; flex-wrap: wrap; }
.member-controls .field { margin: 0; }
.member-controls .field select { min-height: 40px; padding: 8px 10px; }
.member-remove { color: var(--color-danger); }
.member-remove:hover { background: var(--color-danger-tint); }

/* A field whose label is for screen readers only (compact inline controls). */
.field.sr-label > label {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.field.inline-field { display: inline-block; }
.field.inline-field .help { display: none; }

/* Role badge accents reuse the status palette; nudge "owner" toward clay. */
.badge.badge-over { font-weight: 600; }

/* danger-zone nested inside a settings card (not its own card): a top divider. */
.settings-section .danger-zone {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-default);
}
.settings-section .danger-zone h4 { color: var(--color-danger); }

/* ---- enterprise SSO / SCIM admin panel ---- */
.sso-status { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); flex-wrap: wrap; }
/* a monospace, wrapping treatment for connection ids, endpoints, and tokens */
.sso-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-small-size);
  word-break: break-all;
}
.sso-summary {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-5); padding: var(--space-4);
  background: var(--color-surface); border-radius: var(--radius-md);
}
.sso-summary dt { color: var(--color-text-muted); font-size: var(--text-small-size); }
.sso-summary dd { margin: 0; }
.sso-scim { margin-top: var(--space-5); padding-top: var(--space-5); border-top: var(--border-default); }
.sso-field {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  background: var(--color-surface); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.sso-field-label { font-size: var(--text-small-size); color: var(--color-text-muted); }
.sso-copyable { flex: 1; min-width: 0; }
/* the once-only token reveal: emphasized, peach-tinted callout */
.sso-token-panel {
  margin-top: var(--space-4); padding: var(--space-4);
  border: 1px dashed var(--color-primary); border-radius: var(--radius-md);
  background: var(--color-peach);
}
.sso-token-title { color: var(--color-primary-deep); font-weight: 600; }
.sso-token-value {
  display: block; margin-top: var(--space-2); padding: var(--space-3);
  background: var(--color-bg); border-radius: var(--radius-sm);
}
.sso-danger { margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--border-default); }
.sso-danger h4 { color: var(--color-danger); }

/* ---- activity log ---- */
.activity-card { padding: var(--space-2) var(--space-4); }
.activity-list { list-style: none; margin: 0; padding: 0; }
.activity-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: var(--border-default);
}
.activity-item:last-child { border-bottom: 0; }
.activity-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.activity-dot.dot-success { background: var(--color-success-tint); color: var(--color-success); }
.activity-dot.dot-info { background: var(--color-peach); color: var(--color-primary-deep); }
.activity-dot.dot-danger { background: var(--color-danger-tint); color: var(--color-danger); }
.activity-dot.dot-muted { background: var(--color-surface); color: var(--color-text-muted); }
.activity-body { min-width: 0; }
.activity-line { margin: 0; line-height: 1.4; word-wrap: break-word; }
.activity-detail { margin: var(--space-1) 0 0; }
.activity-when { white-space: nowrap; text-align: right; padding-top: 2px; }

/* ---- responsive ---- */
@media (max-width: 760px) {
  /* In the collapsed mobile nav, the switcher stretches full-width and its menu
     becomes a static, in-flow panel rather than an overlay. */
  .org-switcher { width: 100%; }
  .org-switcher-trigger { width: 100%; max-width: none; justify-content: space-between; }
  .org-switcher-name { max-width: none; }
  .org-switcher-menu { position: static; width: 100%; max-width: none; margin-top: var(--space-2); box-shadow: none; }
}

@media (max-width: 600px) {
  /* Members table -> stacked cards. A table with interactive controls scrolls
     badly on a phone, so each row becomes a block: member, then role, then the
     change-role select + remove button laid out full-width. */
  .members-table, .members-table tbody, .members-table tr, .members-table td {
    display: block;
    width: 100%;
  }
  .members-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .members-table tr {
    border: var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
  }
  .members-table tr:last-child { margin-bottom: 0; }
  .members-table td { border: 0; padding: var(--space-1) 0; text-align: left; }
  .member-role-cell, .member-actions-cell { text-align: left; white-space: normal; }
  .member-controls { justify-content: flex-start; width: 100%; gap: var(--space-3); }
  .member-controls .field { flex: 1 1 140px; }
  .member-controls .field select { width: 100%; }
  .member-remove { flex: 0 0 auto; }

  /* Activity rows: move the timestamp under the line on the narrowest phones. */
  .activity-item { grid-template-columns: auto 1fr; }
  .activity-when { grid-column: 2; text-align: left; padding-top: var(--space-1); }
}

@media (prefers-reduced-motion: reduce) {
  /* Kill transitions AND keyframe animations (the payoff/toast/pop) for users
     who opt out — the * transition rule alone doesn't stop animations. */
  * { transition: none !important; scroll-behavior: auto !important; animation: none !important; }
}

/* ---- mobile bottom tab bar (PWA / phone-native) ---- */
.tab-bar { display: none; }
@media (max-width: 640px) {
  /* One nav per breakpoint: when the bottom tab bar is showing (signed in), the
     header hamburger is redundant — hide it. Signed out (tab bar [hidden]) the
     hamburger stays so the info pages remain reachable from the header. The
     four primary destinations live in the tab bar; the rest live in the footer. */
  body:has(#tab-bar:not([hidden])) .nav-toggle { display: none; }
  .tab-bar:not([hidden]) {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--color-card); border-top: 1px solid var(--color-line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -1px 10px rgba(58, 30, 18, 0.06);
  }
  .tab-link {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 9px 4px 6px; text-decoration: none;
    color: var(--color-text-muted); font-size: 11px; font-weight: 500;
  }
  .tab-link svg { display: block; }
  .tab-link.is-active { color: var(--color-primary); }
  .tab-link:active { background: var(--color-surface); }
  /* Keep content clear of the fixed bar. */
  .app-main { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- Documents: notarized-copy slot ---------------------------------------- */
.notarized-slot {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}
.doc-subtitle {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 var(--space-2);
}
.notarized-body { display: flex; flex-direction: column; gap: var(--space-2); }
.notarized-file { display: flex; align-items: center; gap: var(--space-2); }
.notarized-name { font-weight: 500; word-break: break-word; }
.upload-control { display: inline-flex; }
.upload-control input[type="file"] { display: none; }

/* ---- Manage loan (cancel / forgive) + row-level undo ----------------------- */
.manage-loan {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}
.payment-undo {
  background: none;
  border: none;
  color: var(--color-text-muted, #856351);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 4px;
  margin-left: var(--space-1);
}
.payment-undo:hover { color: var(--color-clay, #B14A2B); }

/* ---- Copyable invite link (text it to the borrower) ------------------------ */
.invite-link-field {
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface, #fff);
  font-size: 13px;
  color: var(--color-text-muted, #856351);
}

/* ---- Settings: delete-account (danger zone) -------------------------------- */
.settings-danger {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}
.delete-confirm {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 380px;
}

/* ============================================================================
 * Ledger (shared-expense tracker)
 * ========================================================================== */
.badge-owe { background: var(--color-danger-tint); color: var(--color-danger); }

/* ---------------------------------------------------------------------------
 * Group-detail redesign (boxless hero + one primary action + quiet history).
 * All hero rules are scoped under .le-detail so they do NOT collide with the
 * landing page's own .le-hero* classes (home.js / app.css ~1602).
 * ------------------------------------------------------------------------- */

/* hero — boxless "where you stand" lead */
.le-detail .le-hero {
  text-align: left; padding: 0; margin-bottom: var(--space-6);
}
.le-hero-top { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.le-hero-top .page-title { margin: 0; }
.le-hero-meta { margin: 0; }
.le-hero-amount {
  font-family: var(--font-display, inherit);
  font-size: clamp(2.5rem, 12vw, var(--text-h1-size));
  line-height: 1.0; letter-spacing: -0.02em; font-weight: 650;
  margin: var(--space-3) 0 var(--space-1); font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.le-hero-amount.is-owed { color: var(--color-success); }
.le-hero-amount.is-owe  { color: var(--color-danger); }
.le-hero-amount.is-even { color: var(--color-text-muted); font-size: var(--text-h2-size); letter-spacing: -0.01em; }
.le-hero-caption { margin: 0 0 var(--space-3); }
.le-hero-line { margin: 0; }
.le-who { margin-top: var(--space-2); }
.le-who > summary {
  cursor: pointer; color: var(--color-text-muted); font-size: var(--text-small-size);
  padding: var(--space-2) 0; list-style: none;
}
.le-who > summary::-webkit-details-marker { display: none; }

/* action block + section divider */
.le-action { margin-bottom: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
.le-section-rule { border-top: 1px solid var(--color-line); margin: var(--space-6) 0 var(--space-5); }

/* activity demotion */
.le-section-label {
  font-size: var(--text-overline-size, 13px); font-weight: 600; letter-spacing: 0.02em;
  color: var(--color-primary); margin: 0 0 var(--space-2); text-transform: none;
}
.le-activity-amount { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.le-activity-row .btn-ghost { opacity: 0; transition: opacity var(--dur-base) var(--ease-out); }
.le-activity-row:hover .btn-ghost,
.le-activity-row:focus-within .btn-ghost { opacity: 1; }
@media (hover: none) { .le-activity-row .btn-ghost { opacity: 1; } }
.le-show-all { width: 100%; margin-top: var(--space-3); }

/* manage demoted to footer */
.le-detail .le-manage {
  margin-top: var(--space-7); padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
}
.le-detail .le-manage > summary {
  color: var(--color-text-muted); font-weight: 500;
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.le-detail .le-manage[open] > summary { color: var(--color-primary-deep); }

/* bottom sheet (add-expense + settle) */
.le-sheet-scrim {
  position: fixed; inset: 0; z-index: 70; background: rgba(20, 60, 42, 0.34);
  display: flex; align-items: flex-end; justify-content: center;
  animation: page-enter var(--dur-base) var(--ease-out) both;
}
.le-sheet {
  width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto;
  background: var(--color-card); border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-lift); padding: var(--space-5);
  padding-bottom: max(var(--space-5), env(safe-area-inset-bottom, 0px));
  animation: sheet-rise var(--dur-base) var(--ease-out) both;
}
@keyframes sheet-rise { from { transform: translateY(16px); opacity: .6; } to { transform: none; opacity: 1; } }
.le-sheet-grabber {
  width: 36px; height: 4px; border-radius: var(--radius-pill);
  background: var(--color-line); margin: 0 auto var(--space-3);
}
.le-sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.le-sheet-head h2 { margin: 0; font-size: var(--text-h3-size); }
.le-sheet-close {
  background: none; border: none; cursor: pointer; color: var(--color-text-muted);
  font-size: 22px; line-height: 1; min-width: 44px; min-height: 44px;
}
.le-sheet .form-actions {
  position: sticky; bottom: 0; background: var(--color-card);
  margin: var(--space-5) calc(-1 * var(--space-5)) calc(-1 * var(--space-5));
  padding: var(--space-4) var(--space-5);
  padding-bottom: max(var(--space-4), env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--color-line);
}
.le-sheet .form-actions .btn { flex: 1; }
@media (min-width: 640px) {
  .le-sheet-scrim { align-items: center; }
  .le-sheet { border-radius: var(--radius-xl); max-height: 88vh; }
}

/* breadcrumb tap target on touch */
.breadcrumb-link { min-height: 44px; display: inline-flex; align-items: center; }

.le-transfer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-2); padding: var(--space-3) 0; border-top: 1px solid var(--color-line);
}
.le-transfer:first-of-type { border-top: 0; }
.le-transfer-text { min-width: 0; }

/* Pending (proposed, unconfirmed) payment: visually set apart from a clean transfer. */
.le-transfer-pending {
  background: var(--color-peach);
  border-top: 0;
  border-radius: var(--radius-md, 10px);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
}
.le-pending-tag { margin-right: var(--space-2); vertical-align: middle; }

/* Editable settle amount (partial payments) */
.le-amt-prefix { color: var(--color-text-muted); margin-right: -2px; }
.le-amt {
  width: 5.5rem; min-height: 44px; padding: var(--space-2); font-size: 16px;
  border: 1px solid var(--color-line); border-radius: var(--radius-sm, 8px);
  background: #fff; color: var(--color-text); text-align: right;
}

.le-split-detail { margin: var(--space-2) 0 var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.le-split-detail .field { margin: 0; }

.le-activity { display: flex; flex-direction: column; }
.le-activity-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) 0; border-top: 1px solid var(--color-line);
}
.le-activity-row:first-child { border-top: 0; }
.le-activity-text { min-width: 0; }
.le-activity-title { font-weight: 600; }
.le-activity-title-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.le-members { display: flex; flex-direction: column; margin-bottom: var(--space-3); }
.le-member-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) 0; border-top: 1px solid var(--color-line);
}
.le-member-row:first-child { border-top: 0; }

/* Add/invite confirmation + shareable invite link */
.le-flash {
  background: var(--color-peach); border-radius: var(--radius-md, 10px);
  padding: var(--space-3); margin-bottom: var(--space-3);
}
.le-flash-msg { margin: 0 0 var(--space-2); font-weight: 600; }
.le-flash-error { background: var(--color-danger-tint, #fbeae5); }
.le-flash-error .le-flash-msg { color: var(--color-danger, #b3261e); }
.le-share { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-2); }
.le-share-url {
  flex: 1 1 200px; min-width: 0; min-height: 44px; font-size: 16px; padding: var(--space-2);
  border: 1px solid var(--color-line); border-radius: var(--radius-sm, 8px);
  background: #fff; color: var(--color-text);
}

.le-manage > summary {
  cursor: pointer; font-weight: 600; color: var(--color-primary-deep);
  padding: var(--space-2) 0; list-style: none;
}
.le-manage > summary::-webkit-details-marker { display: none; }
.le-manage[open] > summary { margin-bottom: var(--space-3); }

/* Ledger v2 — member connection status + invite control */
.le-member-text { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.le-invite { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.le-invite-field { margin: 0; }
.le-invite-field input { min-width: 180px; }

/* ===== Ledger standalone brand header ===== */
.app-header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); max-width: 960px; margin: 0 auto; padding: var(--space-3) var(--space-4); width: 100%; }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--color-text); font-weight: 700; }
.brand-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-md); background: var(--color-primary); color: #fff; font-weight: 700; font-family: var(--font-display, inherit); }
.brand-word { font-family: var(--font-display, inherit); font-size: 1.1rem; letter-spacing: -0.01em; }
.header-nav { display: inline-flex; align-items: center; gap: var(--space-3); }
.header-email { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== Ledger landing / home ===== */
.le-home { max-width: 880px; }
.le-hero { text-align: center; padding: var(--space-7, 48px) 0 var(--space-6, 32px); }
.le-hero-title { font-family: var(--font-display, inherit); font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.08; letter-spacing: -0.02em; margin: var(--space-2) 0 var(--space-4); }
.le-hero-lead { max-width: 620px; margin: 0 auto var(--space-5); font-size: 1.12rem; line-height: 1.6; color: var(--color-text-muted); }
.le-hero-cta { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-3); }
.le-how { margin-bottom: var(--space-5); }
.le-step { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) 0; border-top: 1px solid var(--color-line); }
.le-step:first-of-type { border-top: 0; }
.le-step-num { flex: none; width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; background: var(--color-peach); color: var(--color-primary-deep); font-weight: 700; }
.le-step-title { font-weight: 600; margin-bottom: 2px; }
.le-grid-head { text-align: center; margin: var(--space-6, 32px) 0 var(--space-4); }
.le-feature-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.le-feature { height: 100%; }
.le-cta-card { text-align: center; margin-top: var(--space-6, 32px); background: var(--color-peach); border: 0; }
.le-cta-card .form-actions { justify-content: center; }
@media (max-width: 560px) { .le-hero { padding-top: var(--space-5, 24px); } }

/* ===== Ledger landing — live demo ===== */
.le-demo { max-width: 560px; margin: 0 auto var(--space-5); }
.le-demo-block { margin-top: var(--space-4); }
.le-demo-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); font-weight: 600; margin-bottom: var(--space-2); }
.le-demo-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--color-line); }
.le-demo-row:first-of-type { border-top: 0; }

/* ---- account / settings + legal pages ---- */
.account-email { font-size: 1.05rem; font-weight: 600; margin: 0 0 var(--space-3); word-break: break-all; }
.account-links { display: flex; flex-direction: column; }
.account-link { color: var(--color-primary); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.account-link:hover { text-decoration: underline; }
.account-danger { border-color: var(--color-danger); }
.btn-danger { color: var(--color-danger) !important; border-color: var(--color-danger) !important; }
.btn-danger:hover { background: var(--color-danger-tint, #fbeae5) !important; }
.legal .legal-section { margin-bottom: var(--space-5); }
.legal .legal-p { line-height: 1.6; margin: 0 0 var(--space-3); }
.legal .section-title { margin-bottom: var(--space-2); }
.app-footer-links { margin-top: var(--space-2); font-size: var(--text-small-size); }
.app-footer-links a { color: var(--color-text-muted); text-decoration: none; }
.app-footer-links a:hover { text-decoration: underline; color: var(--color-text); }