/* ---------------------------------------------------------------------------
   /privacy and /terms.

   Long-form documents, which the rest of the site has none of - every other
   page is cards and grids. Two things make them readable: a measure that stops
   at about 68 characters, and a contents list that is a sticky rail on a wide
   screen and a block of chips on a phone. No JavaScript; the rail is position:
   sticky and the chips are the same <ol> with different rules on it.

   Loaded per page through the layout's $pageCss hook, so the 40-odd rules here
   are not carried by the other fifty pages that never use them.
--------------------------------------------------------------------------- */

/* 912px, not the 1180px wrap. `ch` is the advance of the "0" glyph, which in
   Inter is about 10px at 16px - but the average character is 7.8px, so the
   `68ch` this used to carry measured out at 87 characters a line, not 68.
   Measured properly (median of every full line in the document): 232 rail + 56
   gap + 576 body + 48 padding = 912, which puts the body at about 74. Capping
   the grid rather than only the body also centres the pair, instead of hanging
   them off the left edge with 268px of dead wrap beside them. */
.legal-wrap {
  display: grid;
  grid-template-columns: 232px minmax(0, 36rem);
  gap: 56px;
  align-items: start;
  max-width: 912px;
}

/* ------------------------------------------------------------ contents rail */
/* The height cap is not decoration. The terms rail is 469px tall and sticks at
   96px, so on any viewport under ~565px - a laptop with the browser
   half-height, a phone in landscape - its last entries sat below the fold, and
   because it is sticky, scrolling the page could never bring them back. */
.legal-toc {
  position: sticky; top: calc(var(--header-h) + 24px);
  max-height: calc(100vh - var(--header-h) - 48px);
  overflow-y: auto; overscroll-behavior: contain;
}
.legal-toc h2 {
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px;
}
.legal-toc ol { list-style: none; display: flex; flex-direction: column; gap: 1px; }
.legal-toc a {
  display: block; padding: 7px 12px; border-radius: 8px;
  font-size: .88rem; line-height: 1.35; color: var(--body); text-decoration: none;
  border-left: 2px solid var(--line);
}
.legal-toc a:hover { background: var(--white); color: var(--ink); border-left-color: var(--lime); }

/* --------------------------------------------------------------- the document */
.legal-body { max-width: 68ch; }

/* The lede card. Every clause below it in one breath, for the majority who will
   not read the rest - so it has to be true on its own, not a friendly gloss. */
.legal-summary {
  background: var(--white); border: 1px solid var(--line-2); border-left: 3px solid var(--lime);
  border-radius: var(--radius); padding: 26px 28px; margin-bottom: 40px;
}
.legal-summary h2 { font-size: 1.05rem; margin-bottom: 12px; }
.legal-summary ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.legal-summary li { display: flex; gap: 10px; font-size: .95rem; color: var(--body); line-height: 1.6; }
.legal-summary svg { width: 16px; height: 16px; color: var(--lime-700); flex: none; margin-top: 4px; }

/* No scroll-margin-top here. `html` already carries
   `scroll-padding-top: calc(var(--header-h) + 16px)`, and the two ADD: with
   both set, a contents link landed its heading 180px down the viewport behind
   a 73px header, leaving about 107px of dead space above the thing you just
   asked to see. The site-wide rule is the right one and it already works. */
.legal-section + .legal-section { margin-top: 40px; }
/* The rail cannot show where you are without JavaScript, but it can at least
   confirm where you just asked to go. :target costs nothing and survives a
   shared link landing mid-document. */
.legal-section:target > h2 { border-bottom-color: var(--lime); }
.legal-section > h2 {
  font-size: 1.28rem; margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.legal-section h3 {
  font-size: 1rem; margin: 26px 0 8px; color: var(--ink);
}
.legal-body p { color: var(--body); line-height: 1.75; margin-bottom: 14px; }
.legal-body p:last-child { margin-bottom: 0; }
.legal-body a:not(.btn) { color: var(--navy-700); text-decoration: underline; text-underline-offset: 2px; }
.legal-body a:not(.btn):hover { color: var(--lime-700); }
/* An explicit class rather than `ul:not(.legal-summary ul)`. The summary card
   is inside .legal-body and wants none of this, and a :not() holding a
   descendant combinator is Selectors 4 - supported now, but there is no reason
   to spend it on something a class name says more plainly. */
.legal-list { list-style: none; margin: 0 0 16px; }
.legal-list > li {
  position: relative; padding-left: 20px; margin-bottom: 9px;
  color: var(--body); line-height: 1.7;
}
.legal-list > li::before {
  content: ""; position: absolute; left: 2px; top: .68em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--lime);
}

/* A definition-style row for "what is collected / why". Reads better than a
   table, and unlike a table it does not need a horizontal scroller on a phone. */
.legal-facts { display: flex; flex-direction: column; gap: 0; margin: 4px 0 16px; }
.legal-facts > div {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 4px 24px;
  padding: 13px 0; border-top: 1px solid var(--line);
}
.legal-facts > div:last-child { border-bottom: 1px solid var(--line); }
.legal-facts dt { font-weight: 600; color: var(--ink); font-size: .92rem; }
.legal-facts dd { color: var(--body); font-size: .92rem; line-height: 1.65; }

/* The date, and the sibling-document link that ends both pages. */
.legal-updated {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px; padding: 7px 14px; border-radius: 100px;
  background: rgba(255,255,255,.1); color: #C8D6E4; font-size: .82rem;
}
.legal-updated svg { width: 14px; height: 14px; color: var(--lime); flex: none; }

/* Written as a space-between row, it never was one: the paragraph took the
   full measure, so the button always wrapped underneath with a 14px gap and
   both `justify-content` and `align-items` were dead at every width from 320 to
   1440. A two-line paragraph with a CTA jammed 14px under it reads as an
   accident. Commit to the stack instead. */
.legal-foot {
  margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
}
.legal-foot p { margin: 0; font-size: .92rem; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 1024px) {
  /* The rail has nowhere to sit, so the contents becomes a block of chips above
     the document. Same list, same order, same anchors. */
  /* Cap the grid, not just the body, so the contents card and the document
     share an edge. Without a cap the body inherits the 1180px wrap and runs to
     about 130 characters a line at 1024; at 820px (the site's .wrap-narrow) it
     is still 91, and 720px is 86 - all measured as the median full line in the
     document, which is the only number that means anything. 640px puts it at
     about 76. */
  .legal-wrap { grid-template-columns: 1fr; gap: 32px; max-width: 640px; }
  .legal-toc {
    position: static; background: var(--white); border: 1px solid var(--line-2);
    border-radius: var(--radius); padding: 20px 22px;
  }
  .legal-toc ol { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .legal-toc a {
    border: 1px solid var(--line-2); border-left-width: 1px; border-radius: 100px;
    /* 7px of padding gave a 35px pill at every width it appeared, including 390
       - the one control these pages add, and the one that missed 44px. Padding
       alone still landed at 41 on a 14px font, so state the floor instead of
       computing it and hoping. */
    padding: 10px 16px; min-height: 44px; background: var(--paper);
    display: flex; align-items: center;
  }
  .legal-toc a:hover { border-color: var(--navy-900); border-left-color: var(--navy-900); }
  .legal-body { max-width: none; }
}

@media (max-width: 640px) {
  /* Label above value: at 390px a 190px label column leaves 130px for the
     answer, which wraps every entry to four or five lines. */
  .legal-facts > div { grid-template-columns: 1fr; gap: 3px; padding: 12px 0; }
  .legal-summary { padding: 22px 20px; }
  .legal-section > h2 { font-size: 1.15rem; }
  .legal-foot { flex-direction: column; align-items: stretch; }
  .legal-foot .btn { width: 100%; }
}

/* Below ~460px the pills stop working. Measured on /terms, whose labels are the
   longer set: 600px packs them into 5 rows with nothing orphaned, 430 gives 7
   rows with one loner - but 390, the commonest phone width there is, gives TEN
   rows, SEVEN of them a single ragged pill with 150-220px of dead space beside
   it. At that point it is not a chip cloud, it is a badly set list. So set it as
   a list: the same treatment the desktop rail uses, which also gets the 44px
   row height for free. /privacy survives 390 on its own (shorter labels, 5 rows
   of 2), but the two pages should not disagree about what their contents look
   like. */
@media (max-width: 460px) {
  .legal-toc { padding: 16px 14px; }
  .legal-toc ol { flex-direction: column; gap: 1px; }
  .legal-toc a {
    border: 0; border-left: 2px solid var(--line); border-radius: 0 8px 8px 0;
    background: transparent; padding: 10px 12px; min-height: 44px;
  }
  .legal-toc a:hover { background: var(--paper); border-left-color: var(--lime); }
}