/* ring.css — the lord-the-ring design system (docs chapter). The landing (stylesheets/landing.css, loaded by
   overrides/home.html only) shares these tokens — rename nothing here without telling the landing lane.
   Language: paper + ink neutrals, teal for interaction, EMBER for the ring's own glow (status, active, hero),
   brushed-metal darks ("Mordor") in slate. Inter for prose, JetBrains Mono for anything the ring says. */

/* ------------------------------------------------------------------ 1. tokens */
:root {
  --ink-0: #fbfbf9; --ink-1: #b9b9b4; --ink-2: #5c5c58; --ink-3: #141414;
  --paper: #f3f2ee; --accent: #0e8fa8; --accent-ink: #0a6f83; --hairline: 1px solid rgba(20,20,20,.12); --line: rgba(20,20,20,.12);
  --ember: #ffcf8a; --ember-hot: #ff8a2a; --ember-ink: #9a4a0a; --ember-glow: rgba(255, 140, 42, .45);
  --metal-0: #2c2c2c; --metal-1: #161616; --metal-2: #0c0c0c;
  --ok: #1f7a4d; --lab: #8a5a00; --dead: #9b2c2c;
  --ease: cubic-bezier(.2,.7,.2,1); --fast: 160ms; --slow: 240ms;
  --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 20px;
  --shadow-1: 0 1px 2px rgba(20,20,20,.06), 0 8px 24px -12px rgba(20,20,20,.18);
  --shadow-2: 0 2px 6px rgba(20,20,20,.08), 0 24px 48px -24px rgba(20,20,20,.28);
  --mono: var(--md-code-font-family); --sans: var(--md-text-font-family);
  --fs-eyebrow: .62rem; --fs-meta: .66rem; --fs-body: .8rem; --fs-h3: 1.05rem; --fs-h2: 1.45rem; --fs-h1: 2.35rem;
  --lh-body: 1.65; --measure: 46rem;
  --md-primary-fg-color: var(--paper); --md-accent-fg-color: var(--accent);
}
[data-md-color-scheme="default"] {
  --md-default-bg-color: var(--paper); --md-default-fg-color: var(--ink-3);
  --md-default-fg-color--light: var(--ink-2); --md-default-fg-color--lighter: var(--ink-1);
  --md-default-fg-color--lightest: rgba(20,20,20,.05);
  --md-primary-fg-color: var(--paper); --md-primary-bg-color: var(--ink-3);
  --md-typeset-a-color: var(--accent-ink); --md-code-bg-color: var(--ink-0); --md-code-fg-color: var(--ink-3);
  --md-footer-bg-color: var(--metal-1); --md-footer-bg-color--dark: var(--metal-2); --md-footer-fg-color: #e9e6df;
  --md-footer-fg-color--light: #b9b9b4; --md-footer-fg-color--lighter: #7a7a76;
  --md-typeset-kbd-color: var(--ink-0); --md-typeset-kbd-accent-color: #fff; --md-typeset-kbd-border-color: rgba(20,20,20,.22);
  --md-typeset-table-color: rgba(20,20,20,.10); --md-typeset-table-color--light: rgba(20,20,20,.035);
}
/* slate = Mordor: warm blacks, brushed-metal cards, ember burns brighter, teal lifted to AA on black */
[data-md-color-scheme="slate"] {
  --ink-0: #171614; --ink-1: #5f5c57; --ink-2: #b5b0a7; --ink-3: #f4efe6; --paper: #0e0d0c; --accent-ink: #3fb8cf;
  --hairline: 1px solid rgba(244,239,230,.13); --line: rgba(244,239,230,.13);
  --ember-ink: #ffbf74; --ember-glow: rgba(255, 140, 42, .55);
  --ok: #4fd08a; --lab: #ffc766; --dead: #ff7a7a;
  --shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 12px 32px -12px rgba(0,0,0,.8);
  --shadow-2: 0 2px 6px rgba(0,0,0,.6), 0 30px 60px -24px rgba(0,0,0,.9);
  --md-default-bg-color: var(--paper); --md-default-fg-color: var(--ink-3);
  --md-default-fg-color--light: var(--ink-2); --md-default-fg-color--lighter: var(--ink-1);
  --md-default-fg-color--lightest: rgba(244,239,230,.06);
  --md-primary-fg-color: var(--ink-3); --md-primary-bg-color: var(--paper);
  --md-typeset-a-color: #3cc0d8; --md-accent-fg-color: #3cc0d8; --md-code-bg-color: var(--ink-0); --md-code-fg-color: var(--ink-3);
  --md-footer-bg-color: #090909; --md-footer-bg-color--dark: #050505;
  --md-typeset-kbd-color: #1f1e1b; --md-typeset-kbd-accent-color: #2a2825; --md-typeset-kbd-border-color: rgba(244,239,230,.2);
  --md-typeset-table-color: rgba(244,239,230,.10); --md-typeset-table-color--light: rgba(244,239,230,.035);
  --md-code-hl-color: rgba(255,140,42,.18); --md-code-hl-color--light: rgba(255,140,42,.10);
}
body[data-md-color-scheme="slate"] { background: radial-gradient(120% 60% at 50% -10%, #1a120c 0%, var(--paper) 60%) fixed; }

/* focus: visible, on-brand, everywhere */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.md-typeset a:focus-visible, .md-nav__link:focus-visible, .md-tabs__link:focus-visible { outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ------------------------------------------------------------------ 2. shell: header, tabs, search */
.md-header { position: sticky; top: 0; background: color-mix(in srgb, var(--paper) 82%, transparent); color: var(--ink-3);
  border-bottom: var(--hairline); box-shadow: none; -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.md-header[data-md-state="shadow"], .md-header--shadow { box-shadow: 0 8px 24px -16px rgba(0,0,0,.35); transition: box-shadow var(--slow) var(--ease); }
.md-header__inner { min-height: 2.6rem; }
.md-header__button.md-logo { padding: .3rem; margin: .1rem .2rem .1rem .4rem; }
.md-header__button.md-logo img, .md-header__button.md-logo svg { height: 1.35rem; width: auto; fill: var(--ink-3); }
.md-header__title { font-weight: 650; letter-spacing: -.02em; font-size: .9rem; }
.md-header__topic:first-child { font-weight: 650; }
.md-header__topic + .md-header__topic { color: var(--ink-2); }
.md-header__source { width: auto; max-width: none; }
.md-source__repository { max-width: none; overflow: visible; }
.md-source { font-size: .62rem; color: var(--ink-2); } .md-source:hover { color: var(--ink-3); }
.md-source__facts { display: none; }
.md-header__option .md-header__button { color: var(--ink-2); } .md-header__option .md-header__button:hover { color: var(--ink-3); }
.md-tabs { background: color-mix(in srgb, var(--paper) 82%, transparent); color: var(--ink-3); border-bottom: var(--hairline);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.md-tabs__list { gap: .1rem; }
.md-tabs__item { height: 2.1rem; padding: 0 .55rem; position: relative; }
.md-tabs__link { color: var(--ink-2); opacity: 1; margin-top: .62rem; font-size: .68rem; font-weight: 550; letter-spacing: .005em; transition: color var(--fast); }
.md-tabs__link--active, .md-tabs__link:hover { color: var(--ink-3); }
.md-tabs__item--active::after, .md-tabs__item:has(.md-tabs__link--active)::after { content: ""; position: absolute; left: .55rem; right: .55rem; bottom: -1px; height: 2px;
  background: var(--ember-hot); border-radius: 2px 2px 0 0; box-shadow: 0 0 10px var(--ember-glow); }
.md-search__form { background: var(--ink-0); border: var(--hairline); border-radius: 999px; box-shadow: none; transition: border-color var(--fast), box-shadow var(--fast); }
.md-search__form:hover { background: var(--ink-0); }
[data-md-toggle="search"]:checked ~ .md-header .md-search__form { border-radius: var(--r-3) var(--r-3) 0 0; }
.md-search__input { color: var(--ink-3); font-size: .74rem; } .md-search__input::placeholder, .md-search__icon { color: var(--ink-2); }
.md-search__input + .md-search__icon svg { fill: var(--ink-2); }
.md-search__output { border-radius: 0 0 var(--r-3) var(--r-3); box-shadow: var(--shadow-2); }
.md-search-result__meta { background: var(--ink-0); color: var(--ink-2); font-family: var(--mono); font-size: var(--fs-meta); }
.md-search-result mark { color: var(--ember-ink); background: color-mix(in srgb, var(--ember-hot) 18%, transparent); }
.md-search-result__article { padding-block: .4rem; }

/* ------------------------------------------------------------------ 3. sidebars: left nav + right toc */
.md-sidebar { padding-top: .6rem; }
.md-sidebar__scrollwrap { scrollbar-width: thin; scrollbar-color: var(--ink-1) transparent; }
.md-nav { font-size: .7rem; }
.md-nav__title { color: var(--ink-3); font-weight: 650; }
/* section eyebrows (navigation.sections): the group label reads like a chapter mark */
.md-nav--primary .md-nav__item--section > .md-nav__link, .md-nav--primary > .md-nav__title,
.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link {
  font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; }
.md-nav--primary .md-nav__item--section > .md-nav__link { margin-top: .9rem; }
.md-nav--primary .md-nav__item--section:first-child > .md-nav__link { margin-top: 0; }
.md-nav__link { color: var(--ink-2); margin-top: .1em; padding: .22rem 0; min-height: 1.2rem; box-sizing: border-box; position: relative; transition: color var(--fast); } /* ≥24 px hit target (Lighthouse target-size), same rhythm */
.md-nav__link:hover, .md-nav__link:focus-visible { color: var(--ink-3); }
.md-nav__item .md-nav__link--active, .md-nav__item .md-nav__link--active code { color: var(--ink-3); font-weight: 600; }
/* active glow: a small ember mark left of the current page */
.md-nav--primary .md-nav__item .md-nav__link--active::before { content: ""; position: absolute; left: -.7rem; top: calc(50% - .15rem); width: .3rem; height: .3rem; border-radius: 50%;
  background: var(--ember-hot); box-shadow: 0 0 8px var(--ember-glow); }
.md-nav__item--nested > .md-nav__link[for] { color: var(--ink-3); }
.md-nav__list .md-nav__list { border-left: var(--hairline); margin-left: .1rem; }
@media screen and (min-width: 76.25em) {
  .md-nav--primary .md-nav__item--section > .md-nav__list { padding-left: .9rem; border-left: 0; margin-left: 0; }
  .md-nav--primary .md-nav__item--section > .md-nav__list .md-nav__list { padding-left: .6rem; border-left: var(--hairline); }
}
/* right toc: a thin rule with an active dot that follows (toc.follow) */
.md-nav--secondary > .md-nav__title { font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; box-shadow: none; background: transparent; }
.md-nav--secondary .md-nav__list { border-left: var(--hairline); margin-left: .2rem; }
.md-nav--secondary .md-nav__link { padding-left: .85rem; margin-top: .3em; font-size: .68rem; }
.md-nav--secondary .md-nav__link--active { color: var(--ink-3); }
.md-nav--secondary .md-nav__link--active::before { content: ""; position: absolute; left: -.2rem; top: .5em; width: .32rem; height: .32rem; border-radius: 50%;
  background: var(--ember-hot); box-shadow: 0 0 8px var(--ember-glow); transform: translateX(-50%); }
.md-nav--secondary .md-nav__list .md-nav__list { border-left: 0; margin-left: 0; }
.md-nav--secondary .md-nav__list .md-nav__list .md-nav__link { padding-left: 1.6rem; }
/* mobile drawer */
@media screen and (max-width: 76.1875em) {
  .md-nav--primary .md-nav__title { background: var(--paper); color: var(--ink-3); font-family: var(--sans); text-transform: none; letter-spacing: -.01em; font-size: .8rem; }
  .md-nav--primary .md-nav__title .md-nav__button.md-logo img, .md-nav--primary .md-nav__title .md-nav__button.md-logo svg { fill: var(--ink-3); }
  .md-nav--primary .md-nav__title[for="__drawer"] { background: var(--paper); color: var(--ink-3); }
  .md-nav--primary .md-nav__item { border-top: var(--hairline); }
  .md-nav--primary .md-nav__link { font-size: .78rem; }
  .md-nav--primary .md-nav__item .md-nav__link--active::before { display: none; }
  .md-nav--primary .md-nav__item .md-nav__link--active { color: var(--ember-ink); }
}

/* ------------------------------------------------------------------ 4. content column + typography */
.md-grid { max-width: 78rem; }
.md-main__inner { margin-top: 1.4rem; }
.md-content__inner { padding-bottom: 2rem; }
.md-content__inner > .md-typeset { max-width: var(--measure); }
.md-typeset { font-size: var(--fs-body); line-height: var(--lh-body); }
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4 { color: var(--ink-3); font-weight: 700; letter-spacing: -.03em; text-wrap: balance; }
.md-typeset h1 { font-size: var(--fs-h1); line-height: 1.05; margin: 0 0 .6rem; letter-spacing: -.035em; }
.md-typeset h2 { font-size: var(--fs-h2); line-height: 1.2; margin: 2.4em 0 .7em; padding-top: .2em; }
.md-typeset h3 { font-size: var(--fs-h3); line-height: 1.3; margin: 1.8em 0 .5em; letter-spacing: -.02em; font-weight: 650; }
.md-typeset h4 { font-size: .86rem; letter-spacing: -.01em; margin: 1.4em 0 .4em; font-weight: 650; }
.md-typeset h2 + h3 { margin-top: .6em; }
.md-typeset .headerlink { color: var(--ink-1); opacity: 0; transition: opacity var(--fast), color var(--fast); margin-left: .35em; }
.md-typeset :is(h1, h2, h3, h4):is(:hover, :target) .headerlink, .md-typeset .headerlink:focus-visible { opacity: 1; color: var(--ember-ink); }
.md-typeset p, .md-typeset li { color: var(--ink-3); }
.md-typeset hr { border-bottom: var(--hairline); margin: 2rem 0; }
.md-typeset strong { font-weight: 650; }
.md-typeset small, .md-typeset .muted { color: var(--ink-2); }
/* page hero — eyebrow · H1 · dek · chip row (generated by docs/hooks/reading_time.py from front-matter) */
.md-typeset .eyebrow { font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--ember-ink);
  margin: .2rem 0 .7rem; display: flex; align-items: center; gap: .6em; }
.md-typeset .eyebrow::before { content: ""; width: .42rem; height: .42rem; border-radius: 50%; background: var(--ember-hot); box-shadow: 0 0 10px var(--ember-glow); flex: none; }
.md-typeset .dek { font-size: 1.02rem; line-height: 1.45; color: var(--ink-2); margin: 0 0 1rem; max-width: 40rem; text-wrap: pretty; letter-spacing: -.005em; }
.md-typeset .page-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.8rem; padding: 0; list-style: none; }
.md-typeset .chip { display: inline-flex; align-items: center; gap: .4em; font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: .02em; line-height: 1;
  padding: .42em .7em; border: var(--hairline); border-radius: 999px; color: var(--ink-2); background: var(--ink-0); white-space: nowrap; }
.md-typeset .chip--for { color: var(--ink-3); white-space: normal; line-height: 1.3; max-width: 100%; }
.md-typeset .chip--for::before { content: "for"; color: var(--ink-2); }
.md-typeset .chip--status::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.md-typeset .chip--proven { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.md-typeset .chip--apk { color: var(--lab); border-color: color-mix(in srgb, var(--lab) 35%, transparent); }
.md-typeset .chip--dead { color: var(--dead); border-color: color-mix(in srgb, var(--dead) 35%, transparent); }
.md-typeset .chip--mixed { color: var(--ember-ink); border-color: color-mix(in srgb, var(--ember-hot) 40%, transparent); }
.md-typeset .page-meta + .admonition, .md-typeset .page-meta + details { margin-top: 0; }
/* legacy badge (kept for pages that opt out of the hero) */
.md-typeset .rt-badge { font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: .04em; color: var(--ink-2); margin: -.6rem 0 1.2rem; text-transform: uppercase; }
.md-typeset .rt-badge .rt-for { color: var(--accent-ink); text-transform: none; letter-spacing: 0; }

/* ------------------------------------------------------------------ 5. content components */
/* tables: hairline card, mono for what the ring says, sticky header when tall */
.md-typeset table:not([class]) { font-size: .72rem; border: var(--hairline); border-radius: var(--r-2); box-shadow: none; display: table; width: 100%; overflow: hidden; }
.md-typeset .md-typeset__table { overflow: auto; border-radius: var(--r-2); }
.md-typeset .md-typeset__table table:not([class]) { display: table; }
.md-typeset table:not([class]) th { background: var(--ink-0); color: var(--ink-2); font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; padding: .6em .9em; border-bottom: var(--hairline); vertical-align: middle; }
.md-typeset table:not([class]) td { padding: .6em .9em; border-top: var(--hairline); vertical-align: top; }
.md-typeset table:not([class]) tbody tr:hover { background: var(--md-typeset-table-color--light); box-shadow: none; }
.md-typeset table:not([class]) td:first-child, .md-typeset table:not([class]) th:first-child { padding-left: 1rem; }
.md-typeset table:not([class]) td code { font-size: .92em; }
/* code: mono, quiet chrome, ember highlight; title bar when a fence has a title */
.md-typeset code { border-radius: var(--r-1); font-size: .84em; padding: .1em .35em; }
.md-typeset pre { line-height: 1.55; }
.md-typeset pre > code { border-radius: var(--r-2); padding: 1em 1.15em; border: var(--hairline); box-shadow: none; scrollbar-width: thin; }
.md-typeset .highlight { border-radius: var(--r-2); }
.md-typeset .highlight span.filename { background: var(--ink-0); border: var(--hairline); border-bottom: 0; border-radius: var(--r-2) var(--r-2) 0 0;
  font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); padding: .5em 1.15em; font-weight: 600; }
.md-typeset .highlight span.filename + pre > code { border-radius: 0 0 var(--r-2) var(--r-2); border-top: 0; }
.md-typeset .md-clipboard { color: var(--ink-1); } .md-typeset .md-clipboard:hover, .md-typeset .md-clipboard:focus-visible { color: var(--ember-ink); }
.md-typeset .highlight .hll { background: var(--md-code-hl-color, rgba(255,140,42,.14)); box-shadow: inset 3px 0 0 var(--ember-hot); }
.md-typeset .highlight [data-linenos]::before { color: var(--ink-1); background: var(--ink-0); border-right: var(--hairline); }
.md-typeset pre code::-webkit-scrollbar { height: 6px; }
/* admonitions: ember rule, no fills */
.md-typeset .admonition, .md-typeset details { border-radius: var(--r-3); border: var(--hairline); border-left: 3px solid var(--ember-hot); background: var(--ink-0);
  box-shadow: none; font-size: .76rem; }
.md-typeset .admonition > .admonition-title, .md-typeset details > summary { background: transparent; font-family: var(--mono); font-size: var(--fs-meta); text-transform: uppercase;
  letter-spacing: .1em; color: var(--ink-3); font-weight: 600; padding: .55rem .8rem .35rem 2.1rem; line-height: 1.4; }
.md-typeset .admonition > .admonition-title::before, .md-typeset details > summary::before { background-color: var(--ember-ink); left: .75rem; top: .6rem; width: .9rem; height: .9rem; }
.md-typeset .admonition > :not(.admonition-title), .md-typeset details > :not(summary) { padding-inline: .8rem; }
.md-typeset .admonition p, .md-typeset details p { margin: .35em 0 .6em; }
.md-typeset .admonition ul, .md-typeset details ul { margin: .2em 0 .6em; }
.md-typeset .admonition[class], .md-typeset details[class] { border-color: var(--line); border-left-color: var(--ember-hot); }
.md-typeset .admonition[class] > .admonition-title::before, .md-typeset details[class] > summary::before { background-color: var(--ember-ink); }
.md-typeset .admonition.tldr > .admonition-title::before, .md-typeset .admonition.abstract > .admonition-title::before { -webkit-mask-image: var(--md-admonition-icon--abstract); mask-image: var(--md-admonition-icon--abstract); }
.md-typeset :is(.admonition, details):is(.warning, .danger, .bug, .failure) { border-left-color: var(--dead); } .md-typeset :is(.warning, .danger, .bug, .failure) > :is(.admonition-title, summary)::before { background-color: var(--dead); }
.md-typeset :is(.admonition, details):is(.success, .check, .done) { border-left-color: var(--ok); } .md-typeset :is(.success, .check, .done) > :is(.admonition-title, summary)::before { background-color: var(--ok); }
.md-typeset :is(.admonition, details):is(.info, .note, .tip, .hint, .example) { border-left-color: var(--accent); } .md-typeset :is(.info, .note, .tip, .hint, .example) > :is(.admonition-title, summary)::before { background-color: var(--accent-ink); }
.md-typeset details[class] > summary::after { color: var(--ink-2); background-color: var(--ink-2); }
.md-typeset .admonition[class] > .admonition-title, .md-typeset details[class] > summary { background: transparent; }
.md-typeset details > summary { font-weight: 600; text-transform: none; letter-spacing: -.01em; font-family: var(--sans); font-size: .78rem; }
.md-typeset details > summary::after { opacity: .6; }
.md-typeset details[open] > summary { border-bottom: var(--hairline); }
/* tabs, kbd, marks */
.md-typeset .tabbed-set { border: var(--hairline); border-radius: var(--r-3); background: var(--ink-0); padding: 0 1rem .2rem; }
.md-typeset .tabbed-labels { border-bottom: var(--hairline); }
.md-typeset .tabbed-labels > label { font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); padding-block: .7em; }
.md-typeset .tabbed-labels > label:hover, .md-typeset .tabbed-set > input:checked + .tabbed-labels > label, .md-typeset .tabbed-labels > label[aria-selected="true"] { color: var(--ink-3); }
.md-typeset .tabbed-labels::before { background: var(--ember-hot); height: 2px; box-shadow: 0 0 10px var(--ember-glow); }
.md-typeset kbd { font-family: var(--mono); font-size: .72em; border-radius: var(--r-1); box-shadow: 0 1px 0 var(--md-typeset-kbd-border-color), 0 0 0 1px var(--md-typeset-kbd-border-color) inset; padding: .1em .5em; }
.md-typeset mark { background: color-mix(in srgb, var(--ember-hot) 20%, transparent); color: inherit; border-radius: 3px; padding: 0 .15em; }
.md-typeset blockquote { border-left: 2px solid var(--ember-hot); color: var(--ink-2); }
.md-typeset img, .md-typeset video { border-radius: var(--r-3); }
.md-typeset figure { margin: 1.4rem 0; }
.md-typeset figure > img, .md-typeset .figure img { border: var(--hairline); box-shadow: var(--shadow-1); background: var(--ink-0); }
.md-typeset figcaption { font-size: .7rem; color: var(--ink-2); text-align: center; margin: .55rem auto 0; max-width: 42ch; line-height: 1.45; }
/* glossary: definition list as a two-column grid on wide screens, stacked on phones */
.md-typeset .glossary dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1.25rem; align-items: baseline; }
.md-typeset .glossary dl dt { font-weight: 650; font-family: var(--mono); font-size: .78rem; color: var(--ink-3); }
.md-typeset .glossary dl dd { margin: 0 0 .5rem; font-size: .78rem; color: var(--ink-2); }
@media (max-width: 44em) { .md-typeset .glossary dl { grid-template-columns: minmax(0, 1fr); gap: .1rem; } .md-typeset .glossary dl dd { margin-bottom: .9rem; } }

/* ------------------------------------------------------------------ 6. prev/next + footer */
.family { background: var(--md-footer-bg-color); color: var(--md-footer-fg-color--light); border-top: var(--hairline); }
.family__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem 1.2rem; padding: .9rem .8rem .2rem; }
.family__row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem; margin: 0; font: 500 .62rem/1.2 var(--mono); letter-spacing: .01em; }
.family__eyebrow { letter-spacing: .12em; text-transform: uppercase; font-size: .56rem; color: var(--md-footer-fg-color--light); margin-right: .3rem; }
.family__row a { color: var(--md-footer-fg-color--light); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--fast), border-color var(--fast); }
.family__row a:hover { color: var(--ember); border-bottom-color: var(--ember); }
.family__row a:focus-visible { outline: 2px solid var(--ember-hot); outline-offset: 2px; }
.family__row b { color: var(--md-footer-fg-color); font-weight: 600; position: relative; padding-left: .9rem; }
.family__row b::before { content: ""; position: absolute; left: 0; top: 50%; width: .4rem; height: .4rem; border-radius: 50%; background: var(--ember-hot); transform: translateY(-50%); box-shadow: 0 0 8px var(--ember-glow); }
.family__pill { display: inline-flex; align-items: center; gap: .4em; padding: .3rem .55rem; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.03); color: var(--md-footer-fg-color--light); }
.family__pill.family__pill:hover { border-color: var(--ember-hot); border-bottom-color: var(--ember-hot); }
.family__k { color: var(--md-footer-fg-color--light); opacity: .85; }
.family__pill { color: var(--md-footer-fg-color); }
@media (max-width: 44em) { .family__inner { padding-top: .8rem; } .family__row--build .family__pill:nth-child(3) { display: none; } }
.md-footer { border-top: var(--hairline); }
.md-footer__inner { padding: 1.2rem .8rem .6rem; gap: .8rem; display: flex; flex-wrap: wrap; }
.md-footer__link { border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-3); padding: .7rem .9rem; margin: 0; flex: 1 1 16rem; max-width: none; outline-color: var(--accent);
  background: rgba(255,255,255,.03); transition: border-color var(--fast), background var(--fast), transform var(--slow) var(--ease); }
.md-footer__link:hover { opacity: 1; border-color: var(--ember-hot); background: rgba(255,140,42,.06); transform: translateY(-1px); }
.md-footer__link--next { text-align: right; }
.md-footer__direction { font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: var(--md-footer-fg-color--light); opacity: 1; position: static; }
.md-footer__title { font-size: .82rem; font-weight: 600; letter-spacing: -.01em; margin-top: .1rem; }
.md-footer__button { display: none; }
.md-footer-meta { background: var(--md-footer-bg-color--dark); border-top: 1px solid rgba(255,255,255,.06); }
.md-footer-meta__inner { align-items: center; padding: .8rem .8rem; }
.md-copyright { font-size: .62rem; color: var(--md-footer-fg-color--light); font-family: var(--mono); letter-spacing: .01em; line-height: 1.6; }
.md-social__link svg { fill: var(--md-footer-fg-color--light); } .md-social__link:hover svg { fill: var(--ember); }
/* a11y: links in prose are underlined, not colour-only (axe link-in-text-block); AA contrast via --accent-ink */
.md-typeset :is(p, li, dd, td) a:not(.l-btn):not(.md-button):not(.anatomy__row a):not(.card) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.md-typeset :is(p, li, dd, td) a:not(.l-btn):not(.md-button):hover { text-decoration-color: currentColor; }
.md-typeset .md-button { border-radius: 999px; border: 1.5px solid var(--ink-3); color: var(--ink-3); font-weight: 600; padding: .55em 1.2em; transition: transform var(--slow) var(--ease), background var(--fast); }
.md-typeset .md-button--primary { background: var(--ink-3); color: var(--paper); } .md-typeset .md-button:hover { transform: translateY(-1px); }
.md-top { background: var(--ink-3); color: var(--paper); border-radius: 999px; box-shadow: var(--shadow-2); }

/* ------------------------------------------------------------------ 7. protocol components (enhanced by js/docs/docs.js) */
/* frame byte-diagram: the landing's inscription, at reading size */
.md-typeset .frame { display: flex; flex-wrap: wrap; align-items: stretch; gap: .3rem; margin: 1rem 0 1.2rem; padding: .7rem .8rem; border-radius: var(--r-3);
  background: linear-gradient(180deg, var(--metal-0), var(--metal-1) 55%, var(--metal-2)); border: 1px solid rgba(255,255,255,.08); box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.08);
  font-family: var(--mono); color: #f4efe6; position: relative; }
.md-typeset .frame::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 7px); mix-blend-mode: screen; }
.md-typeset .frame__cell { display: flex; flex-direction: column; gap: .15rem; padding: .45rem .6rem; border-radius: var(--r-1); background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08); min-width: 3.2rem; position: relative; z-index: 1; cursor: help; transition: border-color var(--fast), background var(--fast); }
.md-typeset .frame__cell:hover, .md-typeset .frame__cell:focus-visible { border-color: rgba(255,207,138,.5); background: rgba(255,140,42,.08); }
.md-typeset .frame__cell b { font-size: .9rem; letter-spacing: .06em; color: var(--ember); font-weight: 600; white-space: nowrap;
  text-shadow: 0 0 10px var(--ember-glow), 0 1px 0 rgba(0,0,0,.8); }
.md-typeset .frame__cell--magic b { color: #ffe3b8; } .md-typeset .frame__cell--cmd b { color: #ffb86a; }
.md-typeset .frame__cell--payload b { color: #fbf7f0; text-shadow: 0 1px 0 rgba(0,0,0,.8); overflow-wrap: anywhere; white-space: normal; }
.md-typeset .frame__cell--payload { flex: 1 1 8rem; }
.md-typeset .frame__cell--empty b { color: #8a8378; text-shadow: none; }
.md-typeset .frame__cell small { font-size: .56rem; letter-spacing: .14em; text-transform: uppercase; color: #b8a48a; }
.md-typeset .frame__cell i { font-style: normal; font-size: .62rem; color: #e9dcc6; }
.md-typeset .frame__dir { align-self: center; font-size: 1.3rem; color: var(--ember); padding: 0 .2rem; z-index: 1; text-shadow: 0 0 12px var(--ember-glow); }
.md-typeset .frame--rx { background: linear-gradient(180deg, #24201a, #14110d 55%, #0b0907); }
.md-typeset .frame__note { flex: 1 0 100%; font-family: var(--sans); font-size: .7rem; color: #cbbfae; padding: .25rem .1rem 0; z-index: 1; }
.md-typeset .frame__note::before { content: "= "; color: var(--ember); }
/* commands table */
.md-typeset table[data-cmd] td.cell--id { font-family: var(--mono); font-weight: 600; white-space: nowrap; color: var(--ink-3); }
.md-typeset .cmd-anchor, .md-typeset td .cmd-anchor { color: inherit; text-decoration: none; }
.md-typeset .cmd-anchor:hover { color: var(--ember-ink); }
.md-typeset tr.is-target > td { background: color-mix(in srgb, var(--ember-hot) 12%, transparent); box-shadow: inset 3px 0 0 var(--ember-hot); }
.md-typeset .arrow { color: var(--ember-ink); font-weight: 600; }
.md-typeset .pill { display: inline-flex; align-items: center; gap: .4em; font-family: var(--mono); font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1;
  padding: .32em .6em .3em; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; vertical-align: middle; }
.md-typeset .pill::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.md-typeset .pill--live { color: var(--ok); } .md-typeset .pill--air { color: var(--accent-ink); } .md-typeset .pill--apk { color: var(--lab); } .md-typeset .pill--dead { color: var(--dead); }
.md-typeset .pill__rest { font-size: .66rem; color: var(--ink-2); }
.md-typeset .cmd-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 1.2rem 0 .8rem; }
.md-typeset .cmd-filter label { display: flex; align-items: center; gap: .6rem; flex: 1 1 18rem; border: var(--hairline); border-radius: 999px; background: var(--ink-0); padding: .2rem .35rem .2rem .9rem;
  transition: border-color var(--fast), box-shadow var(--fast); }
.md-typeset .cmd-filter label:focus-within { border-color: var(--ember-hot); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ember-hot) 22%, transparent); }
.md-typeset .cmd-filter__label { font-family: var(--mono); font-size: var(--fs-eyebrow); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.md-typeset .cmd-filter input { flex: 1; border: 0; background: transparent; color: var(--ink-3); font: inherit; font-size: .76rem; padding: .35rem .2rem; outline: none; min-width: 0; }
.md-typeset .cmd-filter input::placeholder { color: var(--ink-1); }
.md-typeset .cmd-filter output { font-family: var(--mono); font-size: var(--fs-meta); color: var(--ink-2); }
.md-typeset .md-typeset__table.is-empty { display: none; }
@media (max-width: 44em) { .md-typeset .frame { padding: .5rem; gap: .25rem; } .md-typeset .frame__cell { min-width: 2.6rem; padding: .35rem .45rem; } .md-typeset .frame__cell b { font-size: .78rem; } }

/* ------------------------------------------------------------------ 8. cards · steps · mermaid */
.md-typeset .cards__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: 1.2rem 0 1.6rem; }
.md-typeset .card { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.05rem 1.1rem; border: var(--hairline); border-radius: var(--r-4); background: var(--ink-0);
  color: inherit; text-decoration: none; position: relative; transition: transform var(--slow) var(--ease), border-color var(--fast), box-shadow var(--slow) var(--ease); }
.md-typeset a.card:hover, .md-typeset a.card:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ember-hot) 55%, transparent); box-shadow: var(--shadow-1), 0 0 0 1px color-mix(in srgb, var(--ember-hot) 25%, transparent); color: inherit; }
.md-typeset .card__title { margin: 0; font-size: .98rem; font-weight: 650; letter-spacing: -.02em; color: var(--ink-3); }
.md-typeset .card__title strong { font-weight: inherit; }
.md-typeset .card__where { margin: 0; font-family: var(--mono); font-size: .62rem; color: var(--ink-2); line-height: 1.5; overflow-wrap: anywhere; }
.md-typeset .card__where code { font-size: .95em; padding: 0 .3em; }
.md-typeset .card__body { margin: .2rem 0 0; font-size: .76rem; line-height: 1.5; color: var(--ink-2); flex: 1; }
.md-typeset .card__body a { color: var(--ink-3); }
.md-typeset .card__go { font-family: var(--mono); font-size: var(--fs-meta); color: var(--ember-ink); margin-top: .45rem; letter-spacing: .02em; }
@media (max-width: 44em) { .md-typeset .cards__grid { grid-template-columns: minmax(0, 1fr); } }
/* steps: numbered ember marks joined by a rule */
.md-typeset h2.step { position: relative; padding-left: 2.6rem; }
.md-typeset h2.step::before { content: attr(data-step); position: absolute; left: 0; top: .05em; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-size: .8rem; font-weight: 600; letter-spacing: 0; color: #fff; background: var(--ember-hot); box-shadow: 0 0 14px var(--ember-glow), inset 0 1px 0 rgba(255,255,255,.35); }
.md-typeset h2.step:not(.step--last)::after { content: ""; position: absolute; left: calc(.875rem - 1px); top: 2.1rem; height: 1.6rem; width: 2px; background: linear-gradient(var(--ember-hot), transparent); opacity: .6; }
/* mermaid: Material renders diagrams itself; these tokens repaint them in our palette */
:root > *, body[data-md-color-scheme] {
  --md-mermaid-font-family: var(--sans); --md-mermaid-edge-color: var(--ink-2); --md-mermaid-node-bg-color: var(--ink-0); --md-mermaid-node-fg-color: var(--ink-3);
  --md-mermaid-label-bg-color: var(--paper); --md-mermaid-label-fg-color: var(--ink-3);
  --md-mermaid-sequence-actor-bg-color: var(--ink-0); --md-mermaid-sequence-actor-fg-color: var(--ink-3); --md-mermaid-sequence-actor-border-color: var(--ember-hot);
  --md-mermaid-sequence-actor-line-color: var(--ink-1); --md-mermaid-sequence-actorman-bg-color: var(--ink-0); --md-mermaid-sequence-actorman-line-color: var(--ink-2);
  --md-mermaid-sequence-box-bg-color: color-mix(in srgb, var(--ink-3) 4%, transparent); --md-mermaid-sequence-box-border-color: var(--line);
  --md-mermaid-sequence-label-bg-color: var(--ink-0); --md-mermaid-sequence-label-fg-color: var(--ink-3); --md-mermaid-sequence-loop-border-color: var(--ember-hot);
  --md-mermaid-sequence-message-fg-color: var(--ink-3); --md-mermaid-sequence-message-line-color: var(--ink-2);
  --md-mermaid-sequence-note-bg-color: var(--ink-0); --md-mermaid-sequence-note-border-color: var(--line); --md-mermaid-sequence-note-fg-color: var(--ink-3);
  --md-mermaid-sequence-number-bg-color: var(--ember-hot); --md-mermaid-sequence-number-fg-color: #fff;
  --md-mermaid-sequence-loop-bg-color: color-mix(in srgb, var(--ember-hot) 6%, transparent); --md-mermaid-sequence-loop-fg-color: var(--ember-ink); --md-mermaid-sequence-box-fg-color: var(--ink-2); }
.md-typeset .mermaid { display: block; text-align: center; line-height: 0; font-size: 15px; /* inherits into the shadow root — mermaid measures labels at the host size */ background: var(--ink-0); border: var(--hairline); border-radius: var(--r-4); padding: 1.1rem 1rem; margin: 1.2rem 0 1.6rem; overflow: auto; }
.md-typeset .mermaid svg { max-width: 100%; }
/* the svg lives in a shadow root — only the variables above reach it */
/* wide diagram → scroll hint (docs.js toggles .is-scrollable) */
.md-typeset .mermaid { position: relative; scrollbar-width: thin; scrollbar-color: var(--ink-1) transparent; }
.md-typeset .mermaid.is-scrollable { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 4rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 4rem), transparent); }
.md-typeset .diagram.is-scrolled > .mermaid { -webkit-mask-image: none; mask-image: none; }
.md-typeset .diagram { position: relative; }
.md-typeset .diagram > .mermaid { margin: 1.2rem 0 1.6rem; }
.md-typeset .mermaid__hint { position: absolute; right: .9rem; bottom: 2.4rem; font: 500 .58rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ember-ink);
  background: var(--paper); border: var(--hairline); border-radius: 999px; padding: .38rem .6rem; pointer-events: none; box-shadow: var(--shadow-1); transition: opacity var(--fast); }
.md-typeset .diagram.is-scrolled .mermaid__hint { opacity: 0; }

/* ── ring anatomy (protocol/index) — JS-rendered figure, see docs.js ANATOMY */
.md-typeset figure.anatomy { text-align: left; max-width: none; }
.md-typeset .anatomy { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.4rem; align-items: center; margin: 1.6rem 0 2rem; padding: 1.2rem 1.2rem 1.2rem 1.4rem;
  border: var(--hairline); border-radius: 18px; background: var(--ink-0); box-shadow: var(--shadow-1); }
.md-typeset .anatomy__stage { position: relative; aspect-ratio: 1145 / 951; }
.md-typeset .anatomy__stage img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 28px rgba(0,0,0,.28)); }
[data-md-color-scheme="slate"] .md-typeset .anatomy__stage img { filter: drop-shadow(0 18px 28px rgba(0,0,0,.7)); }
.md-typeset .anatomy__spot { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%; color: inherit; }
.md-typeset .anatomy__dot, .md-typeset .anatomy__num { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; font: 600 .62rem/1 var(--mono); color: #1a1208;
  background: var(--ember); border: 1.5px solid var(--ember-hot); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ember-hot) 22%, transparent), 0 0 14px var(--ember-glow); transition: transform var(--fast) var(--ease), box-shadow var(--fast); }
.md-typeset .anatomy__spot.is-hot .anatomy__dot, .md-typeset .anatomy__spot:hover .anatomy__dot { transform: scale(1.18); box-shadow: 0 0 0 7px color-mix(in srgb, var(--ember-hot) 28%, transparent), 0 0 22px var(--ember-glow); }
@media (prefers-reduced-motion: no-preference) {
  .md-typeset .anatomy__dot { animation: anatomy-pulse 2.8s var(--ease) infinite; }
  .md-typeset .anatomy__spot[data-n="2"] .anatomy__dot { animation-delay: .5s } .md-typeset .anatomy__spot[data-n="3"] .anatomy__dot { animation-delay: 1s }
  .md-typeset .anatomy__spot[data-n="4"] .anatomy__dot { animation-delay: 1.5s } .md-typeset .anatomy__spot[data-n="5"] .anatomy__dot { animation-delay: 2s }
  @keyframes anatomy-pulse { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ember-hot) 22%, transparent), 0 0 14px var(--ember-glow) } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--ember-hot) 10%, transparent), 0 0 18px var(--ember-glow) } }
}
.md-typeset .anatomy__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.md-typeset .anatomy__row a { display: grid; grid-template-columns: auto 1fr; column-gap: .7rem; align-items: start; padding: .55rem .7rem; border-radius: 12px; color: inherit; text-decoration: none; border: 1px solid transparent; transition: background var(--fast), border-color var(--fast); }
.md-typeset .anatomy__row a:hover, .md-typeset .anatomy__row.is-hot a { background: var(--paper); border-color: var(--line); text-decoration: none; }
.md-typeset .anatomy__row a:focus-visible { outline: 2px solid var(--ember-hot); outline-offset: 2px; }
.md-typeset .anatomy__num { grid-row: 1 / span 2; margin-top: .1rem; animation: none; }
.md-typeset .anatomy__k { font: 600 .78rem/1.3 var(--sans); color: var(--ink-3); letter-spacing: .005em; }
.md-typeset .anatomy__v { grid-column: 2; font: 400 .7rem/1.45 var(--sans); color: var(--ink-2); }
.md-typeset .anatomy__row.is-hot .anatomy__k, .md-typeset .anatomy__row a:hover .anatomy__k { color: var(--ember-ink); }
@media (max-width: 59.9em) { .md-typeset .anatomy { grid-template-columns: 1fr; gap: .9rem; padding: 1rem; } .md-typeset .anatomy__stage { max-width: 24rem; margin: 0 auto; } }
/* Material hides the prev title < 76em → our bordered card would sit empty; show it and stack */
@media screen and (max-width: 76.234375em) { .md-footer__link--prev .md-footer__title { display: block; } .md-footer__link--prev .md-footer__button { display: none; } .md-footer__link { flex: 1 1 100%; } }

/* ── motion (docs.js motion): opt-in via html.m-on, first-sight only. TRANSFORM ONLY — no opacity fade: axe/Lighthouse compute
   contrast on the blended colour of a fading element and fail it, so a below-the-fold fade would cost the a11y score for nothing. */
html.m-on .md-typeset .m-item:not(.m-in) { transform: translateY(14px); }
html.m-on .md-typeset .m-item { transition: transform .6s var(--ease) var(--m-d, 0ms); }
@media (prefers-reduced-motion: reduce) { html.m-on .md-typeset .m-item { transform: none !important; } }