/* ============================================================================
 * Tabs — .ui-tabs
 * A tablist with an underline indicator + panels. Markup comes from tabs() in
 * components/tabs.js; wire it with initTabs(). Colours read the accent tokens.
 * ========================================================================== */
.ui-tabs__list {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
}
.ui-tabs__tab {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  font: 600 calc(var(--text-base) - 0.5px)/1 var(--font-sans);
  color: var(--text);
  padding: 11px 14px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.ui-tabs__tab:hover { color: var(--strong); }
.ui-tabs__tab.is-active { color: var(--strong); border-bottom-color: var(--accent); }
.ui-tabs__tab:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); border-radius: 7px 7px 0 0; }

.ui-tabs__panels { padding-top: 20px; }
.ui-tabs__panel[hidden] { display: none; }
/* The panel the reader switches to fades in, without travel. initTabs() adds the
   class on a switch and never at first render; playEntrance() takes it off. */
.ui-tabs__panel.is-entering { animation: m-fade var(--dur-fast) var(--ease-out) both; }
/* The panel is focusable (tabindex="0", see tabs.js) so a keyboard user can
   reach text-only content. Show the ring when they land on it. */
.ui-tabs__panel:focus-visible { outline: var(--ring); outline-offset: var(--ring-offset); border-radius: 8px; }