/* ══════════════════════════════════════════════════════════════════════════
   Pattern: the button
   ══════════════════════════════════════════════════════════════════════════
   FOUR SYSTEMS FOR ONE CONTROL. Korra defines `.btn` with six modifiers,
   `.ce-btn` with five, `.mm-btn`, `.nav-icon-btn`, `.r-sort-btn` and
   `.rz-sort-btn` — 23 classes, four naming schemes, and no agreement on the
   one thing that matters most, which is how big a button is under a thumb.

   THE FLOOR IS THE POINT OF THIS FILE. --ga-touch-min is 44px and it is not
   negotiable on a phone. Korra's own phoneSimplicity.test.js exists because
   controls kept shipping under it; a pattern that enforces the floor by
   construction is better than a test that finds it afterwards.

   ONE PRIMARY PER SCREEN REGION. The primary is ink, not accent: the accent is
   spent on the focus ring and on saying which of several things is selected,
   and a screen where three different things are all "the brand colour" tells
   you nothing about what to do next.
   ══════════════════════════════════════════════════════════════════════════ */

.ga-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ga-space-2);
  /* Desktop height. The phone floor is applied below and is higher. */
  min-height: var(--ga-control-h);
  padding: 0 calc(var(--ga-space-4) * var(--ga-density, 1));
  border: 1px solid transparent;
  border-radius: var(--ga-radius);
  font: inherit;
  font-size: var(--ga-text-body-sm);
  font-weight: var(--ga-weight-semi);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ga-fast) var(--ga-ease),
              border-color var(--ga-fast) var(--ga-ease),
              color var(--ga-fast) var(--ga-ease),
              opacity var(--ga-fast) var(--ga-ease);
}

.ga-btn:focus-visible {
  outline: 2px solid var(--ga-accent);
  outline-offset: 2px;
}

/* A pressed button should say so before the network does. Every one of the
   four originals had this and all four wrote it differently. */
.ga-btn:active { transform: scale(.97); }

/* DISABLED IS NOT INVISIBLE. Half-opacity ink on a light ground fails contrast
   and a person cannot read what they are not allowed to press. The colour is
   the tertiary ink, which is measured. */
.ga-btn[disabled],
.ga-btn[aria-disabled='true'] {
  cursor: not-allowed;
  background: var(--ga-ground);
  border-color: var(--ga-line);
  color: var(--ga-ink-3);
  transform: none;
}

/* ── The four kinds ────────────────────────────────────────────────────────
   Primary: the thing to do. Ink, not accent — see the header of this file. */
.ga-btn--primary {
  background: var(--ga-ink);
  color: var(--ga-surface);
}
.ga-btn--primary:hover { background: var(--ga-accent-deep); }

/* Secondary: a real alternative, not a lesser one. A bordered button, so it
   reads as a control rather than as a link that happens to be padded. */
.ga-btn--secondary {
  background: var(--ga-surface);
  border-color: var(--ga-line);
  color: var(--ga-ink);
}
.ga-btn--secondary:hover { border-color: var(--ga-ink-3); }

/* Ghost: a third option, or an action on a row. No weight until it is wanted. */
.ga-btn--ghost {
  background: none;
  color: var(--ga-ink-2);
}
.ga-btn--ghost:hover { background: var(--ga-ground); color: var(--ga-ink); }

/* Danger: deletes, cancellations, refusals. The bad status colour from the
   rail, which is the same red everywhere for the reason given there. */
.ga-btn--danger {
  background: var(--ga-bad);
  color: var(--ga-bad-ink);
}
.ga-btn--danger:hover { opacity: .9; }

/* ── Sizes ─────────────────────────────────────────────────────────────────
   Small is for a control inside a row or a card foot. It still clears the
   touch floor on a phone, because the phone rule below applies to every
   .ga-btn regardless of size — which is the whole reason sizes are modifiers
   and not separate classes. */
.ga-btn--sm {
  min-height: 30px;
  padding: 0 var(--ga-space-3);
  font-size: var(--ga-text-meta);
}
.ga-btn--lg {
  min-height: 48px;
  padding: 0 var(--ga-space-5);
  font-size: var(--ga-text-body);
}
/* Full width, for a sheet or the bottom of a form. */
.ga-btn--full { width: 100%; }

/* An icon with no word. It needs a label a screen reader can read, which is
   the caller's job, and it needs to stay square, which is this rule's. */
.ga-btn--icon {
  width: var(--ga-touch-min);
  padding: 0;
  gap: 0;
}

/* ── Phone ─────────────────────────────────────────────────────────────────
   THE FLOOR, applied last so no size modifier can drop under it. This is the
   rule the whole file exists for. */
@media (max-width: 860px) {
  .ga-btn { min-height: var(--ga-touch-min); }
  .ga-btn--sm { min-height: var(--ga-touch-min); padding: 0 var(--ga-space-4); }
}

/* A row of buttons. They wrap rather than overflowing, and on a phone they
   stack full-width — two half-width buttons side by side on a 320px screen is
   two targets nobody can hit accurately. */
.ga-btns {
  display: flex;
  align-items: center;
  gap: var(--ga-space-2);
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  .ga-btns--stack { flex-direction: column; align-items: stretch; }
  .ga-btns--stack .ga-btn { width: 100%; }
}