/* ciphr — the shell every page in site/ shares: the masthead, the navigation, and
   the prose and code styles the reading pages use.
 *
 * `layers.css` keeps its own copy of the colour tokens below and is loaded *after*
 * this file on that page, so the visualisation wins on anything the two both
 * define. The duplication is deliberate rather than an oversight: that file is a
 * self-contained rendering of one diagram, and pulling its palette out into a
 * dependency would make a change to this file able to break the geometry there.
 * The token *values* are the same set, and they should stay that way.
 *
 * No external request from any page here, and no web font: the CSP is
 * `default-src 'none'`, and a documentation page that cannot hold the policy it
 * describes is a poor advertisement for the argument it makes. */

:root {
  --bg: #0d1014;
  --bg-raised: #14181e;
  --bg-sunk: #090b0e;
  --line: #262d36;
  --line-strong: #3a444f;
  --text: #dfe4ea;
  --text-dim: #97a1ae;
  --text-faint: #67717d;

  --accent: #7fb2d9;
  --good: #56b98a;
  --warn: #e0b341;
  --bad: #e0655f;

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono: ui-monospace, Cascadia Mono, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f8fa;
    --bg-raised: #ffffff;
    --bg-sunk: #eceff3;
    --line: #d6dbe2;
    --line-strong: #aeb7c2;
    --text: #1b2028;
    --text-dim: #4d5663;
    --text-faint: #7b8492;

    --accent: #245c85;
    --good: #1c7a51;
    --warn: #8a6104;
    --bad: #b7332c;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
}

/* ── The bar every page carries ──────────────────────────────────────────── */

.site-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 22px;
  padding: 14px 26px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
}

.site-mark {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
  text-decoration: none;
}

.site-mark span { color: var(--text-faint); font-weight: 400; }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-left: auto;
}

.site-nav a {
  color: var(--text-dim);
  text-decoration: none;
  padding: 2px 0;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover { color: var(--text); }

.site-nav a[aria-current="page"] {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.site-nav .site-nav-out::after {
  content: " ↗";
  color: var(--text-faint);
  font-size: 12px;
}

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

.page {
  max-width: 46rem;
  margin: 0 auto;
  padding: 34px 26px 90px;
}

.page.is-wide { max-width: 60rem; }

h1 {
  font-size: 28px;
  line-height: 1.25;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 20px;
  margin: 46px 0 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  letter-spacing: -0.01em;
}

h3 { font-size: 16px; margin: 26px 0 6px; }

p, li { color: var(--text-dim); }
p strong, li strong { color: var(--text); }

a { color: var(--accent); }

.lede {
  font-size: 17px;
  color: var(--text);
  margin: 0 0 4px;
}

.status {
  font-size: 13px;
  color: var(--text-faint);
  border-left: 2px solid var(--line-strong);
  padding-left: 12px;
  margin: 18px 0 0;
}

.status strong { color: var(--text-dim); }

code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.5px 4px;
}

pre {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  overflow-x: auto;
  margin: 12px 0;
}

pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre;
}

/* ── The six classes inside a code block ─────────────────────────────────────
 *
 * Written by `ci/site-highlight/highlight.mjs`, which uses Shiki as a tokenizer
 * and nothing else: no script runs on these pages, and Shiki's own HTML output
 * would carry a `style` attribute per token that `style-src 'self'` refuses.
 * `ci/check-site-highlighting.sh` fails if the markup in the tree stops being
 * what that tool produces.
 *
 * Four of the six colours are the palette this file already defines, so the light
 * scheme below needs two values rather than six — and a change to the accent
 * moves the code blocks with it. Only the keyword and the comment are their own,
 * because neither has an existing token that reads correctly at 13px on the sunk
 * background.
 *
 * Six is a decision, not a limit reached by accident. Plain YAML scalars, shell
 * command arguments and Rust identifiers deliberately stay in the body colour:
 * these blocks are read as an argument about which flag matters, and a
 * twenty-line compose file in eleven colours is read as decoration. */

:root {
  --code-keyword: #b49ae0;
  --code-comment: #7a8492;
}

.t-com { color: var(--code-comment); font-style: italic; }
.t-key { color: var(--accent); }
.t-str { color: var(--good); }
.t-kw { color: var(--code-keyword); }
.t-var { color: var(--warn); }

/* A value the reader has to replace before the example runs. Route A shipped with
 * `v0.11.0`, and its example still writes `<tag>`; the two checksums in it exist
 * only once that release's job summary does, which is what the page's status line
 * says. Marking them is that sentence made visible at the places it applies to,
 * rather than a pair of angle brackets to notice or miss. */
.t-ph {
  color: var(--bad);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}

@media (prefers-color-scheme: light) {
  :root {
    --code-keyword: #6b3fa0;
    --code-comment: #626b77;
  }
}

/* ── Blocks that carry a judgement ───────────────────────────────────────── */

.note {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: var(--bg-raised);
  padding: 12px 16px;
  margin: 18px 0;
}

.note.is-warn { border-left-color: var(--warn); }
.note.is-bad { border-left-color: var(--bad); }
.note.is-good { border-left-color: var(--good); }

.note p { margin: 0; }
.note p + p { margin-top: 8px; }
.note h3 { margin: 0 0 6px; color: var(--text); font-size: 15px; }

.source {
  font-size: 13px;
  color: var(--text-faint);
  margin: 8px 0 0;
}

.source a { color: var(--text-dim); }

/* ── Tables ──────────────────────────────────────────────────────────────── */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 14px 0;
  font-size: 14px;
}

th, td {
  text-align: left;
  vertical-align: top;
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-dim);
}

th { color: var(--text); font-weight: 600; }

.table-scroll { overflow-x: auto; }

/* ── Cards, for the two places that route a reader onward ────────────────── */

.cards {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 18px 0;
  padding: 0;
  list-style: none;
}

.card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-raised);
  padding: 14px 16px;
}

.card h3 { margin: 0 0 4px; }
.card h3 a { text-decoration: none; }
.card p { margin: 0; font-size: 14px; }

/* ── Route headers on the integration page ───────────────────────────────── */

.route-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 6px 0 12px;
  padding: 0;
  list-style: none;
}

.route-meta li {
  font-size: 12px;
  font-family: var(--mono);
  color: var(--text-dim);
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
}

.site-foot {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 26px 60px;
  font-size: 13px;
  color: var(--text-faint);
}

.site-foot a { color: var(--text-dim); }