/**
 * Retracer — Shared navigation + footer styles
 * ==============================================
 * Linked from every page. Do not duplicate these rules inline.
 * Markup is injected by shared/nav.js.
 */

/* ── Nav shell ───────────────────────────────────────── */
.qq-nav{
  background:#fff;
  border-bottom:1px solid #e8e8e8;
  box-shadow:0 1px 4px rgba(0,0,0,.04);
  height:52px;
  padding:0 24px;
  display:flex;
  align-items:center;
  position:sticky;
  top:0;
  z-index:100;
}
/* Reserve height before JS injects, so there's no layout shift */
#qq-nav{min-height:52px}

/* ── Logo ────────────────────────────────────────────── */
.qq-nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:44px;flex-shrink:0}
.qq-nav-logo-mark{
  width:32px;height:32px;
  background:#1a1a2e;
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-family:'SF Mono',Consolas,monospace;
  font-size:16px;font-weight:700;
  color:#7c3aed;
}
.qq-nav-logo-name{font-size:15px;font-weight:700;color:#1a1a1a;white-space:nowrap;line-height:1}

/* ── Links ───────────────────────────────────────────── */
.qq-nav-links{display:flex;align-items:center;flex:1;min-width:0}
.qq-nav-link{
  padding:0 14px;
  height:52px;line-height:1;
  display:flex;align-items:center;
  font-size:13px;font-weight:500;
  color:#666;
  text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s;
  white-space:nowrap;
  box-sizing:border-box;
}
.qq-nav-link:hover{color:#1a1a1a}
.qq-nav-link.active{color:#198663;border-bottom-color:#198663}
.qq-nav-link.soon{color:#767676;cursor:default}
.qq-nav-link.soon:hover{color:#767676}

/* ── Right side ──────────────────────────────────────── */
.qq-nav-right{display:flex;align-items:center;gap:16px;flex-shrink:0;position:relative}
.qq-nav-login{font-size:13px;font-weight:500;line-height:1;color:#666;text-decoration:none;display:inline-flex;align-items:center}
.qq-nav-login:hover{color:#1a1a1a}
.qq-nav-cta{
  background:#198663;color:#fff;
  font-size:13px;font-weight:600;line-height:1;
  padding:8px 16px;border-radius:8px;
  text-decoration:none;display:inline-flex;align-items:center;
  transition:background .15s;
}
.qq-nav-cta:hover{background:#0F6E56}

/* Avatar (logged-in button or logged-out link to profile) */
.qq-avatar{
  width:32px;height:32px;border-radius:50%;
  background:#198663;color:#fff;
  font-size:13px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;border:none;text-decoration:none;
  transition:filter .15s;
  overflow:hidden;padding:0;
}
.qq-avatar:hover{filter:brightness(.92)}
.qq-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}

/* Skeleton — shown ONLY for the brief window before auth state is
   known, in place of either Log in or the avatar. Never clickable,
   never says anything specific, so there's nothing to mis-click. */
.qq-nav-skel{
  display:inline-block;width:32px;height:32px;border-radius:50%;
  background:#EDEEF2;
}

/* Shared scroll-to-top — matches index.html's own version exactly
   (progress ring + purple accent), used on any page with a
   #qq-footer mount. */
.qq-shared-totop{
  position:fixed;right:22px;bottom:22px;z-index:999;width:50px;height:50px;
  border-radius:50%;border:0;background:#fff;color:#53546A;
  cursor:pointer;box-shadow:0 10px 26px rgba(20,20,40,.20),0 0 0 1.5px #E3E5EB inset;
  display:flex;align-items:center;justify-content:center;padding:0;
  transition:color .2s ease,transform .15s ease,box-shadow .2s ease,opacity .2s ease;
  opacity:0;pointer-events:none;
}
.qq-shared-totop.show{opacity:1;pointer-events:auto}
.qq-shared-totop:hover{color:#5B21B6;transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(91,33,182,.24),0 0 0 1.5px #D6C2F5 inset}
.qq-shared-totop:active{transform:translateY(-1px) scale(.94)}
.qq-shared-totop-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.qq-shared-totop-ring-bg{fill:none;stroke:#E3E5EB;stroke-width:2}
.qq-shared-totop-ring-fg{fill:none;stroke:#5B21B6;stroke-width:2;stroke-linecap:round;
  stroke-dasharray:106.8;stroke-dashoffset:106.8;transition:stroke-dashoffset .1s linear}
.qq-shared-totop-arrow{width:18px;height:18px;position:relative;transition:transform .15s ease}
.qq-shared-totop:hover .qq-shared-totop-arrow{transform:translateY(-2px)}
@media(max-width:640px){.qq-shared-totop{right:16px;bottom:16px;width:46px;height:46px}}

/* Dropdown */
.qq-dropdown{
  position:absolute;
  top:44px;right:0;
  min-width:170px;
  background:#fff;
  border:1px solid #e8e8e8;
  border-radius:10px;
  box-shadow:0 6px 24px rgba(0,0,0,.10);
  padding:6px;
  display:none;
  z-index:200;
}
.qq-dropdown.open{display:block}
.qq-dropdown a{
  display:block;
  padding:9px 12px;
  font-size:13px;color:#444;
  text-decoration:none;border-radius:7px;
}
.qq-dropdown a:hover{background:#f5f5f7;color:#1a1a1a}
.qq-dropdown-sep{height:1px;background:#eee;margin:5px 4px}
.qq-dropdown a.danger{color:#c0392b}
.qq-dropdown a.danger:hover{background:#fdf0ef}

/* ── Footer ──────────────────────────────────────────── */
.qq-footer{
  background:#fafafa;
  border-top:1px solid #e8e8e8;
  padding:40px 24px;
  margin-top:auto;
}
.qq-footer-inner{max-width:var(--qq-content-width, 1180px);margin:0 auto}
.qq-footer-cols{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:32px;
  padding-bottom:32px;
}
.qq-footer-col h4{
  font-size:11px;font-weight:700;
  letter-spacing:.06em;color:#6b6b6b;
  text-transform:uppercase;
  margin:0 0 14px;
}
.qq-footer-col a{
  display:block;
  font-size:13.5px;color:#555;
  text-decoration:none;margin-bottom:10px;
}
.qq-footer-col a:hover{color:#1a1a1a}
.qq-footer-col a.soon{color:#767676;cursor:default}
.qq-footer-col a.soon:hover{color:#767676}

.qq-footer-bottom{
  border-top:1px solid #e8e8e8;
  padding-top:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.qq-footer-brand{display:flex;align-items:center;gap:9px}
.qq-footer-copy{font-size:12px;color:#6b6b6b}
.qq-footer-social{display:flex;gap:10px}
.qq-footer-social a{
  width:30px;height:30px;border-radius:7px;
  background:#fff;border:1px solid #e8e8e8;
  display:flex;align-items:center;justify-content:center;
  color:#5c5c5c;text-decoration:none;
  font-size:13px;
  transition:color .15s,border-color .15s;
}
.qq-footer-social a:hover{color:#1a1a1a;border-color:#c7c7c7}

/* ── Nav dropdowns (Academy / Visualizer per technology) ──────────
   The tech-switch strip under the header is hidden site-wide: with the
   tracks now in the nav itself the strip was a second, redundant
   control taking a full row of vertical space on every page. */
.qq-tech-switch-bar{display:none !important}

.qq-nav-dd{position:relative;display:inline-block}
.qq-nav-dd-btn{
  /* Only reset what a <button> gets wrong. `font:inherit` was used here
     first, but that shorthand also resets font-size and font-weight —
     and since this rule comes AFTER .qq-nav-link, it silently wiped the
     link's own sizing, which is why Academy and Visualizer rendered in a
     different font from the rest of the nav. Inheriting the family only
     leaves .qq-nav-link in charge of everything else. */
  font-family:inherit;letter-spacing:inherit;
  background:none;border:0;cursor:pointer;display:inline-flex;
  align-items:center;gap:4px;
}
.qq-nav-caret{font-size:11px;line-height:1;opacity:.65}
/* Open on hover for pointer devices, keeping click for touch.
   The menu is positioned flush against the button and given a
   transparent top pad, so moving the cursor down into it never crosses
   a dead gap that would close it mid-travel. */
@media (hover:hover) and (pointer:fine){
  .qq-nav-dd:hover .qq-nav-dd-menu[hidden]{display:flex}
}
.qq-nav-dd-menu{
  position:absolute;top:100%;left:0;z-index:70;min-width:186px;
  margin-top:0;border-top:8px solid transparent;background-clip:padding-box;
  background:#fff;border:1px solid #e8e8e8;border-radius:11px;padding:6px;
  box-shadow:0 8px 26px rgba(0,0,0,.11);display:flex;flex-direction:column;gap:2px;
}
.qq-nav-dd-menu[hidden]{display:none}
.qq-nav-dd-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 11px;border-radius:7px;font-size:14px;color:#1d1d1f;
  text-decoration:none;min-height:40px;box-sizing:border-box;
}
.qq-nav-dd-item:hover{background:#f4f4f6}
.qq-nav-dd-item.soon{color:#767676;cursor:default}
.qq-nav-dd-item.soon:hover{background:transparent}
.qq-nav-dd-item em{
  font-style:normal;font-size:9px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:#767676;background:#f2f2f4;
  border-radius:4px;padding:2px 6px;
}
.qq-nav-mob-head{
  font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#767676;padding:12px 4px 4px;
}
@media(max-width:820px){
  .qq-nav-mobile .qq-nav-dd-item{border-bottom:1px solid #f2f2f4}
}
/* Base sizing for the nav flex row. MUST sit above the media queries
   below: media queries add no specificity, so any of these declared
   after them would override the narrow-width values at every width. */
.qq-nav{gap:10px}
.qq-nav-logo{min-width:0}
.qq-nav-burger{flex:0 0 auto}

/* ── Mobile menu ───────────────────────────────────────────
   Hidden on desktop; the burger and panel only exist below 820px. */
.qq-nav-burger{
  display:none;background:none;border:0;cursor:pointer;
  width:42px;height:42px;padding:10px;margin-left:4px;
  flex-direction:column;justify-content:space-between;align-items:stretch;
}
.qq-nav-burger span{
  display:block;height:2px;width:100%;background:#1d1d1f;border-radius:2px;
  transition:transform .22s ease,opacity .18s ease;
}
.qq-nav-burger.open span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.qq-nav-burger.open span:nth-child(2){opacity:0}
.qq-nav-burger.open span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
.qq-nav-mobile{display:none}

@media(max-width:820px){
  .qq-nav-links{display:none}
  .qq-nav-burger{display:flex}
  /* Pin the burger to the right edge at every mobile width. Without
     this it sat wherever the flex row happened to end, drifting left
     of the corner as the viewport grew. */
  .qq-nav-burger{margin-left:auto}
  .qq-nav-right{margin-left:0;gap:8px}
  /* Breathing room between the wordmark and the CTA. */
  .qq-nav-logo{margin-right:10px}
  .qq-nav-mobile{
    display:block;background:#fff;border-bottom:1px solid #e8e8e8;
    padding:6px 16px 12px;
  }
  .qq-nav-mobile[hidden]{display:none}
  .qq-nav-mobile a{
    display:block;padding:13px 4px;font-size:15px;color:#1d1d1f;
    text-decoration:none;border-bottom:1px solid #f2f2f4;
    /* 44px minimum tap target — Apple/Google accessibility guidance. */
    min-height:44px;box-sizing:border-box;
  }
  .qq-nav-mobile a:last-child{border-bottom:0}
  .qq-nav-mobile a.active{color:#198663;font-weight:650}
  .qq-nav-mobile a[aria-disabled="true"],
  .qq-nav-mobile span{display:block;padding:13px 4px;color:#767676;font-size:15px}
  .qq-footer-cols{grid-template-columns:1fr 1fr;gap:24px}
  .qq-footer-bottom{flex-direction:column;align-items:flex-start}
}

.qq-nav-mobile-auth{
  display:flex;flex-direction:column;gap:8px;
  margin-top:10px;padding-top:12px;border-top:1px solid #ececf0;
}
.qq-nav-mobile-auth a{
  border-bottom:0 !important;text-align:center;border-radius:9px;
  background:#f4f4f6;font-weight:600;
}
.qq-nav-mobile-auth a.qq-nav-mobile-cta{background:#198663;color:#fff}
.qq-nav-mobile-auth a.danger{color:#C6342F}

@media(max-width:520px){
  .qq-nav{padding-left:14px;padding-right:14px;gap:8px}
  .qq-nav-logo-name{font-size:15px}
  /* Log in lives in the burger panel at this width. */
  .qq-nav-login{display:none}
  .qq-footer-cols{grid-template-columns:1fr;gap:20px}
}

/* ── Very narrow (≤400px) ─────────────────────────────────
   The burger was being pushed out of the bar entirely at 300px: the
   logo and the "Start free" button are both fixed-width flex items, so
   with no room left the last child simply overflowed off-screen and
   there was NO way to open the menu. The burger now never shrinks, the
   logo is allowed to truncate, and the CTA drops out of the bar (it is
   still in the panel), so the menu is always reachable. */
@media(max-width:400px){
  .qq-nav{padding-left:11px;padding-right:11px;gap:6px}
  .qq-nav-logo{min-width:0;flex:0 1 auto;overflow:hidden}
  .qq-nav-logo-name{
    font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .qq-nav-logo-mark{width:28px;height:28px;font-size:15px;flex:0 0 auto}
  .qq-nav-cta{display:none}
  .qq-nav-right{flex:0 0 auto}
  .qq-nav-burger{flex:0 0 auto;width:38px;height:38px;padding:9px;margin-left:auto}
  .qq-tech-pill{padding:6px 11px;font-size:12px}
}

/* ── Technology switcher ──────────────────────────────── */
.qq-tech-switch-bar{background:#fff;border-bottom:1px solid #e8e8e8;padding:8px 24px;display:flex;align-items:center}
@media(max-width:820px){
  /* Four pills don't fit a phone; scroll them instead of wrapping or
     shrinking the text below legibility. */
  .qq-tech-switch-bar{padding:8px 14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .qq-tech-switch-bar::-webkit-scrollbar{display:none}
  .qq-tech-switch{flex:0 0 auto}
  .qq-tech-pill{padding:7px 14px;font-size:12.5px}
}
.qq-tech-switch{
  display:inline-flex;align-items:center;gap:2px;
  background:#f0f0f2;border-radius:8px;padding:2px;
  width:fit-content;flex:0 0 auto;
  box-sizing:border-box;
}
.qq-tech-pill{
  box-sizing:border-box;
  display:inline-block;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:12px;line-height:18px;font-weight:600;color:#5c5c5c;
  padding:4px 12px;border-radius:6px;margin:0;border:none;
  text-decoration:none;cursor:pointer;
  transition:all .15s;white-space:nowrap;
  flex:0 0 auto;
}
.qq-tech-pill:hover{color:#444}
.qq-tech-pill.active{background:#fff;color:#1a1a1a;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.qq-tech-pill.qq-tech-soon{color:#74747c;cursor:default}
.qq-tech-pill.qq-tech-soon:hover{color:#74747c}


/* QQ-NAV-CSS-BUILD: 2026-09-18-a — if this line is not visible in
   DevTools > Network > nav.css > Response, an older file is being
   served and none of the rules below are in effect. */

/* ── Mobile drawer accordion ───────────────────────────────── */
.qq-nav-mob-head.qq-acc{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;font:inherit;text-align:left;background:none;border:0;cursor:pointer;
  color:#6b6b73;font-size:15px;font-weight:600;text-transform:none;letter-spacing:0;
  padding:13px 4px;min-height:46px;
}
.qq-acc-chev{flex:0 0 auto;transition:transform .18s ease;transform-origin:center}
.qq-acc[aria-expanded="true"] .qq-acc-chev{transform:rotate(180deg)}
.qq-acc-panel[hidden]{display:none}
.qq-acc-panel a{padding-left:16px !important}

/* ── Drawer account + role rows ────────────────────────────── */
.qq-nav-mobile-auth{
  display:flex;flex-direction:column;
  margin-top:4px;padding-top:4px;border-top:1px solid #ececf0;
}
.qq-nav-mob-item{
  display:block;border-bottom:0 !important;background:none !important;
  font-weight:500;font-size:15px;color:#333;
  padding:13px 4px;min-height:46px;line-height:1.4;
}
.qq-nav-mob-item:active{background:#f6f6f8 !important;border-radius:8px}
.qq-nav-mob-item-danger{color:#C6342F}
.qq-nav-mob-divider{height:1px;background:#ececf0;margin:4px 0}

/* One typography rule for every actionable drawer row, INSIDE the
   media query: `.qq-nav-mobile a` is (0,1,1) and a rule outside at
   (0,1,0) loses to it — which is why drawer links kept rendering
   heavier than Dashboard however often the weight was set elsewhere. */
@media(max-width:820px){
  .qq-nav-mobile a,
  .qq-nav-mobile .qq-nav-mob-item{
    font-size:15px;font-weight:500;color:var(--text,#1d1d1f);
    letter-spacing:0;text-transform:none;
  }
  .qq-nav-mobile .qq-nav-mob-item-danger{color:var(--text,#1e293b)}
  .qq-nav-mobile .qq-nav-mob-item-danger:active{color:#C6342F}
  /* The avatar sits immediately left of the burger; the desktop
     dropdown is hidden because the drawer carries the same links. */
  .qq-nav-right{margin-left:auto;order:2}
  .qq-nav-burger{margin-left:8px;order:3}
  .qq-nav-logo{order:1}
  .qq-nav-right .qq-dropdown{display:none}
}
@media (prefers-reduced-motion:reduce){ .qq-acc-chev{transition:none} }