.guide-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-7); align-items: start; margin-top: var(--space-5); }
.toc { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
.toc ul { display: grid; gap: 2px; border-left: 2px solid var(--line); }
.toc a { display: block; padding: 6px 0 6px var(--space-3); margin-left: -2px; border-left: 2px solid transparent; text-decoration: none; font-size: var(--step--1); color: var(--ink-2); }
.toc a:hover { color: var(--ink); }
.toc a[aria-current='true'] { border-left-color: var(--turf); color: var(--ink); font-weight: 700; }

.guide { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); max-width: 72ch; min-width: 0; }
.gsec { min-width: 0; }
.gsec > * { min-width: 0; }
.gsec { display: grid; gap: var(--space-3); font-size: var(--step-1); line-height: 1.6; scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.gsec__title { font: 700 var(--step-3)/1.1 var(--font-display); letter-spacing: 0.01em; }
.gsec p strong { font-weight: 700; }
.gsec__title:focus { outline: none; }
.terms { display: grid; gap: var(--space-4); margin: 0; }
.terms > div { display: grid; gap: 2px; padding-top: var(--space-3); border-top: 1px solid var(--line); }
.terms dt { font-weight: 800; }
.terms dd { margin: 0; color: var(--ink-2); font-size: var(--step-0); line-height: 1.6; }
.owner-flag { color: var(--ink-3); font-size: 0.8125rem; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.col { padding: var(--space-4); border-radius: var(--radius-m); border: 1px solid var(--line); background: var(--surface); }
.col h3 { font: 700 var(--step-2)/1.1 var(--font-display); margin-bottom: var(--space-2); }
.col ul { display: grid; gap: 8px; font-size: var(--step-0); }
.col li { padding-left: 18px; position: relative; line-height: 1.4; }
.col li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 2px; background: var(--turf); }
.col--not li::before { background: transparent; border: 2px solid var(--ink-3); }
.advanced { border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-3) var(--space-4); background: var(--surface); font-size: var(--step-0); }
.advanced summary { cursor: pointer; font-weight: 600; color: var(--ink-2); }
.advanced[open] summary { margin-bottom: var(--space-3); }
.anatomy { min-width: 0; overflow-x: auto; margin: var(--space-2) 0 var(--space-3); display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px dashed var(--line-strong); border-radius: var(--radius-m); background: var(--surface-sunk); }
.anatomy figcaption { font-size: var(--step--1); color: var(--ink-3); }
.anatomy__row { border-radius: var(--radius-s); }
.anatomy .game { cursor: default; }
.anatomy .game:hover { background: transparent; }
.anatomy .game__open { pointer-events: none; }
.anatomy__ruler { background: var(--surface); padding: var(--space-3); border-radius: var(--radius-s); border: 1px solid var(--line); }

@media (max-width: 959px) {
  .guide-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .toc { position: static; }
  .toc ul { display: flex; overflow-x: auto; gap: 6px; border: 0; padding-bottom: 4px; scrollbar-width: none; }
  .toc a { border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 12px; margin: 0; white-space: nowrap; background: var(--surface); }
  .toc a[aria-current='true'] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .cols { grid-template-columns: 1fr; }
  .gsec { font-size: var(--step-0); }
}

/* ---------- Forced card layout (About page example) ----------
   Generated by tools/regen_stack_css.py from the phone rules in slate.css. Do not edit by hand. */
.slate--stack .game, .slate--stack .game:last-child { grid-template-columns: 1fr 1fr 1fr; grid-template-areas: 'kick kick kick' 'match match match' 'spread total win'; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); margin-bottom: var(--space-3); }
.slate--stack .game:hover { background: var(--surface); }
.slate--stack .cell--kickoff { grid-area: kick; display: flex; justify-content: space-between; align-items: center; width: 100%; }
.slate--stack .cell--matchup { grid-area: match; }
.slate--stack .cell--spread { grid-area: spread; }
.slate--stack .cell--total { grid-area: total; text-align: left !important; }
.slate--stack .cell--win { grid-area: win; padding-left: 0 !important; }
.slate--stack .cell--score { display: none; }
.slate--stack .cell--spread, .slate--stack .cell--total, .slate--stack .cell--win { padding-top: var(--space-2); border-top: 1px solid var(--line); }
.slate--stack .cell[data-label]::before { content: attr(data-label); display: block; font-size: 0.6875rem; font-weight: 600; color: var(--ink-3); margin-bottom: 2px; }
.slate--stack .game__open { display: grid; gap: 4px; width: 100%; font-size: var(--step-2); line-height: 1.15; }
.slate--stack .game__open .team { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-2); align-items: baseline; }
.slate--stack .team__pts { display: inline; font: 700 var(--step-2)/1 var(--font-display); }
.slate--stack .team__rec { order: 2; }
.slate--stack .team__pts { order: 3; min-width: 3.4ch; text-align: right; }
.slate--stack .team--away .sep, .slate--stack .sep { display: none; }
.slate--stack .team--home::before { content: none; }
.slate--stack .game__open::before { content: none; }
.slate--stack .cell--matchup .game__note { margin-top: 2px; }
.slate--stack .team--away .team__name::after { content: ''; }
.slate--stack .game.is-dead { background-image: none; opacity: 0.85; }
.slate--stack .win__text { font-size: var(--step--1); }
.slate--stack .cell--win .probbar { max-width: none; }
.slate--stack .team__rec { order: 0; }
.slate--stack .team__name { order: 0; }
.slate--stack .game__open .team { grid-template-columns: 1.6em auto 1fr auto; justify-content: start; }
.slate--stack .team--away::before { content: ''; }
.slate--stack .team__pts { justify-self: end; }
.slate--stack .team--home::before { content: attr(data-sep); font-weight: 600; color: var(--ink-3); font-size: var(--step-0); align-self: baseline; }
.slate--stack .spread { flex-wrap: wrap; row-gap: 0; }
.slate--stack .spread__team { white-space: normal; overflow: visible; }
.slate--stack .win__team { white-space: normal; overflow: visible; }
.slate--stack .game, .slate--stack .game:last-child { grid-template-columns: 1.6fr 0.55fr 1.25fr; }