/* kit v1.9.0 — generated by sync-kit; edit kit/ and re-sync */
/* kit/ui/tabs — a tablist switching between panels of parallel content.
 *
 * NEW WORK (kit 1.4.0), not an extraction — kit.json's `planned` block records why: the file
 * the plan pointed at was a jump-nav (extracted as ui/jump-nav in 1.3.0); nothing in the theme
 * shows and hides panels from a tablist. This is the other half, authored.
 *
 * WHEN A PAGE USES THIS (operator rule, 2026-08-23): parallel variants of the same thing where
 * the reader picks ONE — per-concern treatment menus, per-outlet details, per-skin-type
 * protocols. Sequential content (steps, a narrative) is not tabs. If the reader should see all
 * of it, stack it. See docs/tabs.md §When to use.
 *
 * ARM A: the tablist is authored `hidden` and tabs.js removes it only after wiring real tabs
 * (the jump-nav honesty pattern). With no JS every panel is simply visible, stacked in source
 * order, each introduced by its own heading — the full content, nothing collapsed behind a
 * control that cannot work. That is why each panel MUST open with a heading: it is the
 * panel's label in the arm that has no tabs.
 */

lp-tabs {
  display: block;
}

.lp-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-m);
  margin-bottom: var(--space-m);
  border-bottom: 1px solid var(--border);
}

/* display: flex beats the UA's [hidden] rule — without this the authored-hidden tablist
 * would render in the no-JS arm as an empty ruled strip. */
.lp-tabs__list[hidden] {
  display: none;
}

.lp-tabs__tab {
  padding: var(--space-xs) 2px calc(var(--space-xs) + 1px);
  margin-bottom: -1px; /* the active border sits ON the list's rule, not above it */
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-s);
  font-weight: var(--btn-weight);
  letter-spacing: var(--btn-tracking);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.lp-tabs__tab:hover {
  color: var(--text-c);
}

.lp-tabs__tab[aria-selected='true'] {
  color: var(--text-c);
  border-bottom-color: var(--primary);
}

.lp-tabs__tab:focus-visible {
  outline: 2px solid var(--btn-outline-border);
  outline-offset: 3px;
}

/* Stacked (arm A) panels breathe; tabbed panels sit flush under the list. The [hidden]
 * attribute is the whole switching mechanism — no display classes to fight. */
.lp-tabs__panel {
  margin: 0;
}

.lp-tabs__panel + .lp-tabs__panel {
  margin-top: var(--space-l);
}

.lp-tabs--on .lp-tabs__panel + .lp-tabs__panel {
  margin-top: 0;
}

.lp-tabs__panel:focus-visible {
  outline: 2px solid var(--btn-outline-border);
  outline-offset: 4px;
}