/* `a.` prefix bumps specificity to (0,1,1) so these rules survive the
   `.app-nav a` rule in app.css that wraps the admin nav. Without the
   prefix, `.pw-nav-link--active` (0,1,0) loses to `.app-nav a` regardless
   of source order. */
a.pw-nav-link {
  color: var(--pw-color-chrome-text);
  text-decoration: none;
  transition: color 0.15s;
}

/* Sets only the line, not the `text-decoration` shorthand, so hovering the
   active item keeps its poppy underline color, thickness and offset. */
a.pw-nav-link:hover {
  text-decoration-line: underline;
}

/* Active item: chrome-colored bold text with a poppy underline. Poppy text
   on teal chrome is 1.87:1, so the accent goes on the line, never the text.
   The doubled class (0,2,1) out-ranks `.app-nav a`'s `text-decoration: none`
   without leaning on stylesheet load order. */
a.pw-nav-link.pw-nav-link--active {
  color: var(--pw-color-chrome-text);
  font-weight: var(--pw-weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--pw-color-chrome-nav-active);
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}