/* Copyright Ayers Electronics Inc. All rights reserved. */
/* guide rebuild controls. */

/* ---- the guide rebuild: the segmented control, the programme dialog, fixed card boxes ---- */
.seg {
  position: relative;
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  flex: none;
}
/* One indicator per .seg, on both tiers (the pages, and a page's own categories): it slides and
   resizes to the active segment so selection flows rather than popping. js/guide.js's
   positionSeg writes --seg-x/--seg-w from the active button's own offsetLeft/offsetWidth, so the
   fill holds for any number of segments and re-seats itself when the row reflows. The buttons ride
   transparent above it. */
.seg-ind {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--seg-w, 0);
  transform: translateX(var(--seg-x, 0));
  background: var(--accent);
  border-radius: 0;
  transition:
    transform 260ms cubic-bezier(0.4, 0, 0.2, 1),
    width 260ms cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}
/* First seat on open, and a viewer who asked for no motion, take the fill without the slide. */
.seg-ind.no-anim {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .seg-ind {
    transition: none;
  }
}
.seg-btn {
  position: relative;
  z-index: 1;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: var(--type-label);
  letter-spacing: 0.12em;
  padding: 6px 14px;
  min-width: 0;
}
/* A true segment control: only its outer ends round, at the control's own corner inside its 1px
   border. js/guide.js positionSeg marks the first and last showing tabs, and the fill with the mark
   of the tab under it, so the fill and the focus ring take the same corners. */
.seg-btn[data-edge="first"],
.seg-ind[data-edge="first"] {
  border-radius: calc(var(--radius) - 1px) 0 0 calc(var(--radius) - 1px);
}
.seg-btn[data-edge="last"],
.seg-ind[data-edge="last"] {
  border-radius: 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0;
}
.seg-btn[data-edge="only"],
.seg-ind[data-edge="only"] {
  border-radius: calc(var(--radius) - 1px);
}
.seg-btn.active {
  color: var(--on-accent);
  font-weight: 600;
} /* the accent under it is the indicator, not a per-button fill; its ink is the bird's (tokens.css --on-accent) */
/* The fill marks the current page; focus is the white ring drawn inside the tab, so the focused tab
   and the lit one share one shape: the tab's own box, with the control's corners at its ends. */
#guide .seg-btn:focus {
  z-index: 2;
  box-shadow: var(--focus-ring-inset);
}
/* The head's back arrow: a small fixed-width control at the row's left, the glyph large enough to
   read as a direction. A fixed shape so the tabs beside it never shift as the page name changes. */