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

.sk-header {
  view-transition-name: sk-header;
}

.sk-header-sheet-link {
  font-size: var(--sk-text-nav-size);
  font-weight: var(--kit-weight-nav);
  letter-spacing: calc(var(--kit-track-nav) * 1em);
  text-transform: var(--kit-caps-nav);
}

html[data-sk-lightbox-vt] .sk-header {
  view-transition-name: none;
}

.sk-header {
  background-color: var(--sk-bg);
}

.sk-header[data-stick="stick"] {
  position: sticky;
  top: 0;
  z-index: 30;
  background-color: color-mix(in srgb, var(--sk-bg) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: var(--sk-border-width) solid transparent;
  transition: border-color 0.3s ease;
}
html[data-sk-js] .sk-header[data-stick="stick"][data-scrolled],
html[data-sk-js] .sk-header[data-stick="stick"][data-chrome-verdict="unknown"],
html:not([data-sk-js]) .sk-header[data-stick="stick"] {
  border-bottom-color: var(--sk-header-rule, var(--sk-stroke));
}

/* 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[data-overlap="hero"]:has(+ .sk-section):where(
    html[data-sk-js] *,
    body:not(:has([data-sk-furniture="top"] + .sk-header)) *
  ) {
  html:not([data-sk-js]) &:not([data-stick="stick"]) {
    --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;
  }
  html[data-sk-js] &:not([data-scrolled]) {
    & .sk-header-bar {
      opacity: 0;
      visibility: hidden;
    }
    &[data-chrome-verdict] .sk-header-bar {
      opacity: 1;
      visibility: visible;
      transition: opacity 0.18s ease;
    }
    &[data-chrome-verdict="unknown"] {
      background-color: var(--sk-bg);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      transition: none;
    }
    &: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"] {
      --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"] {
      --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"] {
      --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"] {
      --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);
    }
  }
  /* No `top`: the script writes it. An abspos child of a flex column positions at the content-box start (Flexbox 4.1). */
  &:not([data-stick="stick"]) {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 30;
  }
  /* A fixed box resolves its auto top once and ignores scroll. */
  html[data-sk-js] &[data-stick="stick"] {
    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] &[data-stick="stick"] {
      transition: none;
    }
  }
  html[data-sk-js] &[data-stick="stick"][data-scrolled] {
    background-color: color-mix(in srgb, var(--sk-bg) 92%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom-color: var(--sk-header-rule, var(--sk-stroke));
  }
  & .sk-header-bar {
    position: relative;
  }
  & .sk-header-bar::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: calc(100% + var(--sk-chrome-scrim-fade));
    z-index: -1;
    background: var(--sk-chrome-scrim);
    opacity: var(--sk-chrome-scrim-opacity, 0);
    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([data-stick="stick"]) + .sk-section:is([data-width="page"], [data-width="inset"]),
  html[data-sk-js]
    &[data-stick="stick"]
    + .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([data-stick="stick"]) + .sk-section,
  html[data-sk-js] &[data-stick="stick"] + .sk-section {
    --sk-chrome-clear: var(--sk-bar-height);
    --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([data-overlap="hero"]) + .sk-section {
  --sk-chrome-push: var(--sk-bar-height);
}
/* 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[data-overlap="hero"]
  + .sk-section {
  --sk-chrome-push: var(--sk-bar-height);
}

.sk-header:not([data-overlap="hero"])
  + .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([data-overlap="hero"])
    + .sk-section
    > :not(:nth-child(1 of :is(.sk-component, .sk-section-col))) {
    --sk-chrome-push: 0px;
  }
}
.sk-header[data-stick="stick"] ~ .sk-component,
.sk-header[data-stick="stick"] ~ .sk-section .sk-component {
  scroll-margin-top: var(--sk-bar-height);
}

@media (prefers-reduced-motion: reduce) {
  .sk-header[data-stick="stick"] {
    transition: none;
  }
}

.sk-header-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sk-bar-gap);
  min-height: var(--sk-bar-height);
  padding-block: var(--sk-bar-pad-y);
  /* The PAGE's rail, in every posture, never a dial of the bar's own. */
  padding-inline: calc(var(--sk-page-rail) + var(--sk-bar-paint-step, 0px));
  /* 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) * 1px) solid var(--sk-stroke);
}
.sk-header[data-width="full"] .sk-header-bar {
  padding-inline: var(--sk-gutter);
}
/* Unscrolled over an opener that paints from the rail, the bar adds the room that opener's copy stands off by. The step is the frame's own published length, so the two cannot part at a rung. */
.sk-header[data-overlap="hero"]: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);
  &[data-scrolled] {
    --sk-bar-paint-step: 0px;
  }
}
.sk-header[data-overlap="hero"]: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);
  &[data-scrolled] {
    --sk-bar-paint-step: 0px;
  }
}
.sk-header[data-overlap="hero"]: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);
  &[data-scrolled] {
    --sk-bar-paint-step: 0px;
  }
}

/* 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;
}
.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;
}

.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;
    border-inline: 0;
    padding-inline: 0;
  }
  /* 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:hover > .sk-el-nav-panel,
  .sk-header[data-dropdowns="flush"] .sk-el-nav-item:focus-within > .sk-el-nav-panel,
  .sk-header[data-dropdowns="flush"] .sk-el-nav-panel[data-sk-measure] {
    display: grid;
    grid-template-columns: var(--sk-page-rail) 1fr var(--sk-page-rail);
  }
  .sk-header[data-dropdowns="flush"]
    .sk-el-nav-item:hover
    > .sk-el-nav-panel:has(.sk-el-nav-featured),
  .sk-header[data-dropdowns="flush"]
    .sk-el-nav-item:focus-within
    > .sk-el-nav-panel:has(.sk-el-nav-featured),
  .sk-header[data-dropdowns="flush"] .sk-el-nav-panel[data-sk-measure]:has(.sk-el-nav-featured) {
    grid-template-columns: var(--sk-page-rail) 1fr minmax(200px, 240px) var(--sk-page-rail);
  }
  .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-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::before {
    top: calc(-1 * (var(--sk-bar-pad-y) + var(--kit-space-3)));
    height: calc(var(--sk-bar-pad-y) + var(--kit-space-3));
  }
  .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;
  }
}

/* The sheet is appended to the body: a fixed panel inside the sticky bar is trapped by its backdrop-filter containing block. */
.sk-header-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  /* The WCAG pointer-target floor. */
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--sk-ink);
}
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, .sk-el-button, .sk-language) {
  display: none;
}
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;
}
.sk-header-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--sk-ease-out);
}
.sk-header-scrim[data-open] {
  opacity: 1;
  pointer-events: auto;
}
/* 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-panel-pad) + env(safe-area-inset-top, 0px));
  padding-right: calc(var(--sk-panel-pad) + 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);
  border-left: var(--sk-border-width-min) solid var(--sk-stroke);
  box-shadow: var(--sk-panel-shadow);
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform 0.35s var(--sk-ease-out),
    visibility 0s 0.35s;
}
.sk-header-sheet[data-menu-style="takeover"] {
  left: 0;
  width: auto;
  border-left: 0;
  padding-left: calc(var(--sk-panel-pad) + env(safe-area-inset-left, 0px));
  transform: translateY(-100%);
}
.sk-header-sheet[data-menu-style="takeover"][data-open] {
  transform: translateY(0);
}
.sk-header-sheet[data-menu-style="takeover"] .sk-header-sheet-link:not([data-sub]) {
  font-size: var(--sk-text-h4-size);
  min-height: 52px;
}

.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 degrades to top flow. */
.sk-header-sheet[data-menu-position="center"] .sk-header-sheet-nav {
  margin-block: auto;
}
.sk-header-sheet[data-menu-position="center"] .sk-header-sheet-actions {
  margin-top: 0;
}

.sk-header-sheet-bar {
  display: flex;
  justify-content: flex-end;
  margin: calc(-1 * var(--kit-space-2)) calc(-1 * var(--kit-space-2)) calc(-1 * var(--kit-space-3))
    0;
}
.sk-header-sheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--sk-ink);
}
.sk-header-sheet[data-open] {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.35s var(--sk-ease-out);
}
.sk-header-sheet-nav {
  display: flex;
  flex-direction: column;
}
.sk-header-sheet-link {
  display: flex;
  align-items: center;
  gap: 0.45em;
  min-height: 44px;
  padding-block: var(--kit-space-1);
  border-bottom: var(--sk-border-width-min) solid var(--sk-stroke);
  text-decoration: none;
  color: var(--sk-ink);
}
.sk-header-sheet-link[data-sub] {
  min-height: 36px;
  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-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 {
  width: 100%;
  padding-inline: 0;
  background: none;
  border: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--sk-ink);
}
.sk-header-sheet-link[aria-expanded="true"] .sk-el-nav-caret {
  transform: rotate(180deg);
}
/* Animatable height:auto. The inner's padding transitions to 0 in step, or it holds the collapsed height above zero. */
.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: var(--kit-space-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-group .sk-detail:not(:first-child) {
  margin-top: var(--kit-space-3);
}
.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;
}
/* Mounted on <body>, outside [data-sk], so the blanket motion floor cannot reach these. */
@media (prefers-reduced-motion: reduce) {
  .sk-header-scrim,
  .sk-header-sheet {
    transition: none;
  }
}

/* Zones dissolve (display: contents), or an all-center bar strands its cluster mid-track. */
html[data-sk-js] .sk-header[data-compact] .sk-header-bar {
  display: flex;
  align-items: center;
  gap: var(--sk-zone-gap);
}
html[data-sk-js] .sk-header[data-compact] .sk-header-zone {
  display: contents;
}
/* A token remap, not a font-size, so mark and wordmark stay one lockup; a raster logo file follows through its own scale token (logo.css). */
html[data-sk-js] .sk-header[data-compact] .sk-header-bar .sk-el-logo {
  margin-right: auto;
  --sk-text-brand-size: var(--sk-text-brand-size-compact);
  --sk-logo-scale: var(--kit-size-compact-brand);
}
/* 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: ellipsis;
}
html[data-sk-js] .sk-header[data-compact] .sk-header-bar:not(:has(.sk-el-logo)) .sk-header-toggle {
  margin-left: auto;
}

/* The accent line lives on the ROOT border, the same border the glass hairline draws, so the two never stack. Keep this after the stick rule.
 * Keyed on the toggle's ON value, never `:not([…=""])`: a sidecar that omits the prop serves the token verbatim (`data-accent-line="{accentLine}"`), and a negative key would read that as on. */
.sk-header[data-accent-line="true"] {
  --sk-header-rule: var(--sk-accent);
  border-bottom: var(--sk-border-width) solid var(--sk-header-rule);
}
.sk-header[data-accent-line="true"] .sk-header-bar {
  border-bottom: none;
}