/* Thermal Sky - legal page styles (Terms, Privacy Policy).
   Loaded only by the two legal pages, after tokens.css and styles.css. */

/* --- Legal pages ----------------------------------------------------------- */
/* Two long documents (Terms, Privacy Policy) live on this recipe. Rule of the
   block: nothing here invents a colour. Mono carries every number, marker and
   label; Space Grotesk carries every sentence; the hairline does the dividing.
   No amber, per discipline rule 1 - a legal page has no price figure. */

.legal { padding: var(--ts-space-7) 0 var(--ts-space-8); }
.legal-wrap { max-width: 72ch; }

/* Sidebar contents at desktop, stacked card below. justify-content keeps the
   pair optically centred in the 1140px wrap instead of hugging the left rail. */
.legal-layout {
  display: grid;
  gap: var(--ts-space-7);
  align-items: start;
}

.legal-doc { min-width: 0; max-width: 72ch; }

.legal-h1 {
  font-size: var(--ts-text-h2);
  text-wrap: balance;
  margin: var(--ts-space-3) 0 var(--ts-space-4);
}

/* Version and effective date. Mono, because both are data. */
.legal-version {
  margin: 0 0 var(--ts-space-6);
  font: 400 var(--ts-text-small)/1.7 var(--ts-font-mono);
  color: var(--ts-mist);
}
.legal-version b { color: var(--ts-paper-text); font-weight: 500; }

/* Contents ---------------------------------------------------------------- */

.legal-toc {
  background: var(--ts-graphite);
  border: 1px solid var(--ts-hairline);
  border-radius: var(--ts-radius-card);
  padding: var(--ts-space-5);
}
.legal-toc-title {
  margin: 0 0 var(--ts-space-3);
  font: 500 var(--ts-text-eyebrow) var(--ts-font-mono);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ts-label);
}
.legal-toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.legal-toc li { margin: 0; color: inherit; }
/* Flex, not a block with an inline-block number: a two-line entry keeps its
   second line under the title, not under the number. */
.legal-toc a {
  display: flex;
  gap: 0.4ch;
  padding: 6px 0;
  font: 400 var(--ts-text-small)/1.45 var(--ts-font-body);
  color: var(--ts-mist);
  text-decoration: none;
}
.legal-toc a:hover { color: var(--ts-paper-text); text-decoration: underline; text-underline-offset: 2px; }
.legal-toc ul ul {
  padding-left: 3.6ch;
  margin: 0 0 var(--ts-space-2);
}
.legal-toc ul ul a { font-size: 13px; }

.legal-toc-n {
  flex: none;
  min-width: 3.2ch;
  font: 500 12px var(--ts-font-mono);
  color: var(--ts-label);
}
/* Part A / Part B dividers inside the list. */
.legal-toc-part {
  margin: var(--ts-space-4) 0 var(--ts-space-2);
  padding-top: var(--ts-space-4);
  border-top: 1px solid var(--ts-hairline);
  font: 500 var(--ts-text-eyebrow) var(--ts-font-mono);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ts-label);
}

/* Plain-terms summary ------------------------------------------------------ */

.legal-plain {
  background: var(--ts-graphite);
  border: 1px solid var(--ts-hairline);
  border-radius: var(--ts-radius-card);
  padding: var(--ts-space-6);
  margin: 0 0 var(--ts-space-6);
}
.legal h2.legal-plain-h {
  margin: 0 0 var(--ts-space-4);
  padding: 0;
  border-top: 0;
  font: 500 var(--ts-text-eyebrow) var(--ts-font-mono);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ts-label);
}
.legal-plain-list { margin: 0; padding: 0; list-style: none; }
.legal-plain-list li {
  position: relative;
  margin: 0 0 var(--ts-space-3);
  padding-left: var(--ts-space-5);
  color: var(--ts-paper-text);
}
.legal-plain-list li:last-child { margin-bottom: 0; }
/* Mono em-dash marker rather than a bullet glyph: same family as every other
   marker on the site. */
.legal-plain-list li::before {
  content: "\2014";
  position: absolute;
  left: 0;
  font-family: var(--ts-font-mono);
  color: var(--ts-label);
}
.legal-plain b { font-weight: 500; }
.legal-plain-note {
  margin: var(--ts-space-5) 0 0;
  padding-top: var(--ts-space-4);
  border-top: 1px solid var(--ts-hairline);
  font: 400 var(--ts-text-small)/1.7 var(--ts-font-body);
  color: var(--ts-mist);
}

/* Headings ----------------------------------------------------------------- */

.legal h2.legal-part {
  margin: var(--ts-space-8) 0 var(--ts-space-5);
  padding-top: var(--ts-space-6);
  border-top: 1px solid var(--ts-hairline);
  font: 500 var(--ts-text-eyebrow) var(--ts-font-mono);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ts-label);
}

.legal h2,
.legal h3.legal-section {
  font: 500 18px var(--ts-font-body);
  color: var(--ts-paper-text);
  margin: var(--ts-space-6) 0 var(--ts-space-3);
  padding-top: var(--ts-space-5);
  border-top: 1px solid var(--ts-hairline);
}
/* A numbered clause heading. The number is mono and hangs, so the titles of
   eighteen sections line up down a single edge. */
.legal h2 .legal-h-n,
.legal h3 .legal-h-n,
.legal h4 .legal-h-n {
  display: inline-block;
  min-width: 3.6ch;
  font-family: var(--ts-font-mono);
  font-weight: 500;
  color: var(--ts-label);
}
.legal h3,
.legal h4 {
  font: 500 16px var(--ts-font-body);
  color: var(--ts-paper-text);
  margin: var(--ts-space-6) 0 var(--ts-space-3);
}
/* The part label already draws a rule; a second one under it reads as a
   double line. */
.legal-part + h2,
.legal-part + h3 { margin-top: 0; padding-top: 0; border-top: 0; }

/* Body --------------------------------------------------------------------- */

/* Scoped to the unclassed body paragraphs. As .legal p this rule sat at
   0,1,1 and quietly beat .ts-eyebrow and .legal-updated whatever the source
   order said. */
.legal-wrap > p:not([class]),
.legal-doc > p:not([class]) { margin: 0 0 var(--ts-space-4); color: var(--ts-paper-text); }
.legal ul { margin: 0 0 var(--ts-space-4); padding-left: var(--ts-space-5); }
.legal li { margin-bottom: var(--ts-space-2); color: var(--ts-paper-text); }

/* Numbered clause. The number hangs in the margin at reading widths and folds
   back inline on a phone, where 5.5ch of gutter is a fifth of the measure. */
.legal .clause {
  margin: 0 0 var(--ts-space-4);
  padding-left: 5.5ch;
  text-indent: -5.5ch;
  color: var(--ts-paper-text);
}
.legal .clause-n {
  display: inline-block;
  min-width: 5.5ch;
  text-indent: 0;
  font: 500 14px var(--ts-font-mono);
  color: var(--ts-label);
}
/* A list that belongs to a clause sits under the clause text, not under its
   hanging number. */
.legal .clause + ul { margin-left: 5.5ch; }

/* The notice printed on every acquisition record (clause 3.8) and anything
   else quoted verbatim from a delivered file. */
.legal blockquote {
  margin: 0 0 var(--ts-space-4) 5.5ch;
  padding: var(--ts-space-4) var(--ts-space-5);
  background: var(--ts-graphite);
  border-left: 2px solid var(--ts-hairline);
  border-radius: 0 var(--ts-radius-panel) var(--ts-radius-panel) 0;
  color: var(--ts-paper-text);
}
.legal blockquote p { margin: 0; }

/* Tables ------------------------------------------------------------------- */
/* Two in the Privacy Policy: service providers and retention. Real table
   markup at reading widths; stacked rows on a phone, where four words per
   column is not a table. */

.legal-table-scroll { margin: 0 0 var(--ts-space-5); }

.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ts-text-small);
  line-height: 1.65;
}
.legal-table caption {
  text-align: left;
  margin-bottom: var(--ts-space-3);
  font: 500 var(--ts-text-eyebrow) var(--ts-font-mono);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ts-label);
}
.legal-table th,
.legal-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--ts-space-3) var(--ts-space-4);
  border-bottom: 1px solid var(--ts-hairline);
  overflow-wrap: break-word;
}
.legal-table thead th {
  font: 500 var(--ts-text-eyebrow) var(--ts-font-mono);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ts-label);
  border-bottom-color: var(--ts-mist);
}
.legal-table tbody th {
  font: 500 var(--ts-text-small) var(--ts-font-body);
  color: var(--ts-paper-text);
  width: 30%;
}
.legal-table td { color: var(--ts-paper-text); }
.legal-table tbody tr:last-child th,
.legal-table tbody tr:last-child td { border-bottom: 0; }

/* Contact block ------------------------------------------------------------ */

.legal-contact {
  margin: var(--ts-space-6) 0 0;
  padding: var(--ts-space-5);
  background: var(--ts-graphite);
  border: 1px solid var(--ts-hairline);
  border-radius: var(--ts-radius-card);
  font-style: normal;
  color: var(--ts-paper-text);
}
.legal-contact p { margin: 0 0 var(--ts-space-2); }
.legal-contact p:last-child { margin-bottom: 0; }

.legal-updated {
  margin: var(--ts-space-7) 0 0;
  padding-top: var(--ts-space-5);
  border-top: 1px solid var(--ts-hairline);
  font: 400 var(--ts-text-small)/1.8 var(--ts-font-mono);
  color: var(--ts-mist);
}

@media (min-width: 1080px) {
  .legal-layout {
    grid-template-columns: 236px minmax(0, 72ch);
    gap: var(--ts-space-8);
    justify-content: center;
  }
  /* Rides the sticky nav, and scrolls inside itself when the Terms list is
     taller than the viewport. */
  .legal-toc {
    position: sticky;
    top: calc(var(--ts-nav-h) + var(--ts-space-5));
    max-height: calc(100vh - var(--ts-nav-h) - var(--ts-space-7));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 640px) {
  .legal .clause { padding-left: 0; text-indent: 0; }
  .legal .clause-n { min-width: 0; margin-right: 0.6ch; }
  .legal .clause + ul { margin-left: 0; }
  .legal blockquote { margin-left: 0; padding: var(--ts-space-4); }

  /* Stacked rows. Each cell carries its column name in data-label, so the
     header row can go and nothing is orphaned. */
  .legal-table caption { margin-bottom: var(--ts-space-2); }
  .legal-table,
  .legal-table tbody,
  .legal-table tr,
  .legal-table th,
  .legal-table td { display: block; width: auto; }
  .legal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .legal-table tbody tr {
    padding: var(--ts-space-4) 0;
    border-bottom: 1px solid var(--ts-hairline);
  }
  .legal-table tbody tr:last-child { border-bottom: 0; }
  .legal-table tbody th,
  .legal-table tbody td { padding: 0; border-bottom: 0; }
  /* The 30% column width from the desktop rule outranks the `width: auto` in
     the display:block group above, and squeezes the stacked row header into a
     third of the screen. Restate it here. */
  .legal-table tbody th {
    width: auto;
    margin-bottom: var(--ts-space-2);
    font-size: var(--ts-text-body);
  }
  .legal-table tbody td { margin-bottom: var(--ts-space-3); }
  .legal-table tbody td:last-child { margin-bottom: 0; }
  .legal-table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font: 500 var(--ts-text-eyebrow) var(--ts-font-mono);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--ts-label);
  }
}

/* A legal page is the one page on this site people print or file. */
@media print {
  .nav, .footer, .skip-link, .legal-toc { display: none; }
  .legal { padding: 0; }
  .legal-layout { display: block; }
  .legal-doc { max-width: none; }
  .legal-plain, .legal-contact, .legal blockquote { background: transparent; }
  .legal h2, .legal h3, .legal h4 { break-after: avoid; }
  .legal .clause, .legal blockquote, .legal-table tr { break-inside: avoid; }
}