/* Help and guide pages: shared look on top of rider.css (tokens, light/dark, app bar, buttons). */
body{overflow:auto}
.help{max-width:1040px;margin:0 auto;padding:20px 16px 80px}
.help h1{font-family:var(--f-cond);text-transform:uppercase;font-size:40px;margin:8px 0 4px;line-height:1.05}
.help h2{font-family:var(--f-cond);text-transform:uppercase;font-size:28px;margin:44px 0 6px;border-top:1px solid var(--line);padding-top:20px;line-height:1.1}
.help h3{font-size:18px;margin:28px 0 6px}
.help p,.help li{max-width:72ch}
.help a{color:var(--accent)}
.help code{font-family:var(--f-mono);font-size:12.5px;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:0 4px}
.help [id]{scroll-margin-top:72px}
.lead{font-size:17px;color:var(--muted)}
.toc{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.toc a{border:1px solid var(--line);border-radius:999px;padding:4px 12px;text-decoration:none;color:var(--ink);font-weight:600;font-size:13px;background:var(--surface)}
.toc a:hover{border-color:var(--accent)}
.toc a.strong{border-color:var(--accent);color:var(--accent)}
.note{border-left:4px solid var(--accent);background:var(--accent-soft);padding:10px 14px;border-radius:0 8px 8px 0;margin:14px 0}
.steps-list li{margin:4px 0}
kbd{font-family:var(--f-mono);font-size:12px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 4px;background:var(--surface)}

/* Screenshots with numbered markers (positions in help/shots.json, in % of the image) */
figure.shot{margin:12px 0 4px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 2px 12px #0002}
.shot-in{position:relative;container-type:inline-size}
figure.shot img{display:block;width:100%;height:auto}
.mk{position:absolute;transform:translate(-50%,-50%);width:2.1cqw;aspect-ratio:1;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;font-size:1.1cqw;line-height:1;display:grid;place-items:center;border:2px solid #fff;box-shadow:0 1px 5px #0007;transition:transform .15s;pointer-events:auto;cursor:default}
.mk.on{transform:translate(-50%,-50%) scale(1.4);z-index:2}
ol.legend{counter-reset:n;list-style:none;padding:0;margin:10px 0 0;display:grid;gap:6px}
ol.legend li{counter-increment:n;position:relative;padding-left:34px;min-height:24px}
ol.legend li::before{content:counter(n);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center}
ol.legend li.on{color:var(--accent)}
.swipe{display:none;font-size:12px;color:var(--muted);margin:4px 0 0}
/* Phones: keep the screenshot big enough to read, and let it scroll sideways inside its frame */
@media (max-width:700px){
  figure.shot{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .shot-in{width:720px}
  .swipe{display:block}
  .help h1{font-size:32px}
  .help h2{font-size:24px}
}

/* Guide: numbered steps */
.story{counter-reset:step}
.step{counter-increment:step;margin-top:34px}
.step>h3{display:flex;gap:10px;align-items:baseline;margin:0 0 6px}
.step>h3::before{content:counter(step);flex:none;font-family:var(--f-cond);font-size:15px;font-weight:700;color:#fff;background:var(--ink);border-radius:6px;padding:1px 8px}
.who{display:inline-block;font-size:12px;font-weight:700;border:1px solid var(--line);border-radius:999px;padding:1px 9px;color:var(--muted);margin-left:4px;vertical-align:middle}

/* FAQ */
.faq-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0 4px}
.faq-tools input{flex:1 1 260px;font-size:15px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface)}
.faq-tools .muted{font-size:12.5px}
.faq h3{font-family:var(--f-cond);text-transform:uppercase;font-size:19px;letter-spacing:.3px;margin:22px 0 6px}
details.q{border:1px solid var(--line);border-radius:10px;background:var(--surface);margin:6px 0;max-width:80ch}
details.q>summary{cursor:pointer;padding:10px 14px;font-weight:600;list-style:none;display:flex;gap:10px;align-items:flex-start}
details.q>summary::-webkit-details-marker{display:none}
details.q>summary::before{content:"+";flex:none;width:18px;color:var(--accent);font-weight:700}
details.q[open]>summary::before{content:"−"}
details.q>div{padding:0 14px 12px 42px}
details.q>div>:first-child{margin-top:0}
details.q>div>:last-child{margin-bottom:0}
.faq-empty{display:none;color:var(--muted)}