/**
 * JumpBar (0.36.0, B-FP-475 § 14.5 nr. 11, B-FP-465): one row of pill links
 * to the sections of a long page. Same look as Public Views' knapperad
 * (`.ut-pv-front__bar` / `__pill` in ut-pv.css 0.115.0): 36 px pills with a
 * strong border, a 16 px line icon and a 13 px label, a hairline under the
 * row. When it does not fit, the row scrolls sideways (one row, no wrapping).
 * `data-ut-sticky="true"` keeps it at the top of the page while scrolling,
 * below `--ut-sticky-offset` (published by the navigation plugin). The pill
 * of the part you read carries `aria-current` (0.51.0, 4.17).
 *
 * Pill selectors are scoped under the root (0,2,0) so a host theme's
 * `a:hover` (0,1,1) cannot recolour them.
 *
 * Its own registered handle `ut-ui-core-jump-bar` (depends on `ut-ui-core`),
 * NOT part of dist/ui-core.css.
 */

.ut-ui-jump-bar {
  display: flex;
  gap: 0.5rem;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0 0 1.25rem;
  padding: 0.25rem 0 0.75rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--ut-border);
  scrollbar-width: thin;
  font-family: var(--ut-font-sans);
}

.ut-ui-jump-bar[data-ut-sticky="true"] {
  position: sticky;
  top: var(--ut-sticky-offset, 0px);
  z-index: 5;
  background: var(--ut-canvas);
}

.ut-ui-jump-bar .ut-ui-jump-bar__pill {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.375rem;
  box-sizing: border-box;
  min-height: 2.25rem;
  padding: 0.4375rem 0.8125rem;
  border: 1px solid var(--ut-border-strong);
  border-radius: var(--ut-radius-pill);
  background: var(--ut-surface);
  color: var(--ut-content);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}

.ut-ui-jump-bar .ut-ui-jump-bar__pill:hover {
  border-color: var(--ut-brand);
  color: var(--ut-content);
}

/* The part you are reading (0.51.0, 4.17): set by the scroll-spy in
   section-nav.js. Colour only, no bolder text, so the row never shifts while
   you scroll. */
.ut-ui-jump-bar .ut-ui-jump-bar__pill[aria-current] {
  border-color: var(--ut-brand);
  background: var(--ut-brand-surface);
  color: var(--ut-brand-strong);
}

.ut-ui-jump-bar .ut-ui-jump-bar__pill:focus-visible {
  outline: var(--ut-focus-ring-width) solid var(--ut-focus-ring-color);
  outline-offset: var(--ut-focus-ring-offset);
}

.ut-ui-jump-bar__icon {
  display: block;
  flex: none;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 640px) {
  .ut-ui-jump-bar {
    scrollbar-width: none;
  }
}

@media (forced-colors: active) {
  .ut-ui-jump-bar .ut-ui-jump-bar__pill {
    border: 1px solid CanvasText;
  }

  .ut-ui-jump-bar .ut-ui-jump-bar__pill[aria-current] {
    border-color: Highlight;
    color: Highlight;
  }
}