/* Pill-shaped segmented tab switcher -- one flat surface with a raised
   "chip" for whichever tab is active. Used by the two-way Articles <->
   Learning paths catalogue switch (articles/_catalog_switch.html, <a>
   links) and the article/assessment author forms' step switcher
   (Bootstrap tab <button>s).

   Extracted here once assessments became the third consumer, per
   agent_docs/frontend-css-conventions.md's "extract on the third app"
   rule -- previously duplicated in articles/css/articles.css (and
   descended from billing.css's old .pricing-tabs, whose white chip was
   retired on 2026-10-21 when the pricing page took this pill too).

   max-width/overflow-x: the bar can hold several tabs with long labels --
   more than fits a phone viewport. Rather than wrap into a broken second
   row or push the page into a horizontal scroll, the pill is capped at
   the content width and scrolls internally when its buttons don't fit;
   the parent's justify-content: center still centers it when they do.

   background/border: the track fill has to read as a bounded control on
   any page, not just a white one -- a page can carry a tinted background
   via content.PageBackground (e.g. the articles list's warm cream
   #f8f2e9), against which the old near-white #f2f2f2 fill was
   indistinguishable and the inactive tab looked like it was floating on
   the page. The slightly deeper fill plus a hairline border keep the
   pill's edge visible against both white and a tint. */
.segmented-tabs {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background-color: #e9ecef;
  border: 1px solid #ced4da;
  border-radius: 980px;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.segmented-tabs::-webkit-scrollbar {
  display: none;
}

/* Opt-in full-width variant (reported directly: the assessment builder
   rail's own Steps/Tools/Help switch, _shell.html) -- every other
   consumer of .segmented-tabs is a short, content-sized pill, centred or
   left-aligned in a wider row; this one is the rail's *only* row, so it
   stretches edge to edge instead, each tab sharing the space equally. */
.segmented-tabs--full {
  display: flex;
  width: 100%;
}

.segmented-tabs--full .segmented-tabs__btn {
  flex: 1 1 0;
}

.segmented-tabs__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border: none;
  background: none;
  padding: 0.5rem 1.75rem;
  border-radius: 980px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #495057;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

/* .badge's own line-height sits it a couple px off the button label's
   baseline when they're plain inline siblings -- the flex row above plus
   this reset (the gap already supplies the ms-1 spacing) keeps the count
   pill's digits vertically centered against the tab label. !important
   beats the badge's ms-1 utility (itself !important). */
.segmented-tabs__btn .badge {
  margin-left: 0 !important;
}

/* The two-way catalogue switch (articles/_catalog_switch.html) renders its
   pills as <a> links, not <button>s -- strip the default underline and keep
   them centred; colour + hover are inherited from the rule above. */
a.segmented-tabs__btn {
  text-decoration: none;
  text-align: center;
}

/* Tighten the horizontal padding on narrow viewports so the common
   two/three-tab cases usually fit without needing the scroll above. */
@media (max-width: 575.98px) {
  .segmented-tabs {
    gap: 0.125rem;
  }

  .segmented-tabs__btn {
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
  }
}

.segmented-tabs__btn:hover {
  color: #1d1d1f;
}

/* A disabled tab (e.g. "Publishing" once the article/assessment is
   already live) stays visible but reads as unavailable and can't be
   activated -- the author-form step scripts also drop it from
   Previous/Next navigation. */
.segmented-tabs__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.segmented-tabs__btn:disabled:hover {
  color: #495057;
}

.segmented-tabs__btn.active {
  background-color: #0067b8;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Each tab's count badge is Bootstrap's plain .text-bg-secondary (gray)
   -- too close in tone to .active's own blue fill to read clearly once
   a tab is selected, so it's inverted to white-on-blue here instead.
   !important beats .text-bg-secondary (itself !important). */
.segmented-tabs__btn.active .badge {
  background-color: #fff !important;
  color: #0067b8 !important;
}