/* ==========================================================================
   Engone Wiki — "Analog Precision, on paper"
   Light theme for Material for MkDocs (scheme: default)

   Design intent
   -------------
   The product UI and the landing page are dark ("oil-stained iron"). The wiki
   is the other half of the same workshop metaphor: the *service manual*. Aged
   paper, ink-black text, hairline rules, mono micro-labels — the brand's
   instrument feel translated to something you can read for an hour.

   Contrast note: the brand accents (--green #6B9E77, --amber #E0A852) are
   "indicator lights" tuned for dark surfaces. On paper they measure 2.76:1 and
   1.89:1 — far below WCAG AA. So they are used here only as FILLS (icon tints,
   left rails, washes), and same-hue darkened "ink" variants carry all TEXT.
   Every ink value below is >= 4.9:1 on --paper; every ink/surface pairing
   actually used in this file is >= 4.5:1. Ratios noted below are measured.
   ========================================================================== */

:root {
  /* --- Brand foundation (from BRAND.md — unchanged, dark side) ----------- */
  --carbon:#181816; --steel:#262523; --tungsten:#3E3D39; --ivory:#E3E0D1;
  --muted:#4A4945;  --hover:#343330;  --label:#7A7870;   --dim:#5A5850;
  --green:#6B9E77;  --amber:#E0A852;  --red:#D64541;     --blue:#5D8AA8;
  --bright:#F5F2E6;

  /* --- Paper scale (derived light surfaces, warm grey-beige) ------------- */
  --paper:      #F4F2EA;  /* page background — everything sits on this      */
  --paper-deep: #EDEAE0;  /* chrome band: header, tabs, footer, code, th    */
  --paper-edge: #E5E2D6;  /* deepest greige: footer meta, hover states      */
  --card:       #FBFAF6;  /* raised surfaces: admonitions, cards, table body */

  /* --- Rules & dividers -------------------------------------------------- */
  --rule:       #D9D5C7;  /* hairline borders — the light --tungsten        */
  --rule-soft:  #E7E4D9;  /* faint internal dividers                        */

  /* --- Ink scale (text) --------------------------------------------------- */
  --ink:        #181816;  /* headings — brand carbon, 15.9:1                */
  --ink-body:   #22211D;  /* body copy, 14.4:1                              */
  --ink-2:      #5A5850;  /* secondary text (brand --dim), 6.4:1  [AA]      */
  --ink-3:      #6B6960;  /* muted: micro-labels, placeholders, meta.
                             Brand --label (#7A7870) only reaches 3.9:1 on
                             paper, so it is darkened here.  4.9:1  [AA]    */

  /* --- Accent inks (same hue as brand accents, darkened for paper) ------- */
  --green-ink:  #396041;  /* links, active nav              6.4:1  [AA]     */
  --green-deep: #2C4B33;  /* button hover, headings on green 8.7:1  [AAA]   */
  --amber-ink:  #8A5A18;  /* warning text / link hover      5.3:1  [AA]     */
  --red-ink:    #9E332E;  /* danger text                    6.3:1  [AA]     */
  --blue-ink:   #3B6079;  /* info text                      6.0:1  [AA]     */
}

/* ==========================================================================
   1. Material scheme mapping
   ========================================================================== */

[data-md-color-scheme="default"] {
  --md-default-bg-color:            var(--paper);
  --md-default-bg-color--light:     rgba(244, 242, 234, .70);
  --md-default-bg-color--lighter:   rgba(244, 242, 234, .45);
  --md-default-bg-color--lightest:  rgba(244, 242, 234, .12);

  --md-default-fg-color:            var(--ink-body);
  --md-default-fg-color--light:     var(--ink-2);
  --md-default-fg-color--lighter:   #8B897F;
  --md-default-fg-color--lightest:  rgba(24, 24, 22, .07);

  /* Header / tabs band. Foreground = band colour, background = ink on it.  */
  --md-primary-fg-color:            var(--paper-deep);
  --md-primary-fg-color--light:     var(--paper);
  --md-primary-fg-color--dark:      var(--paper-edge);
  --md-primary-bg-color:            var(--ink);
  --md-primary-bg-color--light:     var(--ink-2);

  --md-accent-fg-color:             var(--green-ink);
  --md-accent-fg-color--transparent:rgba(57, 96, 65, .10);
  --md-accent-bg-color:             var(--card);

  --md-typeset-color:               var(--ink-body);
  --md-typeset-a-color:             var(--green-ink);
  --md-typeset-mark-color:          rgba(224, 168, 82, .38);
  --md-typeset-del-color:           rgba(214, 69, 65, .16);
  --md-typeset-ins-color:           rgba(107, 158, 119, .22);
  --md-typeset-table-color:         var(--rule);

  --md-code-bg-color:               var(--paper-deep);
  --md-code-fg-color:               var(--ink-body);

  --md-admonition-bg-color:         var(--card);
  --md-admonition-fg-color:         var(--ink-body);

  --md-footer-bg-color:             var(--paper-deep);
  --md-footer-bg-color--dark:       var(--paper-edge);
  --md-footer-fg-color:             var(--ink);
  --md-footer-fg-color--light:      var(--ink-2);
  --md-footer-fg-color--lighter:    var(--ink-3);

  /* Soft, warm shadows — the brand asks for flat instrument panels, so
     these stay barely-there. */
  --md-shadow-z1: 0 1px 2px rgba(24, 24, 22, .05);
  --md-shadow-z2: 0 1px 3px rgba(24, 24, 22, .07), 0 4px 12px rgba(24, 24, 22, .05);
  --md-shadow-z3: 0 2px 6px rgba(24, 24, 22, .09), 0 8px 24px rgba(24, 24, 22, .07);
}

html, body { background-color: var(--paper); }

::selection { background: rgba(107, 158, 119, .28); color: var(--ink); }

/* Focus ring — brand rule: visible green outline. */
:where(a, button, input, summary, .md-nav__link, .md-tabs__link):focus-visible {
  outline: 2px solid var(--green-ink);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ==========================================================================
   2. Header, tabs, search
   ========================================================================== */

.md-header {
  background-color: var(--paper-deep);
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  box-shadow: none;
}
.md-header--shadow { box-shadow: var(--md-shadow-z2); }

/* --- Header wordmark lockup ---------------------------------------------
   theme.logo is the full "engone wiki" wordmark (mark + wordtext in one
   SVG, ~7.2:1), so Material's separate site-name text is redundant.
   Material already wraps the logo in <a href="{base}" aria-label="Engone
   Wiki">, so it links home and is properly named — no extra markup needed.

   Height budget: .md-sidebar and the mobile search dropdown are hardcoded
   to `top: 2.4rem`, so logo height + padding + margin must not exceed
   2.4rem or the sticky sidebars slip under the header.
   1.4 + .4 (padding) + .4 (margin) = 2.2rem.
   ------------------------------------------------------------------------ */

/* Hide the contents, not the box: .md-header__title's flex-grow is the
   spacer that pushes search and the icons to the right edge. */
.md-header__title > .md-header__ellipsis { display: none; }

.md-header__button.md-logo { padding: .2rem .4rem; margin: .2rem; }
.md-header__button.md-logo :is(img, svg) {
  height: 1.4rem;              /* ≈ 10rem wide at the wordmark's ratio */
  width: auto;
  max-width: none;
}
.md-header__button.md-logo:hover { opacity: .75; }

/* Material hides the logo below 76.25em and relies on the site-name text
   there — but that text is now hidden, which would leave the mobile header
   with no branding at all. Bring the wordmark back, scaled to sit beside
   the drawer and search buttons on a narrow phone. */
@media screen and (max-width: 76.234375em) {
  .md-header__button.md-logo { display: inline-block; }
  .md-header__button.md-logo :is(img, svg) { height: 1.15rem; }
}
@media screen and (max-width: 24em) {
  .md-header__button.md-logo :is(img, svg) { height: 1rem; }
}

.md-tabs {
  background-color: var(--paper-deep);
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule);
}
.md-tabs__link {
  color: var(--ink-2);
  opacity: 1;
  font-weight: 500;
  transition: color 120ms;
}
.md-tabs__link:focus, .md-tabs__link:hover { color: var(--ink); opacity: 1; }
.md-tabs__item { position: relative; }
/* Active tab: carbon text with a green indicator rule beneath. */
.md-tabs__item--active .md-tabs__link { color: var(--ink); font-weight: 600; opacity: 1; }
.md-tabs__item--active::after {
  content: "";
  position: absolute;
  left: .6rem; right: .6rem; bottom: 0;
  height: 2px;
  background: var(--green);
}

/* Search field — a recessed slot in the chrome band. */
.md-search__form {
  background-color: var(--card);
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: none;
}
.md-search__form:hover { background-color: var(--card); border-color: #C9C4B2; }
.md-search__input { color: var(--ink-body); }
.md-search__input::placeholder { color: var(--ink-3); }
.md-search__icon, .md-search__options .md-icon { color: var(--ink-2); }
.md-search__output { background-color: var(--card); border: 1px solid var(--rule); }
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background-color: var(--card);
}
.md-search-result__meta {
  background-color: var(--paper-deep);
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule-soft);
}
.md-search-result__article { border-bottom: 1px solid var(--rule-soft); }
.md-search-result__link:is(:hover, :focus) { background-color: rgba(107, 158, 119, .10); }
.md-search-result__teaser mark { color: var(--green-deep); background: rgba(107, 158, 119, .18); }

/* ==========================================================================
   3. Sidebars — nav (left) and table of contents (right)
   ========================================================================== */

.md-sidebar { color: var(--ink-body); }
.md-sidebar--primary .md-sidebar__scrollwrap { border-right: 1px solid var(--rule-soft); }
.md-sidebar--secondary .md-sidebar__scrollwrap { border-left: 1px solid var(--rule-soft); }

.md-nav { font-size: .68rem; }
.md-nav__title {
  color: var(--ink-3);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.md-nav__link { color: var(--ink-2); transition: color 100ms; }
.md-nav__link:is(:focus, :hover) { color: var(--ink); }

/* Current page: green ink + weight + a short indicator rail. */
.md-nav__item .md-nav__link--active,
.md-nav__item .md-nav__link--active:hover {
  color: var(--green-ink);
  font-weight: 600;
}
.md-nav--primary .md-nav__item > .md-nav__link--active {
  box-shadow: inset 2px 0 0 var(--green);
  padding-left: .4rem;
  margin-left: -.4rem;
}

/* Section labels in the sidebar read as instrument headings. */
.md-nav--primary .md-nav__item--section > .md-nav__link {
  color: var(--ink);
  font-weight: 600;
}

/* Mobile drawer */
.md-nav--primary .md-nav__title {
  background-color: var(--paper-deep);
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  box-shadow: none;
}

/* The level-0 drawer header repeats the logo AND a bare "Engone Wiki" text
   node — with the wordmark as the logo that reads twice. Zero the label's
   font-size to drop the text node (the child <img> is sized in rem, so it
   is unaffected). Scoped with `>` to level 0 only: the nested drill-down
   titles are the "back" labels and must keep their text. */
.md-nav--primary > .md-nav__title { font-size: 0; }
.md-nav--primary > .md-nav__title .md-logo { display: block; padding: 0; }
.md-nav--primary > .md-nav__title .md-logo :is(img, svg) {
  height: auto;
  width: 8.6rem;
  max-width: 100%;
}
[dir=ltr] .md-nav--primary .md-nav__title ~ .md-nav__list { box-shadow: none; }

/* TOC */
.md-nav--secondary .md-nav__title { background: transparent; box-shadow: none; }
.md-nav--secondary .md-nav__link--active { color: var(--green-ink); }
.md-nav--secondary .md-nav__link--passed { color: var(--ink-3); }

/* ==========================================================================
   4. Typography
   ========================================================================== */

.md-typeset {
  color: var(--ink-body);
  line-height: 1.75;
  font-size: .8rem;
}
.md-typeset p { margin: .9em 0; }

.md-typeset :is(h1, h2, h3, h4, h5, h6) {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -.012em;
}
.md-typeset h1 {
  font-size: 1.85em;
  font-weight: 650;
  letter-spacing: -.022em;
  margin-bottom: .5em;
}
/* H2 carries the hairline rule — the "section divider" of a service manual. */
.md-typeset h2 {
  font-size: 1.38em;
  margin-top: 2em;
  padding-bottom: .28em;
  border-bottom: 1px solid var(--rule);
}
.md-typeset h3 { font-size: 1.12em; margin-top: 1.7em; }
.md-typeset h4 {
  font-size: .95em;
  margin-top: 1.4em;
  color: var(--ink);
}

/* Heading anchors stay quiet until hover. */
.md-typeset :is(h1, h2, h3, h4, h5, h6) .headerlink { color: var(--rule); }
.md-typeset :is(h1, h2, h3, h4, h5, h6):hover .headerlink { color: var(--ink-3); }
.md-typeset .headerlink:is(:hover, :focus) { color: var(--green-ink) !important; }

.md-typeset strong, .md-typeset b { color: var(--ink); font-weight: 650; }

/* Lead blockquote (used as the page standfirst on index pages). */
.md-typeset blockquote {
  color: var(--ink-2);
  border-left: 2px solid var(--green);
  padding-left: 1em;
  margin-left: 0;
}
.md-typeset blockquote > p:first-child { margin-top: 0; }

.md-typeset hr { border-bottom: 1px solid var(--rule); }

/* Abbreviations (the `abbr` extension) — a dotted technical underline. */
.md-typeset abbr {
  border-bottom: 1px dotted var(--ink-3);
  text-decoration: none;
  cursor: help;
}

.md-typeset kbd {
  background-color: var(--card);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: 3px;
  box-shadow: none;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .8em;
}

/* ==========================================================================
   5. Links
   Brand rule: green, hover amber, underline on hover only.
   ========================================================================== */

.md-typeset a {
  color: var(--green-ink);
  text-decoration: none;
  text-underline-offset: .18em;
  transition: color 100ms;
}
.md-typeset a:hover {
  color: var(--amber-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.md-typeset a:visited { color: var(--green-ink); }
.md-typeset a:visited:hover { color: var(--amber-ink); }
/* Inline code inside a link should follow the link colour. */
.md-typeset a code { color: inherit; }

/* ==========================================================================
   6. Code — inline and blocks
   ========================================================================== */

.md-typeset code {
  background-color: var(--paper-edge);
  color: var(--ink);
  border-radius: 2px;
  padding: .12em .38em;
  font-size: .84em;
}

.md-typeset pre > code {
  background-color: transparent;
  padding: .7rem 1rem;
}
.md-typeset .highlight,
.md-typeset pre {
  background-color: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.md-typeset .highlight > pre { border: 0; background: transparent; }

/* Line numbers gutter */
.md-typeset .highlighttable .linenos,
.md-typeset .highlight .linenos { color: var(--ink-3); background: transparent; }
.md-typeset .highlight span.filename {
  background-color: var(--paper-edge);
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .7em;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Copy button */
.md-clipboard { color: var(--ink-3); }
.md-clipboard:is(:hover, :focus) { color: var(--green-ink); }

/* Syntax tokens, retinted toward the brand's indicator colours but kept
   dark enough to read comfortably on --paper-deep. */
[data-md-color-scheme="default"] {
  --md-code-hl-comment-color:     var(--ink-3);
  --md-code-hl-keyword-color:     #3B6079;  /* blue-ink   */
  --md-code-hl-string-color:      #396041;  /* green-ink  */
  --md-code-hl-number-color:      #8A5A18;  /* amber-ink  */
  --md-code-hl-constant-color:    #8A5A18;
  --md-code-hl-special-color:     #9E332E;  /* red-ink    */
  --md-code-hl-function-color:    #4C4A82;
  --md-code-hl-name-color:        var(--ink-body);
  --md-code-hl-operator-color:    var(--ink-2);
  --md-code-hl-punctuation-color: var(--ink-2);
  --md-code-hl-variable-color:    var(--ink-body);
  --md-code-hl-generic-color:     var(--ink-2);
  --md-code-hl-color:             rgba(224, 168, 82, .28);
  --md-code-hl-color--light:      rgba(224, 168, 82, .16);
}

/* ==========================================================================
   7. Tables — the workhorse of this wiki
   ========================================================================== */

.md-typeset table:not([class]) {
  background-color: var(--card);
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: none;
  font-size: .74rem;
}
.md-typeset table:not([class]) th {
  background-color: var(--paper-deep);
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  /* Mirrors the in-game .value-field-label micro-label. */
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.md-typeset table:not([class]) td {
  border-top: 1px solid var(--rule-soft);
  vertical-align: top;
}
.md-typeset table:not([class]) tr:first-child td { border-top: 0; }
.md-typeset table:not([class]) tbody tr:nth-child(even) { background-color: var(--paper); }
.md-typeset table:not([class]) tbody tr:hover { background-color: rgba(107, 158, 119, .08); }
/* Numeric-looking cells read as instrument values. */
.md-typeset table:not([class]) td code { background: transparent; padding: 0; }

/* ==========================================================================
   8. Admonitions — !!! tip / warning / note
   Card surface, hairline border, coloured left rail + washed title bar.
   ========================================================================== */

.md-typeset :is(.admonition, details) {
  background-color: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ink-3);
  border-radius: 3px;
  box-shadow: none;
  font-size: .74rem;
}
.md-typeset :is(.admonition-title, summary) {
  background-color: var(--paper-deep);
  color: var(--ink);
  border: 0;
  /* Uppercase mono micro-label, matching the in-game .section-title. */
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
}
/* Icon position stays on Material's `top: .625em` — it scales with the
   enlarged font-size above, so it must not be overridden here. */

/* --- tip / hint / important → Oscilloscope Green -------------------------- */
.md-typeset :is(.tip, .hint, .important) { border-left-color: var(--green); }
.md-typeset :is(.tip, .hint, .important) > :is(.admonition-title, summary) {
  background-color: rgba(107, 158, 119, .14);
  color: var(--green-deep);
}
.md-typeset :is(.tip, .hint, .important) > :is(.admonition-title, summary)::before {
  background-color: var(--green-ink);
}

/* --- warning / caution / attention → Phosphor Amber ---------------------- */
.md-typeset :is(.warning, .caution, .attention) { border-left-color: var(--amber); }
.md-typeset :is(.warning, .caution, .attention) > :is(.admonition-title, summary) {
  background-color: rgba(224, 168, 82, .20);
  color: var(--amber-ink);
}
.md-typeset :is(.warning, .caution, .attention) > :is(.admonition-title, summary)::before {
  background-color: var(--amber-ink);
}

/* --- danger / error / bug / failure → Thermal Red ------------------------ */
.md-typeset :is(.danger, .error, .bug, .failure) { border-left-color: var(--red); }
.md-typeset :is(.danger, .error, .bug, .failure) > :is(.admonition-title, summary) {
  background-color: rgba(214, 69, 65, .13);
  color: var(--red-ink);
}
.md-typeset :is(.danger, .error, .bug, .failure) > :is(.admonition-title, summary)::before {
  background-color: var(--red-ink);
}

/* --- note / info / seealso / abstract → Intake Blue ---------------------- */
.md-typeset :is(.note, .info, .todo, .seealso, .abstract, .summary) {
  border-left-color: var(--blue);
}
.md-typeset :is(.note, .info, .todo, .seealso, .abstract, .summary) > :is(.admonition-title, summary) {
  background-color: rgba(93, 138, 168, .15);
  color: var(--blue-ink);
}
.md-typeset :is(.note, .info, .todo, .seealso, .abstract, .summary) > :is(.admonition-title, summary)::before {
  background-color: var(--blue-ink);
}

/* --- example / quote → neutral ------------------------------------------ */
.md-typeset :is(.example, .quote) { border-left-color: var(--ink-3); }
.md-typeset :is(.example, .quote) > :is(.admonition-title, summary) {
  background-color: var(--paper-edge);
  color: var(--ink);
}
.md-typeset :is(.example, .quote) > :is(.admonition-title, summary)::before {
  background-color: var(--ink-2);
}

/* ==========================================================================
   9. Grid cards (docs/index.md)
   ========================================================================== */

.md-typeset .grid.cards > :is(ul, ol) > li,
.md-typeset .grid > .card {
  background-color: var(--card);
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: none;
  transition: border-color 120ms, transform 120ms, box-shadow 120ms;
}
.md-typeset .grid.cards > :is(ul, ol) > li:is(:hover, :focus-within) {
  border-color: var(--green);
  box-shadow: var(--md-shadow-z1);
  transform: translateY(-1px);
}
.md-typeset .grid.cards > :is(ul, ol) > li > p:first-child > strong:first-child {
  display: block;
  margin-bottom: .2em;
}

/* ==========================================================================
   10. Tabbed content, buttons, footer, misc chrome
   ========================================================================== */

.md-typeset .tabbed-labels > label {
  color: var(--ink-2);
  font-weight: 500;
}
.md-typeset .tabbed-labels > label:hover { color: var(--ink); }
.md-typeset .tabbed-set > input:checked + label {
  color: var(--green-ink);
  border-color: var(--green);
}
.md-typeset .tabbed-content { padding-top: .4rem; }

.md-typeset .md-button {
  background-color: var(--card);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.md-typeset .md-button:is(:hover, :focus) {
  background-color: var(--paper-edge);
  color: var(--ink);
  border-color: var(--green);
}
.md-typeset .md-button--primary {
  background-color: var(--green-ink);
  color: var(--bright);
  border-color: var(--green-ink);
}
.md-typeset .md-button--primary:is(:hover, :focus) {
  background-color: var(--green-deep);
  color: var(--bright);
  border-color: var(--green-deep);
}

/* Footer: prev/next band, then a deeper greige meta strip to close the page. */
.md-footer { background-color: var(--paper-deep); border-top: 1px solid var(--rule); }
.md-footer__link { color: var(--ink-2); opacity: 1; }
.md-footer__link:hover { color: var(--green-ink); }
.md-footer__title { color: var(--ink); }
.md-footer__direction { color: var(--ink-3); }
.md-footer-meta {
  background-color: var(--paper-edge);
  border-top: 1px solid var(--rule);
}
.md-footer-meta.md-typeset,
.md-copyright, .md-copyright__highlight { color: var(--ink-2); }
.md-footer-meta.md-typeset a { color: var(--ink-2); }
.md-footer-meta.md-typeset a:hover { color: var(--green-ink); }
.md-social__link { color: var(--ink-2); }
.md-social__link:hover { color: var(--green-ink); }

/* Back-to-top pill */
.md-top {
  background-color: var(--card);
  color: var(--ink-2);
  border: 1px solid var(--rule);
  box-shadow: var(--md-shadow-z2);
}
.md-top:is(:hover, :focus) { background-color: var(--paper-edge); color: var(--green-ink); }

/* MathJax output inherits ink; keep formulas from picking up link colour. */
mjx-container { color: var(--ink-body); }

/* Warm scrollbars so the chrome doesn't go cold grey. */
* { scrollbar-color: #C7C2B2 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #C7C2B2; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #B3AE9C; }
::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================================
   11. Print — flatten the paper, drop the chrome
   ========================================================================== */

@media print {
  html, body, .md-main { background: #fff; }
  .md-typeset :is(.admonition, details) { break-inside: avoid; }
}