/* ═══ GET STARTED (2026-08-17) — the first-run onboarding page at /Get-Started ═══
   A full-screen page rather than a modal: it owns a real URL so it can be linked, shared
   with a new vendor, and reached again after the inventory fills up. z-index sits ABOVE
   #hqPanel (902) so it covers the app, and BELOW .overlay (960) so anything the guides open
   — the import wizard, Add Card — lands on top of it where the user expects. */
#gsPage{position:fixed;inset:0;z-index:905;background:var(--bg);overflow-y:auto;display:none;
  -webkit-overflow-scrolling:touch}
body.gs-open #gsPage{display:block}
body.gs-open{overflow:hidden}
.gs-wrap{max-width:760px;margin:0 auto;padding:18px 16px 60px}
.gs-top{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.gs-top .gs-x{margin-left:auto}
.gs-back{background:var(--panel2);border:1px solid var(--line2);color:var(--txt);font-weight:700;
  font-size:14px;padding:9px 14px;border-radius:11px;cursor:pointer}
.gs-back:hover{border-color:var(--accent2)}
.gs-x{background:var(--panel2);border:1px solid var(--line2);color:var(--txt);font-size:17px;
  width:40px;height:40px;border-radius:11px;cursor:pointer;line-height:1}
.gs-x:hover{border-color:var(--accent2)}
.gs-h1{font-size:26px;font-weight:800;margin:0 0 6px}
.gs-lede{color:var(--muted);font-size:14.5px;line-height:1.55;margin:0 0 18px}
/* progress */
.gs-prog{display:flex;align-items:center;gap:10px;margin:0 0 20px}
.gs-bar{flex:1;height:9px;border-radius:99px;background:var(--panel2);border:1px solid var(--line2);overflow:hidden}
.gs-bar i{display:block;height:100%;background:var(--accent);transition:width .35s ease}
.gs-progTxt{font-size:12.5px;font-weight:800;color:var(--muted);letter-spacing:.03em;white-space:nowrap}
/* the four tiles */
.gs-tiles{display:grid;gap:12px}
.gs-tile{display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;cursor:pointer;
  background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:16px 16px;
  color:var(--txt);transition:border-color .15s,transform .08s}
.gs-tile:hover{border-color:var(--accent)}
.gs-tile:active{transform:scale(.995)}
.gs-tile.done{opacity:.72}
.gs-num{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:15px;background:var(--panel2);border:1px solid var(--line2);color:var(--muted)}
.gs-tile.done .gs-num{background:var(--accent);border-color:var(--accent);color:#08111f}
.gs-tbody{flex:1;min-width:0}
.gs-tname{font-weight:800;font-size:16.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.gs-tblurb{color:var(--muted);font-size:13.5px;line-height:1.5;margin-top:4px}
.gs-tstate{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent);margin-top:7px}
.gs-tile:not(.done) .gs-tstate{color:var(--muted)}
.gs-chev{flex:0 0 auto;color:var(--muted);font-size:20px;align-self:center}
/* a topic's step list */
.gs-steps{display:grid;gap:2px;margin:4px 0 22px}
.gs-step{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.gs-step:last-child{border-bottom:0}
.gs-sn{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;font-size:12.5px;background:var(--panel2);border:1px solid var(--line2);color:var(--muted)}
.gs-sd{flex:1;min-width:0;font-size:15px;line-height:1.55}
.gs-sw{color:var(--muted);font-size:13px;line-height:1.55;margin-top:5px}
.gs-do{display:block;width:100%;margin:0 0 10px;padding:15px 16px;border-radius:13px;cursor:pointer;
  font-weight:800;font-size:15.5px;background:var(--accent);border:1px solid var(--accent);color:#08111f}
.gs-do:hover{filter:brightness(1.07)}
.gs-secondary{display:block;width:100%;padding:13px 16px;border-radius:13px;cursor:pointer;
  font-weight:700;font-size:14.5px;background:var(--panel2);border:1px solid var(--line2);color:var(--txt)}
.gs-secondary:hover{border-color:var(--accent2)}
.gs-note{background:var(--panel);border:1px solid var(--line2);border-left:3px solid var(--accent);
  border-radius:12px;padding:13px 15px;font-size:13.5px;line-height:1.6;color:var(--muted);margin:0 0 20px}
.gs-note b{color:var(--txt)}
/* the empty-inventory launcher */
/* Interactive cat (Ian's Claude Design 'Welcome Screen', 2026-08-23): breathes on a slow loop,
   cross-fades neutral → eager when the cursor or keyboard focus reaches Get Started. `:has()` is fine — the app is Chrome-PWA only. */
.gs-cat{position:relative;width:150px;margin:0 auto 10px;animation:gsBreathe 3.4s ease-in-out infinite}
.gs-catface{width:100%;display:block;filter:invert(.9);transition:opacity .35s}
html[data-theme="light"] .gs-catface,html[data-theme="sakura"] .gs-catface{filter:none}
.gs-catE{position:absolute;inset:0;opacity:0}
.empty:has(#gsEmptyBtn:hover) .gs-catE,.empty:has(#gsEmptyBtn:focus-visible) .gs-catE{opacity:1}
.empty:has(#gsEmptyBtn:hover) .gs-catface:not(.gs-catE),.empty:has(#gsEmptyBtn:focus-visible) .gs-catface:not(.gs-catE){opacity:0}
@keyframes gsBreathe{50%{transform:scale(1.045)}}
.gs-emptyTitle{font-size:19px;font-weight:800;color:var(--txt);margin-bottom:6px}
.gs-emptySub{font-size:14px;line-height:1.55;max-width:420px;margin:0 auto 18px}
#gsEmptyBtn{font-size:17px;font-weight:800;padding:15px 30px;border-radius:13px;
  background:var(--accent);border:1px solid var(--accent);color:#08111f;cursor:pointer}
#gsEmptyBtn:hover{filter:brightness(1.07)}
.gs-emptyAlt{font-size:12.5px;margin-top:16px;opacity:.85}
/* the slim resume strip, shown once cards exist but the checklist isn't finished */
#gsStrip{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line2);
  border-left:3px solid var(--accent);border-radius:12px;padding:10px 12px;margin:0 0 12px;font-size:13.5px}
#gsStrip .gs-sName{font-weight:700}
#gsStrip .gs-sGo{margin-left:auto;background:var(--accent);border:1px solid var(--accent);color:#08111f;
  font-weight:800;font-size:13px;padding:8px 14px;border-radius:10px;cursor:pointer;white-space:nowrap}
#gsStrip .gs-sX{background:transparent;border:0;color:var(--muted);font-size:16px;cursor:pointer;padding:4px 2px}
@media(max-width:560px){
  .gs-wrap{padding:14px 12px 50px}
  .gs-h1{font-size:22px}
  #gsStrip{flex-wrap:wrap}
  #gsStrip .gs-sGo{margin-left:0;width:100%;order:3}
}