/* ==========================================================
   IROZON DESIGN SYSTEM — Tabs (canonical, v1)
   Public API (WAI-ARIA Tabs pattern):
     <div class="iz-tabs" role="tablist" aria-label="...">
       <button class="iz-tab" role="tab" id="tab-1"
               aria-selected="true" aria-controls="panel-1">Overview</button>
       ...
     </div>
     <div class="iz-tab-panel" role="tabpanel" id="panel-1" aria-labelledby="tab-1">...</div>
   Styled entirely from [aria-selected="true"] — no .is-active. Tabs
   switch content within the same context; a navigation link that
   merely looks tab-like stays a plain <a> with aria-current, never
   this pattern (see tabs.html for the distinction).
   ========================================================== */

.iz-tabs {
  display: flex;
  border-block-end: 1px solid var(--color-border);
}
.iz-tabs[data-variant="stretched"] {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.iz-tab {
  position: relative;
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  padding-inline: 4px;
  padding-block: 12px;
  margin-inline-end: 20px;
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--fs-body-sm);
  color: var(--color-text-muted);
  transition: color var(--motion-duration-fast) var(--motion-ease-standard);
}
.iz-tabs[data-variant="stretched"] .iz-tab {
  margin-inline-end: 0;
  text-align: center;
}
.iz-tab:hover {
  color: var(--color-text-secondary);
}
.iz-tab[aria-selected="true"] {
  color: var(--color-text-primary);
}
.iz-tab:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Selection indicator — a small precise Green marker, not a filled
   pill. Reveals via scaleX so it never causes layout movement. Uses
   the primitive, not --color-action-primary — this marker is a fixed
   Green brand accent, unrelated to Button's theme-adaptive Primary
   (which resolves to Ink on light surfaces as of v2). */
.iz-tab::after {
  content: "";
  position: absolute;
  inset-inline: 4px;
  inset-block-end: -1px;
  block-size: 2px;
  background: var(--irozon-green);
  transform: scaleX(0);
  transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}
.iz-tabs[data-variant="stretched"] .iz-tab::after {
  inset-inline: 0;
}
.iz-tab[aria-selected="true"]::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  .iz-tab,
  .iz-tab::after {
    transition: none;
  }
}

.iz-tab-panel {
  padding-block: 20px;
}
.iz-tab-panel:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}