/* Styles for the guide, shared by /help/ and the app's Help panel. */
.gpick { display:inline-flex; align-items:center; gap:0.5rem; font-size:0.9rem; color:var(--ink-2); }
.gpick select { font-size:16px; padding:0.45rem 0.6rem; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--ink); min-height:44px; }
.gtoc h2 { font-size:1rem; margin:0 0 0.4rem; }
.gtoc ol { margin:0 0 1.2rem; padding-left:1.3rem; columns:1; }
.gtoc li { margin:0.15rem 0; font-size:0.95rem; }
.gtoc a { color:var(--violet); text-decoration:none; }
.gsec { margin-top:1.8rem; scroll-margin-top:0.8rem; }
dialog.help .gsec { scroll-margin-top:7.5rem; }
.gsec h2 { font-family:Newsreader,Georgia,serif; font-weight:500; font-size:1.35rem; margin:0 0 0.4rem; }
.gintro { color:var(--ink-2); margin:0 0 0.8rem; font-size:0.97rem; }
.gsec ol { margin:0; padding-left:1.5rem; }
.gsec li { margin:0 0 0.9rem; font-size:1.02rem; line-height:1.55; }
.gsec li::marker { font-weight:600; color:var(--violet); }
.gdo { display:block; }
.gdev { font-weight:600; color:var(--violet); }
.gsee { display:block; color:var(--ink-2); font-size:0.92rem; margin-top:0.15rem; }
.gsee::before { content:"You'll see: "; font-weight:600; color:var(--ink-3); }
b.ui { font-weight:650; white-space:nowrap; }
img.gshot { display:block; width:min(100%, 260px); margin:0.6rem 0 0.2rem; border:1px solid var(--line); border-radius:10px; background:#fff; }
@media print {
  .gsec { break-before:page; }
  .gsec:first-of-type, .gtoc + .gsec { break-before:auto; }
  .gsec li { break-inside:avoid; }
  img.gshot { width:210px; }
  b.ui { text-decoration:underline; }
}