/* =========================================================
   Zeal Portal — Tabs
   The canonical tab bar (the treatment that was local to the
   project-detail tabs, made shared). A hairline-underlined row,
   no box — so the geometry pass (radius) does not apply here.

   Lowercase condensed labels. Inactive read at --ink-3; the active
   tab reads at --ink with a 2px --accent underline. An optional
   trailing count sits in --accent.

   Markup (link or button both work):
     <nav class="tabs">
       <a class="is-active">opportunities <span class="count">3</span></a>
       <a>planner</a>
       <button>labels</button>
     </nav>
   ========================================================= */

.tabs {
  display: flex;
  align-items: flex-end;
  gap: var(--s-5);                         /* 24px between tabs */
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tabs a,
.tabs button {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;                     /* overlap the container hairline */
  padding: 0 0 10px;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-cd);
  font-size: var(--t-small);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-body);
  text-transform: lowercase;
  text-decoration: none;
  color: var(--ink-3);
  cursor: pointer;
  white-space: nowrap;
  transition:
    color var(--dur-fast) var(--ease-std),
    border-color var(--dur-fast) var(--ease-std);
}
.tabs a:hover,
.tabs button:hover { color: var(--ink-2); }

.tabs a.is-active,
.tabs button.is-active {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.tabs a:focus-visible,
.tabs button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* Trailing count — tabular, accent, condensed. */
.tabs .count {
  font-family: var(--font-cd);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-micro);
  color: var(--accent);
  letter-spacing: 0;
}