/* Terms of Use + Privacy Policy — the app's design language, applied to a document.
 *
 * WHY A FILE AND NOT AN INLINE <style>. Both documents arrived with an identical
 * inline block. Inline CSS is permitted by the enforced baseline today, but it
 * is a violation under the strict Content-Security-Policy running beside it in
 * Report-Only mode, and docs/CSP.md is a list someone is trying to empty —
 * adding two fresh entries to it is the wrong direction. One file, two pages,
 * no inline CSS, and the two documents stay identical to each other, which for
 * a Terms page and a Privacy page facing the same customer matters more than it
 * sounds.
 *
 * EVERY VALUE COMES FROM tokens.css. Not "a similar indigo" — the same
 * --brand-primary the buttons use, the same --slate ramp, the same
 * --radius/--shadow/--space/--text scales. A legal page that is merely NEAR the
 * product's palette reads as a third-party document someone bolted on, which is
 * the opposite of what these two pages are for. Canonical names only, because
 * DESIGN_SYSTEM.md lists the --gray- and --brand-purple ramps as legacy
 * aliases kept for existing rules and explicitly not to be extended.
 *
 * (Those prefixes are written WITHOUT a trailing asterisk on purpose. An
 * asterisk immediately followed by a slash closes a CSS comment, and this file
 * shipped for one commit with that exact sequence inside this block: the
 * comment terminated early, ~600 characters of prose landed at the top level
 * of the stylesheet, and CSS error recovery swallowed forward to the next
 * brace, which ate the universal box-sizing:border-box rule directly below.
 * Every padded element on both pages was silently content-box. It was caught
 * by the test asserting no legacy token names appear outside comments, which
 * is not remotely what that assertion was written for.)
 *
 * Literal fallbacks on every var() are deliberate and not belt-and-braces:
 * these are the pages a signed-out stranger hits FIRST, sometimes as their only
 * request. If tokens.css 404s — which is exactly what happens when a file is
 * missing from _STATIC_ROOT_FILES — a legal document still has to be readable.
 *
 * NOT dark-mode aware, and that is deliberate: login, signup and accept-invite
 * do not load boot-theme.js either, so the public surface is uniformly light.
 * Semantic tokens are used throughout, so the day that changes these pages
 * follow without edits.
 */

/* ── Page ─────────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: var(--space-6, 2rem) var(--space-5, 1.5rem) var(--space-8, 3rem);
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text, #111827);
  background: var(--color-bg, #F3F4F6);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* The same indigo wash the sign-in page paints behind its card, so arriving
 * here from that footer feels like the same building. Fixed and pointer-inert
 * so it never intercepts a click or scrolls with the text. */
body::before {
  content: "";
  position: fixed;
  top: -22%;
  left: 50%;
  width: 760px;
  height: 760px;
  transform: translateX(-50%);
  background: none;
  pointer-events: none;
  z-index: 0;
}

/* NOT display:flex on body. These are documents, not centred cards — and a flex
 * body is precisely what laid the shared legal footer out in a column BESIDE
 * the sign-in card instead of under it. Normal flow, one column, footer last. */
main {
  position: relative;
  z-index: 1;
  max-width: 47rem;
  margin: 0 auto;
  background: var(--color-surface, #FFFFFF);
  border: 1px solid var(--color-border, #E5E7EB);
  border-radius: var(--radius-xl, 18px);
  box-shadow: var(--shadow-lg, 0 18px 42px rgba(17, 24, 39, 0.12));
  padding: var(--space-8, 3rem) var(--space-6, 2rem) var(--space-6, 2rem);
}

/* ── Brand header ─────────────────────────────────────────────────────────── */
/* Lifted from login.html rather than reinvented: same 44px gradient tile, same
 * 0.7rem gap, same -0.02em wordmark. It is the mark a reader has just come
 * from, and reproducing it approximately would be worse than not showing it. */

.doc-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
  margin-bottom: var(--space-6, 2rem);
}
.doc-brand-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg, 12px);
  background: var(--brand-primary, #1E88E5);
  box-shadow: var(--shadow-brand, 0 4px 18px rgba(30, 136, 229, 0.18));
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.doc-brand-icon svg { width: 24px; height: 24px; }
.doc-brand-name {
  display: block;          /* stacked over the sub-label, as on login.html */
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.doc-brand-sub {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text-muted, #69707D);
  margin-top: 1px;
}
.doc-brand:hover .doc-brand-name { color: var(--brand-primary, #1E88E5); }

/* Close control. Sits in the card's top-right, out of the reading column so it
 * never crowds the first line of a clause. 44x44 rather than the 24px minimum:
 * this is the one control on the page and it is often reached on a phone. */
.doc-close {
  position: absolute;
  top: var(--space-4, 1rem);
  right: var(--space-4, 1rem);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md, 10px);
  color: var(--color-text-muted, #69707D);
  text-decoration: none;
  transition: background var(--motion-fast, 150ms), color var(--motion-fast, 150ms);
}
.doc-close svg { width: 20px; height: 20px; }
.doc-close:hover {
  background: var(--slate-100, #F3F4F6);
  color: var(--color-text, #111827);
}
.doc-close:focus-visible {
  outline: 2px solid var(--brand-primary, #1E88E5);
  outline-offset: 2px;
}

header.doc {
  padding-bottom: var(--space-5, 1.5rem);
  border-bottom: 1px solid var(--color-border, #E5E7EB);
  margin-bottom: var(--space-6, 2rem);
}

h1 {
  font-size: var(--text-2xl, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 var(--space-2, 0.5rem);
}

/* ── Body copy ────────────────────────────────────────────────────────────── */

h2 {
  font-size: var(--text-lg, 1.15rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--color-text, #111827);
  margin: var(--space-6, 2rem) 0 var(--space-2, 0.5rem);
  /* A quiet indigo rule instead of a numbered badge: eighteen headings with
     eighteen coloured chips reads as a UI, and this is a contract. */
  padding-left: 0;
}

p, li { margin: 0 0 var(--space-3, 0.75rem); }
ul { padding-left: 1.25rem; margin: 0 0 var(--space-3, 0.75rem); }
li::marker { color: var(--color-text-muted, #69707D); }
strong { font-weight: 700; color: var(--color-text, #111827); }
em { color: var(--color-text-soft, #374151); }

.meta {
  color: var(--color-text-muted, #69707D);
  font-size: var(--text-sm, 0.85rem);
  font-weight: 500;
  margin: 0;
}
.lede {
  font-size: 1.02rem;
  color: var(--color-text-soft, #374151);
}

/* ── Links ────────────────────────────────────────────────────────────────── */

/* Links are body-size text on white, so they take the AA text step of the
 * ocean ramp (--signal-info = ocean-800, 4.6:1) — ocean-700 is a fill/large-
 * text colour at 3.68:1 (2026-08 Ocean contrast audit). */
a { color: var(--signal-info, #1976D2); text-underline-offset: 2px; }
a:hover { color: var(--brand-primary-dk, #0A4D68); }
a:focus-visible {
  outline: 2px solid var(--brand-primary, #1E88E5);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 6px);
}

/* ── Callout box (the "read sections 8–11" warning, the Privacy Officer) ───── */

.box {
  border: 1px solid var(--brand-primary-border, rgba(30, 136, 229, 0.24));
  border-radius: var(--radius-lg, 12px);
  background: var(--brand-primary-soft, rgba(30, 136, 229, 0.08));
  padding: var(--space-4, 1rem) var(--space-5, 1.5rem);
  margin: var(--space-5, 1.5rem) 0;
}
.box p { margin: 0 0 var(--space-1, 0.25rem); }
.box p:last-child { margin: 0; }
.box .meta { margin-top: var(--space-2, 0.5rem); }
.box a { font-weight: 600; }

/* ── The blocks a reader is legally expected to notice ────────────────────── */
/* Warranty disclaimer and liability cap. Set on a tinted surface with a warning
 * rule, because "conspicuous" is the actual legal standard for these and a wall
 * of uppercase body text is the least conspicuous thing on a page.
 *
 * text-transform, not typed capitals: a screen reader then still reads
 * sentences instead of spelling out every word. That is why the source stays in
 * sentence case. */
.caps {
  text-transform: uppercase;
  font-size: var(--text-sm, 0.85rem);
  letter-spacing: 0.015em;
  line-height: 1.65;
  color: var(--color-text-soft, #374151);
  background: var(--slate-100, #F3F4F6);
  border: 1px solid rgba(var(--warning-rgb), 0.35);
  border-radius: var(--radius-md, 10px);
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  margin: 0 0 var(--space-3, 0.75rem);
}

/* ── Footer nav ───────────────────────────────────────────────────────────── */

.doc-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 0.5rem) var(--space-4, 1rem);
  margin-top: var(--space-6, 2rem);
  padding-top: var(--space-5, 1.5rem);
  border-top: 1px solid var(--color-border, #E5E7EB);
}
.doc-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target-min, 24px);
  font-size: var(--text-sm, 0.85rem);
  font-weight: 600;
  text-decoration: none;
}
.doc-nav a:hover { text-decoration: underline; }
.doc-nav .sep { color: var(--slate-300, #D1D5DB); }

/* The shared footer from sw-legal.js sits OUTSIDE the card, on the page wash,
 * where a page footer belongs — not tucked inside the document surface. */
.sw-legal { max-width: 47rem; margin-left: auto; margin-right: auto; }

/* ── Small screens ────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  body { padding: var(--space-4, 1rem) var(--space-3, 0.75rem) var(--space-6, 2rem); }
  main {
    padding: var(--space-6, 2rem) var(--space-4, 1rem) var(--space-5, 1.5rem);
    border-radius: var(--radius-lg, 12px);
  }
  h1 { font-size: var(--text-xl, 1.45rem); }
  h2 { padding-left: var(--space-2, 0.5rem); }
  .box { padding: var(--space-3, 0.75rem) var(--space-4, 1rem); }
}

/* ── Print ────────────────────────────────────────────────────────────────── */
/* Someone will save this as a PDF — a counterparty asking for the terms, or the
 * owner filing them. Drop the chrome, keep the substance, and never break a
 * heading away from the clause it introduces. */

@media print {
  body { background: #fff; padding: 0; }
  body::before { display: none; }
  main {
    max-width: none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }
  .doc-brand-icon, .doc-nav, .doc-close { display: none; }
  h1, h2 { break-after: avoid; page-break-after: avoid; }
  .box, .caps { break-inside: avoid; page-break-inside: avoid; }
  a { color: inherit; text-decoration: underline; }
  /* Print the destination of every link that is not a mail or in-page one, so a
     printed copy is still navigable. */
  a[href^="http"]::after,
  a[href^="/"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}