.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Nav Buttons */
A.nav-button,
A.nav-button:visited,
BUTTON.nav-button {
  cursor: pointer;
  display: inline-flex;
  padding: 0.5rem 0.75rem;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  border: none;
  background-color: var(--nav-button-background-color);
  color: var(--nav-button-color);
  border-radius: var(--radius-md);
  font-weight: var(--fw-bold);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s linear, background-color 0.15s linear;
}

A.nav-button:hover,
BUTTON.nav-button:hover {
  color: var(--nav-button-hover-color);
}

A.nav-button.selected,
BUTTON.nav-button.selected {
  background-color: var(--nav-button-selected-background-color);
  color: var(--nav-button-selected-color);
}

A.nav-button.utility,
BUTTON.nav-button.utility,
A.nav-button.utility:hover,
BUTTON.nav-button.utility:hover {
  padding: 0.125rem;
  background-color: var(--nav-button-background-color);
  color: var(--nav-button-color);
}




/* UI Buttons */

/* `.editor-button` is every button in the rich text editor's toolbar
   (shared/_editor_toolbar), which Lexxy styles itself and which this rule
   would otherwise paint as a row of blue pills. The exclusion is a class, not
   `:not(lexxy-toolbar *)`, so that the rule keeps the (0,1,1) specificity a
   number of other files reason about when they need to beat it. */
BUTTON:not(.editor-button),
INPUT[type="submit"],
A.button,
A.button:visited,
SPAN.button {
  cursor: pointer;
  display: inline-block;
  border: none;
  /* Height comes from padding, not line-height. A fixed line-height sets the
     height of EVERY line, so a label that wrapped to two lines got a 6rem
     button with its text floating in the middle of it.

     The vertical padding is whatever is left of the old 3rem once one line
     box is subtracted — 1lh, so it keeps working when --fs-body steps down at
     the mobile breakpoint. A one-line button is the 3rem it always was; a
     two-line one grows by exactly one line. */
  padding: calc((3rem - 1lh) / 2) 1.5rem;
  background-color: var(--button-background-color);
  color: var(--button-color);
  font-family: var(--font-family-base);
  font-size: var(--fs-body);
  line-height: 1.5;
  border-radius: var(--radius-md);
  box-shadow: var(--button-shadow);
  text-decoration: none;
  text-align: center;
  transition: background-color 0.3s linear;
}

BUTTON:not(.editor-button):hover,
INPUT[type="submit"]:hover,
A.button:hover,
SPAN.button:hover {
  background-color: var(--button-background-hover-color);
  color: var(--button-hover-color);
}

BUTTON.secondary,
A.button.secondary,
SPAN.button.secondary {
  background-color: var(--secondary-button-background-color);
  color: var(--secondary-button-color);
}

BUTTON.tertiary,
A.button.tertiary,
SPAN.button.tertiary {
  background-color: var(--tertiary-button-background-color);
  color: var(--tertiary-button-color);
  box-shadow: none;
}

BUTTON.secondary:hover,
A.button.secondary:hover,
SPAN.button.secondary:hover {
  background-color: var(--secondary-button-background-hover-color);
  color: var(--secondary-button-color);
}

BUTTON.tertiary:hover,
A.button.tertiary:hover,
SPAN.button.tertiary:hover {
  background-color: var(--tertiary-button-background-hover-color);
  color: var(--tertiary-button-color);
}

BUTTON.danger,
A.button.danger {
  background-color: var(--danger-button-background-color);
  color: var(--danger-button-color);
}

BUTTON.danger:hover,
A.button.danger:hover {
  background-color: var(--calabaza);
  color: var(--danger-button-color);
}

/* Destructive at the two lighter weights. `.danger` on its own is the filled
   tomate, which is right for the button that actually deletes and far too loud
   in a row of card actions — it outshouts the one filled action the card is
   really for. These pair the tomate palette with the secondary and tertiary
   RANKS, so a delete can sit in that row at the weight it deserves and the
   only solid tomate anyone sees is still the confirm step. Mirrors the roles
   action-panel.css already defines for a record's own page.

   The outline is an inset shadow, not a border: the base button rule sets
   `border: none` and derives its padding from a target height, so a real
   1.5px border would make this one button 3px taller than the tertiary next
   to it. action-panel.css can use a border because every action there starts
   from `border: 1.5px solid transparent`. */
BUTTON.secondary.danger,
A.button.secondary.danger {
  background-color: transparent;
  color: var(--tomate);
  box-shadow: inset 0 0 0 1.5px rgba(243, 81, 11, 0.35);
}

BUTTON.secondary.danger:hover,
A.button.secondary.danger:hover {
  background-color: var(--nieve);
  color: var(--tomate);
  box-shadow: inset 0 0 0 1.5px rgba(243, 81, 11, 0.6);
}

BUTTON.tertiary.danger,
A.button.tertiary.danger {
  background-color: transparent;
  color: var(--tomate);
  box-shadow: none;
}

/* The pale wash, not a solid fill — tertiary's own hover is niebla rather
   than a solid blue, and the same restraint keeps the filled tomate unique
   to the confirm step. */
BUTTON.tertiary.danger:hover,
A.button.tertiary.danger:hover {
  background-color: var(--color-alert-background);
  color: var(--tomate);
}

/* Same trade as the base button: 2.25rem of height, redistributed. */
BUTTON.small,
A.button.small {
  padding: calc((2.25rem - 1lh) / 2) 1rem;
  line-height: 1.5;
  font-size: var(--fs-small);
}

BUTTON.tiny,
A.button.tiny {
  padding: calc((1.75rem - 1lh) / 2) 0.75rem;
  line-height: 1.5;
  font-size: var(--fs-meta);
}

BUTTON.text,
BUTTON.text:hover {
  cursor: pointer;
  display: inline;
  border: none;
  padding: unset;
  background: none;
  color: var(--pajaro-azul);
  font-size: inherit;
  line-height: unset;
  border-radius: 0;
  box-shadow: none;
  text-decoration: underline;
}

A.button+A.button,
A.button+A,
A.button+FORM.button_to,
BUTTON:not(.editor-button)+BUTTON:not(.editor-button),
FORM.button_to+FORM.button_to {
  margin-left: 1.25ch;
}

BUTTON:not(.editor-button).disabled,
A.button.disabled,
SPAN.button.disabled {
  background-color: var(--button-background-disabled-color);
  color: var(--button-disabled-color);
  border: var(--button-disabled-border);
  cursor: default;
  pointer-events: none;
}

A.button>IMG,
BUTTON>IMG,
SPAN.button>IMG {
  height: 1.5rem;
  vertical-align: text-bottom;
  margin-right: 0.5rem;
}

A.button.small>IMG,
BUTTON.small>IMG,
SPAN.button.small>IMG {
  height: 1.25rem;
  margin-right: 0.25rem;
}