/* The NAV element, head of the chrome family: ships wherever any chrome kind does (FAMILY_KIND_ORDER). Three names here are read by nav.js. */

/* Each part keeps only its own geometry and ink; the voice is the nav dials'. */
.sk-el-nav-link,
.sk-el-nav-drop-label {
  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);
}

.sk-el-nav {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kit-space-2) var(--kit-space-3);
}
.sk-el-nav-link {
  position: relative;
  text-decoration: none;
  color: var(--sk-ink-muted);
  /* Symmetric: bottom-only padding would center the box while the text rode high. */
  padding-block: 2px;
  transition: color 140ms ease;
}
.sk-el-nav-link:hover {
  color: var(--sk-ink);
}
.sk-el-nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--sk-ease-out);
}
/* A trigger is not a link; the draw-in underline would read as a navigable target. */
.sk-el-nav-trigger::after {
  content: none;
}
.sk-el-nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* data-active is authored; aria-current is nav.js's mark. Same look. */
.sk-el-nav-link[data-active="true"],
.sk-el-nav-link[aria-current="page"] {
  color: var(--sk-ink);
}
.sk-el-nav-link[data-active="true"]::after,
.sk-el-nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}
.sk-el-nav-glyph {
  display: inline-block;
  margin-right: 0.35em;
  line-height: 1;
}
.sk-el-nav-glyph[data-at="trail"] {
  margin-right: 0;
  margin-left: 0.35em;
}
.sk-el-nav-glyph > svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}
.sk-extlink {
  width: 0.7em;
  height: 0.7em;
  margin-left: 0.25em;
  vertical-align: baseline;
  opacity: 0.65;
}
.sk-el-nav-div {
  align-self: stretch;
  width: var(--sk-border-width-min);
  margin-block: 0.25em;
  background: var(--sk-stroke);
}
/* --sk-btn-ink, not --sk-bg: the overlay remaps re-point the accent fill to near-white. */
.sk-el-nav-badge {
  display: inline-block;
  margin-left: 0.45em;
  padding: 0.1em 0.5em;
  border-radius: 999px;
  font-size: 0.8em;
  letter-spacing: 0;
  background: var(--sk-accent);
  color: var(--sk-btn-ink);
}

/* The dropdown opens on :hover / :focus-within, CSS only, so scripts-off still works by keyboard. */
.sk-el-nav-item {
  position: relative;
  display: inline-flex;
}
.sk-el-nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.sk-el-nav-caret {
  opacity: 0.6;
  transition: transform 140ms ease;
}
.sk-el-nav-item:hover .sk-el-nav-caret,
.sk-el-nav-item:focus-within .sk-el-nav-caret {
  transform: rotate(180deg);
}
.sk-el-nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 40;
  min-width: 240px;
  padding: var(--sk-panel-pad);
  border-radius: var(--sk-panel-radius);
  background: var(--sk-bg);
  color: var(--sk-ink);
  border: var(--sk-border-width-min) solid var(--sk-stroke);
  box-shadow: var(--sk-panel-shadow);
  /* nav.js's shift rides `translate`, never `transform`, which the motion block transitions. */
  translate: var(--sk-panel-shift, 0px);
  /* The padding-top bridge keeps the hover corridor from trigger to panel. */
  display: none;
  margin-top: var(--kit-space-2);
}
/* The measuring posture: laid out, painted to nothing, the closed pose's scale neutralized. */
.sk-el-nav-panel[data-sk-measure] {
  display: block;
  visibility: hidden;
  transform: none;
}
.sk-el-nav-panel::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--kit-space-2) - 2px);
  left: 0;
  right: 0;
  height: calc(var(--kit-space-2) + 2px);
}
.sk-el-nav-item:hover > .sk-el-nav-panel,
.sk-el-nav-item:focus-within > .sk-el-nav-panel {
  display: block;
}
/* `transform` is the pose alone; the measured shift rides `translate`. The theme sheet writes --sk-panel-anim-from. */
@media (prefers-reduced-motion: no-preference) {
  .sk-el-nav-panel {
    --sk-panel-anim-pace: calc(1s / max(abs(var(--sk-anim-intensity, 1)), 0.1));
    opacity: 0;
    transform: var(--sk-panel-anim-from, none);
    transform-origin: top;
    /* A closing panel ignores the pointer, or its fading box holds :hover open. */
    pointer-events: none;
    transition:
      display calc(0.18 * var(--sk-panel-anim-pace)) allow-discrete,
      opacity calc(0.18 * var(--sk-panel-anim-pace)) ease,
      transform calc(0.18 * var(--sk-panel-anim-pace)) ease;
  }
  .sk-el-nav-item:hover > .sk-el-nav-panel,
  .sk-el-nav-item:focus-within > .sk-el-nav-panel {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition:
      display calc(0.3 * var(--sk-panel-anim-pace)) allow-discrete,
      opacity calc(0.3 * var(--sk-panel-anim-pace)) var(--sk-ease-out),
      transform calc(0.3 * var(--sk-panel-anim-pace)) var(--sk-ease-out);
  }
  @starting-style {
    .sk-el-nav-item:hover > .sk-el-nav-panel,
    .sk-el-nav-item:focus-within > .sk-el-nav-panel {
      opacity: 0;
      transform: var(--sk-panel-anim-from, none);
    }
  }
}
/* A wrapping flex row, not a column grid: when the viewport cap bites, columns wrap instead of pinching. */
.sk-el-nav-cols {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kit-space-4);
}
.sk-el-nav-colgroup {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 200px;
  min-width: 200px;
}
.sk-el-nav-colhead {
  font-size: var(--sk-text-detail-size);
  font-weight: var(--kit-weight-eyebrow);
  letter-spacing: calc(var(--kit-track-eyebrow) * 1em);
  text-transform: uppercase;
  color: var(--sk-ink-muted);
  margin-bottom: var(--kit-space-1);
  text-decoration: none;
}
a.sk-el-nav-colhead:hover {
  color: var(--sk-ink);
}
.sk-el-nav-drop-link {
  display: flex;
  align-items: flex-start;
  gap: var(--kit-space-2);
  padding: var(--kit-space-1) var(--kit-space-2);
  margin-inline: calc(-1 * var(--kit-space-2));
  border-radius: calc(var(--sk-panel-radius) * 0.6);
  text-decoration: none;
  color: var(--sk-ink);
}
.sk-el-nav-drop-link:hover {
  background: var(--sk-surface);
}
.sk-el-nav-drop-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(var(--sk-icon-size) * 1.6);
  height: calc(var(--sk-icon-size) * 1.6);
  margin-top: 1px;
  border-radius: calc(var(--sk-panel-radius) * 0.5);
  background: var(--sk-surface);
  border: var(--sk-border-width-min) solid var(--sk-stroke);
}
.sk-el-nav-drop-icon .sk-icon-glyph,
.sk-el-nav-drop-icon > svg {
  width: calc(var(--sk-icon-size) * 0.9);
  height: calc(var(--sk-icon-size) * 0.9);
}
.sk-el-nav-drop-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.sk-el-nav-drop-desc {
  font-size: var(--sk-text-detail-size);
  color: var(--sk-ink-muted);
}
.sk-el-nav-featured {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--kit-space-3);
  padding: var(--kit-space-3);
  border-radius: calc(var(--sk-panel-radius) * 0.8);
  background: var(--sk-surface);
  text-decoration: none;
  color: var(--sk-ink);
}
.sk-el-nav-featured-title {
  font-weight: var(--kit-weight-title);
}
.sk-el-nav-featured-desc {
  font-size: var(--sk-text-detail-size);
  color: var(--sk-ink-muted);
}
.sk-el-nav-featured-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: calc(var(--sk-panel-radius) * 0.6);
  margin-bottom: var(--kit-space-1);
}
.sk-el-nav-featured-cta {
  margin-top: 2px;
  font-size: var(--sk-text-detail-size);
  color: var(--sk-ink);
}
.sk-el-nav-featured:hover .sk-el-nav-featured-cta {
  text-decoration: underline;
}
.sk-el-nav-panel-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--kit-space-3);
  margin: var(--kit-space-3) calc(-1 * var(--sk-panel-pad)) calc(-1 * var(--sk-panel-pad));
  padding: var(--kit-space-2) var(--sk-panel-pad);
  border-top: var(--sk-border-width-min) solid var(--sk-stroke);
  border-radius: 0 0 var(--sk-panel-radius) var(--sk-panel-radius);
  background: var(--sk-surface);
  text-decoration: none;
  color: var(--sk-ink-muted);
  font-size: var(--sk-text-detail-size);
}
.sk-el-nav-panel-cta {
  color: var(--sk-ink);
  white-space: nowrap;
}
/* `width`, not `min-width`: min-width beats max-width. */
.sk-el-nav-item:has(.sk-el-nav-cols) > .sk-el-nav-panel {
  width: max-content;
  max-width: min(88vw, 1200px);
}
.sk-el-nav-item:hover > .sk-el-nav-panel:has(.sk-el-nav-cols):has(.sk-el-nav-featured),
.sk-el-nav-item:focus-within > .sk-el-nav-panel:has(.sk-el-nav-cols):has(.sk-el-nav-featured),
.sk-el-nav-panel[data-sk-measure]:has(.sk-el-nav-cols):has(.sk-el-nav-featured) {
  display: grid;
  grid-template-columns: auto minmax(200px, 240px);
  column-gap: var(--kit-space-4);
  align-items: start;
}
.sk-el-nav-panel:has(.sk-el-nav-cols) > .sk-el-nav-featured {
  margin-top: 0;
}
.sk-el-nav-panel:has(.sk-el-nav-cols) > .sk-el-nav-panel-footer {
  grid-column: 1 / -1;
}

@media (prefers-reduced-motion: reduce) {
  .sk-el-nav-caret {
    transition: none;
  }
}
/* The scripts-off floor: hover is absent on touch, but the trigger is a real button. */
@media (max-width: 640px) {
  .sk-el-nav-item {
    flex-wrap: wrap;
  }
  .sk-el-nav-panel {
    position: static;
    min-width: 100%;
    max-width: 100%;
    box-shadow: none;
    margin-top: var(--kit-space-1);
    /* A wide-viewport shift must not ride down here. */
    translate: none;
    transform: none;
  }
  .sk-el-nav-item:has(.sk-el-nav-cols) > .sk-el-nav-panel {
    min-width: 100%;
    max-width: 100%;
  }
  .sk-el-nav-cols {
    flex-direction: column;
  }
  /* On the stacked axis the flex-basis becomes a height and pads short groups. */
  .sk-el-nav-colgroup {
    flex-basis: auto;
  }
  .sk-el-nav-item:hover > .sk-el-nav-panel:has(.sk-el-nav-cols):has(.sk-el-nav-featured),
  .sk-el-nav-item:focus-within > .sk-el-nav-panel:has(.sk-el-nav-cols):has(.sk-el-nav-featured) {
    display: block;
  }
  .sk-el-nav-panel:has(.sk-el-nav-cols) > .sk-el-nav-featured {
    margin-top: var(--kit-space-3);
  }
}