/* =============================================================================
   ReactLive — legal pages · VERSION 1 (6 Oct 2026)

   Loaded after reactive.v2.css by the legal pages only: legal, privacy, gdpr,
   terms, subscription-agreement, cookies. Uses that file's tokens and adds nothing to
   it, so the rest of the site never downloads these rules and a change here
   doesn't need the whole site's stylesheet re-versioned.

   Same caching rule as the main stylesheet (README, Routing and deploy): to
   ship a change, rename to legal.v2.css, update the <link> in the six legal
   pages, and upload both.

     1  Layout — the legal menu beside the document (a row of pills on phones)
     2  Document — clause numbers, definitions, notice, ordered lists, tables
     3  Overview cards (/legal)
   ========================================================================== */

/* --- 1  Layout ---------------------------------------------------------- */
/* The legal menu does what pubble.io/legal's tabs do: every legal document is
   one click from every other. Each document is its own page, so the menu is
   links, with aria-current on the page you're on. Under it, the long documents
   list their own sections ("On this page"). */
.legal {
  display: grid; grid-template-columns: 14.5rem minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
}
.legal-side {
  position: sticky; top: calc(var(--header-h) + 1.5rem);
  max-height: calc(100vh - var(--header-h) - 3rem); overflow-y: auto;
}
.legal-nav, .legal-toc { display: grid; gap: .125rem; }
.legal-side__label {
  margin: 0 0 .5rem .75rem;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-on-dark-fnt);
}
.legal-nav a, .legal-toc a {
  padding: .5rem .75rem; border-radius: var(--r-sm);
  font-size: .9375rem; color: var(--fg-on-dark-mut);
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.legal-nav a:hover, .legal-toc a:hover { color: var(--fg-on-dark); background: rgba(255, 255, 255, .04); }
.legal-nav a[aria-current='page'] { color: var(--fg-on-dark); background: var(--ink-3); font-weight: 500; }

.legal-toc { gap: 0; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line-dark-str); }
.legal-toc a { padding-block: .3125rem; font-size: .8125rem; }

/* Phones: the menu becomes a row of pills above the document. The section
   list is dropped there; it would push the document a screen down. */
@media (max-width: 900px) {
  .legal { grid-template-columns: minmax(0, 1fr); }
  .legal-side {
    position: static; max-height: none; overflow: visible;
    padding-bottom: 1.25rem; border-bottom: 1px solid var(--line-dark-str);
  }
  .legal-nav { display: flex; flex-wrap: wrap; gap: .375rem; }
  .legal-side__label { display: none; }
  .legal-nav a { padding: .4375rem .875rem; border: 1px solid var(--line-dark-str); border-radius: 999px; font-size: .875rem; }
  .legal-nav a[aria-current='page'] { border-color: var(--fg-on-dark-fnt); }
  .legal-toc { display: none; }
}

/* --- 2  Document -------------------------------------------------------- */
.legal__doc { overflow-wrap: break-word; }
.legal__doc code { overflow-wrap: anywhere; }   /* the DPA address in 11.1 is wider than a 320px phone */
.legal__doc > :first-child { margin-top: 0; }
.legal__doc h2 { scroll-margin-top: calc(var(--header-h) + 1rem); }
.prose.legal__doc a:not(.btn) {
  color: var(--fg-on-dark);
  box-shadow: inset 0 -1px 0 rgba(var(--accent-lift-rgb), .45);
  transition: box-shadow .2s var(--ease);
}
.prose.legal__doc a:not(.btn):hover { box-shadow: inset 0 -1px 0 var(--fg-on-dark); }

/* A numbered clause: the number in mono, sub-clauses stepped in */
.clause__n {
  margin-right: .5rem;
  font-family: var(--mono); font-size: .8125rem; font-weight: 500; color: var(--fg-on-dark);
  font-variant-numeric: tabular-nums;
}
.clause--sub { padding-left: clamp(1rem, 3vw, 2rem); }
.clause--sub2 { padding-left: clamp(2rem, 6vw, 4rem); }
[id^='clause-'] { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* The capitalised notice at the top of the agreement */
.legal-notice {
  padding: clamp(1.125rem, 2.4vw, 1.5rem) clamp(1.125rem, 2.6vw, 1.75rem);
  border: 1px solid var(--line-dark-str); border-left: 3px solid var(--fg-on-dark-mut);
  border-radius: var(--r-sm); background: var(--ink-2);
}
.legal-notice > * + * { margin-top: 1rem; }
.legal-notice p { font-size: .875rem; line-height: 1.6; }

/* Defined terms: term beside its meaning, stacked on phones */
.legal-defs {
  display: grid; grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr);
  border-top: 1px solid var(--line-dark-str);
}
.legal-defs dt, .legal-defs dd { padding-block: .875rem; border-bottom: 1px solid var(--line-dark-str); }
.legal-defs dt { padding-right: 1.25rem; font-weight: 550; color: var(--fg-on-dark); }
.legal-defs dd { margin: 0; color: var(--fg-on-dark-mut); line-height: 1.6; }
@media (max-width: 600px) {
  .legal-defs { grid-template-columns: minmax(0, 1fr); }
  .legal-defs dt { padding-bottom: .25rem; border-bottom: 0; }
  .legal-defs dd { padding-top: 0; }
}

/* The base reset removes list numbering; legal lists keep it */
.legal__doc ol { display: grid; gap: .5rem; padding-left: 1.375rem; list-style: decimal; }
.legal__doc ol li::marker { color: var(--fg-on-dark-fnt); font-family: var(--mono); font-size: .875em; }

/* Sub-processor table — the shared .compare look, with the name leading */
.table-scroll .compare--legal { min-width: 30rem; }
.compare--legal td:first-child { color: var(--fg-on-dark); font-weight: 550; }
.compare--legal td:last-child { font-weight: 400; color: var(--fg-on-dark-mut); }
.compare--legal thead th:last-child { color: var(--fg-on-dark-fnt); }

.legal-revised { font-family: var(--mono); font-size: .8125rem; letter-spacing: .02em; color: var(--fg-on-dark-fnt); }
.page-hero .legal-revised { margin-top: 1.25rem; }

/* --- 3  Overview cards (/legal) ------------------------------------------ */
.legal-cards > .card { display: flex; flex-direction: column; transition: border-color .2s var(--ease); }
.legal-cards > .card:hover { border-color: var(--line-dark-str); }
.legal-cards .card__body { flex: 1; }
.legal-cards .legal-revised { margin-top: 1rem; }
.legal-cards .tlink { margin-top: 1rem; }