/* Expandable "Download Mac app" nav control — icon alone, opens to pill on hover/focus. */
a.nav-dl-mac {
  flex: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 34px;
  max-width: 34px;
  padding: 0 8px;
  border-radius: 999px;
  color: #52525b;
  background: #fff;
  border: 1px solid #e4e4e7;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
  transition:
    max-width 0.22s ease,
    padding 0.22s ease,
    gap 0.18s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}
a.nav-dl-mac.nav-dl-mac--sm {
  height: 32px;
  max-width: 32px;
  padding: 0 7.5px;
}
a.nav-dl-mac svg {
  flex: none;
  display: block;
}
a.nav-dl-mac .nav-dl-mac__label {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  transition:
    max-width 0.22s ease,
    opacity 0.15s ease 0.02s,
    margin 0.18s ease;
  margin-left: 0;
}
a.nav-dl-mac:hover,
a.nav-dl-mac:focus-visible {
  max-width: 280px;
  padding: 0 14px 0 11px;
  gap: 8px;
  border-color: #b57bff;
  color: #6b4de6;
  background: #fbfaff;
  box-shadow: 0 6px 16px rgba(139, 109, 255, 0.14);
  outline: none;
}
a.nav-dl-mac.nav-dl-mac--sm:hover,
a.nav-dl-mac.nav-dl-mac--sm:focus-visible {
  max-width: 260px;
  padding: 0 13px 0 10px;
}
a.nav-dl-mac:hover .nav-dl-mac__label,
a.nav-dl-mac:focus-visible .nav-dl-mac__label {
  max-width: 210px;
  opacity: 1;
  margin-left: 0;
}

/* On mobile the control only eats header space next to the account/lang pills —
   the Mac app can still be reached from /downloads and the footer. */
@media (max-width: 900px) {
  a.nav-dl-mac {
    display: none !important;
  }
}

/* The burger menu carries an explicit Support row on mobile; the desktop header
   keeps its own support icon, so the pill stays hidden outside the menu. The
   open-menu rule (.nb-toggle:checked ~ .nav-pills a) re-shows it on mobile. */
.nav-pills a[data-mobile-support] {
  display: none !important;
}

/* Logged-in mobile header: the account avatar lives in the top bar next to the
   burger instead of being buried at the bottom of the menu card (and its
   dropdown opening awkwardly over it). Lang/login stay inside the burger menu.
   Only while the menu is closed — an open menu reverts the cta to its card row.

   !important is required: .nav-cta carries inline position:relative / gap / display
   that otherwise beat these rules, so the chip sat on a relative offset and
   visually stacked above the burger instead of sharing its vertical center. */
@media (max-width: 900px) {
  html body nav:not(:has(.nb-toggle:checked)) .nav-cta:has(> span[data-account-btn="1"]) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    /* 44px burger hit target + 8px gap, same right inset as .nb-btn */
    right: calc(max(14px, env(safe-area-inset-right)) + 44px + 8px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    height: 34px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: 110 !important;
  }

  html body nav:not(:has(.nb-toggle:checked)) .nav-cta:has(> span[data-account-btn="1"]) > a,
  html body nav:not(:has(.nb-toggle:checked)) .nav-cta:has(> span[data-account-btn="1"]) > span.nx-lang {
    display: none !important;
  }

  /* Keep the initials chip itself a fixed disc so font metrics can't nudge it. */
  html body nav:not(:has(.nb-toggle:checked)) .nav-cta > span[data-account-btn="1"] {
    flex: none !important;
    box-sizing: border-box !important;
    width: 34px !important;
    height: 34px !important;
    line-height: 1 !important;
  }
}

/* Public-site mobile navigation. Keep the opened menu as one compact card
   instead of stretching the header into separate navigation and account rows. */
@media (max-width: 900px) {
  html body .nb-toggle {
    display: block !important;
  }

  html body nav {
    position: relative;
  }

  html body .nb-btn {
    display: flex !important;
    position: absolute !important;
    right: max(14px, env(safe-area-inset-right)) !important;
    top: 50% !important;
    z-index: 120 !important;
    transform: translateY(-50%) !important;
  }

  html body .nav-pills,
  html body .nav-cta {
    display: none !important;
  }

  html body nav:has(.nb-toggle:checked) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 0 !important;
    height: auto !important;
    min-height: 70px !important;
    padding: 10px 14px !important;
  }

  html body nav:has(.nb-toggle:checked) .nb-btn {
    top: 35px !important;
    font-size: 0 !important;
  }

  html body nav:has(.nb-toggle:checked) .nb-btn::before {
    content: '\00d7';
    font-size: 30px;
    font-weight: 400;
    line-height: 1;
  }

  html body .nb-toggle:checked ~ .nav-pills {
    display: flex !important;
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: auto !important;
    margin-top: 6px !important;
    padding: 6px !important;
    gap: 2px !important;
    background: #fff !important;
    border: 1px solid #e7e4ec !important;
    border-bottom: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 16px 34px rgba(23, 20, 31, 0.12) !important;
  }

  html body .nb-toggle:checked ~ .nav-cta {
    display: flex !important;
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    position: relative !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-height: 58px !important;
    width: auto !important;
    padding: 7px 12px !important;
    gap: 8px !important;
    background: #fff !important;
    border: 1px solid #e7e4ec !important;
    border-top: 1px solid #f0eef3 !important;
    border-radius: 0 0 18px 18px !important;
    box-shadow: 0 16px 34px rgba(23, 20, 31, 0.12) !important;
  }

  html body .nb-toggle:checked ~ .nav-cta > .nav-dl-mac,
  html body .nb-toggle:checked ~ .nav-cta > a[href^="mailto:"] {
    display: none !important;
  }

  html body .nb-toggle:checked ~ .nav-cta > .nav-guest {
    display: flex !important;
    flex: 1 !important;
    gap: 8px !important;
  }

  html body .nb-toggle:checked ~ .nav-cta > .nav-guest span {
    display: inline-flex !important;
    flex: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 0 12px !important;
    text-align: center !important;
  }

  /* Account chip lives in the closed top bar only. Inside the open menu card
     it was a stray "JM" under the language row — hide it (and the old
     "My account" label that existed only to caption that chip). Lang switcher
     stays as the sole logged-in footer control. */
  html body .nb-toggle:checked ~ .nav-cta > span[data-account-btn="1"],
  html body .nb-toggle:checked ~ .nav-cta > span[title="My account"] {
    display: none !important;
  }

  html body .nb-toggle:checked ~ .nav-cta:has(> span[data-account-btn="1"]) > .nx-lang,
  html body .nb-toggle:checked ~ .nav-cta:has(> span[title="My account"]) > .nx-lang {
    flex: 1 1 auto !important;
    width: 100% !important;
  }

  html body .nb-toggle:checked ~ .nav-pills a,
  html body .nb-toggle:checked ~ .nav-pills span {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    box-shadow: none !important;
  }

  html body .nb-toggle:checked ~ .nav-pills span {
    color: #17141f !important;
    background: #f3f0f8 !important;
  }
}