/* quantfi.cc — shared design tokens and the site header.
 *
 * SINGLE SOURCE OF TRUTH. Both the landing page and the pricing page link this
 * file. The tokens were previously declared inline in home.html; they were moved
 * here rather than copied into the second page, so the two cannot drift. Change
 * a colour here and every page that imports it follows.
 *
 * SCOPING MATTERS HERE. The pricing page has its own `header.hero` and its own
 * `.mark` (a feature-row checkmark), so the site header rules below are scoped
 * to `header.site` and `.logo .mark` rather than the bare element and class they
 * used when only one page existed. Nothing else from home.html's stylesheet is
 * in this file: `.wrap`, `.label`, `section` and friends stay page-local
 * precisely because both pages define them differently.
 */

:root{
/* PALETTE:BEGIN */
  /* ground and surfaces */
  --ink:#0a0f16; --card:#0d141d; --card-top:#131f2e; --rule:#1f2b3a; --track:#1a2432;
  /* type */
  --text:#aab6c6; --bright:#e8eef6; --dim:#64748b;
  /* accents */
  --accent:#5b9dd9; --accent-glow:#5b9dd918; --pos:#4a9d7c;
  /* brand: the mark and the primary CTA, nowhere else */
  --amber:#f5a623;
  /* TYPOGRAPHY. Here rather than per app, because three pages defined
     none of these and fell back silently -- fuel asked for a family it
     never loaded. One definition, distributed like the colours. */
  --mono:'Share Tech Mono',ui-monospace,Consolas,monospace;
  --cond:'Barlow Condensed',Barlow,system-ui,sans-serif;
  --body:'Barlow',system-ui,sans-serif;
  --body-size:15px; --body-leading:1.6;

  /* status, unchanged in meaning */
  --red:#ff4d6a; --violet:#c77dff;

  /* ---- legacy names, mapped onto the palette above ----
     Kept so that eight apps' existing rules resolve without being rewritten.
     --muted was #4a5568 and failed contrast at 2.55:1 on both the old and the
     new ground; it now resolves to --dim (4.04:1), which fixes a pre-existing
     accessibility failure rather than carrying it forward. */
  --bg:var(--ink); --bg2:var(--card); --bg3:var(--card-top);
  --border:var(--rule); --muted:var(--dim);
  --green:var(--pos); --blue:var(--accent);
  --panel:var(--card); --line:var(--rule);

  /* DEPRECATED, kept so a cached template cannot render an undefined variable.
     Flask caches compiled templates per process, so between a deploy and the
     restart the OLD markup is live against the NEW stylesheet; without these
     two, every rule that referenced them would have been invalid and the
     landing page's small labels and hairlines would have vanished. Nothing
     written after the amber decision uses either -- test_palette.py enforces
     that -- so they can be deleted once every service has restarted. */
  --amber-dim:var(--rule); --amber-glow:var(--accent-glow);
/* PALETTE:END */
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--body);font-size:var(--body-size);line-height:var(--body-leading)}
a{color:inherit}

/* GENERIC BUTTONS, for in-content calls to action on the landing page. These
   were lost when the old inline nav rules were replaced by the shared nav
   block: that block used to carry `.btn`, and the component now scopes its own
   CTA to header.site, so nothing styled the hero buttons and they rendered as
   plain links. The nav's CTA is deliberately NOT this class -- it is .qd-cta,
   in the component's private namespace, so the two cannot drift into each
   other again. */
.btn{display:inline-block;background:var(--amber);color:#0b0d13;text-decoration:none;
  font-family:var(--cond);font-weight:700;font-size:13.5px;letter-spacing:.1em;
  text-transform:uppercase;line-height:1.6;padding:9px 18px;border:0}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--rule)}
.btn.ghost:hover{background:var(--accent-glow)}

/* CHROME:BEGIN */
/* NO scrollbar-width / scrollbar-color HERE. Chrome ignores the
   ::-webkit-scrollbar rules below as soon as either standard property is
   set, and draws its own thicker grey bar instead. The portal never declared
   them, which is why its scrollbar was the one that looked right. */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--rule)}
::-webkit-scrollbar-thumb:hover{background:var(--dim)}
::-webkit-scrollbar-corner{background:var(--bg)}
/* CHROME:END */

/* NAVCSS:BEGIN */
header.site .qd-brand{display:flex;align-items:center;gap:14px;min-width:0;flex:0 1 auto}
/* The tagline sits INSIDE the existing 62px bar -- no second row, no taller
   bar. It truncates rather than wrapping, because wrapping is what would
   change the height. */
header.site .qd-tag{font-family:'Share Tech Mono',ui-monospace,Consolas,monospace;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto;
  padding-left:14px;border-left:1px solid var(--border);line-height:1.6}
header.site .qd-tag:empty{display:none}
@media(max-width:1100px){header.site .qd-tag{display:none}}

/* The live status the product header used to carry, pinned to the bottom so it
   stays visible without taking a second row at the top. `:has` keeps the page
   padding off pages that have no bar. */
.qd-status-bar{position:fixed;left:0;right:0;bottom:0;z-index:99;display:flex;
  align-items:center;gap:14px;height:30px;padding:0 26px;
  background:rgba(12,16,24,.94);border-top:1px solid var(--border);
  backdrop-filter:blur(6px);font-family:'Share Tech Mono',ui-monospace,Consolas,monospace;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.qd-status-bar > *{flex:none}
.qd-status-bar .qd-sb-label{color:var(--muted)}
body:has(.qd-status-bar){padding-bottom:30px}

header.site{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 26px;height:62px;
  border-bottom:1px solid var(--border);background:rgba(12,16,24,.92);backdrop-filter:blur(6px);
  position:sticky;top:0;z-index:100;box-sizing:border-box;
  /* PINNED THREE WAYS. height alone is enough today -- measured 62px at
     every scroll position -- but min/max make the box immutable, so a
     taller child or an inherited rule cannot grow it on any page. */
  min-height:62px;max-height:62px;flex:none}
header.site .qd-logo{font-family:'Barlow Condensed',Barlow,system-ui,sans-serif;font-weight:900;font-size:21px;letter-spacing:.12em;
  text-transform:uppercase;line-height:1.6;color:var(--amber);display:flex;align-items:center;
  gap:10px;text-decoration:none}
header.site .qd-mark{width:26px;height:26px;background:var(--amber);flex:none;border-radius:0;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
header.site nav{flex:none;display:flex;align-items:center;gap:22px;font-family:'Share Tech Mono',ui-monospace,Consolas,monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase}
header.site nav a{color:var(--dim);text-decoration:none;line-height:1.6;font-family:'Share Tech Mono',ui-monospace,Consolas,monospace;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:400}
header.site nav a:hover{color:var(--accent)}
header.site nav a[aria-current="page"]{color:var(--accent)}
/* The online count. Same treatment as the nav items it sits beside, and as
   "7 PRODUCTS LIVE" on the landing page. Empty on pages that do not compute
   health, where the gap collapses rather than leaving a hole. */
header.site .qd-count{font-family:'Share Tech Mono',ui-monospace,Consolas,monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;margin-left:-14px}
header.site .qd-count:empty{display:none}
header.site .qd-count b{color:var(--accent);font-weight:400}
header.site .qd-count.warn b{color:var(--red)}
/* `header.site nav a` outranks `.btn`, so the CTA needs its own rule or it
   inherits the link line-height and loses 8px of height. A class beats the
   three element names in that selector, which is what lets ONE rule style
   both forms of the CTA -- the link, and the sign-out button on the portal. */
header.site nav .qd-cta{display:inline-block;background:var(--amber);color:#0b0d13;
  font-family:'Barlow Condensed',Barlow,system-ui,sans-serif;font-weight:700;font-size:13.5px;letter-spacing:.1em;
  text-transform:uppercase;line-height:1.6;padding:9px 18px;border:0;text-decoration:none;
  cursor:pointer;white-space:nowrap}
header.site nav .qd-cta:hover{filter:brightness(1.08);color:#0b0d13}
/* A FIXED BOX: the width must not depend on the label, or the whole right-hand
   side of the bar moves when the label does. */
header.site nav .qd-cta{min-width:150px;text-align:center}
/* The sign-out form is layout-transparent: the button is the CTA. */
header.site .qd-signout{display:flex;margin:0;padding:0;border:0}

/* THE LINKS ARE ONE BOX. A row beside the CTA on a wide bar; a drop-down panel
   below. One box, one copy of each link, at every width. */
header.site .qd-links{display:flex;align-items:center;gap:22px}
/* Off-screen rather than display:none, so the menu is still keyboard-operable:
   the checkbox takes focus and Space toggles it. */
header.site .qd-menu-cb{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}
header.site .qd-menu-btn{display:none}

/* NARROW. Below 720px the three section links, the online count and Pricing do
   not fit beside the wordmark and the CTA -- on a 390px phone they overlapped
   the wordmark. They collapse into one menu button. Nothing is hidden from the
   visitor; it is all one tap away, and the bar's 62px height is unchanged. */
@media(max-width:720px){
  header.site{padding:0 14px;gap:12px}
  header.site .qd-logo{font-size:17px;letter-spacing:.08em;gap:8px}
  header.site .qd-mark{width:21px;height:21px}
  header.site nav{gap:10px}
  /* 44px square -- the minimum tap target, and the only control that opens
     the menu, so it may not be smaller. */
  header.site .qd-menu-btn{display:flex;flex-direction:column;justify-content:center;gap:4px;
    width:44px;height:44px;padding:0 11px;box-sizing:border-box;border:1px solid var(--border);
    cursor:pointer;flex:none}
  header.site .qd-menu-btn span{display:block;height:2px;background:var(--dim)}
  header.site .qd-menu-cb:focus-visible + .qd-menu-btn{border-color:var(--accent)}
  /* The panel hangs off the bar. `position:sticky` makes the bar the
     containing block, and nothing here changes its pinned 62px. */
  /* OPAQUE, AND NO BLUR. The bar can be translucent because it sits over the
     top of the page; a menu sits over the middle of it, and the first build
     of this panel let the hero text read straight through the items. The
     header above is already a backdrop-filter element, and a second one
     nested inside it did not composite as the .98 alpha implied -- so this
     one is a flat colour and a shadow, which cannot be read through. */
  header.site .qd-links{display:none;position:absolute;top:62px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;padding:4px 14px 10px;
    background:#0c1018;border-bottom:1px solid var(--border);
    box-shadow:0 12px 26px rgba(0,0,0,.55)}
  header.site .qd-menu-cb:checked ~ .qd-links{display:flex}
  header.site .qd-links > a{display:flex;align-items:center;min-height:44px}
  header.site .qd-count{margin-left:0;min-height:44px;display:flex;align-items:center}
  /* The CTA drops its fixed 150px box: at this width that box IS what pushed
     the bar over. The label still never wraps. */
  header.site nav .qd-cta{min-width:0;padding:10px 13px;font-size:12.5px}
  /* THE TEXT TAKES THE SLACK; THE CONTROLS NEVER DO.
     This bar was briefly made to scroll sideways instead, which was wrong in
     a way worth recording: a 30px bar that silently scrolls gives no hint
     that anything is off the end, and a phone showed capitol's sync button
     reading "SYN". A control you cannot see the whole of is a control you do
     not know is there. So the bar clips, the status TEXT is what shrinks and
     ellipsises, and every button keeps its full width. */
  .qd-status-bar{padding:0 12px;gap:10px;overflow:hidden}
  .qd-status-bar .status,.qd-status-bar .hstat,.qd-status-bar #coverage-note,
  .qd-status-bar #lastPoll,.qd-status-bar .last-updated{
    flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .qd-status-bar button,.qd-status-bar .btn,.qd-status-bar .pill{flex:none}
}
/* NAVCSS:END */