/*
 * action, the one primary action. Unforged house identity 3.1.0 Broadside, 2026-08-22. Owner: Andreas.
 *
 * An ink block, squared, uppercase label in paper, line.edge border in the same ink, appearing at
 * most once per viewport, inverting to paper on ink the frame the pointer enters and reverting the
 * frame it leaves (tokens action._note, motion.state 0ms). Geometry is the button's: two line
 * boxes tall (space.block), the label step on the body line box (Big Shoulders Display 600 since
 * 3.1.0, tokens size.label: the action label included), space.para inline padding. On the
 * flood the block is already the ground, so the action there is the inversion at rest: paper block,
 * ink label, and its states invert back. The focus ring from base.css (ink core, paper halo) sits
 * on the inverted block as a thicker ink edge. No chromatic action exists and no chrome one.
 */
.u-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--u-space-row);
  box-sizing: border-box;
  padding-block: calc(var(--u-space-row) - var(--u-line-edge));
  padding-inline: var(--u-space-para);
  border: var(--u-line-edge) solid var(--u-color-action-primary);
  border-radius: var(--u-radius-none);
  background-color: var(--u-color-action-primary);
  color: var(--u-color-action-ink);
  font-family: var(--u-font-display2);
  font-weight: 600;
  font-size: var(--u-size-label);
  line-height: var(--u-leading-body);
  letter-spacing: var(--u-tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--u-motion-state), color var(--u-motion-state);
}
/* the stamp: paper on ink, the frame the pointer or the focus enters */
.u-action:hover,
.u-action:focus-visible,
.u-action:active {
  background-color: var(--u-color-action-ink);
  color: var(--u-color-action-primary);
}
/* on the flood the action is the inversion at rest and its states invert back */
.u-ground-flood .u-action {
  border-color: var(--u-color-action-ink);
  background-color: var(--u-color-action-ink);
  color: var(--u-color-action-primary);
}
.u-ground-flood .u-action:hover,
.u-ground-flood .u-action:focus-visible,
.u-ground-flood .u-action:active {
  background-color: var(--u-color-action-primary);
  color: var(--u-color-action-ink);
}
/* disabled: the faint ink of the ground as the block, the ground as the label, no inversion */
.u-action:disabled,
.u-action[aria-disabled="true"],
.u-action:disabled:hover,
.u-action[aria-disabled="true"]:hover {
  background-color: var(--u-ground-ink-faint);
  border-color: var(--u-ground-ink-faint);
  color: var(--u-color-ground-paper);
  cursor: not-allowed;
}
.u-ground-flood .u-action:disabled,
.u-ground-flood .u-action[aria-disabled="true"],
.u-ground-flood .u-action:disabled:hover,
.u-ground-flood .u-action[aria-disabled="true"]:hover {
  color: var(--u-color-ground-flood);
}
/* the action that fills its column, the phone setting of a form row */
.u-action--wide { display: flex; width: 100%; }