/* P9 guide pages (GU-B): contents rail, article, "From our data" box.
   Loaded by /guides/ pages only, after site.css. Tokens only: no colour
   literal, no absolute URL, no raw type or space values. Stacks to one column
   (contents, article, box) on a phone. */

.g9-main { max-width: var(--measure); }
.g9-byline {
  display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin-top: 0.7rem;
  font: 500 var(--t-xs)/var(--lh-snug) var(--ui); color: var(--ink-3);
}
.g9-grid {
  display: grid; grid-template-columns: 13rem minmax(0, 1fr) 17rem;
  gap: var(--s-6); align-items: start; margin-top: var(--s-5);
}
.g9-grid--nobox { grid-template-columns: 13rem minmax(0, 1fr); }
.g9-grid .guide-body { max-width: none; margin-top: 0; }
.g9-grid > .guide-body:only-child { grid-column: 1 / -1; }
.g9-toc, .g9-databox {
  padding: 1rem 1.1rem; background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--r-3);
}
.g9-toc { position: sticky; top: 1rem; }
.g9-toc ol { display: grid; gap: 0.35rem; margin-top: 0.7rem; }
.g9-toc li { font-size: var(--t-sm); }
.g9-toc a { color: var(--brand-ink); text-decoration: none; }
.g9-toc a:hover { text-decoration: underline; }
.g9-databox { display: grid; gap: 0.6rem; }
.g9-data-title { font: 600 var(--t-sm)/var(--lh-snug) var(--ui); color: var(--ink); }
.g9-databox .facts { margin-top: 0; }
.g9-fill {
  display: flex; gap: 0.4rem; align-items: flex-start;
  font-size: var(--t-xs); color: var(--ink-3);
}
.guide-body h2 { scroll-margin-top: var(--s-4); }

@media (max-width: 960px) {
  .g9-grid, .g9-grid--nobox { grid-template-columns: minmax(0, 1fr); }
  .g9-toc { position: static; }
}