/* The legal pages read the same tokens as the dashboard (see tokens.css),
   so the two surfaces can never drift apart again. */
:root {
  --paper: var(--bg-app);
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border-subtle);
  --forest: var(--bg-surface);
  --copper: var(--accent-text);
  --display: var(--font-display);
  --body: var(--font-sans);
  /* Editorial measure. A legal document is one column of prose, so its width is set by the reading
     measure (68 characters, the top of the comfortable range) instead of by the viewport, and the
     header, the shell and the footer are then all sized from the same three numbers. The old
     740px column ran to about 89 characters a line, which is past the point where the eye loses
     its place on the return sweep. */
  --legal-measure: 68ch;
  --legal-toc: 210px;
  --legal-gap: 68px;
  --legal-gutter: 40px;
  --legal-shell: calc(var(--legal-toc) + var(--legal-gap) + var(--legal-measure) + (var(--legal-gutter) * 2));
}
*, *::before, *::after { box-sizing: border-box; }
html, body { transition: background-color .32s ease, color .22s ease; }
html { scroll-behavior: smooth; scroll-padding-top: 28px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.8 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--copper); text-underline-offset: 4px; text-decoration-thickness: 1px; overflow-wrap: anywhere; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--copper); outline-offset: 5px; border-radius: 2px; }
::selection { background: var(--accent-primary); color: var(--accent-ink); }
.skip-link { position: fixed; top: 12px; left: 16px; padding: 8px 18px; background: var(--paper); z-index: 10; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.legal-header { background: var(--forest); color: var(--ink); border-bottom: 1px solid var(--line); }
.legal-header-inner { max-width: var(--legal-shell); padding: 27px var(--legal-gutter); margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.legal-brand { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font: 750 29px/1 var(--display); text-decoration: none; }
.legal-brand svg { color: var(--copper); flex-shrink: 0; }
.brand-period { color: var(--copper); }
.legal-navigation { display: flex; align-items: center; gap: 30px; font-size: 12px; }
.legal-navigation a { color: var(--muted); text-decoration: none; padding-block: 6px; }
.legal-navigation a[aria-current="page"] { color: var(--copper); text-decoration: underline; text-underline-offset: 9px; text-decoration-color: var(--copper); }
.legal-navigation a:hover { color: var(--ink); }
.legal-navigation a:focus-visible { outline-color: var(--copper); }
.legal-navigation .home-link { padding-inline-start: 28px; border-inline-start: 1px solid var(--line); }
.legal-shell { max-width: var(--legal-shell); margin: auto; padding: 0 var(--legal-gutter); }
.legal-shell:focus { outline: none; }
.legal-hero { padding: 60px 0 40px; border-bottom: 1px solid var(--line); }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; }
h1 { font-size: clamp(38px, 5.5vw, 64px); font-weight: 750; letter-spacing: -.045em; line-height: 1.15; margin: 0 0 22px; }
.legal-intro { max-width: var(--legal-measure); margin: 0; font-size: 18px; line-height: 1.75; color: var(--muted); }
.legal-date { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; color: var(--muted); font-size: 12px; }
.legal-layout { display: grid; grid-template-columns: var(--legal-toc) minmax(0, 1fr); gap: var(--legal-gap); padding-block: 44px 76px; align-items: start; }
.legal-toc { position: sticky; top: 28px; font-size: 12px; padding: 20px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--forest); }
.toc-label { font-weight: 600; margin: 0 0 16px; color: var(--ink); }
.legal-toc ol { list-style: decimal-leading-zero; padding: 0 0 0 23px; margin: 0; }
.legal-toc li { padding: 5px 0 5px 4px; color: var(--muted); }
.legal-toc a { color: var(--muted); text-decoration: none; }
.legal-toc a:hover { color: var(--copper); text-decoration: underline; }
.legal-toc .toc-contact { display: inline-block; margin-top: 24px; color: var(--copper); font-weight: 600; }
.legal-document { min-width: 0; max-width: var(--legal-measure); }
.legal-summary { margin: 0 0 28px; padding: 20px 24px; font-size: 17px; color: var(--ink); background: var(--forest); border: 1px solid var(--line); border-radius: 10px; }
.legal-document section { border-top: 1px solid var(--line); padding-top: 32px; margin-top: 32px; scroll-margin-top: 28px; }
.legal-document section:first-of-type { margin-top: 0; }
h2 { display: flex; align-items: baseline; gap: 16px; font-size: 23px; font-weight: 600; line-height: 1.4; margin: 0 0 20px; letter-spacing: -.025em; }
.section-number { color: var(--copper); font-family: var(--body); font-size: 11px; font-weight: 500; letter-spacing: 0; flex-shrink: 0; }
h3 { font-size: 16px; line-height: 1.5; font-weight: 650; margin: 28px 0 9px; }
.legal-document p { margin: 0 0 17px; }
.legal-document section > p:last-child { margin-bottom: 0; }
.legal-document ul { padding-left: 22px; margin: 0 0 20px; }
.legal-document li { margin-bottom: 11px; padding-left: 4px; }
.legal-document strong { font-weight: 600; }
.legal-document code { font-size: .85em; overflow-wrap: anywhere; background: var(--bg-card-elevated); padding: 2px 5px; border-radius: 4px; font-family: var(--font-mono); }
.legal-callout { background: var(--forest); border-inline-start: 3px solid var(--copper); border-radius: 7px; padding: 22px 25px; margin: 24px 0; }
.legal-callout p:last-child { margin-bottom: 0; }
.legal-next { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--line); padding-top: 26px; margin-top: 44px; }
.legal-next > span { font-size: 12px; color: var(--muted); }
.legal-next a { font-size: 17px; font-weight: 500; text-decoration: none; }
.legal-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; border-top: 1px solid var(--line); max-width: var(--legal-shell); margin: 0 auto; padding: 26px var(--legal-gutter) 38px; color: var(--muted); font-size: 12px; }
@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 180px minmax(0, 1fr); gap: 36px; }
  .legal-header-inner, .legal-shell { padding-inline: 28px; }
  .legal-footer { padding-inline: 28px; }
}
@media (max-width: 680px) {
  body { font-size: 15px; }
  .legal-header-inner { flex-direction: column; align-items: flex-start; padding: 22px 24px; gap: 22px; }
  .legal-navigation { width: 100%; justify-content: space-between; gap: 14px; font-size: 11px; }
  .legal-navigation .home-link { padding-left: 0; border-left: 0; }
  .legal-shell { padding-inline: 24px; }
  .legal-hero { padding-block: 40px 30px; }
  .legal-intro { font-size: 16px; }
  .legal-date { font-size: 11px; }
  .legal-layout { display: block; padding-block: 28px 46px; }
  .legal-toc { position: static; margin-bottom: 30px; padding: 20px; }
  .legal-toc ol { columns: 2; column-gap: 30px; }
  .legal-toc li { break-inside: avoid; }
  .legal-summary { font-size: 16px; }
  h2 { font-size: 21px; gap: 12px; }
  .legal-callout { padding: 18px; }
  .legal-footer { padding-inline: 24px; flex-direction: column; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media print {
  :root { color-scheme: light; --paper: white; --ink: black; --muted: #333; --line: #aaa; --copper: #333; }
  body { background: white; color: black; font-size: 10pt; line-height: 1.5; }
  .legal-header, .legal-toc, .legal-next, .legal-footer, .skip-link { display: none; }
  .legal-shell { max-width: none; padding: 0; }
  .legal-hero { padding: 0 0 20px; }
  h1 { font-size: 30pt; }
  h2 { font-size: 15pt; break-after: avoid; }
  h3 { break-after: avoid; }
  .legal-layout { display: block; padding-top: 20px; }
  .legal-document { max-width: none; }
  .legal-document section { padding-top: 16px; margin-top: 16px; }
  .legal-document a { color: black; }
  .legal-callout { background: none; border-color: #555; }
}