/* ProCodeHQ — UI canon (extracted from index.html 2026-07-12).
Shared tokens + components for every ProCodeHQ sub-dashboard.
Dark-first, Lexend/Roboto, ProCode gradient. Segregated from ops shared.css.
Every sub-dash: + the shared JS (hq-theme, auth stack). */
@font-face{font-family:'Lexend';src:url('/fonts/lexend-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Lexend';src:url('/fonts/lexend-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Lexend';src:url('/fonts/lexend-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Roboto';src:url('/fonts/roboto-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Roboto';src:url('/fonts/roboto-500.woff2') format('woff2');font-weight:500;font-display:swap}
/* ── ProCode brand tokens (Brand Book V1.0) ── */
:root{
--bg:#141414; --bg2:#0e0e10; --panel:#1b1b20; --panel2:#212127; --line:#2d2d35;
--ink:#ebebeb; --muted:#9a9aa6; --faint:#6c6c78;
--purple:#9442ff; --purple-4:#a869ff; --purple-3:#ba87ff;
--blue:#6661ff; --green:#36b069; --magenta:#d669ff;
--amber:#e0a13a; --red:#e0655a; --teal:#3ab6c4;
--grad-bg:radial-gradient(circle at top right,#36b069,#6661ff 50%,#a869ff 75%,#d669ff 100%);
--grad-txt:linear-gradient(110deg,#a869ff,#6661ff 55%,#36b069);
--sans:'Lexend','Roboto','Helvetica Neue',Arial,system-ui,sans-serif;
--body:'Roboto','Helvetica Neue',Arial,system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:radial-gradient(1100px 560px at 82% -12%,rgba(148,66,255,.10),transparent 60%),
radial-gradient(900px 500px at 10% 8%,rgba(54,176,105,.05),transparent 55%),var(--bg);
color:var(--ink);font-family:var(--body);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--purple-3);text-decoration:none}
a:hover{color:var(--purple-4)}
.grad{background:var(--grad-txt);-webkit-background-clip:text;background-clip:text;color:transparent}
/* ── Auth overlay (login screen) — ProCode branded ── */
#auth-overlay{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center;
background:radial-gradient(900px 480px at 50% 0%,rgba(148,66,255,.10),transparent 60%),var(--bg2)}
#auth-overlay .auth-brand{font-family:var(--sans);font-size:26px;font-weight:800;letter-spacing:-.4px;color:var(--ink)}
#auth-overlay .auth-brand span{font-weight:800}
#auth-overlay .auth-sub{font-size:11px;color:var(--muted);letter-spacing:2.5px;text-transform:uppercase;margin-top:-4px}
/* loading: slim sweep bar (replaces spinner) + overlay fade-in + wordmark breathe */
.auth-spinner{position:relative;width:132px;height:2px;border:0;border-radius:2px;background:rgba(148,66,255,.16);overflow:hidden}
.auth-spinner::after{content:"";position:absolute;top:0;bottom:0;left:0;width:42%;border-radius:2px;
background:linear-gradient(90deg,transparent,var(--purple-3),var(--purple),transparent);animation:auth-sweep 1.25s cubic-bezier(.65,0,.35,1) infinite}
@keyframes auth-sweep{0%{transform:translateX(-120%)}100%{transform:translateX(360%)}}
#auth-overlay{animation:auth-fade .45s ease both}
@keyframes auth-fade{from{opacity:0}to{opacity:1}}
.auth-brand{animation:auth-breathe 2.6s ease-in-out infinite}
@keyframes auth-breathe{0%,100%{opacity:.82}50%{opacity:1}}
.auth-status{font-size:13px;color:var(--muted);margin:0}
#auth-overlay-mount{min-width:320px}
#auth-email::placeholder{color:var(--faint)}
.greeting-card{display:none!important}
/* ── HQ shell ── */
.hq-hdr{display:flex;align-items:center;gap:18px;padding:20px 34px;border-bottom:1px solid var(--line);
background:linear-gradient(180deg,rgba(20,20,20,.9),rgba(20,20,20,.55));backdrop-filter:blur(6px);
position:relative;z-index:100}
.hq-mark{font-family:var(--sans);font-size:21px;font-weight:800;letter-spacing:-.3px;color:var(--ink);display:inline-flex;align-items:center}
.hq-logo{height:25px;width:25px;margin-right:9px}
.hq-home{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.hq-logotype{height:32px;width:auto}
.hq-hq{font-family:var(--sans);font-size:16px;font-weight:700;letter-spacing:1px;color:var(--muted);text-transform:uppercase;border-left:1px solid var(--line);padding-left:12px}
.nav-dd{position:relative;margin-left:6px}
.nav-dd summary{list-style:none;cursor:pointer;font-size:12px;color:var(--muted);padding:7px 13px;border:1px solid var(--line);border-radius:7px;display:inline-flex;align-items:center;gap:6px;user-select:none}
.nav-dd summary::-webkit-details-marker{display:none}
.nav-dd summary:hover{border-color:var(--purple);color:var(--purple-3)}
.nav-dd[open] summary{border-color:var(--purple);color:var(--ink)}
.nav-caret{font-size:9px;opacity:.8}
.nav-dd-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:224px;max-height:min(72vh,600px);overflow-y:auto;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:6px;display:flex;flex-direction:column;gap:2px;box-shadow:0 14px 34px rgba(0,0,0,.5);z-index:200}
.nav-dd-menu a{font-size:12.5px;color:var(--muted);padding:5px 11px;border-radius:6px;text-decoration:none}
.nav-dd-menu a:hover{background:rgba(148,66,255,.12);color:var(--ink)}
.nav-dd-menu .nav-back{border-top:1px solid var(--line);margin-top:4px;padding-top:11px;color:var(--faint)}
.hq-logotype-lg{height:42px;width:auto;vertical-align:middle}
/* logo swaps with theme */
.logo-dark{display:inline-block}
.logo-light{display:none}
[data-theme="light"] .logo-dark{display:none}
[data-theme="light"] .logo-light{display:inline-block}
/* right-side header group + theme toggle */
.hq-right{margin-left:auto;display:flex;align-items:center;gap:13px;font-size:12px;color:var(--muted)}
.hq-theme{background:none;border:1px solid var(--line);color:var(--muted);font-size:14px;line-height:1;width:30px;height:30px;border-radius:7px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.hq-theme:hover{border-color:var(--purple);color:var(--purple-3)}
/* ── Light mode ── */
[data-theme="light"]{--bg:#ebebeb;--bg2:#e4e4e6;--panel:#ffffff;--panel2:#f6f6f8;--line:#d9d9df;--ink:#141414;--muted:#5c5c66;--faint:#8a8a93}
[data-theme="light"] body{background:radial-gradient(1100px 560px at 82% -12%,rgba(148,66,255,.08),transparent 60%),radial-gradient(900px 500px at 10% 8%,rgba(54,176,105,.06),transparent 55%),var(--bg)}
[data-theme="light"] .hq-hdr{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.55))}
[data-theme="light"] #auth-overlay{background:radial-gradient(900px 480px at 50% 0%,rgba(148,66,255,.08),transparent 60%),var(--bg2)}
[data-theme="light"] .hq-card:hover{border-color:#c7c7d0;box-shadow:0 12px 30px rgba(0,0,0,.10)}
.hq-tag{font-size:10px;color:var(--muted);letter-spacing:2.5px;text-transform:uppercase;
border-left:1px solid var(--line);padding-left:16px}
.hq-user{margin-left:auto;display:flex;align-items:center;gap:13px;font-size:12px;color:var(--muted)}
.hq-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(54,176,105,.7)}
.hq-signout{background:none;border:1px solid var(--line);color:var(--muted);font-size:11px;
padding:6px 12px;border-radius:6px;cursor:pointer;letter-spacing:.05em}
.hq-signout:hover{border-color:var(--purple);color:var(--purple-3)}
.hq-wrap{max-width:1140px;margin:0 auto;padding:38px 34px 60px}
.hq-lead{font-size:11px;color:var(--purple-3);letter-spacing:2.5px;text-transform:uppercase;margin-bottom:10px;font-weight:600}
.hq-h1{font-family:var(--sans);font-size:30px;font-weight:800;letter-spacing:-.6px;margin:0 0 8px}
.hq-sub{color:var(--muted);margin:0 0 32px;max-width:660px}
.hq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.hq-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:12px;
padding:24px;display:flex;flex-direction:column;gap:11px;overflow:hidden;transition:border-color .18s,transform .18s,box-shadow .18s}
.hq-card:hover{border-color:#3a3a44;transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.hq-card h3{font-family:var(--sans);margin:0;font-size:17px;font-weight:700;color:var(--ink)}
.hq-card p{margin:0;font-size:13px;color:var(--muted);line-height:1.65}
.hq-card .hq-src{font-size:11px;color:var(--faint);letter-spacing:.02em;margin-top:auto;padding-top:6px}
.hq-stat{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--purple-3);letter-spacing:.01em;margin-top:2px}
.hq-chip{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:10px;
letter-spacing:.08em;text-transform:uppercase;font-weight:700;padding:4px 10px;border-radius:20px}
.chip-live{background:rgba(54,176,105,.14);color:#5ebf87;border:1px solid rgba(54,176,105,.35)}
.chip-wiring{background:rgba(148,66,255,.14);color:var(--purple-3);border:1px solid rgba(148,66,255,.35)}
.chip-planned{background:rgba(154,154,166,.10);color:var(--muted);border:1px solid var(--line)}
.hq-card.featured{grid-column:1/-1;background:
linear-gradient(180deg,rgba(148,66,255,.06),transparent 55%),var(--panel2);border-color:#39304a}
.hq-card.featured::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-bg)}
.hq-card.featured h3{font-size:20px}
.hq-group{margin-top:38px}
.hq-group-hd{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 15px;display:flex;align-items:center;gap:10px}
.hq-group-hd::after{content:'';flex:1;height:1px;background:var(--line)}
.hq-card.wide{grid-column:1/-1}
.hq-card.reserved{opacity:.72;border-style:dashed}
.hq-foot{margin-top:42px;padding-top:18px;border-top:1px solid var(--line);
font-size:11px;color:var(--faint);letter-spacing:.4px}
/* tooltip — reusable portal component. Wrap the trigger in .tip (add tabindex="0"),
put the ⓘ glyph in .tip-i, and the copy in .tip-pop. Hover or keyboard-focus reveals it. */
.tip{position:relative;display:inline-flex;align-items:center;cursor:help}
.tip-i{width:14px;height:14px;border-radius:50%;border:1px solid var(--faint);color:var(--muted);font-size:9px;font-weight:800;font-style:italic;font-family:var(--sans);display:inline-flex;align-items:center;justify-content:center;line-height:1}
.tip:hover .tip-i,.tip:focus-visible .tip-i{border-color:var(--purple);color:var(--purple-3)}
.tip-pop{position:absolute;bottom:calc(100% + 9px);left:-8px;width:290px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:11.5px;font-weight:400;line-height:1.55;color:var(--muted);text-transform:none;letter-spacing:normal;box-shadow:0 16px 38px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s ease,transform .15s ease;z-index:50}
.tip-pop::after{content:"";position:absolute;top:100%;left:14px;border:6px solid transparent;border-top-color:var(--panel2)}
.tip:hover .tip-pop,.tip:focus-within .tip-pop{opacity:1;visibility:visible;transform:none}
.tip-pop b{color:var(--ink);font-weight:700}
/* ── Loading canon (2026-07-24) — skeleton screens, not text. ──
Pairs with /hq-skel.js: any leaf reading "Loading …" inside #hq-content is
auto-swapped for a content-shaped shimmer deck; a fetch that hangs >14s after the
page is visible degrades to .hq-error + Retry instead of shimmering forever.
Token-safe (works dark & light). Rule: sub-dashes never show bare loading text. */
@keyframes hq-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.skel{background:linear-gradient(90deg,var(--panel2) 30%,rgba(148,66,255,.13) 46%,var(--panel2) 62%);
background-size:300% 100%;animation:hq-shimmer 1.5s ease infinite;
border-radius:6px;color:transparent!important;pointer-events:none;user-select:none}
@media (prefers-reduced-motion:reduce){.skel{animation:none;opacity:.65}}
.skel-line{display:block;height:12px;margin:9px 0}
.skel-line.sk-sm{width:42%}.skel-line.sk-lg{height:22px;width:64%}
.hq-skel{animation:auth-fade .4s ease both}
.hq-skel .skel-lead{height:10px;width:120px;margin:4px 0 12px}
.hq-skel .skel-h1{height:26px;width:340px;max-width:70%;margin:0 0 18px;border-radius:8px}
.hq-skel .skel-headline{height:76px;border-radius:14px;margin-bottom:18px}
.hq-skel .skel-bento{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.hq-skel .skel-tile{height:92px;border-radius:12px}
.hq-skel .skel-tile.sk-w2{grid-column:span 2}
.hq-skel .skel-tile.sk-tall{height:150px}
@media (max-width:760px){.hq-skel .skel-bento{grid-template-columns:1fr 1fr}}
/* graceful give-up — hung fetch becomes a real error + retry */
.hq-error{display:flex;align-items:center;gap:16px;background:rgba(224,101,90,.06);
border:1px solid rgba(224,101,90,.35);border-radius:12px;padding:16px 20px;max-width:560px;margin:30px auto}
.hq-error-txt{flex:1;font-size:13px;color:var(--ink);line-height:1.5}
.hq-error-txt small{display:block;color:var(--muted);font-size:11.5px;margin-top:3px}
.hq-retry{flex-shrink:0;background:none;border:1px solid var(--red);color:var(--red);border-radius:100px;
padding:6px 16px;font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;transition:background .15s}
.hq-retry:hover{background:rgba(224,101,90,.12)}
/* ── Confirm dialog modal (delete guard) ── */
.cfm-back{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(8,8,10,.62);backdrop-filter:blur(4px);opacity:0;transition:opacity .16s ease}
.cfm-back.show{opacity:1}
.cfm-box{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:22px 24px;max-width:380px;width:100%;box-shadow:0 24px 60px rgba(0,0,0,.55);transform:translateY(6px);transition:transform .16s ease}
.cfm-back.show .cfm-box{transform:none}
.cfm-title{font-family:var(--sans);font-size:16px;font-weight:800;color:var(--ink);margin-bottom:8px}
.cfm-body{font-size:13px;line-height:1.55;color:var(--muted);margin-bottom:18px}
.cfm-row{display:flex;justify-content:flex-end;gap:9px}
.cfm-btn{font-size:12px;font-weight:700;padding:7px 15px;border-radius:8px;cursor:pointer;border:1px solid var(--line);background:none;color:var(--muted)}
.cfm-btn:hover{border-color:var(--purple);color:var(--ink)}
.cfm-btn.danger{background:var(--red);border-color:var(--red);color:#fff}
.cfm-btn.danger:hover{filter:brightness(1.08)}