:root {
  --mcnav-height: 42px;
}

#mcnav-root {
  min-height: var(--mcnav-height);
}

.mcnav {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: var(--mcnav-height);
  padding: 0.4rem 1rem;
  background: var(--mh-surface);
  border-bottom: 1px solid var(--mh-line);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 0.85rem;
  color: var(--mh-ink);
  position: relative;
  z-index: 9999;
}

.mcnav-brand {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--mh-ink);
  white-space: nowrap;
  text-decoration: none;
}

.mcnav-links { display: flex; gap: 0.35rem; align-items: center; margin-left: auto; }
.mcnav-links a, .mcnav-resources a { color: var(--mh-muted); text-decoration: none; padding: 0.3rem 0.65rem; border-radius: 5px; white-space: nowrap; }
.mcnav-links a:hover, .mcnav-resources a:hover { color: var(--mh-ink); background: var(--mh-sunken); }
.mcnav-links a[aria-current], .mcnav-resources a[aria-current] { color: var(--mh-accent-hover); background: var(--mh-accent-soft); }
.mcnav a:focus-visible, .mcnav-resources a:focus-visible { outline: 2px solid var(--mh-accent); outline-offset: 2px; }
.mcnav-resources { display: flex; gap: 0.35rem; align-items: center; padding: 0.4rem 1rem; border-bottom: 1px solid var(--mh-line); background: var(--mh-sunken); font: 12px/1.5 "Segoe UI", system-ui, sans-serif; }

.mcnav-label {
  color: var(--mh-muted);
  white-space: nowrap;
}

.mcnav-select {
  background: var(--mh-raised);
  color: var(--mh-ink);
  border: 1px solid var(--mh-line-strong);
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
  min-width: 12rem;
  cursor: pointer;
}

.mcnav-select:focus {
  outline: 2px solid var(--mh-accent);
  outline-offset: 1px;
}

@media (max-width: 480px) {
  .mcnav {
    gap: 0.5rem;
    padding-inline: 0.625rem;
  }

  .mcnav-label {
    display: none;
  }

  .mcnav-select {
    flex: 1;
    min-width: 0;
  }
}