/* Interface tabs (_includes/tabs.html, _includes/code-tabs.html).
   CSS-only switching, no JavaScript required.

   Markup per tab set: radios, then labels (the visible tab bar), then
   one panel per radio, all siblings. The checked radio reveals the
   panel that matches its tab position: the generated rules below
   (one per position) pair `radio:nth-of-type(N):checked` with
   `panel:nth-of-type(N)` by position within the set. No :has(), no
   :not(), no JS needed. assets/js/tabs.js only adds extras
   (remembers the choice, arrow keys). Colours use just-the-docs
   custom properties so the light and dark themes both work. */

.st-tabs { margin: 1rem 0 1.5rem; }

.st-tabs__bar {
  position: relative;
  border-bottom: 1px solid #e6e1e8;
}

/* Labels and panels are floated; the bar's ::after clears them so the
   box contains its content. */
.st-tabs__bar::after { content: ""; display: block; clear: left; }

/* The radio is the focusable control; the label is the visible tab.
   Absolutely positioned so the radio never affects layout. */
.st-tabs__radio {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.st-tabs > .st-tabs__bar > .st-tabs__tab {
  float: left;
}

.st-tabs__tab {
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  color: var(--text-muted, #6b6b78);
  user-select: none;
}

.st-tabs__radio:checked + .st-tabs__tab {
  color: var(--link-color, #036ded);
  background: var(--body-background, #fff);
  border-bottom: 1px solid var(--body-background, #fff);
  box-shadow: inset 0 2px 0 var(--link-color, #036ded);
  margin-bottom: -1px; /* sit on the bar's border */
}

.st-tabs__radio:focus-visible + .st-tabs__tab {
  outline: 2px solid var(--link-color, #036ded);
  outline-offset: -2px;
}

.st-tabs__tab:hover { color: var(--link-color, #036ded); }

/* Tab switching is purely positional (`radio N :checked ~ panel N`),
   so it works however the boxes are laid out. Top-level sets use
   floats so the bar's labels sit side by side with panels below;
   nested sets need none of that and must not inherit it (a floated
   panel inside a hidden parent stays hidden). */
.st-tabs > .st-tabs__bar > .st-tabs__panel {
  float: left;
  width: 100%;
  clear: left;
  display: none;
  padding: 0.75rem 0.25rem;
}

/* Reveal the panel whose position matches the checked radio's
   position. Inputs and divs have independent :nth-of-type counters,
   so radio N pairs with panel N — within one bar. (Four tabs
   everywhere: UI/API/CLI/MCP and HTTP/Python/TypeScript/Go.)
   A nested set's radios are NOT siblings of the outer panels, so the
   pairing can't leak between levels. */

.st-tabs > .st-tabs__bar > .st-tabs__radio:nth-of-type(1):checked ~ .st-tabs__panel:nth-of-type(1) { display: block; }

.st-tabs > .st-tabs__bar > .st-tabs__radio:nth-of-type(2):checked ~ .st-tabs__panel:nth-of-type(2) { display: block; }

.st-tabs > .st-tabs__bar > .st-tabs__radio:nth-of-type(3):checked ~ .st-tabs__panel:nth-of-type(3) { display: block; }

.st-tabs > .st-tabs__bar > .st-tabs__radio:nth-of-type(4):checked ~ .st-tabs__panel:nth-of-type(4) { display: block; }


/* Nested sets inside a panel: pair by position inside the inner bar. */

.st-tabs__panel .st-tabs > .st-tabs__bar > .st-tabs__radio:nth-of-type(1):checked ~ .st-tabs__panel:nth-of-type(1) { display: block; }

.st-tabs__panel .st-tabs > .st-tabs__bar > .st-tabs__radio:nth-of-type(2):checked ~ .st-tabs__panel:nth-of-type(2) { display: block; }

.st-tabs__panel .st-tabs > .st-tabs__bar > .st-tabs__radio:nth-of-type(3):checked ~ .st-tabs__panel:nth-of-type(3) { display: block; }

.st-tabs__panel .st-tabs > .st-tabs__bar > .st-tabs__radio:nth-of-type(4):checked ~ .st-tabs__panel:nth-of-type(4) { display: block; }


.st-tabs__panel > :first-child { margin-top: 0; }
.st-tabs__panel > :last-child { margin-bottom: 0; }

.st-tabs__none {
  color: var(--text-muted, #6b6b78);
  font-style: italic;
}

/* Language sub-tabs, nested inside the API panel: a bordered box. */
.st-tabs--nested {
  border: 1px solid #e6e1e8;
  border-radius: 0.375rem;
  padding: 0.25rem 0.75rem 0.5rem;
  margin: 0.75rem 0 0.25rem;
}

/* Nested sets flow normally: no floats (the rules above are scoped to
   top-level sets), panels stack inside the box. */
.st-tabs--nested .st-tabs__panel { padding: 0.5rem 0 0.25rem; }

/* If the stylesheet ever fails to load, the script makes the tab
   semantics work: only the checked panel shows, the rest are inert
   (see assets/js/tabs.js). With the sheet present CSS controls
   visibility and the script touches nothing. */