/*
 * Desktop-only header stability layer.
 * Mobile and tablet layouts remain governed by the existing responsive shell.
 */
@media (min-width: 1024px) {
  html {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: clip !important;
    background: #0a1237;
  }

  body {
    width: 100% !important;
    margin: 0 !important;
    padding-top: 0 !important;
    overflow-x: clip !important;
  }

  /* 100vw includes the classic desktop scrollbar gutter. This prevents the
     exposed strip visible at the right edge of both fixed header ribbons. */
  #root div.fixed.top-0[style*="rgba(10, 18, 55"],
  #root div.fixed.top-0[style*="rgba(10,18,55"] {
    top: 0 !important;
    right: auto !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }

  #root nav.fixed.left-0.right-0 {
    top: var(--microbar-h) !important;
    right: auto !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
  }

  #root .desktop-judgment-strip {
    transform: translate3d(0, 0, 0);
    transform-origin: top center;
    opacity: 1;
    visibility: visible;
    transition:
      transform 220ms cubic-bezier(.2, .75, .25, 1),
      opacity 160ms ease,
      visibility 0s linear 0s;
    will-change: transform, opacity;
  }

  #root .desktop-judgment-strip.desktop-judgment-strip--hidden {
    transform: translate3d(0, calc(-100% - 4px), 0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      transform 220ms cubic-bezier(.4, 0, 1, 1),
      opacity 140ms ease,
      visibility 0s linear 220ms;
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  #root .desktop-judgment-strip,
  #root .desktop-judgment-strip.desktop-judgment-strip--hidden {
    transition: none !important;
  }
}