/* =========================================================================
 * The public legal documents: Terms of Use and Privacy Policy.
 *
 * The second surface on the Ink Ledger (DESIGN.md), and the first one outside
 * the app shell. Colours, fonts and the dark theme come from /ink-ledger.css;
 * everything here is layout and document typography.
 *
 * THE DIRECTION is the wayfinding rail: the document name large at the top, the
 * text at a readable measure on the left, and a sticky rail on the right
 * carrying both documents and the section being read. A legal document is
 * usually opened to find one clause, so the rail, not the scrollbar, is the way
 * around it. The direction contract is in
 * .impeccable/surfaces/web-frontend-public-legal-terms-html.md.
 *
 * ONE DELIBERATE EXCEPTION to DESIGN.md's five type sizes: the document title.
 * A standalone document earns a masthead the way a tab inside an app does not,
 * so it is the one size outside the scale, recorded in DESIGN.md.
 *
 * The top strip carries the brand cluster and nothing else. It is deliberately
 * unlike the /admin header, which pairs a title with actions on the right.
 * ========================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--il-ground);
  /* Theme the browser's own furniture, or the scrollbar ships as the one
     element on the page that belongs to no design system. */
  scrollbar-color: var(--il-rule-strong) transparent;
  -webkit-text-size-adjust: 100%;
  /* An anchored section should not land flush against the top of the window. */
  scroll-padding-top: 1.5rem;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--il-ground);
  color: var(--il-body);
  font-family: var(--il-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--il-ink);
  color: var(--il-ground);
}

a {
  color: var(--il-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  /* A 35% underline that goes solid on hover, as the ledger's source links do. */
  text-decoration-color: color-mix(in srgb, var(--il-link) 35%, transparent);
}
a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--il-focus);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Keyboard users get past the strip; the link is off-screen until focused. */
.skip {
  position: absolute;
  left: var(--legal-gutter);
  top: -4rem;
  padding: 0.5rem 0.75rem;
  background: var(--il-ink);
  color: var(--il-ground);
  border-radius: 4px;
  text-decoration: none;
  z-index: 10;
}
.skip:focus { top: 0.75rem; }

:root {
  --legal-gutter: clamp(1.25rem, 4vw, 3rem);
  /* Prose measure. DESIGN.md caps body text at 68 characters. */
  --legal-measure: 68ch;
  --legal-rail: 15rem;
}

/* ---- the strip ---------------------------------------------------------- */

/* The app's top bar, to the pixel: 60px tall and inset 1.25rem, not the
   document gutter the page body uses. A reader arrives here from the app, and
   a masthead that shifts and grows on the way reads as a different site.

   `--brand-size` and `--brand-gap` carry that promise through every width: the
   wordmark, the product name and the divider are sized from the first and
   spaced by the second, and the narrow strip below restates only those two.
   They are the app's `.topbar-brand` values. Change one, change the other. */
.legal-strip {
  --brand-size: 1.56rem;
  --brand-gap: 0.5rem;
  display: flex;
  align-items: center;
  gap: var(--brand-gap);
  height: 60px;
  padding-inline: 1.25rem;
  border-bottom: 1px solid var(--il-rule);
  /* The app's own stack and leading, not the document's Geist, and set on the
     whole strip rather than the link: the masthead is the app's chrome
     wherever it appears, and P_success in one typeface beside the wordmark in
     another reads as two companies. The document below keeps Geist. */
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
}
.legal-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--brand-gap);
  color: var(--il-ink);
  text-decoration: none;
}

/* The same mark as the app's top bar, and fixed like it: the mark is the
   identity, and it goes muddy long before the type does. */
.legal-logo {
  flex: none;
  width: 1.05em;
  height: 1.05em;
  font-size: 20px;
  background: url('/logo.png') center / contain no-repeat;
}

[data-theme="dark"] .legal-logo {
  background-image: url('/logo-dark.png');
}
/* The cluster's own colours, all of them the app's. The blue mirrors `--accent`
   and `--accent-soft` and the divider's grey mirrors `--border-strong`, in the
   app's `style.css`, which these pages do not load. Change one, change the
   other. The divider is the cluster's rule, not the document's, so it takes
   that grey rather than the ledger's `--il-rule-strong`, which is the heavier
   line the sections below use. */
.legal-strip {
  --brand-accent: #2b6cb0;
  --brand-accent-soft: rgba(43, 108, 176, 0.08);
  --brand-rule: #cbd5e0;
}

[data-theme="dark"] .legal-strip {
  --brand-accent: #38bdf8;
  --brand-accent-soft: rgba(56, 189, 248, 0.14);
  --brand-rule: #475569;
}

.legal-wordmark { font-size: var(--brand-size); font-weight: 800; letter-spacing: -0.01em; }

/* The app's ⓘ and its blurb, ported. No flip logic here: the mark sits at the
   page's left edge, where the tip has nowhere to overflow but the viewport it
   already caps itself against. The leading is the app's, not the document's,
   so the trigger's box is the same height in both places. */
.legal-info {
  position: relative;
  color: var(--brand-accent);
  cursor: help;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
}

.legal-info:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.legal-tip {
  display: none;
  position: absolute;
  top: 1.6em;
  left: 0;
  z-index: 300;
  width: 320px;
  max-width: 80vw;
  padding: 0.85rem 1rem;
  background: var(--il-raised);
  color: var(--il-body);
  border: 1px solid var(--il-rule-strong);
  border-radius: 8px;
  box-shadow: var(--il-shadow);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.55;
  text-align: left;
  white-space: normal;
  cursor: auto;
}

.legal-info:hover .legal-tip,
.legal-info:focus .legal-tip,
.legal-info:focus-within .legal-tip {
  display: block;
}

.legal-tip strong { color: var(--il-ink); }
.legal-tip-p { display: block; }
.legal-tip-p + .legal-tip-p { margin-top: 0.6rem; }
/* A ratio of the brand type, not a fixed height, so the rule stays beside the
   words rather than past them once the narrow strip shrinks them. */
.legal-divider { width: 1px; height: calc(var(--brand-size) * 1.25); background: var(--brand-rule); }
.legal-product {
  font-size: var(--brand-size);
  font-weight: 700;
  color: var(--brand-accent);
  white-space: nowrap;
}
.legal-beta {
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  background: var(--brand-accent-soft);
  color: var(--brand-accent);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.4;
}

/* The same four concessions the app's top bar makes at the same width, in the
   same order: tighter padding and gaps, brand type from 1.56rem to 0.95rem,
   the Beta chip hidden, the ⓘ hidden. The reasoning is in the "Responsive: top
   bar" block at the end of `style.css`. Change one, change the other.

   This strip carries nothing on the right, so it has the room the app's bar
   does not — but a masthead that keeps two pieces the app has dropped is two
   mastheads again, which is the whole thing these values exist to prevent. */
@media (max-width: 600px) {
  .legal-strip {
    --brand-size: 0.95rem;
    --brand-gap: 0.35rem;
    padding-inline: 0.75rem;
  }
  .legal-beta,
  .legal-info {
    display: none;
  }
}

/* ---- the page ----------------------------------------------------------- */

.legal-page {
  max-width: 76rem;
  margin: 0 auto;
  padding-inline: var(--legal-gutter);
}

.legal-lead { padding: 5rem 0 3rem; }

.legal-title {
  margin: 0;
  color: var(--il-ink);
  font-size: clamp(2.75rem, 1.9rem + 3.4vw, 4.5rem);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

/* Version and dates: mono with tabular figures, because they are data. Each
   item is its own flex child, so a narrow screen breaks between them rather
   than mid-date. */
.legal-stamp {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
  margin: 1.5rem 0 0;
  color: var(--il-mute);
  font-family: var(--il-mono);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.legal-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--legal-rail);
  column-gap: 5rem;
}

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

.legal-doc { min-width: 0; }

.legal-note {
  max-width: var(--legal-measure);
  margin: 0;
  padding: 1rem 1.25rem;
  background: var(--il-raised);
  border: 1px solid var(--il-rule);
  border-radius: 8px;
}
.legal-note p { margin: 0; }

.legal-doc > section {
  max-width: var(--legal-measure);
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--il-rule);
}
.legal-note + section { margin-top: 2.5rem; }

.legal-doc h2 {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  margin: 0 0 1rem;
  color: var(--il-ink);
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
/* The clause number is data, and the text cross-references it ("Section 9"), so
   it is set in mono with tabular figures and given a fixed column. */
.legal-num {
  flex: none;
  min-width: 1.6rem;
  color: var(--il-mute);
  font-family: var(--il-mono);
  font-size: 1rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.legal-doc p { margin: 0 0 1rem; text-wrap: pretty; }
.legal-doc strong { color: var(--il-ink); font-weight: 600; }
.legal-doc ul,
.legal-doc ol.legal-list { margin: 0 0 1rem; padding-left: 1.25rem; }
.legal-doc li { margin: 0 0 0.6rem; padding-left: 0.25rem; }
.legal-doc li::marker { color: var(--il-mute); }

/* Tables (the provider list, the storage list) are read as a ledger: small grey
   column heads with no capitals, an ink rule under them, hairlines between rows,
   and their own horizontal scroll on a phone. */
.legal-table-wrap {
  max-width: var(--legal-measure);
  margin: 0 0 1.25rem;
  overflow-x: auto;
}
/* 0.875rem is the ramp's small step, one below the 1rem body. The tables used
   to sit at 0.9375rem, a size the ramp does not have, which bought nothing over
   the step below it. */
.legal-doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.legal-doc th {
  padding: 0.5rem 1.25rem 0.5rem 0;
  border-bottom: 1px solid var(--il-ink);
  color: var(--il-mute);
  font-size: 0.75rem;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
.legal-doc td {
  padding: 0.7rem 1.25rem 0.7rem 0;
  border-bottom: 1px solid var(--il-rule);
  vertical-align: top;
}
.legal-doc th:last-child,
.legal-doc td:last-child { padding-right: 0; }

.legal-foot {
  max-width: var(--legal-measure);
  margin-top: 4rem;
  padding: 1.5rem 0 4rem;
  border-top: 1px solid var(--il-rule);
  color: var(--il-mute);
  font-size: 0.875rem;
}
.legal-foot p { margin: 0 0 0.5rem; }

/* ---- the rail ----------------------------------------------------------- */

.legal-rail {
  position: sticky;
  top: 1.5rem;
  align-self: start;
  max-height: calc(100dvh - 3rem);
  overflow: auto;
  padding-left: 1.5rem;
  border-left: 1px solid var(--il-rule);
}

.legal-label {
  display: block;
  margin: 0 0 0.4rem;
  color: var(--il-mute);
  font-size: 0.75rem;
  font-weight: 500;
}

.legal-docs { margin: 0; padding: 0; list-style: none; }
.legal-docs a {
  display: block;
  padding: 0.3rem 0;
  color: var(--il-body);
  font-size: 0.875rem;
  text-decoration: none;
}
.legal-docs a:hover { color: var(--il-ink); }
.legal-docs a[aria-current="page"] { color: var(--il-ink); font-weight: 600; }

.legal-toc { margin-top: 1.75rem; }
.legal-toc summary { list-style: none; cursor: default; }
.legal-toc summary::-webkit-details-marker { display: none; }
.legal-toc ol { margin: 0; padding: 0; list-style: none; }
.legal-toc a {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: baseline;
  padding: 0.28rem 0;
  color: var(--il-mute);
  font-size: 0.875rem;
  line-height: 1.4;
  text-decoration: none;
}
.legal-toc a .legal-toc-num {
  font-family: var(--il-mono);
  font-variant-numeric: tabular-nums;
}
.legal-toc a:hover { color: var(--il-ink); }
/* Set by legal.js as the reader moves through the document. */
.legal-toc a[aria-current="true"] { color: var(--il-ink); font-weight: 500; }

@media (prefers-reduced-motion: no-preference) {
  .legal-toc a { transition: color 0.16s cubic-bezier(0.22, 1, 0.36, 1); }
}

/* ---- phone -------------------------------------------------------------- */

@media (max-width: 56rem) {
  .legal-lead { padding: 2.75rem 0 2rem; }
  /* One item per line, so a date never breaks across two. */
  .legal-stamp { flex-direction: column; gap: 0.15rem; }
  .legal-layout { grid-template-columns: minmax(0, 1fr); }
  .legal-rail {
    position: static;
    order: -1;
    max-height: none;
    overflow: visible;
    margin-bottom: 2rem;
    padding: 0;
    border: 0;
  }
  .legal-docs {
    display: flex;
    gap: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--il-rule);
  }
  .legal-toc {
    margin-top: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--il-rule);
  }
  /* The list is a real disclosure here, so the summary needs to look like one. */
  .legal-toc summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    color: var(--il-ink);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
  }
  .legal-toc summary::after {
    content: "";
    width: 0.4rem;
    height: 0.4rem;
    border-right: 1.5px solid var(--il-mute);
    border-bottom: 1.5px solid var(--il-mute);
    transform: rotate(45deg);
    transform-origin: center;
  }
  .legal-toc[open] summary::after { transform: rotate(-135deg); }
  .legal-toc[open] summary { margin-bottom: 0.4rem; }
}

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

/* The privacy regulator's guidance expects a policy to be easy to download, and
   "save as PDF" is how people do that. Ink on white, no furniture, and external
   links print their address because a printed page cannot be clicked. */
@media print {
  :root { --il-ground: #ffffff; --il-ink: #000000; --il-body: #1a1a1a; --il-mute: #444444; }
  .legal-strip,
  .legal-rail,
  .skip { display: none; }
  .legal-page { max-width: none; padding: 0; }
  .legal-lead { padding: 0 0 1.5rem; }
  .legal-title { font-size: 2rem; }
  .legal-doc > section { break-inside: avoid; max-width: none; }
  .legal-doc h2 { break-after: avoid; }
  a { color: inherit; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; word-break: break-all; }
}