/* ---- 6. Buttons & CTAs ---------------------------------------------------- */

button,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--ta-r-sm);
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.12s ease, border-color 0.12s ease,
    color 0.12s ease, box-shadow 0.12s ease;
}

/* Primary action — solid, flat, no glow.
 *
 * `.unstyled` is the opt-out for a submit button that is not a *button* at all:
 * a composite control whose face is its own thing — a stepper stage, a kanban
 * card, a view tab. Those are still `type="submit"` because that is how they act
 * with no JavaScript, and without an opt-out they inherited the accent fill and
 * painted a blue slab over their own content. Selecting on `type="submit"` is
 * what creates that trap, so the escape hatch belongs here next to it rather
 * than as a specificity fight at each call site. */
button[type="submit"]:not(.secondary):not(.outline):not(.unstyled),
input[type="submit"] {
  background: var(--ta-accent);
  color: #fff;
}

button[type="submit"]:not(.secondary):not(.outline):not(.unstyled):hover,
input[type="submit"]:hover {
  background: var(--ta-accent-hover);
}

/* A composite face brings its own box: no padding, no min height, no centring
   opinions from the button base above. */
button.unstyled {
  padding: 0;
  border-color: transparent;
  background: none;
  color: inherit;
  font-weight: inherit;
  white-space: normal;
}

/* Secondary / ghost actions */
a[role="button"].secondary,
button.secondary {
  border-color: var(--ta-border-strong);
  color: var(--ta-text);
}

a[role="button"].secondary:hover,
button.secondary:hover {
  border-color: var(--ta-accent);
  color: var(--ta-accent);
  background: transparent;
  text-decoration: none;
}

/* Row-level destructive action (Delete) */
button.secondary.outline {
  padding: 0.3rem 0.65rem;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--ta-err);
  border-color: var(--ta-border);
}

button.secondary.outline:hover {
  border-color: var(--ta-err);
  color: var(--ta-err);
  background: rgba(214, 69, 69, 0.06);
}

.button-block {
  text-align: center;
}

/* Joined control groups (search bars, submit + cancel rows). Inner corners
   flatten so the group reads as one unit; the outer radius stays. */
[role="group"] {
  display: flex;
  align-items: stretch;
}

[role="group"]>* {
  position: relative;
}

[role="group"]>*:not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

[role="group"]>*:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

[role="group"]>*:hover,
[role="group"]>*:focus,
[role="group"]>*:focus-within {
  z-index: 1;
}