/* ------------------------------------------------------------------
   lagstyr — legal document pages (/privacy, /terms).
   References tokens.css only. Loaded after styles.css; adds only what
   long-form legal prose introduces. Every component here is the
   homepage's own visual language reapplied: the mono panel from the
   hero log, the 1px-hairline grid from .tiers/.domains, the indigo
   mono key from .tenet-key, and the gradient rule from .fact.
------------------------------------------------------------------ */

/* ---- hero: the document stamp, in the house mono style ---- */
.stamp {
  background: linear-gradient(180deg, var(--substrate), var(--void-2));
  border: 1px solid var(--spine); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
  font-family: var(--font-mono); font-size: var(--t-mono);
}
.stamp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--spine);
  background: color-mix(in srgb, var(--substrate-2) 60%, transparent);
}
.stamp-title { color: var(--mist); letter-spacing: 0.04em; }
.stamp-title .log-dot { color: var(--indigo); margin-inline: 3px; }
.stamp-badge { display: inline-flex; align-items: center; gap: 7px; color: var(--tier-read); letter-spacing: 0.05em; }
.stamp-list { list-style: none; margin: 0; padding: 6px 0; }
.stamp-list li {
  display: grid; grid-template-columns: 128px minmax(0, 1fr);
  gap: 12px; padding: 10px 16px; align-items: baseline;
  border-left: 2px solid var(--indigo);
}
.stamp-list .stamp-key { color: var(--indigo); letter-spacing: 0.04em; }
.stamp-list .stamp-val { color: var(--ink-dim); }
.stamp-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 1px solid var(--spine);
  background: color-mix(in srgb, var(--substrate-2) 40%, transparent);
  color: var(--mist-2); letter-spacing: 0.04em;
}

/* ---- body: sticky contents rail beside the document ---- */
.legal-grid {
  display: grid; grid-template-columns: 236px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px); align-items: start;
}

.legal-toc { position: sticky; top: 90px; }
.legal-toc .toc-head {
  font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--indigo); margin-bottom: var(--s-4);
}
.legal-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.legal-toc li { border-left: 1px solid var(--spine); }
.legal-toc a {
  display: block; padding: 7px 0 7px 14px; margin-left: -1px;
  border-left: 1px solid transparent;
  font-size: 0.86rem; line-height: 1.35; color: var(--mist);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.legal-toc a:hover { color: var(--ink); border-left-color: var(--indigo); }

/* ---- the document itself ---- */
.prose { max-width: 76ch; }
.prose > * + * { margin-top: var(--s-5); }

.prose h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.95rem); line-height: 1.15;
  margin-top: var(--s-9); padding-top: var(--s-6);
  border-top: 1px solid var(--spine);
  scroll-margin-top: 88px;
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 {
  font-size: var(--t-h3); margin-top: var(--s-7); color: var(--ink);
  scroll-margin-top: 88px;
}
.prose .sec-n {
  font-family: var(--font-mono); font-weight: 400; color: var(--indigo);
  letter-spacing: 0.02em; margin-right: 0.55em; font-size: 0.72em;
}
.prose h3 .sec-n { font-size: 0.8em; }

/* the anchor affordance stays out of the way until the heading is hovered */
.prose .anchor {
  float: left; margin-left: -1.1em; width: 1.1em;
  font-family: var(--font-mono); color: var(--indigo); opacity: 0;
  transition: opacity .2s var(--ease);
}
.prose h2:hover .anchor, .prose h3:hover .anchor, .prose .anchor:focus { opacity: 0.8; }

.prose p { color: var(--ink-dim); }
.prose a {
  color: var(--indigo-bright);
  border-bottom: 1px solid color-mix(in srgb, var(--indigo) 42%, transparent);
  transition: border-color .2s var(--ease);
}
.prose a:hover { border-bottom-color: var(--indigo-bright); }
.prose code {
  font-family: var(--font-mono); font-size: 0.82em; color: var(--indigo-bright);
  background: var(--substrate-2); border: 1px solid var(--spine);
  border-radius: var(--radius-sm); padding: 1px 6px;
}

/* lists carry the same indigo marker as the .domains lists on the homepage */
.prose ul { list-style: none; margin: 0; padding: 0; }
.prose ul li {
  position: relative; padding-left: var(--s-5); color: var(--ink-dim);
}
.prose ul li + li { margin-top: var(--s-3); }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: 0.68em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--indigo); opacity: 0.75;
}
.prose ol { margin: 0; padding: 0; list-style: none; counter-reset: clause; }
.prose ol li {
  position: relative; padding-left: var(--s-6); color: var(--ink-dim);
}
.prose ol li + li { margin-top: var(--s-3); }
.prose ol li::before {
  counter-increment: clause; content: counter(clause, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--indigo);
  letter-spacing: 0.04em;
}

/* the "in short" summary reads as a panel, like .fact on the homepage */
.prose blockquote {
  margin: var(--s-6) 0 0; padding: var(--s-6) var(--s-7);
  background: var(--substrate); border: 1px solid var(--spine);
  border-radius: var(--radius); position: relative; overflow: hidden;
}
.prose blockquote::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(var(--indigo), transparent);
}
.prose blockquote p { color: var(--ink); font-size: 1.02rem; }
.prose blockquote strong { color: var(--indigo-bright); }

/* tables reuse the hairline-grid treatment from .tiers */
.table-wrap {
  border: 1px solid var(--spine); border-radius: var(--radius);
  overflow-x: auto; background: var(--spine);
}
.prose table { border-collapse: collapse; width: 100%; min-width: 460px; background: var(--void-2); }
.prose th, .prose td {
  text-align: left; vertical-align: top; padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--spine); border-right: 1px solid var(--spine);
  font-size: 0.95rem; line-height: 1.5;
}
.prose th:last-child, .prose td:last-child { border-right: 0; }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose th {
  font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--indigo); font-weight: 400;
  background: color-mix(in srgb, var(--substrate) 70%, transparent);
  white-space: nowrap;
}
.prose td { color: var(--ink-dim); }
.prose td strong { color: var(--ink); }

.prose hr {
  border: 0; height: 1px; margin: var(--s-7) 0;
  background: linear-gradient(90deg, var(--spine), transparent);
}

/* ---- responsive ---- */
@media (max-width: 1080px) {
  .legal-grid { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .stamp { max-width: 520px; }
  .legal-grid { grid-template-columns: 1fr; }
  .legal-toc {
    position: static; border: 1px solid var(--spine); border-radius: var(--radius);
    padding: var(--s-5) var(--s-6); background: var(--substrate);
  }
  .legal-toc ol { columns: 2; column-gap: var(--s-6); }
  .legal-toc li { break-inside: avoid; }
}
@media (max-width: 680px) {
  .legal-toc ol { columns: 1; }
  .stamp-list li { grid-template-columns: 1fr; gap: 2px; }
  .prose { max-width: none; }
  .prose .anchor { display: none; }
}

/* ---- print: legal documents get printed and filed ---- */
@media print {
  .nav, .legal-toc, .legal-actions, .foot, .skip-link, .hero-grid, .hero-glow { display: none !important; }
  body { background: #fff; color: #000; }
  .prose p, .prose td, .prose ul li, .prose ol li { color: #000; }
  .prose a { color: #000; border-bottom: 0; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  .prose h2 { page-break-after: avoid; border-top-color: #999; }
  .prose table, .prose blockquote, .table-wrap { page-break-inside: avoid; }
  .prose table { background: #fff; }
  .prose th { color: #000; background: #eee; }
  .stamp, .prose blockquote, .table-wrap { border-color: #999; background: #fff; }
  .stamp-list .stamp-key, .prose .sec-n, .prose ul li::before, .prose ol li::before { color: #000; }
}