/* Shared header behaviour (was inline style-hover / onmouseover in the mock-up). */
#axTop nav::-webkit-scrollbar { display: none; }
#axTop .ax-nav-link:hover { background: rgba(255, 255, 255, 0.08) !important; color: #FFFFFF !important; }
#axTop .ax-header-icon:hover { background: rgba(255, 255, 255, 0.06) !important; }
/* Narrow screens (#2470): the nav scrolls sideways; its right edge fades out so the cut-off links read as more to
   scroll to, and end padding lets the last link scroll clear of the fade. */
@media (max-width: 759px) {
  #axTop nav { padding-right: 24px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
}
/* Hiding the header icons below 1100px is per page, as in the mock-up (dashboard.css, dsat.css, guide.css); the timeline keeps them. */

/* "Coming soon" label and banner (Components/ComingSoon.razor). The Dashboard's "Coming soon" status pill at inline
   size. Guide pages do not load the design-system tokens, so each token carries its value as a fallback.
   max-width lets the words wrap inside the pill in a column narrower than it (Training tiles at 390px). */
.ax-coming-soon { display: inline-flex; align-items: center; gap: 5px; margin-left: .4em; padding: 1px 7px; border-radius: 9999px; background: var(--ax-ink-50, #F4F4F5); color: var(--ax-ink-500, #52525B); font-family: inherit; font-size: 11px; font-weight: 600; line-height: 14px; letter-spacing: normal; text-transform: none; vertical-align: 1px; max-width: 100%; box-sizing: border-box; }
.ax-coming-soon-dot { width: 6px; height: 6px; flex: none; border-radius: 9999px; background: var(--ax-ink-300, #A1A1AA); }
.ax-coming-soon-banner { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 10px 14px; border: 1px solid var(--ax-border-1, #E4E4E7); border-radius: 8px; background: var(--ax-ink-50, #F4F4F5); color: var(--ax-ink-500, #52525B); font-family: inherit; font-size: 13px; line-height: 1.5; }
.ax-coming-soon-banner strong { color: var(--ax-ink-700, #27272A); font-weight: 600; }
.ax-coming-soon-banner .ax-coming-soon-dot { width: 7px; height: 7px; }

/* Skip link (#2470): off screen until it has keyboard focus, then shown over the header. */
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 14px; border-radius: 6px; background: #FFFFFF; color: #000000; font: 600 14px/1.2 system-ui, sans-serif; text-decoration: underline; }
.skip-link:focus { left: 8px; outline: 2px solid #14BCD0; outline-offset: 2px; }