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


/* ============================================================
   ClioconReportSection — Figma CIs8dXkXRGQGuyagIgryfN, node 7399:11963.
   Spec: ClioconReportSection.figma.md.
   ============================================================ */

/* The inset panel: Figma draws the 16px gutter as a 16px WHITE BORDER on the
   node (`border-16 border-card`) — kept as a border, as in
   DataReportQuoteSection: it takes part in the radius and cannot collapse.

   Padding is INSIDE the border, so Figma's offsets lose 16: the heading box
   is 64 from the outer edge (48 + 16) and the content ends 128 above it
   (112 + 16). */
.cliocon-report {
  background:    var(--panel-cream);           /* cream #FAF6F0 */
  border:        16px solid var(--background-white);
  border-radius: 48px;                      /* Figma rounded-6xl; no 48px radius token */
  padding:       3rem 0 7rem;               /* 48px / 112px */
  box-sizing:    border-box;
  font-family:   var(--font-family-default);
  color:         var(--foreground);
}

/* Balanced: unbalanced, the heading leaves "client." alone on its last line
   at tablet widths (owner, 2026-10-20). Per heading, not a blanket rule. */
.cliocon-report .section-header h2 {
  text-wrap: balance;
}

/* The section-header convention: THIS stack owns header → content (64). */
.cliocon-report__content {
  display:        flex;
  flex-direction: column;
  gap:            4rem;                     /* 64px, flat at every width */
}

/* 7399:11973 — cards → stats is 56, not 64. */
.cliocon-report__body {
  display:        flex;
  flex-direction: column;
  gap:            3.5rem;                   /* 56px */
}


/* ---- Chart cards (7399:11974) ------------------------------ */

.cliocon-report__cards {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:                   var(--spacing-4);  /* 16px */
  align-items:           stretch;           /* equal heights, as Figma's self-stretch */
}

.cliocon-report__card {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-5);         /* 20px */
  padding:        var(--spacing-8) var(--spacing-8) var(--spacing-9);   /* 32 / 32 / 36 */
  border-radius:  var(--radius-lg);         /* 24px */
  min-width:      0;
}

.cliocon-report__card[data-tone='white'] {
  background: var(--card);
}

/* Figma stacks info @ 30% over white @ 60% over the panel — reproduced as
   the same two layers, so it composes to the sampled (204,231,240). */
.cliocon-report__card[data-tone='info'] {
  background:
    linear-gradient(var(--opacity-info-30), var(--opacity-info-30)),
    color-mix(in srgb, var(--card) 60%, transparent);
}

/* “Soft badge” layer, but no fill — a 24px row of 12/16 text. */
.cliocon-report__chip {
  margin:      0;
  padding:     var(--spacing-1) 0;          /* 4px */
  font-size:   var(--font-size-xs);         /* 12px */
  line-height: var(--line-height-xs);       /* 16px */
  color:       var(--muted-foreground);
}

.cliocon-report__card[data-tone='info'] .cliocon-report__chip {
  color: var(--opacity-neutral-50);         /* Figma rgba(40,40,37,.5) */
}

/* The display serif's Semibold (7399:11978), not the sans bold of the first
   design: Rowan 24/28. */
.cliocon-report__card-title {
  margin:      0;
  font-family: var(--font-family-serif);
  font-size:   var(--font-size-2xl);        /* 24px */
  line-height: var(--line-height-xl);       /* 28px */
  font-weight: 600;                         /* Rowan Semibold — no token */
}


/* ---- Donuts (7399:11979) ----------------------------------- */

/* Two EQUAL columns, each donut centred in its own (owner, 2026-10-20 —
   `space-between` pushed them to the card's edges once the cards stack).
   At 1512 the card's 440 content makes them Figma's 200 | 40 | 200. */
.cliocon-report__donuts {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:                   2.5rem;            /* 40px — Figma 200 + 40 + 200; no token */
  padding-top:           var(--spacing-3);  /* 12px */
}

.cliocon-report__donut {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--spacing-3);         /* 12px */
  min-width:      0;
  margin:         0;
}

/* The ring is an SVG (ClioconDonutRing.tsx — Figma's own construction: a
   cream track, an angular-gradient arc, grain over the arc). 160 here, 128
   on mobile; the 160 viewBox scales with it. */
.cliocon-report__ring {
  display:      block;
  width:        100%;
  max-width:    160px;
  height:       auto;
  aspect-ratio: 1;
}

.cliocon-report__ring-track {
  fill: var(--background);                  /* #F5F0E7 — Figma's track */
}

/* Figma lays its noise PNG over the arc at 50%, overlay. Ours is the site's
   `the-noise.svg` (a stronger texture), so the same blend lands at 25% —
   measured against Figma's render along both arcs: mean error 0.5/255,
   grain sd 1.8 vs Figma's 2.0 (50% read +4.3 lighter, sd 2.8). */
.cliocon-report__ring-grain {
  opacity:        0.25;
  mix-blend-mode: overlay;
}

.cliocon-report__donut-copy {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--spacing-2);         /* 8px */
  white-space:    nowrap;
}

/* II Increments Sans Light 48 — the redesign's stat figures are sans. */
.cliocon-report__donut-figure {
  font-size:   3rem;                        /* 48px; the scale stops at 30 */
  line-height: normal;                      /* Figma leading-normal */
  font-weight: var(--font-weight-light);
}

.cliocon-report__donut[data-tone='brand'] .cliocon-report__donut-figure { color: var(--info); }
.cliocon-report__donut[data-tone='neutral'] .cliocon-report__donut-figure { color: var(--foreground); }

.cliocon-report__unit {
  font-weight: var(--font-weight-medium);   /* Figma: “%” in Medium */
}

.cliocon-report__donut-label {
  font-size:   var(--font-size-sm);         /* 14px */
  line-height: var(--line-height-sm);       /* 20px */
  color:       var(--muted-foreground);
}


/* ---- Funnel (7399:11998) ----------------------------------- */

.cliocon-report__funnel {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-6);         /* 24px */
  margin:         0;
  padding:        var(--spacing-3) 0 0;     /* 12px */
  list-style:     none;
}

/* Figma's rows are the shared Soft Badge at 1.23x (14.77px type, 14.77px
   pad, 7.385px gap, 40px tall) — kept at that size rather than the stock
   badge's. Widths 440 · 376 · 312 · 248 step down 64 each; as percentages
   of the 440 track so they hold as the card narrows. */
.cliocon-report__step {
  display:        flex;
  align-items:    center;
  gap:            7px;
  box-sizing:     border-box;
  height:         40px;
  min-width:      max-content;
  padding:        0 15px;
  border-radius:  var(--radius-full);
  background:     var(--card);
  font-size:      0.923rem;                 /* 14.77px — see above */
  line-height:    1.25rem;
  font-weight:    var(--font-weight-medium);
  color:          var(--color-brand-blue-500);   /* Figma cyan-500 #33A3CC */
}

.cliocon-report__step svg {
  flex-shrink: 0;
}

.cliocon-report__step[data-step='0'] { width: 100%; }
.cliocon-report__step[data-step='1'] { width: 85.4545%; }   /* 376 / 440 */
.cliocon-report__step[data-step='2'] { width: 70.9091%; }   /* 312 / 440 */
.cliocon-report__step[data-step='3'] { width: 56.3636%; }   /* 248 / 440 */


/* ---- Stats + sources (7399:12003) -------------------------- */

.cliocon-report__numbers {
  display:        flex;
  flex-direction: column;
  gap:            4rem;                     /* 64px */
}

/* Same recipe as DataReportMethodologySection: sans Light 96, a 1.5px
   blue-700 rule, a 16/24 caption, all in blue-700. */
.cliocon-report__stats {
  display: flex;
  gap:     4rem;                            /* 64px */
}

.cliocon-report__stat {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-4);         /* 16px */
  flex:           1 1 0;
  min-width:      0;
  color:          var(--color-brand-blue-700);
}

.cliocon-report__stat-figure {
  margin:      0;
  font-size:   6rem;                        /* 96px */
  line-height: normal;
  font-weight: var(--font-weight-light);
  white-space: nowrap;
}

/* The rule is Figma's separate 1.5px line node; as a border it keeps the
   16px gap on both sides with one flex gap. Figma's line is 0 tall and drawn
   in the 1.5px ABOVE its node, so it takes no room: the -1.5 margin puts the
   border there too (otherwise each stat stacked 1.5px low on mobile). */
.cliocon-report__stat-caption {
  margin:      -1.5px 0 0;
  padding-top: var(--spacing-4);            /* 16px */
  border-top:  1.5px solid var(--color-brand-blue-700);
  font-size:   var(--font-size-base);       /* 16px */
  line-height: var(--line-height-base);     /* 24px */
}

/* Figma's first caption node (7399:12011) is 306 wide — 7px past its 299
   column, into the 64 gap — which is what keeps “desk*” on the third line.
   That text gets the reach; the rule above it stays on the column. Only the
   first: the others are column-wide, and the third would rewrap. */
@media (min-width: 992px) {
  .cliocon-report__stat:first-child .cliocon-report__stat-caption > span {
    display:      block;
    margin-right: -7px;
  }
}

/* 7399:12020 — sources left, button right, bottom-aligned. */
.cliocon-report__footer {
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
  gap:             var(--spacing-8);
}

.cliocon-report__sources {
  max-width:   720px;                       /* Figma text-node width */
  font-size:   var(--font-size-xs);         /* 12px */
  line-height: var(--line-height-xs);       /* 16px */
  color:       var(--muted-foreground);
}

.cliocon-report__sources p {
  margin: 0;
}

.cliocon-report__footer .btn {
  flex-shrink: 0;
}


/* ---- Responsive -------------------------------------------
   Mobile is MEASURED against Figma 7399:13580 — see ../ClioconPage.mobile.figma.md.
   Tablet has no frame. */

@media (max-width: 1199px) {
  .cliocon-report {
    padding-bottom: 5rem;                   /* 80 + 16 = 96, the page's ≤1199 rhythm */
  }
}

@media (max-width: 991px) {
  .cliocon-report {
    border-radius:  32px;
    padding-bottom: 4rem;                   /* 64 + 16 = 80 */
  }

  /* Two cards side by side would squeeze the donuts below their figures. */
  .cliocon-report__cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .cliocon-report__stats {
    gap: 2rem;
  }

  .cliocon-report__stat-figure {
    font-size: 4.5rem;                      /* 72px, as Data Report's methodology */
  }
}

@media (max-width: 767px) {
  /* Figma keeps the 16px white gutter on every side at 402 (the panel spans
     x 16–385, y 16 → 16 above the next section) and rounds it 32 — NOT Data
     Report's 12px / 24px. Inside it: 32 above the badge, 48 below the button. */
  .cliocon-report {
    padding: 2rem 0 3rem;                   /* 32 / 48 inside the 16px border */
  }

  /* Text AND cards sit 32px from the viewport here (16 border + 16) — Figma
     puts the cards on the text inset inside this panel, so no bleed. */
  .cliocon-report .container {
    padding-inline: var(--spacing-4);       /* 16px */
  }

  /* Header: the design system's mobile gaps (16 / 24); header → cards is
     Figma's 32, not the convention's flat 64 (owner, 2026-10-20). Inside
     the body the cards, stats and sources stay 32 apart too. */
  .cliocon-report__content,
  .cliocon-report__body,
  .cliocon-report__numbers {
    gap: var(--spacing-8);                  /* 32px each */
  }

  /* Cards 338 wide, 24 padding, 16 between chip / title / chart. */
  .cliocon-report__card {
    gap:     var(--spacing-4);              /* 16px */
    padding: var(--spacing-6);              /* 24px */
  }

  /* Rowan 20/28 here (7399:13596). */
  .cliocon-report__card-title {
    font-size: var(--font-size-xl);         /* 20px */
  }

  /* Donuts: two 137px columns 16 apart, 128px rings with a 16px band (the
     desktop ring at 0.8). Figures stay sans Light, at 36 (40px line). */
  .cliocon-report__donuts {
    gap: var(--spacing-4);                  /* 16px — Figma 137 | 16 | 137 */
  }

  .cliocon-report__ring {
    max-width: 128px;
  }

  .cliocon-report__donut-figure {
    font-size: 2.25rem;                     /* 36px */
  }

  /* Funnel: 30px pills 20 apart — the same Soft Badge at ~1.15x instead of
     desktop's 1.23x (13.75px type, 14 pad, 7 gap, 17px glyph). Figma's widths
     at 290 are 290 · 274 · 226 · 178 — its own steps, not desktop's. */
  .cliocon-report__funnel {
    gap: 20px;                              /* no 20px token */
  }

  .cliocon-report__step {
    height:    30px;
    padding:   0 14px;
    font-size: 0.859rem;                    /* 13.75px */
  }

  .cliocon-report__step svg {
    width:  17px;
    height: 17px;
  }

  .cliocon-report__step[data-step='1'] { width: 94.4828%; }   /* 274 / 290 */
  .cliocon-report__step[data-step='2'] { width: 77.9310%; }   /* 226 / 290 */
  .cliocon-report__step[data-step='3'] { width: 61.3793%; }   /* 178 / 290 */

  /* Stats stack, 32 apart; 60px figures (66px line), 16 → rule → 16. */
  .cliocon-report__stats {
    flex-direction: column;
    gap:            var(--spacing-8);       /* 32px */
  }

  /* 60 on a 66px line (7399:13627) — `normal` renders 67, which pushed each
     stat 1px lower than the one before. */
  .cliocon-report__stat-figure {
    font-size:   3.75rem;                   /* 60px, as Data Report's methodology */
    line-height: 66px;                      /* Figma's leading — no token */
  }

  /* Sources (5 lines) above the button, 24 apart. */
  .cliocon-report__footer {
    flex-direction: column;
    align-items:    flex-start;
    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 */
}