/* (the text size this device chose, Make it yours > Accessibility: the app's own scale, as app.css has it) */
:root {
  --ts: 1;
}
:root[data-text="l"] {
  --ts: 1.125;
}
:root[data-text="xl"] {
  --ts: 1.25;
}

/* Ditto: the legal pages (terms.html, privacy.html).

   Quiet reading pages in the site's own palette: a band of golden-hour sky behind the title
   (blue hour at night, from base.css's sky tokens), then the document on the air below.
   Every colour, radius and font comes from base.css, so light and dark follow the site.
   No scripts and no inline styles: these pages must load under a strict Content Security Policy. */

:root {
  --lg-col: 720px;
  --lg-toc: 236px;
  --lg-ph-bg: color-mix(in srgb, var(--hl) 48%, transparent);
  --lg-ph-edge: color-mix(in srgb, var(--warn) 50%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lg-ph-bg: color-mix(in srgb, var(--hl) 22%, transparent);
    --lg-ph-edge: color-mix(in srgb, var(--hl) 45%, transparent);
  }
}
:root[data-theme="dark"] {
  --lg-ph-bg: color-mix(in srgb, var(--hl) 22%, transparent);
  --lg-ph-edge: color-mix(in srgb, var(--hl) 45%, transparent);
}

/* ------------------------------------------------------------------ page */
body.legal {
  position: relative;
  isolation: isolate;
  padding-top: 10px; /* (room above the floating bar; a margin on the bar would collapse through body) */
  background: var(--air);
  color: var(--ink);
  font-size: calc(17px * var(--ts, 1));
  line-height: 1.65;
}
@media (min-width: 1000px) {
  body.legal {
    font-size: calc(17.5px * var(--ts, 1));
  }
}
/* the sky behind the title: lilac to champagne with a gold horizon low on the right */
body.legal::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: clamp(460px, 62vh, 620px);
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at 82% 82%, color-mix(in srgb, var(--horizon) 62%, transparent), transparent 72%),
    radial-gradient(46% 64% at 8% 4%, color-mix(in srgb, var(--lilac) 30%, transparent), transparent 72%),
    linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 34%, var(--sky-3) 64%, var(--air) 100%);
  /* the sky thins into the air below, with no edge */
  -webkit-mask-image: linear-gradient(#000 52%, transparent);
  mask-image: linear-gradient(#000 52%, transparent);
}

/* skip link: hidden until focused */
.lg-skip {
  position: absolute;
  left: 16px;
  top: -120px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--air-hi);
  font-size: calc(15px * var(--ts, 1));
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--sh-2);
}
.lg-skip:focus {
  top: 14px;
}

/* ------------------------------------------------------------------ top bar */
.lg-bar {
  position: sticky;
  top: 10px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 6px;
  width: min(calc(100% - 24px), 1120px);
  height: 56px;
  margin: 0 auto;
  padding: 0 8px 0 18px;
  border-radius: 999px;
  background: var(--veil);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: inset 0 0 0 1px var(--veil-edge), var(--sh-float);
}
.lg-brand {
  display: inline-flex;
  align-items: center;
  padding: 0 6px 4px 2px;
  border-radius: 10px;
  color: var(--ink);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
}
/* the site's own written "ditto", as the nav writes it (one copy of it, kept still: these pages run no script) */
.lg-logo {
  display: block;
  width: 78px;
  height: auto;
}
.lg-bar-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: clamp(4px, 2vw, 22px);
}
.lg-bar-links a {
  padding: 7px 13px;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: calc(14.5px * var(--ts, 1));
  font-weight: 520;
  line-height: 1.3;
  text-decoration: none;
  transition: background var(--t-1), color var(--t-1);
}
.lg-bar-links a:hover {
  color: var(--ink);
  background: var(--hover);
}
.lg-bar-links a[aria-current="page"] {
  color: var(--ink);
  background: var(--press);
}
.lg-bar .lg-back {
  margin-left: auto;
}
.lg-back .ico {
  transition: transform var(--t-2) var(--ease);
}
.btn.lg-back:hover .ico {
  transform: translateX(-2px);
}
@media (max-width: 560px) {
  .lg-bar-links {
    display: none;
  }
}

/* ------------------------------------------------------------------ layout */
.lg-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "short"
    "toc"
    "body";
  row-gap: clamp(28px, 4vw, 40px);
  width: 100%;
  max-width: calc(var(--lg-col) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) var(--gutter) clamp(64px, 8vw, 112px);
  overflow-wrap: break-word;
}
.lg-wrap:focus {
  outline: none;
}
.lg-head {
  grid-area: head;
}
.lg-short {
  grid-area: short;
}
.lg-toc {
  grid-area: toc;
}
.lg-body {
  grid-area: body;
  min-width: 0;
}
@media (min-width: 1040px) {
  .lg-wrap {
    grid-template-columns: var(--lg-toc) minmax(0, var(--lg-col));
    grid-template-areas:
      "toc head"
      "toc short"
      "toc body";
    column-gap: clamp(48px, 5vw, 80px);
    justify-content: center;
    max-width: 1180px;
  }
  .lg-toc {
    position: sticky;
    top: 92px;
    align-self: start;
    max-height: calc(100vh - 112px);
    overflow: auto;
    margin-top: 6px;
    padding: 4px 4px 12px 0;
    scrollbar-width: thin;
  }
}

/* ------------------------------------------------------------------ title */
.lg-title {
  margin-top: 16px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 8vw, 86px);
  line-height: 0.98;
  letter-spacing: -0.016em;
  color: var(--ink);
}
.lg-title em {
  font-style: italic;
}
.lg-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 22px;
  list-style: none;
  font-size: calc(14.5px * var(--ts, 1));
  line-height: 1.3;
  color: var(--ink-2);
}
.lg-meta li {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 13px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.lg-meta a {
  margin-left: 4px;
  color: var(--accent);
  font-weight: 560;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  text-underline-offset: 3px;
}
.lg-meta a:hover {
  text-decoration-color: currentColor;
}

/* ------------------------------------------------------------------ the short version */
.lg-short {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 3.4vw, 34px) clamp(20px, 3.4vw, 36px);
  border-radius: var(--r-l);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-2);
}
/* a thread of sunrise along the top edge */
.lg-short::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--sunrise) 55%, var(--rose));
  opacity: 0.85;
}
.lg-short h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.lg-short ul {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  list-style: none;
}
.lg-short li {
  position: relative;
  padding-left: 26px;
  color: var(--ink);
}
.lg-short li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.6em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8e6, var(--gold-hi) 45%, var(--gold) 100%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent);
}
.lg-short .lg-fine {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: calc(14.5px * var(--ts, 1));
  color: var(--ink-3);
}

/* ------------------------------------------------------------------ contents */
.lg-toc {
  font-size: calc(14.5px * var(--ts, 1));
  line-height: 1.35;
}
.lg-toc-title {
  font-size: calc(12.5px * var(--ts, 1));
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lg-toc ol {
  display: grid;
  gap: 1px;
  margin-top: 12px;
  list-style: none;
}
.lg-toc a {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: baseline;
  padding: 6px 10px 6px 8px;
  border-radius: 10px;
  color: var(--ink-2);
  text-decoration: none;
  transition: background var(--t-1), color var(--t-1);
}
.lg-toc a:hover {
  color: var(--ink);
  background: var(--hover);
}
.lg-toc .n {
  font-family: var(--font-mono);
  font-size: calc(12px * var(--ts, 1));
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
/* on narrower screens the contents is a card between the summary and the text */
@media (max-width: 1039.98px) {
  .lg-toc {
    padding: 20px 14px 14px;
    border-radius: var(--r-l);
    background: var(--surface-2);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .lg-toc-title {
    padding-left: 8px;
  }
}
@media (min-width: 640px) and (max-width: 1039.98px) {
  /* two columns that read downwards, like a book's contents */
  .lg-toc ol {
    display: block;
    column-count: 2;
    column-gap: 8px;
  }
  .lg-toc li {
    break-inside: avoid;
  }
}

/* ------------------------------------------------------------------ the document */
.lg-sec {
  padding-top: clamp(36px, 5vw, 52px);
}
.lg-sec + .lg-sec {
  margin-top: clamp(36px, 5vw, 52px);
  border-top: 1px solid var(--line);
}
.lg-sec:first-child {
  padding-top: clamp(8px, 2vw, 16px);
}
.lg-sec h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.lg-sec h2 .n {
  margin-right: 0.28em;
  font-style: italic;
  color: var(--accent);
}
.lg-sec h3 {
  margin-top: 30px;
  font-family: var(--font-body);
  font-size: 1.04em;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.lg-sec h2 + p,
.lg-sec h2 + ul,
.lg-sec h2 + ol,
.lg-sec h2 + dl,
.lg-sec h2 + .lg-note {
  margin-top: 18px;
}
.lg-sec h3 + p,
.lg-sec h3 + ul,
.lg-sec h3 + ol,
.lg-sec h3 + dl {
  margin-top: 8px;
}
.lg-sec p,
.lg-sec ul,
.lg-sec ol {
  margin-top: 14px;
  color: var(--ink-2);
}
.lg-sec ul,
.lg-sec ol {
  padding-left: 1.35em;
}
.lg-sec ol.lg-alpha {
  list-style: lower-alpha;
}
.lg-sec li + li {
  margin-top: 8px;
}
.lg-sec li::marker {
  color: var(--ink-3);
}
.lg-sec strong {
  color: var(--ink);
  font-weight: 650;
}
.lg-body a,
.lg-short a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--t-1);
}
.lg-body a:hover,
.lg-short a:hover {
  text-decoration-color: currentColor;
}

/* a fact list: label on the left, detail on the right (stacked on a phone) */
.lg-facts {
  margin: 18px 0 0;
  border-radius: var(--r-m);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-2);
  overflow: hidden;
}
.lg-facts > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: 14px 18px;
}
.lg-facts > div + div {
  border-top: 1px solid var(--line);
}
.lg-facts dt {
  font-weight: 650;
  color: var(--ink);
  line-height: 1.4;
}
.lg-facts dd {
  margin: 0;
  color: var(--ink-2);
}
.lg-facts dd + dd {
  margin-top: 6px;
}
@media (min-width: 640px) {
  .lg-facts > div {
    grid-template-columns: 180px minmax(0, 1fr);
    column-gap: 20px;
  }
  .lg-facts dd {
    grid-column: 2;
  }
  .lg-facts dt {
    padding-top: 1px;
  }
}

/* a callout: the demo checkout, reporting misuse */
.lg-note {
  margin-top: 20px;
  padding: 16px 20px;
  border-radius: var(--r-m);
  background: var(--accent-wash);
  box-shadow: inset 0 0 0 1px var(--accent-wash-2);
}
.lg-sec .lg-note p {
  margin-top: 0;
  color: var(--ink);
}
.lg-sec .lg-note p + p {
  margin-top: 8px;
}

/* a detail we don't know yet: shown plainly so it can't be missed */
.ph {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--lg-ph-bg);
  box-shadow: inset 0 0 0 1px var(--lg-ph-edge);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.84em;
  font-weight: 500;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ footer */
.lg-foot {
  border-top: 1px solid var(--line);
  background: var(--air-lo);
}
.lg-foot-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px var(--gutter) 16px;
  font-size: calc(14px * var(--ts, 1));
  color: var(--ink-3);
}
.lg-foot nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  list-style: none;
}
.lg-foot nav a {
  display: inline-block;
  padding-block: 4px;
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--t-1);
}
.lg-foot nav a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lg-foot nav a[aria-current="page"] {
  color: var(--ink);
}
.lg-review {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gutter) 32px;
  font-size: calc(13.5px * var(--ts, 1));
  font-style: italic;
  color: var(--ink-3);
}

/* ------------------------------------------------------------------ print */
@media print {
  @page {
    margin: 18mm 16mm;
  }
  body.legal {
    font-size: 10.5pt;
    line-height: 1.5;
    background: #fff !important;
  }
  body.legal::before,
  .lg-skip,
  .lg-bar,
  .lg-toc,
  .lg-foot nav {
    display: none !important;
  }
  body.legal *,
  body.legal *::before,
  body.legal *::after {
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  .lg-wrap {
    display: block;
    max-width: none;
    padding: 0;
  }
  .lg-title {
    font-size: 30pt;
  }
  .lg-meta {
    margin-top: 10pt;
  }
  .lg-meta li {
    min-height: 0;
    padding: 0;
  }
  .lg-short {
    margin-top: 16pt;
    padding: 12pt 14pt;
    border: 1px solid #888;
    break-inside: avoid;
  }
  .lg-short::before {
    display: none;
  }
  .lg-sec,
  .lg-sec + .lg-sec {
    margin-top: 16pt;
    padding-top: 10pt;
    border-top: 1px solid #bbb;
  }
  .lg-sec h2 {
    font-size: 18pt;
  }
  h2,
  h3,
  dt {
    break-after: avoid;
  }
  p,
  li,
  dd {
    orphans: 3;
    widows: 3;
  }
  /* the summary's gold dots are backgrounds, which print drops: a solid border dot instead */
  .lg-short li::before {
    width: 0;
    height: 0;
    top: 0.5em;
    border: 3px solid #000;
  }
  .lg-facts {
    border: 1px solid #bbb;
  }
  .lg-facts > div {
    padding: 8pt 10pt;
    break-inside: avoid;
  }
  .lg-facts > div + div {
    border-top: 1px solid #ddd;
  }
  .lg-note {
    border: 1px solid #888;
  }
  .lg-body a {
    text-decoration: underline;
  }
  .lg-body a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
  }
  .ph {
    border: 1px dashed #000;
  }
  .lg-foot {
    border-top: 1px solid #bbb;
  }
  .lg-foot-in {
    padding: 10pt 0 4pt;
  }
  .lg-review {
    padding: 0;
  }
}