/* nav.css — navigation between the two surfaces and within the inbox
 * (2026-09-09). Loaded last, after style.css, so its rules win on the same
 * selectors without !important. Nothing here is decoration: a link that
 * reads as a link, a name that reads as tappable, a card picked out for a
 * moment because the tap asked for it. */

/* The rail's "Your artist profile" row is an anchor wearing the menu row's
 * clothes. Anchors do not inherit the button reset, so the three things a
 * link adds — underline, its own colour, inline flow — are put back. */
.account-menu a.am-row {
  text-decoration: none;
  color: var(--text);
  box-sizing: border-box;
}
.account-menu a.am-row:hover,
.account-menu a.am-row:focus-visible { background: var(--surface-2); }
.account-menu a.am-row:focus-visible { outline: 2px solid var(--lilac); outline-offset: -2px; }

/* The sender's name in a row's facts line. Tappable — pointer, underline on
 * hover and on keyboard focus — and otherwise exactly the text it was. */
.ib-meta .ib-sender-link {
  cursor: pointer;
  color: inherit;
  text-underline-offset: 2px;
}
.ib-meta .ib-sender-link:hover,
.ib-meta .ib-sender-link:focus-visible {
  text-decoration: underline;
  color: var(--text);
  outline: none;
}

/* The "Who sent this" card, picked out for a moment after the name was
 * tapped: a ring that fades, no glow. Stops under reduced motion. */
.ib-hilite { animation: ib-hilite 1.8s ease-out 1; border-radius: 12px; }
@keyframes ib-hilite {
  0%, 35% { outline: 2px solid var(--lilac); outline-offset: 4px; }
  100% { outline: 2px solid transparent; outline-offset: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .ib-hilite { animation: none; outline: 2px solid var(--lilac); outline-offset: 4px; }
}