/* Shared brand surface for every public page.
 *
 * Two parts, deliberately separated:
 *   1. the palette on :root — the single source of truth for brand colour,
 *      linked by landing.html too so the two can never drift;
 *   2. the .doc shell — typography and components for the prose pages
 *      (/support, /privacy-policy). Scoped under .doc so that adding a rule
 *      here can never reach into landing.html, which carries its own layout.
 *
 * Sampled from the mark: navy #032758, cyan #05B7FC.
 */

/* ---- 1. palette (shared) ---- */

:root {
  --navy:    #032758;
  --cyan:    #05b7fc;
  --ink:     #0d1626;
  --muted:   #5a6a85;
  --faint:   #8595ac;
  --line:    #dfe6f0;
  --bg:      #f6f8fc;
  --surface: #ffffff;
  --sunken:  #eef2f9;
  --code-bg: #04203f;
  --code-fg: #d6ecff;
  --good:    #0f7a4d;
  --warn:    #9a5b00;

  --sans:    "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --display: "Archivo", "IBM Plex Sans", ui-sans-serif, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* System-dark (no stamp on root) — guarded so an explicit light choice wins. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --navy:    #9dcdf5;
    --cyan:    #35c6ff;
    --ink:     #e8eef7;
    --muted:   #9aabc2;
    --faint:   #71829a;
    --line:    #1e2e45;
    --bg:      #08111f;
    --surface: #0f1b2d;
    --sunken:  #132340;
    --code-bg: #04162b;
    --code-fg: #cfe7ff;
    --good:    #4bd396;
    --warn:    #ffc06b;
  }
}
/* Explicit dark choice wins over a light OS. */
:root[data-theme="dark"] {
  --navy:    #9dcdf5;
  --cyan:    #35c6ff;
  --ink:     #e8eef7;
  --muted:   #9aabc2;
  --faint:   #71829a;
  --line:    #1e2e45;
  --bg:      #08111f;
  --surface: #0f1b2d;
  --sunken:  #132340;
  --code-bg: #04162b;
  --code-fg: #cfe7ff;
  --good:    #4bd396;
  --warn:    #ffc06b;
}

/* ---- 2. the prose-page shell (.doc only) ---- */

.doc * { box-sizing: border-box; }

body.doc {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.doc .page {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2.25rem 1.5rem 5rem;
  display: flex;
  flex-direction: column;
  gap: 2.75rem;
}

/* breadcrumb back to the landing page — every prose page is a leaf */
.doc .crumb {
  display: flex; align-items: center; gap: .6rem;
  font-size: .9rem;
  color: var(--muted);
}
.doc .crumb img { width: 26px; height: 26px; border-radius: 6px; background: #fff; flex: none; }
.doc .crumb a { color: var(--muted); }

.doc header.head { display: grid; gap: .55rem; }
.doc h1 {
  margin: 0;
  font: 700 clamp(1.7rem, 5vw, 2.3rem)/1.1 var(--display);
  letter-spacing: -.02em;
  color: var(--navy);
  text-wrap: balance;
}
.doc .lede { margin: 0; font-size: 1.03rem; color: var(--muted); text-wrap: pretty; }
.doc .stamp {
  font: 500 .7rem/1 var(--mono);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint);
}

.doc section { display: flex; flex-direction: column; gap: 1.05rem; }
.doc h2 {
  margin: 0;
  font: 600 1.35rem/1.2 var(--display);
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}
.doc h3 { margin: 0; font: 600 1rem/1.3 var(--sans); color: var(--ink); }
.doc p { margin: 0; text-wrap: pretty; }
.doc p + p { margin-top: .7rem; }
.doc a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.doc a:focus-visible,
.doc button:focus-visible,
.doc input:focus-visible,
.doc select:focus-visible,
.doc textarea:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 4px;
}

.doc code { font: 400 .9em/1 var(--mono); }
.doc p code, .doc li code, .doc td code, .doc dd code {
  background: var(--sunken);
  padding: .12em .38em;
  border-radius: 4px;
  word-break: break-word;
}

.doc ul.plain, .doc ol.plain { margin: 0; padding-left: 1.2rem; display: grid; gap: .5rem; }
.doc ul.plain li, .doc ol.plain li { font-size: .97rem; }

/* card — the recurring container for a self-contained block */
.doc .card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.3rem 1.4rem;
  display: flex; flex-direction: column; gap: .9rem;
}
.doc .card.accent { border-left: 3px solid var(--cyan); }

/* definition rows — "what we collect / why" and similar pairs */
.doc dl.rows { margin: 0; display: grid; gap: 1rem; }
.doc dl.rows > div { display: grid; gap: .25rem; }
.doc dl.rows dt {
  font: 500 .7rem/1.3 var(--mono);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint);
}
.doc dl.rows dd { margin: 0; font-size: .96rem; }

.doc .note {
  border-left: 3px solid var(--cyan);
  padding: .15rem 0 .15rem 1.05rem;
  color: var(--muted);
  font-size: .94rem;
}
.doc .note strong { color: var(--ink); }
.doc .warn {
  border-left: 3px solid var(--warn);
  padding: .15rem 0 .15rem 1.05rem;
  color: var(--muted);
  font-size: .94rem;
}
.doc .warn strong { color: var(--ink); }

/* tables */
.doc .scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.doc table { border-collapse: collapse; width: 100%; background: var(--surface); }
.doc th, .doc td {
  text-align: left;
  padding: .62rem .9rem;
  border-bottom: 1px solid var(--line);
  font-size: .93rem;
  vertical-align: top;
}
.doc thead th {
  font: 500 .68rem/1 var(--mono);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint);
  background: var(--sunken);
  white-space: nowrap;
}
.doc tbody tr:last-child td { border-bottom: 0; }
.doc td.k { font-family: var(--mono); font-size: .88rem; white-space: nowrap; }

/* the contact form (composes a mailto:, sends nothing anywhere) */
.doc .field { display: grid; gap: .35rem; }
.doc label { font: 500 .82rem/1.3 var(--sans); color: var(--ink); }
.doc input, .doc select, .doc textarea {
  font: 400 .95rem/1.5 var(--sans);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .6em .75em;
  width: 100%;
}
.doc textarea { resize: vertical; min-height: 7.5rem; }
.doc .btn {
  align-self: start;
  background: var(--cyan);
  color: #04203f;
  border: none; cursor: pointer;
  font: 600 .9rem/1 var(--sans);
  padding: .78em 1.4em;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  transition: opacity .15s;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--cyan) 35%, transparent);
}
.doc .btn:hover { opacity: .85; }
.doc .btn.ghost {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--line);
  box-shadow: none;
  font-weight: 500;
}
.doc .actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }

.doc footer {
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
  color: var(--faint);
  font-size: .86rem;
  display: flex; flex-direction: column; gap: .4rem;
}
.doc footer nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.doc footer a { color: var(--faint); }