/* Long-form document styling for the privacy policy. Optimised for reading a
   legal page on a phone: one measured column, generous leading, and tables
   that stay legible rather than being squeezed into four narrow columns. */

/* The skip link moves focus to <main tabindex="-1">. Suppress its focus ring:
   a 2px outline around the entire page is noise, and the visible result of
   the skip is the scroll plus the next Tab landing inside the content. */
main:focus { outline: none; }

.doc {
  max-width: 720px;                /* ~75ch at this size - a comfortable measure */
  margin: 0 auto;
  padding: clamp(32px,5vh,64px) var(--ae-space-xl) clamp(56px,8vh,96px);
}

.doc__head { margin-bottom: clamp(32px,4vh,48px); }
.doc h1 {
  font-family: var(--ae-serif);
  font-size: clamp(32px,5vw,48px);
  line-height: 1.1; letter-spacing: -.02em;
  margin: 0 0 var(--ae-space-md);
}
.doc__meta { color: var(--ae-text-dim); font-size: 15px; margin: 0; }

/* A short plain-language box above the formal text. A reviewer or a user who
   reads only one thing should read this one. */
.doc__tldr {
  margin: clamp(24px,3vh,32px) 0 0;
  padding: var(--ae-space-lg) var(--ae-space-xl);
  border-radius: var(--ae-radius-card);
  background: color-mix(in srgb, var(--ae-card) 60%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
          backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: inset 0 0 0 1px var(--ae-hairline);
}
.doc__tldr p { margin: 0 0 var(--ae-space-sm); }
.doc__tldr p:last-child { margin-bottom: 0; }

.doc h2 {
  font-family: var(--ae-serif);
  font-size: clamp(23px,2.8vw,30px);
  line-height: 1.2; letter-spacing: -.015em;
  margin: clamp(40px,5vh,60px) 0 var(--ae-space-md);
  padding-top: var(--ae-space-lg);
  border-top: 1px solid var(--ae-hairline);
}
.doc h3 {
  font-size: 17px; font-weight: 650;
  margin: var(--ae-space-xl) 0 var(--ae-space-sm);
}
.doc p, .doc li { line-height: 1.65; }
.doc p { margin: 0 0 var(--ae-space-md); }
.doc ul { margin: 0 0 var(--ae-space-md); padding-left: 1.25em; }
.doc li { margin-bottom: 6px; }
.doc strong { font-weight: 650; }
/* purple-600, not --ae-cta: that token is tuned for white text ON indigo
   (4.73:1 that way round), but as indigo text on the light page it is only
   4.28:1. purple-600 gives 6.90:1. */
.doc a { color: var(--ae-purple-600); text-decoration: underline; text-underline-offset: 2px; }
.doc a:hover { text-decoration-thickness: 2px; }

/* Tables: on a phone a four-column table is unreadable, so each row becomes
   its own labelled block via the data-label attributes in the markup. */
.doc table {
  width: 100%; border-collapse: collapse;
  margin: 0 0 var(--ae-space-lg); font-size: 15px;
}
.doc th, .doc td {
  text-align: left; padding: 10px var(--ae-space-md) 10px 0;
  border-bottom: 1px solid var(--ae-hairline); vertical-align: top;
}
.doc th { font-weight: 650; font-size: 13px; letter-spacing: .02em;
          text-transform: uppercase; color: var(--ae-text-dim); }

@media (max-width: 620px) {
  .doc table, .doc tbody, .doc tr, .doc td { display: block; width: 100%; }
  .doc thead { display: none; }
  .doc tr {
    padding: var(--ae-space-md) 0;
    border-bottom: 1px solid var(--ae-hairline);
  }
  .doc td { border: 0; padding: 2px 0; }
  .doc td::before {
    content: attr(data-label) ": ";
    font-weight: 650; color: var(--ae-text-dim);
  }
  /* The first cell is the row's subject, so it reads as a heading, not a pair. */
  .doc td:first-child { font-weight: 650; padding-bottom: 6px; }
  .doc td:first-child::before { content: none; }
}

/* "Never collected" lists carry the most weight on this page, so they get a
   marker that reads as a negative rather than a neutral bullet. */
.doc .nope { list-style: none; padding-left: 0; }
.doc .nope li { position: relative; padding-left: 1.6em; }
.doc .nope li::before {
  content: "\00d7"; position: absolute; left: .35em; top: -.05em;
  color: var(--ae-purple-600); font-weight: 700;
}

.doc__backlink { margin-top: clamp(48px,6vh,72px); padding-top: var(--ae-space-lg);
                 border-top: 1px solid var(--ae-hairline); font-size: 15px; }