/* ===========================================================================
   LazyConMan — document pages (legal, security). Reuses tokens + nav/footer
   from main.css; this adds the readable prose layout.
   =========================================================================== */

.doc {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-xl);
}
.doc__inner {
  max-width: 820px;
}

.doc__head { margin-bottom: var(--space-xl); }
.doc__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-top: var(--space-s);
}
.doc__meta {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-faint);
  margin-top: var(--space-m);
}
.doc__lead {
  margin-top: var(--space-m);
  font-size: var(--step-1);
  color: var(--text-dim);
}

/* Notice / callout */
.notice {
  margin: var(--space-l) 0;
  padding: var(--space-m);
  border: 1px solid color-mix(in srgb, var(--accent-2) 35%, var(--line));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent-2) 8%, var(--surface));
  font-size: var(--step--1);
  color: var(--text-dim);
}
.notice strong { color: var(--text); }
.notice--safe {
  border-color: color-mix(in srgb, var(--signal) 35%, var(--line));
  background: color-mix(in srgb, var(--signal) 8%, var(--surface));
}

/* Table of contents */
.toc {
  margin: var(--space-l) 0;
  padding: var(--space-m) var(--space-l);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  columns: 2;
  column-gap: var(--space-l);
}
.toc p {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  margin-bottom: var(--space-s);
  column-span: all;
}
.toc a {
  display: block;
  padding: 0.3rem 0;
  color: var(--text-dim);
  font-size: var(--step--1);
  break-inside: avoid;
}
.toc a:hover { color: var(--accent); }

/* Prose */
.prose { color: var(--text-dim); }
.prose section { scroll-margin-top: 90px; }
.prose h2 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-s);
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
}
.prose h2 .sec-no {
  font-family: var(--font-mono);
  font-size: 0.6em;
  color: var(--accent);
  margin-right: 0.6rem;
  vertical-align: middle;
}
.prose h3 {
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--text);
  margin-top: var(--space-l);
  margin-bottom: var(--space-xs);
}
.prose p { margin-bottom: var(--space-m); }
.prose ul, .prose ol { margin: 0 0 var(--space-m) 1.3rem; }
.prose ul { list-style: none; }
.prose ul li { position: relative; padding-left: 1.3rem; margin-bottom: 0.5rem; }
.prose ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
}
.prose ol { list-style: decimal; }
.prose ol li { margin-bottom: 0.5rem; padding-left: 0.3rem; }
.prose ol li::marker { color: var(--accent); font-family: var(--font-mono); }
.prose a { color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.prose a:hover { border-bottom-color: var(--accent); }
.prose strong { color: var(--text); }
.prose code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0.1rem 0.4rem;
  color: var(--accent);
}
.prose pre {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: var(--space-m);
  overflow-x: auto;
  margin-bottom: var(--space-m);
  color: var(--text-dim);
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-m);
  font-size: var(--step--1);
}
.prose th, .prose td {
  text-align: left;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line);
  vertical-align: top;
}
.prose th { background: var(--surface-2); color: var(--text); font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }

.doc-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--text-dim);
}
.doc-back:hover { color: var(--accent); }
.doc-back-wrap { margin-top: var(--space-xl); }

/* doc nav keeps its CTA right-aligned at all widths */
.nav__cta--right { margin-left: auto; }

@media (max-width: 640px) {
  .toc { columns: 1; }
}