/* Sticky in-page nav + tab indicator (Phase D) */

.mc-chrome-anchor-shell {
  position: sticky;
  top: calc(var(--mc-nav-height, 64px) + 12px);
  z-index: 35;
  margin: 0 0 24px;
  padding: 2px 0;
  transition: top 0.32s ease;
}

body.mc-chrome-compact .mc-chrome-anchor-shell {
  top: calc(var(--mc-nav-height, 64px) + 8px);
}

.mc-chrome-anchor-shell.is-stuck {
  padding-bottom: 4px;
}

.mc-chrome-anchor-shell.mc-chrome-tabs-shell--compact .mc-chrome-anchor-nav {
  min-height: 40px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.mc-chrome-tabs {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.mc-chrome-tabs--anchor {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 999px;
}

.mc-chrome-tabs--anchor::-webkit-scrollbar {
  display: none;
}

.mc-tab-indicator {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  width: 0;
  height: 0;
  border-radius: 999px;
  background: var(--mc-tab-indicator-bg, var(--mc-chrome-indicator-bg, rgba(15, 23, 42, 0.08)));
  border: 1px solid var(--mc-tab-indicator-ring, var(--mc-chrome-indicator-ring, rgba(255, 255, 255, 0.62)));
  box-shadow: var(--mc-tab-indicator-shadow, var(--mc-chrome-indicator-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.55)));
  opacity: 0;
  transform: translate3d(0, 0, 0);
  pointer-events: none;
  will-change: transform, width, height;
}

.mc-chrome-tabs [role="tab"],
.mc-chrome-tabs .mc-assets-video-tab,
.mc-chrome-anchor-nav__link {
  position: relative;
  z-index: 1;
}

.mc-chrome-anchor-nav__link {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: 600 13px/1.2 var(--mc-font-ui, "DM Sans", system-ui, sans-serif);
  color: var(--mc-tab-ink-muted, rgba(15, 23, 42, 0.56));
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease;
}

.mc-chrome-anchor-nav__link:hover,
.mc-chrome-anchor-nav__link:focus-visible {
  color: var(--mc-tab-ink, #0f172a);
  outline: none;
}

.mc-chrome-anchor-nav__link.is-active,
.mc-chrome-anchor-nav__link[aria-selected="true"] {
  color: var(--mc-tab-ink, #0f172a);
}

.mc-chrome-tabs--ready .mc-id-pv-stories__tab.is-active::after,
.mc-chrome-tabs--ready .mc-assets-video-tab.is-active {
  border-bottom-color: transparent;
}

.mc-chrome-tabs--ready.mc-id-pv-stories__tabs {
  border-bottom-color: transparent;
}

.mc-chrome-tabs--ready.mc-chrome-tabs--underline.mc-id-pv-stories__tabs,
.mc-chrome-tabs--ready.mc-chrome-tabs--underline.mc-assets-video-tabs {
  border-bottom-color: rgba(17, 17, 16, 0.1);
}

.mc-chrome-tabs--underline {
  --mc-tab-underline-ink: #111110;
}

.mc-chrome-tabs--underline .mc-tab-indicator {
  border-radius: 0;
  background: var(--mc-tab-underline-ink);
  border: none;
  box-shadow: none;
}

.mc-chrome-tabs--ready:is(:hover, :focus-within).mc-chrome-tabs--underline .mc-tab-indicator {
  background: var(--mc-tab-underline-ink);
  border: none;
  box-shadow: none;
}

html.mc-theme-night .mc-chrome-tabs--underline {
  --mc-tab-underline-ink: var(--mc-theme-ink, #f2f1ed);
}

html.mc-theme-night .mc-chrome-tabs--ready.mc-chrome-tabs--underline.mc-id-pv-stories__tabs,
html.mc-theme-night .mc-chrome-tabs--ready.mc-chrome-tabs--underline.mc-assets-video-tabs {
  border-bottom-color: var(--mc-theme-border, rgba(255, 255, 255, 0.12));
}

.mc-chrome-tabs--ready .mc-id-pv-stories__tab.is-active::after {
  display: none;
}

.mc-chrome-tabs--ready.mc-assets-video-tabs {
  border-bottom-color: transparent;
}

.mc-chrome-tabs--ready .mc-assets-video-tab.is-active {
  color: var(--mc-tab-ink, var(--mc-ink));
}

.mc-chrome-tabs--ready.mc-id-pv-stories__tabs .mc-id-pv-stories__tab.is-active {
  color: var(--mc-tab-ink, #111110);
}

.mc-chrome-tabs--ready:hover .mc-tab-indicator,
.mc-chrome-tabs--ready:focus-within .mc-tab-indicator {
  background: var(--mc-tab-indicator-bg, var(--mc-chrome-indicator-bg, rgba(15, 23, 42, 0.08)));
  border-color: var(--mc-tab-indicator-ring, var(--mc-chrome-indicator-ring, rgba(255, 255, 255, 0.62)));
  box-shadow: var(--mc-tab-indicator-shadow, var(--mc-chrome-indicator-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.55)));
}

.mc-ab-doc--purpose .mc-chrome-anchor-shell,
.mc-id-doc--competencies-hub .mc-chrome-anchor-shell,
.mc-gl-page--principles-hub .mc-chrome-anchor-shell {
  max-width: var(--mc-content-max, 1067px);
}

body.mc-chrome-tone-dark .mc-chrome-anchor-nav__link {
  --mc-tab-ink-muted: rgba(255, 255, 255, 0.58);
  --mc-tab-ink: rgba(255, 255, 255, 0.94);
}

html.mc-theme-night .mc-chrome-tabs--anchor {
  --mc-tab-indicator-bg: rgba(255, 255, 255, 0.1);
  --mc-tab-indicator-ring: rgba(255, 255, 255, 0.16);
  --mc-tab-indicator-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --mc-tab-indicator-bg-hover: rgba(255, 255, 255, 0.14);
  --mc-tab-indicator-ring-hover: rgba(255, 255, 255, 0.22);
}

html.mc-theme-night .mc-chrome-anchor-nav__link {
  --mc-tab-ink-muted: rgba(242, 241, 237, 0.58);
  --mc-tab-ink: rgba(242, 241, 237, 0.94);
}

body.mc-chrome-tone-dark .mc-chrome-tabs--ready.mc-id-pv-stories__tabs .mc-id-pv-stories__tab.is-active {
  --mc-tab-ink: rgba(255, 255, 255, 0.94);
}

@media (prefers-reduced-motion: reduce) {
  .mc-tab-indicator {
    transition: none !important;
  }

  .mc-chrome-anchor-shell {
    transition: none;
  }
}

@media (max-width: 1023px) {
  .mc-chrome-tabs--anchor {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
}

@media (max-width: 720px) {
  .mc-chrome-anchor-nav__link {
    padding: 7px 12px;
    font-size: 12px;
  }
}