/* ============================================================
   CCD Design System v2 — BUTTONS
   Ground-up rebuild 2026-07-01, from tokens.css + type.css.
   Four roles: primary (accent) · secondary (neutral, the
   default) · ghost (tertiary/toolbar) · danger (destructive).
   Solid hovers darken via filter (no extra hover tokens).
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
  line-height: normal;   /* height is the token now, so leading only centres the ink — normal lands dead centre, 1 sits 0.5px high */
  white-space: nowrap;
  /* Height is the token, not a padding sum — see tokens.css --ctl-h.
     box-sizing is declared HERE, on the component, not by a global reset. The
     height contract is only true under border-box: with content-box the 1px
     border below makes an <a class="btn"> 36px, so it stops matching the .control
     beside it. Every gallery happened to supply `* { box-sizing: border-box }`
     locally, which meant the docs proved a premise the DS never shipped (Codex
     audit 2026-07-30). Stated per component rather than globally on purpose — the
     DS arrives by CDN into apps whose own layout we do not own, and a wildcard
     reset from a stylesheet a consumer merely links is an ambush. */
  box-sizing: border-box;
  height: var(--ctl-h);
  padding: 0 var(--s-4);
  /* An inline-flex button sits on the text baseline, and the descender space
     under it silently adds ~8px to any table row it lands in — which is most of
     what .tbl--compact is supposed to save. middle kills the gap. */
  vertical-align: middle;
  border: 1px solid transparent;
  border-radius: var(--r-base);
  cursor: pointer;
  user-select: none;
  /* a .btn is allowed to be an <a>; without this the browser underline leaks */
  text-decoration: none;
  transition: filter .12s ease, background-color .12s ease, border-color .12s ease;
}

/* Keyboard focus — crisp accent outline, offset off the edge. */
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn:disabled { opacity: .45; cursor: not-allowed; }

/* Primary — the one accent action per view. */
.btn--primary { background: var(--accent-fill); color: var(--on-fill); }
.btn--primary:hover:not(:disabled)  { filter: brightness(.93); }
.btn--primary:active:not(:disabled) { filter: brightness(.86); }

/* Secondary — the neutral default. White surface, rule border. */
.btn--secondary { background: var(--ctl-raise); color: var(--ink); border-color: var(--rule); }
.btn--secondary:hover:not(:disabled)  { background: var(--ctl-raise-hover); border-color: var(--muted); }
.btn--secondary:active:not(:disabled) { filter: brightness(.96); }

/* Ghost — tertiary / toolbar. No chrome until hovered. */
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover:not(:disabled)  { background: var(--ctl-raise-hover); }
.btn--ghost:active:not(:disabled) { filter: brightness(.96); }

/* Danger — destructive. Uses the accessible fill red, not the dot red. */
.btn--danger { background: var(--neg-fill); color: var(--on-fill); }
.btn--danger:hover:not(:disabled)  { filter: brightness(.93); }
.btn--danger:active:not(:disabled) { filter: brightness(.86); }

/* Small — a tighter BOX, never smaller type. The label stays --fs-body: a
   caption-size control inside body-size copy reads as a rendering fault, not as
   hierarchy (it cost us the seg filter and a table cell before this rule existed).
   Where each size goes (owner call 2026-07-29 — .btn--sm was doing too many
   jobs, which is how four control heights ended up on one row):
     EVERYTHING on a shared line  →  .btn      var(--ctl-h), 34px. Page head,
       card head, form bar, toolbar, filter bar — beside .control, .menu-btn,
       .seg, all of which are the same height.
     COMPACT TABLE ROW ONLY       →  .btn--sm  var(--ctl-h-sm), 24px. Its only
       job: staying near the 22.4px line of text it rides, so a dense table
       does not loosen. Pair it with .menu-btn--sm for the kebab. Nowhere else.
       And .tbl--compact is itself owner-opt-in only (tables.css), so in practice
       .btn--sm appears only in a table Vitit has asked to be compact. Reaching
       for --sm is never a reason to make a table compact — that inversion is
       how it spread across five pages in one sitting. */
.btn--sm { height: var(--ctl-h-sm); padding: 0 var(--s-3); }

/* Full-width — forms, mobile. */
.btn--block { width: 100%; }