/* site-header: bar and zone geometry, the flush posture and the compact chrome. Element paint lives on the parts. */

/* A view-transition-name makes a backdrop root; the script sets it only during capture. */

/* One transition list: a more specific arm replaces it, never extends it. */
html[data-sk-js] .sk-header {
  --sk-dur-paint-live: 0s;
}
html[data-sk-js] .sk-header[data-paint-ready] {
  --sk-dur-paint-live: var(--sk-dur-paint);
}
/* `transition` is a shorthand: naming a part here replaces the part's own list. */
html[data-sk-js] .sk-header,
html[data-sk-js] .sk-header .sk-header-bar,
html[data-sk-js] .sk-header .sk-header-bar::before,
html[data-sk-js] .sk-header .sk-header-toggle {
  /* The blur crosses with the color, or the bar reads as two events. */
  transition:
    transform var(--sk-dur-bar) var(--sk-ease-bar),
    background-color var(--sk-dur-paint-live) var(--sk-ease-paint),
    color var(--sk-dur-paint-live) var(--sk-ease-paint),
    border-color var(--sk-dur-paint-live) var(--sk-ease-paint),
    box-shadow var(--sk-dur-paint-live) var(--sk-ease-paint),
    backdrop-filter var(--sk-dur-paint-live) var(--sk-ease-paint),
    -webkit-backdrop-filter var(--sk-dur-paint-live) var(--sk-ease-paint);
}
@media (prefers-reduced-motion: reduce) {
  /* One arm: the armed selector sets a duration token, never `transition`. */
  html[data-sk-js] .sk-header,
  html[data-sk-js] .sk-header .sk-header-bar,
  html[data-sk-js] .sk-header .sk-header-bar::before,
  html[data-sk-js] .sk-header .sk-header-toggle {
    transition: none;
  }
}

/* On the next section too: --sk-chrome-cover is computed there. */
.sk-header,
.sk-header + .sk-section {
  --sk-chrome-scrim-fade: 2rem;
}

.sk-header {
  /* A hard minimum: a theme may zero its gutter. */
  --sk-float-inset-min: 8px;
  --sk-dur-bar: calc(250ms / max(abs(var(--sk-anim-intensity, 1)), 0.1));
  --sk-ease-bar: ease-in-out;
  --sk-dur-paint: calc(280ms / max(abs(var(--sk-anim-intensity, 1)), 0.1));
  --sk-ease-paint: ease;
  /* Blur first, then saturate the blurred result. */
  --sk-glass-filter: blur(14px) saturate(1.4);
  --sk-ease-burger: cubic-bezier(0.2, 0.7, 0.2, 1);
  view-transition-name: none;
  /* Scoped to Island + Auto below: a hidden knob keeps its staged value. */
  --sk-menu-min: 330px;
}
.sk-header[data-style="island"][data-width="auto"] {
  --sk-menu-min: max(330px, var(--sk-island-min, 330px));
}
html[data-sk-vt]:not([data-sk-lightbox-vt]) .sk-header {
  view-transition-name: sk-header;
}

/* Declared on both boxes: the sheet is mounted on <body>. */
.sk-header,
.sk-header-sheet {
  --sk-menu-link-size: var(--sk-text-h4-size);
}

/* The row's gap spaces these; the slot margins are for hosts that are not flex. */
.sk-header-sheet-link > .sk-btn-badge,
.sk-header-sheet-link > .sk-extlink {
  margin-left: 0;
}
.sk-header-sheet-link {
  font-size: var(--sk-menu-link-size);
  font-weight: var(--kit-weight-button);
  letter-spacing: calc(var(--kit-track-nav) * 1em);
  text-transform: var(--kit-caps-nav);
}
.sk-header-sheet-link[data-sub] {
  font-size: var(--sk-text-btn-size);
}

/* Two tokens: a custom property substitutes where declared, so each box computes its own alpha. */
.sk-header {
  background-color: color-mix(
    in srgb,
    var(--sk-bg)
      calc(
        var(--sk-surface-opaque, 100) * 1% + var(--sk-surface-glass, 0) *
          var(--sk-glass-alpha, 0.92) * 100%
      ),
    transparent
  );
}
.sk-header[data-style="island"] .sk-header-bar {
  background-color: color-mix(
    in srgb,
    var(--sk-bg)
      calc(
        var(--sk-surface-opaque, 100) * 1% + var(--sk-surface-glass, 0) *
          var(--sk-glass-alpha, 0.92) * 100%
      ),
    transparent
  );
}
.sk-header[data-style="island"] {
  background-color: transparent;
  /* Padding, not margin: offsetHeight counts padding, and a margin would collapse through the root. */
  padding-block-start: max(var(--sk-gutter), var(--sk-float-inset-min));
}
/* Set on the siblings: a custom property inherits down, never sideways. */
.sk-header[data-style="island"] + .sk-section,
.sk-header[data-style="island"] ~ .sk-component,
.sk-header[data-style="island"] ~ .sk-section .sk-component {
  --sk-chrome-room: calc(var(--sk-chrome-room-measured, var(--sk-bar-height)) + var(--sk-gutter));
}
/* The script publishes the measured room; this is the no-script fallback. */
.sk-header:not([data-style="island"]) + .sk-section,
.sk-header:not([data-style="island"]) ~ .sk-component,
.sk-header:not([data-style="island"]) ~ .sk-section .sk-component {
  --sk-chrome-room: var(--sk-chrome-room-measured, var(--sk-bar-height));
}

/* Defaulted through var() fallbacks, so a theme's value on <body> still wins. */
.sk-header {
  --sk-bar-height: calc(var(--kit-bar-height) * 1px);
  --sk-bar-anchor: 1;
  --sk-bar-pad-floor: 4px;
  --sk-bar-pad-ceiling: 28px;
  --sk-bar-pad-theme: calc(var(--kit-bar-pad-y) * 1px);
  --sk-bare-text-inset: 1rem;
  --sk-bar-pad-y: calc(
    var(--sk-bar-pad-theme) + (max(0, var(--sk-bar-height-dial, 50) - 50) / 50) *
      (var(--sk-bar-pad-ceiling) - var(--sk-bar-pad-theme)) -
      (max(0, 50 - var(--sk-bar-height-dial, 50)) / 50) *
      (var(--sk-bar-pad-theme) - var(--sk-bar-pad-floor))
  );
  --sk-bar-gap: calc(var(--kit-bar-gap, 24) * 1px);
  --sk-zone-gap: calc(var(--kit-zone-gap, 16) * 1px);
  --sk-chrome-scrim: linear-gradient(rgba(16, 15, 14, 0.25), rgba(16, 15, 14, 0));
  --sk-chrome-scrim-unread: linear-gradient(rgba(16, 15, 14, 0.55), rgba(16, 15, 14, 0));
}

/* Again on the sheet, which is mounted on <body>. */
[data-sk="site-header-sheet"] {
  --sk-zone-gap: calc(var(--kit-zone-gap, 16) * 1px);
}

/* data-scroll-mode, because the script owns data-scroll for the scroll state. */
.sk-header:is([data-scroll-mode="pinned"], [data-scroll-mode="reveal"]) {
  position: sticky;
  top: 0;
  z-index: 30;
  background-color: color-mix(
    in srgb,
    var(--sk-bg)
      calc(
        var(--sk-surface-opaque, 92) * 1% + var(--sk-surface-glass, 0) *
          var(--sk-glass-alpha, 0.92) * 100%
      ),
    transparent
  );
  backdrop-filter: var(--sk-glass-filter);
  -webkit-backdrop-filter: var(--sk-glass-filter);
  border-bottom: var(--sk-header-rule-width, 0px) solid transparent;
  transition: border-color 0.3s ease;
}
html[data-sk-js]
  .sk-header:is([data-scroll-mode="pinned"], [data-scroll-mode="reveal"])[data-scrolled],
html[data-sk-js]
  .sk-header:is(
    [data-scroll-mode="pinned"],
    [data-scroll-mode="reveal"]
  )[data-chrome-verdict="unknown"],
html:not([data-sk-js]) .sk-header:is([data-scroll-mode="pinned"], [data-scroll-mode="reveal"]) {
  border-bottom-color: var(--sk-header-rule, transparent);
}
/* Scripts off there is no scrolled stamp, so the bar keeps its plate. */
html[data-sk-js]
  .sk-header[data-style="standard"]:is(
    [data-surface="dynamic"],
    [data-surface="none"]
  )[data-overlap="none"][data-tone="default"]:is(
    [data-scroll-mode="pinned"],
    [data-scroll-mode="reveal"]
  ):not([data-scrolled]) {
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Two arms at (0,4,1): one html-prefixed arm would lose to the scripted arms above. */
html[data-sk-js]
  .sk-header[data-style="island"]:is([data-scroll-mode="pinned"], [data-scroll-mode="reveal"]),
html:not([data-sk-js])
  .sk-header[data-style="island"]:is([data-scroll-mode="pinned"], [data-scroll-mode="reveal"]) {
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
/* Under reveal the ground is on the bar, which slides; left on the root it stays behind. */
html[data-sk-js]
  .sk-header:is(
    [data-scroll-mode="pinned"],
    [data-scroll-mode="reveal"]
  )[data-scroll-mode="reveal"],
html:not([data-sk-js])
  .sk-header:is(
    [data-scroll-mode="pinned"],
    [data-scroll-mode="reveal"]
  )[data-scroll-mode="reveal"] {
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
/* Scripted and scrolled only, or a pale plate sits over the photograph at rest. */
/* Not an island: a transparent border would grow its content-sized bar. */
html[data-sk-js]
  .sk-header[data-scroll-mode="reveal"]:is([data-surface="solid"], [data-surface="glass"]):not(
    [data-style="island"]
  )
  .sk-header-bar,
html[data-sk-js]
  .sk-header:is(
    [data-scroll-mode="pinned"],
    [data-scroll-mode="reveal"]
  )[data-scroll-mode="reveal"][data-scrolled]:not([data-style="island"])
  .sk-header-bar,
html:not([data-sk-js])
  .sk-header:is(
    [data-scroll-mode="pinned"],
    [data-scroll-mode="reveal"]
  )[data-scroll-mode="reveal"]:not([data-style="island"])
  .sk-header-bar {
  background-color: color-mix(
    in srgb,
    var(--sk-bg)
      calc(
        var(--sk-surface-opaque, 92) * 1% + var(--sk-surface-glass, 0) *
          var(--sk-glass-alpha, 0.92) * 100%
      ),
    transparent
  );
  backdrop-filter: var(--sk-glass-filter);
  -webkit-backdrop-filter: var(--sk-glass-filter);
}
/* The root gives the ground up, or the box that does not slide stays behind. */
html[data-sk-js]
  .sk-header[data-scroll-mode="reveal"]:is([data-surface="solid"], [data-surface="glass"]):not(
    [data-style="island"]
  ) {
  background-color: transparent;
}

/* Always in the box, only the color waits: a late border grows the box. */
html[data-sk-js]
  .sk-header:is(
    [data-scroll-mode="pinned"],
    [data-scroll-mode="reveal"]
  )[data-scroll-mode="reveal"]:not([data-style="island"])
  .sk-header-bar,
html:not([data-sk-js])
  .sk-header:is(
    [data-scroll-mode="pinned"],
    [data-scroll-mode="reveal"]
  )[data-scroll-mode="reveal"]:not([data-style="island"])
  .sk-header-bar {
  border-bottom: var(--sk-header-rule-width, 0px) solid transparent;
}
html[data-sk-js]
  .sk-header:is(
    [data-scroll-mode="pinned"],
    [data-scroll-mode="reveal"]
  )[data-scroll-mode="reveal"][data-scrolled]:not([data-style="island"])
  .sk-header-bar,
html:not([data-sk-js])
  .sk-header:is(
    [data-scroll-mode="pinned"],
    [data-scroll-mode="reveal"]
  )[data-scroll-mode="reveal"]:not([data-style="island"])
  .sk-header-bar {
  border-bottom-color: var(--sk-header-rule, transparent);
}
/* The emptied sticky root still spans the page top, so it takes no clicks. */
.sk-header:is(
    [data-scroll-mode="pinned"],
    [data-scroll-mode="reveal"]
  )[data-scroll-mode="reveal"][data-scroll="past-down"] {
  pointer-events: none;
}

/* Registered so it computes to a LENGTH; unregistered, getComputedStyle hands back raw calc() text.
 * --sk-chrome-dock-radius must NOT join it: `initial` only clears an UNregistered property. */
@property --sk-chrome-cover {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

/* The bar floats absolute (fixed with stick) and the SECTION reserves the room. :where() so the guard costs no specificity. */
.sk-header:is([data-overlap="hero"], [data-style="island"]):has(+ .sk-section):where(
    html[data-sk-js] *,
    body:not(:has([data-sk-furniture="top"] + .sk-header)) *
  ) {
  html:not([data-sk-js])
    &[data-style="island"]:not(:is([data-scroll-mode="pinned"], [data-scroll-mode="reveal"]))
    .sk-header-bar {
    background-color: transparent;
  }
  html:not([data-sk-js]) &:not(:is([data-scroll-mode="pinned"], [data-scroll-mode="reveal"])) {
    --sk-chrome-scrim-opacity: 1;
    --sk-chrome-scrim: var(--sk-chrome-scrim-unread);
    --sk-ink: var(--sk-overlay-ink);
    --sk-ink-on-dark: 1;
    --sk-ink-muted: var(--sk-overlay-ink-muted);
    --sk-accent: var(--sk-overlay-ink-muted);
    --sk-focus-ring-color: var(--sk-overlay-ink-muted);
    --sk-stroke: var(--sk-overlay-stroke);
    --sk-btn-bg: var(--sk-overlay-ink);
    --sk-btn-ink: rgb(14, 12, 10);
    --sk-selection-bg: var(--sk-selection-page-bg);
    --sk-selection-ink: var(--sk-selection-page-ink);
    color: var(--sk-ink);
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
  }
  /* Nested: a second parent selector would multiply against every arm inside. */
  html[data-sk-js] &:not([data-scrolled]) {
    & .sk-header-bar {
      opacity: 0;
      visibility: hidden;
    }
    &[data-chrome-verdict] .sk-header-bar {
      opacity: 1;
      visibility: visible;
      /* Restated: `transition` is a shorthand, and this arm replaces the bar's list. */
      transition:
        opacity 0.18s ease,
        background-color var(--sk-dur-paint-live) var(--sk-ease-paint),
        color var(--sk-dur-paint-live) var(--sk-ease-paint),
        border-color var(--sk-dur-paint-live) var(--sk-ease-paint),
        box-shadow var(--sk-dur-paint-live) var(--sk-ease-paint);
    }
    /* Restates the slide: this arm outweighs the reveal's own transition. */
    &:is(
        [data-scroll-mode="pinned"],
        [data-scroll-mode="reveal"]
      )[data-scroll-mode="reveal"][data-chrome-verdict]
      .sk-header-bar {
      transition:
        opacity 0.18s ease,
        transform var(--sk-dur-bar) var(--sk-ease-bar),
        background-color var(--sk-dur-paint-live) var(--sk-ease-paint),
        color var(--sk-dur-paint-live) var(--sk-ease-paint),
        border-color var(--sk-dur-paint-live) var(--sk-ease-paint),
        box-shadow var(--sk-dur-paint-live) var(--sk-ease-paint);
    }
    @media (prefers-reduced-motion: reduce) {
      &:is(
          [data-scroll-mode="pinned"],
          [data-scroll-mode="reveal"]
        )[data-scroll-mode="reveal"][data-chrome-verdict]
        .sk-header-bar {
        transition: none;
      }
    }
    /* unknown is an island's first paint, so the ground goes to the bar and no plate flashes. */
    &[data-style="island"][data-chrome-verdict="unknown"] {
      background-color: transparent;
    }
    &[data-style="island"][data-chrome-verdict="unknown"] .sk-header-bar {
      background-color: color-mix(
        in srgb,
        var(--sk-bg)
          calc(
            var(--sk-surface-opaque, 100) * 1% + var(--sk-surface-glass, 0) *
              var(--sk-glass-alpha, 0.92) * 100%
          ),
        transparent
      );
    }
    &[data-chrome-verdict="unknown"] {
      background-color: color-mix(
        in srgb,
        var(--sk-bg)
          calc(
            var(--sk-surface-opaque, 100) * 1% + var(--sk-surface-glass, 0) *
              var(--sk-glass-alpha, 0.92) * 100%
          ),
        transparent
      );
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      transition: none;
    }
    /* The verdict's overlay ink must not reach an island, which stands on its own ground. */
    &[data-style="island"]:not([data-tone="inverted"], [data-tone="accent"]) .sk-header-bar {
      /* Not `:not([data-tone])`: the template always stamps data-tone. */
      background-color: color-mix(
        in srgb,
        var(--sk-bg)
          calc(
            var(--sk-surface-opaque, 100) * 1% + var(--sk-surface-glass, 0) *
              var(--sk-glass-alpha, 0.92) * 100%
          ),
        transparent
      );
      --sk-ink: var(--kit-foreground);
      --sk-ink-on-dark: var(--sk-theme-dark);
      --sk-ink-muted: var(--kit-muted);
      --sk-accent: var(--kit-accent);
      --sk-focus-ring-color: var(--sk-accent);
      --sk-stroke: var(--kit-divider);
      --sk-btn-bg: var(--kit-foreground);
      --sk-btn-ink: var(--kit-background);
      --sk-selection-bg: var(--sk-selection-page-bg);
      --sk-selection-ink: var(--sk-selection-page-ink);
      color: var(--sk-ink);
    }
    /* Restated: the verdict arms overwrite the ink on the root, so nothing is left to inherit. */
    &[data-style="island"][data-tone="inverted"] .sk-header-bar {
      /* The ground comes with the ink, which needs one to be read against. */
      --sk-bg: var(--kit-foreground);
      background-color: color-mix(
        in srgb,
        var(--sk-bg)
          calc(
            var(--sk-surface-opaque, 100) * 1% + var(--sk-surface-glass, 0) *
              var(--sk-glass-alpha, 0.92) * 100%
          ),
        transparent
      );
      --sk-ink: var(--kit-background);
      --sk-ink-on-dark: calc(1 - var(--sk-theme-dark));
      --sk-ink-muted: color-mix(in srgb, var(--kit-background) 62%, transparent);
      --sk-accent: color-mix(in srgb, var(--kit-accent) 55%, var(--kit-background));
      --sk-focus-ring-color: var(--sk-ink);
      --sk-stroke: color-mix(in srgb, var(--kit-background) 22%, transparent);
      --sk-btn-bg: var(--kit-background);
      --sk-btn-ink: var(--kit-foreground);
      /* The tone's selection pair, which the verdict clobbers. */
      --sk-selection-bg: var(--sk-ink);
      --sk-selection-ink: var(--sk-bg);
      color: var(--sk-ink);
    }
    &[data-style="island"][data-tone="accent"] .sk-header-bar {
      --sk-bg: var(--kit-accent);
      background-color: color-mix(
        in srgb,
        var(--sk-bg)
          calc(
            var(--sk-surface-opaque, 100) * 1% + var(--sk-surface-glass, 0) *
              var(--sk-glass-alpha, 0.92) * 100%
          ),
        transparent
      );
      --sk-ink: var(--kit-background);
      --sk-ink-on-dark: calc(1 - var(--sk-theme-dark));
      --sk-ink-muted: color-mix(in srgb, var(--kit-background) 78%, transparent);
      --sk-accent: var(--kit-background);
      --sk-focus-ring-color: var(--sk-ink);
      --sk-stroke: color-mix(in srgb, var(--kit-background) 30%, transparent);
      --sk-btn-bg: var(--kit-background);
      --sk-btn-ink: var(--kit-accent);
      --sk-selection-bg: var(--kit-background);
      --sk-selection-ink: var(--kit-foreground);
      color: var(--sk-ink);
    }
    /* `:is([data-chrome-verdict])` is weight: without it the later media verdict wins. */
    html[data-sk-menu="takeover"] &:is([data-chrome-verdict]) {
      --sk-chrome-scrim-opacity: 0;
    }
    &:not([data-chrome-verdict="unknown"]) {
      background-color: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border-bottom-color: transparent;
      color: var(--sk-ink);
    }
    &[data-chrome-verdict="media"]:not([data-surface="solid"], [data-surface="glass"]) {
      --sk-chrome-scrim-opacity: 1;
      --sk-ink: var(--sk-overlay-ink);
      --sk-ink-on-dark: 1;
      --sk-ink-muted: var(--sk-overlay-ink-muted);
      --sk-accent: var(--sk-overlay-ink-muted);
      --sk-focus-ring-color: var(--sk-overlay-ink);
      --sk-stroke: var(--sk-overlay-stroke);
      --sk-btn-bg: var(--sk-overlay-ink);
      --sk-btn-ink: rgb(14, 12, 10);
      --sk-selection-bg: var(--sk-selection-page-bg);
      --sk-selection-ink: var(--sk-selection-page-ink);
    }
    &[data-chrome-verdict="plain"]:not([data-surface="solid"], [data-surface="glass"]) {
      --sk-ink: var(--kit-foreground);
      --sk-ink-on-dark: var(--sk-theme-dark);
      --sk-ink-muted: var(--kit-muted);
      --sk-accent: var(--kit-accent);
      --sk-focus-ring-color: var(--sk-accent);
      --sk-stroke: var(--kit-divider);
      --sk-btn-bg: var(--kit-foreground);
      --sk-btn-ink: var(--kit-background);
    }
    &[data-chrome-verdict="inverted"]:not([data-surface="solid"], [data-surface="glass"]) {
      --sk-ink: var(--kit-background);
      --sk-ink-on-dark: calc(1 - var(--sk-theme-dark));
      --sk-ink-muted: color-mix(in srgb, var(--kit-background) 62%, transparent);
      --sk-accent: color-mix(in srgb, var(--kit-accent) 55%, var(--kit-background));
      --sk-focus-ring-color: var(--sk-ink);
      --sk-stroke: color-mix(in srgb, var(--kit-background) 22%, transparent);
      --sk-btn-bg: var(--kit-background);
      --sk-btn-ink: var(--kit-foreground);
      --sk-selection-bg: var(--sk-selection-page-bg);
      --sk-selection-ink: var(--sk-selection-page-ink);
    }
    &[data-chrome-verdict="accent"]:not([data-surface="solid"], [data-surface="glass"]) {
      --sk-ink: var(--kit-background);
      --sk-ink-on-dark: calc(1 - var(--sk-theme-dark));
      --sk-ink-muted: color-mix(in srgb, var(--kit-background) 78%, transparent);
      --sk-accent: var(--kit-background);
      --sk-focus-ring-color: var(--sk-ink);
      --sk-stroke: color-mix(in srgb, var(--kit-background) 30%, transparent);
      --sk-btn-bg: var(--kit-background);
      --sk-btn-ink: var(--kit-accent);
      --sk-selection-bg: var(--sk-selection-page-bg);
      --sk-selection-ink: var(--sk-selection-page-ink);
    }
    /* Nothing here restates a color, or Inverted and Accent go dark on dark. */
    &:is([data-surface="solid"], [data-surface="glass"]) {
      --sk-chrome-scrim-opacity: 0;
    }
    &:is([data-surface="solid"], [data-surface="glass"]):not(
        [data-style="island"],
        [data-scroll-mode="reveal"]
      ) {
      background-color: color-mix(
        in srgb,
        var(--sk-bg)
          calc(
            var(--sk-surface-opaque, 100) * 1% + var(--sk-surface-glass, 0) *
              var(--sk-glass-alpha, 0.92) * 100%
          ),
        transparent
      );
      backdrop-filter: var(--sk-glass-filter);
      -webkit-backdrop-filter: var(--sk-glass-filter);
      /* `, transparent`: an unresolved var() drops the color to currentColor. */
      border-bottom-color: var(--sk-header-rule, transparent);
    }
    &:is([data-surface="solid"], [data-surface="glass"])[data-style="island"] .sk-header-bar {
      background-color: color-mix(
        in srgb,
        var(--sk-bg)
          calc(
            var(--sk-surface-opaque, 100) * 1% + var(--sk-surface-glass, 0) *
              var(--sk-glass-alpha, 0.92) * 100%
          ),
        transparent
      );
    }
  }
  /* No `top`: the script writes it. An abspos child of a flex column positions at the content-box start (Flexbox 4.1). */
  &:not(:is([data-scroll-mode="pinned"], [data-scroll-mode="reveal"])) {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 30;
    /* Above an open takeover, whose only close is this toggle; a flat rule loses to this arm. */
    html[data-sk-menu="takeover"] & {
      z-index: 62;
    }
  }
  /* A fixed box resolves its auto top once and ignores scroll. */
  html[data-sk-js] &:is([data-scroll-mode="pinned"], [data-scroll-mode="reveal"]) {
    position: fixed;
    left: 0;
    right: 0;
    /* The ink set flips at once and a custom property does not interpolate. */
    transition: border-color 0.3s ease;
  }
  @media (prefers-reduced-motion: reduce) {
    html[data-sk-js] &:is([data-scroll-mode="pinned"], [data-scroll-mode="reveal"]) {
      transition: none;
    }
  }
  html[data-sk-js] &:is([data-scroll-mode="pinned"], [data-scroll-mode="reveal"])[data-scrolled] {
    background-color: color-mix(
      in srgb,
      var(--sk-bg)
        calc(
          var(--sk-surface-opaque, 92) * 1% + var(--sk-surface-glass, 0) *
            var(--sk-glass-alpha, 0.92) * 100%
        ),
      transparent
    );
    backdrop-filter: var(--sk-glass-filter);
    -webkit-backdrop-filter: var(--sk-glass-filter);
    border-bottom-color: var(--sk-header-rule, transparent);
  }
  /* (0,7,1) over the arm above's (0,6,1). */
  html[data-sk-js]
    &[data-style="island"]:is(
      [data-scroll-mode="pinned"],
      [data-scroll-mode="reveal"]
    )[data-scrolled] {
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
  }
  /* (0,7,1), as above. */
  html[data-sk-js]
    &:is(
      [data-scroll-mode="pinned"],
      [data-scroll-mode="reveal"]
    )[data-scroll-mode="reveal"][data-scrolled] {
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom-color: transparent;
  }
  /* The nested twin of the two arms outside this block: change both together. */
  html[data-sk-js]
    &:is([data-scroll-mode="pinned"], [data-scroll-mode="reveal"])[data-scroll-mode="reveal"]:not(
      [data-style="island"]
    )
    .sk-header-bar {
    border-bottom: var(--sk-header-rule-width, 0px) solid transparent;
  }
  html[data-sk-js]
    &:is(
      [data-scroll-mode="pinned"],
      [data-scroll-mode="reveal"]
    )[data-scroll-mode="reveal"][data-scrolled]:not([data-style="island"])
    .sk-header-bar {
    background-color: color-mix(
      in srgb,
      var(--sk-bg)
        calc(
          var(--sk-surface-opaque, 92) * 1% + var(--sk-surface-glass, 0) *
            var(--sk-glass-alpha, 0.92) * 100%
        ),
      transparent
    );
    backdrop-filter: var(--sk-glass-filter);
    -webkit-backdrop-filter: var(--sk-glass-filter);
    border-bottom-color: var(--sk-header-rule, transparent);
  }
  & .sk-header-bar {
    position: relative;
  }
  &:not([data-style="island"]) .sk-header-bar::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 50%;
    width: 100vw;
    translate: -50%;
    height: calc(100% + var(--sk-chrome-scrim-fade));
    z-index: -1;
    background: var(--sk-chrome-scrim);
    opacity: var(--sk-chrome-scrim-opacity, 0);
    /* A verdict known at parse time paints the wash at full: a transition needs a change. */
    transition: opacity var(--sk-dur-paint-live) var(--sk-ease-paint);
    pointer-events: none;
  }
  & .sk-el-nav-panel:not([data-tone]) {
    --sk-selection-bg: var(--sk-selection-page-bg);
    --sk-selection-ink: var(--sk-selection-page-ink);
    --sk-bg: var(--kit-background);
    --sk-surface: var(--kit-surface);
    --sk-card: var(--kit-surface);
    --sk-field: var(--kit-background);
    --sk-ink: var(--kit-foreground);
    --sk-ink-on-dark: var(--sk-theme-dark);
    --sk-ink-muted: var(--kit-muted);
    --sk-accent: var(--kit-accent);
    --sk-focus-ring-color: var(--sk-accent);
    --sk-stroke: var(--kit-divider);
    --sk-btn-bg: var(--kit-foreground);
    --sk-btn-ink: var(--kit-background);
    color: var(--sk-ink);
  }
  &:not(:is([data-scroll-mode="pinned"], [data-scroll-mode="reveal"]))
    + .sk-section:is([data-width="page"], [data-width="inset"]),
  html[data-sk-js]
    &:is([data-scroll-mode="pinned"], [data-scroll-mode="reveal"])
    + .sk-section:is([data-width="page"], [data-width="inset"]) {
    margin-block-start: 0;
    border-start-start-radius: 0;
    border-start-end-radius: 0;
    /* PUBLISHED here, read by the member's own frame; position takes it back. */
    --sk-chrome-dock-radius: 0px;
    --sk-band-seam: calc(var(--sk-band-pad) / 2);
  }
  &:not(:is([data-scroll-mode="pinned"], [data-scroll-mode="reveal"])) + .sk-section,
  html[data-sk-js] &:is([data-scroll-mode="pinned"], [data-scroll-mode="reveal"]) + .sk-section {
    --sk-chrome-clear: var(--sk-chrome-room);
    --sk-chrome-cover: calc(var(--sk-chrome-clear) + var(--sk-chrome-scrim-fade));
    padding-block-start: var(--sk-chrome-clear);
    --sk-chrome-stage: calc(
      var(--sk-band-stage, calc(100svh - var(--sk-chrome-above, 0px))) - var(--sk-chrome-clear)
    );
    --sk-chrome-row-stage: var(--sk-band-stage, calc(100svh - var(--sk-chrome-above, 0px)));
    /* An INDIRECTION, so a climbing member never contests this rank. Nested here
     * so the read cannot outlive the write, or the substitution goes invalid. */
    & > :where(.sk-component),
    & > .sk-section-col > :where(.sk-component:first-child) {
      --sk-band-stage: var(--sk-chrome-member-stage, var(--sk-chrome-stage));
    }
    /* A BORDER, not padding: both rect reads step past one, so it publishes. */
    &
      > .sk-component:is([data-tone="surface"], [data-tone="inverted"], [data-tone="accent"]):not(
        [data-chrome-ground="media"]
      ),
    & > .sk-section-col:is([data-tone="surface"], [data-tone="inverted"], [data-tone="accent"]) {
      margin-block-start: calc(-1 * var(--sk-chrome-clear));
      border-block-start: var(--sk-chrome-clear) solid transparent;
    }
    &
      > .sk-component:is([data-tone="surface"], [data-tone="inverted"], [data-tone="accent"]):not(
        [data-chrome-ground="media"]
      ) {
      --sk-chrome-paid: var(--sk-chrome-clear);
    }
    & > .sk-section-col > .sk-component:not(:first-child) {
      --sk-chrome-clear: 0px;
      --sk-chrome-cover: 0px;
      --sk-chrome-dock-radius: initial;
      --sk-band-stage: var(--sk-chrome-row-stage);
    }
    @media (width <= 900px) {
      & > :not(:nth-child(1 of :is(.sk-component, .sk-section-col))),
      &
        > .sk-section-col:not(:nth-child(1 of :is(.sk-component, .sk-section-col)))
        > .sk-component:first-child {
        --sk-chrome-clear: 0px;
        --sk-chrome-cover: 0px;
        --sk-chrome-dock-radius: initial;
        --sk-band-stage: var(--sk-chrome-row-stage);
      }
    }
  }
}

.sk-header:not(:is([data-overlap="hero"], [data-style="island"])) + .sk-section {
  --sk-chrome-push: var(--sk-chrome-room);
}
/* A guard-refused float still carries the attribute, so this arm reserves the bar's room scripts-off. */
html:not([data-sk-js])
  body:has([data-sk-furniture="top"] + .sk-header)
  .sk-header:is([data-overlap="hero"], [data-style="island"])
  + .sk-section {
  --sk-chrome-push: var(--sk-chrome-room);
}

.sk-header:not(:is([data-overlap="hero"], [data-style="island"]))
  + .sk-section
  > .sk-section-col
  > .sk-component:not(:first-child) {
  --sk-chrome-push: 0px;
}
.sk-header + .sk-section > .sk-section-col > .sk-component:not(:first-child) {
  --sk-chrome-strip: 0px;
}
@media (width <= 900px) {
  .sk-header + .sk-section > :not(:nth-child(1 of :is(.sk-component, .sk-section-col))) {
    --sk-chrome-strip: 0px;
  }
}
@media (width <= 900px) {
  .sk-header:not(:is([data-overlap="hero"], [data-style="island"]))
    + .sk-section
    > :not(:nth-child(1 of :is(.sk-component, .sk-section-col))) {
    --sk-chrome-push: 0px;
  }
}
.sk-header:is([data-scroll-mode="pinned"], [data-scroll-mode="reveal"]) ~ .sk-component,
.sk-header:is([data-scroll-mode="pinned"], [data-scroll-mode="reveal"])
  ~ .sk-section
  .sk-component {
  scroll-margin-top: var(--sk-chrome-room);
}

/* The transform rides the bar, never the root, whose top the script writes every tick. */
.sk-header:is([data-scroll-mode="pinned"], [data-scroll-mode="reveal"])[data-scroll-mode="reveal"]
  .sk-header-bar {
  transition:
    transform var(--sk-dur-bar) var(--sk-ease-bar),
    background-color var(--sk-dur-paint-live) var(--sk-ease-paint),
    color var(--sk-dur-paint-live) var(--sk-ease-paint),
    border-color var(--sk-dur-paint-live) var(--sk-ease-paint),
    box-shadow var(--sk-dur-paint-live) var(--sk-ease-paint);
}
.sk-header:is(
    [data-scroll-mode="pinned"],
    [data-scroll-mode="reveal"]
  )[data-scroll-mode="reveal"][data-scroll="past-down"]
  .sk-header-bar {
  transform: translateY(-100%);
}
/* The shadow goes with the bar: its cast reaches below the bar's edge. */
.sk-header:is(
    [data-scroll-mode="pinned"],
    [data-scroll-mode="reveal"]
  )[data-scroll-mode="reveal"][data-scroll="past-down"]
  .sk-header-bar {
  --sk-edge-cast: 0 0 #0000;
}
html[data-sk-js]
  .sk-header:is([data-scroll-mode="pinned"], [data-scroll-mode="reveal"])[data-scroll-mode="reveal"]
  .sk-header-bar {
  transition:
    transform var(--sk-dur-bar) var(--sk-ease-bar),
    box-shadow var(--sk-dur-bar) var(--sk-ease-bar),
    background-color var(--sk-dur-paint-live) var(--sk-ease-paint),
    color var(--sk-dur-paint-live) var(--sk-ease-paint),
    border-color var(--sk-dur-paint-live) var(--sk-ease-paint),
    backdrop-filter var(--sk-dur-paint-live) var(--sk-ease-paint),
    -webkit-backdrop-filter var(--sk-dur-paint-live) var(--sk-ease-paint);
}
.sk-header[data-style="island"]:is(
    [data-scroll-mode="pinned"],
    [data-scroll-mode="reveal"]
  )[data-scroll-mode="reveal"][data-scroll="past-down"]
  .sk-header-bar {
  transform: translateY(calc(-100% - var(--sk-gutter)));
}
/* Only the reservation moves: zeroing the room would reflow the page twice per turn. */
.sk-header:is(
    [data-scroll-mode="pinned"],
    [data-scroll-mode="reveal"]
  )[data-scroll-mode="reveal"][data-scroll="past-down"]
  ~ .sk-component,
.sk-header:is(
    [data-scroll-mode="pinned"],
    [data-scroll-mode="reveal"]
  )[data-scroll-mode="reveal"][data-scroll="past-down"]
  ~ .sk-section
  .sk-component {
  scroll-margin-top: 0px;
}
@media (prefers-reduced-motion: reduce) {
  /* `html[data-sk-js]` because the arm this cancels carries it. */
  html[data-sk-js]
    .sk-header:is(
      [data-scroll-mode="pinned"],
      [data-scroll-mode="reveal"]
    )[data-scroll-mode="reveal"]
    .sk-header-bar {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-header:is([data-scroll-mode="pinned"], [data-scroll-mode="reveal"]) {
    transition: none;
  }
}

.sk-header-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sk-bar-gap);
  /* min(1, max(0, v) / 50), not max(0, v - 49), which is a cliff at 50. */
  min-height: calc(
    var(--sk-bar-height) * var(--sk-bar-anchor, 1) *
      min(1, max(0, var(--sk-bar-height-dial, 50)) / 50) + 2 *
      max(0px, var(--sk-bar-pad-y) - var(--sk-bar-pad-theme))
  );
  padding-block: var(--sk-bar-pad-y);
}
.sk-header-bar {
  /* Stroke and cast share one box-shadow; `0 0 #0000` is a no-op that can sit in a list. */
  box-shadow: var(--sk-edge-stroke, 0 0 #0000), var(--sk-edge-cast, 0 0 #0000);
  /* Declared for every posture: an undeclared name voids the compact arm's calc(). */
  --sk-bar-rail: var(--sk-page-rail);
  --sk-bar-pad-step: var(--sk-bar-step, 0px);
  padding-inline: calc(var(--sk-bar-rail-start, var(--sk-bar-rail)) + var(--sk-bar-pad-step))
    calc(var(--sk-bar-rail-end, var(--sk-bar-rail)) + var(--sk-bar-pad-step));
  /* Border only: nothing the ink stands on may fade, and inline padding is what it stands on. Do not add the paint step here. */
  transition: border-color 0.3s ease;
  border-bottom: calc(var(--kit-bar-divider, 0) * 1px) solid var(--sk-stroke);
}
.sk-header[data-width="full"] .sk-header-bar {
  --sk-bar-rail: var(--sk-gutter);
}

/* A margin, not header padding: a percentage padding would shrink the box --sk-page-cap reads. */
/* fit-content, or the 1fr auto 1fr grid fills its box. */
.sk-header[data-style="island"] {
  --sk-bar-anchor: 0.76;
}
.sk-header[data-style="island"][data-width="auto"] .sk-header-bar {
  width: fit-content;
  /* min-width beats max-width, so the floor is clamped to the room. */
  min-width: min(var(--sk-island-min, 330px), calc(100% - 2 * var(--sk-page-rail)));
  max-width: calc(100% - 2 * var(--sk-page-rail));
  margin-inline: auto;
}
.sk-header[data-style="island"][data-width="auto"][data-island-align="left"] .sk-header-bar {
  margin-inline: calc(var(--sk-page-rail) + var(--sk-bar-step, 0px)) auto;
}
.sk-header[data-style="island"][data-width="auto"][data-island-align="right"] .sk-header-bar {
  margin-inline: auto calc(var(--sk-page-rail) + var(--sk-bar-step, 0px));
}

.sk-header[data-style="island"][data-width="page"] .sk-header-bar {
  --sk-island-rail: max(var(--sk-page-rail), var(--sk-float-inset-min));
}
.sk-header[data-style="island"] .sk-header-bar {
  --sk-island-rail: var(--sk-gutter);
  --sk-bar-pad-step: 0px;
  margin-inline: calc(var(--sk-island-rail) + var(--sk-bar-step, 0px));
  /* The script measures the floors CSS cannot: a corner allowance and the air above the tallest control. */
  --sk-bar-rail-start: clamp(
    calc(var(--sk-bar-pad-y) + var(--sk-island-allow-start, var(--sk-island-corner-allow, 0px))),
    var(--sk-bar-air, 0px),
    var(--sk-gutter)
  );
  --sk-bar-rail-end: clamp(
    calc(var(--sk-bar-pad-y) + var(--sk-island-allow-end, var(--sk-island-corner-allow, 0px))),
    var(--sk-bar-air, 0px),
    var(--sk-gutter)
  );
  --sk-bar-rail: clamp(
    calc(var(--sk-bar-pad-y) + var(--sk-island-corner-allow, 0px)),
    var(--sk-bar-air, 0px),
    var(--sk-gutter)
  );
  /* The button radius, not the panel's: under Full it is 999px and the island a stadium. */
  border-radius: var(--kit-round-button);
  border-bottom: none;
}
.sk-header[data-style="island"][data-border="true"] {
  border-bottom: none;
}
/* On the bar: on the root the verdict decides it, and the verdict stops once scrolled. */
.sk-header[data-style="island"][data-border="true"] .sk-header-bar {
  --sk-header-rule: color-mix(in srgb, var(--sk-ink) 30%, transparent);
}
.sk-header[data-style="island"][data-border="true"] .sk-header-bar {
  /* An inset shadow, not a border, which would push the first word off the rail. */
  --sk-edge-stroke: inset 0 0 0 var(--sk-header-rule-width) var(--sk-header-rule);
}

/* Kept in both scroll states, or the content jumps at the threshold. */
.sk-header {
  --sk-bar-step: calc(var(--sk-bar-paint-step, 0px) * var(--sk-bar-bare, 1));
}
.sk-header:is([data-surface="solid"], [data-surface="glass"]):not([data-style="island"]) {
  --sk-bar-bare: 0;
}
.sk-header:is([data-overlap="hero"], [data-style="island"]):has(
    + .sk-section[data-width="page"]:is(
        [data-tone="surface"],
        [data-tone="inverted"],
        [data-tone="accent"],
        [data-bg]
      ),
    + .sk-section[data-width="page"]
      > .sk-component:not([data-sk-face="flat"]):nth-child(1 of :is(.sk-component, .sk-section-col))
  ) {
  --sk-bar-paint-step: var(--sk-member-air);
}
.sk-header:is([data-overlap="hero"], [data-style="island"]):has(
    + .sk-section[data-width="inset"]:not([data-content="full"]):is(
        [data-tone="surface"],
        [data-tone="inverted"],
        [data-tone="accent"],
        [data-bg]
      ),
    + .sk-section[data-width="inset"]:not([data-content="full"])
      > .sk-component:not([data-sk-face="flat"]):nth-child(1 of :is(.sk-component, .sk-section-col))
  ) {
  --sk-bar-paint-step: var(--sk-inset-member-offset);
}
.sk-header:is([data-overlap="hero"], [data-style="island"]):has(
    + .sk-section[data-width="inset"][data-content="full"]:is(
        [data-tone="surface"],
        [data-tone="inverted"],
        [data-tone="accent"],
        [data-bg]
      ),
    + .sk-section[data-width="inset"][data-content="full"]
      > .sk-component:not([data-sk-face="flat"]):nth-child(1 of :is(.sk-component, .sk-section-col))
  ) {
  --sk-bar-paint-step: var(--sk-inset-flush-member-offset);
}

/* An empty center zone drops the symmetry, or an asymmetric bar measures 2 × its heavier side. */
.sk-header-bar:not(:has(> [data-zone="center"] > *)) {
  grid-template-columns: auto 1fr auto;
}

.sk-header-zone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sk-zone-gap);
  min-width: 0;
}
/* Under script a zone never wraps, so running out of room is an overflow the fold reads. */
html[data-sk-js] .sk-header-zone {
  flex-wrap: nowrap;
}
/* A flex item shrinks before it overflows, so a row that does not fit would report none. */
html[data-sk-js] .sk-header-zone > * {
  flex-shrink: 0;
}
/* The measuring pass sets max-content, so the fold still asks at full width. */
html[data-sk-js] .sk-header[data-compact]:not([data-sk-measuring]) .sk-header-zone > * {
  flex-shrink: 1;
  min-width: 0;
}
.sk-header-zone[data-zone="left"] {
  justify-content: flex-start;
}
.sk-header-zone[data-zone="center"] {
  justify-content: center;
}
.sk-header-zone[data-zone="right"] {
  justify-content: flex-end;
}

/* :has() reads the DOM, which the compact fold does not change. */
.sk-header[data-style="island"]
  .sk-header-zone[data-zone="left"]:has(
    > :is(.sk-el-logo, .sk-el-logo-text, .sk-el-nav-link):first-child
  ) {
  padding-inline-start: var(--sk-bare-text-inset);
}
.sk-header[data-style="island"]
  .sk-header-zone[data-zone="right"]:has(
    > :is(.sk-el-logo, .sk-el-logo-text, .sk-el-nav-link):last-child
  ) {
  padding-inline-end: var(--sk-bare-text-inset);
}
html[data-sk-js]
  .sk-header[data-compact][data-style="island"]
  .sk-header-zone[data-zone="left"][data-sk-zone-empty]
  ~ .sk-header-zone[data-zone="center"]:has(
    > :is(.sk-el-logo, .sk-el-logo-text, .sk-el-nav-link):first-child
  ) {
  padding-inline-start: var(--sk-bare-text-inset);
}

.sk-header[data-sk-editing] .sk-header-zone {
  min-height: 28px;
}
.sk-header[data-sk-editing] .sk-header-zone:not(:has(> *)) {
  min-width: 96px;
}

@media (max-width: 640px) {
  html:not([data-sk-js]) .sk-header-bar {
    display: flex;
    flex-wrap: wrap;
  }
  html:not([data-sk-js]) .sk-header-zone {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* The collapse reads the logo's natural one-line width; a wrapped box under-reports it. */
html[data-sk-js] .sk-header:not([data-compact]) .sk-header-bar .sk-el-logo {
  white-space: nowrap;
  min-width: auto;
}

/* Above 640 only; the engine's clamp skips flush panels. */
@media (width > 640px) {
  .sk-header[data-dropdowns="flush"] .sk-header-bar {
    position: relative;
  }
  .sk-header[data-dropdowns="flush"] .sk-el-nav-item {
    position: static;
  }
  /* The rail is a TRACK, not a padding the footer cancels: a track and the footer spanning it share one basis, a padding and a negative margin do not. */
  .sk-header[data-dropdowns="flush"] .sk-el-nav-item > .sk-el-nav-panel {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    margin-top: 0;
    border-radius: 0 0 var(--sk-card-radius) var(--sk-card-radius);
    border-inline: 0;
    padding-inline: 0;
  }
  .sk-header[data-dropdowns="flush"][data-style="island"] .sk-el-nav-item > .sk-el-nav-panel {
    /* The containing block is the bar, so 100% is the bar's height. */
    top: calc(100% + var(--sk-zone-gap));
    /* …and the bridge grows to cover it, or the shelf closes under the pointer. */
    --sk-panel-bridge: var(--sk-zone-gap);
    border-radius: var(--sk-header-corner, var(--sk-card-radius));
  }
  /* Keyed on the posture, not :hover, or the content jumps while the panel fades. */
  .sk-header[data-dropdowns="flush"] .sk-el-nav-item > .sk-el-nav-panel {
    grid-template-columns: var(--sk-page-rail) 1fr var(--sk-page-rail);
  }
  /* On the OPEN states: the closed pose is `display: none`. The featured arm outranks the nav sheet's by one `:has`. */
  .sk-header[data-dropdowns="flush"]
    .sk-el-nav-item:not([data-trigger="click"]):hover
    > .sk-el-nav-panel,
  .sk-header[data-dropdowns="flush"]
    .sk-el-nav-item:not([data-trigger="click"]):has(:focus-visible)
    > .sk-el-nav-panel,
  .sk-header[data-dropdowns="flush"] .sk-el-nav-item[data-sk-open] > .sk-el-nav-panel,
  .sk-header[data-dropdowns="flush"] .sk-el-nav-panel[data-sk-measure] {
    display: grid;
  }
  /* Shut, winning on order at (0,6,0): the nav's own shut arm cannot reach this one. */
  .sk-header[data-dropdowns="flush"]
    .sk-el-nav-item[data-sk-shut]
    > .sk-el-nav-panel:not([data-sk-measure]) {
    display: none;
  }

  /* Posture-keyed for weight: without it this loses to the nav's featured arm at (0,6,0). */
  .sk-header[data-dropdowns="flush"]:not([data-style="island"])
    .sk-el-nav-item
    > .sk-el-nav-panel:has(.sk-el-nav-featured) {
    grid-template-columns: var(--sk-page-rail) 1fr minmax(200px, 240px) var(--sk-page-rail);
    column-gap: 0;
  }
  /* Ties the featured arm at (0,6,0), so it must come later and carry the full open selectors. */
  .sk-header[data-style="island"][data-dropdowns="flush"] .sk-el-nav-item > .sk-el-nav-panel {
    grid-template-columns: var(--sk-bar-rail-start) 1fr var(--sk-bar-rail-end);
    /* The bar's own corner, not the card's: under a stadium it is half the bar's height. */
    border-end-start-radius: var(--sk-header-corner, var(--sk-card-radius));
    border-end-end-radius: var(--sk-header-corner, var(--sk-card-radius));
  }
  .sk-header[data-style="island"][data-dropdowns="flush"]
    .sk-el-nav-item
    > .sk-el-nav-panel:has(.sk-el-nav-featured) {
    grid-template-columns: var(--sk-bar-rail-start) 1fr minmax(200px, 240px) var(--sk-bar-rail-end);
    column-gap: 0;
  }
  .sk-header[data-dropdowns="flush"] .sk-el-nav-panel > .sk-el-nav-cols {
    grid-column: 2;
  }
  .sk-header[data-dropdowns="flush"] .sk-el-nav-panel > .sk-el-nav-featured {
    grid-column: 3;
  }
  .sk-header[data-dropdowns="flush"] .sk-el-nav-panel:has(.sk-el-nav-featured) > .sk-el-nav-cols {
    margin-inline-end: var(--kit-space-4);
  }
  .sk-header[data-dropdowns="flush"] .sk-el-nav-cols {
    justify-content: center;
    gap: var(--kit-space-5);
  }
  .sk-header[data-dropdowns="flush"] .sk-el-nav-colgroup {
    flex: 0 1 auto;
    max-width: 280px;
  }
  .sk-header[data-dropdowns="flush"] .sk-el-nav-panel > .sk-el-nav-panel-footer {
    grid-column: 1 / -1;
    margin-inline: 0;
    padding-inline: var(--sk-page-rail);
    border-radius: 0;
  }
  .sk-header[data-style="island"][data-dropdowns="flush"]
    .sk-el-nav-panel
    > .sk-el-nav-panel-footer {
    padding-inline: var(--sk-bar-rail-start) var(--sk-bar-rail-end);
  }
}

/* The sheet is appended to the body: a fixed panel inside the sticky bar is trapped by its backdrop-filter containing block. */
/* Padding, ground, edge and ink are the part's; declared here they would outweigh it. */
.sk-header-toggle {
  display: none;
  /* The template sets data-icon-only: a part cannot see a text node. */
  --sk-btn-tap: 44px;
  cursor: pointer;
}
html[data-sk-js] .sk-header .sk-header-toggle.sk-btn-link,
html[data-sk-js] .sk-header-sheet .sk-header-sheet-close.sk-btn-link {
  padding-block: var(--sk-btn-pad-s-block);
  border-width: var(--kit-edge-button);
  border-style: var(--kit-edge-style-button);
  border-color: transparent;
  border-radius: var(--kit-round-button);
}
/* Its own arm: a shorthand here would outweigh the part's square rule. */
html[data-sk-js] .sk-header .sk-header-toggle.sk-btn-link:not([data-icon-only]) {
  padding-inline: var(--sk-btn-pad-s-inline);
}
html[data-sk-js] .sk-header[data-compact] .sk-header-toggle {
  display: inline-flex;
}

html[data-sk-js] .sk-header[data-menu="none"] .sk-header-toggle {
  display: none;
}
/* Scoped to the header bar, so footer zones and the sheet's clones stay visible. */
html[data-sk-js] .sk-header[data-compact] .sk-header-bar :is(.sk-el-nav, .sk-el-dropdown) {
  display: none;
}
html[data-sk-js]
  .sk-header[data-compact]:not([data-collapse="always"])
  .sk-header-bar
  :is(.sk-el-button, .sk-language) {
  display: none;
}
html[data-sk-js] .sk-header[data-compact] .sk-header-bar [data-sk-folded] {
  display: none;
}
/* The wordmark stops yielding while actions are measured, or none ever folds. */
html[data-sk-js] .sk-header[data-sk-measuring] .sk-header-bar .sk-el-logo {
  min-width: max-content;
  overflow: visible;
  text-overflow: clip;
}
html[data-sk-js]
  .sk-header[data-compact]:not([data-menu="none"])
  .sk-header-bar
  :is(.sk-separator, .sk-textrun, .sk-el-spacer) {
  display: none;
}
html[data-sk-js] .sk-header[data-compact] .sk-header-zone > .sk-el-nav-link {
  display: none;
}
html[data-sk-js] .sk-header[data-compact] .sk-header-bar .sk-icon {
  min-width: 44px;
  min-height: 44px;
}
html[data-sk-js] .sk-header[data-compact] .sk-header-bar .sk-icons {
  gap: 0;
}
html[data-sk-menu] {
  overflow: hidden;
}
/* Below the bar under sheet only: takeover and drawer cover the bar. */
.sk-header-scrim[data-menu-style="sheet"] {
  z-index: 29;
}
/* A layer for the bar: under the defaults the header is static with no z-index. */
html[data-sk-menu="sheet"]
  .sk-header:not([data-scroll-mode="pinned"], [data-scroll-mode="reveal"]) {
  position: relative;
  z-index: 30;
}
/* The header's empty band passes clicks to the dimmer, which closes the menu. */
html[data-sk-menu="sheet"] .sk-header {
  pointer-events: none;
}
html[data-sk-menu="sheet"] .sk-header .sk-header-bar {
  pointer-events: auto;
}
/* Above the sheet's layer (62): the logo and the close stay in front. */
/* Hidden only once there is a menu, since hiding it is what shows its clone there. */
html[data-sk-js] .sk-header[data-compact] .sk-header-zone > [data-sk-placement="menu"] {
  display: none;
}
html[data-sk-menu="takeover"] .sk-header {
  z-index: 62;
}
html[data-sk-menu="takeover"] .sk-header,
html[data-sk-menu="takeover"] .sk-header .sk-header-bar,
html[data-sk-menu="takeover"] .sk-header .sk-header-zone[data-zone="center"] {
  --sk-edge-stroke: 0 0 #0000;
  --sk-edge-cast: 0 0 #0000;
  border-color: transparent;
  transition:
    box-shadow var(--sk-dur-sheet) var(--sk-ease-out),
    border-color var(--sk-dur-sheet) var(--sk-ease-out);
}
@media (prefers-reduced-motion: reduce) {
  html[data-sk-menu="takeover"] .sk-header,
  html[data-sk-menu="takeover"] .sk-header .sk-header-bar,
  html[data-sk-menu="takeover"] .sk-header .sk-header-zone[data-zone="center"] {
    transition: none;
  }
}
html[data-sk-menu="takeover"]
  .sk-header:not(:is([data-scroll-mode="pinned"], [data-scroll-mode="reveal"])) {
  position: relative;
}
.sk-header-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity calc(var(--sk-dur-sheet) * var(--sk-dur-close)) var(--sk-ease-out);
}
.sk-header-scrim[data-open] {
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--sk-dur-sheet) var(--sk-ease-out);
}
.sk-header-scrim[data-menu-style="takeover"] {
  transition: opacity calc(var(--sk-dur-takeover) * var(--sk-dur-close)) var(--sk-ease-out);
}
.sk-header-scrim[data-menu-style="takeover"][data-open] {
  transition: opacity var(--sk-dur-takeover) var(--sk-ease-out);
}
.sk-header-scrim[data-menu-style="panel"] {
  transition: opacity calc(var(--sk-dur-drawer) * 0.75 * var(--sk-dur-close)) var(--sk-ease-drawer);
}
.sk-header-scrim[data-menu-style="panel"][data-open] {
  transition: opacity calc(var(--sk-dur-drawer) * 0.75) var(--sk-ease-drawer);
}
/* The flip is delayed on the way out so the slide plays. */
.sk-header-sheet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 61;
  width: min(22rem, 86vw);
  display: flex;
  flex-direction: column;
  gap: var(--kit-space-3);
  overflow-y: auto;
  padding: var(--sk-panel-pad);
  padding-top: calc(var(--sk-gutter) + env(safe-area-inset-top, 0px));
  /* Physical left and right, because the script's measurements are physical. */
  padding-left: max(
    var(--sk-gutter),
    calc(
      var(--sk-sheet-inset-start, var(--sk-panel-pad)) - var(--sk-menu-row-air, 0px) +
        env(safe-area-inset-left, 0px)
    )
  );
  padding-right: max(
    var(--sk-gutter),
    calc(
      var(--sk-sheet-inset-end, var(--sk-panel-pad)) - var(--sk-menu-row-air, 0px) +
        env(safe-area-inset-right, 0px)
    )
  );
  padding-bottom: calc(var(--sk-panel-pad) + env(safe-area-inset-bottom, 0px));
  background: var(--sk-bg);
  color: var(--sk-ink);
  /* The stroke stays in the box, transparent when off, so the card never changes size. */
  --sk-sheet-stroke: var(--sk-border-width-min) solid transparent;
  --sk-sheet-cast: none;
  border-left: var(--sk-sheet-stroke);
  box-shadow: var(--sk-sheet-cast);
  /* 102%, not 100%: at its own width a closed drawer's shadow still shows. */
  --sk-drawer-from: calc(102% * var(--sk-drawer-side));
  --sk-drawer-row-from: calc(14px * var(--sk-drawer-side));
  --sk-panel-shadow-x: calc(-18px * var(--sk-drawer-side));
  --sk-panel-shadow-y: 0;
  --sk-drawer-side: 1;
  transform: translateX(var(--sk-drawer-from));
  visibility: hidden;
  transition:
    transform calc(var(--sk-dur-drawer) * var(--sk-dur-close)) var(--sk-ease-drawer),
    visibility 0s calc(var(--sk-dur-drawer) * var(--sk-dur-close));
}
/* Keyed on the menu style, not a rung, or a desktop Always + Takeover shows the drawer. */
.sk-header-sheet[data-menu-style="takeover"] {
  left: 0;
  width: auto;
  border-left: 0;
  padding-left: calc(
    min(
        var(--sk-header-rail, var(--sk-panel-pad)),
        max(var(--sk-panel-pad, 20px), (100% - var(--sk-menu-min, 330px)) / 2)
      ) -
      var(--sk-menu-row-air, 0px) + env(safe-area-inset-left, 0px)
  );
  padding-right: calc(
    min(
        var(--sk-header-rail-end, var(--sk-header-rail, var(--sk-panel-pad))),
        max(var(--sk-panel-pad, 20px), (100% - var(--sk-menu-min, 330px)) / 2)
      ) -
      var(--sk-menu-row-air, 0px) + env(safe-area-inset-right, 0px)
  );
  padding-top: calc(var(--sk-header-room, 0px) + var(--sk-panel-pad));

  /* A fade only: any transform uncovers a band of the page. */
  opacity: 0;
  transition:
    opacity calc(var(--sk-dur-takeover) * var(--sk-dur-close)) var(--sk-ease-out),
    visibility 0s calc(var(--sk-dur-takeover) * var(--sk-dur-close));
}
/* Not on the panel's box, where left and right with a min size would overflow. */
.sk-header-sheet[data-menu-style="takeover"][data-bar-style="island"][data-bar-width="auto"] {
  padding-left: calc(
    min(
        max(var(--sk-menu-left), var(--sk-header-rail, 0px)),
        max(var(--sk-panel-pad, 20px), (100% - var(--sk-menu-min, 330px)) / 2)
      ) -
      var(--sk-menu-row-air, 0px) + env(safe-area-inset-left, 0px)
  );
  padding-right: calc(
    min(
        max(
          max(0px, 100% - var(--sk-menu-left) - var(--sk-menu-w)),
          var(--sk-header-rail-end, 0px)
        ),
        max(var(--sk-panel-pad, 20px), (100% - var(--sk-menu-min, 330px)) / 2)
      ) -
      var(--sk-menu-row-air, 0px) + env(safe-area-inset-right, 0px)
  );
}

.sk-header-sheet[data-menu-style="takeover"][data-open] {
  opacity: 1;
  transition: opacity var(--sk-dur-takeover) var(--sk-ease-out);
}
.sk-header-sheet[data-menu-style="takeover"] .sk-header-sheet-link:not([data-sub]) {
  min-height: 52px;
}
/* Not gated on a rung: Always + Sheet is a desktop posture too. */
.sk-header-sheet[data-menu-style="sheet"] {
  --sk-sheet-gap: calc(var(--sk-gutter) / 2);
  /* The last name must resolve here: --sk-chrome-room is declared on the siblings. */
  --sk-sheet-seat: calc(
    var(--sk-header-room, var(--sk-chrome-room-measured, var(--sk-bar-height, 64px))) +
      var(--sk-sheet-gap)
  );
  top: var(--sk-sheet-seat);
  bottom: auto;
  left: min(var(--sk-gutter), calc(var(--sk-header-rail, 100vw) - var(--kit-space-2)));
  right: min(var(--sk-gutter), calc(var(--sk-header-rail-end, 100vw) - var(--kit-space-2)));
  /* `clip`, not `hidden`, so the block axis keeps its scroller. */
  overflow-x: clip;
  width: auto;
  /* Capped above the fold: the page is scroll-locked, so a long menu scrolls inside. */
  max-block-size: calc(100dvh - var(--sk-sheet-seat) - var(--sk-gutter));
  border: var(--sk-sheet-stroke);
  --sk-menu-corner: 0px;
  border-radius: var(--sk-menu-corner);
  /* The panel pad is the no-script fallback. */
  padding-left: calc(
    var(--sk-sheet-inset-start, var(--sk-panel-pad)) - var(--sk-menu-row-air, 0px) +
      env(safe-area-inset-left, 0px)
  );
  padding-right: calc(
    var(--sk-sheet-inset-end, var(--sk-panel-pad)) - var(--sk-menu-row-air, 0px) +
      env(safe-area-inset-right, 0px)
  );
  padding-top: var(--sk-panel-pad);
  /* The one surface allowed to fade its plate: its ink arrives with it on <body>. */
  transform: scale(1.04);
  opacity: 0;
  transition:
    opacity calc(var(--sk-dur-sheet) * var(--sk-dur-close)) var(--sk-ease-sheet),
    transform calc(var(--sk-dur-sheet) * var(--sk-dur-close)) var(--sk-ease-sheet),
    visibility 0s calc(var(--sk-dur-sheet) * var(--sk-dur-close));
}
.sk-header-sheet[data-menu-style="sheet"][data-bar-style="island"][data-bar-width="auto"] {
  left: var(--sk-menu-left);
  right: auto;
  inline-size: var(--sk-menu-w);
}
.sk-header-sheet[data-menu-style="sheet"][data-bar-style="island"] {
  border-radius: var(--sk-header-corner, var(--sk-card-radius));
  left: var(--sk-header-edge-start, var(--sk-gutter));
  right: var(--sk-header-edge-end, var(--sk-gutter));
}
/* Grows about the bar's center, clamped to the page column; pinning both edges would overflow. */
.sk-header-sheet {
  --sk-menu-w: min(
    max(var(--sk-header-span, 0px), var(--sk-menu-min, 330px)),
    calc(100dvw - 2 * var(--sk-gutter))
  );
  --sk-menu-left: clamp(
    var(--sk-gutter),
    calc(var(--sk-header-mid, 50vw) - var(--sk-menu-w) / 2),
    calc(100dvw - var(--sk-gutter) - var(--sk-menu-w))
  );
}

.sk-header-sheet[data-menu-style="sheet"][data-open] {
  transform: none;
  opacity: 1;
  transition:
    opacity var(--sk-dur-sheet) var(--sk-ease-sheet),
    transform var(--sk-dur-sheet) var(--sk-ease-sheet);
}

.sk-header-sheet:not([data-menu-style="takeover"])[data-bar-shadow="true"] {
  --sk-sheet-cast: var(--sk-panel-shadow);
}

.sk-header-sheet[data-menu-align="center"] {
  text-align: center;
}
.sk-header-sheet[data-menu-align="center"] .sk-header-sheet-link {
  justify-content: center;
}
.sk-header-sheet[data-menu-align="right"] {
  text-align: right;
}
.sk-header-sheet[data-menu-align="right"] .sk-header-sheet-link {
  justify-content: flex-end;
}
/* Auto margins collapse to 0 once content overflows, so a tall menu flows from the top. */
.sk-header-sheet:is(
    [data-menu-style="takeover"],
    [data-menu-style="panel"]
  )[data-menu-position="center"]
  .sk-header-sheet-nav {
  margin-block: auto;
}
.sk-header-sheet:is(
    [data-menu-style="takeover"],
    [data-menu-style="panel"]
  )[data-menu-position="center"]
  .sk-header-sheet-actions {
  margin-top: 0;
}

.sk-header-sheet-bar {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 var(--kit-space-3) 0;
}
.sk-header-sheet-close {
  --sk-btn-tap: 44px;
  cursor: pointer;
  margin-inline-end: calc(-1 * var(--sk-btn-overhang, 0px));
}

.sk-header-sheet[data-menu-style="panel"][data-bar-style="island"][data-bar-width="auto"][data-bar-align="left"] {
  right: auto;
  left: 0;
  --sk-drawer-side: -1;
  border-left: 0;
  border-right: var(--sk-sheet-stroke);
}
/* Its own open arm: the shared one is (0,2,0) against the closed transform's (0,5,0). */
.sk-header-sheet[data-menu-style="panel"][data-bar-style="island"][data-bar-width="auto"][data-bar-align="left"][data-open] {
  transform: translateX(0);
}
.sk-header-sheet[data-open] {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--sk-dur-drawer) var(--sk-ease-drawer);
}
html[data-sk-js] .sk-header-sheet[data-menu-style="panel"] {
  --sk-menu-row-from: translateX(var(--sk-drawer-row-from));
}

/* The script copies the curve across; the fallback keeps the declaration valid without it. */
html[data-sk-js] .sk-header-sheet {
  --sk-dur-menu-item: calc(350ms / max(abs(var(--sk-anim-intensity, 1)), 0.1));
  --sk-menu-item-lead: calc(140ms / max(abs(var(--sk-anim-intensity, 1)), 0.1));
  /* Outranks the entrance part's [data-sk] default: (0,2,0) against (0,1,0). */
  --sk-cascade-beat: calc(60ms / max(abs(var(--sk-anim-intensity, 1)), 0.1));
}
@media (prefers-reduced-motion: no-preference) {
  html[data-sk-js] .sk-header-sheet [data-sk-reveal] {
    opacity: 0;
    /* Explicit: the theme's pose rule ties this at (0,2,0) in a separate file. */
    transform: var(--sk-menu-row-from, var(--sk-panel-anim-from, translateY(14px)));
    transition:
      opacity var(--sk-dur-menu-item) var(--sk-ease-bar, ease-in-out),
      transform var(--sk-dur-menu-item) var(--sk-ease-bar, ease-in-out);
  }
  html[data-sk-js] .sk-header-sheet [data-sk-reveal].sk-in {
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--sk-menu-item-lead) + var(--sk-reveal-delay, 0ms));
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-sk-js] .sk-header-sheet [data-sk-reveal] {
    opacity: 0;
    transition: opacity var(--sk-dur-menu-item) var(--sk-ease-bar, ease-in-out);
  }
  html[data-sk-js] .sk-header-sheet [data-sk-reveal].sk-in {
    opacity: 1;
    transition-delay: calc(var(--sk-menu-item-lead) + var(--sk-reveal-delay, 0ms));
  }
}
/* The alignment dial places the block; its text-align would otherwise reach the words. */
.sk-header-sheet .sk-header-sheet-nav {
  text-align: start;
}
.sk-header-sheet .sk-header-sheet-nav .sk-header-sheet-link {
  justify-content: flex-start;
  text-align: start;
}
.sk-header-sheet[data-menu-style="panel"] .sk-header-sheet-nav {
  margin-inline: calc(-1 * var(--sk-menu-row-air, 0px));
}
.sk-header-sheet-nav {
  display: flex;
  flex-direction: column;
  --sk-menu-row-gap: calc(var(--sk-zone-gap, 16px) / 2);
  --sk-menu-sub-air: 4px;
}
.sk-header-sheet-link {
  display: flex;
  align-items: center;
  gap: 0.45em;
  min-height: 44px;
  padding: var(--kit-space-2);
  inline-size: 100%;
  border-radius: calc(var(--sk-card-radius-1) * 0.6);
  transition: background-color var(--sk-dur-paint-live, 140ms) var(--sk-ease-paint, ease);
  text-decoration: none;
  color: var(--sk-ink);
}
/* The divider is on the seat, never the row, so it sits below the plate's rounded corners. */
.sk-header-sheet-nav > .sk-header-sheet-seat,
.sk-header-sheet-nav > .sk-header-sheet-group {
  border-bottom: var(--sk-border-width-min) solid var(--sk-stroke);
}
.sk-header-sheet-nav > :last-child {
  border-bottom: 0;
}
.sk-header-sheet-nav > .sk-header-sheet-seat > .sk-header-sheet-link,
.sk-header-sheet-nav > .sk-header-sheet-group > .sk-header-sheet-link {
  margin-block: 0;
  border-radius: 0;
}
.sk-header-sheet-nav > :first-child > .sk-header-sheet-link {
  border-start-start-radius: var(--sk-menu-corner, 0px);
  border-start-end-radius: var(--sk-menu-corner, 0px);
}
.sk-header-sheet-nav > :last-child > .sk-header-sheet-link {
  border-end-start-radius: var(--sk-menu-corner, 0px);
  border-end-end-radius: var(--sk-menu-corner, 0px);
}
.sk-header-sheet-link[data-sub] {
  /* A stated 36 keeps sub-rows above the 24px target minimum in every dress. */
  min-block-size: 36px;
  padding-block: var(--sk-menu-sub-air);
  border-radius: calc(var(--sk-card-radius-1) * 0.6);
  border-bottom: 0;
  color: var(--sk-ink-muted);
}
.sk-header-sheet-link[data-active="true"],
.sk-header-sheet-link[aria-current="page"] {
  color: var(--sk-ink);
}
.sk-header-sheet-featured {
  padding-inline: var(--kit-space-2);
  display: flex;
  gap: var(--kit-space-3);
  align-items: center;
  min-height: 36px;
  padding-block: var(--kit-space-2);
  text-decoration: none;
  color: var(--sk-ink);
}
.sk-header-sheet-featured-img {
  flex: none;
  width: 96px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: calc(var(--sk-card-radius-1) * 0.6);
}
.sk-header-sheet-featured-text {
  display: flex;
  flex-direction: column;
  gap: calc(var(--kit-space-1) / 2);
  min-width: 0;
}
.sk-header-sheet-featured-title {
  font-weight: 600;
}
.sk-header-sheet-group {
  display: flex;
  flex-direction: column;
  border-bottom: var(--sk-border-width-min) solid var(--sk-stroke);
}
/* A cloned trigger re-voiced by the link class; the group carries the row's hairline. */
button.sk-header-sheet-link {
  background: none;
  border: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--sk-ink);
}
/* The turn is the part's: a transform here would compose with its rotate and cancel it. */
/* Animatable height:auto. The inner's padding transitions to 0 in step, or it holds the collapsed height above zero. */
.sk-header-sheet-link > .sk-btn-glyph[data-at="caret"] {
  margin-inline-start: auto;
}
.sk-header-sheet-mark {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  rotate: -90deg;
}
/* An SVG has no bidi mirroring, so the mark turns with the writing mode. */
:dir(rtl) .sk-header-sheet-mark {
  rotate: 90deg;
}
/* Stated here: a component sheet may not define another element's shared class. */
.sk-header-sheet-colhead {
  padding-inline: var(--kit-space-2);
  font-size: var(--sk-text-detail-size);
  font-weight: var(--kit-weight-eyebrow);
  letter-spacing: calc(var(--kit-track-nav) * 1em);
  text-transform: var(--kit-caps-eyebrow);
  color: var(--sk-ink-muted);
  margin-block: calc(var(--sk-zone-gap, 16px) * 1.5) calc(var(--sk-zone-gap, 16px) / 2);
}
.sk-header-sheet-colhead:first-child {
  margin-block-start: 0;
}

.sk-header-sheet {
  container-type: inline-size;
  container-name: sk-menu;
}
/* 560 is the kit rung above two columns plus the menu's insets. */
@container sk-menu (min-width: 560px) {
  .sk-header-sheet .sk-header-sheet-nav:has(.sk-header-sheet-group) {
    /* Block: `columns` has no effect on a flex container. */
    display: block;
    --sk-menu-col-w: 200px;
    columns: var(--sk-menu-col-w);
    column-gap: var(--kit-space-4);
    /* The count is read off the laid-out block, so an unset count must not constrain it. */
    inline-size: min(
      100%,
      calc(
        var(--sk-menu-col-count, 99) * var(--sk-menu-col-w) + (var(--sk-menu-col-count, 99) - 1) *
          var(--kit-space-4)
      )
    );
    text-align: start;
    margin-inline: 0 auto;
  }

  .sk-header-sheet[data-menu-align="center"] .sk-header-sheet-nav:has(.sk-header-sheet-group) {
    margin-inline: auto;
  }
  .sk-header-sheet[data-menu-align="right"] .sk-header-sheet-nav:has(.sk-header-sheet-group) {
    margin-inline: auto 0;
  }
  .sk-header-sheet-nav:has(.sk-header-sheet-group) > .sk-header-sheet-group,
  .sk-header-sheet-nav:has(.sk-header-sheet-group) > .sk-header-sheet-seat {
    break-inside: avoid;
  }
  .sk-header-sheet-nav:has(.sk-header-sheet-group)
    .sk-header-sheet-link[aria-expanded]
    + .sk-header-sheet-group-body {
    grid-template-rows: 1fr;
    visibility: visible;
  }
  .sk-header-sheet-nav:has(.sk-header-sheet-group)
    .sk-header-sheet-link[aria-expanded]
    + .sk-header-sheet-group-body
    > div {
    opacity: 1;
  }
  .sk-header-sheet-nav:has(.sk-header-sheet-group)
    .sk-header-sheet-group
    > .sk-header-sheet-link
    > .sk-btn-glyph[data-at="caret"] {
    display: none;
  }
  .sk-header-sheet-nav:has(.sk-header-sheet-group) > .sk-header-sheet-group:not(:first-child) {
    margin-block-start: var(--sk-zone-gap, 16px);
  }
  .sk-header-sheet-nav:has(.sk-header-sheet-group) > .sk-header-sheet-seat,
  .sk-header-sheet-nav:has(.sk-header-sheet-group) > .sk-header-sheet-group {
    border-bottom: 0;
  }
  .sk-header-sheet-nav:has(.sk-header-sheet-group) > .sk-header-sheet-seat > .sk-header-sheet-link,
  .sk-header-sheet-nav:has(.sk-header-sheet-group)
    > .sk-header-sheet-group
    > .sk-header-sheet-link {
    margin-block: calc(var(--sk-menu-row-gap) / 2);
    border-radius: calc(var(--sk-card-radius-1) * 0.6);
  }
}

a.sk-header-sheet-link:hover,
button.sk-header-sheet-link:hover,
.sk-header-sheet-link:focus-visible {
  background-color: color-mix(in srgb, var(--sk-ink) 14%, transparent);
}
button.sk-header-sheet-link[aria-expanded="true"]:hover {
  background-color: transparent;
}
span.sk-header-sheet-link {
  cursor: default;
}
/* Inside the row, which reaches the card's edge, where overflow would cut an outside ring. */
.sk-header-sheet-link {
  --sk-focus-ring-offset: -3px;
}
.sk-header-sheet-group-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.3s var(--sk-ease-out);
}
.sk-header-sheet-group-body > div {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding-block: calc(var(--sk-zone-gap, 16px) / 2) var(--kit-space-3);
  transition: padding 0.3s var(--sk-ease-out);
}
.sk-header-sheet-link[aria-expanded="false"] + .sk-header-sheet-group-body {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows 0.3s var(--sk-ease-out),
    visibility 0s 0.3s;
}
.sk-header-sheet-link[aria-expanded="false"] + .sk-header-sheet-group-body > div {
  padding-block: 0;
}
.sk-header-sheet-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--kit-space-2);
  padding-top: var(--kit-space-3);
}
.sk-header-sheet-actions :is(.sk-btn, .sk-btn-button, .sk-btn-outline, .sk-btn-link) {
  display: flex;
  justify-content: center;
}
.sk-header-sheet-actions .sk-language {
  align-self: center;
}
/* A seat per action, so the stagger moves the header's box and the part keeps its transition. */
.sk-header-sheet-seat {
  display: flex;
  flex-direction: column;
}
.sk-header-sheet-actions .sk-header-sheet-seat:has(> .sk-language) {
  align-self: center;
}
/* Mounted on <body>, outside [data-sk], so the blanket motion floor cannot reach these. */
@media (prefers-reduced-motion: reduce) {
  /* Every open and posture arm at its own weight, or the posture arms outweigh this floor. */
  .sk-header-scrim,
  .sk-header-scrim[data-open],
  .sk-header-sheet,
  .sk-header-sheet[data-open],
  .sk-header-sheet[data-menu-style="sheet"],
  .sk-header-sheet[data-menu-style="sheet"][data-open],
  .sk-header-sheet[data-menu-style="takeover"],
  .sk-header-sheet[data-menu-style="takeover"][data-open] {
    transition: none;
  }
  .sk-header-bar::before {
    transition: none;
  }
}

/* An emptied zone is removed, or a zero-width item takes a gap on each side. */
html[data-sk-js] .sk-header[data-compact] .sk-header-bar {
  display: flex;
  align-items: center;
  gap: var(--sk-bar-gap);
}
html[data-sk-js] .sk-header[data-compact] .sk-header-zone {
  display: flex;
  align-items: center;
  gap: var(--sk-zone-gap);
}
html[data-sk-js] .sk-header[data-compact] .sk-header-zone[data-sk-zone-empty] {
  display: none;
}
html[data-sk-js] .sk-header[data-compact] .sk-header-bar {
  justify-content: flex-end;
}
html[data-sk-js]
  .sk-header[data-compact]
  .sk-header-zone[data-zone="left"]:not([data-sk-zone-empty]) {
  margin-inline-end: auto;
}
html[data-sk-js]
  .sk-header[data-compact]
  .sk-header-zone[data-zone="left"][data-sk-zone-empty]
  ~ .sk-header-zone[data-zone="center"]:not([data-sk-zone-empty]) {
  margin-inline-end: auto;
}
/* Overrides the logo's `anywhere`, or the word breaks and never ellipsizes. */
html[data-sk-js] .sk-header[data-compact] .sk-header-bar .sk-el-logo-text {
  overflow: hidden;
  overflow-wrap: normal;
  /* text-overflow acts on one line, so nowrap is what makes the ellipsis exist. */
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* These follow the verdict block and restate it: under Glass the tone's ink is authoritative. */
/* A panel cannot be glass: inside the bar, a backdrop root, its filter has nothing to blur. */
.sk-header[data-surface="solid"] :is(.sk-el-nav-panel, .sk-el-nav-drop-panel),
.sk-header[data-surface="glass"] :is(.sk-el-nav-panel, .sk-el-nav-drop-panel),
.sk-header[data-surface="dynamic"] :is(.sk-el-nav-panel, .sk-el-nav-drop-panel),
.sk-header[data-surface="none"] :is(.sk-el-nav-panel, .sk-el-nav-drop-panel) {
  background-color: var(--sk-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.sk-header-sheet[data-bar-surface="solid"] {
  background-color: var(--sk-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.sk-header-sheet[data-bar-surface="dynamic"] {
  background-color: color-mix(
    in srgb,
    var(--sk-bg)
      calc(
        var(--sk-surface-opaque, 92) * 1% + var(--sk-surface-glass, 0) *
          var(--sk-glass-alpha, 0.92) * 100%
      ),
    transparent
  );
  backdrop-filter: var(--sk-glass-filter, none);
  -webkit-backdrop-filter: var(--sk-glass-filter, none);
}
.sk-header-sheet[data-bar-surface="glass"] {
  background-color: color-mix(
    in srgb,
    var(--sk-bg) calc(var(--sk-glass-alpha, 0.92) * 100%),
    transparent
  );
  /* Copied by the script; the `none` fallback keeps the declaration valid before it lands. */
  backdrop-filter: var(--sk-glass-filter, none);
  -webkit-backdrop-filter: var(--sk-glass-filter, none);
}
/* A takeover is solid: glass behind glass reads as two materials. After the material arms. */
.sk-header-sheet[data-menu-style="takeover"] {
  background-color: var(--sk-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.sk-header[data-surface="solid"] {
  --sk-surface-opaque: 100;
  --sk-surface-glass: 0;
  --sk-glass-filter: none;
}
/* One box carries the material: two filters stack, and a root ground on an island is a plate. */
.sk-header[data-surface="solid"]:not([data-style="island"], [data-scroll-mode="reveal"]),
.sk-header[data-surface="solid"]:is([data-style="island"], [data-scroll-mode="reveal"])
  .sk-header-bar {
  background-color: var(--sk-bg);
}
.sk-header[data-surface="solid"],
.sk-header[data-surface="solid"] .sk-header-bar {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.sk-header[data-surface="glass"] {
  --sk-surface-opaque: 0;
  --sk-surface-glass: 1;
}
.sk-header[data-surface="glass"]:not([data-style="island"], [data-scroll-mode="reveal"]),
.sk-header[data-surface="glass"]:is([data-style="island"], [data-scroll-mode="reveal"])
  .sk-header-bar {
  backdrop-filter: var(--sk-glass-filter);
  -webkit-backdrop-filter: var(--sk-glass-filter);
}
.sk-header[data-surface="glass"]:is([data-style="island"], [data-scroll-mode="reveal"]),
.sk-header[data-surface="glass"]:not([data-style="island"], [data-scroll-mode="reveal"])
  .sk-header-bar {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* None only in the posture that offers it; a stored None elsewhere renders as Dynamic. */
.sk-header[data-surface="none"][data-style="standard"][data-overlap="none"][data-scroll-mode="normal"][data-tone="default"] {
  --sk-surface-opaque: 0;
  --sk-surface-glass: 0;
}
.sk-header[data-surface="none"][data-style="standard"][data-overlap="none"][data-scroll-mode="normal"][data-tone="default"],
.sk-header[data-surface="none"][data-style="standard"][data-overlap="none"][data-scroll-mode="normal"][data-tone="default"]
  .sk-header-bar {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.sk-header[data-surface="none"][data-style="standard"][data-overlap="none"][data-scroll-mode="normal"][data-tone="default"][data-shadow="true"]
  .sk-header-bar {
  --sk-edge-cast: 0 0 #0000;
}
/* Keyed on the ON value: a missing prop serves its token verbatim, which reads as on. */
/* `-min`: a borderless theme states 0. */
.sk-header[data-border="true"] {
  --sk-header-rule: color-mix(in srgb, var(--sk-ink) 30%, transparent);
  --sk-header-rule-width: var(--sk-border-width-min);
  border-bottom: var(--sk-header-rule-width) solid var(--sk-header-rule);
}

.sk-header[data-shadow="true"] .sk-header-bar {
  --sk-edge-cast: var(--sk-panel-shadow);
}

.sk-header :is(.sk-el-nav-panel, .sk-el-nav-drop-panel) {
  border: 0;
  box-shadow: none;
}
.sk-header[data-border="true"] :is(.sk-el-nav-panel, .sk-el-nav-drop-panel) {
  border: var(--sk-header-rule-width) solid var(--sk-header-rule);
}
.sk-header[data-shadow="true"] :is(.sk-el-nav-panel, .sk-el-nav-drop-panel) {
  box-shadow: var(--sk-panel-shadow);
}
.sk-header-sheet:not([data-menu-style="takeover"])[data-bar-border="true"] {
  --sk-sheet-stroke: var(--sk-border-width-min) solid
    color-mix(in srgb, var(--sk-ink) 30%, transparent);
}

.sk-header[data-overlap="hero"]:not([data-style="island"]):not([data-scrolled]):not(
    [data-surface="solid"],
    [data-surface="glass"]
  ):not([data-chrome-verdict="unknown"]) {
  border-bottom-color: transparent;
}
.sk-header[data-overlap="hero"]:not([data-style="island"]):not([data-scrolled]):not(
    [data-surface="solid"],
    [data-surface="glass"]
  ):not([data-chrome-verdict="unknown"])
  .sk-header-bar {
  /* No transition here: a winning shorthand would replace the paint list. */
  --sk-edge-cast: 0 0 #0000;
}

/* (0,9,1), top level, to outweigh the float block's toned arms. */
html[data-sk-menu="takeover"]
  .sk-header[data-menu-style][data-menu-tone][data-surface][data-scroll-mode][data-collapse][data-width] {
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-sk-menu="takeover"]
  .sk-header[data-menu-style][data-menu-tone][data-surface][data-scroll-mode][data-collapse][data-width]
  .sk-header-bar {
  --sk-bg: var(--kit-background);
  --sk-ink: var(--kit-foreground);
  --sk-ink-on-dark: var(--sk-theme-dark);
  --sk-ink-muted: var(--kit-muted);
  --sk-accent: var(--kit-accent);
  --sk-focus-ring-color: var(--sk-accent);
  --sk-stroke: var(--kit-divider);
  --sk-btn-bg: var(--kit-foreground);
  --sk-btn-ink: var(--kit-background);
  background-color: color-mix(
    in srgb,
    var(--sk-bg)
      calc(
        var(--sk-surface-opaque, 100) * 1% + var(--sk-surface-glass, 0) *
          var(--sk-glass-alpha, 0.92) * 100%
      ),
    transparent
  );
  color: var(--sk-ink);
}
html[data-sk-menu="takeover"]
  .sk-header[data-menu-style][data-menu-tone="surface"][data-surface][data-scroll-mode][data-collapse][data-width]
  .sk-header-bar {
  --sk-bg: var(--kit-surface);
}
/* The button's pair too, or a boxed control paints in the bar's own color. */
html[data-sk-menu="takeover"]
  .sk-header[data-menu-style][data-menu-tone="inverted"][data-surface][data-scroll-mode][data-collapse][data-width]
  .sk-header-bar,
html[data-sk-menu="takeover"]
  .sk-header[data-menu-style][data-menu-tone="accent"][data-surface][data-scroll-mode][data-collapse][data-width]
  .sk-header-bar {
  --sk-ink: var(--kit-background);
  --sk-ink-on-dark: calc(1 - var(--sk-theme-dark));
  --sk-btn-bg: var(--kit-background);
  --sk-focus-ring-color: var(--sk-ink);
  --sk-selection-bg: var(--sk-selection-page-bg);
  --sk-selection-ink: var(--sk-selection-page-ink);
  color: var(--sk-ink);
}
html[data-sk-menu="takeover"]
  .sk-header[data-menu-style][data-menu-tone="inverted"][data-surface][data-scroll-mode][data-collapse][data-width]
  .sk-header-bar {
  --sk-bg: var(--kit-foreground);
  --sk-ink-muted: color-mix(in srgb, var(--kit-background) 62%, transparent);
  --sk-accent: color-mix(in srgb, var(--kit-accent) 55%, var(--kit-background));
  --sk-focus-ring-color: var(--sk-ink);
  --sk-stroke: color-mix(in srgb, var(--kit-background) 22%, transparent);
  --sk-btn-ink: var(--kit-foreground);
}
html[data-sk-menu="takeover"]
  .sk-header[data-menu-style][data-menu-tone="accent"][data-surface][data-scroll-mode][data-collapse][data-width]
  .sk-header-bar {
  --sk-bg: var(--kit-accent);
  --sk-ink-muted: color-mix(in srgb, var(--kit-background) 78%, transparent);
  --sk-accent: var(--kit-background);
  --sk-focus-ring-color: var(--sk-ink);
  --sk-stroke: color-mix(in srgb, var(--kit-background) 30%, transparent);
  --sk-btn-ink: var(--kit-accent);
}