/* ---- The button family ----------------------------------------------------
   Every button and every link dressed as one, wherever it appears: inside a
   form, in a table cell, on the topbar, on the pre-login bands. Its own file
   rather than a section of `forms.css` because half its callers are not in a
   form at all, and because `.btn` is the most-linked class in the project
   (46 templates render a `.btn-row` alone).

   Linked between `base.css` and `forms.css`, so a form-scoped rule can still
   say something about a button on top of what is here.

   Four kinds and no page needs a fifth (spec 7.3):

     .btn         filled accent   the page's one action, a section's Save
     .btn-quiet   surface + line  secondary actions, cancel, filters
     .btn-ghost   no ground       in a table cell or a legend
     .btn-danger  filled crit     destructive, always behind a confirm

   Sizes come from the control scale (`--control-h` in `tokens.css`): a submit
   button standing next to a select has to be the same height as the select,
   and that is the only thing keeping them in step.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  /* This project has no global box-sizing reset outside the shell, and a
     button that is told to fill its column (the stacked action row on a
     phone) would otherwise be its column plus its own padding. */
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  min-height: var(--control-h);
  padding: 0 var(--sp-16);
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: var(--fs-ui);
  font-weight: var(--fw-medium);
  line-height: var(--lh-h3);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease);
}
.btn:hover { background: var(--accent-lift); }
.btn:active { background: var(--accent-deep); }

.btn-quiet {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
.btn-quiet:hover { background: var(--surface-sunk); }
.btn-quiet:active { background: var(--surface-sunk); border-color: var(--rule); }

/* No ground and no border, where a border would be noise: a table cell, a
   legend's action slot. This is the kind a page reaches for when it wants a
   button without a box; `.linklike` at the bottom of this file is not a fifth
   kind but a link dressed as an action, and is not interchangeable with it. */
.btn-ghost {
  background: none;
  color: var(--accent);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--accent-soft); }
.btn-ghost:active { background: var(--accent-soft); color: var(--accent-deep); }

/* Only on an action that destroys a record, and only where the click is
   already confirmed (`hx-confirm`) or is a POST behind one. Removing a
   distribution mechanism and logging out used to be the same button. */
.btn-danger,
.btn-quiet.btn-danger {
  background: var(--crit);
  color: var(--on-crit);
  border-color: transparent;
}
.btn-danger:hover,
.btn-danger:active { background: color-mix(in srgb, var(--crit) 85%, var(--ink)); }

.btn-small {
  min-height: 1.875rem;  /* 30px, for a table cell */
  padding: 0 var(--sp-12);
  font-size: var(--fs-small);
}

/* `.btn-lg` (public.css) and `.btn-ghost-band` (landing.css) are the two
   modifiers the pre-login pages add on top of these four. They stay where
   they are: the public pages are step 10 of the migration, and a second
   definition here is the duplicate this file exists to stop. */

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-8);
}
/* A destructive action never sits shoulder to shoulder with the primary one. */
.btn-row > .btn-danger,
.btn-row > .linklike--danger { margin-left: auto; }

/* Below `sm` a row of actions stacks and each button fills the width: two
   38px targets side by side on a 390px screen are neither reachable nor
   readable once a label is translated. */
@media (max-width: 40rem) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row > .btn { width: 100%; }
  .btn-row > .btn-danger,
  .btn-row > .linklike--danger { margin-left: 0; }
}

/* A link dressed as an action, not a fifth button kind (spec 7.3 has four and
   this is none of them): the remove, revoke and enable controls that live
   inside running text or a table cell, where a 38px box with its own padding
   would break the line it sits in. So it keeps the inherited type and takes no
   height, no padding and no hover ground; only its colour answers the pointer.
   A page that wants a button, borderless or otherwise, uses `.btn-ghost`. */
.linklike {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
}
.linklike:hover { color: var(--accent-deep); }
/* Some of them are anchors rather than buttons, because their route answers a
   GET with a confirmation page for a reader with no scripts (spec 7.11). They
   are the same control and read as one, so the browser's underline goes. */
a.linklike { text-decoration: none; }
/* …and the half of them that destroy something, so remove, revoke and
   withdraw stop looking like enable and log out. */
.linklike--danger { color: var(--crit); }

/* Busy and unavailable read the same way everywhere: the control dims, and
   the cursor says which of the two it is. The in-flight button also opens a
   16px slot for the spinner, so the label does not jump when it appears.

   The button itself, never an ancestor: a form that says
   `hx-indicator="closest .panel"` puts `htmx-request` on the panel, and a
   descendant rule would then dim every button on it while one of them works
   (style guide 8, `primitives.css`). */
.btn.htmx-request { opacity: 0.5; cursor: progress; }
.btn .btn__spinner { display: none; }
.btn.htmx-request .btn__spinner {
  display: block;
  flex: none;
  width: 1rem;
  height: 1rem;
}
.btn[disabled],
.btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }