/* ==========================================================================
   UBM: /privacy (members spec 13). The notice is a document, so the page is
   built for reading: a contents list beside the text on a wide screen
   (sticky, like the editorial splits elsewhere), above it on a phone, and the
   text in the site's .prose measure. Numbers in gold, as the lifecycle and
   the about page count. Tokens and logical properties only, so the Arabic
   page mirrors by itself.
   ========================================================================== */

/* "Last updated", under the lead. */
.legal__updated {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  border-inline-start: 2px solid var(--gold);
  padding-inline-start: var(--sp-3);
}

/* Addresses, phone numbers and cookie names stay in one left-to-right piece. */
.legal bdi { unicode-bidi: isolate; }

/* Seen only in Edit pages while the notice is hidden: why, and what is left. */
.legal-draft {
  margin-block-end: var(--sp-8);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-strong);
  background: color-mix(in srgb, var(--c-gold-500) 10%, var(--surface-sunken));
  border-inline-start: 2px solid var(--gold);
  border-radius: var(--r-sm);
}

/* --------------------------------------------------------------------------
   Contents and text
   -------------------------------------------------------------------------- */
@media (min-width: 62rem) {
  .legal-split { grid-template-columns: minmax(14rem, 4fr) minmax(0, 8fr); }
}

.legal-toc { display: grid; gap: var(--sp-4); align-content: start; }
.legal-toc__list {
  display: grid;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.legal-toc__link {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: baseline;
  padding-block: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--d-fast) var(--e-out);
}
.legal-toc__link:hover { color: var(--accent-text); }
.legal-toc__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-2xs);
  color: var(--c-gold-600);
  font-variant-numeric: tabular-nums;
}

/* On a phone the list sits above the text: two columns where they fit, and
   a rule to close it off. */
@media (max-width: 61.99rem) {
  .legal-toc { padding-block-end: var(--sp-6); border-block-end: var(--bw) solid var(--line); }
  .legal-toc__list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); column-gap: var(--sp-6); }
  .legal-toc__link { padding-block: var(--sp-1); }
}

.legal-text { display: grid; min-inline-size: 0; }

.legal-sec {
  display: grid;
  gap: var(--sp-4);
  padding-block: var(--sp-8);
  border-block-start: var(--bw) solid var(--line);
  scroll-margin-block-start: calc(var(--header-h) + var(--sp-5));
}
.legal-sec:first-child { padding-block-start: 0; border-block-start: 0; }
.legal-sec:last-child { padding-block-end: 0; }

.legal-sec__title {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: baseline;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  color: var(--text-strong);
}
.legal-sec__num {
  font-size: var(--fs-sm);
  color: var(--c-gold-600);
  font-variant-numeric: tabular-nums;
}
.legal-sec__body { padding-inline-start: 2.75rem; max-inline-size: calc(var(--page-text) + 2.75rem); }
@media (max-width: 35.99rem) {
  .legal-sec__title { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .legal-sec__body { padding-inline-start: 0; }
}

/* --------------------------------------------------------------------------
   The cookie table: a table on a wide screen, one block per cookie on a phone
   -------------------------------------------------------------------------- */
.legal-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
.legal-table th,
.legal-table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: start;
  vertical-align: top;
  border-block-end: var(--bw) solid var(--line);
}
.legal-table thead th {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-faint);
  border-block-end-color: var(--line-strong);
}
.legal-table th:first-child,
.legal-table td:first-child { padding-inline-start: 0; }
.legal-table tbody th { font-weight: 600; color: var(--text-strong); }
/* Cookie names: monospace, left to right, one per line, never broken. */
.legal-table__name {
  display: block;
  inline-size: fit-content;
  max-inline-size: 100%;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
}
[dir="rtl"] .legal-table__name { text-align: end; }
.legal-table td:last-child { white-space: nowrap; color: var(--text-muted); }

@media (max-width: 40rem) {
  .legal-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .legal-table tr { display: grid; gap: var(--sp-2); padding-block: var(--sp-4); border-block-end: var(--bw) solid var(--line); }
  /* Block, not grid: an address or a cookie name inside the text must stay
     on its line, not become an item of its own. */
  .legal-table th,
  .legal-table td { display: block; padding: 0; border: 0; }
  .legal-table td:last-child { white-space: normal; }
  .legal-table [data-label]::before {
    content: attr(data-label);
    display: block;
    margin-block-end: var(--sp-1);
    font-family: var(--font-sans);
    font-size: var(--fs-3xs);
    font-weight: 600;
    letter-spacing: var(--tr-eyebrow);
    text-transform: uppercase;
    color: var(--text-faint);
  }
}