/* ============================================================
   doc.css — legal documents (privacy policy, terms)
   Sticky TOC with scroll-spy + numbered long-form sections.
   ============================================================ */

.doc-grid {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}

/* ---------- STICKY TOC ---------- */
.toc {
  position: sticky; top: 100px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  padding: var(--sp-5);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  background: var(--ink-850);
  scrollbar-width: thin;
}
.toc h2 {
  font-family: var(--font-ui); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: var(--sp-4);
}
.toc ol { counter-reset: toc; }
.toc li + li { margin-top: .2rem; }
.toc a {
  position: relative;
  display: block;
  padding: .5rem .6rem .5rem 2.1rem;
  font-size: var(--fs-xs);
  color: var(--ink-300);
  border-left: 1px solid var(--ink-line);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  transition: all var(--t) var(--ease);
  line-height: 1.45;
}
.toc a::before {
  counter-increment: toc;
  content: counter(toc, decimal-leading-zero);
  position: absolute; left: .6rem; top: .5rem;
  font-family: var(--font-display); font-size: .8rem;
  color: var(--ink-500);
  transition: color var(--t) var(--ease);
}
.toc a:hover { color: var(--ink-100); border-left-color: var(--gold-hair-soft); background: rgba(255,255,255,.02); }
.toc a.is-active {
  color: var(--gold-200);
  border-left-color: var(--gold-500);
  background: var(--gold-tint-soft);
}
.toc a.is-active::before { color: var(--gold-400); }

.toc-meta {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--ink-line-soft);
  font-size: 11px; color: var(--ink-400); line-height: 1.6;
}

/* ---------- DOCUMENT BODY ---------- */
.doc { max-width: 72ch; counter-reset: sec; }
.doc-intro {
  padding: var(--sp-5);
  border: 1px solid var(--ink-line);
  border-left: 2px solid var(--gold-500);
  border-radius: var(--radius-sm);
  background: var(--ink-850);
  margin-bottom: var(--sp-8);
}
.doc-intro p { font-size: var(--fs-sm); color: var(--ink-200); }
.doc-intro p + p { margin-top: .8em; }

.doc section { padding-top: var(--sp-7); scroll-margin-top: 110px; }
.doc section:first-of-type { padding-top: 0; }
.doc h2 {
  position: relative;
  font-size: var(--fs-h3);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--ink-line);
  display: flex; align-items: baseline; gap: .8rem;
}
.doc h2::before {
  counter-increment: sec;
  content: counter(sec, decimal-leading-zero);
  font-family: var(--font-display); font-size: .8em; font-weight: 500;
  color: transparent; -webkit-text-stroke: .8px var(--gold-600);
  flex: none;
}
.doc h3 {
  font-size: var(--fs-h4);
  margin-top: var(--sp-6); margin-bottom: var(--sp-3);
  color: var(--gold-200);
}
.doc p { color: var(--ink-200); font-size: var(--fs-sm); line-height: 1.8; }
.doc p + p { margin-top: 1em; }
.doc ul, .doc ol { margin-top: var(--sp-4); }
.doc ul li, .doc ol li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .7rem;
  font-size: var(--fs-sm); color: var(--ink-200); line-height: 1.75;
}
.doc ul li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; rotate: 45deg;
  border: 1px solid var(--gold-500);
}
.doc ol { counter-reset: item; }
.doc ol li::before {
  counter-increment: item;
  content: counter(item) ".";
  position: absolute; left: 0; top: 0;
  font-family: var(--font-ui); font-size: var(--fs-xs); font-weight: 700;
  color: var(--gold-500);
}
.doc a { color: var(--gold-300); text-decoration: underline; text-underline-offset: 3px; }
.doc strong { color: var(--ink-50); }
.doc .note { margin-top: var(--sp-5); }
.doc .tbl-wrap { margin-top: var(--sp-5); }

.doc-verbatim {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--gold-hair);
  border-radius: var(--radius-sm);
  background: var(--gold-tint-soft);
  font-size: var(--fs-sm);
  color: var(--gold-200);
  font-style: italic;
  line-height: 1.75;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
  .doc-grid { grid-template-columns: minmax(0, 1fr); }
  .toc {
    position: static;
    max-height: none;
    order: -1;
  }
  .toc ol { columns: 2; column-gap: var(--sp-4); }
  .toc li { break-inside: avoid; }
}
@media (max-width: 560px) {
  .toc ol { columns: 1; }
}