﻿/* One expandable section per task, with close-up images beside each step. */
.workspace-page main.guide { padding:32px; font-size:16px; background:var(--surface); }
.guide a:not(.btn-primary) { color:var(--primary); text-decoration:underline; text-underline-offset:4px; }
.guide a:focus-visible,.guide summary:focus-visible { outline:3px solid var(--primary); outline-offset:4px; }
.guide-jump { display:flex; flex-wrap:wrap; gap:10px 24px; padding:18px 0; }
.guide-section { border-bottom:1px solid var(--border); scroll-margin-top:100px; }
.guide-section > summary { display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; padding:20px 0; list-style:none; }
.guide-section > summary::-webkit-details-marker { display:none; }
.workspace-page .guide-section > summary h2 { margin:0; font-size:20px; }
.guide-chevron { width:9px; height:9px; flex-shrink:0; margin-right:4px; border-right:2px solid var(--primary); border-bottom:2px solid var(--primary); transform:rotate(45deg); transition:transform .15s; }
.guide-section[open] > summary .guide-chevron { transform:rotate(225deg); }
.guide-section-body { padding:0 0 24px; max-width:800px; }
.guide-section-body p { margin:0 0 16px; color:var(--muted); font-size:16px; line-height:1.65; }
.guide-section-body .guide-control-name { color:var(--primary); font-weight:600; }
.guide-actions { padding-left:28px; list-style:decimal; margin:0 0 20px; }
.guide-actions > li { padding-left:8px; margin-bottom:32px; }
.guide-actions > li:last-child { margin-bottom:0; }
.guide-actions > li::marker { color:var(--primary); font-weight:600; }
.workspace-page .guide-actions h3 { margin:0 0 8px; font-size:18px; font-weight:600; }
.guide-screen { margin:16px 0 24px; width:100%; max-width:760px; overflow:hidden; background:#fff; border:1px solid var(--border); border-radius:4px; }
.guide-screen picture,.guide-screen img { display:block; width:100%; }
.guide-screen img { height:auto; }
.guide-screen-save { max-width:640px; }
.guide-screen figcaption { padding:8px 12px; font-size:13px; background:var(--surface); border-top:1px solid var(--border); }
.guide-caption { font-size:13px; color:var(--muted); padding-top:20px; }
@media(max-width:600px) {
 .workspace-page main.guide { padding:18px; }
 .workspace-page .guide-section > summary h2 { font-size:18px; }
 .guide-section > summary { padding:16px 0; }
 .guide-actions { padding-left:20px; }
 .guide-actions > li { padding-left:2px; margin-bottom:28px; }
 .guide-screen { width:calc(100% + 22px); margin-left:-22px; }
 .guide-section-body > .guide-screen { width:100%; margin-left:0; }
}
@media(prefers-reduced-motion:reduce) { .guide-chevron { transition:none; } }
