/* ============================================================
   Kit — button.css   (the action button)
   Three emphasis tiers, two sizes, optional icon, icon-only.
   Themeable: colours come from the client accent tokens.

   Tiers:   .bp-btn--primary    solid accent fill
            .bp-btn--secondary  accent outline, transparent
            .bp-btn--tertiary   ghost (no border, quiet hover)
   Sizes:   (default = regular)   .bp-btn--sm
   Icon:    .bp-btn__icon slot (leading or trailing);
            .bp-btn--icon         icon-only (square)
            .bp-btn--reveal       trailing icon hidden until hover
   States are written for :hover/:focus-visible/:active AND for the
   forcing classes .is-hover/.is-focus/.is-active so a states board
   can show them all at rest. :disabled / .is-disabled mutes them.
   ============================================================ */

.bp-btn {
  --btn-h: 34px;                        /* CTA height: matches the nav/menu buttons (was 40) */
  --btn-pad: 16px;
  box-sizing: border-box;
  height: var(--btn-h);
  min-width: 0;
  padding: 0 var(--btn-pad);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 16px; corner-shape: squircle;
  font: inherit; font-size: 14px; font-weight: 500; line-height: 1;   /* CTA text = nav-item weight (was 600) */
  white-space: nowrap;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease,
              color .16s ease, box-shadow .16s ease, transform .1s ease,
              opacity .2s ease;   /* eases the disabled ⇄ enabled fade (e.g. a gated confirm) */
}

/* ---- size ---- */
.bp-btn--sm { --btn-h: 32px; --btn-pad: 12px; font-size: 13px; }

/* ---- icon slot ---- */
.bp-btn__icon { flex: none; width: 20px; height: 20px; display: grid; place-items: center; }
.bp-btn__icon svg { width: 100%; height: 100%; display: block; }
.bp-btn--sm .bp-btn__icon { width: 18px; height: 18px; }
/* flip a right-pointing icon to point left (e.g. a "Previous" button) */
.bp-btn__icon--flip { transform: scaleX(-1); }

/* icon-only = square */
.bp-btn--icon { width: var(--btn-h); padding: 0; }

/* reveal: icon collapsed until hover, then slides in. The button stays
   centered (gap 0), so the label slides over to make room. Works for a
   trailing icon (slides right) or a leading icon (slides left). */
.bp-btn--reveal { gap: 0; }
.bp-btn--reveal .bp-btn__icon {
  width: 0; opacity: 0;
  transition: width .2s cubic-bezier(.68, -0.55, .27, 1.55),
              margin .2s cubic-bezier(.68, -0.55, .27, 1.55),
              opacity .14s ease;
  overflow: hidden;
}
/* default = trailing icon: 6px gap to the label; -2.5px on the outer side
   cancels the icon's own 12.5% transparent padding so the pair reads
   centered. (Can't use :last-child — the label is a bare text node, so the
   icon span is always both first and last element child.) */
.bp-btn--reveal:hover .bp-btn__icon,
.bp-btn--reveal.is-hover .bp-btn__icon  { width: 20px; opacity: 1; margin-left: 6px; margin-right: -2.5px; }
/* leading icon (e.g. a Previous button): mark it .bp-btn__icon--lead */
.bp-btn--reveal:hover .bp-btn__icon--lead,
.bp-btn--reveal.is-hover .bp-btn__icon--lead { margin-left: -2.5px; margin-right: 6px; }
.bp-btn--sm.bp-btn--reveal:hover .bp-btn__icon,
.bp-btn--sm.bp-btn--reveal.is-hover .bp-btn__icon { width: 18px; }

/* reverse reveal: an icon-only button that grows a label on the LEFT of the
   icon on hover (e.g. a Send button with a chat bubble). Markup is
   <span class="bp-btn__label">…</span><span class="bp-btn__icon"></span>. */
.bp-btn--reveal-label {
  gap: 0; padding: 0; width: var(--btn-h); overflow: hidden;
  /* ease-out widening (monotonic, never shrinks back) to avoid hover flicker */
  transition: background .16s ease, border-color .16s ease, color .16s ease,
              box-shadow .16s ease, transform .1s ease,
              padding .2s cubic-bezier(.22, 1, .36, 1);
}
.bp-btn--reveal-label .bp-btn__label {
  max-width: 0; opacity: 0; white-space: nowrap; overflow: hidden;
  /* ease-out (no undershoot) so the button never momentarily shrinks under
     the cursor, which was causing the hover to flicker open/closed */
  transition: max-width .2s cubic-bezier(.22, 1, .36, 1), opacity .14s ease, margin .2s ease;
}
.bp-btn--reveal-label:hover,     .bp-btn--reveal-label.is-hover { width: auto; padding: 0 14px; }
.bp-btn--reveal-label:hover .bp-btn__label,
.bp-btn--reveal-label.is-hover .bp-btn__label { max-width: 160px; opacity: 1; margin-right: 6px; }

/* shared soft button shadow (matched to Bal's Figma stack) */
.bp-btn--primary, .bp-btn--secondary { --btn-shadow: var(--bp-shadow-control); }

/* ===================== PRIMARY — accent gradient + outline + shadow ==== */
.bp-btn--primary {
  color: var(--bp-accent-foreground);
  border-color: var(--bp-accent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bp-accent) 90%, white),
    color-mix(in srgb, var(--bp-accent) 90%, black));
  box-shadow: var(--btn-shadow);
}
.bp-btn--primary:hover, .bp-btn--primary.is-hover {
  background: linear-gradient(180deg, var(--bp-accent), color-mix(in srgb, var(--bp-accent) 82%, black));
}
.bp-btn--primary:active, .bp-btn--primary.is-active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bp-accent) 84%, black), color-mix(in srgb, var(--bp-accent) 72%, black));
  box-shadow: 0 1px 2px rgba(10,13,18,.12); transform: translateY(.5px);
}

/* ===================== SECONDARY — white gradient + gray outline + shadow */
.bp-btn--secondary {
  color: var(--bp-accent);
  /* solid (not translucent) border so the drop shadow can't bleed through
     it at the bottom and make the edge look soft */
  border-color: #dcdcdc;
  /* a whisper of a gradient: white to a very light neutral gray, barely there */
  background: linear-gradient(180deg, #ffffff, #f7f7f7);
  /* real-real-subtle lift: 1px down, 2px blur */
  box-shadow: 0 1px 2px rgba(10, 13, 18, .05);
}
.bp-btn--secondary:hover, .bp-btn--secondary.is-hover { background: linear-gradient(180deg, #ffffff, #f1f1f1); border-color: #cfcfcf; }
.bp-btn--secondary:active, .bp-btn--secondary.is-active { background: linear-gradient(180deg, #f7f7f7, #ededed); box-shadow: 0 1px 2px rgba(10,13,18,.08); transform: translateY(.5px); }

/* ===================== TERTIARY — flat gray outline, no fill, no shadow == */
.bp-btn--tertiary {
  color: #6b7280;                /* a clear medium gray, not near-black */
  background: transparent;
  border-color: rgba(17, 24, 39, .16);
}
.bp-btn--tertiary:hover,  .bp-btn--tertiary.is-hover  { background: rgba(17, 24, 39, .04); border-color: rgba(17, 24, 39, .22); }
.bp-btn--tertiary:active, .bp-btn--tertiary.is-active { background: rgba(17, 24, 39, .07); transform: translateY(.5px); }

/* ===================== GHOST — no outline ============================= */
.bp-btn--ghost {
  color: #6b7280;                /* a clear medium gray, not the accent */
  background: transparent;
  border-color: transparent;
}
/* hover = light gray stroke, no fill (same stroke as tertiary's default) */
.bp-btn--ghost:hover,  .bp-btn--ghost.is-hover  { background: transparent; border-color: rgba(17, 24, 39, .16); }
.bp-btn--ghost:active, .bp-btn--ghost.is-active { background: rgba(17, 24, 39, .05); border-color: rgba(17, 24, 39, .16); transform: translateY(.5px); }

/* ===================== NAV — a left-aligned row for sidebar / menu lists ==
   A quiet, full-width variant. Unlike ghost (whose hover is an outline), the
   nav hover is a soft fill, so a vertical stack reads as rows, not chips. The
   label sits left; a trailing element (a count, a "soon" tag) floats right via
   margin-left:auto. .is-active marks the current row (accent tint + text). */
.bp-btn--nav {
  --btn-h: auto;
  width: 100%;
  min-height: 32px;
  justify-content: flex-start;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--bp-radius-sm);
  font-size: 13.5px; font-weight: 500;
  color: var(--bp-surface-foreground);
  background: transparent;
  border-color: transparent;
}
.bp-btn--nav:hover,  .bp-btn--nav.is-hover  { background: color-mix(in oklab, currentColor 8%, transparent); border-color: transparent; }
.bp-btn--nav:active, .bp-btn--nav.is-pressed { background: color-mix(in oklab, currentColor 12%, transparent); transform: none; }
.bp-btn--nav.is-active {
  background: var(--bp-accent-tint);
  color: var(--bp-accent-strong);
  font-weight: 600;
}

/* =========================== focus + disabled ======================== */
.bp-btn:focus-visible,
.bp-btn.is-focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bp-accent) 32%, transparent);
}
.bp-btn:disabled,
.bp-btn.is-disabled {
  opacity: .45; cursor: not-allowed; transform: none;
  pointer-events: none;
}

/* ============================================================
   Icon motion — static SVG + CSS (keyframes in kit/icon-anim.css).
   Button icons are inline Tabler SVGs now, not Lottie. A reveal
   icon draws itself in as it appears; any icon can carry a per-icon
   hover loop matched to its meaning. The icon's drawn <path>s need
   pathLength="1".
   ============================================================ */

/* reveal: the icon draws in as the button widens to show it */
.bp-btn--reveal .bp-btn__icon svg path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .2s cubic-bezier(.4, 0, .2, 1) .03s;
}
.bp-btn--reveal .bp-btn__icon svg path:nth-of-type(2) { transition-delay: .06s; }
.bp-btn--reveal .bp-btn__icon svg path:nth-of-type(3) { transition-delay: .11s; }
.bp-btn--reveal:hover .bp-btn__icon svg path,
.bp-btn--reveal.is-hover .bp-btn__icon svg path { stroke-dashoffset: 0; }
/* static SVG carries no transparent padding, so drop the old Lottie margin fudge */
.bp-btn--reveal:hover .bp-btn__icon,
.bp-btn--reveal.is-hover .bp-btn__icon { margin-right: 0; }
.bp-btn--reveal:hover .bp-btn__icon--lead,
.bp-btn--reveal.is-hover .bp-btn__icon--lead { margin-left: 0; margin-right: 6px; }

/* per-icon hover loop, matched to the icon; starts after the draw-in.
   Animated icons must not also use transform-flip (the loop owns transform);
   point a "back" arrow's SVG left instead, and use --nudge-back. */
@media (prefers-reduced-motion: no-preference) {
  .bp-btn:hover .bp-btn__icon--nudge,      .bp-btn.is-hover .bp-btn__icon--nudge      { animation: bp-ico-nudge .7s cubic-bezier(.34, 1.56, .64, 1) .26s infinite; }
  .bp-btn:hover .bp-btn__icon--nudge-back, .bp-btn.is-hover .bp-btn__icon--nudge-back { animation: bp-btn-nudge-back .7s cubic-bezier(.34, 1.56, .64, 1) .26s infinite; }
  .bp-btn:hover .bp-btn__icon--pulse,      .bp-btn.is-hover .bp-btn__icon--pulse      { animation: bp-ico-pulse .7s cubic-bezier(.34, 1.56, .64, 1) .26s infinite; }
  .bp-btn:hover .bp-btn__icon--bob,        .bp-btn.is-hover .bp-btn__icon--bob        { animation: bp-ico-bob   .7s cubic-bezier(.34, 1.56, .64, 1) .26s infinite; }
  .bp-btn:hover .bp-btn__icon--spin,       .bp-btn.is-hover .bp-btn__icon--spin       { animation: bp-ico-spin 1.4s linear .26s infinite; }
  .bp-btn:hover .bp-btn__icon--fly,        .bp-btn.is-hover .bp-btn__icon--fly        { animation: bp-ico-fly  .75s cubic-bezier(.34, 1.56, .64, 1) .26s infinite; }
}
@keyframes bp-btn-nudge-back { 0% { transform: translateX(0); } 50% { transform: translateX(-3px); } 100% { transform: translateX(0); } }