/* ==========================================================================
   COMPONENTS · TABS — the member-area section switcher, set as printed index
   tabs: small-caps furniture labels on a hairline baseline, the active tab
   crowned by a rubric rule. Visual only — panel switching is driven by
   [aria-selected] / [hidden] (the accessible ARIA tabs pattern, JS-toggled).
   ========================================================================== */

.op-tabs { display: block; }

.op-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  border-bottom: 1px solid var(--rule);
}

.op-tabs__tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: var(--space-2xs) 0;
  font-family: var(--font-furniture);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-ink);
}
.op-tabs__tab:hover { color: var(--text); }
.op-tabs__tab[aria-selected="true"] {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.op-tabs__tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.op-tabs__count {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-muted);
  margin-left: 0.4em;
}

.op-tabs__panel { padding-top: var(--space-md); }
.op-tabs__panel[hidden] { display: none; }