/* The how-to guides (scripts/build-guides.mjs). Rides reference.css for the
   palette, type and header; only what the guides add lives here. */

/* Phone / computer switch ------------------------------------------------- */
/* Every screenshot comes in two sizes because the app lays out differently on
   a phone and a computer (owner, 2026-09-26). Without JavaScript a phone-width
   reader sees the phone pictures and a wide one the computer pictures; the
   switch then lets either reader pick, and remembers it. */
.device-switch{display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin:1rem 0 1.4rem; font-size:.92rem; color:var(--muted);}
.device-switch button{
  font:inherit; font-weight:700; color:var(--plum); background:var(--card);
  border:1px solid var(--line); border-radius:999px; padding:.35rem .9rem; cursor:pointer;
}
.device-switch button[aria-pressed="true"]{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}

.shot{margin:1.2rem 0 1.6rem; text-align:center;}
.shot img{display:block; margin:0 auto; height:auto; border-radius:16px; border:1px solid var(--line); box-shadow:var(--shadow); background:var(--card);}
.shot .shot-phone img{width:100%; max-width:340px;}
.shot .shot-desktop img{width:100%;}
.shot figcaption{font-size:.88rem; color:var(--muted); margin:.6rem auto 0; max-width:60ch;}
.shot-desktop{display:none;}
@media (min-width:760px){ .shot-phone{display:none;} .shot-desktop{display:block;} }
html.show-phone .shot-phone{display:block;} html.show-phone .shot-desktop{display:none;}
html.show-desktop .shot-desktop{display:block;} html.show-desktop .shot-phone{display:none;}
/* A step pictured on only one device shows that picture whichever is picked. */
.shot.only-one .shot-phone, .shot.only-one .shot-desktop{display:block !important;}

/* In this guide ----------------------------------------------------------- */
.toc{background:var(--surface2); border:1px solid var(--line); border-radius:16px; padding:.9rem 1.2rem; margin:1.2rem 0 1.8rem;}
.toc h2{margin:0 0 .4rem; font-size:1.05rem;}
.toc ol{margin:0; padding-left:1.3rem;}
.toc li{margin:.15rem 0;}

.guide-body h2{scroll-margin-top:1rem;}
.guide-body blockquote{margin:1.2rem 0; padding:.8rem 1.1rem; background:var(--surface2); border-left:4px solid var(--mauve); border-radius:12px;}
.guide-body blockquote p{margin:0;}

.open-app{display:flex; flex-wrap:wrap; align-items:center; gap:.8rem 1.2rem; margin:2.2rem 0 1rem; padding:1.1rem 1.3rem; background:var(--surface); border-radius:18px;}
.open-app p{margin:0; flex:1 1 18ch;}
.guide-meta{font-size:.85rem; color:var(--muted);}

/* The guides list ---------------------------------------------------------- */
.guide-search{margin:1.2rem 0 .4rem;}
.guide-search label{display:block; font-weight:700; margin:0 0 .3rem;}
.guide-search input{
  width:100%; font:inherit; color:var(--ink); background:var(--card);
  border:1px solid var(--track); border-radius:12px; padding:.7rem .95rem;
}
.guide-count{font-size:.88rem; color:var(--muted); margin:.3rem 0 1.2rem;}
.guide-group h2{margin-top:2rem;}
.guide-list{list-style:none; margin:0; padding:0; display:grid; gap:.6rem;}
.guide-list a{
  display:block; text-decoration:none; color:var(--ink); background:var(--card);
  border:1px solid var(--line); border-radius:14px; padding:.75rem 1rem;
}
.guide-list a:hover{background:var(--surface2);}
.guide-list b{display:block; color:var(--plum);}
.guide-list span{display:block; font-size:.9rem; color:var(--muted);}
.guide-none{display:none; background:var(--surface2); border-radius:14px; padding:1rem 1.2rem;}