@layer pages {
  html:has(.legal) { scroll-padding-block-start: calc(var(--site-bar-h) + var(--s-4)); }

  .legal {
    display: grid;
    grid-template-columns: minmax(0, var(--w-text)) minmax(12rem, 16rem);
    justify-content: center;
    align-items: start;
    gap: var(--s-12);
    max-inline-size: calc(var(--site-w) + 2 * var(--page-gutter));
    margin-inline: auto;
    padding: var(--s-10) var(--page-gutter) var(--s-16);
  }

  .legal__doc { min-inline-size: 0; display: grid; gap: var(--s-6); }

  .legal__head { display: grid; gap: var(--s-2); }

  .legal__title {
    font: var(--t-large-title);
    letter-spacing: var(--t-large-title-track);
    text-wrap: balance;
    hyphens: auto;
    overflow-wrap: anywhere;
  }

  .legal__meta {
    color: var(--label-secondary);
    font: var(--t-subhead);
  }

  .legal__body {
    min-inline-size: 0;
    font: var(--t-body);
    color: var(--label);
    overflow-wrap: anywhere;
  }

  .legal__body > * + * { margin-block-start: var(--s-3); }

  .legal__body h2 {
    margin-block-start: var(--s-10);
    font: var(--t-title-2);
    letter-spacing: var(--t-title-2-track);
    text-wrap: balance;
    scroll-margin-block-start: calc(var(--site-bar-h) + var(--s-4));
  }

  .legal__body h3 {
    margin-block-start: var(--s-6);
    font: var(--t-title-3);
    letter-spacing: var(--t-title-3-track);
  }

  .legal__body h4 { margin-block-start: var(--s-5); font: var(--t-headline); }

  .legal__body p,
  .legal__body li { color: var(--label); }

  .legal__body ul,
  .legal__body ol { padding-inline-start: var(--s-6); }

  .legal__body li + li { margin-block-start: var(--s-1); }
  .legal__body li.task-list-item { list-style: none; }

  .legal__body strong { font-weight: 600; }

  .legal__body a {
    color: var(--accent-text);
    text-decoration: underline;
    text-decoration-color: var(--accent-fill);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }

  .legal__body code {
    padding: 1px var(--s-1);
    border-radius: var(--r-1);
    background: var(--fill);
    font-family: var(--font-numeric);
    font-size: 0.9em;
  }

  .legal__body pre {
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-2);
    background: var(--fill);
    overflow-x: auto;
  }

  .legal__body pre code { padding: 0; background: transparent; }

  .legal__body blockquote {
    margin-inline: 0;
    padding: var(--s-3) var(--s-4);
    border-inline-start: 3px solid var(--accent-fill);
    border-radius: 0 var(--r-2) var(--r-2) 0;
    background: var(--bg-elevated);
    color: var(--label-secondary);
  }

  .legal__body hr { border: 0; border-block-start: 1px solid var(--separator); margin-block: var(--s-8); }

  .legal__table {
    overflow-x: auto;
    border-radius: var(--r-2);
    border: 1px solid var(--separator);
  }

  .legal__body table {
    inline-size: 100%;
    border-collapse: collapse;
    font: var(--t-callout);
  }

  .legal__body th,
  .legal__body td {
    padding: var(--s-2) var(--s-3);
    border-block-end: 1px solid var(--separator);
    text-align: start;
    vertical-align: top;
  }

  .legal__body th { background: var(--bg-elevated); font-weight: 600; }

  .legal__body img { max-inline-size: 100%; block-size: auto; border-radius: var(--r-2); }

  .legal__toc {
    position: sticky;
    inset-block-start: calc(var(--site-bar-h) + var(--s-6));
    display: grid;
    gap: var(--s-2);
    max-block-size: calc(100dvh - var(--site-bar-h) - var(--s-12));
    overflow-y: auto;
  }

  .legal__toc-title {
    font: var(--t-footnote);
    letter-spacing: var(--t-footnote-track);
    color: var(--label-secondary);
  }

  .legal__toc-list {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .legal__toc-list a {
    display: block;
    padding: var(--s-1) var(--s-2);
    border-radius: var(--r-1);
    color: var(--label-secondary);
    font: var(--t-subhead);
    text-decoration: none;
  }

  .legal__toc-list a:hover { background: color-mix(in srgb, var(--fill) 60%, transparent); color: var(--label); text-decoration: none; }

  @media (max-width: 1023px) {
    .legal { grid-template-columns: minmax(0, var(--w-text)); }
    .legal__toc { display: none; }
  }

  @media (max-width: 767px) {
    .legal { padding-block-start: var(--s-6); }
  }

  .legal__body .legal__action a {
    color: var(--button-fg);
    text-decoration: none;
  }

  @media (pointer: coarse) {
    .legal__body .legal__action a { min-block-size: 2.75rem; }
  }
}