/*
 * Plarma landing — legal document pages (Privacy Policy / Terms and Conditions).
 *
 * Depends on the design tokens in styles.css (:root custom properties) and the
 * base/nav/footer rules in main.css - both MUST be linked before this file.
 * This sheet only adds the typography needed for long-form legal text: the
 * draft-status banner, the table of contents, and tables/lists inside prose.
 */

.legal-main {
  padding: 40px 0 84px;
}

.legal-wrap {
  max-width: 860px;
}

/* ============ Draft banner ============ */
/* Deliberately loud - these documents are not final and must not read as a
   finished publication. Do not tone this down while placeholders remain. */
.draft-banner {
  background: #fff8e1;
  border: 1px solid #f0c33c;
  border-left: 5px solid var(--pl-warning);
  border-radius: var(--pl-radius);
  padding: 20px 24px;
  margin-bottom: 32px;
  color: #6b4e00;
  font-size: 0.95rem;
  line-height: 1.65;
}

.draft-banner p {
  margin-bottom: 10px;
}

.draft-banner ul {
  margin: 0 0 10px 22px;
}

.draft-banner li {
  margin-bottom: 6px;
}

.draft-banner li:last-child,
.draft-banner p:last-child {
  margin-bottom: 0;
}

.draft-banner strong {
  color: #4a3800;
}

.draft-banner code {
  background: rgba(0, 0, 0, .06);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.9em;
}

/* ============ Document card ============ */
.legal-doc {
  background: var(--pl-surface);
  border-radius: var(--pl-radius-lg);
  box-shadow: var(--pl-elevation);
  padding: 44px 48px;
}

@media (max-width: 640px) {
  .legal-doc {
    padding: 30px 22px;
  }
}

.legal-doc h1 {
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  margin-bottom: 10px;
}

.legal-meta {
  color: var(--pl-text-muted);
  font-size: 0.92rem;
  margin-bottom: 28px;
}

.legal-meta p {
  margin-bottom: 2px;
}

/* ============ Table of contents ============ */
.legal-toc {
  background: var(--pl-bg);
  border-radius: var(--pl-radius);
  padding: 20px 24px;
  margin-bottom: 44px;
}

.legal-toc h2 {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--pl-text-muted);
  margin-bottom: 14px;
}

.legal-toc ol {
  columns: 2;
  column-gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

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

.legal-toc li {
  break-inside: avoid;
  margin-bottom: 4px;
}

.legal-toc a {
  color: var(--pl-text);
  font-size: 0.92rem;
  display: inline-block;
  padding: 2px 0;
}

.legal-toc a:hover {
  color: var(--pl-primary);
}

/* ============ Prose ============ */
.legal-doc h2 {
  font-size: 1.35rem;
  margin: 40px 0 14px;
  scroll-margin-top: 84px;
}

.legal-doc h2:first-of-type {
  margin-top: 0;
}

.legal-doc h3 {
  font-size: 1.05rem;
  margin: 22px 0 10px;
  scroll-margin-top: 84px;
}

.legal-doc p {
  margin-bottom: 14px;
}

.legal-doc ul,
.legal-doc ol {
  margin: 0 0 14px 22px;
}

.legal-doc li {
  margin-bottom: 7px;
}

.legal-doc a {
  color: var(--pl-primary);
  text-decoration: underline;
}

.legal-doc a:hover {
  color: var(--pl-primary-light);
}

.legal-doc code {
  background: var(--pl-bg-2);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.88em;
}

.legal-doc strong {
  color: var(--pl-ink);
}

/* ============ Tables ============ */
/* Long tables (permission scopes, retention periods, etc.) scroll instead of
   squeezing the whole page on narrow viewports. */
.table-wrap {
  overflow-x: auto;
  margin: 0 0 20px;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--pl-radius-sm);
  border: 1px solid var(--pl-bg-2);
}

.legal-doc table {
  border-collapse: collapse;
  width: 100%;
  min-width: 460px;
  font-size: 0.9rem;
}

.legal-doc th,
.legal-doc td {
  border-bottom: 1px solid var(--pl-bg-2);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}

.legal-doc th {
  background: var(--pl-bg);
  font-weight: 600;
  white-space: nowrap;
}

.legal-doc tr:last-child td {
  border-bottom: none;
}