/* Navigation and footer dividers inherit the global neutral --line token. */
/* About and category rows follow the site blue (#e9f9fd).
   PC Manager's pale blue (#f0f9ff) and other project palettes are independent. */
.about-link {
  --nav-hover-fill: var(--blue);
}
.work-nav .category {
  --nav-hover-fill: var(--blue);
}
/* Project fills now share their source with content controls; values and
   the navigation wipe stay unchanged. Never inherit the site --blue. */
.work-nav .index-link {
  --nav-hover-fill: var(--project-surface);
}

/* The only moving hover edge belongs to .nav-ink. Its background, tinted text
   and divider coverage share one clip at every width, never separate animations. */
.about-link,
.about-link:hover,
.work-nav .category,
.work-nav .category:hover,
.work-nav .index-link,
.work-nav .index-link:hover {
  position: relative;
  isolation: isolate;
  background: transparent;
  transition: none;
}

/* Absolute against the row's padding box: same padding, alignment, gap,
   fonts and wrap width as its original children. No extra layout space. */
.about-link > .nav-ink,
.work-nav .nav-ink {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: inherit;
  justify-content: inherit;
  gap: inherit;
  padding: inherit;
  background: var(--nav-hover-fill);
  color: var(--project-primary);
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
  user-select: none;
}
.work-nav .nav-ink .index-number {
  color: inherit;
  transition: none;
}

/* Product / Motion / Video / Photo keep the same primary black as at rest.
   Only project rows use themed text; keep the existing shared wipe intact. */
.work-nav .category > .nav-ink { color: var(--ink); }

/* About keeps its zero-gap, text-sized frame. Its gray resting braces turn
   primary black only where the same moving background mask passes them. */
.about-link > .nav-ink { color: var(--ink); }
.about-link > .nav-ink .about-bracket { color: inherit; }

/* About's label is already primary black in both states. Always paint the
   original above the fill instead of swapping to a separately composited
   glyph copy, which can look displaced at fractional positions/zoom levels.
   Keep the hidden copy in layout so the bracket masks retain their spacing. */
.about-link > [data-i18n] {
  position: relative;
  z-index: 2;
}
.about-link > .nav-ink > :not(.about-bracket) {
  visibility: hidden;
}

/* Names start flush left; small indices hug their upper-right edge.
   One explicit label-height track keeps original and masked glyphs aligned,
   even though the mask expands over the borders. The title can shrink with
   ellipsis on narrow desktops without clipping the trailing number. */
.work-nav .index-link,
.work-nav .index-link > .nav-ink {
  display: grid;
  grid-template-columns: minmax(0, max-content) max-content;
  grid-template-rows: 19px;
  align-items: start;
  align-content: center;
  justify-content: start;
  gap: 4px;
}

/* Desktop and mobile drawer share the SAME mask, including the preceding
   row's 1px bottom divider (or Product's own top border) and this row's
   bottom divider. Symmetric expansion keeps the label position unchanged. */
.work-nav .nav-ink { inset: -1px 0; }

/* Paint over adjacent rows and temporary entry-divider copies. While two
   neighboring masks overlap during a quick sweep, the hovered/focused
   row owns their shared edge; an outgoing row must not cover its color. */
.work-nav :is(.category, .index-link)[data-nav-ink-phase]:not([data-nav-ink-phase="idle"]) {
  z-index: 2;
}
.work-nav :is(.category, .index-link)[data-nav-ink-phase]:not([data-nav-ink-phase="idle"]):is(:hover, :focus-visible) {
  z-index: 3;
}

/* Neither categories (including default Product) nor projects retain a
   selection background. Only the shared hover mask paints the row. */

/* Apply the primary color UNDER the mask as soon as selection changes. The moving
   left edge then reveals the colored glyphs, rather than revealing black
   first and changing the entire number after a separate 320ms delay. */
.work-nav .index-link > .index-number { transition: none; }
.work-nav .index-link.is-current > .index-number {
  color: var(--project-primary, var(--ink));
  transition: none;
}
@media print {
  .about-link > .nav-ink { display: none; }
  .work-nav .nav-ink { display: none; }
}