/* ============================================================
   PRIVACY — STYLES
   ------------------------------------------------------------
   Page styles for the Privacy Policy (/privacy) and its immutable frozen
   versions (/privacy/<version>). They are the same page, so they share this
   file.

   Page-specific CSS, linked by the page AFTER styles/styles.css (see
   docs/frontend-separation.md). Only the Data Retention table is styled
   here: the rest of the document is legal prose and inherits the shared
   modules.
   ============================================================ */

/* ------------------------------------------------------------
   Data Retention table (section 13)
   ------------------------------------------------------------
   The two columns were left to the browser's auto table layout, so the
   label column collapsed to its minimum content width - 43px in a 360px
   viewport, i.e. one character per line - to give the retention text
   everything else. Fixed geometry with an explicit label width keeps the
   columns aligned the same way at every screen size.
   ------------------------------------------------------------ */
.legal-content table {
  width: 100%;
  margin: 1rem 0 0.75rem;
  border-collapse: collapse;
  table-layout: fixed;
  text-align: left;
  font-size: var(--text-sm);
}

.legal-content caption {
  caption-side: top;
  padding-bottom: 0.6rem;
  color: var(--muted);
  text-align: left;
  font-size: var(--text-sm);
}

.legal-content thead th {
  width: 34%;
  padding: 0.6rem 0.85rem;
  background: var(--accent-soft);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  font-weight: 700;
}

.legal-content thead th + th {
  width: auto;
}

.legal-content tbody td {
  padding: 0.7rem 0.85rem;
  color: var(--ink);
  border-top: 1px solid var(--line);
  vertical-align: top;
}

/* The label column reads as the heading of its row. */
.legal-content tbody td:first-child {
  font-weight: 600;
}

/* Close the ruled table on its last row. */
.legal-content tbody tr:last-child td {
  border-bottom: 1px solid var(--line);
}

/* ------------------------------------------------------------
   Narrow screens: one block per row
   ------------------------------------------------------------
   A two-column label/value table whose values are whole paragraphs cannot
   stay readable on a phone - even with the label fixed, the retention text
   would be a few words per line. Below 640px each row becomes its own
   bordered block: label on top, retention text underneath.

   The header row stays in the document (clipped rather than removed) so
   screen readers still announce "Data" and "Retention applied" for every
   cell in the stack.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .legal-content table,
  .legal-content caption,
  .legal-content tbody,
  .legal-content tr,
  .legal-content td {
    display: block;
    width: auto;
  }

  .legal-content thead {
    position: absolute;
    display: block;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .legal-content tbody tr {
    padding: 0.7rem 0.85rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
  }

  .legal-content tbody tr + tr {
    margin-top: 0.6rem;
  }

  .legal-content tbody td {
    padding: 0;
    border-top: 0;
  }

  .legal-content tbody td:first-child {
    margin-bottom: 0.25rem;
  }

  .legal-content tbody tr:last-child td {
    border-bottom: 0;
  }
}