/* ============================================================
   WorkforceSection — Homepage "Built to last" section
   Shared section shell, rail, badge, heading → src/styles/section.css
   ============================================================ */

.workforce-section { background-color: var(--background); }

@media (max-width: 767px) {
  .workforce-section { gap: 4rem; }
}


/* ============================================================
   Section header — uses the shared .section-header convention.
   The heading keeps its own 800px cap (no __text wrapper here).
   ============================================================ */

.workforce-section__heading {
  max-width: 800px;
}


/* ============================================================
   Card shell + alternating rows come from the shared <SplitCard>
   primitive. Only the per-visual frame BACKGROUND (Bg1/2/3) is
   section-specific — applied to the SplitCard frame via the row's
   `visualClassName`. Everything below (phases/teams/table internals)
   is the bespoke visual content, rendered inside that frame.
   ============================================================ */

.workforce-visual--phases {
  background-image:    url('https://cdn.prod.website-files.com/5b15ca3d02dd414c89ecc3ed/69c57a3f333f1d87297c9f9f_Bg1.svg');
  background-size:     cover;
  background-position: center;
}

.workforce-visual--teams {
  background-image:    url('https://cdn.prod.website-files.com/5b15ca3d02dd414c89ecc3ed/69c57a3f2f8ec4852a3caea8_Bg2.svg');
  background-size:     cover;
  background-position: center;
}

.workforce-visual--table {
  background-image:    url('https://cdn.prod.website-files.com/5b15ca3d02dd414c89ecc3ed/69c57a3fe9e7fc07e2201748_Bg3.svg');
  background-size:     cover;
  background-position: center;
}


/* ============================================================
   Row 1: Staggered phase cards
   ============================================================ */

.phases-grid {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  gap:             0;       /* connector rows provide the vertical spacing */
  padding:         4rem 0;
  height:          100%;
  box-sizing:      border-box;
}

/* Card rows and connector rows share the same 5-column grid */
.phases-grid__row {
  display:               grid;
  grid-template-columns: repeat(10, 1fr);
  column-gap:            0rem;   /* 16px — Figma gap-x-4 */
}

/* Connector rows sit between card rows; height = the original gap (64px) */
.phases-connector-row {
  display:               grid;
  grid-template-columns: repeat(10, 1fr);
  column-gap:            0rem;
  height:                4rem;   /* 64px */
  align-items: center;
}

/* Horizontal S-connector — tc2 rotated 90°: cols become rows, rows become cols */
.phase-connector {
  display:               grid;
  grid-template-columns: 24px 1fr 24px;
  grid-template-rows:    1fr 1px 1fr;
  width:                 100%;
  height:                100%;
  pointer-events:        none;
}

/* Connector 1→2: card 1 center (col 2) → card 2 center (col 3) */
.phase-connector--1 { grid-column: 4 / span 2; }

/* Connector 2→3: card 2 center (col 3) → card 3 center (col 4) */
.phase-connector--2 { grid-column: 6 / span 2; }

/* Entry arm: col 1 (24px), rows 1-2 — spans into the 1px spine row */
.pc-arm-entry {
  grid-column:               1;
  grid-row:                  1 / span 2;
  border-left:               1px solid rgba(40, 40, 37, 0.2);
  border-bottom:             1px solid rgba(40, 40, 37, 0.2);
  border-bottom-left-radius: 24px;
}

/* Spine: col 2 (1fr), middle row — 1px horizontal background */
.pc-spine {
  grid-column: 2;
  grid-row:    2;
  background:  rgba(40, 40, 37, 0.2);
}

/* Exit arm: col 3 (24px), rows 2-3 — spans from the 1px spine row */
.pc-arm-exit {
  grid-column:             3;
  grid-row:                2 / span 2;
  border-right:            1px solid rgba(40, 40, 37, 0.2);
  border-top:              1px solid rgba(40, 40, 37, 0.2);
  border-top-right-radius: 24px;
}

.phases-grid__row--1 .phases-grid__inner { grid-column: 1 / span 6; }
.phases-grid__row--2 .phases-grid__inner { grid-column: 3 / span 6; }
.phases-grid__row--3 .phases-grid__inner { grid-column: 5 / span 6; }

.phase-card {
  background:     var(--card);
  border:         0.5px solid rgba(40, 40, 37, 0.2);
  padding:        1.5rem 1.5rem 2rem;
  display:        flex;
  flex-direction: column;
  gap:            1rem;
}

.phase-card--flush-left  { border-left:  none; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.phase-card--center      { border-radius: var(--radius-lg); }
.phase-card--flush-right { border-right: none; border-radius: var(--radius-lg) 0 0 var(--radius-lg); }

.phase-card__header {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-3);
}

.phase-card__num {
  background: var(--accent);
}

.phase-card__title {
  font-size:   var(--font-size-lg, 1.125rem);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-lg, 1.75rem);
  color:       var(--foreground);
}

.phase-card__body {
  margin:      0;
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color:       var(--muted-foreground);
}


/* ============================================================
   Row 2: Team cascade — 6-row × 18-col grid
   rows 3 & 4 are fixed at 57px; all other rows size to content
   card 1: rows 1-2, cols 5-10
   card 2: rows 2-5, cols 13-18
   card 3: rows 5-6, cols 1-6
   ============================================================ */

.teams-grid {
  display:               grid;
  grid-template-columns: repeat(18, 1fr);
  grid-template-rows:    auto auto 57px 57px auto auto;
  gap:                   0;
  height:                100%;
  box-sizing:            border-box;
  padding:               4rem;
}

.teams-grid__card {
  position: relative;
}

.teams-grid__card--1 {
  grid-row:    1 / span 2;
  grid-column: 5 / span 6;
  z-index:     3;
  align-self:  start;
}

.teams-grid__card--2 {
  grid-row:    2 / span 4;
  grid-column: 13 / span 6;
  z-index:     2;
  align-self:  start;
}

.teams-grid__card--3 {
  grid-row:    5 / span 2;
  grid-column: 1 / span 6;
  z-index:     1;
  align-self:  start;
}

.teams-connector {
  pointer-events: none;
}

/* L-shape: top border → left border, top-left corner */
.teams-connector--1 {
  grid-row:               2 / span 3;
  grid-column:            4;
  border-top:             1px solid rgba(40, 40, 37, 0.2);
  border-left:            1px solid rgba(40, 40, 37, 0.2);
  border-top-left-radius: 24px;
}

/* S-shape: 1fr | 1px | 1fr × 1fr | 1fr */
.teams-connector--2 {
  grid-row:              4 / span 2;
  grid-column:           7 / span 6;
  display:               grid;
  grid-template-columns: 1fr 1px 1fr;
  grid-template-rows:    24px 1fr 24px;
}

/* Right arm + top-left corner: cols 2-3, top row (24px) — border-left sits on left edge of col 2 */
.tc2-arm-right {
  grid-column:            2 / span 2;
  grid-row:               1;
  border-top:             1px solid rgba(40, 40, 37, 0.2);
  border-left:            1px solid rgba(40, 40, 37, 0.2);
  border-top-left-radius: 24px;
}

/* Vertical: col 2 only, middle row — background bridges the 1px gap between arm borders */
.tc2-vert {
  grid-column: 2;
  grid-row:    2;
  background:  rgba(40, 40, 37, 0.2);
}

/* Left arm + bottom-right corner: cols 1-2, bottom row (24px) — border-right sits on right edge of col 2 */
.tc2-arm-left {
  grid-column:                1 / span 2;
  grid-row:                   3;
  border-bottom:              1px solid rgba(40, 40, 37, 0.2);
  border-right:               1px solid rgba(40, 40, 37, 0.2);
  border-bottom-right-radius: 24px;
}

/* Inverted S-shape (tc2 mirrored horizontally): top-left → bottom-right */
.teams-connector--3 {
  grid-row:              2 / span 2;
  grid-column:           11 / span 2;
  display:               grid;
  grid-template-columns: 1fr 1px 1fr;
  grid-template-rows:    24px 1fr 24px;
}

/* Top-left arm: cols 1-2, top row — border-right sits on right edge of col 2 */
.tc3-arm-top {
  grid-column:             1 / span 2;
  grid-row:                1;
  border-top:              1px solid rgba(40, 40, 37, 0.2);
  border-right:            1px solid rgba(40, 40, 37, 0.2);
  border-top-right-radius: 24px;
}

/* Vertical: col 2, middle row */
.tc3-vert {
  grid-column: 2;
  grid-row:    2;
  background:  rgba(40, 40, 37, 0.2);
}

/* Bottom-right arm: cols 2-3, bottom row — border-left sits on left edge of col 2 */
.tc3-arm-bot {
  grid-column:                2 / span 2;
  grid-row:                   3;
  border-bottom:              1px solid rgba(40, 40, 37, 0.2);
  border-left:                1px solid rgba(40, 40, 37, 0.2);
  border-bottom-left-radius:  24px;
}

.team-card {
  background:     var(--card);
  border:         0.5px solid rgba(40, 40, 37, 0.2);
  border-radius:  var(--radius-lg);
  padding:        1.5rem 1.5rem 2rem;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            1rem;
  text-align:     center;
}

.team-card__icon {
  display:     flex;
  align-items: center;
  color:       var(--foreground);
  flex-shrink: 0;
}

.team-card__title {
  margin:      0;
  font-size:   var(--font-size-lg, 1.125rem);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-lg, 1.75rem);
  color:       var(--foreground);
}

.team-card__body {
  margin:      0;
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color:       var(--muted-foreground);
}


/* ============================================================
   Row 3: Comparison table
   ============================================================ */

.workforce-visual--table > .compare-table-wrap {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         4rem;
}

/* Single flat grid — all cells are direct children so CSS grid
   enforces equal row heights across all three columns. */
.compare-table {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  row-gap:               var(--spacing-3);   /* 12px — Figma gap */
  background:            var(--card);
  border:                0.5px solid rgba(40, 40, 37, 0.2);
  border-radius:         var(--radius-xl, 24px);
  overflow:              hidden;
  padding:               var(--spacing-9) var(--spacing-3);
  width:                 100%;
}

/* Header cells */
.compare-table__col-head {
  display:        flex;
  flex-direction: column;
  gap:            var(--spacing-3);
}

.compare-table__col-icon {
  display:     flex;
  align-items: center;
  padding:     0 1rem;     /* px-16px */
}

.compare-table__col-name {
  font-size:   var(--font-size-lg, 1.125rem);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-lg, 1.75rem);
  padding:     4px var(--spacing-3);
}

.compare-table__col-name--muted   { color: var(--muted-foreground); }
.compare-table__col-name--primary { color: var(--primary); }

/* Data cells — flex so content is vertically centered within shared row height */
.compare-table__label {
  display:     flex;
  align-items: center;
  gap:         var(--spacing-2);
  padding:     0.25rem 0.75rem 0.25rem 1.25rem;
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color:       var(--muted-foreground);
}

.compare-table__row-icon {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
  color:       var(--muted-foreground);
}

.compare-table__cell {
  display:     flex;
  align-items: center;
  padding:     0.25rem 1rem;
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
}

.compare-table__cell--stripe { background: var(--secondary); }

.compare-table__cell--traditional.compare-table__cell--stripe {
  border-radius: var(--radius-full) 0 0 var(--radius-full);   /* left pill cap */
}

.compare-table__cell--smith { color: var(--foreground); }

.compare-table__cell--smith.compare-table__cell--stripe {
  border-radius: 0 var(--radius-full) var(--radius-full) 0;   /* right pill cap */
}

.compare-table__cell--traditional { color: var(--muted-foreground); }


/* ============================================================
   Smaller desktop (≤1280px) — reduce inner visual frame padding
   ============================================================ */

@media (max-width: 1280px) {
  .teams-grid {
    padding: 2rem;
  }

  .phases-grid {
    padding: 2rem 0;
  }

  .workforce-visual--table > .compare-table-wrap {
    padding: 2rem;
  }
}


/* ============================================================
   Tablet (≤991px)
   ============================================================ */

/* Mobile tab switcher — hidden on desktop */
.workforce-visual--table .compare-table-tabs { display: none; }

/* Mobile-only connector — hidden on desktop */
.teams-connector--m { display: none; }


@media (max-width: 991px) {
  .phases-grid {
    padding: 2rem 0;
  }

  .phases-connector-row {
    height: 2rem;
  }

  .phase-connector {
    height: 2rem;
  }

  .teams-grid {
    padding-bottom: 2rem;
    padding-top:    2rem;
  }
}


/* ============================================================
   Mobile (≤767px) — simplified visuals, table tab switcher
   ============================================================ */

@media (max-width: 767px) {
  .phase-card__title {
    font-size:   var(--font-size-base); /* 16px */
    line-height: var(--line-height-base); /* 24px */
  }

  /* Phase visual: padding 48px top/bottom, 24px sides */
  .phases-grid {
    padding: 3rem 1.5rem;
  }

  /* Connector rows: straight vertical spine only — hide S-curve arms */
  .pc-arm-entry,
  .pc-arm-exit { display: none; }

  .phases-connector-row {
    height: 2rem;   /* 32px — matches Figma gap-8 between phase cards */
  }

  /* Full-width, centred flex so spine sits at horizontal midpoint */
  .phase-connector {
    grid-column:     1 / -1;
    display:         flex;
    align-items:     center;
    justify-content: center;
  }

  .pc-spine {
    width:      1px;
    height:     100%;
    background: rgba(40, 40, 37, 0.2);
  }

  .phases-grid__row--1 .phases-grid__inner,
  .phases-grid__row--2 .phases-grid__inner,
  .phases-grid__row--3 .phases-grid__inner {
    grid-column: 1 / -1;
    max-width:   340px;
    margin:      0 auto;
    width:       100%;
  }

  /* All cards: restore full border (flush variants removed sides on desktop),
     0.5px weight and 12px radius to match Figma mobile spec */
  .phase-card,
  .phase-card--flush-left,
  .phase-card--flush-right,
  .phase-card--center {
    border:        0.5px solid rgba(40, 40, 37, 0.2);
    border-radius: 12px;
    padding:       1rem;
  }

  .phase-card__body { display: none; }

  /* Teams: cascade layout — card-left / connector / card-right / connector / card-center */
  .teams-connector--1 { display: none; }

  /* Mobile-only 3-corner connector box — subgrid rows align with outer grid */
  .teams-connector--m {
    display:               grid;
    grid-column:           3 / 13;
    grid-row:              2 / 8;
    grid-template-rows:    subgrid;
    grid-template-columns: 1fr 1fr;
  }

  /* ── tcm-* elements: path = down → left → down → right ── */

  /* Entry vertical line: col 2, row 1 */
  .tcm-v1 {
    grid-column:  2;
    grid-row:     1;
    border-right: 1px solid rgba(40, 40, 37, 0.2);
  }

  /* Vertical approach to first corner: col 2, rows 2-3 — spans into junction so border aligns */
  .tcm-v2 {
    grid-column:   2;
    grid-row:      2 / span 2;
    border-right:  1px solid rgba(40, 40, 37, 0.2);
    margin-bottom: 24px;
  }

  /* First corner (down→left): 24×24 at bottom-right, spans rows 2-3 so bottom aligns with junction */
  .tcm-c1 {
    grid-column:                2;
    grid-row:                   2 / span 2;
    width:                      24px;
    height:                     24px;
    align-self:                 end;
    justify-self:               end;
    border-right:               1px solid rgba(40, 40, 37, 0.2);
    border-bottom:              1px solid rgba(40, 40, 37, 0.2);
    border-bottom-right-radius: 24px;
  }

  /* Horizontal line leftward: col 2, spans auto+junction rows 2-3 — border-bottom lands at junction bottom */
  .tcm-h1 {
    grid-column:   2;
    grid-row:      2 / span 2;
    border-bottom: 1px solid rgba(40, 40, 37, 0.2);
    margin-right:  24px;
  }

  /* Second corner (left→down): 24×24 at top-left of col 1, rows 3-4 — border-top meets junction bottom */
  .tcm-c2 {
    grid-column:            1;
    grid-row:               3 / span 2;
    width:                  24px;
    height:                 24px;
    align-self:             start;
    justify-self:           start;
    border-top:             1px solid rgba(40, 40, 37, 0.2);
    border-left:            1px solid rgba(40, 40, 37, 0.2);
    border-top-left-radius: 24px;
  }

  /* Horizontal exit from second corner: col 1, rows 3-4 — border-top meets junction bottom */
  .tcm-h2 {
    grid-column: 1;
    grid-row:    3 / span 2;
    border-top:  1px solid rgba(40, 40, 37, 0.2);
    margin-left: 24px;
  }

  /* Vertical line down: col 1, rows 4-6 — clears 24px for both corners */
  .tcm-vert {
    grid-column:   1;
    grid-row:      4 / 7;
    border-left:   1px solid rgba(40, 40, 37, 0.2);
    margin-top:    24px;
    margin-bottom: 24px;
  }

  /* Third corner (down→right): 24×24 at bottom-left of col 1, row 6 */
  .tcm-c3 {
    grid-column:               1;
    grid-row:                  6;
    width:                     24px;
    height:                    24px;
    align-self:                end;
    justify-self:              start;
    border-left:               1px solid rgba(40, 40, 37, 0.2);
    border-bottom:             1px solid rgba(40, 40, 37, 0.2);
    border-bottom-left-radius: 24px;
  }

  /* Horizontal exit rightward: cols 1-2, row 6 — starts 24px after left edge */
  .tcm-h3 {
    grid-column:   1 / 3;
    grid-row:      6;
    border-bottom: 1px solid rgba(40, 40, 37, 0.2);
    margin-left:   24px;
  }

  .teams-grid {
    grid-template-columns: repeat(36, 1fr);
    grid-template-rows:    auto 2rem auto 1px auto 2rem 1fr 1fr;
    padding:               1.5rem;
    gap:                   0;
  }

  /* Pills: stretch to fill column spans */
  .teams-grid__card--1 { grid-column: 1 / 25;       grid-row: 1;          align-self: start; justify-self: stretch; }
  .teams-grid__card--2 { grid-column: 19 / 37;      grid-row: 3 / span 3; align-self: start; justify-self: stretch; }
  .teams-grid__card--3 { grid-column: 6 / 32;       grid-row: 7 / span 2; align-self: start; justify-self: stretch; }

  /* team-card: fills wrapper width */
  .teams-grid__card--1 .team-card,
  .teams-grid__card--2 .team-card,
  .teams-grid__card--3 .team-card { width: 100%; }

  /* Allow titles to reflow to one line when space permits */
  .team-card__title br { display: none; }

  /* S-curve connectors */
  /* --2: top-right→bottom-left, row 6 — card 2 center → card 3 center */
  .teams-connector--2 { display: grid; grid-column: 19 / 28; grid-row: 6; }
  /* --3: horizontal S (card 1 top-left → card 2 bottom-right), row 2 */
  .teams-connector--3 {
    display:               grid;
    grid-column:           13 / 28;
    grid-row:              2;
    grid-template-columns: 24px 1fr 24px;
    grid-template-rows:    1fr 1px 1fr;
  }

  /* Entry arm: top-left corner — left + bottom borders, bottom-left radius */
  .teams-connector--3 .tc3-arm-top {
    grid-column:              1;
    grid-row:                 1 / span 2;
    border-top:               none;
    border-right:             none;
    border-top-right-radius:  0;
    border-left:              1px solid rgba(40, 40, 37, 0.2);
    border-bottom:            1px solid rgba(40, 40, 37, 0.2);
    border-bottom-left-radius: 24px;
  }

  /* Spine: horizontal — grid position unchanged */

  /* Exit arm: bottom-right corner — right + top borders, top-right radius */
  .teams-connector--3 .tc3-arm-bot {
    grid-column:               3;
    grid-row:                  2 / span 2;
    border-bottom:             none;
    border-left:               none;
    border-bottom-left-radius: 0;
    border-right:              1px solid rgba(40, 40, 37, 0.2);
    border-top:                1px solid rgba(40, 40, 37, 0.2);
    border-top-right-radius:   24px;
  }

  /* ── Connector --2: upside-down horizontal S (card 2 top-right → card 3 bottom-left) ── */
  .teams-connector--2 {
    grid-template-columns: 24px 1fr 24px;
    grid-template-rows:    1fr 1px 1fr;
  }

  /* Entry arm: top-right corner — right + bottom borders, bottom-right radius */
  .teams-connector--2 .tc2-arm-right {
    grid-column:                3;
    grid-row:                   1 / span 2;
    border-top:                 none;
    border-left:                none;
    border-top-left-radius:     0;
    border-right:               1px solid rgba(40, 40, 37, 0.2);
    border-bottom:              1px solid rgba(40, 40, 37, 0.2);
    border-bottom-right-radius: 24px;
  }

  /* Spine: horizontal — grid position unchanged from desktop */

  /* Exit arm: bottom-left corner — left + top borders, top-left radius */
  .teams-connector--2 .tc2-arm-left {
    grid-column:                1;
    grid-row:                   2 / span 2;
    border-bottom:              none;
    border-right:               none;
    border-bottom-right-radius: 0;
    border-left:                1px solid rgba(40, 40, 37, 0.2);
    border-top:                 1px solid rgba(40, 40, 37, 0.2);
    border-top-left-radius:     24px;
  }

  .team-card {
    flex-direction:  row;
    align-items:     center;
    justify-content: center;
    text-align:      left;
    gap:            0.75rem;
    padding:        1rem;
    border:         0.5px solid rgba(40, 40, 37, 0.2);
    border-radius:  12px;
  }

  .team-card__title {
    font-size:   var(--font-size-base);
    line-height: var(--line-height-base);
  }

  .team-card__body  { display: none; }

  /* Compare table wrap: stack tab + table vertically */
  .workforce-visual--table > .compare-table-wrap {
    flex-direction:  column;
    align-items:     stretch;
    justify-content: flex-start;
    padding:         1.5rem;
    gap:             2rem;
  }

  /* Tab switcher: show + stretch to fill wrap width */
  .workforce-visual--table .compare-table-tabs {
    display:    flex;
    width:      100%;
    background: rgba(40, 40, 37, 0.1);
  }

  /* Equal-width tabs */
  .workforce-visual--table .compare-table-tabs .seg-tabs__tab { flex: 1; }

  /* Smith active: primary text color */
  .workforce-visual--table .compare-table-tabs .seg-tabs__tab:nth-child(2).is-active {
    color: var(--primary);
  }

  /* Hide column headers and label-col spacer — tab switcher replaces them */
  .compare-table__col-head,
  .compare-table__label-col { display: none; }

  /* Hide row icons; reset label padding */
  .compare-table__row-icon { display: none; }
  .compare-table__label    { padding: 0.25rem 0.75rem 0.25rem 0; }

  /* Table card: 2-col, adjust radius + padding for mobile */
  .compare-table {
    grid-template-columns: 1fr 1fr;
    border-radius:         12px;
    padding:               2.25rem 0.75rem 2.25rem 1rem;
  }

  /* Hide the inactive cells */
  [data-mobile-col="traditional"] .compare-table__cell--smith { display: none; }
  [data-mobile-col="smith"]       .compare-table__cell--traditional { display: none; }

  /* Both data columns use full foreground on mobile regardless of desktop muted override */
  .compare-table__cell--traditional,
  .compare-table__cell--smith { color: var(--foreground); }

  /* Fix stripe pill shapes for 2-col */
  [data-mobile-col="traditional"] .compare-table__cell--traditional.compare-table__cell--stripe,
  [data-mobile-col="smith"]       .compare-table__cell--smith.compare-table__cell--stripe {
    border-radius: var(--radius-full);
  }
}



/* ============================================================
   Tabs — Segmented pill tab bar
   Design tokens from src/styles/tokens.css.
   ============================================================ */

.seg-tabs {
  display:       inline-flex;
  align-items:   center;
  flex-shrink:   0;
  height:        40px;
  background:    var(--muted);
  border-radius: var(--radius-full);
  column-gap:    1px;
}

/* Individual tab — button or anchor */
.seg-tabs__tab {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--spacing-1-5);
  height:          100%;
  padding:         var(--spacing-2) var(--spacing-4); /* 8px 16px */
  border:          1px solid transparent; /* size-stable when active border appears */
  border-radius:   var(--radius-full);
  background:      transparent;
  color:           var(--foreground);
  font-family:     var(--font-family-default);
  font-size:       var(--font-size-sm);   /* 14px */
  font-weight:     var(--font-weight-medium);
  line-height:     var(--line-height-sm);
  cursor:          pointer;
  text-decoration: none;  /* reset <a> default */
  white-space:     nowrap;
  transition:      background 0.2s, border-color 0.2s;
  box-sizing: border-box;
}

.seg-tabs__tab:hover {
  background: var(--opacity-background-50);
}

/* Active tab — only visible in playing state (.seg-tabs--active) */
.seg-tabs--active .seg-tabs__tab.is-active {
  background: var(--background);
  border:     1px solid var(--border);
}

.seg-tabs--active .seg-tabs__tab.is-active:hover {
  background: var(--background);
}

/* Icon slot */
.seg-tabs__tab-icon {
  display:     flex;
  align-items: center;
  flex-shrink: 0;
}

.seg-tabs__tab-icon svg {
  display: block;
  width:   1rem;
  height:  1rem;
}


/* ============================================================
   Light scheme — warm secondary track, card active pill
   Matches the light DemoPlayer variant.
   ============================================================ */

.seg-tabs--light {
  background: var(--secondary);
}

.seg-tabs--light .seg-tabs__tab:hover {
  background: var(--popover);
}

.seg-tabs--light.seg-tabs--active .seg-tabs__tab.is-active,
.seg-tabs--light.seg-tabs--active .seg-tabs__tab.is-active:hover {
  background: var(--card);
}


/* ============================================================
   Light-alt scheme — muted track, background active pill + shadow
   Used in the Demo section on the accent background.
   ============================================================ */

.seg-tabs--light-alt {
  background: var(--muted);
}

.seg-tabs--light-alt .seg-tabs__tab {
  font-weight: var(--font-weight-medium);
}

.seg-tabs--light-alt .seg-tabs__tab:hover {
  background: var(--opacity-background-50);
}