/* ==========================================
   TesselBee — legal pages (support, privacy, terms)
   ==========================================
   Long text to be read, not a showcase: one column at a reading measure,
   the table of contents beside it on wide screens, above it on narrow ones.
   Roles only, from tokens.css and styles.css. */

.legal {
  padding-top: calc(72px + var(--space-8));
}

.legal-grid {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 44rem);
  /* The contents run down the left from the title on: sticky, they stay
     beside the text while it scrolls. */
  grid-template-areas:
    "toc head"
    "toc body";
  column-gap: var(--space-8);
  justify-content: center;
}

.legal-head { grid-area: head; margin-bottom: var(--space-7); }
.legal-toc { grid-area: toc; }
.legal-body-text { grid-area: body; }

.legal-kicker {
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-3);
}

.legal h1 {
  font: var(--type-h1);
  letter-spacing: var(--type-h1-tracking);
  color: var(--ink-strong);
  margin-bottom: var(--space-3);
}

.legal-updated {
  font: var(--type-small);
  color: var(--ink-dim);
  margin-bottom: var(--space-5);
}

.legal-todo-note { margin-bottom: var(--space-5); font: var(--type-small); }

.legal-intro p {
  font: var(--type-body-lg);
  color: var(--ink-soft);
}

.legal-intro p + p { margin-top: var(--space-4); }

/* --- Table of contents: sticky beside the text on wide screens --- */
.legal-toc {
  position: sticky;
  top: calc(72px + var(--space-5));
  align-self: start;
  max-height: calc(100vh - 72px - var(--space-7));
  overflow-y: auto;
  font: var(--type-small);
}

.legal-toc-title {
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: var(--space-3);
}

.legal-toc-others { margin-top: var(--space-6); }

.legal-toc ol,
.legal-toc ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.legal-toc a {
  color: var(--ink-soft);
  transition: color var(--duration-fast) var(--ease-out);
}

.legal-toc a:hover { color: var(--ink-strong); }

/* --- The text --- */
.legal-body-text section {
  scroll-margin-top: calc(72px + var(--space-5));
  padding-bottom: var(--space-7);
}

.legal-body-text section + section {
  border-top: 1px solid var(--border);
  padding-top: var(--space-7);
}

.legal-body-text h2 {
  font: var(--type-h2);
  letter-spacing: var(--type-h2-tracking);
  color: var(--ink-strong);
  margin-bottom: var(--space-5);
}

.legal-body-text h3 {
  font: var(--type-h3);
  color: var(--ink-bright);
  margin: var(--space-6) 0 var(--space-3);
}

.legal-body-text p,
.legal-body-text li {
  font: var(--type-body);
  color: var(--ink-body);
}

.legal-body-text p + p,
.legal-body-text p + ul,
.legal-body-text p + ol,
.legal-body-text ul + p,
.legal-body-text ol + p,
.legal-body-text .legal-table + p {
  margin-top: var(--space-4);
}

.legal-body-text ul,
.legal-body-text ol {
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.legal-body-text ul { list-style: disc; }
.legal-body-text li::marker { color: var(--ink-dim); }

.legal a:not(.btn) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.legal a:not(.btn):hover { color: var(--accent-hover); }

.legal a:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Who processes what, why and for how long: wide, so it scrolls on its own
   on a phone instead of widening the page. */
.legal-table {
  overflow-x: auto;
  margin: var(--space-4) 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.legal-table table {
  border-collapse: collapse;
  width: 100%;
  min-width: 36rem;
  font: var(--type-small);
}

.legal-table th,
.legal-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}

.legal-table th {
  font: var(--type-label);
  letter-spacing: var(--type-label-tracking);
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--surface-raised);
}

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

/* A gap the lawyer fills: impossible to miss, impossible to take for text. */
.legal-todo {
  background: color-mix(in srgb, var(--warning) 18%, transparent);
  color: var(--ink-strong);
  outline: 1px dashed var(--warning);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-1);
}

@media (max-width: 960px) {
  .legal { padding-top: calc(72px + var(--space-6)); }

  .legal-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "toc"
      "body";
  }

  .legal-toc {
    position: static;
    max-height: none;
    margin-bottom: var(--space-7);
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
  }

  .legal h1 { font-size: clamp(1.9rem, 7vw, 2.75rem); line-height: 1.15; }
}

/* The audience opt-out: its state, then the one link that flips it. */
.legal-optout {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}