/* =====================================================================================
   RJ DTC Admin · Round 3 · HQ Global Store list · gs.css   (prefix gs-)
   Load order: _kit/tokens.css -> _kit/base.css -> cloth.css -> data-table -> cards-gallery ->
   app-shell -> overlays -> page-help family.css -> gs.css.
   Only what turns the kit's specimen pieces into a full-viewport page: sticky shell, sticky
   toolbar, fixed overlay layers, selection, and the page states. Values come from tokens.
   Two dedicated compositions: .kit-d (desktop /) and .kit-m (phone /m/). No size queries.
   ===================================================================================== */

/* ---------- page ground: a real app fills the viewport, no specimen canvas ---------- */
.gs{background:hsl(var(--background))}
.gs a.btn{text-decoration:none}

/* ---------- desktop shell: sidebar and top bar stay put while the catalogue scrolls ---------- */
.kit-d .gs-app{min-height:100vh;border-radius:0;box-shadow:none}
.kit-d .gs-side{position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.kit-d .gs-side::-webkit-scrollbar{display:none}
.kit-d .gs-main{overflow:clip}
.gs-top{position:sticky;top:0;z-index:calc(var(--z-sticky) * 3)}
.gs-top .top-r{gap:var(--s-3)}
.gs-page{width:100%;max-width:var(--content-max);padding:var(--s-6) var(--s-6) var(--s-16)}
.gs-ph .page-title{display:flex;align-items:center;gap:var(--s-3)}
.gs-ph .cg-count{position:relative;top:1px}

/* sticky toolbar under the top bar */
.gs-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))}
.gs-bar .r{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}
.gs-bar .cg-search{width:300px}
.gs-bar .cg-search kbd{margin-left:auto}
.gs-bar.is-stuck{box-shadow:var(--e-1)}
.gs-sortbtn .grow{white-space:nowrap}
.gs-sortbtn .q{margin-right:var(--s-1)}
.gs-count-line{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-6);font-size:var(--text-small);color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums}
.gs-count-line .r{margin-left:auto}
.gs-body{padding-top:var(--s-5);min-height:420px}
.kit-d .gs-grid{grid-template-columns:repeat(5,minmax(0,1fr))}

/* ---------- card: selection tick on the photo, selected ring, quiet "no photo" ---------- */
.gs-card{cursor:default}
.gs-card .cg-title a{color:inherit;text-decoration:none}
.gs-card .cg-title a:hover{text-decoration:underline;text-decoration-color:hsl(var(--foreground)/.3)}
.gs-tick{position:absolute;top:var(--s-2);right:var(--s-2);z-index:3;display:grid;place-items:center;width:var(--control-h-xs);height:var(--control-h-xs);
  border-radius:var(--r-control);background:hsl(var(--background)/.94);box-shadow:var(--e-1);opacity:0;
  transition:opacity var(--motion-hover)}
.gs-card:hover .gs-tick,.gs-card:focus-within .gs-tick,.gs-selecting .gs-tick,.gs-tick:has(.cb:checked){opacity:1}
.gs-card.is-sel{border-color:hsl(var(--primary));box-shadow:0 0 0 1px hsl(var(--primary)),var(--e-1)}
.gs-card.is-sel:hover{box-shadow:0 0 0 1px hsl(var(--primary)),var(--e-card-hover)}
.gs-card .cg-price .none{font:var(--w-medium) var(--text-small)/1.2 var(--font-ui);color:hsl(var(--muted-foreground))}
.gs-card .cg-price .miss{font-size:var(--text-micro);color:hsl(var(--warning))}
.gs-card.is-flash{animation:gs-flash 900ms var(--ease-standard)}
@keyframes gs-flash{0%{box-shadow:0 0 0 2px hsl(var(--ring)/.55),var(--e-1)}100%{box-shadow:var(--e-1)}}
@media (prefers-reduced-motion:reduce){.gs-card.is-flash{animation:none}}
.gs-card .cg-nophoto .cg-outline{width:38%}

/* table view */
.gs-tbl .dt{table-layout:fixed}
.gs-tbl .dt th{top:calc(var(--topbar-h) + var(--gs-bar-h, 58px))}
.gs-tbl .dt-t1{cursor:pointer}
.gs-tbl tr.is-sel td{background:hsl(var(--accent))}
.gs-tbl .dt-money .miss{color:hsl(var(--warning))}
.gs-tbl .dt-money .none{color:hsl(var(--muted-foreground));font-weight:var(--w-regular)}
.gs-tbl .w-act{width:92px}

/* bulk pill: data-table's .dt-bulk, fixed to the viewport */
.gs .dt-bulk{position:fixed;bottom:var(--s-6);z-index:var(--z-toast)}
.kit-d .gs .dt-bulk,.kit-d .dt-bulk.gs-bulk{left:calc(50% + var(--sidebar-w) / 2)}

/* ---------- states: one region, the page decides which shows ---------- */
.gs-state{display:none}
[data-state=loading] .gs-state[data-for=loading],
[data-state=error] .gs-state[data-for=error],
[data-state=first-use] .gs-state[data-for=first-use],
[data-state=no-results] .gs-state[data-for=no-results]{display:block}
[data-state=loading] [data-pane],[data-state=error] [data-pane],[data-state=first-use] [data-pane],[data-state=no-results] [data-pane]{display:none!important}
[data-state=first-use] .gs-bar,[data-state=error] .gs-bar .cg-fchips,[data-state=first-use] .gs-count-line,[data-state=error] .gs-count-line,[data-state=loading] .gs-count-line{display:none}
[data-state=error] .gs-bar .r>*:not(.seg),[data-state=loading] .gs-bar .r>*{opacity:.5;pointer-events:none}
.gs-empty{border:1px dashed hsl(var(--secondary-border));border-radius:var(--r-card);margin-top:var(--s-2)}
.gs-empty.err{border-style:solid;border-color:hsl(var(--destructive)/.3);background:hsl(var(--destructive)/.03)}
.gs-empty .cg-art svg{width:28px;height:28px}
.gs-empty code{font-size:var(--text-small);color:hsl(var(--foreground))}
.gs-empty p{max-width:56ch}
[data-state=first-use] .gs-ph .ph-r,[data-state=error] .gs-bar{display:none}
.gs-errmeta{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.gs-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)}

/* ---------- fixed overlay layers (kit.js stages, sized to the viewport) ---------- */
.gs-layer{position:fixed;inset:0;z-index:var(--z-scrim);pointer-events:none;overflow:hidden}
.gs-layer>.k-sheet,.gs-layer>.k-dialog,.gs-layer>.k-guard.open,.gs-layer.open>.k-scrim{pointer-events:auto}
.gs-layer>.k-guard{pointer-events:none}
.gs-layer>.k-guard.open>.k-scrim{pointer-events:auto}
.gs-layer>.k-guard>.k-dialog{pointer-events:auto}
.kit-d .gs-help-layer{left:var(--sidebar-w)}
.kit-d .gs-help-layer>.k-sheet{top:var(--topbar-h)}
.kit-d .gs-help-layer>.k-scrim{top:var(--topbar-h)}
.gs-help-layer .k-sheet{display:flex;flex-direction:column}

/* command palette: the shell's .sh-cmd in a dialog near the top */
.gs-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)}
.gs-cmd-layer.open>.k-dialog{transform:translate(-50%,0)}
.gs-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))}
.gs-cmd-in-field::placeholder{color:hsl(var(--muted-foreground))}

/* quick edit: overlays' sheet anatomy, price lines one per currency */
.gs-qe .ov-sh-h .cg-tthumb{width:36px;height:48px}
.gs-qe .ov-t{font:var(--w-semibold) var(--text-section)/var(--lh-section) var(--font-voice);letter-spacing:var(--tr-section)}
.gs-prices{display:flex;flex-direction:column;gap:var(--s-2)}
.gs-prices .ov-money{background:hsl(var(--background));overflow:hidden;transition:border-color var(--motion-hover),box-shadow var(--motion-focus)}
.gs-prices .ov-money:hover{border-color:hsl(var(--input-hover))}
.gs-prices .ov-money.err{border-color:hsl(var(--destructive))}
.gs-prices .ov-money .cur{width:56px;justify-content:center;color:hsl(var(--muted-foreground));background:hsl(var(--muted)/.55)}
.gs-facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-2) var(--s-4);font-size:var(--text-body);margin:0}
.gs-facts dt{color:hsl(var(--muted-foreground))}
.gs-facts dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-2)}
.gs-sec-h small{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.gs-qe .ov-sh-f .btn-tertiary{padding:0 var(--s-2)}
.gs-qe .seg .dot{width:6px;height:6px}

/* toasts: bottom-left of the content (desktop) / above the action bar (phone) */
.gs-toasts{position:fixed;z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--toast-gap);pointer-events:none}
.kit-d .gs-toasts{left:calc(var(--sidebar-w) + var(--s-6));bottom:var(--s-6);width:340px}
.gs-toasts .toast{pointer-events:auto}

/* preview-state switcher (prototype only, not product UI) */
.gs-proto{position:fixed;z-index:var(--z-toast);display:flex;align-items:center;gap:var(--s-2)}
.kit-d .gs-proto{right:var(--s-5);bottom:var(--s-5)}
.gs-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))}
.gs-proto>.k-anchor>button b{font-weight:var(--w-semibold);color:hsl(var(--foreground))}

body:has(.gs-layer.open) .gs-proto{opacity:0;pointer-events:none}
.gs-proto{transition:opacity var(--motion-hover)}
.gs-qe-code{margin-top:2px}

/* ======================================== PHONE ======================================== */
.kit-m .gs-phone{min-height:100vh;display:flex;flex-direction:column;background:hsl(var(--background))}
.kit-m .gs-phone .p-bar{position:sticky;top:0;z-index:calc(var(--z-sticky) * 3)}
.gs-pcrumb{display:flex;align-items:center;gap:var(--s-2)}
.gs-pcrumb .gs-proto{position:static;margin-left:auto}
.gs-pcrumb .gs-proto>.k-anchor>button{box-shadow:none;height:28px;padding:0 10px;font-size:var(--text-micro)}
.kit-m .p-head .cg-count{position:relative;top:-2px}
.kit-m .gs-ptools{background:hsl(var(--background));border-bottom:1px solid hsl(var(--border));padding-bottom:var(--s-3)}
.kit-m .gs-ptools .cg-pbar2{padding-bottom:var(--s-2)}
.kit-m .gs-prow{display:flex;align-items:center;gap:var(--s-2);padding:var(--s-2) var(--s-4) 0}
.kit-m .gs-prow .btn{height:var(--control-h-m)}
.kit-m .gs-prow .gs-sortbtn{flex:1;min-width:0;justify-content:flex-start;font-weight:var(--w-medium)}
.kit-m .gs-prow .gs-sortbtn .grow{overflow:hidden;text-overflow:ellipsis}
.kit-m .gs-body{padding:var(--s-4);min-height:0;flex:1}
.kit-m .gs-card .cg-actions .btn{height:40px}
.kit-m .gs-card .cg-actions .icon-btn{width:40px;height:40px}
.kit-m .gs-tick{opacity:1;width:32px;height:32px}
.kit-m .gs-phone:not(.gs-selecting) .gs-tick{display:none}
.kit-m .gs-li{width:100%;text-align:left;color:inherit;text-decoration:none;min-height:72px}
.kit-m .gs-li .cb{margin-right:var(--s-1)}
.kit-m .gs-li.is-sel{background:hsl(var(--accent))}
.kit-m .gs-li .p .q{font-size:var(--text-micro)}
.kit-m .gs-list{margin:0 calc(var(--s-4) * -1);border-top:1px solid hsl(var(--border))}
.kit-m .gs-count-line{margin-top:var(--s-5);justify-content:center}

/* phone: the one primary action sits at the bottom, in thumb reach */
.kit-m .gs-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 .gs-actbar .btn{flex:1;height:var(--control-h-m-lg);font-size:var(--text-btn-lg)}
.kit-m .gs-actbar .gs-selmsg{flex:1;font:var(--w-semibold) var(--text-card)/1.2 var(--font-voice);font-variant-numeric:tabular-nums}
.kit-m .gs-actbar.sel .btn{flex:none}
.kit-m [data-state=first-use] .gs-actbar,.kit-m [data-state=error] .gs-actbar{display:none}
.kit-m .tabbar{bottom:0}
.kit-m .gs-empty{margin-top:0}

/* phone sheets: all sheets come up from the bottom */
.kit-m .gs-layer>.k-sheet.k-bottom{display:flex;flex-direction:column}
.kit-m .gs-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 .gs-sheet-h b{flex:1;font:var(--w-semibold) var(--text-section)/1.2 var(--font-voice);letter-spacing:var(--tr-section)}
.kit-m .gs-sheet-b{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.kit-m .gs-opts{display:flex;flex-direction:column;padding:var(--s-2)}
.kit-m .gs-opts .mi{height:var(--control-h-m-lg)}
.kit-m .gs-qe .ov-sh-f{flex-direction:column;align-items:stretch;gap:var(--s-2)}
.kit-m .gs-qe .ov-sh-f .r{margin-left:0;display:grid;grid-template-columns:1fr 1fr}
.kit-m .gs-qe .ov-sh-f .r .btn{width:100%}
.kit-m .gs-qe .ov-sh-f .gs-full{display:flex;justify-content:space-between;align-items:center}
.kit-m .gs-prices .ov-money{height:var(--control-h-m)}
.kit-m .gs-cmd-sheet .sh-cmd{width:100%;border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column;height:100%}
.kit-m .gs-cmd-sheet .sh-pop-l{max-height:none;flex:1}
.kit-m .gs-cmd-sheet .sh-cmd-f{display:none}
.kit-m .gs-toasts{left:var(--s-3);right:var(--s-3);bottom:calc(var(--tabbar-h) + var(--control-h-m-lg) + var(--s-8))}
.kit-m .gs-help-layer .ph-d-body{padding:0 var(--s-4) var(--s-5)}
.kit-m .gs-help-layer .ph-d-head{padding:var(--s-2) var(--s-2) var(--s-3) var(--s-4)}
.gs-qe .gs-qe-code .code{display:inline;margin:0}
.kit-m .gs-phone:not(.gs-selecting) .gs-li .cb{display:none}
.kit-m .gs-qe .ov-sh-f .gs-full .btn{padding-left:0}
.kit-m [data-state=first-use] .gs-ptools,.kit-m [data-state=error] .gs-ptools{display:none}
.kit-m [data-state=loading] .gs-ptools>*{opacity:.5;pointer-events:none}