/* ══════════════════════════════════════════════════════════════════════════════════════════
   THE ACTION SYSTEM — six tiers, defined once, used everywhere.

   Loaded by includes/app_sidebar.html (so every authenticated page has it) and linked
   directly by the handful of standalone pages that do not carry the shell.

   WHY IT IS MONOCHROME
   --------------------
   The palette rests on one rule: a LANE hue is always a bar / rule / dot / underline /
   ring / series line, and a VERDICT hue is always a bare numeral. --kl-v sits 6 degrees
   from --kl-good and --kl-p sits 1 degree from --kl-bad, so hue cannot tell a reader
   whether a green thing is "Value" or "good" — only FORM can. The instant a button carries
   a saturated fill, the reader has to guess, and the whole scheme stops working.
   So: interface is monochrome. Every saturated pixel on screen is data.

   There is no gradient anywhere in this file, and there is no --kl-cta. Both are retired.

   THE SIX TIERS
   -------------
     primary      solid --kl-ink fill, --kl-bg label, pill radius, 600.  MAX ONE PER VIEW.
     secondary    transparent, 1px --kl-line-strong, --kl-ink label.
     quiet        transparent, 1px --kl-line, --kl-ink-2 label.          <- THE DEFAULT
     text         no container, 1px underline, --kl-mut label.
     destructive  a quiet container with a --kl-danger-ink label. Never a filled red button.
     disabled     the container stays, the label drops to --kl-faint. Never opacity on the
                  whole node — a ghosted button reads as a rendering bug, not as a state.

   These classes deliberately declare NO padding, NO font-size and NO width. They are a
   colour contract only, so adding one to an existing button cannot move or resize it.
   ══════════════════════════════════════════════════════════════════════════════════════ */

:root{
  /* The one colour this system needs that the nine tokens do not already carry: a red that
     is legible as a LABEL on a dark surface. --kl-bad is tuned for a numeral at 600 weight
     and goes muddy as button text, and it must stay reserved for verdicts anyway. */
  --kl-danger-ink:#FF9AA3;
}

/* Base — geometry-free. Inherits whatever size the element already had. */
.kl-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--kl-sans,'Geist',system-ui,sans-serif);
  background:transparent; border:1px solid transparent; color:inherit;
  text-decoration:none; cursor:pointer;
  transition:background var(--kl-dur-1,120ms) var(--kl-ease,ease),
             border-color var(--kl-dur-1,120ms) var(--kl-ease,ease),
             color var(--kl-dur-1,120ms) var(--kl-ease,ease);
}

/* ── primary ─────────────────────────────────────────────────────────── MAX ONE PER VIEW */
.kl-btn--primary{
  background:var(--kl-ink,#F7F7F8); color:var(--kl-bg,#0A0A0C);
  border-color:var(--kl-ink,#F7F7F8); border-radius:999px; font-weight:600;
}
.kl-btn--primary:hover{ background:#FFFFFF; border-color:#FFFFFF; color:var(--kl-bg,#0A0A0C); }
.kl-btn--primary:active{ background:var(--kl-ink-2,#C9CACF); border-color:var(--kl-ink-2,#C9CACF); }

/* ── secondary ─────────────────────────────────────────────────────────────────────────── */
.kl-btn--secondary{
  background:transparent; border-color:var(--kl-line-strong,rgba(255,255,255,.15));
  color:var(--kl-ink,#F7F7F8);
}
.kl-btn--secondary:hover{ background:var(--kl-hover,#1E2024); border-color:var(--kl-line-strong,rgba(255,255,255,.15)); }

/* ── quiet ───────────────────────────────────────────────────────────────── THE DEFAULT ─ */
.kl-btn--quiet{
  background:transparent; border-color:var(--kl-line,rgba(255,255,255,.08));
  color:var(--kl-ink-2,#C9CACF);
}
.kl-btn--quiet:hover{ background:var(--kl-hover,#1E2024); border-color:var(--kl-line-strong,rgba(255,255,255,.15)); color:var(--kl-ink,#F7F7F8); }

/* ── text ────────────────────────────────────────────────────────────────────────────────
   No container at all: no background, no border, no padding of its own. */
.kl-btn--text{
  background:transparent; border:none; padding:0;
  color:var(--kl-mut,#97999F);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
}
.kl-btn--text:hover{ color:var(--kl-ink,#F7F7F8); }

/* ── destructive ─────────────────────────────────────────────────────────────────────────
   A quiet container. The red lives in the LABEL only — a filled red button would be a
   verdict hue used as a fill, which is exactly what the palette forbids. */
.kl-btn--destructive{
  background:transparent; border-color:var(--kl-line,rgba(255,255,255,.08));
  color:var(--kl-danger-ink,#FF9AA3);
}
.kl-btn--destructive:hover{ background:var(--kl-hover,#1E2024); border-color:var(--kl-line-strong,rgba(255,255,255,.15)); color:var(--kl-danger-ink,#FF9AA3); }

/* ── disabled ────────────────────────────────────────────────────────────────────────────
   Container kept, label dropped. Opacity on the node would fade the border and the label
   together and make the control look half-painted. */
.kl-btn:disabled, .kl-btn[disabled], .kl-btn[aria-disabled="true"], .kl-btn.is-disabled{
  color:var(--kl-faint,#7D7F86); cursor:not-allowed; opacity:1;
}
.kl-btn--primary:disabled, .kl-btn--primary[disabled], .kl-btn--primary[aria-disabled="true"], .kl-btn--primary.is-disabled{
  background:var(--kl-overlay,#23252A); border-color:var(--kl-overlay,#23252A); color:var(--kl-faint,#7D7F86);
}
.kl-btn:disabled:hover, .kl-btn[disabled]:hover, .kl-btn[aria-disabled="true"]:hover, .kl-btn.is-disabled:hover{
  background:transparent; color:var(--kl-faint,#7D7F86);
}
.kl-btn--primary:disabled:hover, .kl-btn--primary[disabled]:hover, .kl-btn--primary.is-disabled:hover{
  background:var(--kl-overlay,#23252A); color:var(--kl-faint,#7D7F86);
}

/* ── weight / allocation bars ────────────────────────────────────────────────────────────
   A portfolio weight is not a lane, so it does not get a lane hue. It is a quantity with no
   identity and no verdict, which is precisely what --kl-mut is for. 40% alpha keeps it
   subordinate to the numeral beside it. */
.kl-weight-bar{ background:color-mix(in srgb, var(--kl-mut,#97999F) 40%, transparent); }