/* ==========================================================================
   Docs-surface brand — "black premium" chrome (2026-08) on the Material
   documentation pages.

   Loaded site-wide by the overlay (mkdocs.home.yml `extra_css: assets/brand.css`)
   onto the plain Material docs surface. It re-skins Material's header to the
   landing's near-black hairline bar (the SAME dark bar in both schemes, so the
   chrome never jumps when crossing landing <-> docs), styles the SaaS-style
   top nav that partials/source.html renders in the header's source slot, and
   re-tokens both color schemes' bodies to achromatic neutrals (white reading
   ground light / neutral-grey dark). The palette follows the visitor's OS
   preference by default, with a header toggle to override — the scheme pair is
   configured in mkdocs.home.yml.

   Scope note: this is the docs surface ONLY. The baldur.sh landing is a
   standalone static page with its own stylesheet (web/root/landing/landing.css)
   — it does NOT load this file, and this file carries none of the landing
   sections. The `--bd-*` tokens below are duplicated from landing.css's fuller
   `:root` token block (the only shared values the docs chrome references); a
   brand-look change touches both files. See landing.css's header comment —
   including its alignment-contract block: the pixel mappings in this file
   (57.6rem grid, header insets, wordmark/nav sizes) mirror the landing's
   72rem/1.2rem/0.85rem metrics on Material's 20px root and must move with
   them, never alone.
   ========================================================================== */

/* ----- Shared brand tokens (see landing.css for the full palette) -------- */
:root {
  --bd-ink: #151515;        /* primary text / dark fills (light docs body) */
  --bd-ash: #5f5f5f;        /* secondary text (light docs body) */
  --bd-rule: #e6e6e6;       /* hairline on light (docs body) */
  /* chrome (header) — the landing's dark ground, both schemes */
  --bd-ground: #0a0b0d;
  --bd-chrome-rule: #17181c;
  --bd-bone: #f0f2f5;
  --bd-chrome-dim: #7e8695;
}

/* ----- Typography: the landing's typeface on the docs surface -------------
   Same self-hosted variable font file the landing ships (mkdocs.home.yml sets
   `font: false`, so Material loads no Google-Fonts Roboto). Material appends
   its own system fallbacks after var(--md-text-font). */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../landing/fonts/schibsted-grotesk-latin-var.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../landing/fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../landing/fonts/ibm-plex-mono-latin-500.woff2") format("woff2");
}

:root {
  --md-text-font: "Schibsted Grotesk";
  --md-code-font: "IBM Plex Mono";
}

/* ----- Header: one dark chrome for BOTH schemes ---------------------------
   Material paints the header with --md-primary-fg-color and its text with
   --md-primary-bg-color. `body[data-md-color-scheme=...]` (0,1,1) matches
   Material's own `[data-md-color-primary=indigo]` (0,1,0) and wins, so the
   named-palette default never shows. The header is the landing's near-black
   bar in both schemes — the chrome stays constant while only the reading
   surface below follows the scheme, so crossing landing <-> docs never
   flashes a white bar. */
body[data-md-color-scheme="default"],
body[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--bd-ground);
  --md-primary-fg-color--light: #121317;
  --md-primary-fg-color--dark: #08090b;
  --md-primary-bg-color: rgba(240, 242, 245, 0.92);
  --md-primary-bg-color--light: rgba(240, 242, 245, 0.56);
}

body[data-md-color-accent] {
  --md-accent-fg-color: #151515;
}

[data-md-color-scheme="slate"][data-md-color-accent],
body[data-md-color-scheme="slate"] {
  --md-accent-fg-color: #ffffff;
}

/* The dark header needs an edge, not an elevation: hairline instead of the
   Material drop shadow (same line in both schemes — the bar is the same). */
.md-header {
  box-shadow: none;
  border-bottom: 1px solid var(--bd-chrome-rule);
}

/* Search field on the flat dark header: quiet recessed well (both schemes —
   the bar is the same). */
.md-search__form {
  background-color: rgba(255, 255, 255, 0.06);
}

.md-search__form:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

/* NOTE on wide viewports: Material scales its root font up on wide screens
   (137.5% at >=100em, 150% at >=125em) — kept as-is for readability. The
   landing mirrors the same ramp (110%/120% of its 16px root — see
   landing.css), so both surfaces scale together and stay px-identical. */

/* ----- Shell: align the docs grid to the landing rail ---------------------
   The landing bands are 72rem at a 16px root = 1152px; Material's rem is 20px,
   so the same rail is 57.6rem here. This puts the header content and the
   sidebar/content shell on the exact alignment rail the landing uses, so the
   wordmark and nav don't jump when crossing landing <-> docs. */
.md-grid {
  max-width: 57.6rem;
}

/* Match the landing header's height (57px) and side insets, so the wordmark
   and the right nav land on the landing's exact x-positions. */
.md-header__inner {
  padding: 0.225rem 0.95rem 0.225rem 0.75rem;
}

/* ----- Chrome: wordmark as the home link ----------------------------------
   partials/logo.html renders the "Baldur" wordmark inside Material's header
   home anchor, so the brand text is clickable (-> site root, the landing).
   The plain-text .md-header__title duplicate and the drawer logo are hidden. */
.md-header__button.md-logo {
  padding: 0.4rem 0;
}

.md-header__button.md-logo .bd-wordmark {
  /* 0.84rem at the 20px root = 16.8px — the landing wordmark's exact size,
     with the same face, tracking, and color (landing .bd-wordmark:
     1.05rem/-0.01em/var(--bd-bone)). Fixed color, not currentColor: the
     header's own text color is an rgba mix that would render the wordmark
     slightly lighter than the landing's. Same in both schemes — the bar is
     the same. */
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--bd-bone);
  white-space: nowrap;
}

/* Hover: the landing dims its wordmark to 85% (.bd-wordmark:hover), Material's
   header-button default is 70% — pin the end state to the landing's. The 0.25s
   fade stays: the neighboring header buttons use it, and only the settled
   opacity needs to match. */
.md-header__button.md-logo:hover {
  opacity: 0.85;
}

/* visibility (not display): the title is the header's flex spacer, so it must
   keep its box to push the palette toggle and the SaaS nav to the right edge. */
.md-header__title {
  visibility: hidden;
}

.md-nav__button.md-logo {
  display: none;
}

/* ----- Typography: weighted headings (Material's default h1 is thin grey) - */
.md-typeset h1 {
  font-weight: 800;
  letter-spacing: -0.015em;
}

.md-typeset h2 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ----- Light scheme: white ground, achromatic ----------------------------
   The compound [data-md-color-primary] variant matches Material's own
   scheme+primary token rules in specificity so the brand values win. Links
   are ink + underline (hue never marks navigation on the achromatic
   surface; the underline does). */
[data-md-color-scheme="default"],
[data-md-color-scheme="default"][data-md-color-primary] {
  --md-default-bg-color: #ffffff;
  --md-default-fg-color: rgba(21, 21, 21, 0.87);
  --md-default-fg-color--light: rgba(21, 21, 21, 0.6);
  --md-default-fg-color--lighter: rgba(21, 21, 21, 0.32);
  --md-default-fg-color--lightest: rgba(21, 21, 21, 0.07);
  --md-typeset-color: #1f1f1f;
  --md-typeset-a-color: #151515;
  --md-code-bg-color: #f6f6f7;
  --md-code-fg-color: #1f1f1f;
  --md-footer-bg-color: #f6f6f7;
  --md-footer-bg-color--dark: #f6f6f7;
  --md-footer-fg-color: #1f1f1f;
  --md-footer-fg-color--light: #5f5f5f;
  --md-footer-fg-color--lighter: #8c8c8c;
}

[data-md-color-scheme="default"] .md-typeset h1,
[data-md-color-scheme="default"] .md-typeset h2 {
  color: #151515;
}

/* Body links carry an always-on underline — on an achromatic page the
   underline, not a hue, is what says "link". Nav/TOC links keep Material's
   quiet treatment (they read as chrome, not prose). */
.md-typeset a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.md-typeset a.md-button,
.md-typeset .md-tabs a,
.md-typeset a.headerlink {
  text-decoration: none;
}

/* The footer sits on the landing's grey band in the light scheme — hairline
   on top, no dark slab. */
[data-md-color-scheme="default"] .md-footer,
[data-md-color-scheme="default"] .md-footer-meta {
  border-top: 1px solid var(--bd-rule);
}

/* ----- Dark scheme: neutral-grey ink (the console's ground family) -------- */
[data-md-color-scheme="slate"],
[data-md-color-scheme="slate"][data-md-color-primary] {
  --md-default-bg-color: #131313;
  --md-default-fg-color: rgba(236, 236, 236, 0.92);
  --md-default-fg-color--light: rgba(236, 236, 236, 0.66);
  --md-default-fg-color--lighter: rgba(236, 236, 236, 0.36);
  --md-default-fg-color--lightest: rgba(236, 236, 236, 0.1);
  --md-typeset-color: #d9d9d9;
  --md-typeset-a-color: #ececec;
  --md-code-bg-color: #1c1c1c;
  --md-code-fg-color: #e3e3e3;
  --md-footer-bg-color: #0f0f0f;
  --md-footer-bg-color--dark: #0c0c0c;
}

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2 {
  color: #f0f0f0;
}

/* ----- Buttons: CTA visibility on both achromatic grounds -----------------
   Material colors `.md-button` with --md-primary-fg-color, which is now the
   header ground (white / near-black) in both schemes — unusable as a button
   color on its own ground. Re-point both schemes to the ink-fill family the
   landing uses (primary = solid ink / bone, plain = hairline outline). The
   :focus/:hover rule must be restated because the plain-button override
   below ties on specificity with Material's own hover rule and this sheet
   loads later, which would otherwise freeze hover colors. */
[data-md-color-scheme="default"] .md-typeset .md-button {
  color: var(--bd-ink);
  border-color: var(--bd-rule);
}

[data-md-color-scheme="default"] .md-typeset .md-button--primary {
  background-color: var(--bd-ink);
  border-color: var(--bd-ink);
  color: #ffffff;
}

[data-md-color-scheme="default"] .md-typeset .md-button:focus,
[data-md-color-scheme="default"] .md-typeset .md-button:hover {
  background-color: #383838;
  border-color: #383838;
  color: #ffffff;
}

[data-md-color-scheme="slate"] .md-typeset .md-button {
  color: #ececec;
  border-color: #3a3a3a;
}

[data-md-color-scheme="slate"] .md-typeset .md-button--primary {
  background-color: #ececec;
  border-color: #ececec;
  color: #131313;
}

[data-md-color-scheme="slate"] .md-typeset .md-button:focus,
[data-md-color-scheme="slate"] .md-typeset .md-button:hover {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #131313;
}

/* ----- Header: SaaS-style top nav (replaces the repo/stars widget) ------- */
.md-header__source {
  width: auto;
  max-width: none;
}

/* Sizes are the landing's rendered pixels re-based to Material's 20px root
   (landing px / 20), so the nav renders px-identical on both surfaces:
   links 13.6px, gap 19.2px, CTA padding 5.12x13.6px, icon 19.2px. */
.bd-headnav {
  display: flex;
  align-items: center;
  gap: 0.96rem;
  justify-content: flex-end;
}

.bd-headnav__link {
  color: var(--bd-chrome-dim);
  font-size: 0.68rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 120ms;
}

.bd-headnav__link:hover {
  color: var(--bd-bone);
}

.bd-headnav__cta {
  padding: 0.256rem 0.68rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--bd-bone);
  color: var(--bd-ground);
}

.bd-headnav__cta:hover {
  background: #ffffff;
  color: var(--bd-ground);
}

.bd-headnav__icon {
  display: inline-flex;
  align-items: center;
  color: var(--bd-chrome-dim);
  transition: color 120ms;
}

.bd-headnav__icon:hover {
  color: var(--bd-bone);
}

.bd-headnav__icon svg {
  width: 0.96rem;
  height: 0.96rem;
  fill: currentColor;
}