/* Pages written from Markdown: the game-hook guide, the privacy policy, the license agreement.
   One column of reading, and a rail on the left that follows the part you read (the same rail as the home
   page's report). */
.doc-head { padding-top: calc(var(--bar-h) + clamp(84px, 13vh, 150px)); }
.doc-head .h2 { max-width: 15em; }
.doc-head .lede { margin-top: 22px; }
.doc-hero { margin-top: clamp(40px, 6vw, 72px); }
.doc-hero .pane { padding: 10px; background: var(--ink-0); }
.doc-hero img { width: 100%; height: auto; border-radius: 14px; }
.doc-hero figcaption { margin-top: 14px; max-width: 46em; }
.doc-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(28px, 6vw, 96px); align-items: start; padding-top: clamp(48px, 7vw, 92px); padding-bottom: var(--sp-section); }

.doc-toc { position: sticky; top: calc(var(--bar-h) + 40px); max-height: calc(100svh - var(--bar-h) - 80px); overflow: auto; overscroll-behavior: contain; }
.toc-toggle { display: none; }
.doc-toc ol { display: grid; }
.doc-toc a { position: relative; display: block; padding: 7px 0 7px 18px; font-size: 14px; font-weight: 520; line-height: 1.4; color: var(--text-3); transition: color var(--d-3) var(--ease-standard); }
.doc-toc a::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 1.5px; border-radius: 2px; background: var(--line-3); transition: background var(--d-4) var(--ease-standard), box-shadow var(--d-4) var(--ease-standard); }
.doc-toc a:hover { color: var(--text-1); }
.doc-toc a.on { color: var(--text-1); }
.doc-toc a.on::before { background: #fff; box-shadow: 0 0 10px rgba(207, 238, 255, 0.7); }

.prose { max-width: 46rem; font-size: clamp(1rem, 0.97rem + 0.16vw, 1.09rem); line-height: 1.68; color: var(--text-2); }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 2.6em 0 0.7em; padding-top: 1.4em; border-top: 1px solid var(--line-1); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 620; font-stretch: 110%; letter-spacing: -0.032em; line-height: 1.1; color: var(--text-1); text-wrap: balance; scroll-margin-top: 92px; }
.prose h3 { margin: 2em 0 0.55em; font-size: 1.19em; font-weight: 600; font-stretch: 106%; letter-spacing: -0.018em; line-height: 1.25; color: var(--text-1); scroll-margin-top: 92px; }
.prose p { margin: 0 0 1em; text-wrap: pretty; }
.prose ul, .prose ol { margin: 0 0 1.15em; display: grid; gap: 0.5em; }
.prose ul > li { position: relative; padding-left: 20px; }
.prose ul > li::before { content: ""; position: absolute; left: 1px; top: 0.82em; width: 8px; height: 1.5px; border-radius: 2px; background: var(--line-4); }
.prose ol { counter-reset: n; }
.prose ol > li { position: relative; padding-left: 30px; counter-increment: n; }
.prose ol > li::before { content: counter(n); position: absolute; left: 0; top: 0.1em; width: 20px; font-size: 0.82em; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-3); }
.prose li > ul, .prose li > ol { margin: 0.5em 0 0; }
.prose strong { color: var(--text-1); font-weight: 580; }
.prose a { color: var(--text-1); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 1px; transition: background-size var(--d-4) var(--ease-out); }
.prose a:hover { background-size: 0 1px; background-position: 100% 100%; }
.prose :not(pre) > code { padding: 1.5px 6px; border-radius: 6px; font-size: 0.86em; color: var(--text-1); background: rgba(255, 255, 255, 0.065); box-shadow: inset 0 0 0 1px var(--line-1); overflow-wrap: anywhere; }
.prose .codebox { margin: 1.2em 0 1.5em; }
.prose pre.code { font-size: 13px; }

/* The privacy policy opens with its short version: that list is the page's one card. */
.doc-privacy .prose > ul:first-of-type { margin: 1.2em 0 1.8em; padding: 8px 24px; gap: 0; border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--panel-edge), 0 30px 80px -40px rgba(0, 0, 0, 0.9); }
.doc-privacy .prose > ul:first-of-type > li { padding: 14px 0 14px 22px; color: var(--text-1); }
.doc-privacy .prose > ul:first-of-type > li + li { border-top: 1px solid var(--line-1); }
.doc-privacy .prose > ul:first-of-type > li::before { top: calc(14px + 0.82em); background: rgba(207, 238, 255, 0.8); box-shadow: 0 0 8px rgba(207, 238, 255, 0.5); }

.doc-next { padding: 0 0 var(--sp-section); }
.doc-next .wrap { padding-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line-1); display: grid; grid-template-columns: minmax(0, 7fr) auto; gap: 24px 48px; align-items: center; }
.doc-next-actions { display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 919px) {
  .doc-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* On a phone the rail is a fold: it opens down and closes back up. */
  .doc-toc { position: static; max-height: none; overflow: visible; border-radius: var(--r-md); background: var(--panel); box-shadow: var(--panel-edge); }
  .toc-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 14px 16px; font-size: 14.5px; font-weight: 570; color: var(--text-1); }
  .toc-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--spring-snappy-ms) var(--spring-snappy); }
  .toc-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .toc-fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d-5) var(--ease-out); }
  .toc-fold > ol { min-height: 0; overflow: hidden; padding: 0 16px; opacity: 0; transition: opacity var(--d-3) var(--ease-in), padding var(--d-5) var(--ease-out); }
  .doc-toc.open .toc-fold { grid-template-rows: 1fr; }
  .doc-toc.open .toc-fold > ol { opacity: 1; padding-bottom: 12px; transition: opacity var(--d-5) var(--ease-out) 80ms, padding var(--d-5) var(--ease-out); }
  .doc-next .wrap { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .toc-fold, .toc-fold > ol, .toc-toggle svg { transition-duration: 120ms !important; }
}