/* Help & guides page and the in-app guide player. Uses the workspace tokens from styles.css. */
.guide-section{margin-top:8px}
.guide-section+.guide-section{margin-top:32px}
.guide-section-title{font-size:18px;margin-bottom:12px}
.guide-section-note{font-size:14px;margin:-6px 0 12px}
.guide-list{background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.guide-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 20px;align-items:center;padding:18px 22px}
.guide-row+.guide-row{border-top:1px solid var(--line)}
.guide-main h2{font-size:16px;margin-bottom:4px}
.guide-main p{font-size:14px;color:var(--ink)}
.guide-main small{display:block;margin-top:6px;color:var(--muted)}
.guide-actions .btn .icon{width:17px;height:17px}
.guide-note{font-size:13px}
.guide-steps{grid-column:1/-1;margin-top:6px}
.guide-steps summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--accent);font-size:14px;font-weight:600;padding:4px 0;list-style:none}
.guide-steps summary::-webkit-details-marker{display:none}
.guide-steps summary::after{content:'';width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s cubic-bezier(.22,1,.36,1)}
.guide-steps[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.guide-steps summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.guide-steps ol{margin:10px 0 4px;padding-left:22px;display:grid;gap:8px;font-size:14px;line-height:1.6;max-width:75ch}

/* Guide player */
.tour{position:fixed;inset:0;z-index:60}
.tour[hidden]{display:none}
.tour-blocker{position:absolute;inset:0}
.tour-spot{position:fixed;left:0;top:0;border-radius:10px;box-shadow:0 0 0 3px var(--accent),0 0 0 9999px #0b1f2399;pointer-events:none;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.tour-spot.is-off{display:block;transform:translate(50vw,50vh)!important;width:0!important;height:0!important;box-shadow:0 0 0 9999px #0b1f2399}
.tour-card{position:fixed;width:min(380px,calc(100vw - 32px));background:#fff;color:var(--ink);border-radius:14px;padding:18px 20px 16px;box-shadow:0 18px 50px #0b1f2340}
.tour-card.is-docked{left:16px!important;right:16px;bottom:16px;top:auto!important;width:auto}
.tour-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.tour-guide{font-size:12px;font-weight:600;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tour-close{width:34px;height:34px;flex:none}
.tour-card h2{font-size:18px;margin-bottom:6px;outline:0}
.tour-text{font-size:14px;line-height:1.6}
.tour-progress{display:flex;gap:4px;margin:14px 0 12px}
.tour-seg{position:relative;flex:1;height:4px;border-radius:9999px;background:#e3eaea;overflow:hidden}
.tour-seg.is-done{background:#9cc9bd}
.tour-fill{position:absolute;inset:0;background:var(--accent);transform-origin:left center;animation-name:tour-fill;animation-timing-function:linear;animation-fill-mode:both}
@keyframes tour-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.tour-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tour-count{margin-left:auto;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.tour-card.is-finished .tour-controls{justify-content:flex-end}

@media(max-width:760px){
 .guide-row{grid-template-columns:1fr;padding:16px}
 .guide-actions .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
 .tour-spot,.guide-steps summary::after{transition:none}
 .tour-fill{animation:none;transform:scaleX(1)}
}