/* ==========================================================================
   bonu7 game — pages/doc.css
   Legal documents: sticky TOC with scroll-spy + numbered prose sections.
   ========================================================================== */

.doc {
  display: grid;
  grid-template-columns: minmax(0, 268px) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .doc { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Sticky TOC
   -------------------------------------------------------------------------- */
.toc {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
  max-height: calc(100dvh - var(--header-h) - var(--sp-8));
  padding: var(--sp-5);
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (max-width: 900px) {
  .toc { position: static; max-height: none; margin-block-end: var(--sp-6); }
}
.toc h2 {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-block-end: var(--sp-4);
}
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { margin: 0; counter-increment: toc; }
.toc a {
  position: relative;
  display: block;
  padding: 0.5rem 0.5rem 0.5rem 2.1rem;
  font-family: var(--font-ui);
  font-size: 0.83rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--text-low);
  border-inline-start: 2px solid transparent;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.toc a::before {
  content: counter(toc);
  position: absolute;
  left: 0.7rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--ink-600);
  transition: color var(--t) var(--ease);
}
.toc a:hover { color: var(--text-hi); background: rgba(229,52,44,.06); }
.toc a.is-active {
  color: var(--em-800);
  border-inline-start-color: var(--em-600);
  background: rgba(229,52,44,.10);
  font-weight: 700;
}
.toc a.is-active::before { color: var(--em-600); }

/* --------------------------------------------------------------------------
   Document body
   -------------------------------------------------------------------------- */
.doc__body { max-width: 76ch; min-width: 0; }

.doc__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-end: var(--sp-6);
  padding-block-end: var(--sp-5);
  border-block-end: 1px solid var(--stroke-soft);
}

.doc__body section { scroll-margin-top: calc(var(--header-h) + 24px); }
.doc__body section + section { margin-block-start: var(--sp-8); }

.doc__body h2 {
  position: relative;
  font-size: var(--step-2);
  letter-spacing: -0.028em;
  margin-block-end: 0.8em;
  padding-block-end: 0.5em;
  border-block-end: 1px solid var(--stroke-soft);
}
.doc__body h3 {
  font-size: var(--step-1);
  margin-block: 1.7em 0.5em;
  color: var(--em-800);
}
.doc__body p { color: var(--text-low); }
.doc__body p + p { margin-block-start: 1.05em; }
.doc__body ul, .doc__body ol { color: var(--text-low); margin-block: 1em; }
.doc__body li { margin-block: 0.5em; }
.doc__body li::marker { color: var(--em-500); }
.doc__body strong { color: var(--text-hi); }
.doc__body a { text-decoration: underline; text-underline-offset: 3px; }

.doc__callout {
  margin-block: 1.4em;
  padding: var(--sp-5);
  background: rgba(201,162,75,.11);
  box-shadow: inset 0 0 0 1px rgba(143,111,44,.28);
  clip-path: var(--cut-one);
  font-size: var(--step--1);
  color: var(--text-mid);
}
.doc__callout b { display: block; color: var(--gold-lo); margin-block-end: 0.3em; }
.doc__callout--em {
  background: rgba(229,52,44,.09);
  box-shadow: inset 0 0 0 1px var(--stroke-hot);
}
.doc__callout--em b { color: var(--em-800); }
.doc__callout--danger {
  background: rgba(184,54,43,.06);
  box-shadow: inset 0 0 0 1px rgba(184,54,43,.26);
}
.doc__callout--danger b { color: #97261c; }

.doc__body dl { margin-block: 1.1em; }
.doc__body dt { color: var(--text-hi); font-weight: 700; font-family: var(--font-ui); margin-block-start: 1em; }
.doc__body dd { margin: 0.25em 0 0; color: var(--text-low); }

.doc__toplink {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-block-start: var(--sp-5);
  font-size: 0.8rem;
  color: var(--text-faint);
}
.doc__toplink:hover { color: var(--em-700); }
.doc__toplink .ico { width: 14px; height: 14px; }