/* 06-components/_tabs.css */
/* ── c-tabs — a TUI-style tab strip over a panel body. A row of uppercase labels sits on a
   bottom rule; the selected tab lights amber + ▸ and joins to the body below it. Stimulus
   (controllers/tabs_controller.js) swaps panels; without JS every panel renders stacked, so
   the content is never hidden behind a script. */
.c-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  border-bottom: var(--bw) solid var(--line);
}
.c-tabs__tab {
  appearance: none;
  background: none;
  border: var(--bw) solid transparent;
  border-bottom: none;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  padding: var(--space-2xs) var(--space-sm);
  margin-bottom: calc(-1 * var(--bw));
  cursor: pointer;
}
.c-tabs__tab:hover { color: var(--text); }
.c-tabs__tab.is-current {
  color: var(--accent);
  border-color: var(--line);
  background: var(--surface-raised);
}
.c-tabs__tab.is-current::before { content: "\25B8\00a0"; }   /* ▸ + nbsp */
.c-tabs__tab[hidden] { display: none; }