/* Header actions: one component on every page (app, tool landings, Validation/Scope, blog, Knowledge).
   Visitor types, from <html> flags set before first paint by <script id="sp-returning"> (tools/shell-src/returning.js):
     new visitor / non-member            Sync · Join free (primary)
     returning non-member (has SIFs)     Sync · My SIFs (N) · Join free (primary)
     member                              Sync · My SIFs (N) (primary)            — never a Member badge
     signed in                           Sync becomes "Synced" (static pages) or the account avatar (app)
   Membership (a short form, no account) and Sync (optional cloud backup) are separate.
   Selectors carry ID weight on purpose: the app header has ID-scoped rules of its own.
   Built by tools/sync_payload.js; markup from tools/landing/common.js headerActions() and payload.html. */
.sp-hdr-actions{display:flex !important;align-items:center;justify-content:flex-end;gap:10px;flex:0 0 auto}
/* Spacing comes only from the gap (the app header container also carries Tailwind space-x margins). */
html body :is(.sp-hdr-actions,#sp-hdr-actions).sp-hdr-actions > *{margin-left:0 !important;margin-right:0 !important}
html body :is(.sp-hdr-actions,#sp-hdr-actions).sp-hdr-actions{margin-left:0 !important;margin-right:0 !important}

/* Sync / Synced: behaves like a menu link (muted, brightening to ink on hover); the cloud glows amber on hover. */
html body :is(.sp-hdr-actions,#sp-hdr-actions).sp-hdr-actions.sp-hdr-actions :is(.sp-hdr-signin,.sp-hdr-account):not(.hidden){
  display:inline-flex !important;align-items:center;justify-content:center;gap:7px;height:40px;min-width:76px;padding:0 13px;
  border:1px solid transparent !important;border-radius:10px;background:transparent !important;color:rgba(11,19,43,.62) !important;
  font:600 14px/1 Manrope,ui-sans-serif,system-ui,sans-serif !important;letter-spacing:0;text-decoration:none !important;
  white-space:nowrap;cursor:pointer;box-shadow:none !important;transition:color .16s ease
}
html body .sp-hdr-actions :is(.sp-hdr-signin,.sp-hdr-account) :is(svg,i){width:16px !important;height:16px !important;flex:0 0 auto;color:currentColor !important;stroke:currentColor !important;transition:color .16s ease,filter .2s ease}
html body :is(.sp-hdr-actions,#sp-hdr-actions).sp-hdr-actions.sp-hdr-actions :is(.sp-hdr-signin,.sp-hdr-account):hover{color:#0B132B !important}
html body .sp-hdr-actions :is(.sp-hdr-signin,.sp-hdr-account):hover :is(svg,i){color:#E5940A !important;stroke:#E5940A !important;filter:drop-shadow(0 0 5px rgba(252,163,17,.65))}

/* Primary: amber, with glow on hover. */
html body :is(.sp-hdr-actions,#sp-hdr-actions).sp-hdr-actions.sp-hdr-actions .sp-hdr-primary:not(.hidden){
  display:inline-flex !important;align-items:center;justify-content:center;gap:8px;height:40px;min-width:112px;padding:0 16px;
  border:1px solid #E5A820 !important;border-radius:10px;background:#FCA311 !important;color:#14213D !important;
  font:700 14px/1 Manrope,ui-sans-serif,system-ui,sans-serif !important;letter-spacing:0;text-decoration:none !important;white-space:nowrap;
  cursor:pointer;box-shadow:0 1px 2px rgba(11,19,43,.1);transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s ease,background-color .18s ease,border-color .18s ease
}
html body .sp-hdr-actions .sp-hdr-primary:hover{background:#FDB236 !important;box-shadow:0 10px 24px -10px rgba(252,163,17,.75),0 0 0 4px rgba(252,163,17,.2) !important;transform:translateY(-1px)}
html body .sp-hdr-actions .sp-hdr-primary svg{width:15px;height:15px}
/* "My SIFs" next to "Join free" (non-members): a quiet outline button, so Join free stays the one primary action. */
html:not([data-sp-member="1"]) body :is(.sp-hdr-actions,#sp-hdr-actions).sp-hdr-actions.sp-hdr-actions.sp-hdr-actions .sp-hdr-mysifs:not(.hidden){min-width:0;background:#fff !important;border-color:#CBD5E1 !important;color:#14213D !important;box-shadow:none}
html:not([data-sp-member="1"]) body .sp-hdr-actions .sp-hdr-mysifs:hover{background:#F7F8FA !important;border-color:#14213D !important;box-shadow:none !important;transform:none}
html body .sp-hdr-actions .sp-hdr-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#14213D;color:#fff;font:600 12px/1 "IBM Plex Mono",ui-monospace,monospace}
html body .sp-hdr-actions .sp-hdr-count:empty{display:none}
html body .sp-hdr-actions :is(.sp-hdr-signin,.sp-hdr-account,.sp-hdr-primary):focus-visible{outline:2px solid #1D4ED8 !important;outline-offset:2px}

/* Visibility from the <html> flags (decided before first paint, so nothing moves). */
html:not([data-sp-has-sifs="1"]):not([data-sp-member="1"]) body :is(.sp-hdr-actions,#sp-hdr-actions).sp-hdr-actions.sp-hdr-actions.sp-hdr-actions .sp-hdr-mysifs:is(a,button){display:none !important}
html[data-sp-member="1"] body :is(.sp-hdr-actions,#sp-hdr-actions).sp-hdr-actions.sp-hdr-actions.sp-hdr-actions .sp-hdr-join:is(a,button){display:none !important}
html[data-sp-signed-in="1"] body :is(.sp-hdr-actions,#sp-hdr-actions).sp-hdr-actions.sp-hdr-actions.sp-hdr-actions .sp-hdr-signin:is(a,button){display:none !important}
html:not([data-sp-signed-in="1"]) body :is(.sp-hdr-actions,#sp-hdr-actions).sp-hdr-actions.sp-hdr-actions.sp-hdr-actions .sp-hdr-account:is(a,button){display:none !important}

/* Returning-visitor content swaps (SIF Register landing hero). */
html:not([data-sp-has-sifs="1"]) body :is(.sp-ret-only,#sp-ret-only):is(a,p,span,div,button){display:none !important}
html[data-sp-has-sifs="1"] body :is(.sp-new-only,#sp-new-only):is(a,p,span,div,button){display:none !important}

@media (max-width:520px){
  .sp-hdr-actions{gap:6px}
  html body :is(.sp-hdr-actions,#sp-hdr-actions).sp-hdr-actions.sp-hdr-actions :is(.sp-hdr-signin,.sp-hdr-account):not(.hidden){min-width:0;height:36px;padding:0 9px;font-size:13px !important}
  html body :is(.sp-hdr-actions,#sp-hdr-actions).sp-hdr-actions.sp-hdr-actions .sp-hdr-primary:not(.hidden){min-width:0;height:36px;padding:0 11px;font-size:13px !important}
  html body .sp-hdr-actions .sp-hdr-primary svg{display:none}
}
/* Small phones: Sync shows as its cloud icon (label kept for screen readers) and a non-member's "My SIFs"
   moves into the mobile menu, so the header fits beside the logo and the menu button. */
@media (max-width:420px){
  html body :is(.sp-hdr-actions,#sp-hdr-actions).sp-hdr-actions.sp-hdr-actions :is(.sp-hdr-signin,.sp-hdr-account):not(.hidden){width:36px;padding:0 !important}
  html body .sp-hdr-actions :is(.sp-hdr-signin,.sp-hdr-account) > span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  html:not([data-sp-member="1"]) body :is(.sp-hdr-actions,#sp-hdr-actions).sp-hdr-actions.sp-hdr-actions.sp-hdr-actions .sp-hdr-mysifs:is(a,button){display:none !important}
  html body :is(#sp-site-header,header) :is(.sp-brand-lockup,.sp-blog-brand img),html body:has(#panel-home) #sp-site-header .sp-brand-lockup.sp-brand-lockup{height:24px !important;width:auto !important;max-width:none !important}
}

/* Menu links, dropdown items and the mobile menu: the same type as Sync on every page. */
html body :is(#sp-site-header,header) :is(.sp-primary-nav .sp-primary-link,.sp-primary-nav .sp-primary-link span,.sp-blog-nav nav a,.sp-blog-nav nav a span){font-family:Manrope,ui-sans-serif,system-ui,sans-serif !important;font-weight:600 !important;font-size:14px !important;letter-spacing:0 !important}
html body :is(#sp-site-header,header) :is(.sp-primary-nav .sp-primary-link,.sp-blog-nav nav a){color:rgba(11,19,43,.62) !important}
html body :is(#sp-site-header,header) :is(.sp-primary-nav .sp-primary-link:hover,.sp-primary-nav .sp-primary-link.is-active,.sp-primary-nav .sp-primary-link[aria-expanded="true"],.sp-blog-nav nav a:hover,.sp-blog-nav nav a[aria-current]){color:#0B132B !important}
html body :is(#sp-site-header,.sp-mobile-nav,#mobile-nav-menu,header) :is(.sp-v138-workspace-item strong,.sp-v149-menu-title,.sp-mobile-link span,.sp-mobile-summary span,.sp-mobile-workspace-cta-copy > span){font-family:Manrope,ui-sans-serif,system-ui,sans-serif !important;font-weight:600 !important;font-size:14px !important;letter-spacing:0 !important;color:#1C2541 !important}
html body :is(#sp-site-header,.sp-mobile-nav,#mobile-nav-menu,header) :is(.sp-v149-menu-title){font-size:11px !important;letter-spacing:.12em !important;text-transform:uppercase;color:#64748B !important}
html body :is(#sp-site-header,.sp-mobile-nav,#mobile-nav-menu,header) :is(.sp-v138-workspace-item small,.sp-mobile-link small,.sp-mobile-workspace-cta-copy small){font-family:Manrope,ui-sans-serif,system-ui,sans-serif !important;font-weight:500 !important;font-size:12.5px !important;color:#64748B !important}
html body #mobile-nav-menu .sp-mobile-workspace-cta .sp-mobile-workspace-cta-copy > span{color:#fff !important;font-size:16px !important}
html body #mobile-nav-menu .sp-mobile-workspace-cta .sp-mobile-workspace-cta-copy > small{color:rgba(226,232,240,.76) !important;font-size:12px !important}
/* While the full navigation is visible (768px and up) no page shows the menu button, as on the static pages. */
@media (min-width:768px){html body #sp-site-header #mobile-menu-toggle{display:none !important}}
@media (prefers-reduced-motion:reduce){
  html body .sp-hdr-actions :is(.sp-hdr-signin,.sp-hdr-account,.sp-hdr-primary),html body .sp-hdr-actions :is(.sp-hdr-signin,.sp-hdr-account) :is(svg,i){transition:none !important}
  html body .sp-hdr-actions .sp-hdr-primary:hover{transform:none}
}

/* Mobile menu: the same rules — Join free for non-members, "My SIFs (N)" when there are SIFs or a membership. */
html[data-sp-member="1"] body #mobile-nav-menu #start-btn-m{display:none !important}
html:not([data-sp-has-sifs="1"]):not([data-sp-member="1"]) body #mobile-nav-menu #mysifs-btn-m{display:none !important}
html body #mobile-nav-menu #login-btn-m{display:inline-flex;align-items:center;justify-content:center;gap:8px}
html body #mobile-nav-menu #login-btn-m :is(svg,i){width:16px;height:16px}
html body #mobile-nav-menu #mysifs-btn-m{gap:8px;text-decoration:none}
html body #mobile-nav-menu #mysifs-btn-m .sp-hdr-count{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#14213D;color:#fff;font:600 12px/1 "IBM Plex Mono",ui-monospace,monospace}
html body #mobile-nav-menu #mysifs-btn-m .sp-hdr-count:empty{display:none}