/* The guides on the Hulp screen (B8, editor/guides.js): a list of buttons and one guide read in place, mobile first. */
.guides { margin-top: 18px; }
.guides .guide-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.guides .guide-link { display: grid; gap: 2px; width: 100%; text-align: left; padding: 12px 14px; min-height: 44px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: inherit; font: inherit; cursor: pointer; }
.guides .guide-link span { font-size: 14px; }
.guides .guide p, .guides .guide li { overflow-wrap: anywhere; }
.guides .guide .steps { padding-left: 1.4em; }
.guides .guide .steps li { margin: 6px 0; }
.guides .guide > button { margin-bottom: 8px; }
.guides .guide h2 { font-size: 21px; margin: 8px 0; }
.guides .guide h3 { font-size: 17px; margin: 18px 0 6px; }

/* "Laat het me zien" (editor/show-me.js): the button under a step, and the ring and the line at the place it shows. */
.guides .guide .steps .show-me { display: block; margin-top: 6px; min-height: 44px; }
.show-me-ring { position: fixed; z-index: 40; pointer-events: none; border: 3px solid var(--orange); border-radius: var(--radius); box-shadow: 0 0 0 6px var(--orange-soft); }
.show-me-note { position: fixed; z-index: 41; max-width: min(22rem, calc(100vw - 32px)); padding: 12px 14px; border-radius: var(--radius); background: var(--ink); color: var(--paper); box-shadow: var(--shadow-lift); }
.show-me-note p { margin: 0 0 8px; }
.show-me-note button { min-height: 44px; }
@media (prefers-reduced-motion: no-preference) { .show-me-ring { animation: show-me-in .3s ease-out both; } }
@keyframes show-me-in { from { opacity: 0; transform: scale(1.04); } }

/* A step's screenshot (scripts/make-guide-shots.ts), only when there is one. */
.guides .guide .guide-shot img { display: block; width: 100%; max-width: 40rem; height: auto; margin: 8px 0; border: 1px solid var(--line); border-radius: var(--radius); }