/* =====================================================================================
   RJ DTC Admin · Round 4 · HQ shell pages · hq.css   (prefix hq-)
   Shared by the six HQ pages (Cloth library, Brands, API access, Connect MCP client, Users & access,
   Audit log). Load order: _kit/tokens.css -> _kit/base.css -> family.css files -> hq.css -> page.css.
   The same page-layer rules the Round 3 Global Store page proved (gs.css), generalised: sticky shell,
   sticky toolbar, fixed overlay layers, page states, toasts, preview switcher, phone bars.
   Values come from tokens. Two dedicated compositions (.kit-d / .kit-m); no size queries.
   ===================================================================================== */

/* ---------- page ground ---------- */
.hq{background:hsl(var(--background))}
.hq a.btn{text-decoration:none}
.hq .lnk{color:hsl(var(--foreground));text-decoration:underline;text-decoration-color:hsl(var(--foreground)/.3);text-underline-offset:3px}
.hq .lnk:hover{text-decoration-color:hsl(var(--foreground))}

/* ---------- desktop shell ---------- */
.kit-d .hq-app{min-height:100vh;border-radius:0;box-shadow:none}
.kit-d .hq-side{position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.kit-d .hq-side::-webkit-scrollbar{display:none}
.kit-d .hq-main{overflow:clip}
.hq-top{position:sticky;top:0;z-index:calc(var(--z-sticky) * 3)}
.hq-top .top-r{gap:var(--s-3)}
.hq-page{width:100%;max-width:var(--content-max);padding:var(--s-6) var(--s-6) var(--s-16)}
.hq-page.wide{max-width:none}
.hq-ph{align-items:flex-end}
.hq-ph .page-title{display:flex;align-items:center;gap:var(--s-3)}
.hq-ph .page-title .chip{position:relative;top:1px}
.hq-ph .ph-r{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}
.hq-ph .hq-sub{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.hq-ph .hq-sub .code{color:hsl(var(--muted-foreground))}
.hq-count{display:inline-grid;place-items:center;min-width:28px;height:24px;padding:0 var(--s-2);border-radius:var(--r-chip);background:hsl(var(--muted));
  font:var(--w-medium) var(--text-small)/1 var(--font-ui);font-variant-numeric:tabular-nums;color:hsl(var(--muted-foreground))}

/* sticky toolbar under the top bar */
.hq-bar{position:sticky;top:var(--topbar-h);z-index:calc(var(--z-sticky) * 2);display:flex;align-items:center;gap:var(--s-3);
  margin:0 calc(var(--s-6) * -1);padding:var(--s-3) var(--s-6);background:hsl(var(--background));border-bottom:1px solid hsl(var(--border))}
.hq-bar .r{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}
.hq-bar.is-stuck{box-shadow:var(--e-1)}
.hq-search{width:280px}
.hq-search .dt-in,.hq-search input{flex:1;min-width:0;border:0;outline:0;background:transparent}
.hq-search kbd{margin-left:auto}

/* section panel: a quiet bordered card with a head line */
.hq-panel{border:1px solid hsl(var(--border));border-radius:var(--r-card);background:hsl(var(--card));overflow:hidden}
.hq-panel+.hq-panel{margin-top:var(--s-5)}
.hq-panel-h{display:flex;align-items:center;gap:var(--s-3);min-height:52px;padding:var(--s-3) var(--s-4);border-bottom:1px solid hsl(var(--border))}
.hq-panel-h h2{font:var(--w-semibold) var(--text-section)/var(--lh-section) var(--font-voice);letter-spacing:var(--tr-section)}
.hq-panel-h .q{font-size:var(--text-small)}
.hq-panel-h .r{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}
.hq-panel-b{padding:var(--s-4)}
.hq-panel .dt-wrap{border:0;border-radius:0;box-shadow:none}
.hq-sec{margin-top:var(--s-6)}
.hq-sec-h{display:flex;align-items:baseline;gap:var(--s-3);margin-bottom:var(--s-3)}
.hq-sec-h h2{font:var(--w-semibold) var(--text-section)/var(--lh-section) var(--font-voice);letter-spacing:var(--tr-section)}
.hq-sec-h .q{font-size:var(--text-small)}
.hq-sec-h .r{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}

/* tabs: the kit has no tab primitive, so tabs are the segmented control with role=tab */
.hq-tabs{display:flex;align-items:center;gap:var(--s-3)}
.hq-tabs .seg>button .n{font:var(--w-medium) var(--text-micro)/1 var(--font-ui);font-variant-numeric:tabular-nums;color:hsl(var(--muted-foreground))}
.hq-tabs .seg>button[aria-selected=true] .n{color:hsl(var(--foreground))}

/* facts list (dl) */
.hq-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-2) var(--s-4);font-size:var(--text-body);margin:0}
.hq-facts dt{color:hsl(var(--muted-foreground))}
.hq-facts dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hq-facts.wrap dd{white-space:normal}

/* ---------- states: the page root carries data-state; regions opt in with data-for ---------- */
.hq-state{display:none}
[data-state=loading] .hq-state[data-for~=loading],
[data-state=error] .hq-state[data-for~=error],
[data-state=empty] .hq-state[data-for~=empty],
[data-state=not-wired] .hq-state[data-for~=not-wired],
[data-state=no-results] .hq-state[data-for~=no-results],
[data-state=pick] .hq-state[data-for~=pick],
[data-state=website] .hq-state[data-for~=website],
[data-state=invalid] .hq-state[data-for~=invalid],
[data-state=refused] .hq-state[data-for~=refused],
[data-state=approved] .hq-state[data-for~=approved],
[data-state=denied] .hq-state[data-for~=denied],
[data-state=populated] .hq-state[data-for~=populated]{display:block}
/* states that replace the content (loading, error …) put .hq-nopop on the root: [data-pop] regions hide */
.hq-nopop [data-pop]{display:none!important}
.hq-empty{border:1px dashed hsl(var(--secondary-border));border-radius:var(--r-card);margin-top:var(--s-2);background:hsl(var(--background))}
.hq-empty.err{border-style:solid;border-color:hsl(var(--destructive)/.3);background:hsl(var(--destructive)/.03)}
.hq-empty .sf-empty{padding:var(--s-12) var(--s-6)}
.hq-empty .sf-errpage{padding:var(--s-12) var(--s-6)}
.hq-empty p{max-width:58ch}
.hq-empty code{font-size:var(--text-small);color:hsl(var(--foreground))}
.hq-loadline{display:flex;align-items:center;gap:var(--s-2);font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-bottom:var(--s-4)}
.hq-errmeta{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.hq-skrow{display:grid;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-bottom:1px solid hsl(var(--border))}
.hq-sk{display:block;height:12px;border-radius:var(--r-chip);background:hsl(var(--muted));animation:hq-pulse var(--motion-skeleton)}
@keyframes hq-pulse{from{opacity:1}to{opacity:.45}}
@media (prefers-reduced-motion:reduce){.hq-sk{animation:none}}

/* ---------- fixed overlay layers (kit.js stages, sized to the viewport) ---------- */
.hq-layer{position:fixed;inset:0;z-index:var(--z-scrim);pointer-events:none;overflow:hidden}
.hq-layer>.k-sheet,.hq-layer>.k-dialog,.hq-layer>.k-guard.open,.hq-layer.open>.k-scrim{pointer-events:auto}
.hq-layer>.k-guard{pointer-events:none}
.hq-layer>.k-guard.open>.k-scrim{pointer-events:auto}
.hq-layer>.k-guard>.k-dialog{pointer-events:auto}
.hq-layer>.k-sheet{display:flex;flex-direction:column}
.hq-layer .ov-sh-b{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.kit-d .hq-help-layer{left:var(--sidebar-w)}
.kit-d .hq-help-layer>.k-sheet{top:var(--topbar-h)}
.kit-d .hq-help-layer>.k-scrim{top:var(--topbar-h)}
.hq-help-layer .ph-d-body{flex:1;min-height:0;overflow-y:auto}

/* command palette: the shell's .sh-cmd in a dialog near the top */
.hq-cmd-layer>.k-dialog{top:14vh;width:auto;background:transparent;box-shadow:none;border-radius:var(--r-frame);overflow:visible;transform:translate(-50%,var(--pop-shift)) scale(.985)}
.hq-cmd-layer.open>.k-dialog{transform:translate(-50%,0)}
.hq-cmd-in-field{flex:1;min-width:0;border:0;outline:0;background:transparent;font:var(--w-regular) var(--text-read)/1 var(--font-ui);color:hsl(var(--foreground))}
.hq-cmd-in-field::placeholder{color:hsl(var(--muted-foreground))}

/* sheet header pieces (overlays anatomy) */
.hq-layer .ov-t{font:var(--w-semibold) var(--text-section)/var(--lh-section) var(--font-voice);letter-spacing:var(--tr-section)}
.hq-sheet-ico{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-control);background:hsl(var(--muted));color:hsl(var(--foreground));flex:none}

/* toasts */
.hq-toasts{position:fixed;z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--toast-gap);pointer-events:none}
.kit-d .hq-toasts{left:calc(var(--sidebar-w) + var(--s-6));bottom:var(--s-6);width:360px}
.hq-toasts .toast{pointer-events:auto}

/* ---------- prototype state switcher (not product UI) ---------- */
.hq-proto{position:fixed;z-index:var(--z-toast);display:flex;align-items:center;gap:var(--s-2);transition:opacity var(--motion-hover)}
.kit-d .hq-proto{right:var(--s-5);bottom:var(--s-5)}
.hq-proto>.k-anchor>button{display:inline-flex;align-items:center;gap:var(--s-2);height:var(--control-h-sm);padding:0 var(--s-3);border-radius:var(--r-pill);
  border:1px dashed hsl(var(--input));background:hsl(var(--background)/.94);backdrop-filter:blur(6px);box-shadow:var(--e-pop);font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.hq-proto>.k-anchor>button b{font-weight:var(--w-semibold);color:hsl(var(--foreground))}
body:has(.hq-layer.open) .hq-proto{opacity:0;pointer-events:none}

/* ======================================== PHONE ======================================== */
.kit-m .hq-phone{min-height:100vh;display:flex;flex-direction:column;background:hsl(var(--background))}
.kit-m .hq-phone .p-bar{position:sticky;top:0;z-index:calc(var(--z-sticky) * 3)}
.hq-pcrumb{display:flex;align-items:center;gap:var(--s-2)}
.hq-pcrumb .hq-proto{position:static;margin-left:auto}
.hq-pcrumb .hq-proto>.k-anchor>button{box-shadow:none;height:28px;padding:0 10px;font-size:var(--text-micro)}
.kit-m .p-head{flex-wrap:wrap}
.kit-m .p-head .page-title{display:flex;align-items:center;gap:var(--s-2)}
.kit-m .hq-body{padding:var(--s-4);flex:1;min-height:0}
.kit-m .hq-body.flush{padding:0}
.kit-m .hq-ptools{background:hsl(var(--background));border-bottom:1px solid hsl(var(--border));padding:0 var(--s-4) var(--s-3);display:flex;flex-direction:column;gap:var(--s-2)}
.kit-m .hq-ptools .hq-search{width:100%}
.kit-m .hq-ptools .seg{align-self:stretch}
.kit-m .hq-ptools .seg>button{flex:1}
.kit-m .hq-hscroll{display:flex;gap:var(--s-2);overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--s-4) * -1);padding:0 var(--s-4)}
.kit-m .hq-hscroll::-webkit-scrollbar{display:none}
.kit-m .hq-hscroll>*{flex:none}
.kit-m .hq-panel{border-radius:var(--r-card)}

/* phone: the one primary action sits at the bottom, in thumb reach */
.kit-m .hq-actbar{position:sticky;bottom:var(--tabbar-h);z-index:calc(var(--z-sticky) * 2);display:flex;gap:var(--s-2);align-items:center;
  padding:var(--s-3) var(--s-4);background:hsl(var(--background)/.96);backdrop-filter:blur(8px);border-top:1px solid hsl(var(--border))}
.kit-m .hq-actbar .btn{flex:1;height:var(--control-h-m-lg);font-size:var(--text-btn-lg)}
.kit-m .hq-actbar .btn.fit{flex:none}
.kit-m .hq-actbar.no-tab{bottom:0;padding-bottom:calc(var(--s-3) + env(safe-area-inset-bottom))}
.kit-m .tabbar{bottom:0}
.kit-m .hq-toasts{left:var(--s-3);right:var(--s-3);bottom:calc(var(--tabbar-h) + var(--control-h-m-lg) + var(--s-8))}

/* phone sheets: all sheets come up from the bottom */
.kit-m .hq-layer>.k-sheet.k-bottom{display:flex;flex-direction:column}
.kit-m .hq-sheet-h{display:flex;align-items:center;gap:var(--s-2);min-height:52px;padding:0 var(--s-2) 0 var(--s-4);border-bottom:1px solid hsl(var(--border));flex:none}
.kit-m .hq-sheet-h b{flex:1;font:var(--w-semibold) var(--text-section)/1.2 var(--font-voice);letter-spacing:var(--tr-section)}
.kit-m .hq-sheet-b{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.kit-m .hq-sheet-f{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2);padding:var(--s-3) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom));border-top:1px solid hsl(var(--border));background:hsl(var(--popover))}
.kit-m .hq-sheet-f.one{grid-template-columns:1fr}
.kit-m .hq-sheet-f .btn{width:100%;height:var(--control-h-m-lg)}
.kit-m .hq-opts{display:flex;flex-direction:column;padding:var(--s-2)}
.kit-m .hq-opts .mi{height:var(--control-h-m-lg)}
.kit-m .hq-cmd-sheet .sh-cmd{width:100%;border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column;height:100%}
.kit-m .hq-cmd-sheet .sh-pop-l{max-height:none;flex:1}
.kit-m .hq-cmd-sheet .sh-cmd-f{display:none}
.kit-m .hq-help-layer .ph-d-body{padding:0 var(--s-4) var(--s-5)}
.kit-m .hq-help-layer .ph-d-head{padding:var(--s-2) var(--s-2) var(--s-3) var(--s-4)}
.kit-m .hq-menu-layer .sh-bs-body{overflow-y:auto;flex:1;min-height:0}
.kit-m .hq-layer .ov-sh-b{padding:var(--s-4)}

/* phone list rows (data-table .dt-li anatomy, page-wide) */
.kit-m .hq-list{margin:0 calc(var(--s-4) * -1);border-top:1px solid hsl(var(--border))}
.kit-m .hq-li{display:flex;gap:var(--s-3);align-items:flex-start;width:100%;min-height:64px;padding:var(--s-3) var(--s-4);border-bottom:1px solid hsl(var(--border));
  text-align:left;color:inherit;text-decoration:none;background:hsl(var(--background))}
.kit-m .hq-li:active{background:hsl(var(--accent))}
.kit-m .hq-li .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.kit-m .hq-li .t>b{font:var(--w-semibold) var(--text-card)/1.3 var(--font-voice);letter-spacing:-.005em}
.kit-m .hq-li .t>span{font-size:var(--text-small);color:hsl(var(--muted-foreground));min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kit-m .hq-li .t>.chips{display:flex;flex-wrap:wrap;gap:var(--s-1);white-space:normal;margin-top:2px}
.kit-m .hq-li .r{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right;font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.kit-m .hq-li .r b{color:hsl(var(--foreground));font-variant-numeric:tabular-nums}
.kit-m .hq-li .chev{align-self:center;color:hsl(var(--muted-foreground))}
.hq-pcrumb{white-space:nowrap;min-width:0}
.hq-ctext{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.hq-pcrumb .hq-proto{flex:none}
.hq-pcrumb .hq-proto>.k-anchor>button{white-space:nowrap}
.hq-pcrumb .hq-proto b{display:inline-block;max-width:104px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}