/* ============================================================
   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;
  }
}


/* ============================================================
   Data Report LP — page-wide design language.

   Figma 6JdV8D0ZGECx2whzGAnTrs, frame "Redesign mockup" (6797:2035).

   This page introduces three things the rest of the site does not have, and
   all three are used by SIX sections — hence one page-level stylesheet rather
   than six copies. Every `data-report/*` section imports this file.

   1. A DISPLAY SERIF (`--dr-font-display`) for headlines, stat figures and
      pull quotes. See the font note below — it is not yet hosted.
   2. A YELLOW MARKER HIGHLIGHT (`.dr-mark`) drawn behind phrases inside a
      headline.
   3. A WHITE PAGE GROUND. The rest of the site is cream ground (#F5F0E7)
      with white cards; this LP inverts that — white ground with cream
      (#FAF6F0 = `--secondary`) panels and note cards. Do not "fix" a
      data-report section to `var(--background)`; that is the inversion, not
      a mistake.
   ============================================================ */


/* ---- 1. Display serif ------------------------------------- */

/* Figma specifies "Rowan" (Light 300 + Light Italic) for every headline on
   this page, and the licensed faces are now hosted: the `@font-face` blocks
   live in `src/webfont/fonts.css` alongside II Increments Sans, served as
   .woff2 from `src/webfont/Rowan/`.

   That file is reached from `src/globals.ts`, which `webflow.json` declares
   as the library's `globals` entry — so the face loads in the Webflow
   components, the Vite app (`src/main.tsx`) and Storybook
   (`.storybook/preview.ts`) alike. There is nothing per-component to wire.

   The serif fallbacks below are kept as a genuine fallback (font blocked,
   404, `font-display: swap` before load) — not as a stand-in. */
:host {
  --dr-font-display:
    'Rowan',
    ui-serif,
    Georgia,
    'Iowan Old Style',
    'Times New Roman',
    serif;

  /* 48px / 1.25 — Figma's headline size. The repo scale stops at
     `--font-size-3xl` (30px), so this is page-local rather than a fake
     `--font-size-5xl`. */
  --dr-font-size-display:   3rem;
  --dr-line-height-display: 1.25;

  /* The marker wash: a left-to-right fade, 0.7 → 0.49 alpha, on #E3E96A.
     Figma draws it as an absolutely-positioned rounded rect behind the text;
     here it is a background on the text itself so it reflows. */
  --dr-mark-from: rgba(227, 233, 106, 0.7);
  --dr-mark-to:   rgba(227, 233, 106, 0.49);
}


/* ---- 2. Marker highlight ---------------------------------- */

/* Usage: <mark className="dr-mark">where firms win or lose clients.</mark>

   `box-decoration-break: clone` is what makes a multi-line highlight render
   as one wash per line instead of a single box with the middle lines
   unpainted — without it a phrase that wraps loses its highlight on every
   line but the first. The vertical padding pads the 60px text line box out
   to Figma's 64px rect. */
.dr-mark {
  background:             linear-gradient(90deg, var(--dr-mark-from), var(--dr-mark-to));
  color:                  inherit;
  border-radius:          2px;
  padding:                0.125rem 0;   /* 2px — 60px line box → 64px rect */
  -webkit-box-decoration-break: clone;
  box-decoration-break:   clone;
}


/* ---- 3. Page ground --------------------------------------- */

/* The white ground every data-report section sits on. Named so a section
   reads `background: var(--dr-ground)` and the intent is obvious. */
:host {
  --dr-ground: var(--card);          /* #FFFFFF */
  --dr-panel:  var(--secondary);     /* #FAF6F0 — cream panels + note cards */
}


/* ---- Section rhythm --------------------------------------- */

/* `.hp-section` holds its desktop 128px until 991px, so between 992 and
   1199 two white sections stood 256px apart (and 192 at tablet) — far looser
   than this page's hero and CTA, which already step down. Figma has no frame
   between desktop and 402, so the page steps its white sections down in line
   with those two:

     ≥1200  128   Figma desktop (`.hp-section` as-is)
     ≤1199   96   same step as DataReportCtaSection's `__cta`
     ≤991    80   the hero's and CTA's tablet padding
     ≤767    64   `.hp-section`'s own mobile value, restated because the
                  rules above would otherwise still apply

   Two classes so it beats `.hp-section`'s media rules regardless of which
   stylesheet lands first. A section that needs its own value at a width
   (findings at ≤767) overrides with the same two-class weight. */
@media (max-width: 1199px) {
  .hp-section.dr-section { padding-block: 6rem; }   /* 96px */
}

@media (max-width: 991px) {
  .hp-section.dr-section { padding-block: 5rem; }   /* 80px */
}

@media (max-width: 767px) {
  .hp-section.dr-section { padding-block: 4rem; }   /* 64px */
}


/* ---- Shared display heading ------------------------------- */

/* Every headline on this page is the same face/size/weight; only the copy
   and the highlighted run change. */
.dr-display {
  margin:      0;
  font-family: var(--dr-font-display);
  font-size:   var(--dr-font-size-display);
  line-height: var(--dr-line-height-display);
  font-weight: var(--font-weight-light);   /* 300 — Rowan Light */
  color:       var(--foreground);
}

.dr-display em,
.dr-display .dr-italic {
  font-style: italic;
}

/* Tablet (≤991px) is still the repo's usual proportional reduction — there is
   no tablet frame. Mobile (≤767px) is MEASURED: see
   DataReportPage.mobile.figma.md. Figma's 402px hero headline text node is
   322 x 270 over six lines, i.e. 45px leading, and `.dr-display`'s 1.25 ratio
   puts the face at 36px. The earlier 32px was a guess made before the mobile
   frame existed. */
@media (max-width: 991px) {
  :host { --dr-font-size-display: 2.5rem; }   /* 40px */
}

@media (max-width: 767px) {
  :host { --dr-font-size-display: 2.25rem; }  /* 36px — Figma 6850:13075 */
}


/* ---- Display heading, section size ------------------------ */

/* The section headings (methodology, inside-the-report) are 36px/40px, not
   the hero's 48px. Same face and weight — this is `.hp-heading`'s size in the
   display serif, so it lines up with every other section heading on the site
   while carrying this page's typeface. */
.dr-display--sm {
  font-size:   2.25rem;   /* 36px */
  line-height: 2.5rem;    /* 40px */
}

/* Confirmed against the mobile frame: Figma's 402px section headings
   (methodology 6850:13649, inside 6853:13911) are 338 x 72 over two lines =
   36px leading, and "The full picture" (6853:15100) is a single 36px line. */
@media (max-width: 767px) {
  .dr-display--sm {
    font-size:   1.875rem;  /* 30px — matches .hp-heading's mobile step-down */
    line-height: 2.25rem;   /* 36px */
  }
}


/* ---- Mobile body copy: 18px / 28px ------------------------

   Every body text node on the 402px frame is `--font-size-lg` over
   `--line-height-lg` — ONE step down from the desktop 20px/28px, with the
   leading unchanged. Before the mobile frame existed each section dropped two
   steps to 16px/24px as a guess.

   Both halves of that are easy to get wrong, so here is how it was measured
   rather than inferred — the node heights alone only give the LEADING:

   - Line count. Figma's methodology caveat (6850:13723) is 338 x 112 = four
     28px lines. Rendered in the real II Increments Sans at 338px, that copy
     takes four lines at 16/17/18px and five at 19/20px.
   - Line width. Figma's third line, "that critical first step. Full
     definitions,", measures 282px of ink in the frame; the same string in the
     real face is 269px at 17px, 285px at 18px, 316px at 20px.

   Caveat for anyone re-measuring: the cream panels' background (249,246,239)
   reads as "not white", so a naive non-white ink test inside `.data-report-quote`
   or `.data-report-cta` returns the panel, not the glyphs. Threshold on real
   glyph darkness instead. */


/* ---- Badge pill, inverted --------------------------------- */

/* `.hp-badge` fills with `var(--card)` (white), which works everywhere else
   on the site because sections sit on the cream `--background`. On THIS page
   the ground IS white, so the stock pill is invisible — Figma fills it with
   the cream `#F5F0E7` instead (sampled from the render to confirm; note that
   is `--background`, not the slightly different `--secondary` #FAF6F0 used
   for the panels and note cards).

   Scoped to `.dr-section` rather than overriding `.hp-badge` globally, so
   every other page's badge is untouched. Applies to both the sticky rail
   badge and the inline one. */
.dr-section .hp-badge {
  background: var(--background);
}

/* ============================================================
   DataReportForm — Figma 6JdV8D0ZGECx2whzGAnTrs, node 6797:2161.

   The white download card. Note the INVERSION that runs through this whole
   page (see ../data-report.css): the card is white and its inputs are cream,
   which is the opposite of the site's usual cream-section/white-input pairing.
   ============================================================ */

.data-report-form {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-6);    /* 24px */
  width:          100%;
  max-width:      496px;               /* Figma Form node */
  padding:        var(--spacing-6) 0;  /* py-24, px handled per-row */
  background:     var(--card);
  border-radius:  12px;                /* Figma rounded-box; no 12px radius token */
  overflow:       hidden;
  box-sizing:     border-box;
  font-family:    var(--font-family-default);
}

/* 6797:2162 */
.data-report-form__content {
  padding: 0 var(--spacing-6);     /* 24px */
}

/* 6797:2163 */
.data-report-form__fields {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-6);    /* 24px */
}

.data-report-form__field {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-2);    /* 8px */
}

/* First + last name, side by side — same as `LeadForm`'s `.lead-form__row`
   (12px gap, equal halves, stacked at ≤479px). Not in Figma, which has one
   full-name field. */
.data-report-form__row {
  display: flex;
  gap:     var(--spacing-3);           /* 12px */
}

.data-report-form__row > .data-report-form__field {
  flex:      1;
  min-width: 0;                        /* let the inputs shrink below their intrinsic width */
}

.data-report-form__label {
  font-size:   var(--font-size-sm);    /* 14px */
  line-height: var(--line-height-sm);  /* 20px */
  font-weight: var(--font-weight-medium);
  color:       var(--card-foreground);
}

/* Same marker as `LeadForm`'s `.lead-field__required`. Optional fields are
   simply unmarked. */
.data-report-form__required {
  color: var(--primary);
}


/* ---- Inputs ----------------------------------------------- */

/* Figma: bg #FAF6F0, 0.5px border #E5DFD5 (= --muted, NOT --border #D6CFC2 —
   the design picks the lighter of the two), radius 8, height 36. */
.data-report-form__input {
  width:         100%;
  height:        36px;
  padding:       var(--spacing-1) var(--spacing-3);   /* 4px 12px */
  background:    var(--dr-panel);
  border:        0.5px solid var(--muted);
  border-radius: var(--radius-sm);                    /* 8px */
  font-family:   inherit;
  font-size:     var(--font-size-sm);                 /* 14px */
  line-height:   var(--line-height-sm);               /* 20px */
  color:         var(--card-foreground);
  box-sizing:    border-box;
  appearance:    none;
}

.data-report-form__input::placeholder {
  color: var(--muted-foreground);
}

.data-report-form__input:focus-visible {
  outline:        2px solid var(--ring);
  outline-offset: 1px;
}


/* ---- Checkboxes (6797:2196) ------------------------------- */

.data-report-form__checks {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-3);    /* 12px */
  max-width:      400px;               /* Figma Check box node width */
}

.data-report-form__check {
  display:     flex;
  align-items: flex-start;
  gap:         var(--spacing-3);       /* 12px */
  cursor:      pointer;
}

/* The real input stays in the DOM for semantics, keyboard and form state; the
   painted box is the sibling span. Not `display: none` — that would take it
   out of the tab order. */
.data-report-form__check > input {
  position: absolute;
  opacity:  0;
  width:    16px;
  height:   16px;
  margin:   0;
}

.data-report-form__box {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  width:           16px;
  height:          16px;
  background:      var(--card);
  border:          1px solid var(--input);
  border-radius:   4px;                /* no 4px radius token — scale starts at 8px */
  box-shadow:      0 1px 3px rgba(26, 26, 24, 0.03);   /* Figma shadow/xs */
  color:           var(--primary-foreground);
  transition:      background-color 120ms ease, border-color 120ms ease;
}

/* The checkmark only shows when checked. */
.data-report-form__box > svg {
  opacity: 0;
}

/* Figma paints the checked state #E33708. That hex is not in the repo's
   orange ramp (…-400 #F0612D, -500 #C64110 = --primary) and introducing a
   one-off brand hex is the owner's call, not a build decision — so this uses
   --primary, matching every other CTA on the site. Flagged in the spec. */
.data-report-form__check > input:checked + .data-report-form__box {
  background:   var(--primary);
  border-color: var(--primary);
}

.data-report-form__check > input:checked + .data-report-form__box > svg {
  opacity: 1;
}

.data-report-form__check > input:focus-visible + .data-report-form__box {
  outline:        2px solid var(--ring);
  outline-offset: 2px;
}

/* 16px leading, not the 20px the type style names. Figma's Check Box rows are
   16px tall — the height of the box itself — so a single-line label keeps
   the row at the box's height. Relaxed again at ≤430px, where the demo
   label starts to wrap. */
.data-report-form__check-label {
  font-size:   var(--font-size-sm);    /* 14px */
  line-height: var(--line-height-xs);  /* 16px — matches Figma's row height */
  font-weight: var(--font-weight-medium);
  color:       var(--foreground);
}


/* ---- Notice ----------------------------------------------- */

/* Mailchimp-audience notice, the last row of the fields stack. Not in Figma.
   Same type as `LeadForm`'s `.lead-form__legal` (LeadFormSection.css), the
   line that sits in the same place on that form — copied rather than shared,
   since importing that stylesheet would pull the whole lead form into this
   component's bundle. Keep the two in step. */
.data-report-form__notice {
  margin:      0;
  font-size:   var(--font-size-xs);      /* 12px */
  line-height: 1.125rem;                 /* 18px */
  color:       var(--muted-foreground);
  text-align:  center;
}


/* ---- Actions (6797:2199) ---------------------------------- */

.data-report-form__actions {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  gap:             var(--spacing-4);     /* 16px */
  padding:         0 var(--spacing-6);   /* 24px */
}

/* Submit error. Figma has no state for it — it only appears after a round
   trip to Webflow, which the static frame cannot show. Sized as body copy and
   placed in the action row so the card's height only changes by the row it
   already reserves, not by a new block above the button.

   `margin-right: auto` keeps the message on the left of the row while the
   button stays pinned right, without a second flex wrapper. */
.data-report-form__error {
  margin:      0 auto 0 0;
  font-size:   var(--font-size-sm);
  line-height: var(--line-height-sm);
}

/* `--destructive` is referenced across the repo (LeadFormSection.css) but
   never DEFINED in tokens.css — only `--opacity-destructive-10` is, at
   #EF44441A. The fallback here is that token's base colour, so this message
   renders red today and picks up the real token for free if one is ever
   added. */
.data-report-form__error {
  color: var(--destructive, #EF4444);
}


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

/* Both sections that host this card (Quote, CTA) stack at 991, and once
   stacked the card spans the column instead of stopping at the desktop
   496px — which left it floating at half width beside nothing. */
@media (max-width: 991px) {
  .data-report-form {
    max-width: none;
  }
}

/* Mobile is MEASURED against Figma CRrdcRif8N6jgEWK28BDb5 nodes 6853:14877 /
   6853:14964 (both form instances are identical at 402px) — see
   ../DataReportPage.mobile.figma.md. */
@media (max-width: 767px) {
  /* Figma: Form 346 wide, Form content y=32, Container x=32 w=282, Btn
     container y=484 with the card ending at 556 — 32px on every side, and
     32px between the last field and the button. */
  .data-report-form {
    gap:     var(--spacing-8);       /* 32px — fields → button */
    padding: var(--spacing-8) 0;     /* 32px */
  }

  .data-report-form__content,
  .data-report-form__actions {
    padding: 0 var(--spacing-8);     /* 32px */
  }

  /* Figma stretches the submit to the card's width (x=24, w=298 in a 346 card)
     rather than keeping the desktop right-aligned pill — at 402px a 199px
     button floating right reads as an afterthought. */
  .data-report-form__actions {
    justify-content: stretch;
  }

  .data-report-form__actions > * {
    flex:       1 1 auto;
    width:      100%;
    max-width:  none;
    text-align: center;
  }
}

/* Where the demo label starts to wrap: the card's content column is
   `viewport - 24 (panel gutter) - 64 (card padding)`, and “Are you interested
   in a demo of Smith.ai?” needs roughly 16 + 12 + 280px, so it wraps a little
   under 400px — and 16px leading on a two-line label is cramped. */
@media (max-width: 430px) {
  .data-report-form__check-label {
    line-height: var(--line-height-sm);   /* 20px */
  }
}

/* Same breakpoint as `LeadForm`'s name row. Stacked, the two names take the
   fields' own 24px rhythm rather than the row's 12px. */
@media (max-width: 479px) {
  .data-report-form__row {
    flex-direction: column;
    gap:            var(--spacing-6);     /* 24px */
  }
}

/* ============================================================
   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 */
}