/* Long-form legal prose (/privacy/). One job: make a page nobody wants to
   read actually readable. */

.legal {
  padding-top: clamp(140px, 8rem + 6vw, 240px);
  padding-bottom: clamp(80px, 4rem + 6vw, 160px);
}

.legal__head { max-width: 46ch; }
.legal__lead { margin-top: 24px; }

.legal__updated {
  margin-top: 18px;
  font-family: var(--font-secondary);
  font-size: var(--p2);
  color: var(--text-muted);
}

/* ---------- the accordion ----------
   One <details> per section, a hairline between each: the row carries the
   heading and a chevron, the body drops out underneath. */

.legal__body {
  margin-top: clamp(56px, 5vw, 96px);
  /* The measure is the whole point. Full-width legal text on a 1240px
     container is a wall nobody finishes; ~72 characters is a column the eye
     can return from. */
  max-width: 72ch;
  /* The line above the first row; every row draws its own below. */
  border-top: 1px solid var(--white-100);
}

/* min-width:0 is load-bearing, and not subtly. A flex/grid item defaults to
   min-width:auto — "never shrink below my content" — so .legal__table's
   min-width:620px would propagate up and render the whole column 620px wide
   inside a 375px viewport, clipping every paragraph on the page rather than
   just the table. This lets .legal__tablewrap's overflow-x do its job. */
.legal__section {
  min-width: 0;
  border-bottom: 1px solid var(--white-100);
}

/* The row. list-style/::-webkit-details-marker kill the browser's own
   triangle so the chevron on the right is the only affordance. */
.legal__heading {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: clamp(18px, 2vw, 24px) 0;
  font-family: var(--font-body);
  font-size: var(--h6);
  font-weight: var(--w-medium);
  line-height: var(--lh-m);
  color: var(--white);
  cursor: pointer;
  list-style: none;
  transition: color .25s;
}

.legal__heading::-webkit-details-marker { display: none; }
.legal__heading:hover { color: var(--primary-text); }

/* The heading text takes the slack so the chevron is pushed to the edge. */
.legal__headingtext { flex: 1; min-width: 0; }

/* Same numbered motif as .step on the work and thank-you pages, so the shape
   is already familiar rather than a new invention for this page. In a
   sixteen-row accordion it also does real work: it is how you know where you
   are once most of the page is folded away. */
.legal__num {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: var(--p2);
  color: var(--primary-text);
  font-variant-numeric: tabular-nums;
}

.legal__chev {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform .3s var(--ease), color .25s;
}

.legal__section[open] > .legal__heading > .legal__chev { transform: rotate(180deg); }
.legal__heading:hover .legal__chev { color: var(--white); }

.legal__panel { padding-bottom: clamp(20px, 2.5vw, 32px); }

.legal__p,
.legal__list {
  font-family: var(--font-secondary);
  font-size: var(--p1);
  line-height: var(--lh-2xl);
  color: var(--text-muted);
  margin: 0 0 16px;
}

.legal__p:last-child,
.legal__list:last-child { margin-bottom: 0; }

.legal__list {
  /* tokens.css strips list markers site-wide, which is right for navigation
     and wrong here — without them these read as loose paragraphs rather than
     as a list of distinct commitments. Put them back for this page only. */
  list-style: disc;
  padding-left: 22px;
  display: grid;
  gap: 10px;
}

.legal__list li::marker { color: var(--primary-text); }

/* .hl is the site's emphasis mark; in body copy it needs to read as emphasis
   rather than decoration, so it lifts to full white instead of colouring. */
.legal__p .hl,
.legal__list .hl {
  color: var(--white);
  font-style: normal;
  font-weight: var(--w-medium);
}

.legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  color: var(--white);
  background: var(--white-100);
  border-radius: var(--radius-sm);
  padding: .15em .4em;
  /* A long cookie name must be able to break rather than push the column. */
  word-break: break-word;
}

/* ---------- the cookie table ---------- */

.legal__tablewrap {
  margin: 24px 0 16px;
  /* Scrolls inside its own box: four columns will not fit a phone, and the
     page itself must never scroll sideways. */
  overflow-x: auto;
  border: 1px solid var(--white-100);
  border-radius: var(--radius-md);
}

.legal__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-secondary);
  font-size: var(--p2);
  line-height: var(--lh-xl);
  /* Below this the columns collapse into single words per line; the wrapper
     scrolls instead. */
  min-width: 620px;
}

.legal__table th,
.legal__table td {
  text-align: left;
  vertical-align: top;
  padding: 14px 18px;
  border-bottom: 1px solid var(--white-100);
}

.legal__table tr:last-child th,
.legal__table tr:last-child td { border-bottom: 0; }

.legal__table thead th {
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  color: var(--white);
  white-space: nowrap;
  background: rgba(255, 255, 255, .03);
}

.legal__table tbody th { font-weight: var(--w-regular); }
.legal__table tbody td { color: var(--text-muted); }

@media (max-width: 640px) {
  .legal__heading { font-size: var(--p1); gap: 10px; }
}

/* Printed, or saved as a PDF, every section is open — js/interactions.js
   opens them on beforeprint, because whether CSS alone can reveal a closed
   <details> differs between engines and this is not a thing to be nearly
   right about. A notice that prints as sixteen headings and no text is not a
   copy of the notice, and saving one is exactly what somebody does when they
   want a record of what it said on the day they read it. */
@media print {
  .legal__section { break-inside: avoid; }
  .legal__chev { display: none; }
}