/* ============================================================
   LAYER 2 · controls — button, badge, icon.
   Every state is a real CSS state: :hover, :focus-visible, :active,
   :disabled / [aria-disabled], [aria-busy]. No JS state, so touch
   devices never get stuck hover and keyboards always get a ring.
   ============================================================ */

/* ---------- Button ---------- */
.ep-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 20px; font-size: .9375rem;
  font-family: var(--font-sans); font-weight: var(--fw-medium); line-height: 1;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--radius-btn-sm);
  background: var(--surface-card); color: var(--text-primary);
  transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), filter var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.ep-btn:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset) }
.ep-btn > i { font-size: 1em; line-height: 1 }

/* Sizes */
.ep-btn--sm { height: 34px; padding: 0 14px; font-size: .8125rem }
.ep-btn--md { height: 38px; padding: 0 20px; font-size: .9375rem }
/* 19px, not 17px: the lg label rides the identity gradient, where the label
   colour is 3.68:1 — AA-large, which starts at 18.7px semibold. */
.ep-btn--lg { height: 54px; padding: 0 28px; font-size: 1.1875rem; gap: 10px; border-radius: var(--radius-btn) }
@media (max-width: 560px) { .ep-btn--lg { height: 48px; padding: 0 22px } }

.ep-btn--pill { border-radius: var(--radius-full) }
.ep-btn--full { display: flex; width: 100% }
/* Stacked CTAs on phones: full-width targets, never side-by-side slivers. */
@media (max-width: 560px) { .ep-btn--full-sm { display: flex; width: 100% } }

/* Variants */
.ep-btn--primary { background: var(--gradient-brand-solid); color: var(--on-gradient) }
/* Only the 19px lg label clears AA-large on the graphic ramp, so lg — and only
   lg — gets the identity gradient itself. */
.ep-btn--primary.ep-btn--lg { background: var(--gradient-brand) }
.ep-btn--accent { background: var(--accent); color: var(--on-accent) }
.ep-btn--danger { background: var(--color-error-solid); color: var(--on-error-solid) }
.ep-btn--warning { background: var(--color-warning-solid); color: var(--on-warning-solid) }
.ep-btn--secondary { background: var(--surface-card); color: var(--text-primary); border-color: var(--border-strong) }
.ep-btn--outline { background: transparent; color: var(--text-primary); border-color: var(--border-strong) }
.ep-btn--soft { background: var(--accent-tint); color: var(--accent) }
.ep-btn--ghost { background: transparent; color: var(--text-secondary) }

/* Loud variants carry the CTA shadow and lift. */
.ep-btn--primary, .ep-btn--accent, .ep-btn--danger, .ep-btn--warning { font-weight: var(--fw-semibold); box-shadow: var(--shadow-cta) }
.ep-btn--primary:hover:enabled, .ep-btn--accent:hover:enabled, .ep-btn--danger:hover:enabled, .ep-btn--warning:hover:enabled,
a.ep-btn--primary:not([aria-disabled="true"]):hover, a.ep-btn--accent:not([aria-disabled="true"]):hover, a.ep-btn--danger:not([aria-disabled="true"]):hover, a.ep-btn--warning:not([aria-disabled="true"]):hover { transform: translateY(-1px); box-shadow: var(--shadow-cta-hover); filter: brightness(1.06) }
.ep-btn--primary:active:enabled, .ep-btn--accent:active:enabled, .ep-btn--danger:active:enabled, .ep-btn--warning:active:enabled { transform: translateY(0); box-shadow: var(--shadow-cta); filter: brightness(.98) }
.ep-btn--warning:hover:enabled, a.ep-btn--warning:not([aria-disabled="true"]):hover { background: var(--color-warning-solid-hover); filter: none }

/* Quiet variants change ground, not elevation. */
.ep-btn--secondary:hover:enabled, .ep-btn--outline:hover:enabled, a.ep-btn--secondary:not([aria-disabled="true"]):hover, a.ep-btn--outline:not([aria-disabled="true"]):hover { background: var(--surface-sunken) }
.ep-btn--soft:hover:enabled, a.ep-btn--soft:not([aria-disabled="true"]):hover { background: var(--tint-border) }
.ep-btn--ghost:hover:enabled, a.ep-btn--ghost:not([aria-disabled="true"]):hover { background: var(--surface-sunken); color: var(--text-primary) }
.ep-btn--secondary:active:enabled, .ep-btn--outline:active:enabled, .ep-btn--soft:active:enabled, .ep-btn--ghost:active:enabled { filter: brightness(.97) }

/* Disabled — the same for <button disabled> and a link marked aria-disabled.
   Links can't be :disabled, so aria-disabled also suppresses their hover. */
.ep-btn:disabled, .ep-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none !important; filter: none !important; box-shadow: none }

/* Loading — the label stays put; only the leading glyph spins. */
.ep-btn[aria-busy="true"] { cursor: progress }
.ep-btn__spin { animation: spinArc 1s linear infinite; display: inline-flex }

/* ---------- Badge ---------- */
.ep-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-full); font-family: var(--font-sans); font-size: .75rem; font-weight: var(--fw-semibold); line-height: 1.4; white-space: nowrap; background: var(--surface-sunken); color: var(--text-secondary); border: 1px solid transparent }
.ep-badge--brand { background: var(--accent-tint); color: var(--accent) }
.ep-badge--cyan { background: var(--role-user-bg); color: var(--role-user-fg) }
.ep-badge--purple { background: var(--role-super-admin-bg); color: var(--role-super-admin-fg) }
.ep-badge--neutral { background: var(--surface-sunken); color: var(--text-secondary) }
.ep-badge--success { background: var(--color-success-bg); color: var(--color-success-strong) }
.ep-badge--warning { background: var(--color-warning-bg); color: var(--color-warning-strong) }
.ep-badge--danger { background: var(--color-error-soft); color: var(--color-error-strong) }
/* outline reads its label as text, so it takes the tint's text colour. */
.ep-badge--outline { background: transparent; color: var(--on-tint); border-color: var(--tint-border) }
.ep-badge__dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: currentColor; flex-shrink: 0 }

/* Count bubble — sidebar counters, alert tallies. */
.ep-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full); background: var(--color-error-solid); color: var(--on-error-solid); border: 1px solid transparent; font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: var(--fw-semibold); line-height: 1; font-variant-numeric: tabular-nums }
.ep-count--soft { background: var(--color-error-soft); color: var(--color-error-strong); border-color: var(--color-error-soft-border) }

/* ---------- Icon ----------
   Per-instance geometry arrives as an inline CUSTOM PROPERTY
   (--ep-icon-size), never as a style declaration, so the class stays the
   only place styling lives. Same pattern for skeletons and bars. */
.ep-icon { display: inline-flex; line-height: 1; color: var(--accent); font-size: var(--ep-icon-size, 1em) }
.ep-icon--muted { color: var(--text-muted) }
.ep-icon--brand { color: var(--brand-mid) }
.ep-icon--inherit { color: inherit }
.ep-icon--sm { font-size: 14px }
.ep-icon--md { font-size: 17px }
.ep-icon--lg { font-size: 24px }

/* 42px identity-gradient tile with a filled white glyph. */
.ep-icon-tile { width: 42px; height: 42px; border-radius: var(--radius-tile); background: var(--gradient-brand); color: var(--on-gradient); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px }
.ep-icon-tile > .ep-icon, .ep-icon-tile > i { color: var(--on-gradient); font-size: 18px }
/* A letter is text, not a glyph, so a lettered tile takes the text-bearing ramp. */
.ep-icon-tile--letter { background: var(--gradient-brand-solid); font-size: 1.0625rem; font-weight: var(--fw-semibold) }

/* Square icon button — carousel arrows, toolbar controls. */
.ep-icon-btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-btn-sm); border: 1px solid var(--border-strong); background: var(--surface-card); color: var(--text-secondary); cursor: pointer; transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard) }
.ep-icon-btn:hover { background: var(--surface-sunken); color: var(--text-primary) }
.ep-icon-btn:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset) }
.ep-icon-btn:disabled { opacity: .5; cursor: not-allowed }

/* ---------- Trust / capability item ---------- */
.ep-trust { display: flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: .9375rem; font-weight: var(--fw-medium); color: var(--text-secondary); white-space: nowrap }
.ep-trust > .ep-icon, .ep-trust > i { color: var(--accent) }
.ep-trust--chip { padding: 6px 12px; font-size: .8125rem; border-radius: var(--radius-md); background: var(--accent-tint); border: 1px solid var(--tint-border); color: var(--on-tint) }
.ep-trust--chip > .ep-icon, .ep-trust--chip > i { color: inherit }