/* The Claude Design app header shared by the redesigned app pages.
 * Layout lives inline in templates/partials/_app_header.html; this sheet holds
 * the design's hover states, the account menu and the small-screen fallback. */
@keyframes novaPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(22,163,106,.45) } 70% { box-shadow: 0 0 0 7px rgba(22,163,106,0) } }

#nova-header, #nova-header * { box-sizing: border-box; }
/* Font and ink are set here as well so the header looks the same on pages without the design's wrapper (Terminal, staff panel, legal pages). */
#nova-header { line-height: normal; font-family: 'Manrope', system-ui, sans-serif; color: var(--nv-0e0f1f-text); }
#nova-header a { text-decoration: none; }
#nova-header .nv-links::-webkit-scrollbar { display: none; }

#nova-header .nv-h-navlink:hover { background: var(--nv-f0f0f7) !important; color: var(--nv-0e0f1f-text) !important; }
#nova-header .nv-h-iconbtn:hover { border-color: var(--nv-f3c4ca) !important; color: #DD3D4F !important; background: var(--nv-fff5f6) !important; }
#nova-header .nv-h-avatar:hover { border-color: var(--nv-f3c4ca) !important; }

#nova-header .nv-menu-item { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-radius: 9px;
  background: transparent; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--nv-1c1d2e-text); cursor: pointer;
  transition: all .18s; }
#nova-header .nv-menu-item:hover { background: var(--nv-fff5f6); color: var(--nv-b4202f); }
#nova-header button:focus-visible, #nova-header a:focus-visible { outline: 2px solid #DD3D4F; outline-offset: 2px; }

/* Staff tab: pending review count (kyc, payouts, refunds and feature queues). */
#nova-header .nv-h-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: #DD3D4F; color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; line-height: 1; }

/* Visitors' header (Log in / Get started), as on the Home page. */
#nova-header .nv-h-ghost:hover { border-color: var(--nv-f3c4ca) !important; background: var(--nv-fff5f6) !important; color: var(--nv-0e0f1f-text) !important; }
#nova-header .nv-h-navcta:hover { background: #B4202F !important; border-color: #B4202F !important; transform: translateY(-1px) !important; box-shadow: 0 12px 22px -8px rgba(221,61,79,.7) !important; color: #fff !important; }

/* Visitors' footer (partials/footer.html). */
#nova-footer a { text-decoration: none; }
#nova-footer .nv-foot-link { color: var(--nv-0e0f1f-text); transition: color .2s; }
#nova-footer .nv-foot-link:hover { color: #DD3D4F; }
#nova-footer a:focus-visible { outline: 2px solid #DD3D4F; outline-offset: 2px; }

/* Header breakpoints, shared by every page header: the app header and its public variant
   (partials/_app_header.html, which every marketing page includes - Rules, Programs, Markets,
   Competitions, Success stories, Support, Affiliates, Academy, the legal pages and the sandbox
   payment page), mirrored by the Home page's own header (home.css):
     >= 1280px  one row, the design's spacing;
     1024-1279  one row, tighter spacing (the widest row - staff with a pending count, or the
                six-link public row of Success stories - needs ~1095px at the design's spacing);
     <= 1023px  compact: the nav moves to its own full-width row under the logo and actions
                (every link fits from 600px up; on phones the row scrolls sideways with a fade).
   The header's height at each breakpoint is --nv-header-h in theme.css. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  #nova-header .nv-bar { gap: 16px !important; }
  #nova-header .nv-links > a { padding-left: 9px !important; padding-right: 9px !important; }
  #nova-header .nv-actions { gap: 8px !important; }
  /* staff row: the live pill keeps its dot; the word stays for screen readers */
  #nova-header:has(.nv-h-staff) #nv-live { padding: 7px 9px !important; gap: 0 !important; }
  #nova-header:has(.nv-h-staff) #nv-live-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 1023.98px) {
  #nova-header .nv-bar { flex-wrap: wrap; height: auto !important; padding: 10px 16px !important; gap: 10px 12px !important; }
  #nova-header .nv-actions { margin-left: auto; }
  #nova-header .nv-links { order: 3; flex: 1 1 100% !important; padding-right: 28px; scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  #nova-header .nv-links.nv-links-end { -webkit-mask-image: none; mask-image: none; }
  /* scrolled away from the first tab: the left edge fades as well, so the hidden tabs are hinted at */
  #nova-header .nv-links.nv-links-scrolled {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
  #nova-header .nv-links.nv-links-scrolled.nv-links-end {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px);
            mask-image: linear-gradient(90deg, transparent, #000 36px); }
  #nova-header .nv-links > a { scroll-snap-align: start; }
}

@media (max-width: 480px) {
  #nova-header #nv-live { display: none !important; }
}


/* Phones: the tab row scrolls sideways. A soft fade on the right edge shows
   there is more, and each tab gets a finger-sized hit area. */
@media (max-width: 767px) {
  #nova-header .nv-links > a { display: inline-flex; align-items: center; min-height: 44px; }
  /* every control a finger can hit is at least 44px */
  #nova-header .nv-h-iconbtn { width: 44px !important; height: 44px !important; }
  #nova-header .nv-bar > a:first-child { min-height: 44px; }
  #nova-header .nv-h-avatar { min-height: 44px; }
  #nova-header [data-nv-menu-panel] { top: 52px !important; }
  #nova-header .nv-menu-item { display: flex; align-items: center; min-height: 44px; }
}

/* Phones: visitors' buttons and footer links are finger-sized; on the narrowest screens the
   visitors' header drops the theme button so Log in and Get started fit beside the logo. */
@media (max-width: 767px) {
  #nova-header .nv-actions > a { display: inline-flex; align-items: center; min-height: 44px; }
  #nova-footer { padding-left: 16px !important; padding-right: 16px !important; }
  #nova-footer .nv-foot-links { gap: 0 !important; align-items: flex-start; }
  #nova-footer .nv-foot-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
}
@media (max-width: 420px) {
  #nova-header.nv-public .nv-bar { padding-left: 16px !important; padding-right: 16px !important; }
  #nova-header.nv-public .nv-h-theme { display: none !important; }
  #nova-header.nv-public .nv-actions { gap: 8px !important; }
  #nova-header .nv-h-login, #nova-header .nv-h-signup { padding: 8px 12px !important; font-size: 14px !important; }
}