/**
 * The shared look of the public legal documents at /legal/*.
 *
 * Both documents render the same shell — the page palette, the bordered container, the padded
 * content frame — and the same long-form prose styles, so all of that lives here and each page
 * keeps only what is genuinely its own (the privacy policy's disclosure table, the terms' lettered
 * list). Every article on a legal page carries `data-component="legal-document"`; a page that needs
 * a hook of its own uses `data-document="…"` on the same element.
 *
 * Colours come from style/token/color.css, the one palette. This file used to carry its own copy of
 * that table, lifted from the brand page's stylesheet, scoped to `[data-page="legal"]` so it could
 * not reach the rest of the site. There is nothing left to scope. Inline logical properties
 * (`padding-inline-start`, `text-align: start`) keep the documents laid out correctly when the site
 * is read right-to-left.
 */

/* ---------- page shell ---------- */

[data-page="legal"] {
  background: var(--surface);
  color: var(--ink-body);
  padding-bottom: 5rem;

  /*
   * The edge of a table that scrolls sideways, drawn as a soft shadow that appears only on the side
   * with more to see: the two cover gradients scroll with the content and hide the shadows behind
   * them at the ends. A table cut at the screen's edge with nothing to say it continued read as a
   * table that had lost its last column.
   */
  --scroll-hint:
    linear-gradient(to right, var(--surface) 30%, transparent) left / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, transparent) right / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(15 26 77 / 0.16), transparent) left / 0.8rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(15 26 77 / 0.16), transparent) right / 0.8rem 100% no-repeat scroll;
}

/* The frame stands on the site column the bar uses (site-layout.css), so its two lines are the
   edges the logo and Login align to; /changelog and /brand use the same frame and text column. */
[data-page="legal"] [data-component="container"] {
  max-width: var(--site-column);
  margin: 0 auto;
  border: 1px solid var(--color-border-weak);
  border-top: none;
}

@media (max-width: 77rem) {
  [data-page="legal"] [data-component="container"] {
    border: none;
  }
}

[data-page="legal"] [data-component="legal-content"] {
  padding: 4rem 5rem;
}

@media (max-width: 60rem) {
  [data-page="legal"] [data-component="legal-content"] {
    padding: 2rem var(--site-gutter);
  }
}

[data-page="legal"] a {
  color: var(--color-text-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

[data-page="legal"] a:hover {
  text-decoration-thickness: 2px;
}

/* ---------- the document itself ---------- */

[data-component="legal-document"] {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.7;
}

[data-component="legal-document"] h1 {
  font-size: var(--title-page-size);
  font-weight: var(--title-weight);
  line-height: 1.15;
  letter-spacing: var(--title-tracking);
  color: var(--color-text-strong);
  margin-bottom: 0.5rem;
  margin-top: 0;
}

[data-component="legal-document"] .effective-date {
  font-size: 0.95rem;
  color: var(--color-text-weak);
  margin-bottom: 2rem;
}

[data-component="legal-document"] h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-strong);
  margin-top: 3rem;
  margin-bottom: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border-weak);
}

[data-component="legal-document"] h2:first-of-type {
  margin-top: 2rem;
}

[data-component="legal-document"] h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-strong);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

[data-component="legal-document"] h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text-strong);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

[data-component="legal-document"] p {
  margin-bottom: 1rem;
  color: var(--color-text);
}

[data-component="legal-document"] ul,
[data-component="legal-document"] ol {
  margin-bottom: 1rem;
  padding-inline-start: 1.5rem;
  color: var(--color-text);
}

[data-component="legal-document"] li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
}

/* A list of in-page links is a document's contents, and its entries carry their own numbers
   ("1. The companies behind the Services"), so a bullet in front of each was a second marker. */
[data-component="legal-document"] ul:has(> li:first-child > a[href^="#"]:only-child) {
  list-style: none;
  padding-inline-start: 0;
}

[data-component="legal-document"] ul ul,
[data-component="legal-document"] ul ol,
[data-component="legal-document"] ol ul,
[data-component="legal-document"] ol ol {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

[data-component="legal-document"] a {
  color: var(--color-text-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  word-break: break-word;
}

[data-component="legal-document"] a:hover {
  text-decoration-thickness: 2px;
}

[data-component="legal-document"] strong {
  font-weight: 600;
  color: var(--color-text-strong);
}

[data-component="legal-document"] [id] {
  scroll-margin-top: 100px;
}

@media (max-width: 60rem) {
  [data-component="legal-document"] {
    padding: 0;
  }

  [data-component="legal-document"] h2 {
    font-size: 1.35rem;
    margin-top: 2.5rem;
  }

  [data-component="legal-document"] h3 {
    font-size: 1.15rem;
  }

  [data-component="legal-document"] h4 {
    font-size: 1rem;
  }
}

/*
 * Jumping to a section from the table of contents glides rather than snaps. This is scoped to the
 * document that has the in-page anchors — these stylesheets are global, so a bare `html` rule here
 * would change scrolling for the whole site — and it is skipped for readers who have asked their
 * system for less motion.
 */
@media (prefers-reduced-motion: no-preference) {
  html:has([data-page="legal"]) {
    scroll-behavior: smooth;
  }
}

/* ---------- print ---------- */

@media print {
  @page {
    margin: 2cm;
    size: letter;
  }

  [data-component="site-header"],
  [data-component="site-footer"] {
    display: none !important;
  }

  [data-page="legal"] {
    background: white !important;
    padding: 0 !important;
  }

  [data-component="container"] {
    max-width: none !important;
    border: none !important;
    margin: 0 !important;
  }

  [data-component="content"],
  [data-component="legal-content"] {
    padding: 0 !important;
    margin: 0 !important;
  }

  [data-component="legal-document"] {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  [data-component="legal-document"] * {
    color: black !important;
    background: transparent !important;
  }

  [data-component="legal-document"] h1 {
    font-size: 24pt;
    margin-top: 0;
    margin-bottom: 12pt;
    page-break-after: avoid;
  }

  [data-component="legal-document"] h2 {
    font-size: 18pt;
    border-top: 2pt solid black !important;
    padding-top: 12pt;
    margin-top: 24pt;
    margin-bottom: 8pt;
    page-break-after: avoid;
    page-break-before: auto;
  }

  [data-component="legal-document"] h2:first-of-type {
    margin-top: 16pt;
  }

  [data-component="legal-document"] h3 {
    font-size: 14pt;
    margin-top: 16pt;
    margin-bottom: 8pt;
    page-break-after: avoid;
  }

  [data-component="legal-document"] h4 {
    font-size: 12pt;
    margin-top: 12pt;
    margin-bottom: 6pt;
    page-break-after: avoid;
  }

  [data-component="legal-document"] p {
    font-size: 11pt;
    line-height: 1.5;
    margin-bottom: 8pt;
    orphans: 3;
    widows: 3;
  }

  [data-component="legal-document"] .effective-date {
    font-size: 10pt;
    margin-bottom: 16pt;
  }

  [data-component="legal-document"] ul,
  [data-component="legal-document"] ol {
    margin-bottom: 8pt;
    page-break-inside: auto;
  }

  [data-component="legal-document"] li {
    font-size: 11pt;
    line-height: 1.5;
    margin-bottom: 4pt;
    page-break-inside: avoid;
  }

  [data-component="legal-document"] a {
    color: black !important;
    text-decoration: underline;
  }

  [data-component="legal-document"] strong {
    font-weight: bold;
    color: black !important;
  }

  [data-component="legal-document"] h1,
  [data-component="legal-document"] h2,
  [data-component="legal-document"] h3,
  [data-component="legal-document"] h4 {
    page-break-inside: avoid;
    page-break-after: avoid;
  }

  [data-component="legal-document"] h2 + p,
  [data-component="legal-document"] h3 + p,
  [data-component="legal-document"] h4 + p,
  [data-component="legal-document"] h2 + ul,
  [data-component="legal-document"] h3 + ul,
  [data-component="legal-document"] h4 + ul,
  [data-component="legal-document"] h2 + ol,
  [data-component="legal-document"] h3 + ol,
  [data-component="legal-document"] h4 + ol {
    page-break-before: avoid;
  }
}

/* ------------------------------------------------- the provider table */

/*
 * The table of third party services, which both the terms and the privacy policy carry.
 *
 * It lives here rather than in either document's own stylesheet because both render it and a second
 * copy would drift; the privacy policy's older disclosure table keeps its own rules, which are keyed
 * to that document and describe a different shape.
 *
 * It scrolls rather than squeezing: three columns of prose and two links do not fold into a phone,
 * and a table that wraps its links into single letters is worse than one the reader can push.
 */
[data-page="legal"] [data-component="legal-table"] {
  display: block;
  overflow-x: auto;
  width: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
  font-size: 0.9375rem;
  background: var(--scroll-hint);
}

/* A floor under every column, so a phone scrolls the table instead of standing its words one to a
   line ("AIVIBE / SOFTWARE / SERVICES / PRIVATE / LIMITED"). */
[data-page="legal"] [data-component="legal-table"] :is(th, td) {
  min-inline-size: 9rem;
  padding: 0.7rem 0.9rem;
  text-align: start;
  vertical-align: top;
  border: 1px solid var(--color-border);
  white-space: normal;
}

[data-page="legal"] [data-component="legal-table"] th {
  background: var(--color-background-weak);
  font-weight: 600;
  color: var(--color-text-strong);
}

[data-page="legal"] [data-component="legal-table"] td:last-child {
  /* The two links stay on one line together rather than breaking around the separator. */
  white-space: nowrap;
}

@media (max-width: 40rem) {
  [data-page="legal"] [data-component="legal-table"] :is(th, td) {
    padding: 0.55rem 0.7rem;
  }
}