.ec-nav { isolation: isolate; }
.ec-nav__row { display: flex; flex-wrap: nowrap; align-items: center; height: 100%; min-width: 0; }

.ec-nav__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0.75;
  transition: transform 140ms ease, color 140ms ease, opacity 140ms ease;
}

/* ── THE BAR ANSWERS THE CREST ──────────────────────────────────────── */
.ec-nav__wave {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  z-index: 2; pointer-events: none;
  transform-origin: 0% 50%;
  opacity: 0;
  animation: ec-nav-wave 3.6s cubic-bezier(0.16, 0.85, 0.35, 1) infinite;
}
.ec-nav__wave[data-d="1"] { animation-delay: 1.8s; }
.ec-nav__wave::before, .ec-nav__wave::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    var(--theme-accent-2) 0%,
    color-mix(in srgb, var(--nilla-accent) 66%, transparent) 26%,
    color-mix(in srgb, var(--nilla-accent) 20%, transparent) 62%,
    transparent 100%);
}
.ec-nav__wave::before { top: 0; }
.ec-nav__wave::after { bottom: 0; }
@keyframes ec-nav-wave {
  0%   { transform: scaleX(0.05); opacity: 0; }
  9%   { opacity: 0.92; }
  100% { transform: scaleX(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ec-nav__wave { animation: none; opacity: 0.2; transform: scaleX(1); }
  .ec-nav__wave[data-d="1"] { display: none; }
}

/* ── THE CREST & BRAND ──────────────────────────────────────────────── */
.ec-nav__brand {
  position: relative; z-index: 4;
  flex: 0 0 auto; display: flex; align-items: center;
  padding-left: 14px; padding-right: 20px;
}
.ec-nav__brand-link {
  display: flex; align-items: center; gap: 13px;
  text-decoration: none; white-space: nowrap;
}
.ec-nav__brand-link:focus-visible { outline: none; }

.ec-nav__word {
  display: inline-flex; align-items: baseline; gap: 0.35em;
  font-size: 10.5px; line-height: 1; text-transform: uppercase;
  color: var(--nilla-text);
  text-shadow: 0 0 6px color-mix(in srgb, var(--theme-accent-2) 26%, transparent);
  transition: color 180ms ease, text-shadow 180ms ease;
}
.ec-nav__word i {
  display: inline-block; font-style: normal; font-weight: 700; letter-spacing: 0.3em; line-height: 1; vertical-align: baseline;
  color: var(--theme-ink-dim);
}
.ec-nav__word span {
  display: inline-block; font-weight: 800; letter-spacing: 0.24em; line-height: 1; vertical-align: baseline;
}
.ec-nav__brand-link:hover .ec-nav__word,
.ec-nav__brand-link:focus-visible .ec-nav__word {
  color: var(--theme-accent-2);
  text-shadow: 0 0 9px color-mix(in srgb, var(--theme-accent-2) 46%, transparent);
}

.ec-nav__crest-link {
  position: relative; display: block; width: 46px; height: 46px; flex: 0 0 auto;
  transform-origin: 50% 100%;
  transition: filter 200ms ease, transform 200ms ease;
}
/* The crest is the live NukBord mark (components/brand/nuk-mark.tsx): it floats,
   watches the pointer and answers a press itself, so the link only lifts it. */
.ec-nav__brand-link:hover .ec-nav__crest-link { transform: translateY(-1px); }
.ec-nav__brand-link:focus-visible .ec-nav__crest-link { filter: drop-shadow(0 0 6px var(--theme-accent-2)); }
@media (prefers-reduced-motion: reduce) {
  .ec-nav__crest-link { transition: none; }
}

/* ── CATEGORY BUTTONS (FLOATED TO THE RIGHT) ─────────────────────────── */
.ec-nav__strip {
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start;
  flex: 1 1 auto; min-width: 0; margin-left: auto; list-style: none; gap: 6px;
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-inline: 14px;
  scroll-padding-inline: 16px;
  animation: ec-nav-fade-l linear both, ec-nav-fade-r linear both;
  animation-timeline: scroll(self inline), scroll(self inline);
  animation-range: 0 24px, calc(100% - 24px) 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black var(--fade-l), black calc(100% - var(--fade-r)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, black var(--fade-l), black calc(100% - var(--fade-r)), transparent 100%);
}
@property --fade-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fade-r { syntax: "<length>"; inherits: false; initial-value: 14px; }
@keyframes ec-nav-fade-l { from { --fade-l: 0px } to { --fade-l: 14px } }
@keyframes ec-nav-fade-r { from { --fade-r: 14px } to { --fade-r: 0px } }
.ec-nav__strip::-webkit-scrollbar { display: none; }
/* Auto margin keeps short menus right-aligned without pushing the first
   destinations into unreachable negative overflow when the bar is full. */
.ec-nav__strip > li:first-child { margin-inline-start: auto; }

.ec-nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 4px;
  height: 25px; padding: 0 9px; white-space: nowrap;
  font-size: 10px; line-height: 1; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--theme-ink-dim);
  background: color-mix(in srgb, var(--nilla-bg-alt, #12101e) 75%, transparent);
  border: 1px solid color-mix(in srgb, var(--nilla-border, rgba(255,255,255,0.12)) 75%, transparent);
  border-radius: 2px;
  cursor: pointer;
  transition: all 140ms ease;
}
.ec-nav__lbl { margin-right: -0.16em; }

.ec-nav__link:hover {
  color: var(--nilla-text);
  background: color-mix(in srgb, var(--theme-accent-2) 20%, transparent);
  border-color: color-mix(in srgb, var(--theme-accent-2) 65%, transparent);
}
.ec-nav__link[data-state="page"] {
  color: var(--nilla-bg, #080610);
  background: var(--theme-accent-2);
  border-color: var(--theme-accent-2);
  font-weight: 700;
  box-shadow: 0 0 8px color-mix(in srgb, var(--theme-accent-2) 40%, transparent);
}
.ec-nav__link[data-state="page"] .ec-nav__ico {
  opacity: 1;
  color: var(--nilla-bg, #080610);
}
.ec-nav__link[data-state="within"] {
  color: var(--nilla-text);
  background: color-mix(in srgb, var(--theme-accent-2) 25%, transparent);
  border-color: var(--theme-accent-2);
}

.ec-nav__load {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--nilla-accent);
  opacity: calc(0.1 + var(--fill, 0) * 0.42);
  transform: scaleX(calc(0.06 + var(--fill, 0) * 0.94));
  transform-origin: left center;
  transition: transform 260ms ease, opacity 260ms ease;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .ec-nav__load { transition: none; } }
@media (forced-colors: active) { .ec-nav__load { display: none; } }

.ec-nav__link:focus-visible {
  color: var(--nilla-text);
  outline: 2px solid var(--theme-accent-2);
  outline-offset: -2px;
}

.ec-nav__disclose { display: none; flex: 0 0 auto; align-items: stretch; margin-left: auto; }
@media (max-width: 639px) {
  .ec-nav__strip { display: none; }
  .ec-nav__disclose { display: flex; }
}
.ec-nav__chev { font-size: 9px; line-height: 1; }
.ec-nav__panel {
  position: fixed; left: var(--ec-gutter); right: var(--ec-gutter); z-index: 40;
  padding: 4px;
  background: var(--theme-bar-bg);
  border-bottom: 1px solid var(--nilla-border);
  box-shadow: 0 10px 22px -14px black;
}
.ec-nav__panel-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none; gap: 4px;
}
.ec-nav__panel { max-height:calc(100dvh - 120px); overflow:auto; }
@media(min-width:640px){.ec-nav__panel{display:none;}}
.ec-nav__panel .ec-nav__link { height: 30px; width: 100%; justify-content: flex-start; }
@media (prefers-reduced-motion: reduce) {
  .ec-nav__link { transition: none; }
}
@media (forced-colors: active) {
  .ec-nav__link[data-state="page"] {
    background: CanvasText;
    color: Canvas;
  }
}