/* browser/legal.css — shared styling for terms.html / privacy.html.
 *
 * These two pages are deliberately STANDALONE: no d3, no dial modules, no
 * theme.js. They must render on a device that has never loaded the dial, over
 * the onion, with JavaScript disabled — a privacy notice that needs a WASM
 * bundle to be readable is not a privacy notice. The only script on either page
 * is the optional operator-identity fill, and both pages state their fallback
 * text inline so a no-JS reader loses nothing but the operator's name.
 *
 * Typography follows app.html: Libertinus Serif for prose, Inter for the small
 * chrome. Colours are literal here rather than var(--t-*) tokens — theme.js
 * never runs on these pages, so a token would resolve to nothing.
 */

:root { color-scheme: light dark; }

html, body {
  margin: 0;
  background: #ffffff;
  color: #2c3038;
  font-family: "Libertinus Serif", Georgia, serif;
  font-size: 17px;
  line-height: 1.62;
}

.wrap { max-width: 46rem; margin: 0 auto; padding: 2.2rem 1.4rem 5rem; }

/* ── masthead ───────────────────────────────────────────────────────── */
.top {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  border-bottom: 1px solid #eef2f6; padding-bottom: 10px; margin-bottom: 26px;
  font-family: Inter, system-ui, sans-serif; font-size: 12px;
}
.top a { color: #2c4a6e; text-decoration: none; }
.top a:hover { text-decoration: underline; }
.top .brand { font-weight: 600; letter-spacing: .02em; }
.top .sep { color: #cccccc; }
.top .spacer { margin-left: auto; }

h1 { font-size: 2.05rem; line-height: 1.2; margin: 0 0 .2rem; font-weight: 600; }
.sub { font-family: Inter, system-ui, sans-serif; font-size: 12.5px;
       color: #6a7686; margin: 0 0 2.2rem; }
.sub b { color: #2c3038; font-weight: 600; }

h2 { font-size: 1.32rem; font-weight: 600; margin: 2.6rem 0 .7rem;
     padding-top: .5rem; border-top: 1px solid #f1f4f8; }
h3 { font-size: 1.06rem; font-weight: 600; margin: 1.7rem 0 .45rem; color: #21395a; }

p, li { margin: .62rem 0; }
ul, ol { padding-left: 1.35rem; }
strong { font-weight: 600; color: #1c2c3e; }
a { color: #2c4a6e; }
code, .aid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
             font-size: .88em; background: #f5f7fa; border-radius: 3px;
             padding: 1px 5px; word-break: break-all; }

/* ── the two callout kinds ──────────────────────────────────────────── */
/* .warn — a consequence the reader cannot undo (lost passcode, published KEL).
   .note — a scoping remark or an honest limitation of the implementation. */
.warn, .note {
  margin: 1.1rem 0; padding: .85rem 1.05rem; border-radius: 6px;
  font-size: .95rem; line-height: 1.55;
}
.warn { background: #fdf3f1; border-left: 3px solid #b04a3a; }
.warn strong { color: #8f3427; }
.note { background: #f6f8fb; border-left: 3px solid #9aa6b2; color: #46505e; }

/* ── the legal-basis / data-inventory tables ────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; margin: 1.1rem 0;
       font-family: Inter, system-ui, sans-serif; font-size: 12.5px; }
.tbl th, .tbl td { text-align: left; vertical-align: top;
                   padding: 7px 10px; border-bottom: 1px solid #eef2f6; }
.tbl th { font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
          color: #6a7686; font-weight: 700; border-bottom-color: #d7dee7; }
.tblwrap { overflow-x: auto; }

/* an operator-supplied value; styled so an UNFILLED template is obvious */
.op { font-family: Inter, system-ui, sans-serif; font-size: .93em; }
.op.unset { background: #fdf6e6; border-bottom: 1px dashed #b07a3a; color: #8a5f24; }

footer { margin-top: 3.4rem; padding-top: 1rem; border-top: 1px solid #eef2f6;
         font-family: Inter, system-ui, sans-serif; font-size: 11.5px; color: #9aa6b2; }

@media (prefers-color-scheme: dark) {
  html, body { background: #14181f; color: #d5dae2; }
  .top { border-bottom-color: #232a34; }
  .top a, a { color: #8fb3dd; }
  .top .sep, footer { color: #6a7686; }
  h2 { border-top-color: #232a34; }
  h3 { color: #9fc0e6; }
  strong { color: #eef2f6; }
  code, .aid { background: #1d232c; }
  .warn { background: #2a1d1a; border-left-color: #c26551; }
  .warn strong { color: #e0917f; }
  .note { background: #1a1f27; border-left-color: #4a545f; color: #a8b2bf; }
  .tbl th, .tbl td { border-bottom-color: #232a34; }
  .tbl th { color: #98a3b0; border-bottom-color: #313b47; }
  .op.unset { background: #2a2417; border-bottom-color: #b07a3a; color: #d1a75f; }
  footer { border-top-color: #232a34; }
}