/* ═══════════════════════════════════════════════════════════════════════════
   GPTPG long-form document shell — support centre, privacy, terms.
   Consumes ONLY theme.css tokens; adds the layout theme.css has no reason to
   know about (reading measure, anchored sections, sticky contents rail).
   People troubleshoot ON the broken phone, so the phone layout is the one
   that has to be right.
   ═══════════════════════════════════════════════════════════════════════════ */

.doc-wrap { max-width: 1120px; margin: 0 auto; padding: 20px 20px 72px; }

/* ── masthead ─────────────────────────────────────────────────────────── */
.doc-head { position: relative; text-align: center; padding-top: 16px; }
.doc-head .marquee { font-size: clamp(44px, 9vw, 76px); line-height: 0.95; display: inline-block;
  text-decoration: none; }
.doc-head .brand-tag {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(11px, 2vw, 15px); letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold); opacity: 0.85; margin-top: 4px; text-indent: 0.32em;
}
.doc-head .back { position: absolute; top: 0; left: 0; text-decoration: none; }
@media (max-width: 760px) {
  .doc-head .back { position: static; display: inline-flex; margin-top: 12px; }
}

.doc-title { text-align: center; margin: 26px 0 4px; }
.doc-title h1 { font-family: var(--font-display); font-weight: 800;
  font-size: clamp(30px, 6.5vw, 46px); line-height: 1.03; }
.doc-title h1 em { font-style: normal; color: var(--gold); }
.doc-title .lede { color: var(--ink-dim); margin: 8px auto 0; max-width: 60ch;
  font-size: 15.5px; line-height: 1.55; }
.doc-title .footlights { max-width: 380px; margin: 18px auto 0; }

/* ── search / filter ──────────────────────────────────────────────────── */
.doc-filter { display: flex; justify-content: center; margin: 22px 0 4px; }
.doc-filter .field { width: min(460px, 100%); text-align: center; }
.doc-filter-note { text-align: center; color: var(--ink-faint); font-size: 13px;
  min-height: 1.3em; margin-top: 6px; }

/* ── two-column shell ─────────────────────────────────────────────────── */
.doc-body { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 40px; margin-top: 30px; }
@media (max-width: 900px) { .doc-body { grid-template-columns: 1fr; gap: 22px; } }

/* contents rail */
.doc-toc { align-self: start; position: sticky; top: 18px; font-size: 14px; }
.doc-toc > summary { display: none; }
.doc-toc .toc-label {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 13px; color: var(--gold); margin-bottom: 10px;
}
.doc-toc ol { list-style: none; margin: 0; padding: 0; }
.doc-toc li { margin: 0 0 2px; }
.doc-toc a {
  display: block; padding: 5px 10px; border-radius: var(--r-sm);
  color: var(--ink-dim); text-decoration: none; line-height: 1.35;
  border-left: 2px solid transparent;
}
.doc-toc a:hover { color: var(--ink); background: rgba(44, 40, 84, 0.45); }
.doc-toc a.here { color: var(--gold); border-left-color: var(--gold); background: rgba(44, 40, 84, 0.3); }

@media (max-width: 900px) {
  /* collapse the rail into a disclosure so the answer stays above the fold */
  .doc-toc { position: static; border: 1px solid var(--stage-line); border-radius: var(--r-md);
    background: var(--panel); padding: 0; }
  .doc-toc > summary {
    display: block; cursor: pointer; padding: 12px 14px; list-style: none;
    font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.1em; font-size: 14px; color: var(--gold);
  }
  .doc-toc > summary::-webkit-details-marker { display: none; }
  .doc-toc > summary::after { content: ' ▾'; }
  .doc-toc[open] > summary::after { content: ' ▴'; }
  .doc-toc .toc-inner { padding: 0 8px 12px; }
  .doc-toc .toc-label { display: none; }
}

/* ── prose column ─────────────────────────────────────────────────────── */
.doc-main { min-width: 0; }
.doc-main > section { scroll-margin-top: 20px; margin-bottom: 44px; }

.doc-main h2 {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 4vw, 28px);
  color: var(--gold); letter-spacing: 0.03em; line-height: 1.1;
  padding-bottom: 10px; border-bottom: 1px solid var(--stage-line); margin-bottom: 18px;
}
.doc-main h3 {
  font-family: var(--font-display); font-weight: 800; font-size: 19px;
  text-transform: none; letter-spacing: 0.02em; color: var(--ink); margin: 26px 0 8px;
}
.doc-main p, .doc-main li { line-height: 1.62; font-size: 15.5px; color: var(--ink-dim); }
.doc-main p { margin: 0 0 12px; max-width: 68ch; }
.doc-main ul, .doc-main ol { margin: 0 0 14px; padding-left: 22px; max-width: 68ch; }
.doc-main li { margin-bottom: 7px; }
.doc-main li > ul, .doc-main li > ol { margin-top: 7px; }
.doc-main strong, .doc-main b { color: var(--ink); font-weight: 600; }
.doc-main a { color: var(--host); }
.doc-main a:hover { color: var(--gold); }

.doc-main code, .doc-main kbd {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.88em; background: var(--panel-inset); border: 1px solid var(--stage-line);
  border-radius: 5px; padding: 1px 5px; color: var(--ink); overflow-wrap: anywhere;
}

.doc-main hr { border: none; border-top: 1px solid var(--stage-line); margin: 28px 0; }

/* ── question blocks ──────────────────────────────────────────────────── */
.qa {
  border: 1px solid var(--stage-line); border-radius: var(--r-md);
  background: var(--panel); padding: 16px 18px; margin-bottom: 12px;
}
.qa > h3 { margin-top: 0; margin-bottom: 6px; color: var(--ink); font-size: 18px; }
.qa > :last-child { margin-bottom: 0; }
.qa .sym {
  display: block; font-size: 13px; color: var(--ink-faint); font-style: italic;
  margin: -2px 0 10px;
}

/* ── callouts ─────────────────────────────────────────────────────────── */
.callout {
  border-left: 3px solid var(--host); border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--panel-inset); padding: 13px 16px; margin: 0 0 16px; max-width: 68ch;
}
.callout > :last-child { margin-bottom: 0; }
.callout .callout-title {
  display: block; font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em; font-size: 12.5px;
  color: var(--host); margin-bottom: 5px;
}
.callout.warn { border-left-color: var(--buzz); }
.callout.warn .callout-title { color: var(--buzz); }
.callout.draft { border-left-color: var(--gold); background: rgba(245, 182, 63, 0.07); }
.callout.draft .callout-title { color: var(--gold); }
.callout.todo { border-left-color: var(--coral); }
.callout.todo .callout-title { color: var(--coral); }

/* the legal-review banner sits above everything, unmissable */
.review-banner {
  max-width: 760px; margin: 24px auto 0; border: 1px solid var(--gold);
  border-radius: var(--r-md); background: rgba(245, 182, 63, 0.09);
  padding: 15px 18px; box-shadow: var(--glow-gold);
}
.review-banner .callout-title {
  display: block; font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px;
  color: var(--gold); margin-bottom: 6px;
}
.review-banner p { margin: 0 0 8px; color: var(--ink-dim); font-size: 14.5px; line-height: 1.55; }
.review-banner p:last-child { margin-bottom: 0; }

/* ── fact tables ──────────────────────────────────────────────────────── */
.doc-table-scroll { overflow-x: auto; margin: 0 0 16px; -webkit-overflow-scrolling: touch; }
table.doc-table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 14.5px; }
table.doc-table th, table.doc-table td {
  text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--stage-line);
  vertical-align: top; color: var(--ink-dim); line-height: 1.5;
}
table.doc-table th {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 12.5px; color: var(--gold); white-space: nowrap;
}
table.doc-table tr:last-child td { border-bottom: none; }
table.doc-table td:first-child { color: var(--ink); }

/* placeholders the owner must fill in before launch */
.fillin {
  display: inline-block; border: 1px dashed var(--coral); color: var(--coral);
  border-radius: 5px; padding: 0 6px; font-size: 0.92em; font-style: normal;
  background: rgba(255, 122, 110, 0.08);
}

/* ── footer ───────────────────────────────────────────────────────────── */
.doc-foot {
  margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--stage-line);
  text-align: center; color: var(--ink-faint); font-size: 13px;
}
.doc-foot nav { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.doc-foot nav a { text-decoration: none; }
.doc-foot .updated { font-variant-numeric: tabular-nums; }

/* ── filter state ─────────────────────────────────────────────────────── */
.doc-main .filtered-out { display: none; }
.doc-empty { color: var(--ink-faint); font-size: 15px; padding: 20px 0; text-align: center; }
mark.hit { background: rgba(245, 182, 63, 0.28); color: var(--ink); border-radius: 3px; padding: 0 1px; }