/* ============================================================
   Memseek documentation — Material for MkDocs, re-tinted to the
   marketing site's design tokens.

   The token block below is lifted from marketing/src/styles/site.css
   so the docs and the website are visibly the same product. If you
   change a value there, change it here too.

   Everything under the token block maps a Material variable onto a
   site token, or restyles one Material component to match a piece of
   the site's chrome. The bias throughout is readability: these are
   reference pages people read for twenty minutes, not a landing page
   they scan for twenty seconds. Where the site's styling and legibility
   disagreed, legibility won — noted at each such spot.
   ============================================================ */

/* ============================================================
   Prose face — Inter v4, self-hosted
   ============================================================

   docs.cognee.ai asks for four of Inter's legibility character variants.
   Copying that line alone would have done nothing: Google Fonts serves a cut
   of Inter with the character variants stripped, and `theme.font.text: Inter`
   fetches exactly that cut. Checked rather than assumed — the Google file
   carries only calt, ccmp, dnom, frac, kern, locl, mark, mkmk, numr, pnum,
   tnum, and a lone wght axis. No cv01-cv14, no opsz. The declaration is dead
   CSS on cognee's own site for the same reason: their build pulls Inter from
   Google too, and ships a byte-identical file.

   So the face comes from the upstream v4.1 release instead, subset to the
   Latin ranges and served from here. That buys the two things the Google cut
   cannot do:

     cv02  open 4   — the closed default fills in at body size
     cv03  open 6   ┐ the pair that stops 6/8 and 9/8 from trading places
     cv04  open 9   ┘ in a version string, a port, or a byte count
     cv11  single-storey a — resolves against the double-storey g and o

     opsz  optical size — the axis Google drops. Inter v4 redraws itself
           across 14-32pt: open apertures and looser spacing down at body
           size, tighter fit up at display size. `font-optical-sizing: auto`
           is the default, so headings and prose each get the right cut for
           free once the axis is actually present in the file.

   Latin and Latin-ext are split so a page of English prose pulls 71K, not
   197K. Google's Inter stays last in the stack as a fallback; because no
   element resolves to it, its woff2 is never fetched. Licence: OFL-1.1,
   alongside the files in fonts/. */

@font-face {
  font-family: "InterVariable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-v4-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "InterVariable";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-v4-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "InterVariable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-v4-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: "InterVariable";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/inter-v4-latin-ext-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* Material builds its text stack as var(--md-text-font, _) plus system
   fallbacks, so redirecting that one variable moves every piece of prose onto
   the self-hosted face without touching the theme's own rules. */
:root {
  --md-text-font: "InterVariable", "Inter";
}

/* Feature settings inherit, so one declaration at the root reaches prose,
   tables, and chrome alike. Material resets code, kbd, and pre to "kern" on
   its own, which is what we want — these are Inter's variants, and the mono
   faces should keep their defaults. */
html {
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

:root {
  --ms-orange: #ff7a2f;
  --ms-pink: #ff3d67;
  --ms-cyan: #2fd4c4;
  --ms-violet: #9b87ff;
  --ms-green: #58d68d;
  --ms-amber: #ffb14d;
  --ms-grad: linear-gradient(120deg, var(--ms-orange), var(--ms-pink));

  /* Display face: headings, nav, table headers, buttons — the site's voice.
     Prose stays on Inter (declared via theme.font.text). */
  --ms-display: "JetBrains Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo,
    Consolas, monospace;

  /* Code face — deliberately NOT JetBrains Mono. Thirteen pages here draw
     ASCII schematics with box-drawing glyphs (U+2500–257F), and Google Fonts
     serves JetBrains Mono without that range. A missing glyph falls back
     per-character to another font, the columns stop lining up, and the
     diagram is destroyed. Every family below covers the range at a single
     fixed width, so the schematics hold. */
  --ms-code: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
    "DejaVu Sans Mono", "Liberation Mono", monospace;

  /* Reading measure for running prose. Tables, code, and diagrams are exempt
     and use the full content column — this is the one knob that decides how
     long a line of text gets.

     Matched to cognee's, in pixels rather than in units: their column is
     Tailwind's max-w-xl, 36rem against a 16px root, so 576px. Same face at
     the same size means the same line — about 72 characters, inside the
     45-75 that typography guidance puts comfortable reading in. Material's
     root is 125%, so 576px is 28.8rem here, not 36rem.

     This, not the font size, is what was making these pages tiring: the old
     36rem against a 20px root was 720px, running lines past 95 characters. */
  --ms-measure: 28.8rem;
}

/* ---------- dark scheme (site parity: this is the default) ---------- */
[data-md-color-scheme="slate"] {
  --ms-bg: #0c0e11;
  --ms-surface: #12161b;
  --ms-surface-2: #1a1f27;
  --ms-border: #232a33;
  --ms-border-strong: #33404c;
  --ms-text: #e8eaed;
  --ms-muted: #9aa1ab;
  --ms-faint: #7d8794;
  --ms-code-bg: #0f1318;

  --md-default-bg-color: var(--ms-bg);
  --md-default-fg-color: var(--ms-text);
  --md-default-fg-color--light: var(--ms-muted);
  --md-default-fg-color--lighter: var(--ms-faint);
  --md-default-fg-color--lightest: #3a434e;
  --md-typeset-color: var(--ms-text);
  --md-typeset-a-color: var(--ms-cyan);
  --md-typeset-mark-color: rgba(255, 177, 77, 0.22);

  /* Header and footer sit on the page background, separated by a hairline —
     the site's chrome, not Material's colored bar. */
  --md-primary-fg-color: var(--ms-bg);
  --md-primary-fg-color--light: var(--ms-surface);
  --md-primary-fg-color--dark: var(--ms-bg);
  --md-primary-bg-color: var(--ms-text);
  --md-primary-bg-color--light: var(--ms-muted);
  --md-accent-fg-color: var(--ms-orange);
  --md-accent-fg-color--transparent: rgba(255, 122, 47, 0.1);
  --md-accent-bg-color: #16090b;

  --md-code-bg-color: var(--ms-code-bg);
  --md-code-fg-color: var(--ms-text);
  --md-footer-bg-color: var(--ms-bg);
  --md-footer-bg-color--dark: var(--ms-bg);
  --md-footer-fg-color: var(--ms-text);
  --md-footer-fg-color--light: var(--ms-muted);
  --md-footer-fg-color--lighter: var(--ms-faint);

  --md-shadow-z1: 0 24px 60px -30px rgba(0, 0, 0, 0.8);
  --md-shadow-z2: 0 24px 60px -30px rgba(0, 0, 0, 0.85);
  --md-shadow-z3: 0 28px 70px -30px rgba(0, 0, 0, 0.9);
}

/* ---------- light scheme ---------- */
[data-md-color-scheme="default"] {
  --ms-bg: #f7f7f5;
  --ms-surface: #ffffff;
  --ms-surface-2: #f1f2ef;
  --ms-border: #e3e4df;
  --ms-border-strong: #cfd1ca;
  --ms-text: #16191c;
  --ms-muted: #55606a;
  --ms-faint: #666f78;
  --ms-code-bg: #fbfbf9;

  /* The light palette's accents, darkened for contrast on a pale ground —
     same values the site uses in its light theme. */
  --ms-orange: #e0641c;
  --ms-pink: #e02a54;
  --ms-cyan: #0e9e90;
  --ms-violet: #6d4ae0;
  --ms-green: #1f9d57;
  --ms-amber: #c07d16;

  --md-default-bg-color: var(--ms-bg);
  --md-default-fg-color: var(--ms-text);
  --md-default-fg-color--light: var(--ms-muted);
  --md-default-fg-color--lighter: var(--ms-faint);
  --md-default-fg-color--lightest: #b8bcb4;
  --md-typeset-color: var(--ms-text);
  --md-typeset-a-color: var(--ms-cyan);
  --md-typeset-mark-color: rgba(192, 125, 22, 0.2);

  --md-primary-fg-color: var(--ms-bg);
  --md-primary-fg-color--light: var(--ms-surface);
  --md-primary-fg-color--dark: var(--ms-bg);
  --md-primary-bg-color: var(--ms-text);
  --md-primary-bg-color--light: var(--ms-muted);
  --md-accent-fg-color: var(--ms-orange);
  --md-accent-fg-color--transparent: rgba(224, 100, 28, 0.1);
  --md-accent-bg-color: #ffffff;

  --md-code-bg-color: var(--ms-code-bg);
  --md-code-fg-color: var(--ms-text);
  --md-footer-bg-color: var(--ms-bg);
  --md-footer-bg-color--dark: var(--ms-bg);
  --md-footer-fg-color: var(--ms-text);
  --md-footer-fg-color--light: var(--ms-muted);
  --md-footer-fg-color--lighter: var(--ms-faint);

  --md-shadow-z1: 0 20px 50px -30px rgba(20, 30, 45, 0.28);
  --md-shadow-z2: 0 20px 50px -30px rgba(20, 30, 45, 0.32);
  --md-shadow-z3: 0 24px 60px -30px rgba(20, 30, 45, 0.36);
}

/* ---------- syntax highlighting ---------- */
/* Material's default token colors are a different palette from the site's.
   These map each token class onto a site accent, so a code block reads as
   part of the same design in either scheme. */
[data-md-color-scheme="slate"],
[data-md-color-scheme="default"] {
  --md-code-hl-color: rgba(255, 122, 47, 0.16);
  --md-code-hl-number-color: var(--ms-amber);
  --md-code-hl-special-color: var(--ms-pink);
  --md-code-hl-function-color: var(--ms-cyan);
  --md-code-hl-constant-color: var(--ms-violet);
  --md-code-hl-keyword-color: var(--ms-violet);
  --md-code-hl-string-color: var(--ms-green);
  --md-code-hl-name-color: var(--ms-text);
  --md-code-hl-operator-color: var(--ms-muted);
  --md-code-hl-punctuation-color: var(--ms-muted);
  --md-code-hl-comment-color: var(--ms-faint);
  --md-code-hl-generic-color: var(--ms-muted);
  --md-code-hl-variable-color: var(--ms-text);
}

::selection {
  background: rgba(255, 122, 47, 0.28);
}

/* ============================================================
   Layout
   ============================================================ */

/* Wider than Material's 61rem default: reference pages here carry wide tables
   and ASCII schematics that were being scrolled horizontally on a desktop
   screen. Running text does not get wider with it — see --ms-measure below. */
.md-grid {
  max-width: 68rem;
}

/* ============================================================
   Typography
   ============================================================ */

/* The reading system here is Mintlify's, the stack docs.cognee.ai runs on,
   translated out of Tailwind into Material's variables. Their numbers, read
   off the shipped stylesheet:

     body        1rem / 16px, line-height 1.75, letter-spacing -0.0125rem
     column      max-w-xl, 36rem / 576px  →  about 72 characters
     h1..h4      2.25 / 1.5 / 1.25 / 1.125em, weight 800/700/600/600
     code, pre   0.875em, pre at line-height 1.714
     tables      0.875em, line-height 1.714

   Material's root is 125%, so 1rem is 20px here and their 16px body is our
   0.8rem. That is a hair under the 16.4px this ran at originally — the size
   was never what made these pages tiring; the 95-character line was.

   The negative tracking is not decoration. Inter ships loose by default for
   UI use, and at paragraph sizes a touch of tightening closes the word
   spacing enough that lines read as lines. It is set in em so it tracks the
   font size instead of the root. */
.md-typeset {
  font-size: 0.8rem;
  line-height: 1.75;
  letter-spacing: -0.0125em;
}

.md-typeset p,
.md-typeset ul,
.md-typeset ol,
.md-typeset blockquote,
.md-typeset > .admonition,
.md-typeset > details,
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  max-width: var(--ms-measure);
}

/* Nested lists inherit the cap from their parent; re-applying it here would
   compound the indent into an ever-narrower column. */
.md-typeset li ul,
.md-typeset li ol,
.md-typeset li p,
.md-typeset .admonition p,
.md-typeset .admonition ul,
.md-typeset .admonition ol,
.md-typeset details p,
.md-typeset details ul,
.md-typeset details ol,
.md-typeset .tabbed-block p,
.md-typeset .tabbed-block ul,
.md-typeset .tabbed-block ol {
  max-width: none;
}

/* --- headings: the site's mono display face --- */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: var(--ms-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  /* Leading loosens as the headings get smaller, following cognee's 1.11 /
     1.33 / 1.4 / 1.5 ladder. A flat value cannot serve both ends: what stops
     a 36px display line from drifting apart is the same value that jams two
     wrapped lines of an 18px h4 together. */
  line-height: 1.2;
  text-wrap: balance;
  color: var(--ms-text);
}

.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  line-height: 1.4;
}

/* cognee's steps are 2.25 / 1.5 / 1.25 / 1.125em off a 16px body — 36, 24,
   20, 18px. The scale this site already shipped was 35, 24.4, 20, 17px, so
   the two were the same ladder all along; these are theirs, rounded onto our
   20px root. Weights descend the way theirs do, except at h1: 800 is drawn
   for Inter, and JetBrains Mono at that weight closes up its counters. */
.md-typeset h1 {
  font-size: 1.8rem;
  letter-spacing: -0.035em;
  margin-bottom: 1.2rem;
}

.md-typeset h2 {
  font-size: 1.2rem;
  margin-top: 2.6em;
}

/* A rule above every h2 — long reference pages need the section breaks to be
   findable while scrolling, not just while reading. */
.md-typeset h2::before {
  content: "";
  display: block;
  width: 2.4rem;
  height: 2px;
  margin-bottom: 0.9rem;
  background: var(--ms-grad);
  opacity: 0.75;
}

.md-typeset h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 2em;
}

.md-typeset h4 {
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 1.8em;
  color: var(--ms-muted);
}

/* The `¶` permalink is chrome: it stays out of the way until the heading is
   hovered or the link is focused by keyboard. */
.md-typeset .headerlink {
  color: var(--ms-faint);
  opacity: 0;
  transition: opacity 0.15s;
}

.md-typeset :is(h1, h2, h3, h4, h5, h6):hover .headerlink,
.md-typeset .headerlink:focus-visible {
  opacity: 1;
  color: var(--ms-orange);
}

/* --- the `eyebrow:` front-matter kicker, rendered by overrides/main.html --- */
.ms-eyebrow {
  font-family: var(--ms-display);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ms-orange);
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin: 0 0 0.4rem;
  padding-top: 1.2rem;
}

.ms-eyebrow::before {
  content: "";
  width: 2.4em;
  height: 2px;
  background: var(--ms-orange);
  opacity: 0.7;
  flex: none;
}

/* The eyebrow now supplies the top spacing for the page. */
.ms-eyebrow + .md-content__inner > h1:first-child,
.ms-eyebrow ~ .md-content__inner .md-typeset h1 {
  margin-top: 0;
}

/* --- inline --- */
.md-typeset a {
  text-decoration: none;
}

.md-typeset a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.md-typeset strong {
  font-weight: 600;
  color: var(--ms-text);
}

.md-typeset em {
  color: var(--ms-muted);
}

.md-typeset hr {
  border-color: var(--ms-border);
  margin-block: 2.6em;
}

.md-typeset li::marker {
  color: var(--ms-orange);
  font-family: var(--ms-display);
}

.md-typeset li + li {
  margin-top: 0.4em;
}

.md-typeset blockquote {
  border-left: 2px solid var(--ms-orange);
  color: var(--ms-muted);
  padding-left: 1.2em;
}

/* ============================================================
   Code
   ============================================================ */

/* The prose tracking must not reach here. letter-spacing inherits, and adding
   even a fraction of a pixel between mono characters is what would break the
   ASCII schematics: the box-drawing runs are aligned by character count, so
   every extra gap accumulates across a row and pulls the columns apart. */
.md-typeset code,
.md-typeset pre,
.md-typeset kbd {
  font-family: var(--ms-code);
  font-variant-ligatures: none;
  letter-spacing: normal;
}

.md-typeset :not(pre) > code {
  background: var(--ms-surface-2);
  color: var(--ms-text);
  border: 1px solid var(--ms-border);
  border-radius: 5px;
  padding: 0.1em 0.36em;
  font-size: 0.875em;
}

/* Inline code inside a link should read as the link, not fight it. */
.md-typeset a > code {
  color: inherit;
  border-color: color-mix(in srgb, currentColor 35%, var(--ms-border));
}

/* cognee's 0.875em and 1.714 leading, which is 14px against the 16px body. */
.md-typeset pre > code {
  font-size: 0.7rem;
  line-height: 1.714;
}

.md-typeset .highlight,
.md-typeset pre {
  max-width: none;
}

.md-typeset .highlight > pre,
.md-typeset pre.literal-block,
.md-typeset .highlighttable {
  border: 1px solid var(--ms-border);
  border-radius: 10px;
  overflow: hidden;
}

.md-typeset .highlight > pre > code {
  border-radius: 10px;
}

/* A schematic must scroll, never reflow: wrapping one destroys the alignment
   the box-drawing glyphs exist to carry. */
.md-typeset div[class^="highlight"] pre,
.md-typeset pre.literal-block,
.md-typeset pre > code {
  white-space: pre;
  overflow-x: auto;
  tab-size: 4;
}

/* The code-block filename label rendered by ```lang title="..." */
.md-typeset .highlight span.filename {
  font-family: var(--ms-display);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ms-faint);
  background: var(--ms-surface-2);
  border: 1px solid var(--ms-border);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
}

.md-typeset .highlight span.filename + pre > code {
  border-radius: 0 0 10px 10px;
}

.md-clipboard {
  color: var(--ms-faint);
}

.md-clipboard:hover {
  color: var(--ms-orange);
}

/* ============================================================
   Tables
   ============================================================ */

/* Tables are exempt from the reading measure — several here are genuinely
   wide, and squeezing them into the prose column only forces a scrollbar. */
.md-typeset .md-typeset__table,
.md-typeset table:not([class]) {
  max-width: none;
}

.md-typeset table:not([class]) {
  border: 1px solid var(--ms-border);
  border-radius: 10px;
  /* The header row is filled; without this it paints square corners over the
     rounded border. The wrapper, not the table, owns horizontal scrolling, so
     clipping here costs nothing. */
  overflow: hidden;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.714;
  box-shadow: none;
}

.md-typeset table:not([class]) th {
  font-family: var(--ms-display);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ms-faint);
  background: var(--ms-surface-2);
  border-bottom: 1px solid var(--ms-border);
  vertical-align: bottom;
}

.md-typeset table:not([class]) td {
  border-top: 1px solid var(--ms-border);
  vertical-align: top;
}

.md-typeset table:not([class]) tr:hover {
  background: color-mix(in srgb, var(--ms-surface-2) 55%, transparent);
}

/* ============================================================
   Admonitions, details, tabs
   ============================================================ */

/* The site's callout: a hairline card with a 2px accent edge and a mono,
   tracked label — not Material's filled bar in Material's palette.

   Each type only sets --ms-callout; the card, the label, and the icon all read
   that one value, so a type can never end up half-recolored. The [class]
   qualifiers exist to match the specificity of Material's own per-type rules
   (.md-typeset .admonition.warning, 0-3-0) — without them Material's colors
   win the border and the label keeps its tinted bar. */
.md-typeset :is(.note, .info, .todo) {
  --ms-callout: var(--ms-cyan);
}
.md-typeset :is(.tip, .success, .check, .done, .abstract, .summary, .tldr) {
  --ms-callout: var(--ms-green);
}
.md-typeset :is(.warning, .caution, .attention) {
  --ms-callout: var(--ms-amber);
}
.md-typeset :is(.danger, .error, .failure, .fail, .missing, .bug) {
  --ms-callout: var(--ms-pink);
}
.md-typeset :is(.example, .question, .help, .faq, .quote, .cite) {
  --ms-callout: var(--ms-violet);
}

.md-typeset .admonition[class],
.md-typeset details[class] {
  background: var(--ms-surface);
  border: 1px solid var(--ms-border);
  border-left: 2px solid var(--ms-callout, var(--ms-cyan));
  border-radius: 8px;
  box-shadow: none;
  font-size: 0.75rem;
}

.md-typeset .admonition[class] > .admonition-title,
.md-typeset details[class] > summary {
  background: transparent;
  border: none;
  font-family: var(--ms-display);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ms-callout, var(--ms-cyan));
}

/* Material draws the type icon as a masked ::before; tint it from the same
   variable so it can never disagree with the label beside it. */
.md-typeset .admonition[class] > .admonition-title::before,
.md-typeset details[class] > summary::before {
  background-color: var(--ms-callout, var(--ms-cyan));
}

.md-typeset .admonition > :last-child,
.md-typeset details > :last-child {
  margin-bottom: 0.6rem;
}

/* --- tabbed content --- */
.md-typeset .tabbed-labels > label {
  font-family: var(--ms-display);
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ms-faint);
}

.md-typeset .tabbed-labels > label:hover,
.md-typeset .tabbed-set > input:checked + label {
  color: var(--ms-orange);
}

/* ============================================================
   Header
   ============================================================ */

.md-header {
  background: color-mix(in srgb, var(--ms-bg) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ms-border);
  box-shadow: none;
}

.md-header--shadow {
  box-shadow: none;
}

.md-header__title {
  font-family: var(--ms-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
}

/* The gradient dot from overrides/partials/logo.html. Material sizes logos
   for a monochrome glyph; this one is a filled circle and reads better small. */
.md-header__button.md-logo {
  padding: 0.4rem 0.2rem 0.4rem 0.4rem;
}

.md-header__button.md-logo :is(img, svg) {
  width: 0.72rem;
  height: 0.72rem;
}

.md-header__topic:first-child {
  font-weight: 700;
}

.md-header__button:hover {
  opacity: 1;
  color: var(--ms-orange);
}

/* --- search --- */
.md-search__form {
  background: var(--ms-surface-2);
  border: 1px solid var(--ms-border);
  border-radius: 8px;
  box-shadow: none;
}

.md-search__form:hover,
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background: var(--ms-surface);
  border-color: var(--ms-border-strong);
}

.md-search__input {
  font-family: var(--ms-display);
  font-size: 0.7rem;
}

.md-search__input::placeholder {
  color: var(--ms-faint);
}

.md-search__output {
  border-radius: 8px;
}

.md-search-result__meta {
  font-family: var(--ms-display);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ms-faint);
  background: transparent;
}

.md-search-result__article .md-search-result__title,
.md-search-result__link:is(:focus, :hover) .md-search-result__title {
  font-family: var(--ms-display);
}

/* ============================================================
   Navigation
   ============================================================ */

.md-nav {
  font-size: 0.68rem;
}

/* Section headings in the sidebar are labels, not links — set them apart the
   way the site sets its eyebrows apart. */
.md-nav__title {
  font-family: var(--ms-display);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ms-faint);
}

.md-nav__link {
  color: var(--ms-muted);
  transition: color 0.12s;
}

.md-nav__link:is(:hover, :focus) {
  color: var(--ms-text);
}

/* The current page: orange text plus a bar in the gutter, so it is findable
   in a sidebar that runs to forty entries. */
.md-nav__item .md-nav__link--active,
.md-nav__item .md-nav__link--active code {
  color: var(--ms-orange);
  font-weight: 600;
}

.md-nav--primary .md-nav__item .md-nav__link--active {
  position: relative;
}

.md-nav--primary .md-nav__item .md-nav__link--active::after {
  content: "";
  position: absolute;
  left: -0.75rem;
  top: 0.25em;
  bottom: 0.25em;
  width: 2px;
  border-radius: 2px;
  background: var(--ms-grad);
}

/* Top-level group labels in the sidebar (navigation.sections is off, so these
   are the expandable section titles). */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link {
  font-family: var(--ms-display);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ms-text);
}

/* --- table of contents (right rail) --- */
.md-nav--secondary .md-nav__title {
  background: transparent;
  box-shadow: none;
}

.md-nav--secondary .md-nav__link--active {
  color: var(--ms-orange);
}

.md-sidebar {
  scrollbar-width: thin;
}

/* ============================================================
   Diagrams
   ============================================================ */

/* Mermaid output is a diagram, not code: Material renders it into an
   unstyled block, so it just needs centering and a scroll floor. */
.md-typeset .mermaid {
  max-width: none;
  margin: 1.6em 0;
  text-align: center;
  overflow-x: auto;
}

.md-typeset .mermaid svg {
  max-width: 100%;
  height: auto;
}

/* ============================================================
   Footer
   ============================================================ */

.md-footer {
  border-top: 1px solid var(--ms-border);
}

.md-footer-meta {
  background: transparent;
}

.md-copyright,
.md-footer__link {
  font-family: var(--ms-display);
  color: var(--ms-faint);
}

.md-copyright__highlight {
  color: var(--ms-muted);
}

.md-footer__title {
  font-family: var(--ms-display);
}

.md-footer__direction {
  color: var(--ms-faint);
}

/* Prev/next are cards, matching the site's bordered surfaces. */
.md-footer__inner {
  margin: 1.4rem auto;
  gap: 0.8rem;
}

.md-footer__link {
  border: 1px solid var(--ms-border);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  margin: 0;
  opacity: 1;
  transition: border-color 0.15s, color 0.15s;
}

.md-footer__link:hover {
  border-color: var(--ms-border-strong);
  color: var(--ms-text);
}

.md-social__link:hover {
  color: var(--ms-orange);
}

/* ============================================================
   Misc
   ============================================================ */

:focus-visible {
  outline: 2px solid var(--ms-orange);
  outline-offset: 3px;
  border-radius: 2px;
}

.md-typeset .md-button {
  font-family: var(--ms-display);
  font-weight: 700;
  font-size: 0.68rem;
  border-radius: 9px;
  border-color: var(--ms-border-strong);
  color: var(--ms-text);
}

.md-typeset .md-button:is(:hover, :focus) {
  background: transparent;
  border-color: var(--ms-violet);
  color: var(--ms-violet);
}

.md-typeset .md-button--primary {
  background: var(--ms-grad);
  border-color: transparent;
  color: #16090b;
}

.md-typeset .md-button--primary:is(:hover, :focus) {
  background: var(--ms-grad);
  border-color: transparent;
  color: #16090b;
  filter: brightness(1.07);
}

/* The instant-navigation progress bar, in the brand gradient. */
.md-progress {
  background: var(--ms-grad);
}

/* Below the sidebar breakpoint the drawer covers the page — give it the
   surface color rather than Material's default white. */
@media screen and (max-width: 76.1875em) {
  .md-nav--primary .md-nav__title {
    background: var(--ms-surface);
    color: var(--ms-text);
    box-shadow: none;
    border-bottom: 1px solid var(--ms-border);
  }

  .md-nav--primary .md-nav__title ~ .md-nav__list {
    box-shadow: none;
  }

  [data-md-toggle="drawer"]:checked ~ .md-container .md-sidebar--primary {
    background: var(--ms-bg);
  }

  /* On a phone the reading column is the viewport; the measure cap would only
     leave a stripe of unused width. */
  .md-typeset :is(p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6) {
    max-width: none;
  }
}