/* Visually mark the three "API family" tabs (API Reference / API Changelog /
 * API Mappings) apart from the three content tabs — a small text caption
 * sitting above the group, not a color tint (read as "this is a link",
 * collided with the app's existing blue active-tab indicator) or a
 * background capsule (both tried and rejected as poor UX in user feedback).
 * The tabs themselves stay completely plain/unstyled; only a "API" label
 * floats above the first of the three via a ::before pseudo-element. Pure
 * appearance: layout.py's dbc.Tabs structure is untouched (every Tab stays
 * a direct, mechanically identical child of #main-tabs); this only targets
 * the .zrn-api-tab class those three Tab components carry via
 * tab_class_name (NOT className — see layout.py's comment on why). Served
 * automatically from assets/ (Dash's default asset-loading), same as the
 * .js files already here — this project has no other CSS, so this is
 * deliberately small and scoped, not a general stylesheet.
 */

.zrn-tabs {
  /* Room for the label to sit above the tab row without overlapping the
     navbar directly above it. */
  margin-top: 16px;
}

/* :first-of-type/:first-child would be wrong here — every nav-item is the
 * same tag (a <div>, not <li>, in this dash-bootstrap-components version),
 * so ":first-of-type" matches "the first div among ALL six tabs" (Release
 * notes), never "the first .zrn-api-tab" — it silently matched nothing.
 * The correct way to select "the first element of a class run" in CSS is
 * the adjacent-sibling combinator: a .zrn-api-tab that immediately follows
 * a NON-.zrn-api-tab sibling is, by definition, the first one in the group. */
.zrn-tabs .nav-item:not(.zrn-api-tab) + .zrn-api-tab {
  margin-left: 10px;
}

/* The "API" caption centers over the MIDDLE tab (API Changelog), not the
 * group's own left/right edges — there's no single element spanning all
 * three siblings to center against without JS-measuring their combined
 * width. Anchoring to the middle tab's own midpoint works because the
 * three labels ("API Reference" / "API Changelog" / "API Mappings") are
 * fixed English text of similar width, so its center sits within ~1px of
 * the true 3-tab group center (measured: 727.4px vs 726.2px) — good
 * enough that a JS-measured version isn't worth the complexity. The first
 * tab needed `position: relative` too, only to satisfy this rule's own
 * `:not(...) + .zrn-api-tab` chain below (selecting "the tab after the
 * first api tab"); it carries no positioning of its own anymore. */
.zrn-tabs .nav-item:not(.zrn-api-tab) + .zrn-api-tab,
.zrn-tabs .nav-item:not(.zrn-api-tab) + .zrn-api-tab + .zrn-api-tab {
  position: relative;
}

.zrn-tabs .nav-item:not(.zrn-api-tab) + .zrn-api-tab + .zrn-api-tab::before {
  content: "API";
  position: absolute;
  top: -1.15rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #9090a8;
  white-space: nowrap;
}