/* khs-clean.css — KHS production visual system, applied via cascade override
 * Load AFTER each page's own <style> block. Uses high-specificity + !important
 * sparingly to defeat legacy inline styles. Single source of truth for tone.
 *
 * Philosophy: monochrome with sage-deep as the only chromatic accent.
 * Status reads through small dots and one-word labels, never via colored fills.
 */

/* ════════════════════════════════════════════════════════════════════
   1 · Tokens — light-mode refresh (warm clinical neutrals)
   ════════════════════════════════════════════════════════════════════ */
:root {
  --paper:#f7f6f2;
  --surface:#ffffff;
  --surface-2:#f1efe9;
  --surface-3:#e8e5db;
  --ink:#15201b;
  --ink-2:#3a423e;
  --ink-3:#6c736e;
  --rule:#e2ddd0;
  --rule-2:#c9c4b5;
  --sage:#5d6e52;
  --sage-deep:#3f4d38;
  --sage-soft:#c9d2bb;
  --sage-tint:#eef0e6;
  --coral:#a8442f;
  --coral-soft:#f3e6e1;
  --ocean:#3f637c;
  --ocean-soft:#e6ecf0;
  --amber:#a07426;
  --amber-soft:#f0e8d4;
  --plum:#6a4d68;
  /* sidebar — wireframe / no fill */
  --nav-bg:#f7f6f2;
  --nav-bg-2:transparent;
  --nav-border:#e2ddd0;
  --nav-text:#15201b;
  --nav-text-mute:#3a423e;
  --nav-text-dim:#6c736e;
  --nav-glyph:#6c736e;
  --nav-hover:#f1efe9;
  --nav-active:transparent;
  --nav-divider:#e2ddd0;
  /* additional production tokens */
  --shadow-sm:0 1px 2px rgba(21,32,27,.04);
  --shadow-md:0 2px 8px rgba(21,32,27,.06);
  --focus-ring:0 0 0 3px rgba(63,77,56,.18);
}

/* ════════════════════════════════════════════════════════════════════
   2 · Buttons
   ════════════════════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--ink); background:var(--ink); color:var(--paper);
  border-radius:6px; padding:7px 13px;
  font-family:"Inter",system-ui,sans-serif; font-size:13px; font-weight:500;
  letter-spacing:-0.005em; cursor:pointer; text-decoration:none;
  transition:background .12s, border-color .12s, box-shadow .12s;
}
.btn:hover { background:#000; }
.btn:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.btn.ghost {
  background:transparent; color:var(--ink); border-color:var(--rule-2);
}
.btn.ghost:hover { background:var(--surface-2); border-color:var(--ink); }
.btn.coral,
.btn.sage {
  background:var(--sage-deep); border-color:var(--sage-deep); color:#fff;
}
.btn.coral:hover, .btn.sage:hover { background:#2f3a2a; border-color:#2f3a2a; }
.btn.sm { padding:5px 10px; font-size:12px; border-radius:5px; }
.btn.lg { padding:10px 18px; font-size:14px; }

/* ════════════════════════════════════════════════════════════════════
   3 · Pills / status tags — neutral background, status via dot only
   ════════════════════════════════════════════════════════════════════ */
.pill {
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--rule); border-radius:4px;
  padding:4px 9px; font-size:11.5px;
  background:var(--surface); color:var(--ink-2);
  font-weight:500; line-height:1;
}
.pill .dot {
  width:6px; height:6px; border-radius:50%;
  display:inline-block; background:var(--ink-3);
}
.pill.crit,
.pill.warn,
.pill.ok,
.pill.info {
  background:var(--surface) !important;
  border-color:var(--rule) !important;
  color:var(--ink) !important;
}
.pill.crit .dot { background:var(--coral) !important; }
.pill.warn .dot { background:var(--amber) !important; }
.pill.ok   .dot { background:var(--sage) !important; }
.pill.info .dot { background:var(--ocean) !important; }
.pill.active {
  background:var(--ink) !important; color:var(--paper) !important;
  border-color:var(--ink) !important;
}
.pill.active .dot { background:var(--paper) !important; }

/* ════════════════════════════════════════════════════════════════════
   4 · Code chips — outlined, never filled with color
   ════════════════════════════════════════════════════════════════════ */
.code-chip,
.code-tag {
  display:inline-block;
  background:transparent !important; color:var(--ink-2) !important;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:10.5px; letter-spacing:.04em;
  padding:2px 6px; border-radius:3px;
  font-weight:600; border:1px solid var(--rule-2) !important;
}
.code-chip.alt, .code-chip.ocean, .code-chip.plum,
.code-tag.cls, .code-tag.respite, .code-tag.skill {
  background:transparent !important; color:var(--ink-2) !important;
  border-color:var(--rule-2) !important;
}

/* ════════════════════════════════════════════════════════════════════
   5 · Cards — tighter radius, no big shadows
   ════════════════════════════════════════════════════════════════════ */
.card {
  background:var(--surface); border:1px solid var(--rule);
  border-radius:6px; padding:18px 20px;
}
.card h2 {
  font-family:"Inter",sans-serif; font-weight:600;
  font-size:15px; margin:0 0 2px; letter-spacing:-0.005em;
  display:flex; align-items:baseline; gap:10px; color:var(--ink);
}
.card h2 .kicker { display:none; }
.card .desc {
  font-size:12.5px; color:var(--ink-3); margin-bottom:14px;
}

/* ════════════════════════════════════════════════════════════════════
   6 · KPI strip — flush row, no floating tiles
   ════════════════════════════════════════════════════════════════════ */
.kpis {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0; padding:0; border-bottom:1px solid var(--rule);
  background:var(--surface);
}
.kpi {
  background:var(--surface); border:0;
  border-right:1px solid var(--rule);
  border-radius:0; padding:18px 22px;
  display:flex; flex-direction:column; gap:6px;
  position:relative; overflow:hidden;
}
.kpi:last-child { border-right:0; }
.kpi .v {
  font-family:"Inter",sans-serif; font-size:28px;
  line-height:1.05; font-weight:600;
  letter-spacing:-0.022em; color:var(--ink) !important;
}
.kpi .v.crit, .kpi .v.ok, .kpi .v.warn { color:var(--ink) !important; }
@media(max-width:1100px) {
  .kpis { grid-template-columns:repeat(2,1fr); }
  .kpi:nth-child(odd) { border-right:1px solid var(--rule); }
  .kpi:nth-child(2n) { border-right:0; }
  .kpi:nth-child(-n+2) { border-bottom:1px solid var(--rule); }
}

/* ════════════════════════════════════════════════════════════════════
   7 · Hero / greeting band — Inter not Fraunces, smaller
   ════════════════════════════════════════════════════════════════════ */
.greet h1,
.hero h1,
.page-head h1,
.topbar h1 {
  font-family:"Inter",sans-serif !important; font-weight:600;
  letter-spacing:-0.018em; color:var(--ink);
}
.greet h1 { font-size:22px; margin:0 0 4px; }
.hero h1 { font-size:24px; margin:0 0 6px; }
.page-head h1 { font-size:22px; }
.topbar h1 { font-size:20px; }
.greet h1 .accent { color:var(--ink) !important; }
.greet { background:var(--paper); padding:20px 28px 18px; }

/* ════════════════════════════════════════════════════════════════════
   8 · Triage feed — tiny status dot replaces tile
   ════════════════════════════════════════════════════════════════════ */
.feed .item {
  display:grid !important; grid-template-columns:14px 1fr auto !important;
  gap:12px; padding:12px 0; border-top:1px solid var(--rule);
  align-items:flex-start;
}
.feed .item:first-child { border-top:0; }
.feed .marker {
  width:8px !important; height:8px !important;
  border-radius:50% !important; background:var(--ink-3) !important;
  font-size:0 !important; color:transparent !important;
  flex-shrink:0; margin-top:7px;
  align-self:flex-start; justify-self:center;
  display:block !important;
}
.feed .marker.crit { background:var(--coral) !important; }
.feed .marker.warn { background:var(--amber) !important; }
.feed .marker.info { background:var(--ocean) !important; }
.feed .marker.ok   { background:var(--sage) !important; }

/* ════════════════════════════════════════════════════════════════════
   9 · Avatars — neutral, Inter not Fraunces
   ════════════════════════════════════════════════════════════════════ */
.av-tiny, .av-sm,
table.roster .av,
table.case .av,
.leader .av,
.row .av,
.who-card .av,
.preview-hero .av-lg,
.qp .av,
.persona-card .av {
  background:var(--surface-2) !important;
  color:var(--ink-2) !important;
  border:1px solid var(--rule) !important;
  font-family:"Inter",sans-serif !important;
  font-weight:500 !important;
  letter-spacing:.02em !important;
}
.av-tiny.coral, .av-tiny.ocean, .av-tiny.plum, .av-tiny.neutral,
.av-sm,
table.roster .av[style],
table.case .av[style],
.leader .av[style],
.row .av[style],
.qp .av[style],
.persona-card .av[style] {
  background:var(--surface-2) !important;
  color:var(--ink-2) !important;
  border-color:var(--rule) !important;
}

/* ════════════════════════════════════════════════════════════════════
   10 · Util bars (single thin bar, no border)
   ════════════════════════════════════════════════════════════════════ */
.util .bar,
.burn-cell .bar,
.auth-meter,
.meter,
.alert-meter .bar,
.bar-line {
  height:4px !important; border:0 !important;
  background:var(--surface-2) !important;
  border-radius:2px !important; overflow:hidden;
}
.util .bar .fill,
.auth-meter .fill,
.meter .fill,
.alert-meter .bar .fill,
.bar-line .fl,
.burn-cell .bar .actual {
  background:var(--sage) !important;
}
.util .bar .fill.warn, .auth-meter .fill.warn, .meter .fill.warn,
.bar-line .fl.warn, .burn-cell .bar .actual.warn {
  background:var(--amber) !important;
}
.util .bar .fill.crit, .auth-meter .fill.crit, .meter .fill.crit,
.bar-line .fl.crit, .burn-cell .bar .actual.crit {
  background:var(--coral) !important;
}
.util .pct { color:var(--ink) !important; }
.util .pct.crit { color:var(--ink) !important; font-weight:600; }
.util .pct.warn { color:var(--ink) !important; }
.util .pct.ok   { color:var(--ink) !important; }

/* ════════════════════════════════════════════════════════════════════
   11 · Status chips (in tables) — neutral border, dot color
   ════════════════════════════════════════════════════════════════════ */
.status-chip,
.stat-pill {
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; padding:2px 8px;
  border-radius:4px !important; font-weight:500;
  background:var(--surface) !important;
  border:1px solid var(--rule) !important;
  color:var(--ink-2) !important;
}
.status-chip .dot, .stat-pill .dot {
  width:5px; height:5px; border-radius:50%;
}
.status-chip.paid .dot      { background:var(--sage) !important; }
.status-chip.submitted .dot { background:var(--ocean) !important; }
.status-chip.denied .dot    { background:var(--coral) !important; }
.status-chip.draft .dot,
.stat-pill.draft .dot       { background:var(--amber) !important; }
.status-chip.active .dot    { background:var(--sage) !important; }
.status-chip.renewal .dot   { background:var(--amber) !important; }
.status-chip.expired .dot   { background:var(--ink-3) !important; }
.status-chip.pending .dot   { background:var(--ocean) !important; }
.status-chip.paid,
.status-chip.submitted,
.status-chip.denied,
.status-chip.draft,
.status-chip.active,
.status-chip.renewal,
.status-chip.expired,
.status-chip.pending,
.stat-pill,
.stat-pill.draft {
  background:var(--surface) !important;
  color:var(--ink-2) !important;
}

/* ════════════════════════════════════════════════════════════════════
   12 · Quick actions — neutral glyph tiles
   ════════════════════════════════════════════════════════════════════ */
.quick a {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border:1px solid var(--rule);
  border-radius:6px; text-decoration:none; color:var(--ink);
  background:var(--surface);
  transition:border-color .12s, background .12s;
}
.quick a:hover { border-color:var(--ink); background:var(--surface-2); transform:none !important; }
.quick a .gly,
.quick a .gly.coral, .quick a .gly.ocean, .quick a .gly.amber {
  width:30px !important; height:30px !important;
  border-radius:5px !important;
  background:var(--surface-2) !important; color:var(--ink-2) !important;
  border:1px solid var(--rule) !important;
  font-family:"Inter",sans-serif !important;
  font-weight:500 !important; font-size:14px !important;
}

/* ════════════════════════════════════════════════════════════════════
   13 · Funnel — neutral grays + sage for "paid" only
   ════════════════════════════════════════════════════════════════════ */
.funnel .stage .bar {
  background:var(--ink-3) !important;
  border-radius:2px 2px 0 0 !important;
}
.funnel .stage .bar.draft { background:var(--rule-2) !important; }
.funnel .stage .bar.submitted { background:var(--ink-3) !important; }
.funnel .stage .bar.paid { background:var(--sage-deep) !important; }
.funnel .stage .bar.denied { background:var(--coral) !important; }
.funnel .stage .v {
  font-family:"Inter",sans-serif !important; font-size:16px;
  font-weight:600 !important; letter-spacing:-0.01em;
}

/* ════════════════════════════════════════════════════════════════════
   14 · Rhythm chart — neutral bars
   ════════════════════════════════════════════════════════════════════ */
.rhythm .bar { background:var(--rule-2) !important; }
.rhythm .bar.now { background:var(--sage-deep) !important; }
.rhythm .bar.proj {
  background:repeating-linear-gradient(135deg, var(--surface-2) 0 4px, var(--rule-2) 4px 8px) !important;
}

/* ════════════════════════════════════════════════════════════════════
   15 · Topbar refinements
   ════════════════════════════════════════════════════════════════════ */
.topbar {
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.topbar .search {
  border-radius:6px;
  border:1px solid var(--rule);
}
.topbar .search:focus-within {
  border-color:var(--ink);
  box-shadow:var(--focus-ring);
}

/* ════════════════════════════════════════════════════════════════════
   16 · Tables — clean, fixed layout, no overflow spillage
   ════════════════════════════════════════════════════════════════════ */
table.roster,
table.case,
table.log,
table.months,
table.claims,
table.auths {
  width:100%; border-collapse:collapse;
  font-family:"Inter",sans-serif;
}
table.roster .who,
table.case .who { min-width:0; }
table.roster .who > div:last-child,
table.case .who > div:last-child { min-width:0; flex:1; }
table.roster td, table.roster th,
table.case td, table.case th {
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
table.roster th, table.case th, table.log th,
table.months th, table.claims th, table.auths th {
  background:var(--surface-2);
  color:var(--ink-3); font-weight:500;
  font-family:"JetBrains Mono",monospace;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  border-bottom:1px solid var(--rule-2);
}
table.roster tr:hover td,
table.case tr:hover td,
table.log tr:hover td,
table.auths tr:hover td { background:#fdfaef; cursor:default; }
table.auths tr.crit-row td { background:#faf4ef; }
table.auths tr.warn-row td { background:#fbf8e9; }

/* ════════════════════════════════════════════════════════════════════
   17 · Forms (inputs, selects, textareas) — clean focus
   ════════════════════════════════════════════════════════════════════ */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], input[type="date"], input[type="time"],
textarea, select {
  font-family:"Inter",sans-serif; font-size:14px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:none; border-color:var(--ink) !important;
  box-shadow:var(--focus-ring);
}
a:focus-visible { outline:2px solid var(--ink); outline-offset:2px; border-radius:2px; }

/* ════════════════════════════════════════════════════════════════════
   18 · Sidebar — wireframe treatment (no color fill)
   ════════════════════════════════════════════════════════════════════ */
aside.nav {
  background:var(--paper) !important;
  color:var(--ink) !important;
  border-right:1px solid var(--rule) !important;
}
aside.nav .brand img {
  background:transparent !important;
  border:1px solid var(--rule) !important;
}
aside.nav .brand .name {
  font-family:"Inter",sans-serif !important;
  font-weight:600; letter-spacing:.04em;
  color:var(--ink) !important;
}
aside.nav .brand .sub { color:var(--ink-3) !important; }
aside.nav .nav-search {
  background:transparent !important;
  border:1px solid var(--rule-2) !important;
  color:var(--ink-3) !important;
  border-radius:6px !important;
}
aside.nav .group-label { color:var(--ink-3) !important; }
aside.nav a {
  background:transparent !important;
  color:var(--ink-2) !important;
  border-radius:6px;
}
aside.nav a:hover {
  background:var(--surface-2) !important;
  color:var(--ink) !important;
}
aside.nav a.active {
  background:transparent !important;
  color:var(--ink) !important;
  font-weight:600 !important;
  border-radius:0 !important;
  box-shadow:inset 2px 0 0 var(--ink) !important;
}
aside.nav a .glyph { color:var(--ink-3) !important; }
aside.nav .me {
  border-top:1px solid var(--rule) !important;
}
aside.nav .me .av {
  background:transparent !important;
  border:1px solid var(--rule-2) !important;
  color:var(--ink-2) !important;
}
aside.nav .me .me-name { color:var(--ink) !important; }
aside.nav .me .me-role { color:var(--ink-3) !important; }

/* ════════════════════════════════════════════════════════════════════
   19 · Reduced motion
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   20 · Dark-mode adjustments for the clean treatment
   ════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --paper:#15201b;
  --surface:#1e2823;
  --surface-2:#27322c;
  --surface-3:#323d36;
  --ink:#f0ecdf;
  --ink-2:#d4cfbe;
  --ink-3:#a4a79e;
  --rule:#2e3933;
  --rule-2:#3d4842;
  --sage:#9bad92;
  --sage-deep:#b6c6aa;
  --sage-soft:#3d4b3f;
  --sage-tint:#27322c;
}
[data-theme="dark"] table.roster tr:hover td,
[data-theme="dark"] table.case tr:hover td,
[data-theme="dark"] table.auths tr:hover td { background:#27322c; }
[data-theme="dark"] table.auths tr.crit-row td { background:#28221f; }
[data-theme="dark"] table.auths tr.warn-row td { background:#2a2820; }
[data-theme="dark"] .btn { color:var(--paper); border-color:var(--ink); background:var(--ink); }
[data-theme="dark"] .btn.ghost { color:var(--ink); background:transparent; border-color:var(--rule-2); }
[data-theme="dark"] .btn.ghost:hover { background:var(--surface-2); }
[data-theme="dark"] .btn.sage,
[data-theme="dark"] .btn.coral { background:var(--sage-deep); border-color:var(--sage-deep); color:#15201b; }

/* ════════════════════════════════════════════════════════════════════
   21 · Filter chips (.chip) — same neutral treatment as .pill
   ════════════════════════════════════════════════════════════════════ */
.chip {
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--rule) !important;
  border-radius:4px !important; padding:4px 9px !important;
  background:var(--surface) !important; color:var(--ink-2) !important;
  font-family:"Inter",sans-serif !important;
  font-size:11.5px !important; font-weight:500 !important;
  cursor:pointer;
}
.chip .x {
  width:6px !important; height:6px !important;
  border-radius:50% !important;
  background:var(--ink-3) !important; opacity:1 !important;
}
.chip.coral .x, .chip.coral.on .x { background:var(--coral) !important; }
.chip.amber .x, .chip.amber.on .x { background:var(--amber) !important; }
.chip.sage .x,  .chip.sage.on .x  { background:var(--sage) !important; }
.chip.on,
.chip.coral.on, .chip.amber.on, .chip.sage.on {
  background:var(--ink) !important; color:var(--paper) !important;
  border-color:var(--ink) !important;
}
.chip.on .x { background:var(--paper) !important; opacity:.7 !important; }
.chip.coral.on .x { background:var(--coral) !important; opacity:1 !important; }
.chip.amber.on .x { background:var(--amber) !important; opacity:1 !important; }

/* ════════════════════════════════════════════════════════════════════
   22 · Sidebar count badges — small, outlined, never coral
   ════════════════════════════════════════════════════════════════════ */
aside.nav a .badge {
  margin-left:auto;
  background:transparent !important;
  color:var(--ink-3) !important;
  border:1px solid var(--rule-2) !important;
  border-radius:3px !important;
  font-size:10px !important; padding:1px 6px !important;
  font-weight:500 !important;
  font-family:"JetBrains Mono",monospace !important;
  letter-spacing:.04em !important;
}
aside.nav a.active .badge,
aside.nav a:hover .badge {
  color:var(--ink) !important;
  border-color:var(--ink-3) !important;
}