/* Building blocks used by every layout (marketing, auth, signed-in shell): buttons, badges, banners.
   One definition each; areas only position them. Reference: /styleguide. */

/* ---------- Buttons ----------
   Variant (colour) + size. Default size is md. Use one primary per view. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: var(--control-md);
  padding: 0 var(--space-20);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  border: var(--border-control) solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease, border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.btn:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

.btn--primary { color: var(--white); background: var(--purple); }
.btn--primary:hover { color: var(--white); background: var(--purple-deep); }

.btn--yellow { color: var(--ink); background: var(--yellow); }
.btn--yellow:hover { color: var(--ink); background: var(--yellow-hover); }

.btn--white { color: var(--ink); background: var(--white); }
.btn--white:hover { color: var(--ink); background: var(--lilac); }

/* Secondary action next to a primary one. */
.btn--outline { color: var(--ink); background: var(--white); border-color: var(--line-lilac); }
.btn--outline:hover { color: var(--ink); background: var(--lilac); border-color: var(--lilac-soft); }

.btn--outline-purple { color: var(--purple); background: var(--white); border-color: var(--purple); }
.btn--outline-purple:hover { color: var(--white); background: var(--purple); }

/* Quiet action: text-like, still a 40px+ target. */
.btn--ghost { color: var(--purple); background: transparent; border-color: transparent; }
.btn--ghost:hover { color: var(--purple-deep); background: var(--lilac); }

.btn--danger { color: var(--error-field); background: var(--white); border-color: var(--error-line); }
.btn--danger:hover { color: var(--white); background: var(--error-field); border-color: var(--error-field); }

/* Row actions in lists and tables (end, waive, cancel, remove): a small ghost button.
   Same size and shape as .btn--ghost.btn--sm, but quieter until hovered. */
.row-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  min-height: var(--control-sm);
  padding: 0 var(--space-12);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: var(--border-control) solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.row-action:hover { color: var(--ink); background: var(--lilac); }
.row-action--danger { color: var(--error-field); }
.row-action--danger:hover { color: var(--error-field); background: var(--error-bg); }

/* Outline or ghost on a dark or purple surface. */
.btn--on-dark { color: var(--white); background: transparent; border-color: rgb(var(--white-rgb) / .5); }
.btn--on-dark:hover { color: var(--white); background: rgb(var(--white-rgb) / .12); border-color: var(--white); }
.btn--on-dark:focus-visible { outline-color: var(--yellow); }

/* Sizes. --nav and --xl are kept as aliases so older views keep working. */
.btn--sm { min-height: var(--control-sm); padding: 0 var(--space-14); font-size: var(--text-md); }
.btn--md,
.btn--nav { min-height: var(--control-md); padding: 0 var(--space-20); font-size: var(--text-lg); }
.btn--lg,
.btn--xl { min-height: var(--control-lg); padding: 0 var(--space-28); font-size: var(--text-lg); }
.btn--block { display: flex; width: 100%; }
.btn--wrap { padding: var(--space-10) var(--space-16); font-size: var(--text-base); line-height: var(--leading-snug); }

/* States. Turbo disables the submitter and marks the form aria-busy while a request is in flight:
   that reads as progress (spinner), not as "unavailable". */
.btn:disabled,
.btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

form[aria-busy="true"] .btn:disabled { opacity: 1; cursor: progress; }
form[aria-busy="true"] .btn--primary:disabled { background: var(--purple-light); }

form[aria-busy="true"] .btn:disabled::before {
  content: "";
  flex: none;
  width: 18px;
  height: 18px;
  border: 2.5px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: btn-spin .8s linear infinite;
}

@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ---------- Badges (statuses always carry a word) ---------- */
.badge {
  flex: none;
  padding: var(--space-4) var(--space-12);
  font-size: var(--text-md);
  font-weight: 500;
  border-radius: var(--radius-pill);
}

.badge--sm { padding: var(--space-2) var(--space-10); font-size: var(--text-xs); }
.badge--xs { padding: var(--space-2) var(--space-8); font-size: var(--text-xs); }
.badge--paid { color: var(--white); background: var(--status-paid); }
/* The darker red: white text on --status-due is only 3.7:1, below WCAG AA for small badges (US-2.13). */
.badge--due { color: var(--white); background: var(--error-field); }
.badge--soon { color: var(--status-soon-text); background: var(--status-soon); }
.badge--lilac { color: var(--purple-deep); background: var(--lilac); }
.badge--muted { color: var(--text-muted); background: var(--neutral-bg); }
.badge--purple { color: var(--white); background: var(--purple); }

/* ---------- Banners: a message inside a page or form ---------- */
.banner {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-14) var(--space-16);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  border: var(--border-control) solid;
  border-radius: var(--radius-md);
}

.banner b { font-weight: 600; }
.banner--info { color: var(--ink); background: var(--lilac); border-color: var(--line-lilac); }
.banner--success { color: var(--success-text); background: var(--success-bg); border-color: var(--success-line); }
.banner--warning { color: var(--status-soon-text); background: var(--warning-bg); border-color: var(--warning-line); }
.banner--error { color: var(--error-text); background: var(--error-bg); border-color: var(--error-line); }

.banner a {
  font-weight: 600;
  color: var(--purple-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}