/* SLE-TH-tabs — tab navigation primitive.
 *
 * Base shape: flex row, border-bottom, yellow underline on active. Compose
 *   `.suite-tabs`  on the container,
 *   `.suite-tab`   on each item,
 *   `.is-active`   on the current one.
 *
 * Variants:
 *   .suite-tabs--pill  — pill-shaped tabs (no underline; coloured bg on active)
 *
 * Apps may layer data-attribute colour rules on top of `.suite-tab` for
 * semantic active colours (e.g. campscout `.aftab.active[data-type="d"]`).
 * Those stay app-local because they reference app-specific tokens.
 *
 * History: the underline shape already existed in shared/style/layout.css
 * as `.tabs` / `.tab` (unnamespaced — secretariat depends on those for its
 * sub-tab strips). This file ports the same primitive under the
 * `.suite-tabs` namespace for the compose-don't-rename pattern. The two
 * coexist; a future sweep can collapse them.
 *
 * Depends on tokens.css.
 */
.suite-tabs {
  display: flex;
  gap: var(--sp-3);
  border-bottom: 1px solid var(--g2);
  margin-bottom: var(--sp-5);
}
.suite-tab {
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  color: var(--g4);
  font-weight: var(--fw-medium);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.suite-tab:hover { color: var(--text); }
.suite-tab.is-active {
  color: var(--text);
  border-bottom-color: var(--y);
}

/* Pill variant — used for campscout's .aftab pattern. */
.suite-tabs--pill { border-bottom: none; gap: var(--sp-2); }
.suite-tabs--pill .suite-tab {
  border: 1px solid var(--g2);
  border-radius: var(--radius-pill);
  margin-bottom: 0;
}
.suite-tabs--pill .suite-tab.is-active {
  background: var(--bk);
  color: var(--white);
  border-color: var(--bk);
}
@media (prefers-color-scheme: dark) {
  .suite-tabs--pill .suite-tab.is-active {
    background: var(--g4);
    color: var(--bk);
    border-color: var(--g4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .suite-tab { transition: none; }
}