/* ══════════════════════════════════════════════════════════════════════════
   Pattern: the status pill
   ══════════════════════════════════════════════════════════════════════════
   Twenty-seven classes in Korra spell the same object: `badge`, `chip` and
   `pill` prefixes across six verticals, each with its own green, amber and
   red. That is the failure mode this pattern exists to end — not the wasted
   lines, but the fact that "paid" is one green on a rental site and a
   different green on a shop, so the colours stop carrying meaning.

   THE COLOURS COME FROM THE RAIL, NOT THE SKIN. A storefront chooses its brand
   colour; it does not choose what "failed" looks like. See the status block in
   rail.css.

   A PILL IS NEVER THE ONLY SIGNAL. Colour alone excludes about one man in
   twelve, so every pill carries its word, and the dot variant carries a shape
   as well. There is no icon-only pill in this file on purpose.
   ══════════════════════════════════════════════════════════════════════════ */

.ga-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--ga-space-2);
  padding: 3px var(--ga-space-3);
  border-radius: var(--ga-radius-pill);
  /* 12px floor, the same one the nav labels have. A status a person has to
     lean in to read is a status they will guess at instead. */
  font-size: var(--ga-text-meta);
  font-weight: var(--ga-weight-semi);
  line-height: 1.5;
  white-space: nowrap;
  /* Neutral by default: a state with no judgement attached — draft, archived,
     "not started" — should not borrow one of the three meanings. */
  background: var(--ga-ground);
  color: var(--ga-ink-2);
}

/* ── The three meanings ────────────────────────────────────────────────────
   Good: it happened, and it is done. Paid, delivered, verified, live. */
.ga-pill--good { background: var(--ga-good-wash); color: var(--ga-good); }

/* Warn: it is waiting on someone. Pending, unpaid, awaiting review. NOT an
   error — the difference matters, because one of them is somebody's job and
   the other is a fault. */
.ga-pill--warn { background: var(--ga-warn-wash); color: var(--ga-warn); }

/* Bad: it failed or was refused. Declined, cancelled, expired, rejected. */
.ga-pill--bad  { background: var(--ga-bad-wash);  color: var(--ga-bad); }

/* Accent: the storefront's own colour, for a category rather than a state — a
   vehicle class, a plan name, a tier. Deliberately separate from the three, so
   a brand colour can never be read as a judgement. */
.ga-pill--accent { background: var(--ga-accent-wash); color: var(--ga-accent); }

/* Outline, for a pill on a photograph or a coloured panel where a wash would
   disappear. */
.ga-pill--outline {
  background: var(--ga-surface);
  box-shadow: inset 0 0 0 1px var(--ga-line);
}

/* ── The dot ───────────────────────────────────────────────────────────────
   A SECOND SIGNAL, NOT A DECORATION. It inherits the pill's colour, so it
   cannot drift from the word beside it, and a filled circle beside a hollow
   one is legible without colour at all. */
.ga-pill__dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: currentColor;
}
/* Hollow, for a state that has not started. Same shape family, different fill:
   two states that differ only in hue are two states nobody distinguishes. */
.ga-pill__dot--open {
  background: none;
  box-shadow: inset 0 0 0 1.5px currentColor;
}

/* ── Sizes ─────────────────────────────────────────────────────────────────
   Large, for a pill that IS the answer — the state of a single order on its
   own page, rather than one cell in a list of forty. */
.ga-pill--lg {
  padding: 6px var(--ga-space-4);
  font-size: var(--ga-text-body-sm);
}

/* A row of them, wrapping. Filters, tags, the states an item has passed. */
.ga-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ga-space-2);
  align-items: center;
}

/* ── Pressable ─────────────────────────────────────────────────────────────
   A filter chip is a pill you can press, and it must clear the touch floor on
   a phone like every other control. A 22px filter row is the commonest place
   that floor gets forgotten, because a pill does not look like a button. */
button.ga-pill,
a.ga-pill {
  border: none;
  cursor: pointer;
  /* font: inherit, then the size back: the shorthand resets font-size, and a
     filter chip at the browser's default button size is not a 12px pill. */
  font: inherit;
  font-size: var(--ga-text-meta);
  font-weight: var(--ga-weight-semi);
  text-decoration: none;
}
button.ga-pill:focus-visible,
a.ga-pill:focus-visible {
  outline: 2px solid var(--ga-accent);
  outline-offset: 2px;
}
.ga-pill[aria-pressed='true'] {
  background: var(--ga-ink);
  color: var(--ga-surface);
}
@media (max-width: 860px) {
  button.ga-pill,
  a.ga-pill { min-height: var(--ga-touch-min); }
}