/* Portal-specific styles.
 * Layered on top of Tailwind utilities and brand.css design tokens.
 * Tailwind handles most layout/colors in templates; this file adds depth,
 * motion, print rules, and responsive polish.
 *
 * Token fallback convention:
 *   var(--color-ink-*, #hex)   Tailwind-generated (from base.html theme.colors)
 *   var(--ws-shadow-*, css)    brand.css custom properties
 *   The hex/css fallback keeps the cascade working when tokens are absent
 *   (email renderers, PDF exports, older browsers).
 */

/* ---------- Shell ---------- */

.portal-shell {
  background-color: var(--color-ink-50, #F8FAFC);
  color: var(--color-ink-900, #0F172A);
  font-family: var(--ws-font-sans, 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.portal-main {
  padding-bottom: 2.5rem;
}

/* ---------- Header ---------- */

.portal-header {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  background-color: rgba(255, 255, 255, 0.85);
}

/* ---------- Section cards ---------- */

.portal-section {
  transition:
    box-shadow 150ms ease,
    border-color 150ms ease,
    transform 150ms ease;
  will-change: transform;
}

.portal-section:hover {
  border-color: var(--color-ink-300, #CBD5E1);
  box-shadow: var(--ws-shadow-lift, 0 4px 12px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -2px rgba(15, 23, 42, 0.04));
  transform: translateY(-1px);
}

.portal-section:focus-within {
  outline: 2px solid var(--color-brand-600, #4F46E5);
  outline-offset: 2px;
}

/* Stagger the entry of section cards so the grid resolves smoothly. */
.portal-sections .portal-section {
  animation: portal-fade-up 320ms ease-out both;
}

.portal-sections .portal-section:nth-child(2)  { animation-delay:  40ms; }
.portal-sections .portal-section:nth-child(3)  { animation-delay:  80ms; }
.portal-sections .portal-section:nth-child(4)  { animation-delay: 120ms; }
.portal-sections .portal-section:nth-child(5)  { animation-delay: 160ms; }
.portal-sections .portal-section:nth-child(6)  { animation-delay: 200ms; }
.portal-sections .portal-section:nth-child(n+7){ animation-delay: 240ms; }

@keyframes portal-fade-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .portal-section,
  .portal-sections .portal-section {
    animation: none;
    transition: none;
    transform: none;
  }
}

/* ---------- Empty state ---------- */

.portal-empty {
  font-family: var(--ws-font-sans, 'Inter', system-ui, sans-serif);
  letter-spacing: -0.005em;
}

/* ---------- Loan view data tables ---------- */

.portal-main table {
  border-collapse: separate;
  border-spacing: 0;
}

.portal-main tbody tr {
  transition: background-color 120ms ease;
}

.portal-main tbody tr:nth-child(even) {
  background-color: var(--color-ink-50, #F8FAFC);
}

.portal-main tbody tr:hover {
  background-color: var(--color-brand-50, rgba(79, 70, 229, 0.04));
}

.portal-main .money,
.portal-main .tabular {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ---------- Footer ---------- */

.portal-footer {
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-500, #64748B);
}

/* ---------- Responsive polish ---------- */

@media (max-width: 640px) {
  .portal-header .portal-title-version {
    display: none;
  }

  .portal-main section {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .portal-main h1 {
    font-size: 1.875rem;
    line-height: 1.15;
  }
}

/* ---------- Print ---------- */

@media print {
  .portal-shell {
    background-color: #FFFFFF;
  }

  .portal-header,
  .portal-footer {
    display: none;
  }

  .portal-section,
  .portal-main table {
    box-shadow: none;
    border-color: #CBD5E1;
  }

  .portal-main tbody tr {
    background-color: transparent;
  }
}

/* Extracted from portal/base.html heavy inline style - chunk AUTO-HEAL-DOM-007 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --color-brand: #4F46E5;
  --color-brand-dark: #3730A3;
  --color-ink-50: #F8FAFC;
  --color-ink-100: #F1F5F9;
  --color-ink-200: #E2E8F0;
  --color-ink-400: #94A3B8;
  --color-ink-600: #475569;
  --color-ink-700: #334155;
  --color-ink-900: #0F172A;
  /* Both are used only as body text (.stmt-archive__amount--credit / --debit), so both
     have to clear WCAG AA on the portal's white surface. The previous credit colour was
     emerald-600, which does not — see the note at brand.css:30. */
  --color-money-in: #047857;  /* emerald-700 — 5.48:1 on white */
  --color-money-out: #DC2626; /* red-600     — 4.83:1 on white */
  --radius: 0.5rem;
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
body {
  background: var(--color-ink-50);
  color: var(--color-ink-900);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
/* Header */
.portal-header {
  background: #fff;
  border-bottom: 1px solid var(--color-ink-200);
  padding: 0 1.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: var(--shadow);
}
.portal-header__brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: var(--color-ink-900);
  font-weight: 600;
  font-size: 0.9375rem;
}
.portal-header__badge {
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 0.375rem;
  background: var(--color-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.8125rem;
  flex-shrink: 0;
}
.portal-header__nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.875rem;
}
.portal-header__nav a {
  color: var(--color-ink-600);
  text-decoration: none;
}
.portal-header__nav a:hover { color: var(--color-ink-900); }
.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background 0.15s;
}
.btn--ghost {
  background: transparent;
  color: var(--color-ink-600);
  border: 1px solid var(--color-ink-200);
}
.btn--ghost:hover { background: var(--color-ink-100); }
/* Main content */
.portal-main {
  flex: 1;
  max-width: 72rem;
  width: 100%;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}
@media (min-width: 640px) { .portal-main { padding: 2rem 1.5rem; } }
/* Cards */
.card {
  background: #fff;
  border: 1px solid var(--color-ink-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.card__header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-ink-100);
}
.card__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-ink-900);
}
.card__subtitle {
  font-size: 0.8125rem;
  color: var(--color-ink-600);
  margin-top: 0.125rem;
}
.card__body { padding: 1.25rem; }
/* Tables */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.data-table th {
  text-align: left;
  padding: 0.625rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-ink-600);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--color-ink-50);
  border-bottom: 1px solid var(--color-ink-200);
}
.data-table td {
  padding: 0.75rem 1rem;
  color: var(--color-ink-900);
  border-bottom: 1px solid var(--color-ink-100);
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--color-ink-50); }
/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}
.badge--green { background: #D1FAE5; color: #065F46; }
.badge--amber { background: #FEF3C7; color: #92400E; }
.badge--red { background: #FEE2E2; color: #991B1B; }
.badge--slate { background: var(--color-ink-100); color: var(--color-ink-700); }
/* Money */
.money { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }
/* Utilities */
.page-header { margin-bottom: 1.5rem; }
.page-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-ink-900);
}
.page-header p {
  font-size: 0.875rem;
  color: var(--color-ink-600);
  margin-top: 0.25rem;
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.stat-card {
  background: #fff;
  border: 1px solid var(--color-ink-200);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.stat-card__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-600);
}
.stat-card__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-ink-900);
  margin-top: 0.375rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--color-ink-600);
}
.empty-state h3 { font-size: 1rem; font-weight: 600; margin-bottom: 0.25rem; }
.empty-state p { font-size: 0.875rem; }
.loan-cards { display: flex; flex-direction: column; gap: 1rem; }
.loan-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: #fff;
  border: 1px solid var(--color-ink-200);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.loan-card:hover { border-color: var(--color-brand); box-shadow: var(--shadow-md); }
@media (min-width: 640px) {
  .loan-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.loan-card__address {
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--color-ink-900);
}
.loan-card__meta {
  font-size: 0.8125rem;
  color: var(--color-ink-600);
  margin-top: 0.125rem;
}
.loan-card__stats {
  display: flex;
  gap: 1.5rem;
  flex-shrink: 0;
}
.loan-card__stat-label { font-size: 0.75rem; color: var(--color-ink-600); margin-bottom: 0.125rem; }
.loan-card__stat-value { font-size: 0.9375rem; font-weight: 600; }
.section-spacing { margin-top: 1.5rem; }
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: var(--color-ink-600);
  text-decoration: none;
  margin-bottom: 1rem;
}
.back-link:hover { color: var(--color-ink-900); }

/* Portal Login styles */

body:has(.login-card) {
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.login-card {
  background: #fff;
  border: 1px solid var(--color-ink-200);
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.07);
  padding: 2rem;
  width: 100%;
  max-width: 24rem;
}
.login-card__brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.75rem;
}
.login-card__badge {
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  background: var(--color-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
}
.login-card__title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-ink-900);
}
h1 {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-ink-900);
  margin-bottom: 0.375rem;
}
.login-card__sub {
  font-size: 0.875rem;
  color: var(--color-ink-600);
  margin-bottom: 1.5rem;
}
.alert--error {
  background: #FEE2E2;
  border: 1px solid #FCA5A5;
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: #991B1B;
  margin-bottom: 1.25rem;
}
.field { margin-bottom: 1rem; }
.field label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-ink-700);
  margin-bottom: 0.375rem;
}
.field input {
  display: block;
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-ink-300);
  border-radius: var(--radius);
  font-size: 0.875rem;
  color: var(--color-ink-900);
  background: #fff;
  outline: none;
  font-family: inherit;
}
.field input:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgb(79 70 229 / 0.12);
}
.field input::placeholder { color: var(--color-ink-400); }
.btn-submit {
  display: block;
  width: 100%;
  padding: 0.625rem;
  background: var(--color-brand);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  margin-top: 1.5rem;
}
.btn-submit:hover { background: var(--color-brand-dark); }
.login-footer {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--color-ink-600);
}
.login-footer a { color: var(--color-brand); text-decoration: none; }
.login-footer a:hover { text-decoration: underline; }

/* =====================================================================
   Borrower portal dashboard (chunk: portal dashboard refresh)
   Mobile-first: stacked cards by default → 2-col at 768px → wider grid
   at 1024px. Calm, dense, modern. All styling lives here (no inline).
   ===================================================================== */

.borrower-portal-dashboard {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

/* ---------- Hero / header ---------- */

.bpd-hero {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.bpd-hero__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-brand, #4F46E5);
}
.bpd-hero__title {
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-ink-900, #0F172A);
  margin: 0;
  overflow-wrap: anywhere;
}
.bpd-hero__subtitle {
  font-size: 0.9375rem;
  color: var(--color-ink-600, #475569);
}

/* ---------- Section scaffolding ---------- */

.bpd-section {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.bpd-section__heading {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-ink-900, #0F172A);
  margin: 0;
}

/* ---------- Card primitive ---------- */

.bpd-card {
  background: #fff;
  border: 1px solid var(--color-ink-200, #E2E8F0);
  border-radius: 0.75rem;
  box-shadow: var(--shadow, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1));
  padding: 1.25rem;
  min-width: 0;
}
.bpd-card--flush {
  padding: 0;
  overflow: hidden;
}

/* ---------- Account summary cards ---------- */

.bpd-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.bpd-stat {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.bpd-stat__label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ink-600, #475569);
}
.bpd-stat__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-ink-900, #0F172A);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.bpd-stat__value--status {
  font-size: 1rem;
  font-family: var(--ws-font-sans, 'Inter', system-ui, sans-serif);
}
/* The row count under a money tile — what makes "$0.00 · no payments in this
   state" different from "$0.00" over 11,513 rows. Sans, not the money mono, so
   it cannot be mistaken for a second figure. */
.bpd-stat__meta {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--color-ink-600, #475569);
  font-family: var(--ws-font-sans, 'Inter', system-ui, sans-serif);
}

/* ---------- Quick actions ---------- */

.bpd-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.bpd-action {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: #fff;
  border: 1px solid var(--color-ink-200, #E2E8F0);
  border-radius: 0.75rem;
  box-shadow: var(--shadow, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1));
  padding: 1.125rem 1.25rem;
  text-decoration: none;
  color: var(--color-ink-900, #0F172A);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}
.bpd-action:hover {
  border-color: var(--color-brand, #4F46E5);
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
  transform: translateY(-1px);
}
.bpd-action--primary {
  background: var(--color-brand, #4F46E5);
  border-color: var(--color-brand, #4F46E5);
  color: #fff;
}
.bpd-action--primary:hover {
  background: var(--color-brand-dark, #3730A3);
  border-color: var(--color-brand-dark, #3730A3);
}
.bpd-action__title {
  font-size: 0.9375rem;
  font-weight: 600;
}
.bpd-action__desc {
  font-size: 0.8125rem;
  color: var(--color-ink-600, #475569);
}
.bpd-action--primary .bpd-action__desc {
  color: rgba(255, 255, 255, 0.85);
}

/* ---------- Recent activity ---------- */

.bpd-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.bpd-empty {
  padding: 2.5rem 1.25rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-ink-600, #475569);
}

/* ---------- Focus visibility (keyboard) ---------- */

.bpd-action:focus-visible,
.borrower-portal-dashboard a:focus-visible,
.borrower-portal-dashboard button:focus-visible {
  outline: 2px solid var(--color-brand, #4F46E5);
  outline-offset: 2px;
  border-radius: 0.5rem;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .bpd-action {
    transition: none;
  }
  .bpd-action:hover {
    transform: none;
  }
}

/* ---------- Responsive: tablet (2 columns) ---------- */

@media (min-width: 768px) {
  .bpd-cards--summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bpd-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .bpd-hero__title {
    font-size: 1.75rem;
  }
}

/* ---------- Responsive: desktop (wider grid) ---------- */

@media (min-width: 1024px) {
  .bpd-cards--summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .bpd-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Extracted from portal/base.html inline style - chunk AUTO-HEAL-DOM-009 */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
body { animation: fadeIn 0.3s ease-in; }

#nav-links {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.875rem;
}

#nav-hamburger { display: none; }

@media (max-width: 640px) {
  #nav-links {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 3.5rem;
    right: 0;
    background: #fff;
    border: 1px solid var(--color-ink-200, #E2E8F0);
    border-radius: 0 0 0.5rem 0.5rem;
    padding: 0.875rem 1rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    z-index: 30;
    min-width: 180px;
  }
  #nav-links.open { display: flex; }
  #nav-hamburger { display: flex; }
}

/* =====================================================================
   Borrower "My Loan" home  (the calm one-screen homeowner view)
   Answers, top to bottom: what do I owe & when → balances → did my last
   payment land → where did it go → what can I do.
   Restrained color: accent (brand/green/amber/red) is reserved for STATE
   and ACTIONS only. Money uses JetBrains Mono tabular. Mobile-first.
   ===================================================================== */

/* =====================================================================
   Borrower "My Loan" home  (warm, calm, one confident answer)
   Scope: everything here is borrower-home-only (.loan-home + its parts).
   Warm paper surface + a single hero focal point, deliberately NOT the
   cold identical-white-card stack. All money is pre-formatted server-side.
   ===================================================================== */

/* Warm the page only under borrower-facing pages — never the lender portal. */
body:has(.loan-home),
body:has(.stmt-archive) { background-color: #F5F4F0; }

.loan-home {
  /* Self-contained warm token set (paper + warm ink), so the borrower home
     reads like a statement on paper, not a cold admin panel. */
  --paper: #F5F4F0;
  --line: #EAE7E0;
  --line-strong: #DFDACF;
  --ink-900: #201E1A;
  --ink-800: #35312B;
  --ink-700: #4A453D;
  --ink-500: #7A7365;
  --ink-400: #A39B8C;
  --brand: #4F46E5;
  --brand-deep: #4338CA;
  --shadow-soft: 0 1px 2px rgba(32,30,26,0.04), 0 10px 30px -14px rgba(32,30,26,0.14);

  max-width: 60rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  color: var(--ink-700);
}

/* ---------- Shared borrower-home buttons (namespaced, no collision) ---------- */
.loan-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.62rem 1.15rem;
  border-radius: 0.7rem;
  background: var(--brand);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.loan-btn:hover { background: var(--brand-deep); transform: translateY(-1px); }
.loan-btn--ghost {
  background: transparent;
  color: var(--brand);
  padding: 0.62rem 0.85rem;
}
.loan-btn--ghost:hover { background: rgba(79, 70, 229, 0.07); transform: none; }

/* ============================= HERO ============================= */
.loan-hero {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 1.25rem;
  box-shadow: var(--shadow-soft);
  padding: 1.6rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
}
@media (min-width: 820px) {
  .loan-hero {
    grid-template-columns: minmax(0, 1.55fr) minmax(15rem, 1fr);
    gap: 2.5rem;
    padding: 2rem 2.25rem;
    align-items: stretch;
  }
}

.loan-hero__lead { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.loan-hero__kicker {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0;
}
.loan-hero__address {
  font-size: 1.5rem;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  margin: 0.1rem 0 0;
  overflow-wrap: anywhere;
}
@media (min-width: 820px) { .loan-hero__address { font-size: 1.7rem; } }
.loan-hero__acct {
  font-size: 0.8125rem;
  color: var(--ink-500);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  margin: 0;
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  align-items: baseline;
}
.loan-hero__dot { color: var(--ink-400); }

.loan-hero__standing {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.9rem;
}
.standing-dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: var(--ink-400);
}
.standing-dot--current  { background: #10B981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16); }
.standing-dot--past_due { background: #F59E0B; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); }
.loan-hero__headline {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink-900);
}
.loan-hero__detail {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-500);
  margin: 0.15rem 0 0;
}

.loan-hero__due { margin-top: 1.1rem; display: flex; flex-direction: column; gap: 0.15rem; }
.loan-hero__due-amount {
  font-size: 2.5rem;
  line-height: 1;
  font-weight: 700;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
}
.loan-hero__due-amount--none { font-size: 1.125rem; font-weight: 600; color: var(--ink-700); letter-spacing: 0; }
.loan-hero__due-meta { font-size: 0.8125rem; color: var(--ink-500); }
.loan-hero__due-meta strong { color: var(--ink-800); font-weight: 600; }

.loan-hero__cta { display: flex; gap: 0.6rem; align-items: center; margin-top: 1.25rem; flex-wrap: wrap; }

/* Balances live in a warm inset panel beside the lead — a different surface
   treatment on purpose, so the page isn't a stack of identical white cards. */
.loan-hero__glance {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  background: #FBFAF7;
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 1.25rem 1.3rem;
  justify-content: center;
}
.glance { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.glance__label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.glance__value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.glance__hint { font-size: 0.8125rem; color: var(--ink-500); line-height: 1.4; }
.glance__rule { height: 1px; background: var(--line-strong); }

/* ======================= RECEIVED (reassurance + where it went) ======= */
.received {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  background: #F0FAF3;
  border: 1px solid #CDEBD8;
  border-radius: 1rem;
  padding: 1.1rem 1.25rem;
}
.received__mark {
  flex: none;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 9999px;
  background: #10B981;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
}
.received__body { min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.received__title { font-size: 0.9375rem; font-weight: 600; color: #123B27; margin: 0; }
.received__title .money { font-weight: 700; }
.received__sub { font-size: 0.8125rem; color: #3E6A4F; margin: 0; }
.received__sub--muted { color: #4B7359; }
.received__split { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 0.45rem; }
.received__split-item {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  background: #fff;
  border: 1px solid #D6ECDD;
  border-radius: 0.6rem;
  padding: 0.28rem 0.6rem;
}
.received__split-label { font-size: 0.75rem; font-weight: 600; color: #3E6A4F; }
.received__split-amt { font-size: 0.8125rem; font-weight: 600; color: #123B27; font-variant-numeric: tabular-nums; }

/* ============================ ACTIVITY ============================ */
.activity { display: flex; flex-direction: column; gap: 0.7rem; }
.activity__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0 0.3rem;
}
.activity__title { font-size: 1rem; font-weight: 600; color: var(--ink-900); margin: 0; }
.activity__link { font-size: 0.8125rem; font-weight: 600; color: var(--brand); text-decoration: none; white-space: nowrap; }
.activity__link:hover { text-decoration: underline; }
.activity__list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 1rem;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.activity__row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.15rem;
  border-bottom: 1px solid var(--line);
}
.activity__row:last-child { border-bottom: none; }
.activity__tick { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: #10B981; opacity: 0.55; }
.activity__meta { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; margin-right: auto; }
.activity__date { font-size: 0.875rem; font-weight: 600; color: var(--ink-900); }
.activity__note { font-size: 0.8125rem; color: var(--ink-500); }
.activity__amt { font-size: 0.9375rem; font-weight: 600; color: var(--ink-900); font-variant-numeric: tabular-nums; white-space: nowrap; }
.activity__row--reversed .activity__tick { background: #DC2626; opacity: 0.6; }
.activity__row--reversed .activity__date,
.activity__row--reversed .activity__amt { color: var(--ink-400); text-decoration: line-through; }
.activity__row--reversed .activity__note { color: #B91C1C; }

/* ============================== HELP ============================== */
.loan-help { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 640px) {
  .loan-help { grid-template-columns: 1fr 1fr; }
  .loan-help__howto { grid-column: 1 / -1; }
}
.loan-help__item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  padding: 0.9rem 1.05rem;
  text-decoration: none;
  color: var(--ink-900);
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
  cursor: pointer;
}
.loan-help__item:hover { border-color: var(--line-strong); box-shadow: var(--shadow-soft); transform: translateY(-1px); }
.loan-help__item-icon {
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.65rem;
  background: #F1EFE9;
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
}
.loan-help__item-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; margin-right: auto; }
.loan-help__item-title { font-size: 0.9375rem; font-weight: 600; }
.loan-help__item-desc { font-size: 0.8125rem; color: var(--ink-500); }
.loan-help__chevron { flex: none; color: var(--ink-400); transition: transform 200ms ease; }

.loan-help__howto { min-width: 0; }
.loan-help__howto summary { list-style: none; }
.loan-help__howto summary::-webkit-details-marker { display: none; }
.loan-help__howto[open] .loan-help__chevron { transform: rotate(180deg); }
.loan-help__howto[open] .loan-help__item--summary {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  transform: none;
}
.loan-help__howto-body {
  border: 1px solid var(--line-strong);
  border-top: none;
  border-radius: 0 0 0.9rem 0.9rem;
  padding: 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-700);
  background: #fff;
}
.loan-help__howto-body p { margin: 0; }
.loan-help__howto-body .loan-btn--ghost { align-self: flex-start; padding-left: 0; }

/* ---------- Empty / back / focus ---------- */
.loan-empty {
  background: #fff;
  border: 1px dashed var(--line-strong);
  border-radius: 1rem;
  padding: 1.5rem 1.25rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--ink-500);
}
.loan-empty p { margin: 0; }
.loan-home__back { margin-top: 0.25rem; }
.loan-home__back .back-link { margin-bottom: 0; }

.loan-home a:focus-visible,
.loan-home summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .loan-btn, .loan-help__item, .loan-help__chevron { transition: none; }
  .loan-btn:hover, .loan-help__item:hover { transform: none; }
}

/* =====================================================================
   Borrower statement archive  (legible, credit-aware, downloadable)
   ===================================================================== */

.stmt-archive {
  /* Warm token override — redefining the ink/shadow custom properties here
     cascades warmth to every child (text, borders, even the status badges),
     so the archive matches the warm "My Loan" home instead of cold slate. */
  --color-ink-900: #201E1A;
  --color-ink-800: #35312B;
  --color-ink-700: #4A453D;
  --color-ink-600: #4A453D;
  --color-ink-500: #7A7365;
  --color-ink-400: #A39B8C;
  --color-ink-300: #DFDACF;
  --color-ink-200: #EAE7E0;
  --color-ink-100: #F1EFE9;
  --shadow: 0 1px 2px rgba(32, 30, 26, 0.04), 0 10px 30px -14px rgba(32, 30, 26, 0.14);

  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 52rem;
  margin: 0 auto;
}
.stmt-archive__head { display: flex; flex-direction: column; gap: 0.125rem; }
.stmt-archive__title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-ink-900, #0F172A);
  margin: 0;
}
.stmt-archive__sub { font-size: 0.875rem; color: var(--color-ink-500, #64748B); }

/* ---------- Summary header ---------- */
.stmt-archive__summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
  background: #FBFAF7;
  border: 1px solid var(--color-ink-200, #E2E8F0);
  border-radius: 1rem;
  box-shadow: var(--shadow);
  padding: 1.25rem 1.4rem;
}
.stmt-archive__summary-cell { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.stmt-archive__summary-label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-500, #64748B);
}
.stmt-archive__summary-value {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-ink-900, #0F172A);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* ---------- Statement rows ---------- */
.stmt-archive__list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid var(--color-ink-200, #E2E8F0);
  border-radius: 1rem;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.stmt-archive__row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "lead   amount"
    "status doc";
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-ink-100, #F1F5F9);
}
.stmt-archive__row:last-child { border-bottom: none; }
.stmt-archive__row-lead { grid-area: lead; display: flex; flex-direction: column; gap: 0.1875rem; min-width: 0; }
.stmt-archive__period {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-ink-900, #0F172A);
}
/* .stmt-archive__period-iso is GONE, not hidden. It printed the raw sort key
   ("2026-07-01") under the human month label ("July 2026") on every row of the
   borrower's statement archive, in the monospace family this sheet otherwise
   reserves for .money — a machine key styled as a figure, on a consumer page.
   The one-clock ledger recorded this entry as "PRE-FORMATTED BY THE PRODUCER …
   cannot be closed from a template"; that excuse was wrong, because the human
   form was already rendered on the line immediately above it. The repair was
   deleting the span, and it needed no humantime change at all. */
.stmt-archive__breakdown {
  font-size: 0.75rem;
  color: var(--color-ink-500, #64748B);
  font-variant-numeric: tabular-nums;
}
.stmt-archive__row-amount {
  grid-area: amount;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.0625rem;
  text-align: right;
}
.stmt-archive__amount {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-ink-900, #0F172A);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.stmt-archive__amount--credit { color: var(--color-money-in, #047857); }
.stmt-archive__amount-label {
  font-size: 0.6875rem;
  color: var(--color-ink-400, #94A3B8);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stmt-archive__row-status { grid-area: status; }
.stmt-archive__row-doc { grid-area: doc; justify-self: end; }
.stmt-archive__download { white-space: nowrap; }
.stmt-archive__nodoc {
  font-size: 0.75rem;
  color: var(--color-ink-400, #94A3B8);
}

.stmt-archive__tax { display: flex; flex-direction: column; gap: 0.625rem; }
.stmt-archive__section-title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-ink-900, #0F172A);
  margin: 0.5rem 0 0;
}
.stmt-archive__row--tax { grid-template-areas: "lead amount" "lead doc"; }

.stmt-archive__empty {
  background: #fff;
  border: 1px dashed var(--color-ink-300, #CBD5E1);
  border-radius: 1rem;
  padding: 1.5rem 1.25rem;
  text-align: center;
  font-size: 0.875rem;
  color: var(--color-ink-600, #475569);
}
.stmt-archive__empty p { margin: 0; }
.stmt-archive__back { margin-top: 0.25rem; }
.stmt-archive__back .back-link { margin-bottom: 0; }

.stmt-archive a:focus-visible {
  outline: 2px solid var(--color-brand, #4F46E5);
  outline-offset: 2px;
  border-radius: 0.5rem;
}

/* ---------- Wider screens: single-row layout ---------- */
@media (min-width: 640px) {
  .stmt-archive__summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stmt-archive__row {
    grid-template-columns: 1fr auto 6rem 8rem;
    grid-template-areas: "lead amount status doc";
  }
  .stmt-archive__row-status { justify-self: center; }
  .stmt-archive__row--tax { grid-template-areas: "lead amount status doc"; }
}

/* =========================================================================
   IMPORT HORIZON — app/templates/portal/_data_freshness.html
   -------------------------------------------------------------------------
   Deliberately NOT a whisper. The staff equivalent on /bills sits above an
   Approve button; this one sits above a past-due demand aimed at a consumer,
   so it is given the amber weight the page's own "past due" hero uses rather
   than the grey a footnote would get. Amber, not red: the data being 45 days
   old is a caveat on every figure, not an alarm about this borrower.
   ========================================================================= */
.portal-freshness {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-money-warn, #D97706);
  border-left-width: 4px;
  border-radius: 0.75rem;
  background: color-mix(in srgb, var(--color-money-warn, #D97706) 7%, transparent);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-ink-700, #334155);
}
.portal-freshness--unknown {
  border-color: var(--color-ink-400, #94A3B8);
  background: var(--color-ink-50, #F8FAFC);
}
.portal-freshness__line { margin: 0; }
.portal-freshness__label {
  display: inline;
  font-weight: 600;
  color: var(--color-ink-900, #0F172A);
}
.portal-freshness__link {
  color: var(--color-brand, #4F46E5);
  text-decoration: underline;
}

/* =========================================================================
   OWNERSHIP REFUSAL — app/templates/portal/denied.html
   The portal's own 403 body, replacing the staff RBAC copy a borrower used to
   be shown. Plain card, no alarm colour: nothing is broken and nothing is the
   reader's fault; the page exists to say WHICH account was refused.
   ========================================================================= */
.portal-denied {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-ink-700, #334155);
}
.portal-denied p { margin: 0; }
.portal-denied a { color: var(--color-brand, #4F46E5); }
.portal-denied__ref {
  font-size: 0.8125rem;
  color: var(--color-ink-600, #475569);
}
.portal-denied__ref .tabular {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  overflow-wrap: anywhere;
}
.portal-denied__actions { margin-top: 0.25rem; }
.portal-denied-page {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}