/* KF design system — starter tokens + base components.
   Source of truth: DESIGN.md (same directory). Square, flat, serif-400, one red. */
:root{
  --red:#D20032;          /* single accent: value, primary CTA, active tab */
  --green:#003033;        /* brand surface: top bar, tiles, report covers */
  --charcoal:#202320;     /* dark CTA bands, utility bar */
  --ink:#1f2330;          /* body text */
  --muted:#6b7290; --muted2:#8890a8;
  --grey-line:#A8A8A7;    /* disabled/secondary outlines */
  --hair:#e4e7ef;         /* THE separation device */
  --soft:#f5f6f9;         /* hover, neutral pill bg */
  --good:#0c6b58; --warn:#7a4300; --warnbg:#f8efe2;
  --chart-axis:#c4cdda; --chart-pop:#0070AA;
  --font-head:Georgia,'Times New Roman',serif;   /* display, ALWAYS weight 400 */
  --font-body:Arial,system-ui,sans-serif;
}
*{box-sizing:border-box;border-radius:0!important;box-shadow:none!important}
body{margin:0;font:14px/1.4 var(--font-body);color:var(--ink);background:#fff}

/* type */
.display,.val{font:400 36px/1.1 var(--font-head)}     /* money/figures: serif 400 */
.val{color:var(--red)}                                 /* the ONE red per view */
h2{font:500 20px/1.1 var(--font-body);margin:0 0 8px}
.eyebrow{font:600 10px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* buttons — rectangular, 14px/600, generous padding, one primary per surface */
.btn{display:inline-block;background:var(--red);color:#fff;border:0;font:600 14px var(--font-body);padding:14px 40px;cursor:pointer;text-decoration:none}
.btn.dark{background:var(--charcoal)}
.btn.ghost{background:transparent;color:var(--red);border:1px solid var(--red)}
.cta{color:var(--red);font-weight:600;text-decoration:none}
.cta::after{content:" \2192"}

/* tabs — underline bar; never pills */
.tabs{display:flex;gap:24px;border-bottom:1px solid var(--hair)}
.tabs a{padding:10px 2px;color:var(--muted);text-decoration:none;font-weight:600}
.tabs a.active{color:var(--red);border-bottom:2px solid var(--red)}
.chips{display:flex}
.chips button{background:#fff;border:1px solid var(--hair);font:600 12px var(--font-body);padding:6px 14px;cursor:pointer;color:var(--muted)}
.chips button.active{background:var(--green);border-color:var(--green);color:#fff}

/* panels — hairline box, no shadow */
.card{background:#fff;border:1px solid var(--hair);padding:16px}
.tile{background:var(--green);color:#fff;padding:24px}

/* tables — the workhorse */
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th{font:600 10px var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:6px 8px;border-bottom:1px solid var(--hair)}
td{padding:7px 8px;border-bottom:1px solid var(--hair)}
td.n,th.n{text-align:right}
tr:hover td{background:var(--soft)}

/* pills — square, tinted, NEVER red */
.pill{display:inline-block;font-size:10px;padding:1px 6px;border:1px solid var(--hair);background:var(--soft)}
.pill.good{background:#e6f2ee;color:var(--good);border-color:transparent}
.pill.warn{background:var(--warnbg);color:var(--warn);border-color:transparent}

/* forms — square, eyebrow labels above, red/green focus border no glow */
label.field{display:block}
label.field>span{display:block;font:600 10px var(--font-body);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
input,select,textarea{font:14px var(--font-body);border:1px solid var(--grey-line);padding:8px 10px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--red)}
:disabled{border-color:var(--grey-line);opacity:.55;cursor:not-allowed}

/* states */
.empty{color:var(--muted);padding:24px 0}
.error-inline{color:var(--warn)}
.skeleton{background:var(--soft);border:1px solid var(--hair);min-height:14px}