/**
 * Unified nextgen glass capsule header — single source of truth.
 * Loaded last via DesignStyles so it wins over reference/tasks/prod-parity.
 */

/* -------------------------------------------------------------------------- */
/* Tokens — classic (default / light)                                         */
/* -------------------------------------------------------------------------- */

html[data-design-scene="true"] .site-scene,
html[data-design-scene="true"] .site-scene[data-theme="classic"] {
  --header-glass-bg:
    linear-gradient(
      135deg,
      color-mix(in srgb, #ffffff 78%, transparent),
      color-mix(in srgb, #e8f0f7 62%, transparent)
    );
  --header-glass-bg-solid: color-mix(in srgb, #f4f8fb 92%, #c9d9e8 8%);
  --header-glass-border: color-mix(in srgb, #6b8aab 28%, transparent);
  --header-glass-highlight: color-mix(in srgb, #ffffff 55%, transparent);
  --header-glass-shadow:
    0 16px 42px color-mix(in srgb, #0b1c2c 12%, transparent),
    inset 0 1px 0 var(--header-glass-highlight);
  --header-glass-shadow-scrolled:
    0 18px 48px color-mix(in srgb, #0b1c2c 16%, transparent),
    inset 0 1px 0 var(--header-glass-highlight);
  --header-glass-blur: blur(18px) saturate(150%);
  --header-glass-text: #13212c;
  --header-glass-muted: #405665;
  --header-glass-control-bg: color-mix(in srgb, #ffffff 42%, transparent);
  --header-glass-control-border: color-mix(in srgb, #6b8aab 22%, transparent);
  --header-glass-control-hover: color-mix(in srgb, #1769e0 10%, #ffffff 90%);
  --header-glass-active-bg: color-mix(in srgb, #1769e0 12%, transparent);
  --header-glass-active-border: color-mix(in srgb, #1769e0 28%, transparent);
  --header-glass-focus: color-mix(in srgb, #1769e0 70%, transparent);
  --header-glass-accent: #1769e0;
}

html[data-design-scene="true"] .site-scene[data-theme="poisoned"] {
  --header-glass-bg:
    linear-gradient(
      135deg,
      color-mix(in srgb, #3a1f5c 72%, transparent),
      color-mix(in srgb, #1a0d2e 58%, transparent)
    );
  --header-glass-bg-solid: color-mix(in srgb, #2a1644 94%, #b760ff 6%);
  --header-glass-border: color-mix(in srgb, #b760ff 32%, transparent);
  --header-glass-highlight: color-mix(in srgb, #f4e8ff 18%, transparent);
  --header-glass-shadow:
    0 18px 48px color-mix(in srgb, #090412 42%, transparent),
    inset 0 1px 0 var(--header-glass-highlight);
  --header-glass-shadow-scrolled:
    0 20px 54px color-mix(in srgb, #090412 52%, transparent),
    inset 0 1px 0 var(--header-glass-highlight);
  --header-glass-blur: blur(18px) saturate(155%);
  --header-glass-text: #fbf4ff;
  --header-glass-muted: #d8cce8;
  --header-glass-control-bg: color-mix(in srgb, #ffffff 8%, transparent);
  --header-glass-control-border: color-mix(in srgb, #b760ff 28%, transparent);
  --header-glass-control-hover: color-mix(in srgb, #b760ff 16%, transparent);
  --header-glass-active-bg: color-mix(in srgb, #b760ff 18%, transparent);
  --header-glass-active-border: color-mix(in srgb, #b760ff 40%, transparent);
  --header-glass-focus: color-mix(in srgb, #b760ff 72%, transparent);
  --header-glass-accent: #b760ff;
}

html[data-design-scene="true"] .site-scene[data-theme="immolated"] {
  --header-glass-bg:
    linear-gradient(
      135deg,
      color-mix(in srgb, #3a1418 72%, transparent),
      color-mix(in srgb, #16090b 58%, transparent)
    );
  --header-glass-bg-solid: color-mix(in srgb, #2a1014 94%, #ff3d1f 6%);
  --header-glass-border: color-mix(in srgb, #ff3d1f 30%, transparent);
  --header-glass-highlight: color-mix(in srgb, #fff3e9 14%, transparent);
  --header-glass-shadow:
    0 18px 48px color-mix(in srgb, #080203 44%, transparent),
    inset 0 1px 0 var(--header-glass-highlight);
  --header-glass-shadow-scrolled:
    0 20px 54px color-mix(in srgb, #080203 54%, transparent),
    inset 0 1px 0 var(--header-glass-highlight);
  --header-glass-blur: blur(18px) saturate(150%);
  --header-glass-text: #fff3e9;
  --header-glass-muted: #f0d2bc;
  --header-glass-control-bg: color-mix(in srgb, #ffffff 7%, transparent);
  --header-glass-control-border: color-mix(in srgb, #ff3d1f 26%, transparent);
  --header-glass-control-hover: color-mix(in srgb, #ff3d1f 14%, transparent);
  --header-glass-active-bg: color-mix(in srgb, #ff3d1f 16%, transparent);
  --header-glass-active-border: color-mix(in srgb, #ff3d1f 38%, transparent);
  --header-glass-focus: color-mix(in srgb, #ff3d1f 70%, transparent);
  --header-glass-accent: #ff3d1f;
}

html[data-design-scene="true"] .site-scene[data-theme="flayed"] {
  --header-glass-bg:
    linear-gradient(
      135deg,
      color-mix(in srgb, #0d2e21 74%, transparent),
      color-mix(in srgb, #06150f 60%, transparent)
    );
  --header-glass-bg-solid: color-mix(in srgb, #0a2419 94%, #93f23f 6%);
  --header-glass-border: color-mix(in srgb, #2de1b2 30%, transparent);
  --header-glass-highlight: color-mix(in srgb, #f4faf5 12%, transparent);
  --header-glass-shadow:
    0 18px 48px color-mix(in srgb, #020806 44%, transparent),
    inset 0 1px 0 var(--header-glass-highlight);
  --header-glass-shadow-scrolled:
    0 20px 54px color-mix(in srgb, #020806 54%, transparent),
    inset 0 1px 0 var(--header-glass-highlight);
  --header-glass-blur: blur(18px) saturate(150%);
  --header-glass-text: #f4faf5;
  --header-glass-muted: #b7c6bc;
  --header-glass-control-bg: color-mix(in srgb, #113a29 55%, transparent);
  --header-glass-control-border: color-mix(in srgb, #2de1b2 26%, transparent);
  --header-glass-control-hover: color-mix(in srgb, #93f23f 14%, transparent);
  --header-glass-active-bg: color-mix(in srgb, #93f23f 16%, transparent);
  --header-glass-active-border: color-mix(in srgb, #93f23f 38%, transparent);
  --header-glass-focus: color-mix(in srgb, #b1ff58 70%, transparent);
  --header-glass-accent: #93f23f;
}

/* -------------------------------------------------------------------------- */
/* Capsule chrome                                                             */
/* -------------------------------------------------------------------------- */

/*
 * Floating offset via host padding (BFC), not collapsing margin-top on the
 * capsule. Collapsing margin exposed the browser dark canvas (#121212) above
 * .site-scene when html/body are transparent on design routes.
 */
html[data-design-scene="true"] .site-scene .header-glass-host {
  position: relative;
  display: flow-root;
  width: 100%;
  padding-top: 16px;
  margin: 0;
  background: transparent;
}

html[data-design-scene="true"] .site-scene .site-header.platform-header {
  --header-capsule-height: 70px;
  position: sticky !important;
  top: 16px !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 40 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  justify-content: unset !important;
  justify-items: unset !important;
  gap: 18px !important;
  width: min(1360px, calc(100% - 32px)) !important;
  max-width: 1360px !important;
  min-height: var(--header-capsule-height) !important;
  height: var(--header-capsule-height) !important;
  margin: 0 auto !important;
  padding: 0 22px !important;
  border: 1px solid var(--header-glass-border) !important;
  border-radius: 999px !important;
  border-bottom: 1px solid var(--header-glass-border) !important;
  background: var(--header-glass-bg) !important;
  background-image: var(--header-glass-bg) !important;
  box-shadow: var(--header-glass-shadow) !important;
  backdrop-filter: var(--header-glass-blur) !important;
  -webkit-backdrop-filter: var(--header-glass-blur) !important;
  color: var(--header-glass-text) !important;
  overflow: visible !important;
  isolation: isolate;
  transform: none !important;
}

html[data-design-scene="true"] .site-scene .site-header.platform-header::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(
    180deg,
    var(--header-glass-highlight),
    transparent 42%
  );
  opacity: 0.55;
}

html[data-design-scene="true"] .site-scene .site-header.platform-header > * {
  position: relative;
  z-index: 1;
}

html[data-design-scene="true"] .site-scene .site-header.platform-header:has(
    .mobile-menu-button[aria-expanded="true"]
  ) {
  z-index: 120 !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-design-scene="true"] .site-scene .site-header.platform-header {
    background: var(--header-glass-bg-solid) !important;
    background-image: none !important;
  }
}

/* Kill legacy long hairline under header from reference theme hooks */
html[data-design-scene="true"] .site-scene[data-theme] .site-header.platform-header {
  border-bottom-color: var(--header-glass-border) !important;
}

/* Catalog / training must not reshape the capsule */
html[data-design-scene="true"] .task-catalog-scene .site-header.platform-header,
html[data-design-scene="true"] .task-training-scene .site-header.platform-header,
html[data-design-scene="true"] .site-scene .site-header.platform-header {
  border-radius: 999px !important;
}

/* -------------------------------------------------------------------------- */
/* Brand / nav / actions — vertical center                                    */
/* -------------------------------------------------------------------------- */

html[data-design-scene="true"] .site-scene .site-header.platform-header .header-brand-group{display:flex;align-items:center;gap:10px;min-width:0}html[data-design-scene="true"] .site-scene .site-header.platform-header .brand {
  color: inherit;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

html[data-design-scene="true"] .site-scene .site-header.platform-header .main-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-width: 0;
  height: 100%;
}

html[data-design-scene="true"] .site-scene .site-header.platform-header .main-nav a {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--header-glass-muted) !important;
  -webkit-text-fill-color: var(--header-glass-muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  text-decoration: none !important;
  transition:
    color 160ms ease,
    background 160ms ease;
}

/* Theme underline for active route — not a pill, not a full-header hairline */
html[data-design-scene="true"] .site-scene .site-header.platform-header .main-nav a::after,
html[data-design-scene="true"] .site-scene .site-header.platform-header .main-nav a:after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 14px !important;
  right: 14px !important;
  bottom: 6px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: var(--header-glass-accent, var(--accent, #1769e0)) !important;
  opacity: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
  transition: opacity 160ms ease !important;
}

html[data-design-scene="true"] .site-scene .site-header.platform-header .main-nav a:hover {
  color: var(--header-glass-text) !important;
  -webkit-text-fill-color: var(--header-glass-text) !important;
  background: transparent !important;
  border-color: transparent !important;
}

html[data-design-scene="true"] .site-scene .site-header.platform-header .main-nav a[aria-current="page"] {
  color: var(--header-glass-text) !important;
  -webkit-text-fill-color: var(--header-glass-text) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html[data-design-scene="true"] .site-scene .site-header.platform-header .main-nav a[aria-current="page"]::after,
html[data-design-scene="true"] .site-scene .site-header.platform-header .main-nav a[aria-current="page"]:after {
  opacity: 1 !important;
}

html[data-design-scene="true"] .site-scene .site-header.platform-header .main-nav a:focus-visible {
  outline: 2px solid var(--header-glass-focus) !important;
  outline-offset: 2px !important;
}

html[data-design-scene="true"] .site-scene .site-header.platform-header .header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 100%;
}

/* Unified glass controls */
html[data-design-scene="true"] .site-scene .site-header.platform-header :is(
  .search-button,
  .theme-button,
  .login-button,
  .mobile-menu-button
) {
  box-sizing: border-box;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  border: 1px solid var(--header-glass-control-border) !important;
  background: var(--header-glass-control-bg) !important;
  color: var(--header-glass-text) !important;
  -webkit-text-fill-color: var(--header-glass-text) !important;
  box-shadow: inset 0 1px 0 var(--header-glass-highlight);
  text-decoration: none !important;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

html[data-design-scene="true"] .site-scene .site-header.platform-header .search-button,
html[data-design-scene="true"] .site-scene .site-header.platform-header .theme-button {
  display: inline-flex !important;
}

/* Keep login as flex when visible; reference hides it ≤1180px. */
html[data-design-scene="true"] .site-scene .site-header.platform-header .login-button {
  display: inline-flex;
}

/* Hamburger stays hidden on desktop — only show at tablet/mobile. */
html[data-design-scene="true"] .site-scene .site-header.platform-header .mobile-menu-button {
  display: none;
}

html[data-design-scene="true"] .site-scene .site-header.platform-header .theme-button,
html[data-design-scene="true"] .site-scene .site-header.platform-header .mobile-menu-button {
  width: 44px !important;
  padding: 0 !important;
}

html[data-design-scene="true"] .site-scene .site-header.platform-header :is(
  .search-button,
  .theme-button,
  .login-button,
  .mobile-menu-button
):hover,
html[data-design-scene="true"] .site-scene .site-header.platform-header .theme-button[aria-expanded="true"],
html[data-design-scene="true"] .site-scene .site-header.platform-header .mobile-menu-button[aria-expanded="true"] {
  background: var(--header-glass-control-hover) !important;
  border-color: var(--header-glass-active-border) !important;
  color: var(--header-glass-text) !important;
  -webkit-text-fill-color: var(--header-glass-text) !important;
}

html[data-design-scene="true"] .site-scene .site-header.platform-header :is(
  .search-button,
  .theme-button,
  .login-button,
  .mobile-menu-button
):focus-visible {
  outline: 2px solid var(--header-glass-focus) !important;
  outline-offset: 2px !important;
}

html[data-design-scene="true"] .site-scene .site-header.platform-header .search-button svg,
html[data-design-scene="true"] .site-scene .site-header.platform-header .theme-button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

html[data-design-scene="true"] .site-scene .site-header.platform-header .search-button {
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}

html[data-design-scene="true"] .site-scene .site-header.platform-header .login-button {
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

html[data-design-scene="true"] .site-scene .site-header.platform-header .theme-control {
  position: relative;
  display: inline-flex;
  align-items: center;
}

html[data-design-scene="true"] .site-scene .site-header.platform-header .palette-switcher {
  z-index: 50;
}

/* -------------------------------------------------------------------------- */
/* Responsive                                                                 */
/* -------------------------------------------------------------------------- */

@media (width <= 1180px) {
  html[data-design-scene="true"] .site-scene .site-header.platform-header .mobile-menu-button {
    display: inline-flex !important;
  }

  html[data-design-scene="true"] .site-scene .site-header.platform-header .login-button {
    display: none !important;
  }
}

@media (width <= 1140px) {
  html[data-design-scene="true"] .site-scene .site-header.platform-header {
    width: calc(100% - 28px) !important;
    padding: 0 16px !important;
    gap: 12px !important;
  }
}

@media (width <= 1080px) {
  html[data-design-scene="true"] .site-scene .site-header.platform-header {
    gap: 10px !important;
  }

  html[data-design-scene="true"] .site-scene .site-header.platform-header .main-nav a {
    padding: 0 10px !important;
    font-size: 12px !important;
  }
}

@media (width <= 980px) {
  html[data-design-scene="true"] .site-scene .site-header.platform-header {
    grid-template-columns: auto 1fr !important;
  }

  html[data-design-scene="true"] .site-scene .site-header.platform-header .main-nav {
    display: none !important;
  }
}

@media (width <= 680px) {
  html[data-design-scene="true"] .site-scene .header-glass-host {
    padding-top: 10px;
  }

  html[data-design-scene="true"] .site-scene .site-header.platform-header {
    --header-capsule-height: 58px;
    top: 10px !important;
    width: calc(100% - 20px) !important;
    margin-top: 0 !important;
    padding: 0 12px !important;
    gap: 8px !important;
  }

  html[data-design-scene="true"] .site-scene .site-header.platform-header .search-button span {
    display: none !important;
  }

  html[data-design-scene="true"] .site-scene .site-header.platform-header .search-button {
    width: 44px !important;
    padding: 0 !important;
  }
}

@media (width <= 390px) {
  html[data-design-scene="true"] .site-scene .site-header.platform-header {
    width: calc(100% - 20px) !important;
    padding: 0 10px !important;
  }
}

@media (width <= 320px) {
  html[data-design-scene="true"] .site-scene .site-header.platform-header {
    width: calc(100% - 16px) !important;
    padding: 0 8px !important;
  }
}

/* Prefer-reduced-transparency: denser fill */
@media (prefers-reduced-transparency: reduce) {
  html[data-design-scene="true"] .site-scene .site-header.platform-header {
    background: var(--header-glass-bg-solid) !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}
/* Shared route-aware OGE/EGE switch; aria-current is the single visual source of truth. */
.exam-switch {
  --exam-switch-active-bg: var(--action-primary-bg);
  --exam-switch-active-hover-bg: var(--action-primary-hover-bg, var(--action-primary-hover));
  --exam-switch-active-text: var(--action-primary-text);
  --exam-switch-inactive-text: var(--header-glass-muted, var(--text-secondary));
  --exam-switch-inactive-hover-text: var(--header-glass-text, var(--text-primary));
  --exam-switch-focus-ring: var(--header-glass-focus, var(--action-primary-border));
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: var(--surface-glass);
}

.exam-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-decoration: none;
}

html[data-design-scene="true"] .site-scene .exam-switch a,
html[data-design-scene="true"] .site-scene .exam-switch a:link,
html[data-design-scene="true"] .site-scene .exam-switch a:visited {
  color: var(--exam-switch-inactive-text);
  -webkit-text-fill-color: var(--exam-switch-inactive-text);
  background: transparent;
}

html[data-design-scene="true"] .site-scene .exam-switch a:not([aria-current="page"]):hover,
html[data-design-scene="true"] .site-scene .exam-switch a:not([aria-current="page"]):active {
  color: var(--exam-switch-inactive-hover-text);
  -webkit-text-fill-color: var(--exam-switch-inactive-hover-text);
  background: var(--header-glass-control-hover);
}

html[data-design-scene="true"] .site-scene .exam-switch a[aria-current="page"],
html[data-design-scene="true"] .site-scene .exam-switch a[aria-current="page"]:link,
html[data-design-scene="true"] .site-scene .exam-switch a[aria-current="page"]:visited {
  color: var(--exam-switch-active-text);
  -webkit-text-fill-color: var(--exam-switch-active-text);
  background: var(--exam-switch-active-bg);
}

html[data-design-scene="true"] .site-scene .exam-switch a[aria-current="page"]:hover,
html[data-design-scene="true"] .site-scene .exam-switch a[aria-current="page"]:active {
  color: var(--exam-switch-active-text);
  -webkit-text-fill-color: var(--exam-switch-active-text);
  background: var(--exam-switch-active-hover-bg);
}

html[data-design-scene="true"] .site-scene .exam-switch a:focus-visible {
  outline: 2px solid var(--exam-switch-focus-ring);
  outline-offset: 2px;
}

.mobile-exam-switch { width: 100%; margin: 0 0 14px; }
.mobile-exam-switch a { min-height: 44px; flex: 1; }
@media (max-width: 980px) { .site-header .exam-switch:not(.mobile-exam-switch) { display: none; } }