/* EquiLien — design tokens (single source of truth). Axl dark-premium house style.
   "An instrument of record": one type scale, one 4/8px grid, a 12-stop neutral ramp,
   a 4-tier elevation scale, motion tokens, gold rationed to intent. */
@import url('/static/fonts/figtree.css');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ---- 12-stop cool-neutral ramp (the spine) ---- */
  --n-0:#0a0a0c; --n-1:#0e0e10; --n-2:#16161a; --n-3:#1c1c22; --n-4:#22222a;
  --n-5:#2a2a33; --n-6:#33333d; --n-7:#3e3e49; --n-8:#52525e; --n-9:#6f6f7a;
  --n-10:#9a9aa2; --n-11:#c4c4cc; --n-12:#f2f2ec;

  /* surfaces */
  --bg:        var(--n-1);
  --bg-deep:   var(--n-0);
  --surface:   var(--n-3);
  --surface-2: var(--n-4);
  --surface-3: var(--n-6);

  /* ink */
  --ink:     var(--n-12);
  --muted:   var(--n-10);
  --muted-2: #8a8a94;   /* bumped off --n-9 (#6f6f7a, ~4.0:1) to clear WCAG AA on dark surfaces */

  /* lines — slightly raised so flush (shadowless) tiles still separate */
  --line:        var(--n-6);
  --line-strong: var(--n-7);

  /* THE single rationed accent — interactive intent + the one hero number per view */
  --gold:      #d4a857;
  --gold-2:    #e7c074;
  --gold-soft: rgba(212, 168, 87, 0.13);
  --gold-line: rgba(212, 168, 87, 0.30);

  /* status — meaning only */
  --pos:  #63b487;   /* equity / free-and-clear / positive */
  --warn: #d2a13c;   /* HELOC band / pending */
  --neg:  #e0766a;   /* high-CLTV / delinquent / risk */

  /* interaction tints (collapse the ad-hoc gold/white hovers to these) */
  --surface-hover:  rgba(255,255,255,0.025);
  --surface-active: rgba(212,168,87,0.07);
  --scrim:          rgba(8,8,9,0.64);

  /* ---- type scale (~1.2 ratio) ---- */
  --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-base: 14px;
  --text-md: 16px; --text-lg: 20px; --text-xl: 28px; --text-display: 40px;
  --tracking-kicker: 0.14em; --tracking-tight: -0.02em;
  --measure-prose: 64ch;

  --font: Figtree, "Segoe UI", system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* ---- spacing (strict 4px grid) ---- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px; --s-9:48px; --s-10:64px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s6:48px; --s8:64px;       /* legacy aliases */
  --page-pad-x:32px; --page-pad-y:28px; --card-pad:20px; --card-pad-tight:16px; --grid-gap:16px;

  /* ---- radius ---- */
  --r-xs:4px; --r-sm:6px; --r:10px; --r-lg:14px; --r-pill:999px;

  /* ---- elevation (4 deliberate tiers) ---- */
  --elev-0: inset 0 1px 0 rgba(255,255,255,0.03);                                                            /* flush tiles — border only */
  --elev-1: inset 0 1px 0 rgba(255,255,255,0.04), 0 1px 2px rgba(0,0,0,0.34);                                /* standard card */
  --elev-2: inset 0 1px 0 rgba(255,255,255,0.055), 0 1px 1px rgba(0,0,0,0.45), 0 8px 22px rgba(0,0,0,0.34);  /* lifted / popover */
  --elev-3: inset 0 1px 0 rgba(255,255,255,0.07), 0 2px 5px rgba(0,0,0,0.5), 0 24px 56px rgba(0,0,0,0.55);   /* modal only */
  --elev: var(--elev-1); --elev-sm: var(--elev-0);                                                           /* legacy aliases */

  /* ---- motion ---- */
  --dur-fast:120ms; --dur-mid:200ms; --dur-slow:420ms;
  --ease-out: cubic-bezier(.22,1,.36,1); --ease-standard: cubic-bezier(.4,0,.2,1);
  --t-fast: var(--dur-fast); --t: var(--dur-fast); --t-slow: var(--dur-mid); --ease: var(--ease-out);  /* legacy aliases */

  /* chart ramp (gold sequential) — charts only */
  --c1:#2a2a32; --c2:#4a4536; --c3:#6e6340; --c4:#9a854a; --c5:#c39c52; --c6:#d4a857;
  /* data-magnitude fill — neutral-ending, OFF the gold accent (so gold stays "act here") */
  --fill-data: linear-gradient(90deg, #6e6340, #c39c52);
}

* { box-sizing: border-box; }
/* scrollbar-color (inherited) governs the standards/Win11 fluent-overlay scrollbar,
   which IGNORES ::-webkit-scrollbar. Thumb = just-above-bg (--n-4), track transparent. */
html, body { margin: 0; height: 100%; scrollbar-color: var(--n-4) transparent; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }

/* tabular numerals are universal for data */
.num, .v, .kpi .v, table td.r .num, .count, [data-num] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ---- typography ---- */
.kicker, .label-xs, .label-sm {
  font-family: var(--mono); text-transform: uppercase; color: var(--muted-2);
  letter-spacing: var(--tracking-kicker); font-weight: 500; line-height: 1;
}
.label-xs { font-size: var(--text-2xs); }
.label-sm, .kicker { font-size: var(--text-xs); color: var(--muted); }
.num { letter-spacing: -0.015em; font-weight: 650; }
h1, .h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; margin: 0; }
h2, .h2 { font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; margin: 0; }
h3, .h3 { font-size: var(--text-md); font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; margin: 0; }
.t-display { font-size: var(--text-display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.muted-2 { color: var(--muted-2); }

/* ---- cards ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--elev-1);
}
.card-2 { background: var(--surface-2); border:1px solid var(--line); border-radius: var(--r); box-shadow: var(--elev-0); }
.hero {
  border-top: 2px solid var(--gold);
  background: linear-gradient(180deg, var(--gold-soft), var(--surface) 60%);
}

/* ---- buttons (full state matrix) ---- */
.btn {
  font-family: var(--font); font-size: var(--text-sm); font-weight: 500;
  border-radius: var(--r-sm); padding: 9px 15px; cursor: pointer; position: relative;
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink);
  transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--surface-3); border-color: var(--n-8); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(212,168,87,0.35); }
.btn:active { transform: translateY(1px); filter: brightness(0.97); }
.btn:disabled, .btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.btn-primary {
  background: var(--gold); color: #1a1407; border: 0; font-weight: 600;
  box-shadow: 0 0 0 1px rgba(212,168,87,0.4), 0 4px 14px rgba(212,168,87,0.16);
}
.btn-primary:hover { background: var(--gold-2); box-shadow: 0 0 0 1px rgba(212,168,87,0.5), 0 6px 20px rgba(212,168,87,0.26); }
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content:''; position:absolute; inset:0; margin:auto; width:13px; height:13px; border-radius:50%;
  border:2px solid rgba(212,168,87,0.3); border-top-color: var(--gold); animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- inputs (never native widgets) ---- */
input[type=text], input[type=number], input[type=search], input[type=email], select {
  min-height: 38px; width: 100%; border-radius: var(--r-sm);
  background: var(--bg-deep); border: 1px solid var(--line-strong); color: var(--ink);
  padding: 8px 12px; font-family: var(--font); font-size: var(--text-sm); outline: none;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
input:hover, select:hover { border-color: var(--n-8); }
input:focus, select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,168,87,0.18); }
label.lbl { display:block; font-family: var(--mono); text-transform:uppercase; font-size:var(--text-2xs); letter-spacing:.12em; color: var(--muted); margin: 0 0 6px; }

/* custom checkbox */
.chk { display:flex; align-items:center; gap:9px; cursor:pointer; user-select:none; }
.chk input { position:absolute; opacity:0; }
.chk .box { width:18px; height:18px; border-radius:var(--r-xs); border:1px solid var(--line-strong); background:var(--bg-deep); display:grid; place-items:center; transition:var(--dur-fast) var(--ease); }
.chk input:checked + .box { background: var(--gold); border-color: var(--gold); }
.chk input:checked + .box::after { content:''; width:9px; height:5px; border-left:2px solid #1a1407; border-bottom:2px solid #1a1407; transform: rotate(-45deg) translate(0,-1px); }
.chk input:focus-visible + .box { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,168,87,0.4); }

/* ---- flag chips ---- */
.chip { display:inline-flex; align-items:center; gap:6px; font-size:var(--text-xs); font-weight:500; padding:3px 9px; border-radius:var(--r-pill); border:1px solid var(--line); background: var(--surface-2); color: var(--muted); }
.chip .dot { width:6px; height:6px; border-radius:50%; }
.chip.fc   { color:#bfe3cf; } .chip.fc .dot{ background: var(--pos); }
.chip.abs  { color:#e6cf9c; } .chip.abs .dot{ background: var(--warn); }
.chip.del  { color:#efb6ad; } .chip.del .dot{ background: var(--neg); }
.chip.ent  { color: var(--muted); } .chip.ent .dot{ background: var(--muted-2); }

/* ---- helpers ---- */
.row { display:flex; gap: var(--s-4); }
/* Collision guard: a <tr class="row"> (semantic table row) must stay a table row.
   Without this the generic .row flex utility above blockifies the cells and breaks
   native column alignment (each row sizes its own columns → ragged bars). */
table tr.row { display: table-row; gap: 0; }
.cluster { display:flex; flex-wrap:wrap; gap: var(--s-2); align-items:center; }
.stack { display:flex; flex-direction:column; gap: var(--s-2); }
.col { display:flex; flex-direction:column; }
.grow { flex: 1; }
.max-prose { max-width: var(--measure-prose); }
.sep { height:1px; background: var(--line); border:0; margin: var(--s-4) 0; }
.mt-1{margin-top:var(--s-1)} .mt-2{margin-top:var(--s-2)} .mt-3{margin-top:var(--s-3)} .mt-4{margin-top:var(--s-4)}
.mb-2{margin-bottom:var(--s-2)} .mb-3{margin-bottom:var(--s-3)} .mb-4{margin-bottom:var(--s-4)}
.skeleton { background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 37%, var(--surface) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--r-sm); }
@keyframes shimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }
@media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important} }
::selection { background: rgba(212,168,87,0.3); }
::-webkit-scrollbar{ width:10px; height:10px } ::-webkit-scrollbar-thumb{ background:var(--n-4); border-radius:10px } ::-webkit-scrollbar-thumb:hover{ background:var(--n-6) } ::-webkit-scrollbar-track{ background:transparent }