/* The guides (tools/site_guides.py's template, SITE_TO_9.md Stream 4, 12 Oct 2026): the byline, contents, a capture,
   questions, sources and related guides on a guide; the index's guide rows; and how a guide prints. Loaded after
   site-shell.css by guides.html and the guide-*.html pages only. Rows on rules, never boxed cards (DESIGN.md). */
.prose h2[id], .prose h3[id]{scroll-margin-top:88px}
.prose .gby{font-variant-numeric:tabular-nums}

/* contents: a quiet list on a rule, after the summary */
.prose .toc{margin:28px 0 8px; padding:4px 0 4px 20px; border-left:1px solid var(--rule-2)}
.prose .toc-h{margin:0 0 6px; font:600 var(--fs-caption)/1.3 var(--sans); color:var(--ink-3)}
.prose .toc ol{margin:0; padding-left:1.4em}
.prose .toc li{margin:2px 0; font-size:var(--fs-small); line-height:1.5}
.prose .toc a{display:inline-block; padding:4px 0}

/* a real capture, at its true aspect ratio */
.prose .gshot{margin:32px 0}
.prose .gshot img{display:block; width:100%; height:auto; border:1px solid var(--rule); border-radius:var(--r-3)}
.prose .gshot figcaption{margin-top:10px; font-size:var(--fs-caption); color:var(--ink-3)}

.prose .sources li{font-size:var(--fs-small); line-height:1.6; color:var(--ink-2)}
.prose .related ul{margin:0; padding:0; list-style:none; border-top:1px solid var(--rule)}
.prose .related li{border-bottom:1px solid var(--rule)}
.prose .related a{display:block; padding:12px 0; min-height:44px; box-sizing:border-box}

/* the index: one row per guide, two columns on wide screens */
.prose.gindex{max-width:none}
.gindex .glede{max-width:65ch; font-size:var(--fs-lede); color:var(--ink-2)}
.gindex .gjump{display:flex; flex-wrap:wrap; gap:4px 20px; margin:24px 0 8px}
.gindex .gjump a{display:inline-block; padding:10px 0; font-size:var(--fs-small)}
.gindex h2{margin-top:56px}
.gcards{display:grid; grid-template-columns:1fr 1fr; column-gap:48px; margin:16px 0 0; padding:0; list-style:none}
.gcard{padding:20px 0 24px; border-top:1px solid var(--rule-2)}
.prose .gcard h3{margin:0 0 6px; font:600 var(--fs-lede)/1.3 var(--display); letter-spacing:-.01em}
.gcard h3 a{color:var(--ink); text-decoration:none}
.gcard h3 a:hover{text-decoration:underline; text-underline-offset:3px}
.gcard h3 a::after{content:""; position:absolute; inset:0}
.gcard{position:relative}
.gcard .gsum{margin:0 0 12px; color:var(--ink-2); font-size:var(--fs-small); line-height:1.55}
.gcard .gfig{margin:0 0 10px; font-size:var(--fs-small); color:var(--ink-3); line-height:1.4}
.gcard .gfig b{display:block; font:600 var(--fs-h3)/1.2 var(--display); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums lining-nums; color:var(--ink)}
.gcard .gmeta{margin:0; font:400 var(--fs-prov)/1.4 var(--mono); color:var(--ink-3)}
@media (max-width:900px){ .gcards{grid-template-columns:1fr} }

@media print{
  html, body{background:#fff !important; color:#000 !important}
  .sh, .skip, .sf-in, .sf-copy, .toc, .related, .gjump, .gshot, .prose > p:has(> a[href="download.html"]){display:none !important}
  .prose{max-width:none; padding:0; color:#000}
  .prose *{color:#000 !important}
  .prose .tablewrap{overflow:visible}
  .prose .tablewrap table{min-width:0}
  .prose a{text-decoration:none}
  .prose .sources a::after{content:" (" attr(href) ")"; font-size:var(--fs-caption)}
  .prose h2, .prose h3{break-after:avoid}
  .prose tr, .prose .gcard{break-inside:avoid}
}