/*
 * Pill tab strip (D-22 "Assigned to me N · Created by me N", E-03 "To do N · Overdue N ·
 * Completed N"): a pill outline around pill links; the active one is blue. The count follows the
 * label one space away (3px).
 *
 *   <nav class="train-tabs">
 *     <a class="train-tabs__tab is-active" aria-current="page">To do <span class="train-tabs__count">2</span></a>
 *   </nav>
 */
@layer components {
  .train-tabs {
    align-self: flex-start;
    display: inline-flex;
    flex: none;
    gap: 2px;
    padding: 3px;
    border: 1.5px solid var(--color-divider);
    border-radius: var(--radius-pill);
  }
  .train-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 34px;
    padding: 0 16px;
    border-radius: var(--radius-pill);
    color: var(--color-text);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
  }
  .train-tabs__tab:hover { background: var(--color-btn-hover); color: var(--color-text); }
  .train-tabs__tab.is-active {
    background: var(--color-blue);
    color: #fff;
    font-weight: 700;
  }

  /* Phones: 44px targets. */
  @media (max-width: 767px) {
    .train-tabs__tab { height: 44px; }
  }
}