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


/* ============================================================
   LegalHubCoverageSection — Figma Z4nd44TYu5d8ttn7Y73Djs, node 865:6743.
   Spec: LegalHubCoverageSection.figma.md.
   ============================================================ */

.legal-hub-coverage {
  /* Figma samples #FAF6F0 (beige-50) here, not the beige-100 `--background`;
     `--secondary` is the semantic token that carries it — the same one the
     plan cards use, which is why they read flush with the page behind the
     white container in Figma. */
  background: var(--secondary);
}

.legal-hub-coverage__content {
  display:        flex;
  flex-direction: column;
  gap:            4rem;   /* 64px — header → content, per the rail convention */
  align-items:    flex-start;
  width:          100%;
}

/* Figma stacks the venn card, plan row, features heading and feature grid at a
   uniform 16px (nodes 865:6753 / 6842 / 6920 / 6922 inside 865:6752). */
.legal-hub-coverage__stack {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-4);   /* 16px */
  width:          100%;
}

/* The section stack's 64px would swallow the CTA; Figma leaves ~48px. */
.legal-hub-coverage__cta {
  margin-top: calc(3rem - 4rem);   /* net 48px below the feature grid */
}


/* ============================================================
   Venn card (865:6753) — 1024×424, 12px inner padding
   ============================================================ */

/* Figma splits the 1000px inner box 568 | 24 | 408, not down the middle: the
   copy column's ink starts at x=851 in the 1512 frame, 84px right of an even
   split. */
.legal-hub-coverage__venn-card {
  display:               grid;
  grid-template-columns: minmax(0, 568fr) minmax(0, 408fr);
  gap:                   var(--spacing-6);
  align-items:           center;
  padding:               var(--spacing-3);   /* 12px */
  background:            var(--card);
  border-radius:         var(--radius-lg);   /* 24px */
  box-sizing:            border-box;
}

.legal-hub-coverage__venn-visual {
  display:         flex;
  align-items:     center;
  justify-content: center;
  /* 568×400 — the ratio that lands the card at Figma's 424px outer height. */
  aspect-ratio:    568 / 400;
  border-radius:   var(--radius-md);
  overflow:        hidden;
}

/* The homepage's venn export. Figma draws it 480 wide inside this column (node
   865:6755 at x=48 of the 1000px wrapper), so it is capped there and centred
   rather than blown up to the column's full 568 — the asset is 480x322 native
   and scaling it up is the one thing that would make it look pasted in. */
.legal-hub-coverage__venn-visual img {
  display:    block;
  width:      100%;
  max-width:  480px;
  height:     auto;
  margin:     0 auto;
  object-fit: contain;
}

/* The 32px block padding is Figma's own (the copy frame is 336 tall inside the
   400 wrapper, 32 above and below) and it is what guarantees the inset once the
   column is the taller side. Centring alone gave 47px at 1512 but **12px** at
   1024, where the descriptions wrap and the copy outgrows the illustration —
   the title then sat on the card's padding. Where centring already gives more,
   this changes nothing. */
.legal-hub-coverage__venn-copy {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-8);   /* 32px */
  padding:        var(--spacing-8) var(--spacing-6) var(--spacing-8) 0;
}

.legal-hub-coverage__venn-title {
  margin:      0;
  font-size:   var(--font-size-base);     /* 16px */
  line-height: var(--line-height-base);   /* 24px */
  font-weight: var(--font-weight-bold);
  color:       var(--foreground);
}

.legal-hub-coverage__staffing {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-8);   /* 32px */
  margin:         0;
  padding:        0;
  list-style:     none;
}

.legal-hub-coverage__staffing-item {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-3);   /* 12px */
}

.legal-hub-coverage__staffing-title {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-2);
  margin:      0;
  font-size:   var(--font-size-base);
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-bold);
  color:       var(--foreground);
}

/* Unlike the plan cards, the venn list sits on white, so Figma gives each glyph
   a 26px tinted chip: beige-100 for the two absolutes, the 40% info tint for
   hybrid. The chip is what makes this row 26px tall instead of 24px. */
.legal-hub-coverage__staffing-icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  flex:            0 0 26px;
  width:           26px;
  height:          26px;
  background:      var(--background);
  border-radius:   var(--radius-full);
  color:           var(--foreground);
}

.legal-hub-coverage__staffing-item[data-staffing="hybrid"] .legal-hub-coverage__staffing-icon {
  background: var(--opacity-info-40);
}

.legal-hub-coverage__staffing-body {
  margin:      0;
  font-size:   var(--font-size-base);
  line-height: var(--line-height-base);
  font-weight: var(--font-weight-regular);
  color:       var(--muted-foreground);
}


/* ============================================================
   Plan cards (865:6842) — a 10-column grid: 3 | 4 | 3
   ============================================================ */

.legal-hub-coverage__plans {
  display:               grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap:                   var(--spacing-4);   /* 16px */
  align-items:           stretch;
  padding:               var(--spacing-3);   /* 12px */
  background:            var(--card);
  border-radius:         var(--radius-lg);   /* 24px */
  box-sizing:            border-box;
}

/* Figma gives the featured middle card four of the ten columns. */
.legal-hub-coverage__plan[data-plan="ai-first"]    { grid-column: span 3; }
.legal-hub-coverage__plan[data-plan="hybrid"]      { grid-column: span 4; }
.legal-hub-coverage__plan[data-plan="human-first"] { grid-column: span 3; }

.legal-hub-coverage__plan {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-6);   /* 24px */
  padding:        var(--spacing-4) 0 var(--spacing-6);   /* 16px top, 24px bottom */
  background:     var(--secondary);
  border-radius:  var(--radius-md);   /* 16px */
  box-sizing:     border-box;
  /* Figma draws this hairline as an INSIDE stroke, which doesn't shrink the
     frame's content box. A real `border` would, and the 1px it costs is enough
     to push the AI-first description from Figma's 4 lines to 5 — so the rule is
     painted with an inset shadow instead. */
  box-shadow:     inset 0 0 0 0.5px var(--border);
}

/* Figma: white with a 20% #59B7D9 overlay — `--opacity-info-20` is exactly
   that colour, so the two layers reproduce it precisely (same treatment as the
   social-proof quote tile). */
.legal-hub-coverage__plan[data-featured] {
  background: linear-gradient(var(--opacity-info-20), var(--opacity-info-20)), var(--card);
}

.legal-hub-coverage__plan-head {
  display:        flex;
  align-items:    center;
  gap:            var(--spacing-3);   /* 12px */
  padding-inline: var(--spacing-4);   /* 16px */
}

.legal-hub-coverage__plan-icon {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  flex:            0 0 26px;
  width:           26px;
  height:          26px;
  background:      var(--card);
  border-radius:   var(--radius-full);
  color:           var(--foreground);
}

.legal-hub-coverage__plan-name {
  margin:      0;
  flex:        1 1 auto;
  font-size:   var(--font-size-base);     /* 16px */
  line-height: var(--line-height-base);   /* 24px */
  font-weight: var(--font-weight-bold);
  color:       var(--foreground);
}

.legal-hub-coverage__plan-tag {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  height:          26px;
  padding:         0 var(--spacing-3);
  background:      var(--opacity-info-40);
  border-radius:   var(--radius-full);
  font-size:       var(--font-size-sm);     /* 14px */
  line-height:     var(--line-height-sm);   /* 20px */
  font-weight:     var(--font-weight-medium);
  color:           var(--color-brand-blue-700);
  white-space:     nowrap;
}

/* `justify-content: space-between` + `flex: 1` is what puts every card's CTA on
   the same bottom row regardless of how long its description runs. */
.legal-hub-coverage__plan-body {
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
  align-items:     flex-start;
  gap:             var(--spacing-8);   /* 32px — Figma's copy → CTA distance */
  flex:            1 1 auto;
  padding-inline:  var(--spacing-5);   /* 20px */
}

.legal-hub-coverage__plan-copy {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-1);   /* 4px */
  width:          100%;
}

.legal-hub-coverage__plan-lead {
  margin:      0;
  font-size:   var(--font-size-sm);     /* 14px */
  line-height: var(--line-height-sm);   /* 20px */
  color:       var(--muted-foreground);
}

.legal-hub-coverage__plan-price {
  margin:      0;
  font-size:   2.25rem;   /* 36px */
  line-height: 2.5rem;    /* 40px */
  font-weight: var(--font-weight-regular);
  color:       var(--foreground);
}

.legal-hub-coverage__plan-desc {
  margin:      var(--spacing-6) 0 0;   /* 24px below the price, per Figma */
  font-size:   var(--font-size-sm);     /* 14px */
  line-height: var(--line-height-sm);   /* 20px */
  font-weight: var(--font-weight-regular);
  color:       var(--foreground);
}


/* ============================================================
   Feature grid (865:6920 + 865:6922)
   ============================================================ */

.legal-hub-coverage__features-title {
  margin:      0;
  padding:     var(--spacing-6) 0;   /* Figma: 24px above the text inside an 80px block */
  font-size:   var(--font-size-2xl);     /* 24px */
  line-height: var(--line-height-2xl);   /* 32px */
  font-weight: var(--font-weight-regular);
  color:       var(--foreground);
}

/* Figma: two 496px columns, 32px apart, rows 112px tall and 16px apart. */
.legal-hub-coverage__features {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap:            var(--spacing-8);   /* 32px */
  row-gap:               var(--spacing-4);   /* 16px */
  margin:                0;
  padding:               0;
  list-style:            none;
  width:                 100%;
}

/* Figma's rows are a fixed 112px against 96px of content, so each item carries
   16px of slack under its last body line — modelled here as bottom padding so a
   body that wraps to a third line still keeps the rules apart. */
.legal-hub-coverage__feature {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-2);   /* 8px */
  padding-block:  var(--spacing-4);   /* 16px */
  border-top:     0.75px solid var(--opacity-neutral-20);
}

.legal-hub-coverage__feature-title {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-2);
  margin:      0;
  font-size:   var(--font-size-base);     /* 16px */
  line-height: var(--line-height-base);   /* 24px */
  font-weight: var(--font-weight-bold);
  color:       var(--foreground);
}

.legal-hub-coverage__feature-icon {
  display:     inline-flex;
  flex-shrink: 0;
  color:       var(--foreground);
}

/* `869:9445`, measured 1:1: a 65x24 pill — 12/16 medium text inset 4px block /
   10px inline. It was 2px/8px, which made it 20px tall and read as a chip
   rather than the badge beside it. Both colours are sampled exactly: the fill
   is #EDE8DF (off the palette, 8 levels either side of `--background` and
   `--muted` — the same value the practice-areas chat card needs, so a scoped
   raw value), and the ink is `--color-brand-neutral-600`, a step darker than
   the `--muted-foreground` this used. */
.legal-hub-coverage__feature-tag {
  padding:       var(--spacing-1) 10px;   /* 4px 10px */
  background:    #EDE8DF;
  border-radius: var(--radius-full);
  font-size:     var(--font-size-xs);     /* 12px */
  line-height:   var(--line-height-xs);   /* 16px */
  font-weight:   var(--font-weight-medium);
  color:         var(--color-brand-neutral-600);
  white-space:   nowrap;
}

.legal-hub-coverage__feature-body {
  margin:      0;
  font-size:   var(--font-size-base);     /* 16px */
  line-height: var(--line-height-base);   /* 24px */
  font-weight: var(--font-weight-regular);
  color:       var(--muted-foreground);
}


/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 991px) {
  .legal-hub-coverage__venn-card {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Stacked, the 568/400 column ratio is just a hole: the illustration is
     480x322 and capped there, so a box drawn to the column's proportions
     leaves dead space above and below it. Size to the artwork instead, the way
     the homepage's `__venn-img-wrap` does — this card is the same card. */
  .legal-hub-coverage__venn-visual {
    aspect-ratio:  auto;
    /* Stacked, the artwork would otherwise start on the card's 12px padding. */
    padding-block: var(--spacing-6);   /* 24px */
  }

  /* Stacked, the copy is a centred BLOCK with its text still ranged left — the
     same thing the homepage's `__venn-copy` does at its own stacked width (380px
     cap, centred by the wrapper). Full-width here left three short lines
     stranded against the left edge of a very wide card. 380 also keeps every
     description on one line. */
  .legal-hub-coverage__venn-copy {
    max-width:     380px;
    margin-inline: auto;
    padding:       0 var(--spacing-4) var(--spacing-4);
  }

  /* The 3|4|3 split leaves ~200px columns here — too narrow for a $-price and
     a CTA. Drop to one card per row. */
  .legal-hub-coverage__plans {
    grid-template-columns: minmax(0, 1fr);
  }

  .legal-hub-coverage__plan[data-plan="ai-first"],
  .legal-hub-coverage__plan[data-plan="hybrid"],
  .legal-hub-coverage__plan[data-plan="human-first"] {
    grid-column: auto;
  }

  .legal-hub-coverage__features {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .legal-hub-coverage__plan-head {
    flex-wrap: wrap;
  }

  .legal-hub-coverage__features-title {
    padding: var(--spacing-4) 0;
  }
}

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