/* Header. Loaded after style.css, overrides it. D-030, D-040. */

nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);

  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: var(--header-h);
  padding-inline: var(--space-5);

  justify-content: space-between;

  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-default);
  backdrop-filter: none;

}

/* Identity */
.nav-logo {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);

  /* flex-shrink must follow flex, which sets it. Name clips, never wraps. */
  flex: 1;
  flex-shrink: 0;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1;
  color: var(--text-primary);
  font-family: var(--type-family-display);
  font-variation-settings: "wdth" 100;
  font-weight: 700;
  font-size: var(--type-small);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* Accent orange: documented exception. D-082. */
.nav-logo-role {
  font-family: var(--type-family-mono);
  font-size: var(--type-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--meta-tracking);
  color: var(--text-accent);

  /* Inline separator, dropped below 1150. D-169. */
  margin-left: var(--space-3);
  padding-left: var(--space-3);
  border-left: 1px solid var(--border-accent-soft);
  white-space: nowrap;
  line-height: 1;
}

.nav-logo:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* Nav links */
.nav-links {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-inline: auto;
  list-style: none;
  padding: 0;

  /* Anchors never compress; they all go below 844. */
  flex-shrink: 0;
}

.nav-links a {
  display: block;
  padding-block: var(--space-2);
  font-family: var(--type-family-mono);
  font-size: var(--type-meta);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--meta-tracking);
  color: var(--text-meta);
  transition: color var(--motion-state);
}

.nav-links a:hover { color: var(--text-primary); }

.nav-links a:active {
  color: var(--action-pressed);
  transition-duration: var(--dur-press);
}

.nav-links a:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* a11y: not colour-only. */
.nav-links a[aria-current="true"] { color: var(--text-primary); }

/* One bar for the whole nav. transform only: left/width would relayout. */
.nav-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 2px;
  background: var(--state-active);
  transform-origin: left;
  transform: translateX(var(--nav-ind-x, 0)) scaleX(var(--nav-ind-w, 0));
  transition: transform var(--motion-state);
}

/* Contact */
.nav-right {
  display: flex;
  align-items: center;

  /* flex before flex-shrink, as on .nav-logo. */
  flex: 1;
  flex-shrink: 0;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* Segmented control, not two buttons. D-103, D-113. */
.nav-contact {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-shrink: 0;
  height: 34px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-os);
  overflow: hidden;
  transition: border-color var(--motion-state);
}

.nav-contact:hover { border-color: var(--border-strong); }

/* Visual and states from .btn-contact. Height from the parent. */
.nav-contact-btn {
  padding: 0 var(--space-3);
}

/* height:auto or style.css breaks align-self:stretch. */
.nav-contact-sep {
  width: 1px;
  align-self: stretch;
  height: auto;
  background: var(--border-default);
}

/* 1150: role stacks under the name. D-247. */
@media (max-width: 1150px) {
  .nav-logo {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    line-height: 1.15;
    min-width: 0;
    flex: 1 1 auto;
  }

  /* Explicit display: style.css has two display:none on this role. */
  .nav-logo-role {
    display: block;
    font-size: var(--type-meta);
    white-space: normal;
    line-height: 1.25;
    margin-left: 0;
    padding-left: 0;
    border-left: none;
  }
}

@media (max-width: 1023px) {
  nav { gap: var(--space-4); }
  /* Class, not element: .nav-contact-btn span also caught the Steam glyph. */
  .nav-contact-label { display: none; }

  

}

/* 844: role needs 343px, anchors take 77 back at 768. D-150, D-244. */
@media (max-width: 844px) {
  .nav-links { display: none; }
}

/* 479: identity and contacts only. */
@media (max-width: 479px) {
  nav {
    gap: var(--space-3);
    padding-inline: var(--space-3);
    justify-content: space-between;
  }

  .nav-logo { font-size: var(--type-meta); }

  .nav-contact { gap: var(--space-2); }

  /* 24px floor, WCAG 2.5.8. */
  .nav-contact-btn {
    padding: var(--space-2) var(--space-3);
    min-width: 24px;
  }

  .nav-contact-sep { display: none; }
}

/* 536: role to 9px / 0.02em to hold one line. Below the type scale. D-150. */
/* Raised from 499: at 500 the role needs 343px, has 306. D-244. */
@media (max-width: 536px) {
  nav {
    gap: var(--space-2);
    padding-inline: var(--space-2);
  }

  .nav-contact-btn { padding: var(--space-1); }

  /* Double class to beat `.btn-contact svg` in interactive.css, loaded after. */
  .nav-contact-btn.btn-contact svg {
    width: var(--space-3);
    height: var(--space-3);
  }

  .nav-logo-role {
    font-size: 9px;
    letter-spacing: 0.02em;
  }
}

/* 349: Workshop pill goes. Same link in the stats band and footer. */
@media (max-width: 349px) {
  nav { gap: var(--space-1); }

  .nav-contact-btn:last-child,
  .nav-contact-sep:last-of-type { display: none; }
}

/* style.css brand hovers not carried over: hardcoded blue, off-palette. D-113. */

/* Dungeon tab. Hover is an ink change; reveal is opacity only. D-157. */
.nav-ach-icon {
  display: inline-flex;
  align-items: center;
  color: var(--text-meta);
  opacity: 1;
  transition: color var(--motion-state) !important;

  /* From style.css. D-163. */
  line-height: 1;
  user-select: none;
}

.nav-ach-svg {
  display: block;
  width: 20px;
  height: 20px;
}

.nav-links .nav-ach-icon:hover,
.nav-ach-icon:focus-visible {
  color: var(--text-primary);
  opacity: 1;
  filter: none;
}

.nav-ach-icon:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

@keyframes nav-ach-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.nav-ach-icon.is-new {
  animation: nav-ach-reveal var(--dur-struct) var(--ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  .nav-ach-icon.is-new { animation: none; }
}

/* Dungeon tab clipped the title to "LEAD LEVEL & GAM" at 1440. D-157. */
/* flex:1 means basis 0: logo was sized by free space, not content. */
@media (min-width: 1024px) {
  .nav-logo { flex: 1 1 0; min-width: max-content; }
}

@media (min-width: 1151px) and (max-width: 1440px) {
  .nav-logo-role { font-size: var(--type-meta); }
}