/* =========================================================
   tab — a navigation link styled as a route ("/work").
   Lives in the app-bar's primary nav. Text-only; colour
   carries every state.
   ========================================================= */

.tab {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;   /* 24px hit target */
  padding: var(--spacing-02) var(--spacing-03);
  font-family: var(--font-family-roboto);
  font-size: var(--type-scale-02);          /* 14px */
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-150);
  color: var(--color-font-light);
  text-decoration: none;
  border-radius: var(--border-radius-pill);
  transition: color 120ms ease;
}

.tab:hover,
.tab:active {
  color: var(--color-font);
}

.tab:focus-visible {
  outline: var(--accessibility-focus-outline-width)
           var(--accessibility-focus-outline-style, solid)
           var(--accessibility-focus-outline-color);
  outline-offset: var(--accessibility-focus-outline-offset);
  border-radius: var(--border-radius-pill);   /* keep the pill — overrides the global 5px focus default */
}

/* Current section. Pair with aria-current="page" in the markup. */
.tab--active {
  color: var(--color-font);
  font-weight: var(--font-weight-light);
  background-color: var(--color-background-selected);
}