/* --- Buttons ---------------------------------------------------------------------------- */

button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }

/* One control family: buttons, inputs and selects share a height (--control-h, 44px
   on a coarse pointer) and the 10px corner. Only the brass primary is a pill.

   A control's outline comes from --control-border. --line is a 3:1 boundary on --bg
   ONLY (theme.test.mjs pins this), so a raised surface (a panel, a dialog, the
   drawer, a notice: Try again sits on an error notice) sets --line-strong instead, for
   every outlined button and field inside it, and a lighter hover ground. A custom
   property rather than `.panel .btn { ... }`: that selector would out-rank
   .btn-primary and .btn-quiet and grey their edges. */
.panel, .dialog, .drawer, .notice {
  --control-border: var(--line-strong);
  --control-border-hover: var(--fg-muted);
  --control-hover: rgba(255, 255, 255, .08);
}

/* .btn: a secondary action, outlined. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-h);
  padding: 0 1.125rem;
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--control-border, var(--line));
  border-radius: var(--radius-md);
  font: 600 var(--text-md)/1 var(--font-chrome);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), transform var(--motion) var(--ease);
}
.btn:hover:not(:disabled) { background: var(--control-hover, var(--surface-2)); border-color: var(--fg-muted); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn .icon { width: 1.125rem; height: 1.125rem; }
/* Unavailable for now but still focusable (a busy dialog's Cancel and close button):
   it looks disabled. Working: the label stays (it says what is happening), the button
   dims less. No spinner. */
.btn[aria-disabled="true"], .icon-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn[aria-busy="true"] { opacity: .7; cursor: progress; }

/* The brass is spent here: the one primary action, a pill at full touch height. */
.btn-primary {
  min-height: var(--target);
  padding: 0 1.375rem;
  background: var(--accent);
  border-color: var(--accent);
  border-radius: var(--radius-pill);
  color: var(--bg);
}
.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
/* Beside the brass Play (heroes, Home's feature, page tools) the secondary is a pill
   of the same height, so the pair matches. */
.hero-actions .btn, .feature .btn, .page-tools .btn {
  min-height: var(--target);
  padding: 0 1.375rem;
  border-radius: var(--radius-pill);
}

.btn-quiet {
  background: rgba(255, 255, 255, .08);
  border-color: transparent;
}
.btn-quiet:hover:not(:disabled) { background: rgba(255, 255, 255, .14); border-color: transparent; }

/* Destructive: Delete user, Remove. Red text and edge on no ground; the confirm
   dialog's action is one of these, named for what it deletes. */
.btn-danger {
  color: var(--danger);
  border-color: var(--danger);
}
.btn-danger:hover:not(:disabled) { background: var(--danger-soft); border-color: var(--danger); }

.btn-small { min-height: var(--control-h-sm); padding: 0 .875rem; font-size: var(--text-sm); }

.btn-play::before {
  content: "";
  width: .7em;
  height: .8em;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Icon buttons: the icon is the face, the name is visually hidden text inside. */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: var(--target);
  height: var(--target);
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--fg-muted);
  text-decoration: none;
  transition: color var(--motion) var(--ease), background-color var(--motion) var(--ease), transform var(--motion) var(--ease);
}
.icon-btn:hover:not(:disabled) { color: var(--fg); background: rgba(255, 255, 255, .08); }
.icon-btn:active:not(:disabled) { transform: scale(.92); }
/* The small one, for table rows and chip removal: 32px, 44px on a coarse pointer. */
.icon-btn-sm { width: var(--control-h-sm); height: var(--control-h-sm); }
.icon-btn-sm .icon { width: 1rem; height: 1rem; }

/* The star toggle: an outline at rest, brass and filled when pressed. */
.star-btn .icon-star-filled { display: none; }
.star-btn[aria-pressed="true"] { color: var(--accent); }
.star-btn[aria-pressed="true"] .icon-star { display: none; }
.star-btn[aria-pressed="true"] .icon-star-filled { display: block; }