/* Hey Heath Finance Portal.
   Heath's identity (warm paper, amber, Fraunces, the mark) set as a professional
   finance product: dark ink sidebar, flat controls, generous space, tabular figures.
   Status colours are the validated set and always travel with an icon and a word. */
:root {
  --bg:#F7F4EE; --panel:#FFFFFF; --panel-2:#FBF9F5; --line:#E9E2D6; --line-2:#F1ECE3;
  --ink:#1E1913; --ink-2:#4A4238; --muted:#7A7063; --faint:#A79D8F;
  --accent:#B45309; --accent-2:#9A4708; --accent-soft:#FBF0E4; --accent-ring:rgba(180,83,9,.18);
  --side:#1E1913; --side-2:#2A241C; --side-ink:#EDE6DA; --side-muted:#A69B8A;
  --good:#0ca30c; --good-text:#1E7A33; --good-bg:#EAF5EC;
  --warn:#fab219; --warn-text:#8A5A00; --warn-bg:#FDF3DC;
  --crit:#d03b3b; --crit-text:#A8302F; --crit-bg:#FBE9E8;
  --none-bg:#F1ECE3;
  --zone-ok:#D3EBD6; --zone-watch:#FAE3AE; --zone-breach:#F4CFCC;
  --seq-1:#F3E3CF; --seq-2:#E2B47E; --seq-3:#B45309;   /* one hue, light to dark: in the books, eligible, capacity */
  --mod-r:#CE4438; --mod-o:#C4712B; --mod-g:#3F8F53; --mod-b:#3B6BC0; --mod-p:#7A50BC;
  --display:'Fraunces','Libre Baskerville',Georgia,serif;
  --ui:'Inter','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --r:14px;
  --shadow:0 1px 2px rgba(30,25,19,.04), 0 6px 20px -10px rgba(30,25,19,.12);
}
* { box-sizing:border-box; }
html, body { margin:0; background:var(--bg); color:var(--ink); }
body { font:14.5px/1.55 var(--ui); font-feature-settings:"tnum" 1, "cv11" 1; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ---------- shell ---------- */
.shell { display:grid; grid-template-columns:248px 1fr; min-height:100vh; }
.side { background:var(--side); color:var(--side-ink); display:flex; flex-direction:column; padding:22px 14px; position:sticky; top:0; height:100vh; }
.brand { display:flex; align-items:center; gap:11px; padding:4px 10px 22px; color:var(--side-ink); text-decoration:none !important; }
.brand svg { width:30px; height:30px; flex:none; }
.brand b { display:block; font:600 17px/1.1 var(--display); letter-spacing:.005em; }
.brand small { display:block; font:500 11.5px/1.3 var(--ui); color:var(--side-muted); letter-spacing:.02em; }
.org { margin:0 6px 18px; padding:12px 12px; border-radius:11px; background:var(--side-2); }
.org small { display:block; font:600 10.5px/1 var(--ui); letter-spacing:.12em; text-transform:uppercase; color:var(--side-muted); margin-bottom:6px; }
.org b { font:600 13.5px/1.35 var(--ui); }
.nav { display:flex; flex-direction:column; gap:2px; }
.nav a { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px; color:var(--side-muted); font:500 14px/1 var(--ui); text-decoration:none; position:relative; }
.nav a svg { width:17px; height:17px; flex:none; opacity:.85; }
.nav a:hover { background:var(--side-2); color:var(--side-ink); }
.nav a.on { background:var(--side-2); color:#fff; }
.nav a.on::before { content:""; position:absolute; left:-14px; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:var(--accent); }
.nav .count { margin-left:auto; font:600 11px/1 var(--ui); background:var(--accent); color:#fff; padding:4px 7px; border-radius:999px; }
.side .foot { margin-top:auto; padding:14px 10px 0; border-top:1px solid #3A3228; font-size:12.5px; color:var(--side-muted); }
.side .foot .me { color:var(--side-ink); font-weight:500; margin-bottom:8px; word-break:break-all; }
.side .foot button { background:transparent; border:1px solid #4A4035; color:var(--side-ink); padding:7px 12px; font-size:12.5px; }
.side .foot button:hover { background:var(--side-2); }

.main { min-width:0; }
.top { display:flex; align-items:center; gap:16px; padding:26px 40px 0; max-width:1240px; }
.top .crumb { font:500 13px/1 var(--ui); color:var(--muted); }
.page { padding:40px 40px 72px; max-width:1240px; }
.page-head { display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap; margin:0 0 24px; }
.page-head h1 { margin:0; }
.page-head .sub { color:var(--muted); margin-top:6px; }
.page-head .actions { margin-left:auto; display:flex; gap:10px; }

/* ---------- type ---------- */
h1 { font:500 32px/1.15 var(--display); letter-spacing:-.012em; margin:0 0 8px; }
h2 { font:500 21px/1.25 var(--display); letter-spacing:-.005em; margin:30px 0 12px; }
h3 { font:600 15px/1.35 var(--ui); letter-spacing:-.005em; margin:0 0 10px; }
.eyebrow { font:600 11px/1 var(--ui); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:0 0 10px; }
.muted { color:var(--muted); } .small { font-size:13px; } .faint { color:var(--faint); }
.num { font-variant-numeric:tabular-nums; }

/* ---------- surfaces ---------- */
.card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:22px 24px; box-shadow:var(--shadow); }
.card + .card { margin-top:16px; }
.card.flush { padding:0; overflow:hidden; }
.card-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.card-head h3 { margin:0; }
.card-head .right { margin-left:auto; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:16px; }
.stack > * + * { margin-top:16px; }
.divider { height:1px; background:var(--line-2); margin:18px 0; }

/* ---------- controls ---------- */
label { display:block; font:500 13px/1 var(--ui); color:var(--ink-2); margin:18px 0 8px; }
label:first-child { margin-top:0; }
.fields label:first-child { margin-top:18px; }
form > label:first-child, .fields:first-child label:first-child { margin-top:0; }
.hint { font-size:12.5px; color:var(--muted); margin-top:6px; }
input, select, textarea { width:100%; height:42px; padding:0 13px; border:1px solid var(--line); border-radius:10px; font:14.5px var(--ui); color:var(--ink); background:var(--panel); transition:border-color .12s, box-shadow .12s; }
textarea { height:auto; padding:10px 13px; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring); }
input[type=checkbox] { width:18px; height:18px; margin:1px 10px 0 0; accent-color:var(--accent); flex:none; }
.check { display:flex; align-items:flex-start; font:400 14px/1.5 var(--ui); color:var(--ink); margin:14px 0 0; cursor:pointer; }
.fields { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:0 16px; }

button, .btn { font:600 14px/1 var(--ui); display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 18px; border-radius:10px; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; text-decoration:none !important; transition:background .12s, border-color .12s, transform .06s; white-space:nowrap; }
button:hover, .btn:hover { background:var(--accent-2); border-color:var(--accent-2); }
button:active, .btn:active { transform:translateY(1px); }
button.ghost, .btn.ghost { background:var(--panel); color:var(--ink); border-color:var(--line); }
button.ghost:hover, .btn.ghost:hover { background:var(--panel-2); border-color:#D9D0C2; }
button.quiet { background:transparent; border-color:transparent; color:var(--accent); padding:0 8px; height:34px; }
button.quiet:hover { background:var(--accent-soft); }
button.danger { background:var(--crit); border-color:var(--crit); }
button.danger:hover { background:#B83232; border-color:#B83232; }
button.sm, .btn.sm { height:34px; padding:0 13px; font-size:13px; border-radius:9px; }
button:disabled { opacity:.5; cursor:default; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:22px; }
.row.end { justify-content:flex-end; }

/* ---------- tables ---------- */
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:13px 16px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
th { font:600 11px/1.2 var(--ui); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); background:var(--panel-2); border-bottom:1px solid var(--line); }
tr:last-child td { border-bottom:0; }
tbody tr.click { cursor:pointer; }
tbody tr.click:hover td { background:var(--panel-2); }
td.r, th.r { text-align:right; } td.nw { white-space:nowrap; }
.scroll { overflow-x:auto; }

/* ---------- status ---------- */
.badge { display:inline-flex; align-items:center; gap:6px; padding:4px 10px 4px 8px; border-radius:999px; font:600 12px/1.25 var(--ui); background:var(--none-bg); color:var(--ink-2); white-space:nowrap; vertical-align:middle; }
.badge svg { width:12px; height:12px; flex:none; }
.badge.pass { background:var(--good-bg); color:var(--good-text); }
.badge.watch { background:var(--warn-bg); color:var(--warn-text); }
.badge.fail { background:var(--crit-bg); color:var(--crit-text); }
.badge.no_data, .badge.muted { background:var(--none-bg); color:var(--muted); }
.badge.accent { background:var(--accent-soft); color:var(--accent-2); }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; }

.note { padding:13px 16px; border-radius:11px; font-size:13.5px; border:1px solid var(--line); background:var(--panel-2); color:var(--ink-2); }
.note.err { background:var(--crit-bg); border-color:#F0CFCD; color:var(--crit-text); }
.note.ok { background:var(--good-bg); border-color:#CFE6D4; color:var(--good-text); }
.note.accent { background:var(--accent-soft); border-color:#F2DCC2; color:var(--accent-2); }
.toast { position:fixed; right:24px; bottom:24px; z-index:60; background:var(--ink); color:#fff; padding:13px 18px; border-radius:11px; font-size:14px; box-shadow:0 14px 40px -12px rgba(0,0,0,.4); opacity:0; transform:translateY(8px); transition:all .2s; pointer-events:none; }
.toast.on { opacity:1; transform:none; }

/* ---------- KPIs ---------- */
.kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:16px; margin-bottom:16px; }
.kpi { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; box-shadow:var(--shadow); }
.kpi .k { display:flex; align-items:center; gap:7px; font:500 12.5px/1 var(--ui); color:var(--muted); }
.kpi .v { font:500 34px/1.05 var(--display); letter-spacing:-.02em; margin-top:12px; font-variant-numeric:tabular-nums lining-nums; }
.kpi .d { font-size:12.5px; color:var(--muted); margin-top:6px; }
.kpi.crit .v { color:var(--crit-text); } .kpi.warn .v { color:var(--warn-text); }

.util { height:5px; border-radius:3px; background:var(--line-2); overflow:hidden; width:120px; margin-top:6px; }
.util i { display:block; height:100%; background:var(--ink-2); border-radius:3px; }

/* attention list */
.attn { display:flex; flex-direction:column; }
.attn a { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:13px 4px; border-bottom:1px solid var(--line-2); color:var(--ink); text-decoration:none; }
.attn a:last-child { border-bottom:0; }
.attn a:hover { background:var(--panel-2); }
.attn .t { font-weight:600; } .attn .s { font-size:12.5px; color:var(--muted); }

/* ---------- covenant charts ---------- */
.legend { display:flex; gap:18px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin:0 0 14px; }
.legend span { display:inline-flex; align-items:center; gap:7px; }
.legend i { width:14px; height:8px; border-radius:2px; display:inline-block; }
.covs { display:grid; gap:12px; }
.cov { display:grid; grid-template-columns:minmax(230px, 1fr) 2fr; gap:26px; align-items:center; padding:18px 20px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.cov .name { font:600 15px/1.3 var(--ui); }
.cov .clause { font-size:12.5px; color:var(--muted); margin-top:3px; }
.cov .obs { font:500 28px/1.1 var(--display); letter-spacing:-.02em; margin-top:12px; font-variant-numeric:tabular-nums lining-nums; }
.cov .obs small { font:500 12.5px var(--ui); color:var(--muted); letter-spacing:0; margin-left:8px; }
.cov .meta { display:flex; gap:10px; align-items:center; margin-top:10px; font-size:12.5px; color:var(--muted); flex-wrap:wrap; }
.cov svg.bullet { width:100%; height:auto; display:block; overflow:visible; }
.cov .why { font-size:12.5px; color:var(--muted); margin-top:8px; }

.caprows { display:grid; gap:15px; }
.caprow { display:grid; grid-template-columns:180px 1fr 130px; gap:18px; align-items:center; }
.caprow .lab { font-weight:600; font-size:14px; } .caprow .lab small { display:block; font-weight:400; color:var(--muted); font-size:12px; }
.caprow .val { text-align:right; font:500 18px var(--display); font-variant-numeric:tabular-nums lining-nums; }
.caprow .val small { display:block; font:500 12px var(--ui); color:var(--muted); }
.captrack { position:relative; height:26px; }
.captrack i { position:absolute; left:0; top:0; bottom:0; border-radius:0 4px 4px 0; }
.captrack i.e { background:var(--seq-1); } .captrack i.l { background:var(--seq-2); top:5px; bottom:5px; } .captrack i.c { background:var(--seq-3); top:9px; bottom:9px; }
.captrack .nd { position:absolute; inset:0; display:flex; align-items:center; font-size:12.5px; color:var(--faint); border:1px dashed var(--line); border-radius:6px; padding-left:10px; }
.tip { position:fixed; z-index:70; pointer-events:none; background:var(--ink); color:#fff; font-size:12.5px; line-height:1.5; padding:9px 11px; border-radius:9px; opacity:0; transition:opacity .1s; max-width:260px; }

/* ---------- steppers and wizards ---------- */
.stepper { display:flex; gap:0; margin:0 0 26px; counter-reset:st; }
.stepper div { flex:1; display:flex; align-items:center; gap:10px; font:500 13.5px/1.3 var(--ui); color:var(--muted); position:relative; padding-right:12px; }
.stepper div::before { counter-increment:st; content:counter(st); width:28px; height:28px; border-radius:50%; flex:none; display:grid; place-items:center; font:600 12.5px/1 var(--ui); border:1.5px solid var(--line); background:var(--panel); color:var(--muted); }
.stepper div::after { content:""; flex:1; height:1.5px; background:var(--line); margin-left:6px; }
.stepper div:last-child::after { display:none; }
.stepper div.on { color:var(--ink); font-weight:600; }
.stepper div.on::before { border-color:var(--accent); color:var(--accent); box-shadow:0 0 0 4px var(--accent-ring); }
.stepper div.done { color:var(--ink-2); }
.stepper div.done::before { content:"✓"; background:var(--accent); border-color:var(--accent); color:#fff; }
.stepper div.done::after { background:var(--accent); }

.track { list-style:none; padding:0; margin:0; }
.track li { position:relative; padding:0 0 18px 34px; font-size:14px; color:var(--muted); }
.track li::before { content:""; position:absolute; left:6px; top:3px; width:12px; height:12px; border-radius:50%; border:2px solid var(--line); background:var(--panel); }
.track li::after { content:""; position:absolute; left:12px; top:19px; bottom:2px; width:2px; background:var(--line-2); }
.track li:last-child { padding-bottom:0; } .track li:last-child::after { display:none; }
.track li.done { color:var(--ink-2); } .track li.done::before { background:var(--accent); border-color:var(--accent); }
.track li.now { color:var(--ink); font-weight:600; } .track li.now::before { border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-ring); }
.track li small { display:block; font-weight:400; color:var(--muted); font-size:12.5px; margin-top:2px; }

.drop { border:1.5px dashed #D9CDB9; border-radius:12px; background:var(--panel-2); padding:26px; text-align:center; }
.drop input[type=file] { height:auto; border:0; background:transparent; padding:0; width:auto; margin:12px auto 0; display:block; }

.wording { background:var(--panel-2); border:1px solid var(--line); border-radius:11px; padding:16px 18px; max-height:280px; overflow:auto; font:14px/1.65 var(--display); color:var(--ink-2); }
.qr { background:#fff; padding:10px; display:inline-block; border:1px solid var(--line); border-radius:12px; }
.qr img { width:176px; height:176px; display:block; }
code { font:12.5px var(--mono); background:var(--panel-2); border:1px solid var(--line-2); padding:1px 6px; border-radius:6px; word-break:break-all; }

/* tasks (Hey Heath) */
.task { display:grid; grid-template-columns:36px 1fr auto; gap:16px; align-items:start; padding:18px 20px; border-bottom:1px solid var(--line-2); }
.task:last-child { border-bottom:0; }
.task .ic { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }
.task .ic svg { width:18px; height:18px; }
.task .t { font-weight:600; } .task .s { font-size:13px; color:var(--muted); margin-top:2px; }
.task .body { grid-column:2 / 4; }

/* ---------- auth screens ---------- */
.auth { min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr; }
.auth .art { background:var(--side); color:var(--side-ink); padding:48px 56px; display:flex; flex-direction:column; position:relative; overflow:hidden; }
.auth .art::after { content:""; position:absolute; inset:0; background:
    radial-gradient(600px 400px at 85% 110%, rgba(180,83,9,.30), transparent 70%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0/56px 56px; pointer-events:none; }
.auth .art > * { position:relative; z-index:1; }
.auth .art h2 { font:500 44px/1.08 var(--display); letter-spacing:-.02em; margin:auto 0 18px; max-width:520px; color:#fff; }
.auth .art p { color:var(--side-muted); font-size:16px; max-width:460px; margin:0; }
.auth .art .pts { margin-top:34px; display:grid; gap:12px; font-size:14px; color:var(--side-ink); }
.auth .art .pts div { display:flex; gap:10px; align-items:center; }
.auth .art .pts i { width:6px; height:6px; border-radius:50%; background:var(--accent); }
.auth .form { display:flex; align-items:center; justify-content:center; padding:48px 32px; }
.auth .box { width:100%; max-width:400px; }
.auth .box h1 { font-size:30px; }
.auth .switch { margin-top:22px; font-size:13.5px; color:var(--muted); }

@media (max-width:900px) {
  .shell { grid-template-columns:1fr; }
  .side { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; padding:12px 14px; gap:6px; }
  .brand { padding:0 8px 0 0; } .org, .side .foot { display:none; }
  .nav { flex-direction:row; flex-wrap:wrap; } .nav a.on::before { display:none; }
  .top, .page { padding-left:18px; padding-right:18px; }
  .auth { grid-template-columns:1fr; } .auth .art { display:none; }
  .cov { grid-template-columns:1fr; } .caprow { grid-template-columns:1fr; gap:6px; } .caprow .val { text-align:left; }
  .stepper div span { display:none; }
}