/**
 * terms.css — document layout, sticky scrollspy index, TL;DR box.
 * Minimal motion by design (§5): trust through clarity.
 */

.terms { padding-top: var(--space-10); }
.terms__header { margin-bottom: var(--space-10); }
.terms__updated { color: var(--text-tertiary); margin-top: var(--space-3); font-size: 0.8125rem; }

.terms__layout {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: clamp(var(--space-8), 5vw, var(--space-12));
  align-items: start;
}

/* Whole article: at most one subtle fade on load; sections never scroll-reveal */
@media (prefers-reduced-motion: no-preference) {
  .js .terms__body { opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
  .js .terms__body.is-in { opacity: 1; }
}

/* ---------- Index: sticky scrollspy ≥1024px ---------- */
.terms__index {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-4));
}
.terms__index-disclosure summary {
  list-style: none;
  color: var(--text-tertiary);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-3);
  pointer-events: none; /* desktop: always open, not a control */
}
.terms__index-disclosure summary::-webkit-details-marker { display: none; }

.terms__index ol {
  list-style: none;
  margin: 0; padding: 0;
  position: relative;
  display: grid;
  border-left: 2px solid var(--border-color);
}
.terms__index a {
  display: block;
  padding: var(--space-2) var(--space-4);
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--dur-fast);
}
.terms__index a:hover { color: var(--text-primary); }
.terms__index a.is-current { color: var(--primary-dark); font-weight: 550; }

/* Active indicator slides between entries (transform only, §5) */
.terms__index-marker {
  position: absolute;
  left: -2px; top: 0;
  width: 2px; height: 2.25rem;
  background: var(--primary);
  transition: transform var(--dur-base) var(--ease-in-out);
}

/* ---------- Body ---------- */
.terms__tldr {
  background: var(--primary-light);
  border: 1px solid var(--primary);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-10);
  font-size: 1.0625rem;
}
.terms__tldr-label { color: var(--primary); font-size: 0.75rem; margin-bottom: var(--space-2); }

.terms__section { margin-bottom: var(--space-10); }
.terms__section h2 { font-size: 1.25rem; margin-bottom: var(--space-4); }
.terms__section p { color: var(--text-secondary); max-width: 65ch; }
.terms__section p + p { margin-top: var(--space-3); }

/* ---------- Mobile: index collapses to "On this page" disclosure ---------- */
@media (max-width: 63.99rem) {
  .terms__layout { grid-template-columns: 1fr; }
  .terms__index { position: static; }
  .terms__index-disclosure summary {
    pointer-events: auto;
    cursor: pointer;
    display: flex; align-items: center; gap: var(--space-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    min-height: 44px;
    margin-bottom: 0;
  }
  .terms__index-disclosure summary::after { content: "+"; margin-left: auto; }
  .terms__index-disclosure[open] summary::after { content: "−"; }
  .terms__index-disclosure[open] summary { margin-bottom: var(--space-3); }
  .terms__index-marker { display: none; }
}