/* guide.css — the step-by-step build guide panel (js/43-guide.js) and its page. */
#guide-bar[hidden]{ display:none !important; }
.gd-panel{ position:absolute; top:12px; left:12px; bottom:84px; width:352px; z-index:12; display:flex; flex-direction:column; gap:10px;
  background:var(--bg-glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:12px 12px 10px; box-shadow:var(--shadow-lg); overflow-y:auto; overscroll-behavior:contain;
  color:var(--text); font-size:12.5px; line-height:1.45; animation:gd-in .22s var(--ease); }
@keyframes gd-in{ from{ opacity:0; transform:translateX(-8px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .gd-panel{ animation:none; } .gd-bar > span, .gd-seg > span{ transition:none !important; } }
body.guide-on #hud, body.guide-on #viewhint{ display:none; }
.gd-panel .gd-dim{ color:var(--text-dim); font-size:11.5px; }
.gd-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.gd-head-title{ display:flex; align-items:center; gap:7px; font-family:'Sora',sans-serif; font-weight:700; font-size:14px; }
.gd-head-title svg{ width:16px; height:16px; color:var(--accent-strong); }
.gd-badge{ font-family:'Inter',sans-serif; font-size:10.5px; font-weight:600; letter-spacing:.02em; padding:2px 8px; border-radius:999px; background:var(--bg-3); color:var(--text-dim); border:1px solid var(--border); }
.gd-badge.smart{ background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent-border); }
.gd-icon-btn{ padding:5px 7px; line-height:0; }
.gd-icon-btn svg{ width:15px; height:15px; }
.gd-busy p{ margin:0 0 8px; }
.gd-stale{ display:flex; align-items:center; gap:8px; padding:7px 9px; border-radius:var(--r-md); background:var(--danger-soft); border:1px solid rgba(224,85,74,.35); font-size:12px; }
.gd-stale svg{ width:15px; height:15px; flex:none; color:var(--danger-strong); }
.gd-stale span{ flex:1; }
/* progress */
.gd-prog-row{ display:flex; align-items:baseline; gap:7px; margin-bottom:5px; color:var(--text-dim); font-size:11.5px; }
.gd-prog-row b{ font-family:'Sora',sans-serif; font-size:17px; color:var(--text); }
.gd-bar{ height:6px; border-radius:4px; background:var(--bg-4); overflow:hidden; }
.gd-bar > span{ display:block; height:100%; border-radius:4px; background:linear-gradient(90deg, var(--accent-2), var(--accent)); transition:width .35s var(--ease); }
.gd-strip{ display:flex; gap:3px; margin-top:6px; }
.gd-seg{ height:8px; min-width:6px; padding:0; border-radius:3px; border:1px solid var(--border); background:var(--bg-4); position:relative; overflow:hidden; cursor:pointer; }
.gd-seg > span{ position:absolute; inset:0 auto 0 0; background:var(--accent-2); transition:width .35s var(--ease); }
.gd-seg.full > span{ background:var(--good); }
.gd-seg.cur{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent-border); }
.gd-seg:hover{ border-color:var(--border-strong); }
/* the current step */
.gd-card{ background:var(--bg-2); border:1px solid var(--accent-border); border-radius:var(--r-lg); padding:11px 12px 12px; box-shadow:0 0 0 3px var(--accent-soft); }
.gd-kicker{ display:flex; justify-content:space-between; gap:8px; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-2-strong); }
.gd-kicker span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gd-stepno{ display:flex; align-items:center; gap:6px; margin-top:6px; font-size:11.5px; font-weight:600; color:var(--accent-strong); }
.gd-stepno > span:first-child{ color:var(--text-dim); font-weight:500; }
.gd-done-chip{ display:inline-flex; align-items:center; gap:3px; margin-left:auto; padding:1px 7px; border-radius:999px; background:var(--good-soft); color:var(--good); font-size:10.5px; }
.gd-done-chip svg{ width:11px; height:11px; }
.gd-title{ margin:3px 0 8px; font-family:'Sora',sans-serif; font-size:16px; line-height:1.3; font-weight:700; color:var(--text); text-wrap:balance; }
.gd-where{ list-style:none; margin:0 0 9px; padding:0; display:flex; flex-direction:column; gap:4px; }
.gd-where li{ display:flex; gap:7px; align-items:flex-start; color:var(--text-dim); font-size:12px; }
.gd-where li b{ color:var(--text); font-weight:600; }
.gd-where svg{ width:13px; height:13px; flex:none; margin-top:2px; color:var(--accent-2-strong); }
.gd-mats{ display:flex; flex-direction:column; gap:3px; }
.gd-mat, .gd-shop-row{ display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:8px; padding:4px 6px; border-radius:var(--r-sm); background:var(--bg-3); }
.gd-mat b, .gd-shop-row b{ font-family:'JetBrains Mono',monospace; font-size:12px; }
.gd-mat-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gd-ico{ width:20px; height:20px; display:inline-block; border-radius:3px; image-rendering:auto; flex:none; }
.gd-count{ margin-top:5px; font-size:11px; color:var(--text-dim); }
.gd-notes{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; }
.gd-notes li{ display:flex; gap:7px; font-size:11.5px; color:var(--text-dim); padding:5px 7px; border-radius:var(--r-sm); background:var(--accent-2-soft); }
.gd-notes li.warn{ background:rgba(227,171,63,.12); color:var(--text); }
.gd-notes svg{ width:13px; height:13px; flex:none; margin-top:1px; }
.gd-notes li.warn svg{ color:var(--warn); }
.gd-actions{ display:flex; gap:6px; margin-top:11px; }
.gd-actions .gd-main{ flex:1; display:flex; align-items:center; justify-content:center; gap:7px; padding:8px 10px; font-weight:600; }
.gd-actions .gd-main svg{ width:15px; height:15px; }
.gd-actions kbd{ font-family:'JetBrains Mono',monospace; font-size:9.5px; opacity:.7; border:1px solid currentColor; border-radius:3px; padding:0 4px; margin-left:2px; }
.gd-actions .gd-icon-btn{ padding:7px 9px; }
/* up next */
.gd-next{ display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:8px; row-gap:3px; align-items:center; text-align:left; width:100%;
  padding:8px 10px; border-radius:var(--r-lg); background:transparent; border:1px dashed var(--border-strong); color:var(--text); white-space:normal; font-weight:500; }
button.gd-next:hover{ border-style:solid; border-color:var(--accent-border); background:var(--bg-3); }
.gd-next-k{ font-family:'JetBrains Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); }
.gd-next-t{ font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gd-next-m{ grid-column:1 / -1; display:flex; gap:8px; color:var(--text-dim); font-family:'JetBrains Mono',monospace; font-size:11px; }
.gd-next-m span{ display:inline-flex; align-items:center; gap:4px; }
.gd-next-m .gd-ico{ width:15px; height:15px; }
.gd-next.last{ grid-template-columns:1fr; }
/* view controls */
.gd-view{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.gd-view .seg-btn, .gd-shop-scope .seg-btn, .gd-opt .seg-btn{ padding:4px 8px; font-size:11px; }
.gd-view > button{ display:inline-flex; align-items:center; gap:5px; padding:5px 8px; font-size:11.5px; }
.gd-view > button svg{ width:13px; height:13px; }
.gd-view > button.active{ color:var(--accent-strong); border-color:var(--accent-border); background:var(--accent-soft); }
/* tabs */
.gd-tabs{ display:flex; gap:2px; border-bottom:1px solid var(--border); }
.gd-tab{ background:none; border:none; border-bottom:2px solid transparent; border-radius:0; padding:6px 9px; color:var(--text-dim); font-size:12px; font-weight:600; margin-bottom:-1px; }
.gd-tab:hover{ color:var(--text); background:none; }
.gd-tab.active{ color:var(--text); border-bottom-color:var(--accent); }
.gd-tabbody{ display:flex; flex-direction:column; gap:6px; min-height:60px; }
.gd-stage-h{ display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:none; border:none; padding:6px 4px; border-radius:var(--r-sm); color:var(--text); font-weight:600; font-size:12.5px; }
.gd-stage-h:hover{ background:var(--bg-3); }
.gd-stage-n{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gd-stage-dot{ width:8px; height:8px; border-radius:50%; border:2px solid var(--border-strong); flex:none; }
.gd-stage.open .gd-stage-dot{ border-color:var(--accent); }
.gd-stage-dot.full{ background:var(--good); border-color:var(--good); }
.gd-row{ display:grid; grid-template-columns:34px 1fr auto; gap:6px; align-items:center; width:100%; text-align:left; background:none; border:none; border-radius:var(--r-sm); padding:4px 4px 4px 8px; font-size:12px; font-weight:500; color:var(--text); white-space:normal; }
.gd-row:hover{ background:var(--bg-3); }
.gd-row.cur{ background:var(--accent-soft); box-shadow:inset 2px 0 0 var(--accent); }
.gd-row.done{ color:var(--text-faint); }
.gd-row-n{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--text-dim); display:inline-flex; }
.gd-row.done .gd-row-n{ color:var(--good); }
.gd-row-n svg{ width:12px; height:12px; }
.gd-row-t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gd-row-c{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--text-faint); }
.gd-more{ padding:4px 8px; }
.gd-shop{ display:flex; flex-direction:column; gap:3px; }
.gd-shop-row{ grid-template-columns:22px 1fr auto; row-gap:0; }
.gd-shop-row .gd-dim{ grid-column:2 / -1; font-size:10.5px; margin-top:-2px; }
.gd-tabbody > button.ghost{ align-self:flex-start; display:inline-flex; align-items:center; gap:6px; }
.gd-tabbody > button.ghost svg{ width:13px; height:13px; }
.gd-opt{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.gd-opt label{ color:var(--text-dim); font-size:12px; }
.gd-opt-actions{ display:flex; flex-wrap:wrap; gap:6px; }
.gd-opt-actions button{ display:inline-flex; align-items:center; gap:6px; }
.gd-opt-actions svg{ width:13px; height:13px; }
.gd-upsell{ display:flex; gap:9px; padding:10px; border-radius:var(--r-md); background:var(--accent-soft); border:1px solid var(--accent-border); }
.gd-upsell > svg{ width:16px; height:16px; flex:none; color:var(--accent-strong); margin-top:2px; }
.gd-upsell p{ margin:3px 0 8px; color:var(--text-dim); font-size:11.5px; }
.gd-keys{ display:flex; flex-wrap:wrap; gap:4px 6px; align-items:center; color:var(--text-faint); font-size:11px; padding-top:2px; }
.gd-keys kbd{ font-family:'JetBrains Mono',monospace; font-size:10px; background:var(--bg-3); border:1px solid var(--border-strong); border-bottom-width:2px; border-radius:4px; padding:0 5px; color:var(--text-dim); }
@media (max-width:760px){
  .gd-panel{ top:auto; left:8px; right:8px; bottom:8px; width:auto; max-height:56%; border-radius:var(--r-lg); }
  .gd-keys{ display:none; }
}
/* the /guide page */
.gd-page{ display:flex; flex-direction:column; gap:18px; }
.gd-page-start p{ margin:0 0 10px; color:var(--text-dim); }
.gd-page-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:14px; }
.gd-page-card{ background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px 18px; }
.gd-page-card.smart{ border-color:var(--accent-border); box-shadow:0 0 0 3px var(--accent-soft); }
.gd-page-card h3{ display:flex; align-items:center; gap:8px; margin:0 0 10px; font-size:15px; }
.gd-page-card h3 svg{ width:16px; height:16px; color:var(--accent-strong); }
.gd-page-card .gd-badge{ margin-left:auto; }
.gd-page-card ul{ margin:0 0 6px; padding-left:18px; color:var(--text-dim); display:flex; flex-direction:column; gap:5px; }