/* --- Buttons ----------------------------------------------------------- */
/* Three tiers of emphasis and nothing more. Primary is the one action the
   screen exists for; secondary supports it; tertiary is for actions that have
   to be findable without competing. --danger is a colour applied to a tier,
   not a fourth tier.
   The base .btn is the secondary tier, so .btn--secondary shares its selector
   and adds nothing — stating the same colours twice is the duplication the
   charter forbids. Either spelling renders the same button. */
.btn,
.btn--secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  font: 600 var(--t-13)/1 var(--font-ui);
  /* The 1px at the bottom is optical, not spacing. Centring the em box leaves
     the cap band half a pixel low, because a font's ascent and descent are not
     symmetric; trimming the content box lifts it back onto centre. The same
     figure at both sizes, so --sm does not need its own. */
  min-height: var(--ctl); padding: 0 var(--s-7) 1px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--rule-strong); background: var(--surface); color: var(--ink);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  /* A .btn is often an <a>; the element's underline must not bleed through. */
  text-decoration: none;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.btn--primary   { background: var(--c-forest); border-color: var(--c-forest); color: var(--c-cream); }
/* Tertiary carries a tinted fill rather than the transparent one it replaces.
   A borderless muted-ink label on a cream page was not readable as a control,
   and the tier is carrying real work — "Copy scheme from…", "Start
   again" — not just dismissals. The fill keeps it a shape; dropping the border
   and holding the ink at full strength is what keeps it below secondary. */
.btn--tertiary  { background: var(--surface-sunk); border-color: transparent; color: var(--ink); }
.btn--danger    { background: var(--surface); border-color: var(--danger-line); color: var(--danger); }

/* Hover is for pointer devices only: on a phone it latches after a tap and the
   last button touched goes on reading as live until something else is tapped.
   :not([disabled]) is what keeps a disabled button from repainting under the
   cursor — the opacity below dims it but does not stop the paint.
   Every variant restates its COLOUR here, not just its background. A .btn is
   usually an <a>, and the base `a:hover` rule outranks a plain `.btn--primary`,
   so the label was being repainted in the same near-black as the hover
   background: 1.2:1, invisible — and invisible only on the anchors, which is
   why a styleguide built entirely from <button> never showed it. */
@media (hover: hover) {
  /* Secondary's hover fill is the same tint tertiary rests on, so the border is
     what tells the two apart — which is the difference that defines the tiers
     anyway. Dropping secondary to --surface-sunk2 instead would have resolved
     it on the cream page and lost the hover entirely inside a white panel. */
  .btn:not([disabled]):hover            { background: var(--surface-sunk); border-color: var(--c-teal); color: var(--ink); text-decoration: none; }
  .btn--primary:not([disabled]):hover   { background: var(--c-forest-deep); border-color: var(--c-forest-deep); color: var(--c-cream); }
  .btn--tertiary:not([disabled]):hover  { background: var(--c-mint-tint2); border-color: transparent; color: var(--ink); }
  .btn--danger:not([disabled]):hover    { background: var(--danger-weak); border-color: var(--danger); color: var(--danger); }
}

/* The press carries the whole of the feedback on a touch screen, where there is
   no hover and the tap highlight is switched off above. */
.btn:not([disabled]):active            { background: var(--c-mint-tint2); border-color: var(--c-teal); color: var(--ink); }
.btn--primary:not([disabled]):active   { background: var(--c-forest-press); border-color: var(--c-forest-press); color: var(--c-cream); }
.btn--tertiary:not([disabled]):active  { background: var(--c-mint); border-color: transparent; color: var(--ink); }
.btn--danger:not([disabled]):active    { background: var(--danger); border-color: var(--danger); color: var(--surface); }

.btn--sm { min-height: var(--ctl-sm); padding: 0 var(--s-6) 1px; font-size: var(--t-12); }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }
/* On a phone, a row of actions becomes a stack of full-width targets. */
.btn-row--stack { flex-direction: column; align-items: stretch; }
@media (min-width: 640px) { .btn-row--stack { flex-direction: row; align-items: center; } }