/* PurplEdge HQ — shared stylesheet (05.10.2026)
   One file for tokens + the few components the shell uses.

   How pages use it
   - Link it BEFORE the page's own <style>. The page keeps its rules; only its
     old :root colour block is gone. Legacy variable names (--brand, --accent,
     --acc, --bg, --card, --dim, --tx ...) are aliases below, so page rules keep
     working unchanged.
   - Theme: light by default, dark from the OS setting. A page whose own rules
     hard-code light surfaces pins itself with <html data-theme="light">; a
     dark-only page pins <html data-theme="dark">. The shell lets the viewer
     choose (data-theme on <html>, remembered per browser).
   - Every component class is prefixed hq- so it never collides with a page's
     own .card/.btn/.tabs. Base element rules apply only under body.hq. */

:root{
  color-scheme:light;
  /* brand — HQ is internal, so the institutional purple family */
  --pu:#6B2C91; --pu2:#8B47B0; --pu-fill:#6B2C91; --wash:#F3ECF9; --focus:#8B47B0;
  --cy:#0E7490;                     /* cyan, AA on white; logo gradient end */
  /* neutrals */
  --ground:#FBFAFC; --surf:#FFFFFF; --surf2:#F5F2F8; --line:#E8E3EE; --line2:#CFC5D9;
  --ink:#191420; --mut:#625A72;     /* --mut 6.3:1 on --surf2 (AA) */
  /* status — only for state, never decoration */
  --ok:#1F7A4E;  --ok-w:#E7F6EF;
  --warn:#8A5A0B; --warn-w:#FDF4E4;
  --bad:#A32B2B; --bad-w:#FBE9E9;
  --stale:#6B6378; --stale-w:#EFECF3;
  --off:#8E879B;
  /* type */
  --font:"Heebo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --fs-xs:12px; --fs-sm:13px; --fs:15px; --fs-lg:18px; --fs-xl:24px;
  /* space / shape */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px;
  --r-sm:7px; --r:10px; --r-lg:14px;
  --sh:0 1px 2px rgba(25,20,32,.05),0 6px 20px rgba(25,20,32,.05);
  --hdr-bg:rgba(255,255,255,.94);

  /* aliases — legacy names used by the pages */
  --brand:var(--pu-fill); --accent:var(--pu-fill); --acc:var(--pu-fill); --purple:var(--pu);
  --brand2:var(--cy); --cyan:var(--cy);
  --bg:var(--ground); --panel:var(--surf); --card:var(--surf); --sel:var(--wash);
  --dim:var(--mut); --tx:var(--ink);
  --good:var(--ok); --okw:var(--ok-w); --warnw:var(--warn-w); --badw:var(--bad-w);
}

/* dark tokens: explicit choice, or OS preference unless the page pins light */
:root[data-theme="dark"]{
  color-scheme:dark;
  --pu:#C4A1EC; --pu2:#D8BFF4; --pu-fill:#7C4DEB; --wash:#2A2038; --focus:#C4A1EC;
  --cy:#22D3EE;
  --ground:#100E16; --surf:#18151F; --surf2:#1F1B28; --line:#2C2638; --line2:#3D3550;
  --ink:#EDEAF5; --mut:#A79FBA;
  --ok:#5BD39A; --ok-w:#13291F; --warn:#F2B95A; --warn-w:#2E2412;
  --bad:#F28B8B; --bad-w:#311718; --stale:#A79FBA; --stale-w:#24202D; --off:#7D768C;
  --sh:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25);
  --hdr-bg:rgba(16,14,22,.92);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --pu:#C4A1EC; --pu2:#D8BFF4; --pu-fill:#7C4DEB; --wash:#2A2038; --focus:#C4A1EC;
    --cy:#22D3EE;
    --ground:#100E16; --surf:#18151F; --surf2:#1F1B28; --line:#2C2638; --line2:#3D3550;
    --ink:#EDEAF5; --mut:#A79FBA;
    --ok:#5BD39A; --ok-w:#13291F; --warn:#F2B95A; --warn-w:#2E2412;
    --bad:#F28B8B; --bad-w:#311718; --stale:#A79FBA; --stale-w:#24202D; --off:#7D768C;
    --sh:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25);
    --hdr-bg:rgba(16,14,22,.92);
  }
}

/* one focus ring everywhere (pages included) */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* phones: text fields at 16px so iOS does not zoom the page on focus (all pages that link this file) */
@media (max-width:700px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea{font-size:16px!important}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── base, only for pages that opt in with body.hq ─────────────────────── */
body.hq{margin:0;background:var(--ground);color:var(--ink);font:var(--fs)/1.55 var(--font);
  -webkit-font-smoothing:antialiased}
/* :where() keeps these at element weight, so any component class wins */
:where(body.hq) *{box-sizing:border-box}
:where(body.hq) :is(button,input,select,textarea){font:inherit;color:inherit}
:where(body.hq) a{color:var(--pu)}
.hq-mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* 1 · header ─────────────────────────────────────────────────────────── */
.hq-header{position:sticky;top:0;z-index:60;background:var(--hdr-bg);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hq-header::after{content:"";position:absolute;inset:auto 0 -1px 0;height:2px;
  background:linear-gradient(90deg,var(--cy),var(--pu));opacity:.55}
.hq-header__in{max-width:1560px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:14px}
.hq-brand{font-weight:800;font-size:19px;letter-spacing:-.3px;white-space:nowrap;text-decoration:none;color:var(--ink)!important}
.hq-brand b{color:var(--pu);font-weight:800}
.hq-brand small{font:500 11px var(--mono);color:var(--mut);margin-inline-start:6px;letter-spacing:0}

/* 2 · nav ────────────────────────────────────────────────────────────── */
.hq-nav{display:flex;gap:2px;align-items:center}
.hq-nav__a{border:1px solid transparent;background:none;padding:7px 14px;border-radius:9px;cursor:pointer;
  color:var(--mut);font-weight:600;font-size:14.5px;text-decoration:none;white-space:nowrap}
.hq-nav__a:hover{background:var(--surf2);color:var(--ink)}
.hq-nav__a[aria-current="page"]{background:var(--wash);border-color:var(--line2);color:var(--pu)}
.hq-subnav{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.hq-subnav__a{border:1px solid var(--line);background:var(--surf);color:var(--mut);border-radius:99px;
  padding:5px 13px;font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap}
.hq-subnav__a:hover{border-color:var(--line2);color:var(--ink)}
.hq-subnav__a[aria-current="page"]{background:var(--pu-fill);border-color:var(--pu-fill);color:#fff}

/* 3 · card ───────────────────────────────────────────────────────────── */
.hq-card{background:var(--surf);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh)}
a.hq-card{display:block;text-decoration:none;color:inherit}
a.hq-card:hover{border-color:var(--line2)}

/* 4 · badge ──────────────────────────────────────────────────────────── */
.hq-badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;line-height:1;
  padding:4px 8px;border-radius:6px;white-space:nowrap;background:var(--surf2);color:var(--mut);border:1px solid var(--line)}
.hq-badge--ok{background:var(--ok-w);color:var(--ok);border-color:transparent}
.hq-badge--warn{background:var(--warn-w);color:var(--warn);border-color:transparent}
.hq-badge--down,.hq-badge--bad{background:var(--bad-w);color:var(--bad);border-color:transparent}
.hq-badge--stale{background:var(--stale-w);color:var(--stale);border-color:transparent}
.hq-badge--frozen{background:var(--surf2);color:var(--mut);border:1px dashed var(--line2)}
.hq-badge--work{background:var(--wash);color:var(--pu);border-color:var(--line2)}

/* 5 · button ─────────────────────────────────────────────────────────── */
.hq-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);background:var(--surf);color:var(--ink);
  padding:7px 13px;border-radius:9px;cursor:pointer;font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap}
.hq-btn:hover{border-color:var(--pu);color:var(--pu)}
.hq-btn--pri{background:var(--pu-fill);border-color:var(--pu-fill);color:#fff}
.hq-btn--pri:hover{background:var(--pu2);border-color:var(--pu2);color:#fff}
.hq-btn--ghost{border-color:transparent;background:none;color:var(--mut)}
.hq-btn--ghost:hover{background:var(--surf2)}
.hq-btn--sm{padding:4px 9px;font-size:12.5px}

/* 6 · banner ─────────────────────────────────────────────────────────── */
.hq-banner{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border-radius:var(--r);padding:12px 16px;
  border:1px solid var(--line2);background:var(--surf2);color:var(--ink);font-size:14px}
.hq-banner b{font-size:16px}
.hq-banner--warn{background:var(--warn-w);border-color:transparent;color:var(--warn)}
.hq-banner--bad{background:var(--bad-w);border-color:transparent;color:var(--bad)}
.hq-banner--info{background:var(--wash);border-color:var(--line2);color:var(--pu)}