/* ══ MODNAR design system ═══════════════════════════════════════════════════
   Shared by the operator console (/) and the borrower journey (/apply).
   Light-committed: the audience is a lender CXO on an unknown laptop.
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --paper:#F7F8FB;
  --surface:#FFFFFF;
  --surface-2:#EFF1F7;
  --surface-3:#E4E8F2;
  --ink:#0D1017;
  --ink-2:#4E5666;
  --ink-3:#7C859A;
  --rule:#E0E4EE;
  --rule-2:#C3C9D8;

  --accent:#1B39C8;
  --accent-2:#132A9E;
  --accent-soft:#E9EDFD;

  --good:#0F6B45;
  --good-soft:#E4F0EA;
  --warn:#8E5A0F;
  --warn-soft:#F7EEDE;
  --bad:#A32B1C;
  --bad-soft:#F8E7E4;
  --info:#1B39C8;
  --info-soft:#E9EDFD;

  --f-display:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-body:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --r:4px;
  --shadow-1:0 1px 2px rgba(13,16,23,.06);
  --shadow-2:0 4px 16px rgba(13,16,23,.09);
  --shadow-3:0 12px 40px rgba(13,16,23,.14);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent)}

/* ── type helpers ─────────────────────────────────────────────────────── */
.mono{font-family:var(--f-mono)}
.lbl{
  font-family:var(--f-mono);font-size:10px;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
}
.num{font-variant-numeric:tabular-nums}
.disp{font-family:var(--f-display);font-variation-settings:"wdth" 110;font-weight:700;letter-spacing:-.02em}

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 18px;border-radius:var(--r);border:1px solid transparent;
  font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;
  transition:background .14s,border-color .14s,color .14s,opacity .14s;
  white-space:nowrap;
}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:not(:disabled):hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn-ghost{background:transparent;border-color:var(--rule-2);color:var(--ink)}
.btn-ghost:not(:disabled):hover{border-color:var(--accent);color:var(--accent)}
.btn-quiet{background:transparent;border-color:transparent;color:var(--ink-2);padding:7px 10px}
.btn-quiet:hover{background:var(--surface-2);color:var(--ink)}
.btn-good{background:var(--good);color:#fff;border-color:var(--good)}
.btn-bad{background:transparent;color:var(--bad);border-color:var(--rule-2)}
.btn-bad:hover{border-color:var(--bad);background:var(--bad-soft)}
.btn-block{width:100%}
.btn-lg{padding:13px 22px;font-size:15.5px}

/* ── form fields ──────────────────────────────────────────────────────── */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field > label{font-size:13px;font-weight:600;color:var(--ink)}
.field .hint{font-size:12px;color:var(--ink-3);line-height:1.45}
.field .err{font-size:12px;color:var(--bad);line-height:1.45;display:none}
.field.invalid .err{display:block}
.field.invalid input,.field.invalid select{border-color:var(--bad)}
input[type=text],input[type=tel],input[type=date],input[type=number],select{
  width:100%;padding:11px 13px;border:1px solid var(--rule-2);border-radius:var(--r);
  background:var(--surface);font-size:15px;transition:border-color .14s,box-shadow .14s;
}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input::placeholder{color:var(--ink-3)}
input.mono{font-family:var(--f-mono);letter-spacing:.06em}
input:disabled{background:var(--surface-2);color:var(--ink-2)}

/* ── chips / pills ────────────────────────────────────────────────────── */
.pill{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.05em;
  padding:3px 8px;border-radius:2px;white-space:nowrap;
  background:var(--surface-2);border:1px solid var(--rule);color:var(--ink-2);
}
.pill-good{background:var(--good-soft);border-color:transparent;color:var(--good)}
.pill-warn{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.pill-bad{background:var(--bad-soft);border-color:transparent;color:var(--bad)}
.pill-info{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.dot{width:6px;height:6px;border-radius:50%;flex:none;background:currentColor}

/* ── card ─────────────────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r)}
.card-h{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--rule);
}
.card-h h3{margin:0;font-size:14px;font-weight:600}
.card-b{padding:16px}

/* ── spinner ──────────────────────────────────────────────────────────── */
.spin{
  width:15px;height:15px;border-radius:50%;flex:none;
  border:2px solid var(--rule-2);border-top-color:var(--accent);
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.spin-lg{width:30px;height:30px;border-width:3px}

/* ── misc ─────────────────────────────────────────────────────────────── */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.scroll-x{overflow-x:auto}