/* ============================================================
   Container — shared responsive layout constraint
   Provides 1024px max content width with responsive side padding.
   Import this in any component that uses the .container class.
   ============================================================ */

.container {
  position:   relative;
  width:      100%;
  max-width:  calc(1024px + 160px); /* 1024px content + 80px × 2 */
  padding:    0 80px;
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 60px sides */
@media (max-width: 991px) {
  .container {
    padding: 0 60px;
  }
}

/* Landscape mobile (≤767px): 2rem sides */
@media (max-width: 767px) {
  .container {
    padding: 0 2rem;
  }
}



/* ============================================================
   Wide container — 1360px content + 48px side padding
   Used for full-bleed section content blocks (slider, big cards)
   that need to be wider than the standard 1024px text container.
   ============================================================ */

.container-wide {
  width:      100%;
  max-width:  calc(1384px + 96px);   /* 1384px content + 48px × 2 */
  padding:    0 3rem;                /* 48px sides */
  margin:     0 auto;
  box-sizing: border-box;
}

/* Tablet (≤991px): 16px less than .container (60px → 44px) */
@media (max-width: 991px) {
  .container-wide {
    padding: 0 44px;
  }
}

/* Landscape mobile (≤767px): 16px less than .container (2rem → 1rem) */
@media (max-width: 767px) {
  .container-wide {
    padding: 0 1rem;
  }
}


/* ============================================================
   AboutTimelineSection — Figma b54Vp5G1JrG0jhDNIxBaxz, node 7214:9715.
   Spec: AboutTimelineSection.figma.md.

   A redesign inset panel (16px white border, 48px radius — as
   AboutWorkforceSection) holding the standard header convention on one
   `.container`, the chapter rows with their rail, and a centred CTA.
   ============================================================ */


/* ---- Panel ------------------------------------------------ */

/* Figma measures its padding from the frame edge, border included:
   64 = 16 border + 48, 128 = 16 + 112. */
.about-timeline {
  background:    var(--panel-cream);            /* #FAF6F0 — Figma's --accent */
  border:        16px solid var(--background-white);
  border-radius: 48px;                          /* no 48px radius token */
  padding:       3rem 0 7rem;                   /* 48px / 112px */
  box-sizing:    border-box;
  font-family:   var(--font-family-default);
}

/* Below 1480 the panel's border would push the content 16px further in than
   every white section above and below it, so the container gives it back
   (80 → 64; the cap shrinks by both sides' 16). At 1480+ the stock container
   stays: the sticky rail badge is positioned off its 80px padding, and the
   container is narrower than the panel there anyway. */
@media (max-width: 1479px) {
  .about-timeline__inner.container {
    max-width:      calc(1024px + 128px);
    padding-inline: 64px;
  }
}

/* header → chapters → CTA, flat 64px (the convention's `__content` stack —
   Figma's frame gap is the same 64 between all three). */
.about-timeline__content {
  display:        flex;
  flex-direction: column;
  gap:            4rem;                         /* 64px */
}


/* ---- Chapters + rail geometry (7214:9724) ----------------- */

/* Rail geometry, Figma's at 1512 (x from the rail's left edge, 3px strokes):
   human line at 26, AI line at 90 while it is apart, and at 42 once it is
   back beside the human one. Each curve is two quarter-arcs with no straight
   between them, so its radius is half the step it makes (32, then 24).
   `--tl-pad-*` are each chapter's copy padding (top / `-end` bottom) — every
   mark hangs off its chapter's top padding; `--tl-gap` is the space between
   chapters, which the curves are drawn in. Phones change only these, the
   ring drop and the line end; everything else is derived. */
.about-timeline__chapters {
  --tl-rail-w:      106px;
  --tl-x-h:         26px;
  --tl-x-ai:        90px;
  --tl-x-m:         42px;
  --tl-r-out:       calc((var(--tl-x-ai) - var(--tl-x-h)) / 2);
  --tl-r-in:        calc((var(--tl-x-ai) - var(--tl-x-m)) / 2);
  --tl-gap:         4rem;                       /* 64px */
  --tl-pad-h:       4rem;                       /* 64px — the copy sits 4 lower */
  --tl-pad-h-end:   2.5rem;                     /* 40px */
  --tl-pad-ai:      4rem;                       /* 64px */
  --tl-pad-ai-end:  4rem;                       /* 64px */
  --tl-pad-now:     4rem;                       /* 64px */
  --tl-pad-now-end: 4rem;                       /* 64px */
  /* How far the ring's bottom sits below chapter 1's bottom (inside it: -3). */
  --tl-ring-drop:   -3px;
  /* Where both lines stop, above the last chapter's bottom. */
  --tl-end:         28px;
  /* Derived: the Now pill's top in its chapter (centred on the chapter's
     pill), and where the AI line starts stepping back in, below chapter 2's
     bottom — its two arcs and a 47px straight end 4px above the Now pill. */
  --tl-now-top:     calc(var(--tl-pad-now) - 7px);
  --tl-merge-y:     calc(var(--tl-gap) + var(--tl-now-top) - 51px - 2 * var(--tl-r-in));

  display:        flex;
  flex-direction: column;
  gap:            var(--tl-gap);
  margin:         0;
  padding:        0;
  list-style:     none;
}

/* Rail | copy, 16px apart — Figma's 106 + 16 + 902 inside the 1024. */
.about-timeline__chapter {
  display:               grid;
  grid-template-columns: var(--tl-rail-w) minmax(0, 1fr);
  column-gap:            var(--spacing-4);      /* 16px */
}


/* ---- Copy (Industry intro 7214:9734 / 9742 / 10722) ------- */

/* Figma lays each chapter on a 3-column grid with the copy spanning two:
   (W - 2 gaps) / 3 * 2 + 1 gap = 596 of 902. The AI chapter sits 96px in
   (its row's `pl 96`), so its copy is two thirds of what is left: 532. */
.about-timeline__copy {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-3);             /* 12px — title group → body */
  max-width:      calc((100% - 2rem) / 3 * 2 + 1rem);
  padding-block:  var(--tl-pad-now) var(--tl-pad-now-end);   /* chapter 3, and any past it */
  box-sizing:     border-box;
  min-width:      0;
}

/* The first chapter's row is shorter at the bottom (pb 36 + its copy's py 4)
   and 4px lower at the top — which is what puts the ring right under it. */
.about-timeline__chapter[data-track='human'] .about-timeline__copy {
  padding-block: calc(var(--tl-pad-h) + 4px) var(--tl-pad-h-end);   /* 68 / 40 */
}

.about-timeline__chapter[data-track='ai'] .about-timeline__copy {
  max-width:     calc((100% - 6rem - 2rem) / 3 * 2 + 1rem + 6rem);
  padding-block: var(--tl-pad-ai) var(--tl-pad-ai-end);
  padding-left:  6rem;                          /* 96px */
}

/* pill → title 8px */
.about-timeline__title-group {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--spacing-2);             /* 8px */
}

/* Figma's Soft Badge on #EDE8DF — off the palette, exactly between
   `--background` and `--muted` (as LegalHubPracticeAreasSection's). */
.about-timeline__pill {
  background: #EDE8DF;
}

/* The pill's 12px icon slot holds a ~8px dot in the line's colour. */
.about-timeline__dot {
  flex-shrink:   0;
  width:         8px;
  height:        8px;
  margin-inline: 2px;
  border-radius: var(--radius-full);
  background:    var(--primary);
}

.about-timeline__chapter[data-track='ai'] .about-timeline__dot {
  background: var(--info);
}

.about-timeline__chapter[data-track='together'] .about-timeline__dot {
  background: var(--foreground);
}

.about-timeline__title {
  margin:      0;
  font-size:   var(--font-size-2xl);            /* 24px */
  line-height: var(--line-height-2xl);          /* 32px */
  font-weight: var(--font-weight-bold);
  color:       var(--foreground);
}

.about-timeline__body {
  margin:      0;
  font-size:   var(--font-size-xl);             /* 20px */
  line-height: var(--line-height-xl);           /* 28px */
  color:       var(--foreground);
}


/* ---- Rail (Line 7214:10757) ------------------------------- */

/* Stretches to its chapter's height. Everything in it is placed from the
   chapter's top (marks: they sit beside the pill) or its bottom (curves:
   they sit in the gap below), and lines that cross into the next chapter
   just run past the bottom edge. */
.about-timeline__rail {
  position: relative;
}

/* Lines: 3px, round-capped. `top` / `bottom` are Figma's endpoints pushed
   out by the 1.5px cap. Only the ends you can see are round — an end that
   meets another segment or an arc is square, or the two caps leave a notch
   in the line. */
.about-timeline__line {
  position:      absolute;
  left:          calc(var(--tl-x-h) - 1.5px);
  width:         3px;
  border-radius: 1.5px;
  background:    var(--primary);
}

.about-timeline__line--h-gap,
.about-timeline__line--branch-lead,
.about-timeline__line--ai-run {
  border-radius: 1.5px 1.5px 0 0;              /* runs on below */
}

.about-timeline__line--branch-tail,
.about-timeline__line--merge-tail,
.about-timeline__line--h-into-now {
  border-radius: 0 0 1.5px 1.5px;              /* continues from above */
}

.about-timeline__line--h-through {
  border-radius: 0;                            /* both ends are joins */
}

.about-timeline__line--ai {
  left:       calc(var(--tl-x-ai) - 1.5px);
  background: var(--info);
}

.about-timeline__mark {
  position: absolute;
  display:  block;
}

.about-timeline__mark--human {
  color: var(--primary);
}

.about-timeline__mark--ai {
  color: var(--info);
}

.about-timeline__mark-disc {
  fill: currentColor;
}

/* The glyphs inside the discs are drawn in the panel's cream. */
.about-timeline__mark-glyph {
  stroke: var(--secondary);
}

.about-timeline__mark--together .about-timeline__mark-glyph {
  stroke: var(--foreground);
}

/* Curves: the arms are bordered boxes with one rounded corner (as v1's
   connectors and the homepage WorkforceSection's). A box's border centre
   sits 1.5px inside its edge, so each box is r + 1.5 with an r + 1.5 outer
   radius — which puts the stroke's centre on radius r and on the line x's. */
.about-timeline__arc {
  position:   absolute;
  box-sizing: border-box;
  border:     0 solid var(--info);
}


/* Chapter 1 — human. Mark at 64 (the pill's 68 less 4); line down to the
   ring, which sits 3px off the row's bottom. */
.about-timeline__chapter[data-track='human'] .about-timeline__mark {
  top:  var(--tl-pad-h);
  left: calc(var(--tl-x-h) - 16px);
}

.about-timeline__line--h-first {
  top:    calc(var(--tl-pad-h) + 34.5px);      /* 100 */
  bottom: calc(22.5px - var(--tl-ring-drop));  /* 25.5 — the ring's top - 4 */
}

.about-timeline__ring {
  position:      absolute;
  bottom:        calc(-1 * var(--tl-ring-drop));
  left:          calc(var(--tl-x-h) - 10px);
  width:         20px;
  height:        20px;
  border:        3px solid var(--primary);
  border-radius: var(--radius-full);
  box-sizing:    border-box;
}

/* 4px under the ring, across the gap to chapter 2 (which carries it on). */
.about-timeline__line--h-gap {
  top:    calc(100% + var(--tl-ring-drop) + 2.5px);           /* 100% - 0.5 */
  height: calc(var(--tl-gap) - var(--tl-ring-drop) - 2px);    /* 65 */
}

/* The AI line leaves at the same point, runs 27.5px, steps right… */
.about-timeline__line--branch-lead {
  left:   calc(var(--tl-x-h) - 1.5px);
  top:    calc(100% + var(--tl-ring-drop) + 2.5px);
  height: 29px;
}

.about-timeline__arc--out-1 {
  top:                       calc(100% + var(--tl-ring-drop) + 31.5px);   /* 100% + 28.5 */
  left:                      calc(var(--tl-x-h) - 1.5px);
  width:                     calc(var(--tl-r-out) + 1.5px);
  height:                    calc(var(--tl-r-out) + 1.5px);
  border-left-width:         3px;
  border-bottom-width:       3px;
  border-bottom-left-radius: calc(var(--tl-r-out) + 1.5px);
}

.about-timeline__arc--out-2 {
  top:                     calc(100% + var(--tl-ring-drop) + 30px + var(--tl-r-out));
  left:                    calc(var(--tl-x-h) + var(--tl-r-out));
  width:                   calc(var(--tl-r-out) + 1.5px);
  height:                  calc(var(--tl-r-out) + 1.5px);
  border-top-width:        3px;
  border-right-width:      3px;
  border-top-right-radius: calc(var(--tl-r-out) + 1.5px);
}

/* …and drops to 4px above chapter 2's mark (its top + pad - 8). */
.about-timeline__line--branch-tail {
  top:    calc(100% + var(--tl-ring-drop) + 30px + 2 * var(--tl-r-out));
  height: calc(var(--tl-gap) + var(--tl-pad-ai) - var(--tl-ring-drop) - 36.5px - 2 * var(--tl-r-out));
}


/* Chapter 2 — AI. The human line runs straight through, row and gap. */
.about-timeline__line--h-through {
  top:    0;
  bottom: calc(-1 * var(--tl-gap));
}

/* If the AI chapter is the last one, both lines stop where chapter 3's do —
   28px off the bottom, round-capped — instead of running into the gap. */
.about-timeline__chapter:last-child .about-timeline__line--h-through,
.about-timeline__chapter:last-child .about-timeline__line--ai-run {
  bottom:        calc(var(--tl-end) - 1.5px);
  border-radius: 1.5px;
}

/* Mark centred on the pill (64 + 13) — 4px higher than chapter 1's. */
.about-timeline__chapter[data-track='ai'] .about-timeline__mark {
  top:  calc(var(--tl-pad-ai) - 4px);
  left: calc(var(--tl-x-ai) - 16px);
}

.about-timeline__line--ai-run {
  top:    calc(var(--tl-pad-ai) + 30.5px);     /* mark bottom + 4 */
  bottom: calc(-1 * var(--tl-merge-y));        /* -22 */
}

/* 22px into the gap the AI line steps left, in beside the human one. */
.about-timeline__arc--in-1 {
  top:                        calc(100% + var(--tl-merge-y));
  left:                       calc(var(--tl-x-ai) - var(--tl-r-in));
  width:                      calc(var(--tl-r-in) + 1.5px);
  height:                     calc(var(--tl-r-in) + 1.5px);
  border-right-width:         3px;
  border-bottom-width:        3px;
  border-bottom-right-radius: calc(var(--tl-r-in) + 1.5px);
}

.about-timeline__arc--in-2 {
  top:                    calc(100% + var(--tl-merge-y) + var(--tl-r-in) - 1.5px);
  left:                   calc(var(--tl-x-m) - 1.5px);
  width:                  calc(var(--tl-r-in) + 1.5px);
  height:                 calc(var(--tl-r-in) + 1.5px);
  border-top-width:       3px;
  border-left-width:      3px;
  border-top-left-radius: calc(var(--tl-r-in) + 1.5px);
}

/* Down to 4px above the "Now" pill — 47 straight + the cap. */
.about-timeline__line--merge-tail {
  left:   calc(var(--tl-x-m) - 1.5px);
  top:    calc(100% + var(--tl-merge-y) + 2 * var(--tl-r-in) - 1.5px);
  height: 50px;
}


/* Chapter 3 — together. The 56 x 40 pill is centred between the two lines,
   on the chapter's pill; both lines carry on under it to 28px off the
   bottom. The human line is drawn from the gap above (over chapter 2's,
   which runs to this chapter's top), so it still meets the pill when the
   pill starts right at the top of the chapter (phones). */
.about-timeline__line--h-into-now {
  top:    calc(-1 * var(--tl-gap));
  height: calc(var(--tl-gap) + var(--tl-now-top) - 2.5px);   /* to the pill's top - 4 */
}

.about-timeline__chapter[data-track='together'] .about-timeline__mark {
  top:  var(--tl-now-top);
  left: calc((var(--tl-x-h) + var(--tl-x-m)) / 2 - 28px);
}

.about-timeline__line--after-now,
.about-timeline__line--ai-after-now {
  top:    calc(var(--tl-now-top) + 42.5px);    /* pill bottom + 4 */
  bottom: calc(var(--tl-end) - 1.5px);
}

.about-timeline__line--ai-after-now {
  left: calc(var(--tl-x-m) - 1.5px);
}


/* ---- CTA (7501:2515) -------------------------------------- */

.about-timeline__actions {
  display:         flex;
  justify-content: center;
}


/* ---- Responsive ------------------------------------------- */

/* No tablet frame — panel steps follow AboutWorkforceSection. */
@media (max-width: 991px) {
  .about-timeline {
    border-radius: 32px;
    padding:       3rem 0 5rem;                 /* 48px / 80px */
  }

  /* `.container`'s 60 less the border's 16. */
  .about-timeline__inner.container {
    padding-inline: 44px;
  }

  /* The copy takes the whole column; the AI chapter keeps its step in. */
  .about-timeline__copy {
    max-width: none;
  }

  .about-timeline__chapter[data-track='ai'] .about-timeline__copy {
    max-width: none;
  }
}

/* Phones — the mobile frame (DqhUvi29K7mfqd8vEonBIz 7539:12941; spec
   AboutTimelineSection.mobile.figma.md). Header → chapters → CTA stay 64. */
@media (max-width: 767px) {
  .about-timeline {
    border-width:  12px;
    border-radius: 24px;
    padding:       1rem 0 3rem;                 /* 16px / 48px */
  }

  /* The page's 2rem mobile edge: 20 + the 12px border (owner, 2026-10-27 —
     the frame draws 16 + 12 = 28). */
  .about-timeline__inner.container {
    padding-inline: 20px;
  }

  /* The desktop rail's x's in a 72px box: the AI mark and line hang over
     the gap into the copy column, clear of the AI chapter's stepped-in copy.
     Rows sit 12 apart, so the frame makes room for the curves with padding
     instead: 128 above the AI chapter (the branch), the ring hanging 9 into
     the gap, and the Now pill at its chapter's top. */
  .about-timeline__chapters {
    --tl-rail-w:      72px;
    --tl-gap:         0.75rem;                  /* 12px */
    --tl-pad-h:       0px;
    --tl-pad-ai:      8rem;                     /* 128px */
    --tl-pad-now:     10px;
    --tl-pad-now-end: 0px;
    --tl-ring-drop:   9px;
    --tl-end:         12px;
  }

  /* Every chapter keeps 20 clear on its right (Figma's `pr 20`). */
  .about-timeline__copy {
    padding-right: var(--spacing-5);            /* 20px */
  }

  .about-timeline__chapter[data-track='ai'] .about-timeline__copy {
    padding-left: 3.5rem;                       /* 56px */
  }

  .about-timeline__title {
    font-size:   var(--font-size-xl);           /* 20px */
    line-height: var(--line-height-xl);         /* 28px */
  }

  /* One step down, leading unchanged — the redesign's mobile body rule. */
  .about-timeline__body {
    font-size:   var(--font-size-lg);           /* 18px */
    line-height: var(--line-height-lg);         /* 28px */
  }
}

/* ============================================================
   Button — Component Styles
   Scheme-aware: inherits data-scheme from a parent element.
   All color tokens flip automatically in dark context.
   ============================================================ */

.btn {
  /* Layout */
  align-items:      center;
  border:           1px solid transparent;
  box-sizing:       border-box;
  cursor:           pointer;
  display:          inline-flex;
  flex-shrink:      0;
  justify-content:  center;
  overflow:         hidden;
  text-decoration:  none;
  user-select:      none;
  white-space:      nowrap;
  background-clip:  padding-box;

  /* Typography */
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-medium);

  /* Transition */
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease;
}


/* ============================================================
   Sizes
   Heights: xs=26px  sm=32px  md=36px  lg=40px
   All use font-size-sm (14px) except xs which uses font-size-xs (12px).
   ============================================================ */

.btn[data-size="xs"] {
  font-size:   var(--font-size-xs);      /* 12px */
  line-height: var(--line-height-xs);    /* 16px */
  gap:         0.25rem;                  /* 4px  */
  padding:     0.3125rem 0.75rem;        /* 5px 12px → height 26px */
  --btn-gap:   0.25rem;
}

.btn[data-size="sm"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.375rem;                 /* 6px  */
  padding:     0.375rem 1rem;            /* 6px 16px → height 32px */
  --btn-gap:   0.375rem;
}

.btn[data-size="md"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.375rem;                 /* 6px  */
  padding:     0.5rem 1rem;              /* 8px 16px → height 36px */
  --btn-gap:   0.375rem;
}

.btn[data-size="lg"] {
  font-size:   var(--font-size-sm);      /* 14px */
  line-height: var(--line-height-sm);    /* 20px */
  gap:         0.5rem;                   /* 8px  */
  padding:     0.625rem 1.5rem;          /* 10px 24px → height 40px */
  --btn-gap:   0.5rem;
}

.btn[data-icon-only="true"] {
  padding: 0;
}

.btn[data-size="xs"][data-icon-only="true"] {
  width:  1.625rem; /* 26px */
  height: 1.625rem;
}

.btn[data-size="sm"][data-icon-only="true"] {
  width:  2rem; /* 32px */
  height: 2rem;
}

.btn[data-size="md"][data-icon-only="true"] {
  width:  2.25rem; /* 36px */
  height: 2.25rem;
}

.btn[data-size="lg"][data-icon-only="true"] {
  width:  2.5rem; /* 40px */
  height: 2.5rem;
}


/* ============================================================
   Shapes
   ============================================================ */

.btn[data-shape="rounded"] { border-radius: var(--radius-sm);   } /* 8px  */
.btn[data-shape="round"]   { border-radius: var(--radius-full); } /* pill */


/* ============================================================
   Variants
   ============================================================ */

.btn[data-variant="primary"][data-tone="default"] {
  background-color: var(--primary);
  border-color:     var(--primary);
  color:            var(--primary-foreground);
}

.btn[data-variant="secondary"][data-tone="default"] {
  background-color: transparent;
  border-color:     var(--primary);
  color:            var(--primary);
}

.btn[data-variant="primary"][data-tone="accent"] {
  background-color: var(--accent);
  border-color:     var(--accent);
  color:            var(--foreground);
}

.btn[data-variant="secondary"][data-tone="accent"] {
  background-color: transparent;
  border-color:     var(--accent);
  color:            var(--accent);
}


.btn[data-variant="info"] {
  background-color: var(--info);
  border-color:     var(--info);
  color:            var(--info-foreground);
}

.btn[data-variant="success"] {
  background-color: var(--success);
  border-color:     var(--success);
  color:            var(--success-foreground);
}

.btn[data-variant="warning"] {
  background-color: var(--warning);
  border-color:     var(--warning);
  color:            var(--warning-foreground);
}

.btn[data-variant="destructive"] {
  background-color: var(--destructive);
  border-color:     var(--destructive);
  color:            var(--destructive-foreground);
}


/* ============================================================
   States
   ============================================================ */

/* Primary hover — 20% dark overlay on background, full opacity */
.btn[data-variant="primary"][data-tone="default"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--primary) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--primary) 80%, #282825 20%);
  opacity:          1;
}

.btn[data-variant="primary"][data-tone="accent"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--accent) 80%, transparent);
  border-color:     color-mix(in srgb, var(--accent) 80%, transparent);
  opacity:          1;
}

/* Secondary hover — darker primary border + text, no fill */
.btn[data-variant="secondary"][data-tone="default"]:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: color-mix(in srgb, var(--primary) 80%, #282825 20%);
  color:        color-mix(in srgb, var(--primary) 80%, #282825 20%);
  opacity:      1;
}

.btn[data-variant="secondary"][data-tone="accent"]:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: color-mix(in srgb, var(--accent) 80%, transparent);
  color:        color-mix(in srgb, var(--accent) 80%, transparent);
  opacity:      1;
}

.btn[data-variant="info"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--info) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--info) 80%, #282825 20%);
  color:            var(--info-foreground);
  opacity:          1;
}

.btn[data-variant="success"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--success) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--success) 80%, #282825 20%);
  color:            var(--success-foreground);
  opacity:          1;
}

.btn[data-variant="warning"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--warning) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--warning) 80%, #282825 20%);
  color:            var(--warning-foreground);
  opacity:          1;
}

.btn[data-variant="destructive"]:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: color-mix(in srgb, var(--destructive) 80%, #282825 20%);
  border-color:     color-mix(in srgb, var(--destructive) 80%, #282825 20%);
  color:            var(--destructive-foreground);
  opacity:          1;
}

/* Active / pressed */
.btn:active:not(:disabled):not([aria-disabled="true"]) {
  opacity: 0.76;
}

/* Focus */
.btn:focus-visible {
  outline:        2px solid var(--ring);
  outline-offset: 2px;
}

/* Disabled */
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor:         not-allowed;
  opacity:        0.4;
  pointer-events: none;
}


/* ============================================================
   Icon slot
   ============================================================ */

.btn__icon {
  align-items:     center;
  display:         inline-flex;
  flex-shrink:     0;
  justify-content: center;
}

.btn[data-size="xs"] .btn__icon:not(.btn__icon--hover-only) { height: 0.75rem; width: 0.75rem; } /* 12px */
.btn[data-size="sm"] .btn__icon:not(.btn__icon--hover-only),
.btn[data-size="md"] .btn__icon:not(.btn__icon--hover-only),
.btn[data-size="lg"] .btn__icon:not(.btn__icon--hover-only) { height: 1rem;    width: 1rem;    } /* 16px */

.btn__icon svg {
  display: block;
  height:  100%;
  width:   100%;
}


/* ============================================================
   Hover-only icon — hidden by default, slides/fades in on :hover.
   Negative margin-right cancels the flex gap when collapsed so
   the label stays flush with the padding edge.
   ============================================================ */

/* Must come after the .btn[data-size] .btn__icon rules to win specificity tie */
.btn .btn__icon--hover-only {
  min-width:    0;        /* override flex min-width: auto so item can truly collapse */
  width:        0;
  overflow:     hidden;
  opacity:      0;
  margin-right: calc(-1 * var(--btn-gap, 0.5rem));
  transition:   width 0.2s ease, opacity 0.15s ease, margin-right 0.2s ease;
}

.btn:hover:not(:disabled):not([aria-disabled="true"]) .btn__icon--hover-only {
  width:        1rem; /* sm / md / lg */
  height:       1rem;
  opacity:      1;
  margin-right: 0;
}

.btn[data-size="xs"]:hover:not(:disabled):not([aria-disabled="true"]) .btn__icon--hover-only {
  width:  0.75rem;
  height: 0.75rem;
}


/* ============================================================
   Badge slot — optional count pill inside the button
   ============================================================ */

.btn__badge {
  align-items:      center;
  background-color: var(--primary);
  border-radius:    var(--radius-full);
  color:            var(--primary-foreground);
  display:          inline-flex;
  font-size:        var(--font-size-xs);   /* 12px */
  font-weight:      var(--font-weight-medium);
  justify-content:  center;
  line-height:      var(--line-height-xs); /* 16px */
  min-width:        1.25rem;               /* 20px */
  padding:          0.125rem 0.375rem;     /* 2px 6px */
}