/* Buttons. One shape, three weights (polish pass: flat lacquer, no gloss, no glow, sentence case):
   primary   a flat crimson fill (the theme's --action) with a hairline top light: the one action on a screen
   secondary an outline in the window frame's gold: a real action that is not the main one
   ghost     a hairline: close, retry, show more, sign out
   icon      square, for close and toolbar actions
   Type is Cinzel in title case (its lowercase are small capitals, so "Download the client" reads engraved),
   never forced to tracked all-caps. Plates, tabs and the pager stay Inter (--font-control).
   Sizes: default 44px tall (the touch floor), .btn-sm 44px with less padding, .btn-lg 48px for the hero and bands. */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-border: var(--line-strong);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 44px;
  padding: 0 1.125rem;
  font-family: var(--font-label);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: var(--r-2);
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--dur-1) var(--ease-out),
    border-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}
.btn .icon { width: 1.1em; height: 1.1em; }
.btn:active:not([disabled]):not([aria-disabled="true"]) { transform: translateY(1px); }

/* Primary: parchment on the action fill (crimson, or the running event's colour), 6.9:1 on crimson. */
.btn-primary {
  --btn-fg: var(--text);
  --btn-bg: var(--action);
  --btn-border: color-mix(in srgb, var(--action-hi) 60%, var(--action-lo));
  box-shadow: inset 0 1px 0 rgb(255 240 215 / 0.14), 0 1px 2px rgb(var(--shadow-rgb) / 0.5);
}
.btn-primary:hover { --btn-bg: var(--action-hi); --btn-border: var(--action-hi); }

.btn-secondary { --btn-fg: var(--text); --btn-border: var(--frame-hi); --btn-bg: color-mix(in srgb, var(--ink-00) 45%, transparent); }
.btn-secondary:hover { --btn-fg: var(--accent-hi); --btn-bg: var(--tint); --btn-border: var(--accent); }

.btn-ghost { --btn-fg: var(--text); --btn-border: var(--line-strong); }
.btn-ghost:hover { --btn-fg: var(--accent-hi); --btn-border: var(--accent); --btn-bg: var(--tint); }

.btn-sm { min-height: 44px; padding: 0 0.875rem; font-size: 0.875rem; }
.btn-lg { min-height: 48px; padding: 0 1.5rem; font-size: 1rem; }
.btn-block { width: 100%; }

.btn-icon {
  width: 44px;
  min-height: 44px;
  padding: 0;
  --btn-fg: var(--accent-hi);
}
.btn-icon .icon { width: 20px; height: 20px; }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* Waiting for the server: the label stays readable, a thin bar runs under it. */
.btn.is-loading { cursor: progress; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 7px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  background-size: 200% 100%;
  animation: btn-wait 1.1s linear infinite;
  opacity: 0.7;
}
@keyframes btn-wait { from { background-position: 100% 0; } to { background-position: -100% 0; } }