/* Buttons — every variant swaps the --btn-* token contract declared in
   tokens.css; .btn itself never re-declares background/color. Height comes
   from the shared --bx-control-h token so buttons align with inputs. */
.bx .btn {
  appearance: none;
  font: inherit;
  font-family: var(--bx-font-sans);
  font-weight: 700;
  border-radius: var(--bx-r);
  min-height: var(--bx-control-h);
  padding: 0 18px;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-color);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: filter .15s, transform .1s, background .15s, border-color .15s;
  white-space: nowrap;
}
.bx .btn:active { transform: translateY(1px); }
/* Honor the [hidden] attribute — .btn's display: inline-flex above otherwise
   wins on specificity over the UA `[hidden] { display: none }` default. */
.bx .btn[hidden] { display: none; }
.bx .btn:disabled,
.bx .btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .48;
  filter: none;
  transform: none;
}
/* Hover brighten is a pointer affordance — skip it on touch (Rule 7). */
@media (any-hover: hover) {
  .bx .btn:hover { filter: brightness(1.08); }
}
.bx .btn-accent {
  --btn-bg: var(--bido-cyan);
  --btn-color: var(--bido-navy);
  box-shadow: 0 4px 14px -4px rgba(var(--bx-accent-rgb),.45);
}
.bx .btn-accent:hover { --btn-bg: var(--bido-blue); }
.bx .btn-grad {
  --btn-bg: var(--bx-grad-brand);
  --btn-color: var(--bido-navy);
  box-shadow: 0 6px 18px -4px rgba(var(--bx-accent-rgb),.45);
}
.bx .btn-ghost {
  --btn-bg: transparent;
  --btn-color: var(--bx-ink);
  --btn-border: var(--bx-line-2);
}
.bx .btn-ghost:hover { --btn-bg: var(--bx-paper-2); }
.bx-dark .btn:not(.btn-ghost):not(.btn-accent):not(.btn-grad) {
  --btn-bg: rgba(var(--bx-white-rgb),0.08);
  --btn-color: var(--bx-ink);
  --btn-border: var(--bx-line-2);
}
.bx-dark .btn-ghost {
  --btn-color: var(--bx-ink);
  --btn-border: var(--bx-line-2);
  --btn-bg: rgba(var(--bx-white-rgb),0.04);
}
.bx-dark .btn-ghost:hover { --btn-bg: rgba(var(--bx-white-rgb),0.08); }
.bx .btn-sm { min-height: var(--bx-control-h-sm); padding: 0 13px; font-size: var(--bx-text-sm); border-radius: var(--bx-r); }
.bx .btn-xs { min-height: 0; padding: 4px 10px; font-size: var(--bx-text-xs); border-radius: var(--bx-r-sm); }
.bx .btn-lg { min-height: var(--bx-control-h-lg); padding: 0 24px; font-size: var(--bx-text); border-radius: var(--bx-r-lg); }

/* Touch — the extra-small button grows to the small-control height so it is
   a comfortable tap target on a coarse pointer (Rule 7). */
@media (pointer: coarse) {
  .bx .btn-xs { min-height: var(--bx-control-h-sm); }
}