/* ===========================================================================
 * NV02 PageHeader · NV03 ScreenHeader · NV04 Stepper · NV05 Pagination ·
 * NV06 TabBar · NV07 NavTabs.
 *
 * NV01 (the top bar) is already in shells.css — it is chrome the layout owns,
 * identical on both platforms, and there is no reason to move it here.
 *
 * The header split is the clearest expression of the two postures: a desktop
 * page header is a 24px title with an action beside it (steep hierarchy); a
 * mobile screen header is a back arrow and a 16px title (flat hierarchy, with
 * 20px reserved for the subject's own name and 24px for the Spotlight hero).
 * ======================================================================== */

/* A grid, so the bar row and the subtitle can be separate children (D176)
   and still lay out as they always have: trail and title over the subtitle on
   the left, the actions centred against both on the right. The rail shell
   takes the bar row out and pins it (shells.css). */
.ui-page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-4);
  align-items: center;
  margin-bottom: var(--space-6);
}

.ui-page-header__bar { display: contents; }
.ui-page-header__heading { grid-column: 1; }
.ui-page-header__subtitle { grid-column: 1; }
.ui-page-header__action { grid-column: 2; grid-row: 1 / span 2; }

.ui-page-header__title {
  font-size: var(--type-display-size);
  line-height: var(--type-display-leading);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.ui-page-header__subtitle {
  margin-top: var(--space-1);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  color: var(--text-tertiary);
}

.ui-page-header__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-left: auto;
  flex: none;
}

/* --- NV03 Screen header (mobile) ---------------------------------------- */
.ui-screen-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-height-mobile);
  margin-bottom: var(--space-5);
}

.ui-screen-header__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--control-height-mobile);
  height: var(--control-height-mobile);
  margin-left: calc(var(--space-3) * -1);
  border-radius: var(--radius-pill);
  color: var(--text-primary);
  background: none;
  border: 0;
  cursor: pointer;
}

.ui-screen-header__back:hover { background: var(--surface-hover-item); }
.ui-screen-header__back:focus-visible { outline: var(--focus-ring-outline); outline-offset: var(--focus-ring-offset); outline-color: var(--focus-colour-neutral); }

.ui-screen-header__title {
  font-size: var(--type-body-lg-size);
  line-height: var(--type-body-lg-leading);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

/* The Spotlight hero is the one place 24px appears on the player surface, and
   it is centred with no back arrow — the moment owns the screen. */
.ui-screen-header--hero { justify-content: center; }
.ui-screen-header--hero .ui-screen-header__title {
  font-size: var(--type-display-size);
  line-height: var(--type-display-leading);
}

/* IN THE NATIVE APP the shell's own bar already carries the screen's title and
   its back button (D186), so a second title row underneath reads as a mistake
   and a web back arrow fights the native one. The title stays in the page for
   a screen reader, which cannot see native chrome; only the eye loses it. A
   header with an action keeps its row for the action alone. The hero is
   content, not chrome (the player's own name, the Spotlight), and stays. */
.hotwire-native .ui-screen-header:not(.ui-screen-header--hero) .ui-screen-header__back { display: none; }

.hotwire-native .ui-screen-header:not(.ui-screen-header--hero) .ui-screen-header__title {
  position: absolute;
  width: var(--border-width);
  height: var(--border-width);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hotwire-native .ui-screen-header:not(.ui-screen-header--hero):not(:has(.ui-page-header__action)) {
  min-height: 0;
  margin-bottom: 0;
}

/* --- NV04 Stepper -------------------------------------------------------
 * 28px circles on a 60px pitch, joined by a 2px connector 24px long sitting at
 * x=13 — half the circle minus half the rule. Three states: completed is a
 * gold fill with a dark check, current is a 2px gold ring around a gold
 * numeral, pending is a 30% ring around a 50% numeral.
 * --------------------------------------------------------------------- */
.ui-stepper { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }

.ui-stepper__step { display: flex; align-items: center; gap: var(--space-4); }

.ui-stepper__marker {
  width: var(--stepper-circle);
  height: var(--stepper-circle);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  font-weight: var(--font-weight-semibold);
}

.ui-stepper__label {
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

.ui-stepper__connector {
  width: var(--border-width-stepper);
  height: var(--stepper-connector);
  background: var(--divider-strong);
  margin-left: calc((var(--stepper-circle) - var(--border-width-stepper)) / 2);
}

.ui-stepper__step--complete .ui-stepper__marker {
  background: var(--gradient-gold);
  color: var(--text-on-gold);
}
.ui-stepper__step--complete .ui-stepper__label { color: var(--text-secondary); }

.ui-stepper__step--current .ui-stepper__marker {
  border: var(--border-width-stepper) solid var(--gold-100);
  color: var(--gold-100);
}
.ui-stepper__step--current .ui-stepper__label {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.ui-stepper__step--pending .ui-stepper__marker {
  border: var(--border-width-stepper) solid var(--border-pending);
  color: var(--text-pending);
}
.ui-stepper__step--pending .ui-stepper__label { color: var(--text-pending); }

/* A step this run of the wizard does not need (D152's Premium and Elite have no
   design step). Dashed, so it reads as "not applicable" rather than as a
   pending step the admin still owes — the rail must not ask for something the
   wizard will never show. */
.ui-stepper__step--skipped .ui-stepper__marker {
  border: var(--border-width-stepper) dashed var(--border-pending);
  color: var(--text-pending);
}
.ui-stepper__step--skipped .ui-stepper__label {
  color: var(--text-pending);
  text-decoration: line-through;
}

/* --- NV05 Pagination ---------------------------------------------------- */
.ui-pagination { display: flex; align-items: center; gap: var(--space-2); }

.ui-pagination__item {
  width: var(--pagination-size);
  height: var(--pagination-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  color: var(--text-tertiary);
  text-decoration: none;
  background: none;
  border: 0;
  font-family: var(--font-sans);
  cursor: pointer;
}

.ui-pagination__item:hover { background: var(--surface-hover-item); color: var(--text-primary); text-decoration: none; }
.ui-pagination__item:focus-visible { outline: var(--focus-ring-outline); outline-offset: var(--focus-ring-offset); outline-color: var(--focus-colour-neutral); }

/* The active page is the one place a SOLID gold fill appears without the
   gradient — it is 28px across and a gradient inside it is not legible. */
.ui-pagination__item[aria-current="page"] {
  background: var(--gold-100);
  color: var(--text-on-gold);
  font-weight: var(--font-weight-semibold);
}

.ui-pagination__arrow { color: var(--text-muted); }
.ui-pagination__arrow[aria-disabled="true"] { opacity: var(--opacity-disabled); pointer-events: none; }

/* --- NV06 Tab bar (player) ---------------------------------------------
 * New in this system — the mocks drew a five-screen native app with no bottom
 * navigation at all. Four tabs. The 11px label is the one type size below
 * --type-caption and it exists only here.
 * --------------------------------------------------------------------- */
.ui-tabbar {
  position: sticky;
  bottom: 0;
  display: flex;
  width: 100%;
  border-top: var(--border-width) solid var(--divider);
  padding-top: var(--space-2);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  /* Above the sticky CTA where a screen carries both. Same stacking context,
     so source order alone would decide it, and source order puts the CTA
     first — see app/views/layouts/player.html.erb. */
  z-index: var(--z-tabbar);
}

/* THE WASH AND THE BLUR LIVE ON A LAYER BEHIND THE BAR, NEVER ON THE BAR (D194).
   An element with a backdrop-filter is the "backdrop root" for everything
   inside it, so a raised surface opened from the bar (the admin's More menu)
   could blur only the bar's own empty interior and showed the page through it
   untouched. On this layer the bar looks the same, and what opens from it
   blurs the page. */
.ui-tabbar::before {
  content: "";
  position: absolute;
  /* Up under the bar's 1px top border, so the divider sits on the wash. */
  inset: calc(-1 * var(--border-width)) 0 0;
  z-index: -1;
  background: var(--surface-tabbar);
  backdrop-filter: blur(var(--overlay-blur));
  -webkit-backdrop-filter: blur(var(--overlay-blur));
}

.ui-tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-muted);
  text-decoration: none;
  min-height: var(--control-height-mobile);
}

.ui-tabbar__item:hover { text-decoration: none; color: var(--text-primary); }
.ui-tabbar__item:focus-visible { outline: var(--focus-ring-outline); outline-offset: var(--focus-ring-offset); outline-color: var(--focus-colour-neutral); border-radius: var(--radius-sm); }

.ui-tabbar__label { font-size: var(--tabbar-icon-label); line-height: var(--type-caption-leading); }

.ui-tabbar__item[aria-current="page"] { color: var(--gold-100); }
.ui-tabbar__item[aria-current="page"] .ui-tabbar__label { font-weight: var(--font-weight-semibold); }

/* --- NV07 Nav tabs (admin) ----------------------------------------------
 * New in this system. Every desktop frame draws a hamburger tile and no
 * visible destinations; that reads correctly for the six-destination product
 * the frames depict and badly for the two we ship. See NavTabsComponent for
 * the reasoning and the reversal cost.
 *
 * Lives in the top bar, to the right of the wordmark. The current tab is gold
 * text over a gold underline that sits ON the bar's existing 1px rule, so the
 * bar keeps its measured 76px height and the indicator costs no layout.
 *
 * D28: hover and active change the FILL, never the opacity. Only a disabled
 * control dims, and a nav tab is never disabled — it is either a destination
 * or it is not rendered at all.
 * --------------------------------------------------------------------- */
.ui-navtabs {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  /* No gap between tabs: each tab's own padding is the space. Whether they
     all fit is no longer a hope about the count: below the widths at the end
     of this section the bar compresses in two steps (D170). */
  gap: 0;
  margin-left: auto;
  min-width: 0;
}

.ui-navtabs__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  /* One line, always. At 960 "Create Troph-e" and "Club Profile" broke onto
     two, which made the bar read as a list of fragments; a tab is a name. */
  white-space: nowrap;
  flex: 0 0 auto;
}

.ui-navtabs__item:hover,
.ui-navtabs__item.is-hover {
  text-decoration: none;
  color: var(--text-primary);
  background: var(--surface-hover-item);
}

.ui-navtabs__item:active,
.ui-navtabs__item.is-active {
  background: var(--surface-selected);
}

/* outline, never box-shadow (D30). The ring is neutral gold here because the
   tab sits on the dark bar, not on a gold fill. */
.ui-navtabs__item:focus-visible,
.ui-navtabs__item.is-focus {
  outline: var(--focus-ring-outline);
  outline-offset: calc(-1 * var(--focus-ring-offset));
  outline-color: var(--focus-colour-neutral);
}

/* The indicator overlaps the top bar's own 1px underline rather than adding to
   it, so turning a tab current never moves the bar or the content below it. */
.ui-navtabs__item[aria-current="page"] {
  color: var(--gold-100);
}

.ui-navtabs__item[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: var(--space-2);
  right: var(--space-2);
  bottom: calc(-1 * var(--border-width));
  height: var(--border-width-navtab);
  background: var(--gold-100);
  border-radius: var(--radius-pill);
}

.ui-navtabs__label { font-weight: var(--font-weight-semibold); }

/* Below the drawn 960 there is no designed reflow (§10). Dropping the labels
   to their icons is the smallest honest thing that keeps both destinations
   reachable, rather than inventing a drawer nobody drew. The label stays in the
   accessibility tree — the same geometry .visually-hidden uses, so the tab is
   still announced by name when it is showing only a glyph. */
@media (max-width: 599px) {
  .ui-navtabs__label {
    position: absolute;
    width: var(--border-width);
    height: var(--border-width);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .ui-navtabs__item { padding: 0 var(--space-2); }
}

/* ---------------------------------------------------------------------------
 * THE BAR COMPRESSES BEFORE ANYTHING LEAVES THE SCREEN (D170). Nothing here
 * may push the account menu off the edge: it is the only way to sign out.
 *
 *   every tab drops to its icon (the label stays the link's accessible name,
 *   and `title` names it on hover) once the role's frame can no longer hold
 *   the labels — below 1100px for a platform admin's 1280 frame, below 960px
 *   for a club admin's, whose 960 frame is the same bar at every wider window;
 *   below 900px the tabs marked `more` leave the bar for its "More" menu.
 *
 * Measured, not guessed, when the platform admin had seven tabs: seven
 * labelled tabs, the brand, the feedback button and the account menu needed
 * about 1080px; a club admin's five labelled tabs with the club's name on the
 * account menu fill the 960 bar to within 12px; seven icons needed about
 * 620px; four icons and "More" fit 600px. D173 folded Studio and Prompts into
 * one tab, so the platform admin's breakpoints are now a tab's width
 * conservative; they were left where they were rather than re-measured.
 * ------------------------------------------------------------------------- */
.ui-navtabs__more { display: none; align-self: center; }

/* The menu stands in for a tab that is current, so it carries the same gold. */
.ui-navtabs__more.is-current .ui-button--icon { color: var(--gold-100); }

@media (max-width: 959px) {
  .shell--admin .ui-navtabs__label {
    position: absolute;
    width: var(--border-width);
    height: var(--border-width);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (max-width: 899px) {
  .ui-navtabs__item--more { display: none; }
  .ui-navtabs__more { display: flex; }
}

/* The folded bar, forced on for the catalogue, which renders at full width. */
.ui-navtabs--force-more .ui-navtabs__item--more { display: none; }
.ui-navtabs--force-more .ui-navtabs__more { display: flex; }

/* --- The section variant --------------------------------------------------
 * The same tabs in the page rather than the bar: the halves of one area (the
 * Prompts area's Studio and Library, D173), over a rule of its own. Two or
 * three tabs, so the bar's compression never applies; the labels stay. */
.ui-navtabs--section {
  margin-left: 0;
  margin-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--border-default);
}

.ui-navtabs--section .ui-navtabs__item {
  padding: var(--space-2) var(--space-3);
}

.ui-navtabs--section .ui-navtabs__label {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
}

/* The narrow behaviour above, forced on for the catalogue. The media query
   cannot be demonstrated at 960 and a state nobody can see in the catalogue is
   a state nobody reviews. */
.ui-navtabs--force-narrow .ui-navtabs__label {
  position: absolute;
  width: var(--border-width);
  height: var(--border-width);
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.ui-navtabs--force-narrow .ui-navtabs__item { padding: 0 var(--space-2); }

/* --- NV02 Page header: the trail (D170) ------------------------------------
 * The pages above this one, small and quiet above the title. Links in the
 * secondary text colour, not gold: the trail is wayfinding, and gold is kept
 * for the one action a page wants pressed. */
.ui-page-header__heading { min-width: 0; }

.ui-page-header__trail ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: 0 0 var(--space-1);
  padding: 0;
  list-style: none;
}

.ui-page-header__trail li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--text-tertiary);
}

.ui-page-header__crumb {
  color: var(--text-secondary);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-leading);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.ui-page-header__crumb:hover { color: var(--text-primary); text-decoration: underline; }

.ui-page-header__crumb:focus-visible {
  outline: var(--focus-ring-outline);
  outline-color: var(--focus-colour-neutral);
  outline-offset: var(--focus-ring-offset);
}

/* --- NV08 Page (D170) ------------------------------------------------------
 * The body of an admin page. `full` fills the frame; `narrow` is a 640 column
 * on the title's left edge with the rail beside it, stacking under it when the
 * window cannot hold both. The stack's gap is the auth-stack's it replaces, so
 * pages moved onto it keep their rhythm. */
.ui-page__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}

.ui-page--narrow .ui-page__body {
  grid-template-columns: minmax(0, var(--page-narrow-width));
}

.ui-page--narrow.ui-page--with-rail .ui-page__body {
  grid-template-columns: minmax(0, var(--page-narrow-width)) minmax(0, var(--page-rail-width));
}

.ui-page--full.ui-page--with-rail .ui-page__body {
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--page-rail-width));
}

.ui-page__main,
.ui-page__rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

@media (max-width: 899px) {
  .ui-page--with-rail .ui-page__body,
  .ui-page--narrow.ui-page--with-rail .ui-page__body,
  .ui-page--full.ui-page--with-rail .ui-page__body {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- NV09 Section heading (D170) ------------------------------------------- */
.ui-section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.ui-section-heading__text { min-width: 0; }

.ui-section-heading__title {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

.ui-section-heading--section .ui-section-heading__title {
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-leading);
}

.ui-section-heading--group .ui-section-heading__title {
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-leading);
}

.ui-section-heading__description {
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--type-body-size);
  line-height: var(--type-body-leading);
}

.ui-section-heading__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* --- NV10 Side nav (D176) ---------------------------------------------------
 * The platform admin's rail of destinations: grouped under eyebrow labels,
 * one level of children shown only under the current item, a small count
 * where something waits. Current is a filled row, not a 2px underline: the
 * one thing on the rail a reader must never miss. */
.ui-sidenav {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.ui-sidenav__label {
  padding: 0 var(--space-3);
  margin-bottom: var(--space-2);
  font-size: var(--type-eyebrow-size);
  line-height: var(--type-eyebrow-leading);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
  color: var(--text-tertiary);
}

.ui-sidenav__list,
.ui-sidenav__children {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ui-sidenav__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--rail-item-height);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--easing-standard),
              color var(--duration-fast) var(--easing-standard);
}

.ui-sidenav__item .icon { color: var(--text-tertiary); flex: none; }

/* A POST item (D179) is a button inside a form: drawn exactly as a link. */
.ui-sidenav__form { display: block; margin: 0; }
button.ui-sidenav__item {
  width: 100%;
  border: 0;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.ui-sidenav__text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ui-sidenav__item:hover,
.ui-sidenav__item.is-hover { background: var(--surface-hover-item); color: var(--text-primary); }
.ui-sidenav__item.is-current { background: var(--surface-selected); color: var(--text-primary); }
.ui-sidenav__item.is-current .icon { color: var(--gold-100); }

.ui-sidenav__children { margin-top: var(--space-1); }

/* Indented to the parent's label, so a child reads as part of it. The current
   child is marked by weight and a gold dot, not a second fill: one filled row
   per rail. */
.ui-sidenav__child {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--rail-child-height);
  padding-left: calc(var(--space-3) + var(--icon-md) + var(--space-3));
  padding-right: var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  font-size: var(--type-body-size);
  text-decoration: none;
}

.ui-sidenav__child:hover { color: var(--text-primary); background: var(--surface-hover-item); }
.ui-sidenav__child.is-current { color: var(--text-primary); font-weight: var(--font-weight-semibold); }

.ui-sidenav__child.is-current::before {
  content: "";
  width: var(--rail-dot-size);
  height: var(--rail-dot-size);
  margin-left: calc(-1 * (var(--space-2) + var(--rail-dot-size)));
  border-radius: var(--radius-pill);
  background: var(--gold-100);
}

.ui-sidenav__item:focus-visible,
.ui-sidenav__item.is-focus,
.ui-sidenav__child:focus-visible {
  outline: var(--focus-ring-outline);
  outline-offset: var(--focus-ring-offset);
  outline-color: var(--focus-colour-neutral);
}

.ui-sidenav__count {
  flex: none;
  min-width: var(--count-min-width);
  height: var(--pill-height-sm);
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--text-primary);
  font-size: var(--type-eyebrow-size);
  line-height: var(--pill-height-sm);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Gold for a count that wants a response (new feedback): the warning wash,
   since warning has no colour of its own (D27). */
.ui-sidenav__count--gold {
  background: var(--warning-wash);
  box-sizing: border-box;
  border: var(--border-width) solid var(--warning-border);
  color: var(--gold-100);
  line-height: calc(var(--pill-height-sm) - 2 * var(--border-width));
}

/* --- NV11 Segmented control (D177) -----------------------------------------
 * Which slice of a list: one group of pills, the current one filled. Not a
 * filter chip and not a toggle — a chip had been all three. */
.ui-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--surface-1);
}

.ui-segmented__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--segmented-height);
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--easing-standard),
              color var(--duration-fast) var(--easing-standard);
}

.ui-segmented__item:hover,
.ui-segmented__item.is-hover { background: var(--surface-hover-item); color: var(--text-primary); }
.ui-segmented__item.is-current { background: var(--surface-3); color: var(--text-primary); }

.ui-segmented__item:focus-visible,
.ui-segmented__item.is-focus {
  outline: var(--focus-ring-outline);
  outline-offset: var(--focus-ring-offset);
  outline-color: var(--focus-colour-neutral);
}

.ui-segmented__count {
  font-size: var(--type-caption-size);
  font-weight: var(--font-weight-regular);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.ui-segmented__item.is-current .ui-segmented__count { color: var(--text-secondary); }

/* --- NV12 Toolbar (D177) ----------------------------------------------------
 * The one row above a list: the slice on the left, search and filters on the
 * right. No wash of its own: on this palette a filter card is one surface too
 * many above a table that already has one. */
.ui-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.ui-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

.ui-toolbar__filters .ui-select { width: var(--toolbar-filter-width); }
.ui-toolbar__filters .ui-search { width: var(--toolbar-search-width); }

.ui-toolbar__clear {
  color: var(--text-gold);
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.ui-toolbar__clear:hover { text-decoration: underline; }
.ui-toolbar__clear:focus-visible {
  outline: var(--focus-ring-outline);
  outline-offset: var(--focus-ring-offset);
  outline-color: var(--focus-colour-neutral);
}