/* Wordmark. Inter Tight is the display face (already loaded 500/600/700); the
   body face Inter reads as plain UI text at this size. Tracking is pulled in
   to -0.03em so the letterforms lock into a single unit rather than a word.
   Colours are sampled from logo.png: #145DA1 is the mark's own navy. */
.fa-wordmark{
   font-family:'Inter Tight',Inter,system-ui,-apple-system,sans-serif;
   font-size:17px;
   font-weight:700;
   letter-spacing:-.03em;
   line-height:1;
   color:var(--color-zinc-900,#18181b);
   white-space:nowrap;
}
.fa-wordmark-alpha{ color: var(--fa-navy); }

/* Responsive behaviour is self-contained (was md:hidden lg:inline): lg:inline
   exists ONLY in styles2-extra.css, which 157 of 160 header views never load,
   so the wordmark silently vanished at desktop on those pages. Hide only in
   the tablet band where the nav needs the room. */
@media (min-width:768px) and (max-width:1023.98px){ .fa-wordmark{ display:none; } }

/* ONE header everywhere. Docs pages load docs.css (a differently-purged
   Tailwind build), so every utility this partial needs that is absent from
   that build is shimmed here verbatim. On marketing pages these duplicate
   styles2.css with identical values - harmless. Do NOT fork this header
   again; DocsHeader.cshtml is a thin wrapper around this partial. */
/* letter-spacing matches the marketing build's inherited body tracking
   (-0.4px); docs pages inherit `normal`, which rendered every nav label a
   few px wider and shifted the whole right-anchored row. */
header.fa-hdr{ font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif; letter-spacing:-0.4px; }
.bg-green-600{ background-color:#16a34a; }
.flex-shrink-0{ flex-shrink:0; }
.gap-0\.5{ gap:.125rem; }
.gap-1{ gap:.25rem; }
.w-2{ width:.5rem; } .h-2{ height:.5rem; }
.w-3\.5{ width:.875rem; } .h-3\.5{ height:.875rem; }
.w-9{ width:2.25rem; } .h-9{ height:2.25rem; }
.top-full{ top:100%; }
.overscroll-contain{ overscroll-behavior:contain; }
.max-h-\[calc\(100vh-8rem\)\]{ max-height:calc(100vh - 8rem); }
.transition-colors{ transition-property:color,background-color,border-color,text-decoration-color,fill,stroke; transition-timing-function:cubic-bezier(.4,0,.2,1); transition-duration:.15s; }
.hover\:border-zinc-600:hover{ border-color:#52525b; }
/* Pages that get Alpine injected by the self-heal below may not define
   x-cloak hiding; without it the dropdowns flash open pre-init. */
[x-cloak]{ display:none !important; }

/* Theme toggle control (only rendered on opt-in pages). */
/* flex-shrink:0 + nowrap on the auth block: the extra 32px control was
   squeezing "Sign In" into two lines on the docs layout. */
.fa-hdr #fa-auth-nav{ white-space:nowrap; flex-shrink:0; }
.fa-theme-btn{ flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; border:0; background:none; color:#71717a; cursor:pointer; transition:background .15s, color .15s; }
.fa-theme-btn:hover{ background:var(--color-zinc-100,#f4f4f5); color:#18181b; }

.fa-theme-btn .fa-icon-sun{ display:none; }

.fa-gradient-border{
   border:1px solid transparent;
   background:
   linear-gradient(var(--color-white),var(--color-white)) padding-box,
   linear-gradient(120deg,var(--color-zinc-300),var(--color-zinc-100),var(--color-zinc-300)) border-box;
}

.fa-nav-link{
   position:relative;
   display:flex;
   align-items:center;
   gap:.25rem;
   transition:color .18s ease, background-color .18s ease;
}
.fa-nav-link:hover{ color:var(--color-zinc-900); }
.fa-nav-link.is-active{ color:var(--color-zinc-900); }
.fa-nav-link::after{
   content:"";
   position:absolute;
   left:.625rem; right:.625rem; bottom:.15rem;
   height:2px;
   border-radius:2px;
   background:var(--color-zinc-900);
   transform:scaleX(0);
   transform-origin:left center;
   transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.fa-nav-link:hover::after{ transform:scaleX(1); }
.fa-nav-link.is-active::after{ transform:scaleX(1); }

.fa-chevron{ transition:transform .25s cubic-bezier(.4,0,.2,1); }
.fa-chevron.is-open{ transform:rotate(180deg); }

@keyframes fa-item-in{
   from{ opacity:0; transform:translateY(4px); }
   to{ opacity:1; transform:translateY(0); }
}
.fa-mega-item{ animation:fa-item-in .28s cubic-bezier(.4,0,.2,1) both; }

.fa-mega-grid{
   display:grid;
   grid-template-columns:1fr 1fr;
   gap:0;
}
.fa-mega-col{ padding:1.25rem 1.5rem; }
.fa-mega-row{ display:grid; grid-template-columns:1fr 1fr; }
.fa-mega-row.fa-mega-row-3{ grid-template-columns:1fr 1fr 1fr; }

.fa-mega-heading{
   display:flex; align-items:center; gap:.4rem;
   font-size:.75rem; font-weight:700; letter-spacing:.02em;
   color:var(--color-zinc-700);
   margin-bottom:.75rem;
}

.fa-mega-link{
   display:flex; align-items:flex-start; gap:.65rem;
   padding:.5rem .5rem; border-radius:.6rem;
   text-decoration:none;
   transition:background-color .16s ease, transform .16s ease;
}
.fa-mega-link:hover{ background-color:var(--color-zinc-50); transform:translateX(2px); }
.fa-mega-icon{
   display:flex; align-items:center; justify-content:center;
   width:34px; height:34px; border-radius:.55rem;
   font-size:.75rem; font-weight:700; flex-shrink:0;
   transition:transform .18s ease;
}
.fa-mega-link:hover .fa-mega-icon{ transform:scale(1.08) rotate(-2deg); }
.fa-mega-label{ font-size:.8rem; font-weight:600; color:var(--color-zinc-700); display:flex; align-items:center; gap:.4rem; }
.fa-mega-desc{ font-size:.72rem; color:var(--color-zinc-500); margin-top:1px; }
.fa-new-badge{
   /* Functional accent = blue-600 (brand system: navy #145DA1 is reserved
      for identity surfaces; indigo is retired from chrome). */
   font-size:9px; font-weight:700; color:#fff; background:#2563eb;
   padding:1px 6px; border-radius:999px; letter-spacing:.02em; line-height:1.4;
}

/* Mobile menu height: cap to the DYNAMIC viewport (dvh) so the panel's tail
   is never hidden behind iOS Safari's bottom bar (100vh includes the area
   behind it - the expanded Tools list ran off-screen). vh line = fallback
   for older browsers; dvh overrides where supported. Own class, not a
   Tailwind arbitrary, so neither purged build can drop it. */
.fa-mobile-toggle-panel{
   max-height:calc(100vh - 8rem);
   max-height:calc(100dvh - 7rem);
   overflow-y:auto;
   overscroll-behavior:contain;
   -webkit-overflow-scrolling:touch;
   padding-bottom:max(.5rem, env(safe-area-inset-bottom));
   box-shadow:0 8px 30px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
}

@media (max-width:1023px){
   .fa-mega-grid{ grid-template-columns:1fr; }
}


/* Referral source modal. */
@keyframes faRefFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes faRefSlideUp { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.fa-ref-opt { display:flex; align-items:center; gap:0.5rem; padding:0.625rem 0.75rem; background:#fff; border:1px solid #e4e4e7; border-radius:0.625rem; font-size:0.8125rem; font-weight:500; color:#3f3f46; cursor:pointer; transition:all 0.15s; text-align:left; font-family:inherit; min-height:42px; }
.fa-ref-opt:hover { border-color:#a1a1aa; transform:translateY(-1px); box-shadow:0 2px 4px rgba(0,0,0,0.04); }
.fa-ref-opt.selected { border-color:#18181b; box-shadow:0 0 0 1px #18181b, 0 4px 8px rgba(24,24,27,0.10); }
.fa-ref-icon { display:flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:6px; flex-shrink:0; }
.fa-ref-label { flex:1; }
#fa-referral-submit:not(:disabled):hover { transform:translateY(-1px); box-shadow:0 4px 10px rgba(24,24,27,0.20); }

/* Open animations for #fa-referral-modal */
.fa-ref-fade-in{ animation: faRefFadeIn 180ms ease-out; }
.fa-ref-slide-up{ animation: faRefSlideUp 220ms cubic-bezier(0.2,0.8,0.2,1); }

/* ── Copy tooltip (faCopyKey / faCopyFirstCall) ── */
.fa-copy-tooltip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-zinc-900, #18181b);
    color: #fff;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1;
    padding: .3rem .55rem;
    border-radius: .25rem;
    white-space: nowrap;
    display: none;
    pointer-events: none;
    z-index: 20;
}
.fa-copy-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: var(--color-zinc-900, #18181b);
}

/* ── Doc link ── */
.fa-doclink-arrow { transition: transform .2s ease; }
.fa-doclink:hover .fa-doclink-arrow { transform: translate(2px, -2px); }

/* ── Code panel ── */
.fa-code { background: var(--color-zinc-900); }

/* ── Code panel tabs ── */
.fa-tab { color: var(--color-zinc-400, #a1a1aa); background: transparent; transition: background-color .15s ease, color .15s ease; }
.fa-tab:hover { color: #fff; }
.fa-tab[aria-selected="true"] { color: #fff; background: rgba(255, 255, 255, .1); }

.fa-welcome-modal-container::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, #145DA1 0%, #3293E2 55%, #72CDEC 100%);
}

/* ---- Dark surfaces -------------------------------------------------
Two triggers, one style: `body.bg-slate-950` catches the 97 pages that
are hardcoded dark (concepts, stock, futures, admin - all use exactly
that class), and `html.dark` catches pages switched by the theme
toggle. Without this the white pill floated on near-black, which was
the actual visible seam between the light and dark halves of the site. */
body.bg-slate-950 .fa-hdr .fa-gradient-border,
html.dark .fa-hdr .fa-gradient-border{
   background:
      linear-gradient(#0f172a,#0f172a) padding-box,
      linear-gradient(120deg,#1e293b,#334155,#1e293b) border-box;
}
body.bg-slate-950 .fa-hdr .fa-wordmark,
html.dark .fa-hdr .fa-wordmark{ color:#fff; }
body.bg-slate-950 .fa-hdr .fa-wordmark-alpha,
html.dark .fa-hdr .fa-wordmark-alpha{ color:#72CDEC; }
body.bg-slate-950 .fa-hdr .fa-nav-link,
html.dark .fa-hdr .fa-nav-link{ color:#cbd5e1; }
body.bg-slate-950 .fa-hdr .fa-nav-link:hover,
html.dark .fa-hdr .fa-nav-link:hover{ color:#fff; }
body.bg-slate-950 .fa-hdr .fa-nav-link::after,
html.dark .fa-hdr .fa-nav-link::after{ background:#fff; }
body.bg-slate-950 .fa-hdr #fa-status-label,
html.dark .fa-hdr #fa-status-label{ color:#94a3b8; }
/* Panels: mega menu, mobile sheet, user + tools dropdowns. */
body.bg-slate-950 .fa-hdr .fa-mobile-toggle-panel,
html.dark .fa-hdr .fa-mobile-toggle-panel{
   background:#0f172a; border-color:#1e293b; color: var(--color-zinc-200);
}
body.bg-slate-950 .fa-hdr .fa-mega-label, 
body.bg-slate-950 .fa-hdr .fa-mega-heading,
html.dark .fa-hdr .fa-mega-label, 
html.dark .fa-hdr .fa-mega-heading{ color: var(--color-zinc-200); }
html.dark .fa-mega-row {
   background-color: #0f172a;
}
body.bg-slate-950 .fa-hdr .fa-mega-desc,
html.dark .fa-hdr .fa-mega-desc{ color: var(--color-zinc-200); }
body.bg-slate-950 .fa-hdr .fa-mega-link:hover,
html.dark .fa-hdr .fa-mega-link:hover{ background:#1e293b; }
body.bg-slate-950 .fa-hdr .fa-mobile-toggle-panel a, body.bg-slate-950 .fa-hdr .fa-mobile-toggle-panel button,
html.dark .fa-hdr .fa-mobile-toggle-panel a, 
html.dark .fa-hdr .fa-mobile-toggle-panel button{ color:#e2e8f0 !important; }
/* Mobile CTA: the button hardcodes background:#18181b INLINE (both in this
   partial and in the flash-auth.js re-render), so on a dark panel it was
   near-black on near-black. Inline styles need !important to override, and
   the #id beats the panel-wide colour rule above. */
body.bg-slate-950 .fa-hdr #fa-auth-mobile a[href="/pricing"],
html.dark .fa-hdr #fa-auth-mobile a[href="/pricing"]{
   background:#fff !important; color:#0f172a !important;
}
html.dark .profile-user-email {color: var(--color-zinc-300);}
html.dark .fa-mega-heading { color: var(--color-zinc-200);}
html.dark .fa-mega-label { color: var(--color-zinc-200);}
html.dark .fa-mega-desc { color: var(--color-zinc-300);}
html.dark .fa-mega-link:hover{ background-color: var(--color-blue-dark-hover); }
html.dark .fa-mobile-tools-menu .fa-mega-heading,
html.dark .fa-mobile-tools-menu .fa-mega-label,
html.dark .fa-mobile-tools-menu .fa-mega-desc {color: var(--color-zinc-200);}
html.dark .bg-blue-dark-mode { background-color: var(--color-blue-dark-mode); }
html.dark .border-blue-dark-mode { border-color: var(--color-blue-dark-mode); }
html.dark .fa-theme-btn, body.bg-slate-950 .fa-theme-btn{ color:#94a3b8; }
html.dark .fa-theme-btn:hover, body.bg-slate-950 .fa-theme-btn:hover{ background:#1e293b; color:#fff; }
html.dark .fa-theme-btn .fa-icon-sun{ display:block; }
html.dark .fa-theme-btn .fa-icon-moon{ display:none; }