/* Native cross-document transitions keep the navigation visually stationary.
   https://developer.chrome.com/docs/web-platform/view-transitions/cross-document */
@view-transition { navigation: auto; }
:root {
  --site-nav-height: 75px;
  --taco-page-ease: cubic-bezier(.22,1,.36,1);
  --taco-subnav-top: 0px;
  --taco-subnav-height: 0px;
}
html { scrollbar-gutter: stable; }

.taco-navigation {
  position: absolute;
  inset: 0 0 auto;
  z-index: 100;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
  align-items: center;
  gap: 24px;
  height: var(--site-nav-height);
  padding: 16px 32px;
  border: 0;
  background: linear-gradient(180deg, #ffffff0d, #ffffff00), color-mix(in srgb, var(--paper) 54%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  box-shadow: none;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-small);
  line-height: var(--leading-ui);
  view-transition-name: taco-navigation;
}
.taco-navigation[data-theme='dark'] { background: linear-gradient(180deg, #ffffff0d, #ffffff00), #080d144d; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .taco-navigation, .taco-navigation[data-theme='dark'] { background: var(--paper); }
}
.taco-navigation *, .taco-navigation *::before, .taco-navigation *::after { box-sizing: border-box; }
.taco-navigation a { text-decoration: none; }
.taco-navigation__brand {
  justify-self: start;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wordmark);
}
.taco-navigation__links { display: flex; align-items: center; justify-content: center; gap: 28px; }
.taco-navigation__links a { color: var(--muted); font-weight: var(--weight-medium); white-space: nowrap; }
.taco-navigation__links a[aria-current='page'] { color: var(--ink); }
.taco-navigation__links a:hover, .taco-navigation__brand:hover { color: var(--link); }
.taco-navigation__action {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 146px;
  min-height: 42px;
  padding: 10px 20px;
  border-radius: 999px;
  white-space: nowrap;
}
/* The main header scrolls away. Product tabs then occupy the viewport top. */
[data-subnav] { top: 0 !important; z-index: 90 !important; }
/* Tabs fill the product bar, so their active rule meets its bottom edge. */
.taco-product-nav { min-height: 59px; padding-block: 0 !important; align-items: stretch !important; row-gap: 0 !important; box-sizing: border-box; }
.taco-product-nav > div:first-child { align-self: center; }
.taco-product-nav > div:last-child { align-self: stretch; }
.taco-product-nav > div:last-child > div { align-self: stretch; }
.taco-product-nav > div:last-child > div > a { position: relative; min-height: 58px; }
.taco-product-nav a[aria-current='page']::after { content: ''; position: absolute; inset: auto 0 -1px; height: 2px; background: currentColor; }
html:not([data-main-navigation-offscreen='true']):not([data-subnav-placement='below-primary']) [data-subnav] {
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Hub detail pages keep their local menu in the Apple-style product-bar slot:
   below the primary header on entry, then at the viewport top as it scrolls away. */
html[data-subnav-placement='below-primary'] [data-subnav] {
  position: fixed !important;
  top: var(--taco-subnav-top) !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
/* Keeping the local bar in document space until the handoff lets it take part
   in native rubber-band overscroll with the primary header instead of being
   covered by it. The fixed state starts exactly when the header has left. */
html[data-subnav-placement='below-primary']:not([data-main-navigation-offscreen='true']) [data-subnav] {
  position: absolute !important;
  top: var(--site-nav-height) !important;
}
html[data-subnav-placement='below-primary'] [data-subnav] [data-control='primary'] {
  padding: 8px 16px !important;
  justify-content: center !important;
  text-align: center;
}
/* The Hub detail CTA carries a decorative OS icon in its source export. The
   button label is its only visible content here, so centering it is precise. */
html[data-subnav-placement='below-primary'] [data-subnav] [data-control='primary'] > [aria-hidden='true'] {
  display: none !important;
}
[id] { scroll-margin-top: 88px; }
.ds { padding-top: calc(var(--site-nav-height) + 32px); }

/* The old content holds while the export mounts, then content crossfades.
   The header does not translate, and no full-screen curtain covers the UI. */
::view-transition-group(root), ::view-transition-group(taco-navigation) { animation: none; }
::view-transition-old(root) { animation: taco-content-out 220ms var(--taco-page-ease) both; }
::view-transition-new(root) { animation: taco-content-in 280ms var(--taco-page-ease) both; }
::view-transition-old(taco-navigation) { animation: taco-content-out 220ms ease both; }
::view-transition-new(taco-navigation) { animation: taco-content-in 220ms ease both; }
::view-transition-old(root), ::view-transition-new(root),
::view-transition-old(taco-navigation), ::view-transition-new(taco-navigation) { mix-blend-mode: normal; }
html:not([data-page-transition='ready'])::view-transition-old(root),
html:not([data-page-transition='ready'])::view-transition-new(root),
html:not([data-page-transition='ready'])::view-transition-old(taco-navigation),
html:not([data-page-transition='ready'])::view-transition-new(taco-navigation) { animation-play-state: paused; }
@keyframes taco-content-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes taco-content-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 680px) {
  :root { --site-nav-height: 109px; }
  .taco-navigation { grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 20px; }
  .taco-navigation__links { grid-column: 1 / -1; grid-row: 2; gap: 26px; }
  .taco-navigation__action { grid-column: 2; grid-row: 1; min-width: 146px; }
  .taco-product-nav { display: grid !important; grid-template-columns: 1fr auto; padding-inline: 20px !important; }
  .taco-product-nav > div:first-child { grid-column: 1; grid-row: 1; min-height: 52px; }
  .taco-product-nav > div:last-child { display: contents !important; }
  .taco-product-nav > div:last-child > div { grid-column: 1 / -1; grid-row: 2; justify-content: flex-end; }
  .taco-product-nav > div:last-child > a { grid-column: 2; grid-row: 1; align-self: center; }
  .taco-product-nav > div:last-child > div > a { min-height: 48px; }
  html[data-subnav-placement='below-primary'] [data-screen-label$=' hero'] {
    padding-top: calc(var(--site-nav-height) + var(--taco-subnav-height) + 24px) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root),
  ::view-transition-old(taco-navigation), ::view-transition-new(taco-navigation) { animation: none; }
}