/* Site header (docs/features/63): a white floating bar over the page hero — logo left, links centre,
   uniform circular icon buttons right. Loaded after style.css so these rules win by source order. */
@media all and (min-width: 1281px) {
  #spotlight { padding-top: 24px; } /* the bar sits closer to the top edge than the old blue-strip header did */
  div.header { background: var(--cx-card, #fff); border-radius: 999px; padding: 16px 22px 16px 32px; box-shadow: 0 10px 34px rgba(17, 24, 39, .14), 0 1px 0 rgba(255, 255, 255, .6) inset; }
  div.header div.logo h1 { width: auto; height: 54px; }
  div.header div.logo h1 img { width: auto; height: 100%; }
  div.header div.nav { width: auto; flex: 1; margin-left: 28px; }
  div.header div.nav nav ul.main-tab { justify-content: flex-end; align-items: center; gap: 2px; }
  div.header div.nav nav ul.main-tab li { position: relative; }
  div.header div.nav nav ul.main-tab li a { color: var(--cx-ink, #111827); font-size: 14px; font-weight: 600; letter-spacing: .01em; padding: 10px 16px; border-radius: 999px; white-space: nowrap; text-wrap: nowrap; transition: background .15s, color .15s; }
  div.header div.nav nav ul.main-tab li a:hover { background: var(--cx-bg, #f3f4f6); color: var(--cx-primary-dark, #1d4ed8); }
  div.header div.nav nav ul.main-tab li a.button { background: var(--cx-primary, #2563eb); color: #fff; margin-left: 6px; }
  div.header div.nav nav ul.main-tab li a.button:hover { background: var(--cx-primary-dark, #1d4ed8); }
  /* active page: tint the pill instead of the orange dot under the label */
  div.header div.nav nav ul.main-tab li > span { display: none; }
  div.header div.nav nav ul.main-tab li:has(> span) > a { background: rgba(37, 99, 235, .10); color: var(--cx-primary, #2563eb); }
  div.header div.nav nav ul.main-tab li:has(> span) > a::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--cx-primary, #2563eb); }
  div.header div.nav nav ul.main-tab li:has(> span) > a.button { background: var(--cx-primary, #2563eb); color: #fff; }
  div.header div.nav nav ul.main-tab li:has(> span) > a.button::after { display: none; }

  /* icon buttons: messages, notifications, profile, settings — one look for all four */
  div.header div.nav nav ul.main-tab > span.notify { position: relative; display: inline-flex; align-items: center; padding: 0; margin-left: 8px; font-size: 20px; color: var(--cx-ink, #111827); }
  div.header div.nav nav ul.main-tab > span.notify:first-of-type { margin-left: 20px; }
  div.header div.nav nav ul.main-tab > span.notify > a { position: static; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin: 0 !important; padding: 0; border-radius: 50%; background: var(--cx-bg, #f3f4f6); color: var(--cx-ink, #111827); transition: background .15s, color .15s, transform .15s; }
  div.header div.nav nav ul.main-tab > span.notify > a:hover, div.header div.nav nav ul.main-tab > span.cx-acct.active > a { background: rgba(37, 99, 235, .12); color: var(--cx-primary, #2563eb); }
  div.header div.nav nav ul.main-tab > span.notify > a:active { transform: scale(.96); }
  div.header div.nav nav ul.main-tab > span.notify small { position: static; font-size: 20px; line-height: 1; color: inherit; }
  div.header div.nav nav ul.main-tab > span.notify sup { position: absolute; top: -3px; right: -3px; left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; background: #ef4444; color: #fff; border: 2px solid #fff; box-sizing: content-box; }
  div.header div.nav nav ul.main-tab > span.notify sup:empty { display: none; }
  div.header div.nav nav ul.main-tab > span.notify .cx-acct-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
  /* notification dropdown anchors to its button now, not to the page */
  div.header div.nav nav ul.main-tab > span.notify div.down-card { right: 0; left: auto; top: calc(100% + 10px); width: 360px; border: 1px solid var(--cx-line, #e5e7eb); border-radius: var(--cx-radius, 12px); box-shadow: 0 12px 32px rgba(17, 24, 39, .16); z-index: 1150; }
}
@media all and (max-width: 1280px) { span.cx-acct { display: none; } } /* the off-canvas drawer covers these on small screens */

/* Notifications card (bell) — desktop */
span.cx-notif { position: relative; }
span.cx-notif .cx-notif-menu { position: absolute; top: calc(100% + 12px); right: 0; width: 360px; max-width: calc(100vw - 32px); padding: 0; background: var(--cx-card, #fff); border: 1px solid var(--cx-line, #e5e7eb); border-radius: 16px; box-shadow: 0 16px 44px rgba(17, 24, 39, .18); z-index: 1150; text-align: left; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .15s, transform .15s, visibility .15s; }
span.cx-notif .cx-notif-menu::before { content: ""; position: absolute; top: -7px; right: 18px; width: 12px; height: 12px; background: var(--cx-card, #fff); border-left: 1px solid var(--cx-line, #e5e7eb); border-top: 1px solid var(--cx-line, #e5e7eb); transform: rotate(45deg); }
span.cx-notif[data-open="1"] .cx-notif-menu { opacity: 1; visibility: visible; transform: translateY(0); }
span.cx-notif .cx-notif-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--cx-line, #e5e7eb); font-size: 16px; color: var(--cx-ink, #111827); }
span.cx-notif .cx-notif-count { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: rgba(37, 99, 235, .10); color: var(--cx-primary, #2563eb); }
span.cx-notif .cx-notif-list { max-height: 360px; overflow-y: auto; }
span.cx-notif .cx-notif-item { display: flex; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--cx-line, #e5e7eb); color: var(--cx-ink, #111827); transition: background .12s; }
span.cx-notif .cx-notif-item:last-child { border-bottom: 0; }
span.cx-notif .cx-notif-item:hover { background: rgba(37, 99, 235, .05); }
span.cx-notif .cx-notif-dot { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--cx-primary, #2563eb); }
span.cx-notif .cx-notif-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
span.cx-notif .cx-notif-body strong { font-size: 14px; font-weight: 600; line-height: 1.35; }
span.cx-notif .cx-notif-body span { font-size: 14px; line-height: 1.4; color: #4b5563; white-space: normal; }
span.cx-notif .cx-notif-body small { font-size: 12px; color: var(--cx-muted, #6b7280); }
span.cx-notif .cx-notif-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 24px 32px; text-align: center; }
span.cx-notif .cx-notif-empty-ic { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 6px; border-radius: 50%; background: var(--cx-bg, #f3f4f6); color: var(--cx-muted, #9ca3af); font-size: 30px; }
span.cx-notif .cx-notif-empty strong { font-size: 16px; color: var(--cx-ink, #111827); }
span.cx-notif .cx-notif-empty span { font-size: 14px; line-height: 1.5; color: var(--cx-muted, #6b7280); white-space: normal; }
@media all and (max-width: 1280px) { span.cx-notif .cx-notif-menu { display: none; } }
span.cx-notif .cx-notif-body small { font-size: 12px !important; font-weight: 400; color: var(--cx-muted, #6b7280) !important; line-height: 1.4; }

/* ============================================================================
   Sticky header — reveals on scroll up, tucks away on scroll down.
   The bar is fixed rather than sticky on purpose: `overflow-x:hidden` on
   html/body under 480px (components.css QA-18) kills position:sticky, and the
   wrapper is only as tall as the header so it would unstick immediately.
   A spacer inserted where the bar was gives the height back, so nothing shifts - it goes
   there rather than on <body> so a hero sitting behind the header keeps its background.
   The bar carries .cx-headbar: on most public pages it is nested a few levels deep.
   z-index sits under the nav drawer (1100) and its backdrop (1090).
   ============================================================================ */
/* One offset for the whole site: the pill hangs the same distance below the viewport top
   on every page. It lives on the bar, not on `body > section.wrapper > section.top`, because
   the bar is nested a few levels deep on most public pages and that selector only matched
   the handful that are direct children of <body>. */
section.wrapper.cx-headbar > section.top { padding-top: 24px; padding-bottom: 0; }
@media (max-width: 1280px) { section.wrapper.cx-headbar > section.top { padding-top: 14px; } }
.cx-headbar-spacer { height: var(--cx-head-h, 92px); }
body.cx-stickyhead section.wrapper.cx-headbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1085;
  /* pinned explicitly so no ancestor's `.wrapper` override can shift the bar on one page */
  width: 90%; max-width: 1400px; margin: 0 auto;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), background-color .2s ease, box-shadow .2s ease;
  will-change: transform;
}
body.cx-stickyhead section.wrapper.cx-headbar.is-hidden { transform: translateY(-100%); }
/* The bar never paints a ground of its own, on any page: the pill floats on whatever the
   page already has behind it. It used to go opaque white once scrolled, which left a white
   strip across pages whose ground is the light grey (/settings/, /me/, the account pages). */
body.cx-stickyhead section.wrapper.cx-headbar.is-stuck,
section.wrapper.cx-headbar > section.top,
body.cx-stickyhead section.wrapper.cx-headbar.is-stuck > section.top {
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (prefers-reduced-motion: reduce) {
  body.cx-stickyhead section.wrapper.cx-headbar { transition: none; }
}

/* ----------------------------------------------------------------------------
   The header IS the rounded pill - white, fully rounded, at every width, in every
   state, on every page. The page ground is put on <body> too for the pages built on
   the light grey (#f6f7fa = .cxd --d-bg = .cxjd --j-bg = .cx-account/.cx-wizard): the
   bar is fixed, so without it the strip behind and beside the pill fell back to white
   and the pill had nothing to float on.
   ---------------------------------------------------------------------------- */
body:has(.cxd, .cxjd, .cx-account, .cx-wizard) { background: #f6f7fa; }

section.wrapper.cx-headbar div.header {
  background: #ffffff !important;  /* solid white in every state - the bar behind it never tints it */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: 999px;
  padding: 14px 22px 14px 32px;
  box-shadow: none;
}
/* scrolled: the only separation from content sliding underneath */
body.cx-stickyhead section.wrapper.cx-headbar.is-stuck div.header {
  box-shadow: 0 6px 20px rgba(17, 24, 39, .08);
}