/* =========================================================
   Component — Button
   The brand gradient is deliberately absent here. It belongs to
   the trace, the logo, and one word per page. A solid button
   next to a gradient trace reads as restraint; two gradients
   read as a template.
   ========================================================= */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--color-text);
  --btn-border: transparent;
  --btn-pad-block: 0.7rem;
  --btn-pad-inline: 1.4rem;

  /* Two layers: an optional sheen over the fill. A flat button that
     is only its fill is the tell of a template; the same fill with
     a highlight on its top edge reads as an object with thickness.
     Off by default — the sheen is spent on filled buttons only,
     where there is a surface for the light to fall on. */
  --btn-sheen: none;
  --btn-shadow: none;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--btn-pad-block) var(--btn-pad-inline);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-sm);
  background: var(--btn-sheen), var(--btn-bg);
  box-shadow: var(--btn-shadow);
  color: var(--btn-fg);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

/* The ring follows the radius, which an outline does not. */
.btn:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus), var(--btn-shadow);
}

.btn__icon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

/* Primary — the one action a screen is asking for.

   The fill is the brand ramp rather than a flat colour, which is
   what the design system asks a conversion trigger to look like.
   Gradients are safe here because both ends were measured against
   the same ink: --color-on-primary clears 8.4:1 on the light stop
   and 6.4:1 on the dark one, so there is no corner of the button
   where the label stops being readable.

   The sheen still lies over that fill rather than replacing it —
   white and black alpha only, so it moves the top and bottom
   edges without touching either contrast figure. */
.btn--primary {
  --btn-bg: var(--gradient-primary);
  --btn-fg: var(--color-on-primary);
  --btn-sheen: var(--gradient-sheen);
  --btn-shadow: var(--shadow-soft);
}
.btn--primary:hover {
  --btn-bg: var(--color-primary-hover);
  /* --shadow-bloom is `none` in light mode, and `box-shadow: <list>,
     none` is invalid as a whole — so on paper the primary button was
     losing its hover shadow entirely rather than losing the glow.
     The halo is written here instead, in a form that resolves in
     both themes. */
  --btn-shadow:
    var(--shadow-deep),
    0 0 18px color-mix(in srgb, var(--color-primary) 34%, transparent);
}

/* Secondary — everything else that is still a real action */
.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--color-text);
  --btn-border: var(--color-line-strong);
}
.btn--secondary:hover {
  --btn-border: var(--color-growth);
  --btn-fg: var(--color-growth-text);
}

/* Ghost — dense toolbars, table rows */
.btn--ghost { --btn-fg: var(--color-text-secondary); }
.btn--ghost:hover {
  --btn-bg: var(--color-primary-soft);
  --btn-fg: var(--color-text);
}

/* Gold — reserved for upgrade / premium. If it appears twice on
   one screen, one of them is wrong. */
.btn--gold {
  --btn-bg: var(--color-gold-soft);
  --btn-fg: var(--color-gold-text);
  --btn-border: var(--color-line-gold);
}
.btn--gold:hover {
  --btn-bg: var(--color-gold);
  --btn-fg: var(--color-on-secondary);
  --btn-border: var(--color-gold);
  --btn-sheen: var(--gradient-sheen);
  --btn-shadow: var(--shadow-soft);
}

.btn--lg {
  --btn-pad-block: 0.95rem;
  --btn-pad-inline: 1.9rem;
  font-size: var(--fs-base);
}
.btn--sm {
  --btn-pad-block: 0.45rem;
  --btn-pad-inline: 0.9rem;
  font-size: var(--fs-xs);
}
.btn--block { width: 100%; }

/* Icon-only — square, and it must still carry an aria-label */
.btn--icon {
  --btn-pad-block: 0.6rem;
  --btn-pad-inline: 0.6rem;
  --btn-border: var(--color-line);
}
.btn--icon:hover { --btn-border: var(--color-line-strong); }

/* ---------------------------------------------------------
   Action — the row's own verb

   For the one thing a table row exists to do: open it. It is
   louder than a ghost and quieter than the page's primary
   button, which is the register a list of rows needs — twenty
   filled blue buttons down a column is a list where nothing
   is more important than anything else.

   The soft primary wash rather than a solid fill for the same
   reason: it reads as a control at a glance without competing
   with the one filled button the screen actually has.
   --------------------------------------------------------- */
.btn--action {
  --btn-bg: var(--color-primary-soft);
  --btn-fg: var(--color-primary-text);
  --btn-border: transparent;
  font-weight: var(--fw-bold);
}
.btn--action:hover {
  --btn-bg: var(--color-primary);
  --btn-fg: var(--color-on-primary);
  --btn-shadow: var(--shadow-soft);
  /* 1.02, not more: a button that grows in a dense row pushes
     its neighbours in the eye even when the layout holds. */
  transform: scale(1.02);
}
.btn--action:active { transform: scale(0.99); }

/* A row action under a finger has nothing to hover from, and a
   scale that only fires on tap reads as a stutter. */
@media (hover: none) {
  .btn--action:hover { transform: none; }
}

/* ---------------------------------------------------------
   Touch floor

   A finger does not aim as well as a cursor. On a coarse
   pointer every button clears 48px of height, and the page's
   primary ask goes full width once the row can no longer hold
   two buttons side by side.
   --------------------------------------------------------- */
@media (pointer: coarse) {
  .btn { min-block-size: 48px; }
  .btn--sm { min-block-size: 44px; }
}