/* The legal and support pages (src/layouts/Legal.astro). Brand tokens and faces only; no inline style (CSP).
   A readable measure (--measure, 642.8px), headings in Gabarito, body in Hanken Grotesk, the dates line and every
   table cell's figures in DM Mono with tabular figures (CLAUDE.md: figures in data positions). Every link reaches
   44px (spec §6.9) without moving the text, as the homepage's in-sentence links do. */
.legal{ padding-block:var(--s5) var(--s6); }
.legal:focus{ outline:none; }
.legal__doc{ max-width:var(--measure); }
.legal__h1{ font:900 var(--fs-h3)/var(--lh-head) var(--display); letter-spacing:-.03em; text-wrap:balance; }
@media (min-width:760px){ .legal__h1{ font-size:var(--fs-display); } }
.legal__dates{ margin-top:var(--s2); font:400 var(--fs-micro)/1.6 var(--mono); letter-spacing:.06em; color:var(--muted);
  font-variant-numeric:tabular-nums; }
.legal__dates strong{ font-weight:500; color:var(--ink); }
.legal__draft{ margin-top:var(--s3); padding:var(--s2) var(--s3); border:1.5px dashed var(--amber-text); border-radius:var(--r1);
  background:var(--butter-soft); color:var(--ink); }
.legal__body{ margin-top:var(--s4); overflow-wrap:break-word; }
.legal__body > * + *{ margin-top:var(--s3); }
.legal__body p, .legal__body li{ text-wrap:pretty; }
.legal__body strong{ font-weight:700; }
.legal__body code{ font:400 .92em/1 var(--mono); padding:.1em .3em; border-radius:4px; background:var(--surface-2); color:var(--ink); }
.legal__h2, .legal__h3{ position:relative; display:flex; align-items:flex-start; gap:var(--s1); scroll-margin-top:var(--s3); }
.legal__h2{ margin-top:var(--s5) !important; padding-top:var(--s3); border-top:1px solid var(--line);
  font:700 var(--fs-lead)/1.3 var(--display); letter-spacing:-.015em; }
@media (min-width:760px){ .legal__h2{ font-size:var(--fs-h3); } }
.legal__h3{ margin-top:var(--s4) !important; font:700 var(--fs-body)/1.4 var(--display); letter-spacing:-.005em; }
.legal__ht{ flex:0 1 auto; min-width:0; text-wrap:balance; padding-top:calc((44px - 1lh) / 2); }
/* the heading's own link: a 44px square holding a "#", quiet until hovered or focused */
.legal__anchor{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  margin-left:auto; font:400 var(--fs-body)/1 var(--mono); color:var(--muted); text-decoration:none; border-radius:var(--r1); }
.legal__anchor:hover{ color:var(--brand-deep); text-decoration:underline; }
@media (min-width:760px){ .legal__anchor{ margin-left:0; } }
.legal__list{ padding-left:1.3em !important; }
.legal__list > li + li{ margin-top:var(--s1); }
.legal__list > li::marker{ color:var(--muted); }
ol.legal__list > li::marker{ font-family:var(--mono); }
.legal__list .legal__list{ margin-top:var(--s1); }
/* a block quote (privacy §1.4a's "in short" box): a keyline and the second surface, ink text, no tint */
.legal__quote{ margin-inline:0; padding:var(--s3); border-left:3px solid var(--line); border-radius:0 var(--r1) var(--r1) 0;
  background:var(--surface-2); }
.legal__quote > * + *{ margin-top:var(--s2); }
/* in-sentence links: 44px tall by padding, pulled back by the same negative margin so the lines don't move */
.legal__a{ --pad:calc((44.5px - 1lh) / 2); display:inline-block; min-width:44px; padding-block:var(--pad); margin-block:calc(-1 * var(--pad));
  overflow-wrap:anywhere; }

/* tables: a keyline grid inside the measure; under 600px each row stacks into a card and each cell shows its column
   head (an aria-hidden label: the screen reader still has the table's own header cells) */
.legal__table{ margin-top:var(--s3); }
.legal__table table{ width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
.legal__table th, .legal__table td{ padding:var(--s2) var(--s3) var(--s2) 0; text-align:left; vertical-align:top; line-height:1.5;
  border-bottom:1px solid var(--line); }
.legal__table th:last-child, .legal__table td:last-child{ padding-right:0; }
.legal__table th{ font:400 var(--fs-micro)/1.5 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  border-bottom-color:var(--ink); }
.legal__lab{ display:none; }
@media (max-width:599.98px){
  .legal__table table, .legal__table tbody, .legal__table tr, .legal__table td{ display:block; width:100%; }
  .legal__table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
  .legal__table tr{ padding-block:var(--s2); border-bottom:1px solid var(--line); }
  .legal__table tr:first-child{ border-top:1px solid var(--ink); }
  .legal__table td{ padding:var(--s1) 0; border:0; }
  .legal__lab{ display:block; margin-bottom:2px; font:400 var(--fs-micro)/1.5 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
}

/* a draft build's placeholders: a tint, a dashed keyline and the square brackets themselves, never colour alone */
mark.ph{ background:var(--butter-soft); color:var(--ink); outline:1.5px dashed var(--amber-text); outline-offset:1px; border-radius:2px;
  padding-inline:.1em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }