/* Ported from Snapshot's frontend/site/site.css, "User guide" and "Print" (design-system/reference/documents/site-snapshot.css,
   design-system/docs/documents.md). The stylesheet of the user guide (frontend/site/guide.html, served at /guide/guide.css), loaded
   after site.css: the page on screen, and the same page printed to the PDF by tools/build_guide.ps1. Tokens and rem only, no color,
   no px, no font name (tests/test_frontend.py, tests/test_guide.py). The marks drawn on the pictures use the product color in the
   builder; the numbers of the lists here use the --product token, so they follow the theme. */

/* ---------- On screen ---------- */
.print-only{display:none}
.guide{display:grid;grid-template-columns:15.5rem minmax(0,1fr);gap:3.5rem;max-width:var(--wrap-w);margin:var(--sp-9) auto 0;padding:0 var(--gutter)}
.guide-toc{position:sticky;top:6rem;align-self:start;max-height:calc(100vh - 7.5rem);overflow:auto;padding:var(--sp-5);border:var(--hair) solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.guide-toc h2{font-family:var(--font-body);font-size:var(--fs-xs);letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--label)}
.guide-toc ol{list-style:none;margin:.875rem 0 0;padding:0;display:flex;flex-direction:column;gap:.625rem;font-size:var(--fs-14);line-height:1.4}
.guide-toc a{display:flex;justify-content:space-between;gap:var(--sp-3);color:var(--text);text-decoration:none}
.guide-toc a:hover{color:var(--link)}
.toc-page{display:none}
.guide-body{min-width:0;max-width:53.75rem;display:flex;flex-direction:column;gap:3.5rem;line-height:1.75}
.guide-body section{display:flex;flex-direction:column;gap:.875rem;scroll-margin-top:5.5rem}
.guide-body h2{font-size:2rem;letter-spacing:-.02em;line-height:1.15}
.guide-body h3{font-size:var(--fs-h3);margin-top:.875rem;scroll-margin-top:5.5rem}
.guide-body ul,.guide-body ol{margin:0;padding-left:1.375rem;display:flex;flex-direction:column;gap:.375rem}
.guide-body code{font-size:.92em;padding:.0625rem .3125rem;border-radius:var(--r-xs);overflow-wrap:anywhere}
.guide-note{padding:.875rem 1.125rem;border-left:var(--rule-3) solid var(--link);border-radius:var(--r);background:var(--tint)}
.guide-step{display:flex;flex-direction:column;gap:.875rem}
.guide-shot{margin:var(--sp-2) 0 0;border:var(--hair) solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;background:var(--card);box-shadow:var(--shadow-md)}
.guide-shot img{display:block;max-width:100%;height:auto;margin:0 auto}
.guide-shot figcaption{padding:.625rem var(--sp-4);font-size:var(--fs-md);color:var(--muted);border-top:var(--hair) solid var(--line)}
.guide-shot-narrow{width:fit-content;max-width:100%}
.guide-body ol.marks{list-style:none;padding:0;gap:var(--sp-2)}
.marks li{display:grid;grid-template-columns:1.875rem minmax(0,1fr);gap:.625rem;align-items:start}
.mark{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-top:.1875rem;border-radius:50%;background:var(--product);color:var(--on-accent);font-size:var(--fs-md);font-weight:700;line-height:1;box-shadow:0 0 0 var(--rule-2) var(--card)}

@media (max-width:67.5em){
  .guide{grid-template-columns:minmax(0,1fr);gap:var(--sp-8)}
  .guide-toc{position:static;max-height:none}
}
@media (max-width:45em){
  .guide{margin-top:var(--sp-6)}
  .guide-body{gap:2.5rem;line-height:1.65}
  .guide-body h2{font-size:1.625rem}
  .guide-body h3{font-size:var(--fs-lg)}
  .guide-shot figcaption{padding:var(--sp-2) var(--sp-3)}
}

/* ---------- Print: the user guide as a PDF (tools/build_guide.ps1 prints /guide). A cover, the contents with page numbers
   (written into guide.html by the builder), and every chapter on a new page. Print is always light. ---------- */
@page{size:Letter;margin:14mm 14mm 16mm}
/* The cover is one dark page from edge to edge, in the website's dark band; the pages after it stay white. */
@page cover{size:Letter;margin:0}
@media print{
  :root{color-scheme:light}
  body{background:var(--card);font-size:10.5pt}
  .site-header,.site-footer,.skip-link,.guide-hero{display:none}
  .print-only{display:block}
  .guide{display:block;margin:0;padding:0;max-width:none}
  .guide-cover{page:cover;height:279.4mm;box-sizing:border-box;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:2.6mm;break-after:page;padding:0 24mm 0 26mm;
    background:var(--band);border-left:9mm solid var(--accent);-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .guide-cover-brand{display:flex;align-items:center;gap:4mm;font-family:var(--font-display);font-size:22pt;font-weight:500;letter-spacing:-.01em;color:var(--on-dark-strong)}
  .guide-cover-brand .gp-mark{width:15mm;height:15mm;flex-shrink:0}
  .guide-cover h2{font-size:44pt;line-height:1.05;letter-spacing:-.02em;color:var(--on-dark-strong)}
  .guide-cover-sub{font-size:14pt;color:var(--on-dark);max-width:150mm}
  .guide-cover-meta{margin-top:18mm;font-size:11pt;color:var(--on-dark-muted)}
  .guide-cover-note{font-size:10pt;color:var(--on-dark-muted)}
  .guide-toc{position:static;max-height:none;overflow:visible;border:0;padding:0;background:none;break-after:page}
  .guide-toc h2{font-family:var(--font-display);font-size:26pt;letter-spacing:-.01em;text-transform:none;font-weight:400;color:var(--ink)}
  .guide-toc ol{margin-top:10mm;gap:5mm;font-size:12pt}
  .guide-toc a{border-bottom:var(--hair) dotted var(--line-2);padding-bottom:2mm}
  .toc-page{display:inline;color:var(--muted)}
  .guide-body{max-width:none;gap:0;line-height:1.55}
  .guide-body section{break-before:page;gap:2.4mm}
  .guide-body section:first-child{break-before:auto}
  .guide-body h2{font-size:22pt}
  .guide-body h3{font-size:13pt;margin-top:2mm}
  .guide-body h2,.guide-body h3{break-after:avoid}
  .guide-step{break-inside:avoid;gap:2.4mm}
  .guide-shot{box-shadow:none;break-inside:avoid;margin-top:1mm}
  .guide-shot img{max-height:135mm;width:auto}
  .guide-shot-narrow img{max-height:100mm}
  .guide-body ol.marks{break-before:avoid}
  .marks li{break-inside:avoid}
  .mark{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .guide-note{break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  a{color:var(--link);text-decoration:none}
}