/* ════════════════════════════════════════════════════════════════════
   Raycin Racing Help — palette matching the stats site
   (http://localhost/stats/index.html#/)
   ════════════════════════════════════════════════════════════════════
   Source palette extracted from H:\xampp\htdocs\stats\css\style.css:
     --bg:           #0d1117   (main background)
     --bg-panel:     #161b22   (panels/cards)
     --bg-panel2:    #1c2128   (secondary panels / hover)
     --bg-sidebar:   #0d1117   (sidebar — same as bg)
     --accent:       #f6c90e   (gold — primary)
     --accent2:      #58a6ff   (blue — links)
     --accent-red:   #f85149   (errors)
     --accent-gold:  #e3b341   (subtle gold)
     --accent-green: #3fb950   (success)
     --text:         #c9d1d9   (body text)
     --text-bright:  #f0f6fc   (emphasised text)
     --muted:        #8b949e   (muted text)
     --border:       #30363d   (borders)
   ════════════════════════════════════════════════════════════════════ */

/* ─── Dark mode (slate scheme) — exact stats-site palette ───────────────── */
[data-md-color-scheme="slate"] {
    /* Background tones */
    --md-default-bg-color:           #0d1117;          /* main */
    --md-default-bg-color--light:    #161b22;          /* cards */
    --md-default-bg-color--lighter:  #1c2128;          /* hover */
    --md-default-bg-color--lightest: #30363d;          /* borders */

    /* Code blocks */
    --md-code-bg-color:              #161b22;
    --md-code-fg-color:              #c9d1d9;

    /* Text */
    --md-default-fg-color:           #c9d1d9;          /* body */
    --md-default-fg-color--light:    rgba(201, 209, 217, 0.85);
    --md-default-fg-color--lighter:  rgba(201, 209, 217, 0.65);
    --md-default-fg-color--lightest: rgba(201, 209, 217, 0.10);

    /* Primary (used in header bar + active highlights) — gold */
    --md-primary-fg-color:           #f6c90e;
    --md-primary-fg-color--light:    #fad84e;
    --md-primary-fg-color--dark:     #c9a609;
    --md-primary-bg-color:           #0d1117;
    --md-primary-bg-color--light:    rgba(13, 17, 23, 0.7);

    /* Accent (links + focus rings) — blue */
    --md-accent-fg-color:            #58a6ff;
    --md-accent-fg-color--transparent: rgba(88, 166, 255, 0.12);
    --md-accent-bg-color:            #f0f6fc;
    --md-accent-bg-color--light:     rgba(240, 246, 252, 0.7);

    /* Typeset (inline content) */
    --md-typeset-color:              #c9d1d9;
    --md-typeset-a-color:            #58a6ff;
    --md-typeset-mark-color:         rgba(246, 201, 14, 0.25);
    --md-typeset-del-color:          rgba(248, 81, 73, 0.20);
    --md-typeset-ins-color:          rgba(63, 185, 80, 0.20);
    --md-typeset-kbd-color:          #161b22;
    --md-typeset-kbd-accent-color:   #30363d;
    --md-typeset-kbd-border-color:   #30363d;
    --md-typeset-table-color:        #30363d;
    --md-typeset-table-color--light: rgba(48, 54, 61, 0.5);

    /* Syntax highlighting — GitHub dark inspired */
    --md-code-hl-color:              rgba(246, 201, 14, 0.18);
    --md-code-hl-number-color:       #79c0ff;
    --md-code-hl-special-color:      #ffa657;
    --md-code-hl-function-color:     #d2a8ff;
    --md-code-hl-constant-color:     #79c0ff;
    --md-code-hl-keyword-color:      #ff7b72;
    --md-code-hl-string-color:       #a5d6ff;
    --md-code-hl-name-color:         #e6edf3;
    --md-code-hl-operator-color:     #ff7b72;
    --md-code-hl-punctuation-color:  #c9d1d9;
    --md-code-hl-comment-color:      #8b949e;
    --md-code-hl-generic-color:      #c9d1d9;
    --md-code-hl-variable-color:     #e6edf3;

    /* Footer */
    --md-footer-bg-color:            #0d1117;
    --md-footer-bg-color--dark:      #010409;
    --md-footer-fg-color:            #c9d1d9;
    --md-footer-fg-color--light:     rgba(201, 209, 217, 0.7);
    --md-footer-fg-color--lighter:   rgba(201, 209, 217, 0.4);

    /* Admonitions */
    --md-admonition-bg-color:        #161b22;
    --md-admonition-fg-color:        #c9d1d9;
}

/* ─── Header (top bar) ──────────────────────────────────────────────────── */
[data-md-color-scheme="slate"] .md-header {
    background-color: #0d1117;
    color: #f0f6fc;
    border-bottom: 1px solid #30363d;
    box-shadow: none;
}
[data-md-color-scheme="slate"] .md-header .md-header__title,
[data-md-color-scheme="slate"] .md-header .md-search__input {
    color: #f0f6fc;
}

/* ─── LOGO — bigger, matching the stats site sidebar logo ───────────────── */
/* Override the default tiny icon and give the SVG room to breathe */
.md-header__button.md-logo {
    margin: 0.2rem 0.4rem 0.2rem 0;
    padding: 0.2rem;
}
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
    width: auto;
    height: 2.2rem;            /* ~35px — much bigger than Material's default 1.2rem icon */
    max-width: 12rem;
}
/* On narrow screens (mobile), shrink slightly to leave room for the menu */
@media (max-width: 60em) {
    .md-header__button.md-logo img,
    .md-header__button.md-logo svg {
        height: 1.8rem;
    }
}

/* ─── Sidebar ───────────────────────────────────────────────────────────── */
[data-md-color-scheme="slate"] .md-sidebar {
    background-color: #0d1117;
}
[data-md-color-scheme="slate"] .md-sidebar--primary {
    border-right: 1px solid #30363d;
}

/* Sidebar nav links — muted by default, gold when active (stats-site style) */
[data-md-color-scheme="slate"] .md-nav__link {
    color: #8b949e;
    font-weight: 500;
}
[data-md-color-scheme="slate"] .md-nav__link:hover {
    color: #c9d1d9;
    background-color: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
}
[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__item--active > .md-nav__link {
    color: #f6c90e !important;
    background-color: rgba(246, 201, 14, 0.10) !important;
    border-radius: 6px;
    font-weight: 600;
}
[data-md-color-scheme="slate"] .md-nav__title {
    color: #8b949e;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

/* ─── Right-side TOC ─────────────────────────────────────────────────────── */
[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__title {
    color: #f6c90e;
}
[data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link--active {
    color: #f6c90e !important;
    font-weight: 600;
}

/* ─── Search ─────────────────────────────────────────────────────────────── */
[data-md-color-scheme="slate"] .md-search__form {
    background-color: #161b22;
    border: 1px solid #30363d;
    border-radius: 6px;
}
[data-md-color-scheme="slate"] .md-search__form:hover {
    background-color: #1c2128;
}
[data-md-color-scheme="slate"] .md-search__input {
    color: #c9d1d9;
}
[data-md-color-scheme="slate"] .md-search__input::placeholder {
    color: #8b949e;
}

/* ─── Tabs ───────────────────────────────────────────────────────────────── */
[data-md-color-scheme="slate"] .md-tabs {
    background-color: #0d1117;
    border-bottom: 1px solid #30363d;
}

/* ─── Typography — refined muted off-white hierarchy ────────────────────── */
/* Inspired by Stripe / Linear / GitHub docs: hierarchy through SIZE and
   WEIGHT, not colour. Gold becomes an accent only (H1 underline detail,
   links on hover, code, chips), not the dominant text colour.            */
[data-md-color-scheme="slate"] .md-typeset {
    color: #c9d1d9;                              /* body text */
}

/* H1 — page title. Refined off-white (not stark bright). Subtle 1px gold
   underline at 40% opacity. One per page so the gold accent is tasteful. */
[data-md-color-scheme="slate"] .md-typeset h1 {
    color: #d4d8e0;                              /* refined off-white */
    border-bottom: 1px solid rgba(246, 201, 14, 0.40);
    padding-bottom: 0.35em;
    font-weight: 600;                            /* was 700 — softer weight */
    font-size: 1.7em;                            /* slightly smaller than Material default */
    letter-spacing: -0.005em;
}

/* H2 — section divider. Slightly more muted, hierarchy via size not colour. */
[data-md-color-scheme="slate"] .md-typeset h2 {
    color: #c9d1d9;                              /* body text colour — clean & quiet */
    border-bottom: 1px solid #30363d;
    padding-bottom: 0.25em;
    font-weight: 600;
    margin-top: 1.8em;
}

/* H3 — subheading. Slightly muted from H2. */
[data-md-color-scheme="slate"] .md-typeset h3 {
    color: #b1bac4;                              /* subtly muted */
    font-weight: 600;
    margin-top: 1.4em;
    letter-spacing: 0.005em;
}

/* H4 — sub-sub-heading. Muted, bold weight does the work. */
[data-md-color-scheme="slate"] .md-typeset h4 {
    color: #8b949e;                              /* muted grey */
    font-weight: 700;
    margin-top: 1.2em;
}

/* H5/H6 — minor groupings. Uppercase tracking for label feel. */
[data-md-color-scheme="slate"] .md-typeset h5,
[data-md-color-scheme="slate"] .md-typeset h6 {
    color: #6e7681;                              /* most muted */
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.78em;
    letter-spacing: 0.06em;
    margin-top: 1em;
}

/* ─── Links — subtle "documentation site" treatment ─────────────────────── */
/* Inherit text colour, gentle dotted underline so links are discoverable
   without being shouty. On hover: solid underline + warm-gold fade-in.
   Same approach as docs.stripe.com / linear.app / vercel docs. */
[data-md-color-scheme="slate"] .md-typeset a {
    color: #d4c08e;                      /* warm muted gold-cream */
    text-decoration: none;
    border-bottom: 1px dotted rgba(212, 192, 142, 0.4);
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
    padding-bottom: 0.5px;
}
[data-md-color-scheme="slate"] .md-typeset a:hover {
    color: #f6c90e;                      /* warm bright on hover */
    border-bottom: 1px solid #f6c90e;
    text-decoration: none;
}
/* Links inside headings: inherit heading colour, no underline (would clash) */
[data-md-color-scheme="slate"] .md-typeset h1 a,
[data-md-color-scheme="slate"] .md-typeset h2 a,
[data-md-color-scheme="slate"] .md-typeset h3 a,
[data-md-color-scheme="slate"] .md-typeset h4 a {
    color: inherit;
    border-bottom: none;
}
[data-md-color-scheme="slate"] .md-typeset h1 a:hover,
[data-md-color-scheme="slate"] .md-typeset h2 a:hover,
[data-md-color-scheme="slate"] .md-typeset h3 a:hover,
[data-md-color-scheme="slate"] .md-typeset h4 a:hover {
    color: #f6c90e;
    border-bottom: none;
}

/* Override Material's --md-typeset-a-color to match link styling */
[data-md-color-scheme="slate"] {
    --md-typeset-a-color:            #d4c08e;
    --md-accent-fg-color:            #f6c90e;     /* hover / focus accent now warm */
    --md-accent-fg-color--transparent: rgba(246, 201, 14, 0.10);
}

/* ═══════════════════════════════════════════════════════════════════════
   CHIP / PILL SYSTEM
   ═══════════════════════════════════════════════════════════════════════
   Use inline in markdown via raw HTML:
     <span class="chip chip-gold">F2F</span>
     <span class="chip chip-blue">Sync</span>
     <span class="chip chip-green">Recommended</span>
     <span class="chip chip-muted">Optional</span>
     <span class="chip chip-races">raycin_races</span>
     <span class="chip chip-creator">raycin_creator</span>
     <span class="chip chip-new">NEW</span>
     <span class="chip chip-fix">FIX</span>

   Pills work in both dark and light schemes — colours are picked to read
   clearly on either background.
   ═══════════════════════════════════════════════════════════════════════ */

.md-typeset .chip,
.chip {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.72em;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
    margin: 0 2px;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: background-color 0.15s ease, transform 0.1s ease;
}
.md-typeset .chip:hover,
.chip:hover { transform: translateY(-1px); }

/* Gold — primary / featured */
.md-typeset .chip-gold, .chip-gold {
    background-color: rgba(246, 201, 14, 0.12);
    color: #f6c90e;
    border-color: rgba(246, 201, 14, 0.35);
}

/* Blue — informational (rare — use sparingly to keep contrast meaningful) */
.md-typeset .chip-blue, .chip-blue {
    background-color: rgba(88, 166, 255, 0.10);
    color: #79b8ff;
    border-color: rgba(88, 166, 255, 0.30);
}

/* Green — success / recommended / OK */
.md-typeset .chip-green, .chip-green {
    background-color: rgba(63, 185, 80, 0.12);
    color: #5ce878;
    border-color: rgba(63, 185, 80, 0.35);
}

/* Red — danger / required-attention / breaking */
.md-typeset .chip-red, .chip-red {
    background-color: rgba(248, 81, 73, 0.12);
    color: #ff8782;
    border-color: rgba(248, 81, 73, 0.35);
}

/* Muted — neutral / optional / metadata */
.md-typeset .chip-muted, .chip-muted {
    background-color: rgba(139, 148, 158, 0.10);
    color: #b1bac4;
    border-color: rgba(139, 148, 158, 0.30);
}

/* Resource-specific — colour-coded for the two FiveM resources */
.md-typeset .chip-races, .chip-races {
    background-color: rgba(246, 201, 14, 0.15);
    color: #f6c90e;
    border-color: rgba(246, 201, 14, 0.40);
}
.md-typeset .chip-races::before, .chip-races::before { content: "🚗 "; }

.md-typeset .chip-creator, .chip-creator {
    background-color: rgba(88, 166, 255, 0.12);
    color: #79b8ff;
    border-color: rgba(88, 166, 255, 0.35);
}
.md-typeset .chip-creator::before, .chip-creator::before { content: "🛠 "; }

/* State badges — NEW / FIX / UPDATED */
.md-typeset .chip-new, .chip-new {
    background-color: #3fb950;
    color: #0d1117;
    border-color: #3fb950;
    box-shadow: 0 0 8px rgba(63, 185, 80, 0.30);
}
.md-typeset .chip-fix, .chip-fix {
    background-color: #f6c90e;
    color: #0d1117;
    border-color: #f6c90e;
}
.md-typeset .chip-updated, .chip-updated {
    background-color: #58a6ff;
    color: #0d1117;
    border-color: #58a6ff;
}

/* Solid variant — when you want a chip to really stand out */
.md-typeset .chip-solid-gold, .chip-solid-gold {
    background-color: #f6c90e;
    color: #0d1117;
    border-color: #f6c90e;
}

/* Larger size variant for headers / banners */
.md-typeset .chip-lg, .chip-lg {
    padding: 4px 14px;
    font-size: 0.78em;
}

/* Subtle / borderless variant for compact lists */
.md-typeset .chip-soft, .chip-soft {
    border: none;
    background-color: rgba(255, 255, 255, 0.05);
    text-transform: none;
    letter-spacing: 0.02em;
}

/* ─── Light-mode chip overrides ─────────────────────────────────────────── */
[data-md-color-scheme="default"] .chip-gold {
    color: #8a6d00;
    border-color: rgba(138, 109, 0, 0.4);
}
[data-md-color-scheme="default"] .chip-blue {
    color: #0969da;
    border-color: rgba(9, 105, 218, 0.4);
}
[data-md-color-scheme="default"] .chip-green {
    color: #1a7f37;
    border-color: rgba(26, 127, 55, 0.4);
}
[data-md-color-scheme="default"] .chip-red {
    color: #cf222e;
    border-color: rgba(207, 34, 46, 0.4);
}
[data-md-color-scheme="default"] .chip-muted {
    color: #57606a;
    border-color: rgba(87, 96, 106, 0.4);
}

/* ─── Code: inline and block ────────────────────────────────────────────── */
[data-md-color-scheme="slate"] .md-typeset code {
    background-color: rgba(246, 201, 14, 0.10);
    color: #fad84e;
    border-radius: 4px;
    padding: 0.15em 0.4em;
    font-size: 0.85em;
}

/* Block-level code (`pre`) — the OUTER container gets the styling so the
   copy button (positioned absolutely on the highlight wrapper) sits
   correctly. Gold left bar is done via box-shadow INSET so it doesn't
   shift layout or fight the copy button. */
[data-md-color-scheme="slate"] .md-typeset pre {
    background-color: #161b22;
    border: 1px solid #30363d;
    border-radius: 6px;
    /* gold bar drawn inside the left edge — no layout shift, no conflict */
    box-shadow: inset 3px 0 0 0 #f6c90e;
}

/* Code inside pre: transparent background, slight left padding so text
   doesn't sit on top of the gold bar */
[data-md-color-scheme="slate"] .md-typeset pre code {
    background-color: transparent;
    color: #c9d1d9;
    padding: 0;
    padding-left: 0.5em;       /* breathing room from the gold bar */
}

/* The .highlight wrapper (used by pygments code blocks) — inherit the
   same outer styling so the copy button is positioned relative to a
   properly-styled container */
[data-md-color-scheme="slate"] .md-typeset .highlight {
    border-radius: 6px;
    position: relative;
}

/* ─── Copy button — fix Material v9's .md-code__nav wrapper ─────────────── */
/* Material v9 wraps the copy button inside a .md-code__nav container that
   has its own background-color (--md-code-bg-color--lighter). That's what
   was rendering as a "dark square" against our code panel — not the
   button itself. Override the wrapper to match our theme. */

/* Define the missing CSS variables Material expects for code colours */
[data-md-color-scheme="slate"] {
    --md-code-bg-color--light:    #1c2128;
    --md-code-bg-color--lighter:  #1c2128;
}

/* The nav wrapper itself — make it blend with our code panel,
   no visible chrome until you hover it. */
[data-md-color-scheme="slate"] .md-code__nav {
    background-color: transparent !important;
    backdrop-filter: blur(2px);
    border-radius: 6px;
    padding: 0.3rem !important;
    gap: 0.3rem;
    transition: background-color 0.15s ease;
}
[data-md-color-scheme="slate"] .md-code__nav:hover {
    background-color: rgba(28, 33, 40, 0.85) !important;   /* subtle panel-on-hover */
    border: 1px solid rgba(246, 201, 14, 0.20);
}

/* The clipboard button itself */
[data-md-color-scheme="slate"] .md-clipboard {
    color: #8b949e;                                /* muted icon */
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.1s ease, background-color 0.15s ease;
}
[data-md-color-scheme="slate"] .md-clipboard::after {
    background-color: currentColor !important;     /* icon uses currentColor */
}
[data-md-color-scheme="slate"] .md-clipboard:hover {
    color: #f6c90e !important;                     /* warm gold on hover */
    background-color: rgba(246, 201, 14, 0.10) !important;
    transform: translateY(-1px);
    border-radius: 4px;
}
[data-md-color-scheme="slate"] .md-clipboard:focus-visible {
    color: #f6c90e !important;
    outline: 2px solid rgba(246, 201, 14, 0.4) !important;
    outline-offset: 2px;
    border-radius: 4px;
}
/* Brief green flash to confirm successful copy */
[data-md-color-scheme="slate"] .md-clipboard.md-clipboard--active,
[data-md-color-scheme="slate"] .md-clipboard--copied,
[data-md-color-scheme="slate"] .md-clipboard.focus-visible {
    color: #3fb950 !important;
}

/* Light-mode equivalents (just in case the user toggles) */
[data-md-color-scheme="default"] {
    --md-code-bg-color--light:    #f3f4f6;
    --md-code-bg-color--lighter:  #f3f4f6;
}
[data-md-color-scheme="default"] .md-code__nav {
    background-color: transparent !important;
}
[data-md-color-scheme="default"] .md-code__nav:hover {
    background-color: rgba(243, 244, 246, 0.95) !important;
}

/* ─── Tables (stats-site style) ─────────────────────────────────────────── */
[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
    border: 1px solid #30363d;
    background-color: #0d1117;
    border-radius: 6px;
    overflow: hidden;
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
    background-color: #161b22;
    color: #f6c90e;
    border-bottom: 2px solid #30363d;
    font-weight: 600;
    padding: 0.6em 0.9em;
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) td {
    border-bottom: 1px solid #30363d;
    padding: 0.5em 0.9em;
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:hover td {
    background-color: rgba(255, 255, 255, 0.02);
}

/* ─── Blockquotes ───────────────────────────────────────────────────────── */
[data-md-color-scheme="slate"] .md-typeset blockquote {
    border-left: 4px solid #f6c90e;
    color: rgba(201, 209, 217, 0.85);
    background-color: rgba(246, 201, 14, 0.04);
    padding: 0.5em 1em;
    border-radius: 0 4px 4px 0;
}

/* ─── Admonitions & recipe cards — polished panel styling ──────────────── */
[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details {
    background-color: #161b22;
    border: 1px solid #30363d !important;
    border-radius: 8px;
    margin: 1.2em 0;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
[data-md-color-scheme="slate"] .md-typeset details[open] {
    border-color: #484f58 !important;           /* neutral, slightly brighter than closed */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Recipe summary / admonition title — clear clickable header.
   Padding left/right matches the body padding (22px) so content lines up.
   No icon (default Material note-circle is hidden below) so the chip and
   number alone do the visual work. */
[data-md-color-scheme="slate"] .md-typeset .admonition-title,
[data-md-color-scheme="slate"] .md-typeset summary {
    font-weight: 700 !important;
    background-color: rgba(255, 255, 255, 0.02) !important;   /* subtle neutral */
    color: #e6edf3 !important;
    padding: 14px 22px !important;     /* matches body padding-left/right (22px) */
    margin: 0 !important;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

/* Hide Material's default note/admonition icon (the misaligned blue circle).
   Recipe summaries already have number + title + chip — the icon was visual
   noise without information value. Applies to plain <details> blocks; explicit
   admonitions (!!! note "..." etc.) still keep their icons via the rule below. */
[data-md-color-scheme="slate"] .md-typeset details:not(.note):not(.abstract):not(.info):not(.tip):not(.success):not(.question):not(.warning):not(.failure):not(.danger):not(.bug):not(.example):not(.quote) > summary::before {
    display: none !important;
}
/* Open/close arrow indicator — neutral muted grey, no gold */
[data-md-color-scheme="slate"] .md-typeset details:not(.note):not(.abstract):not(.info):not(.tip):not(.success):not(.question):not(.warning):not(.failure):not(.danger):not(.bug):not(.example):not(.quote) > summary::after {
    background-color: #8b949e !important;
}
/* Hover state — subtle neutral lift (no gold) */
[data-md-color-scheme="slate"] .md-typeset summary:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}
/* Open summary — visible separator + slightly more background, all neutral */
[data-md-color-scheme="slate"] .md-typeset details[open] > summary {
    border-bottom: 1px solid #30363d;
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* Recipe body — generous padding so content breathes */
[data-md-color-scheme="slate"] .md-typeset details > *:not(summary) {
    padding-left: 22px;
    padding-right: 22px;
}
[data-md-color-scheme="slate"] .md-typeset details > p:first-of-type {
    padding-top: 16px;
}
[data-md-color-scheme="slate"] .md-typeset details > *:last-child {
    padding-bottom: 18px;
    margin-bottom: 0;
}

/* Bold labels INSIDE recipes (e.g. **What it is:**, **Use when:**, etc.) —
   bright off-white so they stand out as section markers, no gold. */
[data-md-color-scheme="slate"] .md-typeset details > p > strong:first-child {
    color: #f0f6fc;
    font-weight: 700;
    margin-right: 0.2em;
}

/* Inner heading-like labels inside admonitions (h3/h4 used as sub-section
   headers within a card) — slightly subdued */
[data-md-color-scheme="slate"] .md-typeset details h3,
[data-md-color-scheme="slate"] .md-typeset details h4,
[data-md-color-scheme="slate"] .md-typeset .admonition h3,
[data-md-color-scheme="slate"] .md-typeset .admonition h4 {
    margin-top: 1em;
    margin-bottom: 0.4em;
    color: #d4d8e0;
    font-size: 1em;
}

/* Lists inside recipes — better spacing */
[data-md-color-scheme="slate"] .md-typeset details ol,
[data-md-color-scheme="slate"] .md-typeset details ul {
    margin: 0.4em 0 0.8em 1.2em;
    line-height: 1.6;
}
[data-md-color-scheme="slate"] .md-typeset details ol li,
[data-md-color-scheme="slate"] .md-typeset details ul li {
    margin-bottom: 0.3em;
}
[data-md-color-scheme="slate"] .md-typeset details ol li::marker {
    color: #8b949e;                /* muted grey, no gold */
    font-weight: 600;
}

/* Code blocks inside recipes — tighter padding context */
[data-md-color-scheme="slate"] .md-typeset details pre {
    margin: 0.6em 0;
}

/* The "▼" indicator (open/closed arrow) — muted grey, no gold */
[data-md-color-scheme="slate"] .md-typeset summary::after {
    background-color: #8b949e !important;
}

/* ─── Buttons ───────────────────────────────────────────────────────────── */
[data-md-color-scheme="slate"] .md-button {
    color: #f6c90e;
    border-color: #f6c90e;
}
[data-md-color-scheme="slate"] .md-button:hover {
    background-color: rgba(246, 201, 14, 0.10);
    color: #fad84e;
    border-color: #fad84e;
}

/* ─── Footer ────────────────────────────────────────────────────────────── */
[data-md-color-scheme="slate"] .md-footer {
    background-color: #010409;
    border-top: 1px solid #30363d;
}
[data-md-color-scheme="slate"] .md-footer-meta {
    background-color: #010409;
}

/* ─── Search results dropdown ───────────────────────────────────────────── */
[data-md-color-scheme="slate"] .md-search-result {
    background-color: #0d1117;
}
[data-md-color-scheme="slate"] .md-search-result__item {
    background-color: #161b22;
    border-bottom: 1px solid #30363d;
}
[data-md-color-scheme="slate"] .md-search-result__article {
    background-color: #161b22;
}

/* ─── Scrollbar (Chromium / WebKit) ─────────────────────────────────────── */
[data-md-color-scheme="slate"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-md-color-scheme="slate"] ::-webkit-scrollbar-track { background: #0d1117; }
[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb {
    background: #30363d;
    border-radius: 5px;
    border: 2px solid #0d1117;
}
[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb:hover { background: #484f58; }

/* ═══════════════════════════════════════════════════════════════════════
   Light mode (default scheme) — keep simple, just gold + blue accents
   ═══════════════════════════════════════════════════════════════════════ */
[data-md-color-scheme="default"] {
    --md-primary-fg-color:           #f6c90e;
    --md-primary-fg-color--light:    #fad84e;
    --md-primary-fg-color--dark:     #c9a609;
    --md-primary-bg-color:           #0d1117;
    --md-accent-fg-color:            #58a6ff;
}