/*
 * Shared styling for the standalone legal pages.
 *
 * Deliberately separate from css/style.css: these pages are served outside the
 * app, are read once, and should not pull the whole CRM stylesheet — or be
 * affected when it changes.
 */
/*
 * The font this file has always ASKED for and never loaded.
 *
 * `body` below names 'Inter' and the only @font-face in the repository is in
 * css/style.css — which these pages deliberately do not load, because the whole
 * point of them is that they render with no app CSS and no app JS (§19). So
 * /privacy, /terms and /guide have been falling through to system-ui since they
 * shipped, while a self-hosted Inter sat served (ASSET_DIRS names `fonts`) and
 * unused. §47 found the OTHER half of this — the doc pages' blocked Google
 * Fonts link — and fixed it by leaning on the fallback stack; nobody looked at
 * whether the font we already own was reaching the pages that name it.
 *
 * Nothing here is precached: legal.css is in sw.js's STANDALONE_ASSETS and goes
 * straight to the network (§47), so this needs no CACHE_VERSION bump of its own.
 */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #ffffff;
  --paper-sunk: #f7f8fa;
  --ink: #101828;
  --ink-soft: #475467;
  --rule: #e4e7ec;
  --accent: #1570ef;
}
/*
 * The missing half, added. This file carried the :not([data-theme="light"])
 * guard from the start and NO [data-theme="dark"] block — so these pages could
 * be forced light by an attribute nothing set, and could never be forced dark
 * on a light OS (§57 found it; §60 is what needed it). Half a toggle, shipped.
 *
 * The two lists must move together; see css/style.css for why the duplication
 * cannot be avoided. These pages load no JS at all (§19), so resolving the
 * choice in script is not even an option here.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0c111d;
    --paper-sunk: #111725;
    --ink: #e8edf5;
    --ink-soft: #9aa7bd;
    --rule: #253049;
    --accent: #6aa6ff;
  }
}
:root[data-theme="dark"] {
  --paper: #0c111d;
  --paper-sunk: #111725;
  --ink: #e8edf5;
  --ink-soft: #9aa7bd;
  --rule: #253049;
  --accent: #6aa6ff;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.65 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 48px 24px 80px; }
header { border-bottom: 1px solid var(--rule); padding-bottom: 20px; margin-bottom: 32px; }
header a.back { color: var(--accent); text-decoration: none; font-size: 14px; }
header a.back:hover { text-decoration: underline; }
h1 { font-size: 30px; line-height: 1.2; margin: 12px 0 6px; letter-spacing: -0.02em; }
h2 { font-size: 19px; margin: 34px 0 10px; letter-spacing: -0.01em; }
/* The processor terms are the one section long enough to need a second level.
   Without this an h3 falls to the browser default, which is LARGER than the
   19px h2 above it — the heading would read as more important than the section
   containing it. §27's invented-class trap, arrived at through a plain tag. */
h3 { font-size: 16px; margin: 24px 0 8px; letter-spacing: -0.01em; }
p, li { color: var(--ink-soft); }
li { margin-bottom: 6px; }
strong { color: var(--ink); }
.updated { font-size: 14px; color: var(--ink-soft); margin: 0; }
/*
 * The fill carries almost no weight on its own: --paper-sunk against --paper
 * is a contrast ratio of 1.06 in light and 1.05 in dark, and the hairline
 * border only reaches 1.24 / 1.43. Measured, not eyeballed. The accent edge is
 * what actually marks the block off (4.57 / 7.64 against the page, either side
 * of WCAG's 3.0 for non-text), which matters because a callout is load-bearing
 * now — guide.html elevates its one disqualifying limit into one so it is seen.
 * Left padding drops to 16px so the 3px edge leaves the text inset unchanged.
 */
.callout {
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 16px 18px 16px 16px;
  margin: 24px 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout p:first-child { margin-top: 0; }
footer { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: 14px; }
footer a { color: var(--accent); }
code { font-family: ui-monospace, Menlo, monospace; font-size: 0.9em; }

/*
 * Tables. Used only by guide.html's role ladder (§47) — the legal pages have
 * none, checked before adding these rules. A four-rung permission ladder is a
 * LOOKUP rather than prose: someone evaluating for a team wants to find their
 * row. Without styling a bare <table> renders at browser defaults, cramped and
 * borderless, which is worse than the paragraph it replaced — §27's
 * invented-class trap arrived at through a plain tag.
 */
.table-wrap { overflow-x: auto; margin: 0 0 16px; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
td { color: var(--ink-soft); }
td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }