/* ==========================================================================
   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); }
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);
  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; }
/* 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); }

/* ==========================================================================
   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-soft);
}

/* ==========================================================================
   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-card); }
.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-soft);
}
.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: 0 4px 12px rgba(58, 30, 18, 0.08);
}
.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); }

/* ==========================================================================
   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; }
.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);
  font-size: var(--text-small-size); margin-bottom: var(--space-4); cursor: pointer;
}
.check-row input[type="checkbox"] { width: 20px; height: 20px; 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; }
.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) {
  .nav-toggle { display: inline-flex; }
  .header-inner { position: relative; flex-wrap: wrap; }
  .header-nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
    width: 100%;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: var(--border-default);
  }
  .header-nav.open { display: flex; }
  .nav-link { min-height: 44px; padding: 10px 14px; }
}

@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; }

  /* 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); }

/* ---- two-sided payment rows ---- */
.payments-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-3); }
.payment-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; padding: var(--space-4) var(--space-5); margin: 0;
}
.payment-row-current { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary) inset; }
.payment-row.status-paid { background: var(--color-success-tint); border-color: transparent; }
.payment-row.status-late { border-color: var(--color-danger); }
.payment-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 240px; }
.payment-line { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.payment-num { font-weight: 600; }
.payment-meta { 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-hint { margin: 0; }
.payment-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.payment-done { color: var(--color-success); font-weight: 500; font-size: var(--text-small-size); }

/* 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: #048a36; }
.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. */
.payment-row-disputed { border-color: var(--color-danger); box-shadow: 0 0 0 1px var(--color-danger) inset; }
.badge-disputed { background: #fbe9e7; color: var(--color-danger); }
.payment-dispute { color: var(--color-danger); font-weight: 500; margin-top: 4px; }
.payment-dispute-note { margin-top: 2px; }
.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; }

/* 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) {
  .payment-row { align-items: stretch; }
  .payment-actions { width: 100%; }
  .payment-actions .btn { flex: 1 1 auto; }
  .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; }
}