/* Shared header: compact social links and a permanent tutorial entry. */
.site-header.site-header--help .social-links {
  gap: 6px;
}

.site-header.site-header--help .social-link--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 8px;
  color: rgba(255, 255, 255, .82);
}

.site-header.site-header--help .social-link--icon svg {
  display: block;
  width: 22px;
  height: 22px;
  flex: none;
}

.site-header.site-header--help .site-help-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: none;
  min-height: 44px;
  padding: 0 8px;
  border-radius: 8px;
  color: #f6cd9b;
  font-size: .92rem;
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
}

.site-header.site-header--help .site-help-link svg {
  display: block;
  flex: none;
  width: 22px;
  height: 22px;
}

.site-header.site-header--help :is(.social-link--icon, .site-help-link):hover {
  color: #ffd9a8;
  background: rgba(246, 205, 155, .08);
}

.site-header.site-header--help :is(.social-link--icon, .site-help-link):focus-visible {
  outline: 2px solid #ffd9a8;
  outline-offset: 2px;
}

.site-header.site-header--help .site-help-link--mobile {
  display: none;
}

/* At tablet widths, keep all labels readable without squeezing the main menu. */
@media (min-width: 981px) and (max-width: 1180px) {
  .site-header.site-header--help .header-container {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .site-header.site-header--help .brand {
    grid-column: 1;
    grid-row: 1;
  }

  .site-header.site-header--help .social-links {
    grid-column: 2;
    grid-row: 1;
  }

  .site-header.site-header--help .top-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
  }
}

@media (max-width: 980px) {
  /* The lightweight homepage's original menu breakpoint is 860px. */
  body:not(.is-mobile-menu-open) .site-header.site-header--help:not(.is-menu-open) .top-nav,
  body:not(.is-mobile-menu-open) .site-header.site-header--help:not(.is-menu-open) .social-links {
    display: none;
  }

  /* Reading settings already fixes this grid with !important on phones. */
  .site-header.site-header--help .container.header-container {
    grid-template-columns: minmax(0, 1fr) 44px 44px 44px !important;
    column-gap: 6px !important;
  }

  .site-header.site-header--help .brand {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    max-width: 100%;
  }

  .site-header.site-header--help .brand-logo {
    max-width: 100%;
  }

  .site-header.site-header--help .reading-settings-mobile-trigger {
    display: inline-flex;
    grid-column: 2;
    grid-row: 1;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .site-header.site-header--help .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    grid-column: 4;
    grid-row: 1;
    width: 44px !important;
    height: 44px !important;
    justify-self: end;
  }

  .site-header.site-header--help .site-help-link--mobile {
    display: inline-flex;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    width: 44px;
    height: 44px;
    padding: 0;
  }

  .site-header.site-header--help .social-links .site-help-link,
  .site-header.site-header--help .social-link--icon {
    display: none;
  }

  .site-header.site-header--help .social-links .reading-settings-trigger {
    display: none !important;
  }

  .site-header.site-header--help.site-header--no-reading .container.header-container {
    grid-template-columns: minmax(0, 1fr) 44px 44px !important;
  }

  .site-header.site-header--help.site-header--no-reading .menu-toggle {
    grid-column: 3;
  }

  .site-header.site-header--help.site-header--no-reading .site-help-link--mobile {
    grid-column: 2;
  }
}

body.is-maintenance-mode .site-header.site-header--help .site-help-link {
  display: none;
}

/* navigator.standalone also covers iOS launches not reported by the media query.
   Keep the inset inside the sticky header, including after scrolling/rotation. */
html.is-iphone-home-screen body > .site-header.site-header--help,
html.is-iphone-home-screen body > .site-header.site-header--help.is-menu-open {
  padding-top: 60px !important;
  padding-top: calc(max(44px, env(safe-area-inset-top, 0px)) + 16px) !important;
}

/* CSS-only fallback if the small device detector cannot load. */
@supports (-webkit-touch-callout: none) {
  @media (display-mode: standalone) and (max-width: 767px) {
    html body > .site-header.site-header--help {
      padding-top: 60px !important;
      padding-top: calc(max(44px, env(safe-area-inset-top, 0px)) + 16px) !important;
    }
  }
}