/* brand.css — the muretai "paper" identity over Material for MkDocs.
 *
 * Owner directive (2026-07-15): the docs wear the same warm-cream paper, deep-indigo
 * ink and green accent as web/index.html, so the docs subdomain reads as another
 * room of muretai.com. Headings are a single sans ("gothic") voice (owner, 2026-07-27
 * — unify the type). This file maps Material's own
 * design tokens (--md-*) to the muretai palette in BOTH the light and dark schemes,
 * restyles the top bar + headings, and carries the CSS for the generator-authored
 * figures (the wake trace / cost cards, which are raw HTML injected by generate.py).
 *
 * Link colour is a deepened green (#0c7a56) rather than the brand accent (#0f8a63):
 * the accent measures 3.85:1 on the cream ground — under WCAG AA for the many inline
 * links in a spec — and #0c7a56 is the same hue at 4.74:1. test_docs_page.py pins the
 * contrast so a future "match the brand exactly" edit can't collapse the two.
 */

:root {
  /* One sans ("gothic") family for everything — headings, body, UI. */
  --mt-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN",
             "Yu Gothic", Meiryo, Roboto, Inter, sans-serif;
  --md-text-font-family: var(--mt-sans);
  --md-code-font-family: ui-monospace, SFMono-Regular, Menlo, "Cascadia Code", monospace;

  /* muretai 8pt spacing scale (docs/DESIGN_SYSTEM.md) — every margin/padding
     below is a step on this scale, never an ad-hoc px value. */
  --mt-s1: 8px;  --mt-s2: 16px; --mt-s3: 24px; --mt-s4: 32px;
  --mt-s5: 40px; --mt-s6: 48px; --mt-s7: 64px;
}

/* ---- light "paper" scheme ------------------------------------------------ */
[data-md-color-scheme="default"] {
  --mt-bg: #f6f1e4;
  --mt-panel: #fbf7ec;
  --mt-panel2: #f0e9d8;
  --mt-ink: #1d2547;
  --mt-muted: #5d6488;
  --mt-line: #e2d9c4;
  --mt-accent: #0f8a63;
  --mt-link: #0c7a56;
  --mt-warn: #a86e12;

  --md-default-bg-color: var(--mt-bg);
  --md-default-fg-color: #1d2547;
  --md-default-fg-color--light: #4b5178;
  --md-default-fg-color--lighter: #5d6488;
  --md-default-fg-color--lightest: #efe7d2;
  --md-typeset-color: var(--mt-ink);
  --md-typeset-a-color: var(--mt-link);

  /* Header + primary: paper, not a coloured bar. */
  --md-primary-fg-color: #f6f1e4;
  --md-primary-fg-color--light: #f0e9d8;
  --md-primary-fg-color--dark: #e2d9c4;
  --md-primary-bg-color: #1d2547;
  --md-primary-bg-color--light: #5d6488;

  --md-accent-fg-color: var(--mt-accent);

  --md-code-bg-color: #fbf7ec;
  --md-code-fg-color: #24304f;
  --md-footer-bg-color: #efe7d2;
  --md-footer-bg-color--dark: #e6dcc4;
  --md-footer-fg-color: #1d2547;
  --md-footer-fg-color--light: #5d6488;
  --md-footer-fg-color--lighter: #7a80a0;
}

/* Give the (paper) header a hairline so it separates from the page body. */
[data-md-color-scheme="default"] .md-header {
  border-bottom: 1px solid var(--mt-line);
  box-shadow: none;
}
[data-md-color-scheme="default"] .md-header--shadow {
  box-shadow: 0 0 .2rem rgba(29, 37, 71, .1), 0 .2rem .4rem rgba(29, 37, 71, .1);
}

/* ---- dark scheme (a night version of the same paper) --------------------- */
[data-md-color-scheme="slate"] {
  --mt-bg: #14162a;
  --mt-panel: #1b1e38;
  --mt-panel2: #212545;
  --mt-ink: #e9eaf6;
  --mt-muted: #a7adcf;
  --mt-line: #2b2f52;
  --mt-accent: #35c093;
  --mt-link: #57d6a6;
  --mt-warn: #e0b354;

  --md-hue: 232;
  --md-default-bg-color: var(--mt-bg);
  --md-default-fg-color: #e9eaf6;
  --md-default-fg-color--light: #c3c7e2;
  --md-default-fg-color--lighter: #a7adcf;
  --md-default-fg-color--lightest: #2b2f52;
  --md-typeset-color: var(--mt-ink);
  --md-typeset-a-color: var(--mt-link);

  --md-primary-fg-color: #171a30;
  --md-primary-fg-color--light: #212545;
  --md-primary-fg-color--dark: #101226;
  --md-primary-bg-color: #e9eaf6;
  --md-primary-bg-color--light: #a7adcf;

  --md-accent-fg-color: var(--mt-link);

  --md-code-bg-color: #1b1e38;
  --md-code-fg-color: #dfe2f4;
  --md-footer-bg-color: #101226;
  --md-footer-bg-color--dark: #0c0e1e;
}
[data-md-color-scheme="slate"] .md-header {
  border-bottom: 1px solid var(--mt-line);
}

/* ================= typography & vertical rhythm ==========================
   The docs are READ, not scanned, so the body runs one step above Material's
   default (17px / 1.7) with a capped measure and an 8pt vertical rhythm. */
.md-typeset {
  font-size: .85rem;              /* ~17px on Material's 20px root */
  line-height: 1.85;              /* open leading — the docs are read, not scanned */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Measure: cap the readable text blocks near the 66ch optimum so the eye
   never loses the return sweep on a wide screen. Code, tables and figures are
   left full-width and scroll on their own (they carry their own wrappers). */
.md-typeset p,
.md-typeset blockquote,
.md-typeset ul,
.md-typeset ol { max-width: 68ch; }

/* Paragraph + list rhythm, all on the 8pt scale. */
.md-typeset p { margin: 0 0 var(--mt-s2); }
.md-typeset ul,
.md-typeset ol { margin: 0 0 var(--mt-s2); padding-left: 1.35em; }
.md-typeset li { margin: 6px 0; }
.md-typeset li > ul,
.md-typeset li > ol { margin: 6px 0 0; }

/* Headings: one sans ("gothic") voice, tight leading, and MORE space above than
   below so each heading binds to the text it introduces. `balance` prevents a
   lone trailing word. Sizes are em-relative to the body, a ~1.25 modular scale;
   weight carries the hierarchy now that every level shares the family. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: var(--mt-sans);
  letter-spacing: -.4px;
  line-height: 1.25;
  text-wrap: balance;
}
.md-typeset h1 {
  font-weight: 800;
  font-size: 2.1em;
  line-height: 1.15;
  margin: 0 0 var(--mt-s3);
  max-width: 20ch;
}
.md-typeset h2 {
  font-weight: 700;
  font-size: 1.5em;
  max-width: 68ch;
  margin: var(--mt-s6) 0 var(--mt-s2);
  padding-top: var(--mt-s2);
  border-top: 1px solid var(--mt-line);   /* a quiet section rule, aligned to the measure */
}
.md-typeset h2:first-of-type {
  margin-top: var(--mt-s2);
  padding-top: 0;
  border-top: 0;
}
.md-typeset h3 {
  font-weight: 700;
  font-size: 1.2em;
  letter-spacing: -.2px;
  margin: var(--mt-s4) 0 var(--mt-s1);
}
.md-typeset h4 {
  font-weight: 700;
  font-size: 1em;
  letter-spacing: 0;
  margin: var(--mt-s3) 0 var(--mt-s1);
}

/* Code: a hair below body, comfortable leading, rounded to the brand radius. */
.md-typeset code { font-size: .82em; padding: .12em .4em; border-radius: 6px; }
.md-typeset pre > code { font-size: .78rem; line-height: 1.65; }
.md-typeset .highlight,
.md-typeset pre { margin: 0 0 var(--mt-s3); }
.md-typeset pre > code,
.md-typeset .highlight > pre { border-radius: 14px; }

/* Admonition (the "Developer preview" banner) + details: brand radius + rhythm. */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 14px;
  margin: var(--mt-s3) 0 var(--mt-s4);
}

/* Tables: roomier cells on the 8pt scale (borders are themed above). */
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  padding: var(--mt-s1) var(--mt-s2);
}

/* Content column: a touch more breathing room top/bottom. */
.md-typeset > :first-child { margin-top: 0; }
.md-content__inner { padding-top: var(--mt-s2); padding-bottom: var(--mt-s7); }

/* ---- header: drop Material's default book logo (owner, 2026-07-27) -------- */
.md-header__button.md-logo,
.md-nav__button.md-logo { display: none; }
.md-header__title { margin-left: .3rem; }

/* ---- sidebar + table of contents: more air between items ------------------ */
.md-nav { line-height: 1.6; font-size: .74rem; }
.md-nav__item .md-nav__link { padding-top: .3rem; padding-bottom: .3rem; }
.md-nav__title { font-weight: 700; }

/* ---- muretai ribbon (overrides/main.html) -------------------------------- */
.mt-bar {
  display: flex;
  align-items: center;
  gap: var(--mt-s3);
  flex-wrap: wrap;
  padding: 10px var(--mt-s3);
  background: var(--mt-bg);
  border-bottom: 1px solid var(--mt-line);
  font-family: var(--mt-sans);
}
.mt-word { color: var(--mt-ink); font-weight: 800; font-size: 17px; letter-spacing: -.2px; }
.mt-word:hover { text-decoration: none; }
.mt-dot { color: var(--mt-accent); }
.mt-nav { display: none; gap: 20px; margin-right: auto; }
.mt-nav a { color: var(--mt-muted); font-weight: 600; font-size: 13.5px; }
.mt-nav a:hover { color: var(--mt-ink); text-decoration: none; }
.mt-nav a.mt-here { color: var(--mt-ink); }
.mt-cta { margin-left: auto; color: var(--mt-link); font-weight: 600; font-size: 13.5px; white-space: nowrap; }
@media (min-width: 720px) {
  .mt-nav { display: flex; }
  .mt-cta { margin-left: 0; }
}

/* ================= generator-authored figures (raw HTML) ================== */
/* CSS-only by necessity: the docs CSP allows no page script beyond analytics, so
 * every mark is a positioned element. Colours come only from the brand tokens —
 * --mt-accent for a turn that found mail, --mt-warn for one that found nothing;
 * both clear 3:1 on either ground, the WCAG floor for non-text. */
.md-typeset .fig { margin: 0 0 2rem; }
.md-typeset .fig-scroll { overflow-x: auto; }
.md-typeset figcaption {
  color: var(--mt-muted); font-size: 14.5px; line-height: 1.55;
  margin-top: 1rem; max-width: 68ch;
}
.md-typeset .trace {
  min-width: 620px; background: var(--mt-panel); border: 1px solid var(--mt-line);
  border-radius: 16px; padding: 24px 24px 16px;
}
.md-typeset .ruler {
  display: flex; justify-content: space-between; font: 11.5px var(--md-code-font-family);
  color: var(--mt-muted); padding-left: 150px; margin-bottom: 8px;
}
.md-typeset .trow { display: flex; align-items: flex-end; gap: 16px; padding: 10px 0; }
.md-typeset .trow + .trow { border-top: 1px solid var(--mt-line); }
.md-typeset .arrivals { padding-bottom: 16px; }
.md-typeset .tlabel { width: 134px; flex: none; font: 12.5px/1.35 var(--md-code-font-family); color: var(--mt-ink); }
.md-typeset .tlabel small { display: block; font-size: 11px; color: var(--mt-muted); }
.md-typeset .track { position: relative; flex: 1; height: 34px; border-bottom: 1px solid var(--mt-line); }
.md-typeset .arrivals .track { height: 26px; border-bottom: 0; }
.md-typeset .tcost {
  width: 106px; flex: none; text-align: right; font: 13px var(--md-code-font-family);
  font-variant-numeric: tabular-nums; line-height: 1.3;
}
.md-typeset .tcost small {
  display: block; font-size: 10.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--mt-muted);
}
.md-typeset .tcost.good { color: var(--mt-accent); }
.md-typeset .tcost.bad { color: var(--mt-warn); }
.md-typeset .mail {
  position: absolute; bottom: 0; width: 9px; height: 9px;
  transform: translateX(-50%) rotate(-45deg);
  border-left: 2px solid var(--mt-ink); border-bottom: 2px solid var(--mt-ink);
}
.md-typeset .mlabel {
  position: absolute; bottom: 15px; transform: translateX(-50%); font-weight: 400;
  font: 10.5px var(--md-code-font-family); color: var(--mt-muted); white-space: nowrap;
}
.md-typeset .fire { position: absolute; bottom: 0; width: 3px; transform: translateX(-50%); border-radius: 1px 1px 0 0; }
.md-typeset .fire.hit { background: var(--mt-accent); height: 26px; }
.md-typeset .fire.miss { background: var(--mt-warn); height: 11px; }
.md-typeset .pulse {
  position: absolute; left: 0; right: 0; bottom: 0; height: 11px;
  background: repeating-linear-gradient(to right, var(--mt-warn) 0 2px, transparent 2px 16.66px);
}
.md-typeset .wait { position: absolute; bottom: 3px; height: 2px; background: var(--mt-line); }
.md-typeset .tkey {
  display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px;
  padding-top: 16px; border-top: 1px solid var(--mt-line);
  font: 11.5px var(--md-code-font-family); color: var(--mt-muted);
}
.md-typeset .tkey span { display: flex; align-items: center; gap: 6px; }
.md-typeset .tkey i { flex: none; }
.md-typeset .k-hit, .md-typeset .k-miss { width: 3px; height: 14px; border-radius: 1px; }
.md-typeset .k-hit { background: var(--mt-accent); }
.md-typeset .k-miss { background: var(--mt-warn); }
.md-typeset .k-wait { width: 16px; height: 2px; background: var(--mt-line); }
.md-typeset .k-mail {
  width: 8px; height: 8px; transform: rotate(-45deg); margin: 0 3px;
  border-left: 2px solid var(--mt-ink); border-bottom: 2px solid var(--mt-ink);
}
.md-typeset .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(216px, 1fr)); gap: 16px; }
.md-typeset .stat { background: var(--mt-panel); border: 1px solid var(--mt-line); border-radius: 16px; padding: 24px; }
.md-typeset .stat-h {
  margin: 0 0 8px; font: 11.5px var(--md-code-font-family); letter-spacing: .06em;
  text-transform: uppercase; color: var(--mt-muted);
}
.md-typeset .stat-n {
  margin: 0 0 8px; font: 400 34px/1 var(--md-code-font-family);
  font-variant-numeric: tabular-nums; letter-spacing: -1px; color: var(--mt-ink);
}
.md-typeset .stat-n span { font-size: 15px; color: var(--mt-muted); letter-spacing: 0; margin-left: 6px; }
.md-typeset .stat-n.good { color: var(--mt-accent); }
.md-typeset .stat-n.bad { color: var(--mt-warn); }
.md-typeset .stat-b { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--mt-muted); }
@media (max-width: 560px) {
  .md-typeset .trace { padding: 16px; }
}