/* qol.one hub - header search (shared qol-search component + full-text engine).
   The mount box is sized here, in the head, before any script runs: the trigger fills a box that already
   exists, so nothing in the nav moves when it appears. */
.nav-end{display:flex;align-items:center;gap:10px;flex-shrink:0}
.nav-end .btn{flex-shrink:0}
#qolSearch{flex:0 0 40px;width:40px;height:40px;min-width:40px}
/* desktop: a real bar ("Search" + the / hint); tablet and phone keep the icon and open a full-screen sheet */
@media (min-width:1001px){#qolSearch{flex-basis:150px;width:150px}}
@media (min-width:1200px){#qolSearch{flex-basis:208px;width:208px}}
/* below 900px the five section links no longer fit beside the search and the Join button (they wrapped to two
   lines at 768px before search existed); the search sheet takes over as the way around */
@media (max-width:900px){nav .nav-links{display:none}}   /* "nav " outranks the page's own later .nav-links rule */

:root{
  --qs-accent:#1DB954;
  --qs-accent-2:#E2C25A;
  --qs-mark:rgba(29,185,84,.28);
  --qs-row:rgba(29,185,84,.10);
  --qs-border:rgba(255,255,255,.10);
  --qs-muted:#9aa6c2;
  --qs-text:#f4f7ff;
  --qs-bg:rgba(9,14,26,.9);
  --qs-sheet:#070b16f7;
  --qs-font:"Geist",system-ui,-apple-system,sans-serif;
  /* QOL Edit's "Corner roundness" token (--qs-radius, 7px live) also sets the panel corners; the trigger follows it too */
  --qs-trigger-radius:var(--qs-radius,11px);
  --qs-trigger-bg:rgba(255,255,255,.03);
  --qs-trigger-border:rgba(255,255,255,.09);
}
/* the hub nav at 320px: brand + "Hub" tag + search + Join no longer fit one 272px row (it scrolled sideways by 12px);
   below 350px the small "Hub" tag steps aside so nothing else has to shrink */
@media (max-width:349px){nav:has(.nav-end>.btn) .svc-tag{display:none}}