/* ==========================================================================
   Button
   Figma sources (JOHN REVIEW masters):
   - Button / Skip   3462:17657 (white, 40px: 12px padding)
   - Button / Connect 3462:17660 (dark, 40px)
   - Button / Connect 3462:17772 (dark, 34px table size: 7px/12px padding,
     1px --color-border border)
   Hover + disabled are PROVISIONAL (derived per CLAUDE.md rule 6 — replace
   when designed in Figma). Focus ring comes from base.css :focus-visible.
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  /* Figma: 12px padding with an INSIDE 1px stroke (40px total). CSS borders
     add outside, so padding is 12 - 1 to keep the rendered box at 40px. */
  padding: calc(var(--space-3) - var(--border-width));
  min-height: 40px; /* Figma button height; keeps text-only and icon buttons equal */
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: 1;
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
}

.btn--primary {
  background: var(--color-brand-primary);
  color: var(--color-surface);
}

/* Applied confirmation (Peter, 10 Jul): after a money action commits (record payment, apply a
   discount/refund, cancel), the pressed CTA flicks to this green "✓ Payment applied" state and
   holds ~0.9s BEFORE the view moves on — the confirmation lands where the eye already is.
   Set via JS: add .is-applied + swap the label to a tick + past-tense noun, then continue. */
.btn.is-applied {
  background: var(--color-success);
  border-color: transparent;
  color: #fff;
  pointer-events: none;
}

/* When uiBtnApplied morphs a NON-button (e.g. the "Reverse cancellation" .todo--card), the
   injected tick SVG has no .btn sizing — it stretched to the card width (a ginormous tick).
   Size it like a normal icon (Peter, 11 Jul). :not(.btn) leaves the button morphs untouched. */
/* A CARD-style CTA (.todo--card) confirms exactly like a .btn does — it goes GREEN, with the
   past-tense label in place and the tick in the right-hand state slot (Peter, 23 Jul). Without
   this it stayed white, because the green was scoped to .btn.is-applied. */
.todo--card.is-applied {
  background: var(--color-success);
  border-color: transparent;
  color: #fff;
  pointer-events: none;
}
.todo--card.is-applied .todo__heading,
.todo--card.is-applied .todo__subtext,
.todo--card.is-applied .todo__icon,
.todo--card.is-applied .todo__state {
  color: #fff;
}

.is-applied:not(.btn) > svg {
  width: 20px;
  height: 20px;
  flex: none;
}

/* Table/card size: 34px tall, hairline border (yes, also on the dark one — per Figma) */
.btn--small {
  padding: 6px 11px; /* Figma 7px/12px minus the 1px border → 34px total, matching the inside stroke */
  min-height: 34px;
  border-color: var(--color-border);
}

/* Icon inside a button: 20px at base text size, drawn with currentColor */
.btn > svg {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

/* Icon-only ghost button — 40px square (header toolbar, node 3462:18043) */
.btn--icon {
  width: 40px;
  min-height: 40px;
  padding: 0;
  background: none;
  border-color: transparent;
}

.btn--icon > svg {
  width: 22px;
  height: 22px;
  stroke-width: 1;   /* thin, matching the sidebar + logout icons (Peter, 4 Jul) — CSS overrides the SVG attr */
}

/* Caret inside a button (Actions ▾, Filter ◂ — nodes 3462:18052/18064) */
.btn__caret {
  width: 20px;
  height: 20px;
  flex: none;
  stroke-width: 1;
}

/* provisional - .preview-hover mirrors :hover for the static preview page only */
.btn--primary:hover,
.btn--primary.preview-hover {
  background: var(--color-brand-primary-hover);
}

.btn:not(.btn--primary):hover,
.btn:not(.btn--primary).preview-hover {
  background: var(--color-bg-subtle);
}

/* provisional */
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Buttons rendered as links (workflow navigation) */
a.btn {
  text-decoration: none;
}

/* Destructive action — red TEXT only, no background (Peter, 7 Jul: all delete buttons are just
   red text saying Delete). Pairs with .danger-zone (close account, cancel subscription). */
.btn--danger {
  background: transparent;
  color: var(--color-danger);
  border-color: transparent;
}
/* provisional */
.btn--danger:hover { background: color-mix(in srgb, var(--color-danger) 8%, transparent); }