/* Long-form guides. Extends styles/workflow-pages.css (the .gw-* system) with the
   few article pieces it lacks: a contents list, body lists, a comparison table,
   and tool entries. Colors and spacing come from existing tokens only. */
.gg-meta { margin: var(--fp-space-lg) 0 0; color: var(--gw-muted); font-size: var(--fp-text-sm); }
.gg-page .gw-hero h1 { max-width: 18ch; }
.gg-disclosure p a { color: var(--gw-ink); }
.gg-contents h2 { margin: 0 0 var(--fp-space-md); font-size: var(--fp-text-md); letter-spacing: -0.02em; }
.gg-contents ol { margin: 0; padding: 0; list-style: none; counter-reset: guide-section; border-top: 1px solid var(--gw-rule); }
.gg-contents li { counter-increment: guide-section; border-bottom: 1px solid var(--gw-rule); }
.gg-contents a { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: center; min-height: 2.75rem; padding-block: var(--fp-space-xs); color: var(--gw-ink); text-decoration: none; }
.gg-contents a::before { content: counter(guide-section, decimal-leading-zero); color: var(--gw-accent); font-family: var(--fp-font-outlier); font-size: var(--fp-text-sm); font-variant-numeric: tabular-nums; }
.gg-contents a:hover { color: var(--gw-accent); }
.gg-article { padding-top: 0; }
.gg-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fp-space-lg); min-width: 0; }
.gg-body > ul { margin: 0; padding-left: var(--fp-space-lg); max-width: 67ch; color: var(--gw-muted); line-height: 1.7; }
.gg-body > ul li + li { margin-top: var(--fp-space-sm); }
.gg-body a { color: var(--gw-ink); overflow-wrap: anywhere; }
.gg-table table { min-width: 40rem; }
.gg-table tbody th { padding: var(--fp-space-md); border-bottom: 1px solid var(--gw-rule); vertical-align: top; color: var(--gw-ink); font-size: var(--fp-text-base); font-weight: 650; white-space: nowrap; }
.gg-table td { color: var(--gw-muted); }
.gg-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fp-space-xl); }
.gg-tool { padding-top: var(--fp-space-lg); border-top: 1px solid var(--gw-rule); }
.gg-tool h3 { margin: 0 0 var(--fp-space-md); font-size: var(--fp-text-lg); line-height: 1.2; letter-spacing: -0.03em; }
.gg-tool dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fp-space-md); }
.gg-tool dl > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fp-space-2xs); }
.gg-tool dt { color: var(--gw-accent); font-family: var(--fp-font-outlier); font-size: var(--fp-text-sm); }
.gg-tool dd { margin: 0; max-width: 67ch; color: var(--gw-muted); line-height: 1.65; overflow-wrap: anywhere; }
.gg-tool__link { margin: var(--fp-space-md) 0 0; font-size: var(--fp-text-sm); }
.gg-tool__link a { display: inline-flex; align-items: center; gap: var(--fp-space-xs); min-height: 2.75rem; }
.gg-template { margin: 0; min-width: 0; border: 1px solid var(--gw-rule); border-radius: var(--fp-radius-lg); background: var(--gw-surface); overflow: hidden; }
.gg-template figcaption { padding: var(--fp-space-sm) var(--fp-space-md); border-bottom: 1px solid var(--gw-rule); color: var(--gw-ink); font-size: var(--fp-text-sm); font-weight: 650; }
.gg-template pre { margin: 0; padding: var(--fp-space-md); color: var(--gw-ink); font-family: var(--fp-font-outlier); font-size: var(--fp-text-sm); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.gg-template pre:focus-visible { outline: 3px solid var(--fp-color-focus); outline-offset: -3px; }
@media (min-width: 40rem) {
  .gg-tool dl > div { grid-template-columns: minmax(9rem, 0.3fr) minmax(0, 1fr); gap: var(--fp-space-lg); }
  .gg-contents ol { columns: 2; column-gap: var(--fp-space-2xl); }
  .gg-contents li { break-inside: avoid; }
}
@media (min-width: 60rem) {
  .gg-page .gw-topic { grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.5fr); }
}
@media (prefers-reduced-motion: reduce) {
  .gg-page *, .gg-page *::before, .gg-page *::after { scroll-behavior: auto; animation: none; transition: none; }
}