/* ============================================================
   Buttons and the action rows they sit in.
   ============================================================ */

.actions{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 18px;
  border-radius:7px;
  font-size:var(--t-control);
  font-weight:500;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  /* Touch devices otherwise sit on the :hover state after a tap, and iOS adds
     a grey flash of its own on top of the press state below. */
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:transform var(--dur-1) var(--ease-out),
             background var(--dur-1) var(--ease-out),
             border-color var(--dur-1) var(--ease-out);
}
.btn:hover{ transform:translateY(-1px); }

/* The press, not the click, is what has to answer. :active fires on
   pointer-down, so the button acknowledges the finger the instant it lands
   rather than at release — waiting for the click is what makes a control feel
   dead even when the navigation itself is fast. It is also the cheapest
   affordance for a cancelled press: drag off the button and the scale returns,
   which is the interface saying "nothing will happen if you let go here".
   Scale rather than translate, so the feedback reads as the surface taking
   pressure instead of the button moving somewhere. */
.btn:active{
  transform:scale(0.97);
  transition-duration:60ms;
}

/* Two primaries, and the difference is where the button goes rather than how
   important it is. A button that stays on the site is orientation — it moves
   you through the argument — so it takes the nav blue. A button that leaves
   the site goes to the thing the page has been claiming exists: the repo, the
   store listing, the write-up. That is evidence, and evidence is green here.

   The split is driven off `target`, not off a class, because `target="_blank"`
   is already on every one of them and is the fact itself. A link added
   tomorrow is coloured correctly by virtue of where it points, with nothing
   to remember. The `--btn-accent` indirection is what lets the hover and
   press states below be written once instead of twice. */
.btn-primary{
  --btn-accent:var(--role-nav);
  --btn-accent-hi:var(--role-nav-hi);
  background:var(--btn-accent);
  color:#0B0D10;
}
.btn-primary[target="_blank"]{
  --btn-accent:var(--role-proof);
  --btn-accent-hi:var(--role-proof-hi);
}
.btn-primary:hover{ background:var(--btn-accent-hi); }
/* Press goes the other way from hover — down into the colour rather than up
   out of it — so the two states are never mistaken for each other. */
.btn-primary:active{ background:color-mix(in srgb, var(--btn-accent) 82%, #000); }
@supports not (background: color-mix(in srgb, red 10%, blue)){
  .btn-primary:active{ background:#4b93e0; }
  .btn-primary[target="_blank"]:active{ background:#3a8b48; }
}
.btn-secondary{ background:transparent; color:var(--text); border-color:var(--line); }
.btn-secondary:hover{ border-color:var(--muted); }
.btn-secondary:active{ background:rgba(255,255,255,0.05); border-color:var(--muted); }