/**
 * Platform-wide horizontal nav / pill / section rails.
 * Fixes left-clustered flex-wrap strips on wide viewports (control plane,
 * portal section nav, studio spine, segmented tabs, page toolbars).
 *
 * Adopt: class="rmc-horizontal-nav-rail" on any full-width horizontal nav row.
 * Navigation rows center on xl+; contextual / paired chips align end on xl+.
 */

/* ---- Shared rail container ------------------------------------------------ */

.rmc-horizontal-nav-rail,
.cp-primary-nav,
.tenant-studio-spine,
.cp-section-nav,
.rmc-section-nav--horizontal,
.rmc-section-nav.rmc-horizontal-nav-rail .rmc-section-nav__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  justify-content: flex-start;
}

.rmc-horizontal-nav-rail::-webkit-scrollbar,
.cp-primary-nav::-webkit-scrollbar,
.tenant-studio-spine::-webkit-scrollbar {
  height: 4px;
}

.rmc-horizontal-nav-rail::-webkit-scrollbar-thumb,
.cp-primary-nav::-webkit-scrollbar-thumb,
.tenant-studio-spine::-webkit-scrollbar-thumb {
  background: var(--hairline);
  border-radius: var(--radius-pill, 999px);
}

.rmc-horizontal-nav-rail > *,
.cp-primary-nav > *,
.tenant-studio-spine > a,
.tenant-studio-spine > span {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.rmc-horizontal-nav-rail .nav.nav-pills {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin-bottom: 0;
  padding-left: 0;
}

.rmc-horizontal-nav-rail .nav.nav-pills .nav-item {
  flex: 0 0 auto;
}

/* Wide: center primary product / section navigation (balanced chrome) */
@media (min-width: 1200px) {
  .cp-primary-nav:not(.rmc-horizontal-nav-rail--contextual),
  .tenant-studio-spine,
  .cp-section-nav,
  .rmc-section-nav--horizontal,
  .rmc-horizontal-nav-rail:not(.rmc-horizontal-nav-rail--contextual):not(
      .rmc-horizontal-nav-rail--actions
    ) {
    flex-wrap: wrap;
    overflow-x: visible;
    justify-content: center;
    max-width: min(72rem, 100%);
    margin-inline: auto;
    padding-inline: var(--space-5, 1.25rem);
  }
}

/* Secondary workspace strip — quieter; spine hidden when topbar dropdown exists */
.rmc-horizontal-nav-rail--secondary,
.rmc-operator-workspace-nav {
  background: color-mix(in oklab, var(--surface-canvas, #0b1220) 72%, transparent);
  border-block-end: 1px solid var(--hairline);
  padding-block: 0.35rem;
}

@media (min-width: 1200px) {
  .rmc-operator-workspace-nav .rmc-operator-workspace-nav__spine-item {
    display: none;
  }

  /* Hide empty secondary row when only spine links (dropdown covers workspace) */
  .rmc-operator-workspace-nav:not(:has(.cp-primary-nav__pill--paired)) {
    display: none;
  }

  /* Contextual paired chips (e.g. Open platform admin) use the right rail */
  .rmc-operator-workspace-nav:has(.cp-primary-nav__pill--paired) {
    justify-content: flex-end;
    flex-wrap: nowrap;
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--space-5, 1.25rem);
  }
}

/* Page action / toolbar rows — start left, primary actions cluster end */
.rmc-horizontal-nav-rail--actions,
.rmc-os-action-bar.rmc-horizontal-nav-rail,
.action-bar.rmc-horizontal-nav-rail[role="toolbar"] {
  justify-content: flex-start;
  flex-wrap: wrap;
  overflow-x: visible;
}

@media (min-width: 992px) {
  .rmc-horizontal-nav-rail--actions {
    justify-content: space-between;
  }

  .rmc-horizontal-nav-rail--actions > .rmc-horizontal-nav-rail__end,
  .rmc-horizontal-nav-rail--actions > :last-child:not(:first-child) {
    margin-inline-start: auto;
  }
}

/* Segmented controls already scroll — align center when they fit */
@media (min-width: 1200px) {
  .rmc-segmented.rmc-segmented--scrollable {
    justify-content: center;
    margin-inline: auto;
    max-width: min(72rem, 100%);
  }
}