/* =========================================================================
   tw-legal.css
   The four legal documents: /terms-of-use, /disclosures, /policies,
   /ccpaprivacy.

   These pages are the one place on the site where the words are fixed. The
   text is what counsel wrote and nothing here is allowed to change it, so
   every decision below is about how a document that cannot be edited is made
   readable: a measure that holds, a scale that separates a clause from a
   heading, and a way to get down a forty-screen contract without scrolling
   blind.

   That last one is the whole reason this file exists. A legal page is not an
   argument the way the rest of the site is; nobody reads one from the top.
   They arrive looking for the arbitration clause, or the address to send a
   DMCA notice to, and everything here is arranged around finding it: a
   sticky contents rail on the left, an anchor on every heading, and a switch
   at the top for the four documents, because "which of these four is it in"
   is the question a reader usually has before "where in this one".

   Depends on tw-system.css for tokens, .container, .band, .eyebrow and the
   nav and footer. Nothing in here redefines a token.
   ========================================================================= */

/* -------------------------------------------------------------------------
   01. Masthead
   Short and left-aligned, which is the break from the marketing pages. Their
   hero is a full viewport, centred, and holds a claim. This one holds a
   title, a date and a switch: it is a cover page, and a cover page that
   costs a full screen is a cover page in the way.
   ------------------------------------------------------------------------- */

.legal-hero {
  padding-top: calc(var(--nav-h) + clamp(3rem, 6vw, 5.5rem));
  padding-bottom: clamp(2.5rem, 4vw, 4rem);
}

.legal-hero__title {
  margin-top: 1.25rem;
  max-width: 20ch;
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
}

/* The revision date. It is the first thing a reader checks against whatever
   version they last agreed to, so it sits directly under the title rather
   than at the foot with the other metadata. */
.legal-hero__meta {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  font-size: var(--step-small);
  color: var(--text-tertiary);
}

.legal-hero__meta strong {
  font-weight: 600;
  color: var(--text-secondary);
}

/* -------------------------------------------------------------------------
   02. Document switch
   The four documents plus the trust centre, on every one of them. A reader
   who is on the wrong page is the common case here — "disclosures" and
   "policies" are not words that tell you what is inside them — and the fix
   is one row of pills rather than a trip back through the footer.
   ------------------------------------------------------------------------- */

.legal-switch {
  margin-top: clamp(2rem, 3vw, 2.75rem);
}

.legal-switch__label {
  font-size: var(--step-eyebrow);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.legal-switch__list {
  margin-top: 0.875rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
}

.legal-switch__list a {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  min-height: 40px;
  padding: 0.5rem 0.9375rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
  font-size: var(--step-small);
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease),
    color 200ms var(--ease);
}

.legal-switch__list a:hover {
  background: var(--surface-hi);
  border-color: var(--rule-strong);
  color: var(--text-primary);
}

/* The document you are already on. Marked by colour and by a filled ground
   rather than by removing the link, so the row keeps its shape and a reader
   who tabs into it is told where they are instead of finding a gap. */
.legal-switch__list a[aria-current='page'] {
  background: rgba(103, 188, 124, 0.14);
  border-color: rgba(143, 217, 163, 0.4);
  color: var(--sage-bright);
}

.legal-switch__ext {
  flex: none;
  opacity: 0.6;
}

/* -------------------------------------------------------------------------
   03. The document
   Contents rail and body, side by side above 62rem and stacked below it.

   The rail is `position: sticky` inside a grid column that is as tall as the
   article, which is the arrangement that lets it scroll with the reader for
   forty screens without a line of script. `align-self: start` is doing the
   real work: a grid item stretches by default, which makes the rail as tall
   as the article and gives sticky nothing to travel through.
   ------------------------------------------------------------------------- */

.legal {
  display: grid;
  gap: clamp(2.5rem, 4vw, 3.5rem);
  padding-block: clamp(3rem, 5vw, 4.5rem) clamp(4rem, 7vw, 6.5rem);
}

@media (min-width: 62rem) {
  .legal {
    grid-template-columns: 15.5rem minmax(0, 1fr);
    gap: clamp(3rem, 5vw, 5rem);
  }
}

.legal__rail {
  align-self: start;
}

@media (min-width: 62rem) {
  .legal__rail {
    position: sticky;
    /* Clears the fixed nav, plus a little air so the first entry is not
       tucked under its bottom edge. */
    top: calc(var(--nav-h) + 1.5rem);
    /* The contract's own contents run past a short viewport, so the rail
       scrolls internally rather than clipping its tail. */
    max-height: calc(100vh - var(--nav-h) - 3rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.legal__rail-title {
  font-size: var(--step-eyebrow);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.legal__toc {
  margin-top: 1rem;
  padding-left: 0;
  list-style: none;
  border-left: 1px solid var(--rule);
}

.legal__toc a {
  display: block;
  padding: 0.5rem 0 0.5rem 1rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: var(--step-small);
  line-height: 1.35;
  color: var(--text-tertiary);
  text-decoration: none;
  text-wrap: pretty;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
}

.legal__toc a:hover {
  color: var(--text-primary);
  border-left-color: var(--rule-strong);
}

/* Set by tw-legal.js from an IntersectionObserver. Without the script the
   rail is still a complete, working table of contents; it just does not
   follow. */
.legal__toc a.is-current {
  color: var(--sage-bright);
  border-left-color: var(--sage);
}

/* Second-level entries. Indented and a size down, so a reader can see the
   shape of the document in the rail rather than a flat list of forty
   equal-weight lines. */
.legal__toc a[data-level='3'] {
  padding-left: 1.75rem;
  font-size: 0.8125rem;
  opacity: 0.86;
}

/* -------------------------------------------------------------------------
   04. Body copy
   Everything below styles markup this file does not own: the elements are
   whatever the source document uses, so the selectors are element selectors
   scoped to .legal__body rather than classes.

   The measure is 68 characters rather than the site's 42rem prose width.
   Legal prose is built from long subordinate clauses that a narrow column
   breaks into confetti, and a reader following a definition through three
   of them needs the line to hold more of it than a marketing paragraph does.
   ------------------------------------------------------------------------- */

.legal__body {
  max-width: 68ch;
  font-size: var(--step-body);
  line-height: 1.7;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.legal__body > *:first-child {
  margin-top: 0;
}

.legal__body p {
  margin-top: 1.125rem;
}

/* Headings ---------------------------------------------------------------
   A rule above the h2s rather than only space below them. Forty sections of
   near-identical grey prose need a horizon line to be countable while
   scrolling past at speed; space alone reads as a paragraph that happens to
   be short. */

.legal__body h2 {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}

.legal__body > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.legal__body h3 {
  margin-top: 2.5rem;
  font-size: var(--step-h3);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}

.legal__body h2 + h3 {
  margin-top: 1.75rem;
}

/* Inline emphasis --------------------------------------------------------
   These documents lean on bold for defined terms — the parenthetical
   ("Troutwood Services") that a later clause then uses forty times. Lifting
   them to the primary text colour makes the definitions findable, which is
   the one navigational affordance the source markup already carries. */

.legal__body b,
.legal__body strong {
  font-weight: 600;
  color: var(--text-primary);
}

.legal__body i,
.legal__body em {
  font-style: italic;
}

.legal__body a {
  color: var(--sage-bright);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
  /* An email address or a statute citation is one unbroken token that a 68ch
     column cannot fit; without this it sets past the edge of the article. */
  overflow-wrap: break-word;
}

.legal__body a:hover {
  color: var(--text-primary);
}

/* The source underlines a lot of link text by hand, which on top of the
   underline above renders as a double rule on some engines. */
.legal__body a u {
  text-decoration: none;
}

/* Lists ------------------------------------------------------------------
   A sage marker rather than a disc: an enumerated list of prohibited uses is
   the part of one of these documents anyone actually reads to the end, and
   the marker is the only colour on the page that can say so. */

.legal__body ul,
.legal__body ol {
  margin-top: 1.125rem;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 0.6875rem;
}

.legal__body li {
  position: relative;
  padding-left: 1.5rem;
}

.legal__body ul > li::before {
  content: '';
  position: absolute;
  left: 0.1875rem;
  /* Centres on the first line's cap height at line-height 1.7, so the marker
     sits with the text rather than with the top of the box. */
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 10px var(--accent-glow);
}

.legal__body ol {
  counter-reset: legal-ol;
}

.legal__body ol > li {
  counter-increment: legal-ol;
}

.legal__body ol > li::before {
  content: counter(legal-ol) '.';
  position: absolute;
  left: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--sage-bright);
}

.legal__body li > ul,
.legal__body li > ol {
  margin-top: 0.6875rem;
}

/* Tables -----------------------------------------------------------------
   One table on one page — the CCPA category disclosure — but it is wide, and
   a wide table is the classic way a document breaks a layout. The wrapper
   scrolls it on its own axis so the page never does. */

.legal__table {
  margin-top: 1.75rem;
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}

.legal__body table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--step-small);
  line-height: 1.6;
}

.legal__body td,
.legal__body th {
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.legal__body tr:last-child td,
.legal__body tr:last-child th {
  border-bottom: 0;
}

/* The source has no <thead>, so the header row is the first <tr> and has to
   be styled positionally. */
.legal__body table > tr:first-child td,
.legal__body tbody tr:first-child td {
  background: rgba(255, 255, 255, 0.04);
  font-weight: 600;
  color: var(--text-primary);
}

.legal__body table p {
  margin-top: 0;
}

.legal__body table p + p {
  margin-top: 0.5rem;
}

.legal__body table ul {
  margin-top: 0.5rem;
  gap: 0.375rem;
}

/* -------------------------------------------------------------------------
   05. Foot of the document
   Where to write if the document did not answer it. Deliberately not a CTA:
   a reader who has just scrolled a contract is not in the market, and the
   only useful thing to offer them is an address.
   ------------------------------------------------------------------------- */

.legal__foot {
  margin-top: 4rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--step-small);
  line-height: 1.65;
  color: var(--text-tertiary);
}

.legal__foot a {
  color: var(--sage-bright);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.legal__foot a:hover {
  color: var(--text-primary);
}

/* -------------------------------------------------------------------------
   06. Print
   These are the pages people actually print, or save to PDF to send to their
   own counsel. Everything that is chrome comes off; what is left is the
   title, the date and the document, in ink.
   ------------------------------------------------------------------------- */

@media print {
  .legal-switch,
  .legal__rail {
    display: none;
  }

  /* The nav is hidden in print, so the masthead's clearance for it would be
     an inch of white at the top of page one. */
  .legal-hero {
    padding-block: 0 1.25rem;
  }

  .legal {
    display: block;
    padding-block: 0;
  }

  .legal__body {
    max-width: none;
    color: #000;
  }

  .legal__body h2 {
    margin-top: 1.75rem;
    padding-top: 0.75rem;
    /* Keeps a section heading off the bottom of a page on its own. */
    break-after: avoid;
  }

  .legal__body h3 {
    break-after: avoid;
  }

  .legal__body li,
  .legal__body tr {
    break-inside: avoid;
  }

  .legal__foot {
    display: none;
  }
}