/* ib-dx documentation theme.
 *
 * One identity in two lights, taken from the banner: slate ink, one red, a
 * faint grid. mdBook's five themes are folded onto those two, so whichever a
 * reader has chosen, the page looks like this project and nothing else. */

/* ── Tokens ─────────────────────────────────────────────────────────────── */

:root {
    --dx-red: #de1a22;
    --dx-radius: 10px;
    --dx-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mono-font: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --code-font-size: 0.86em;
    --content-max-width: 820px;
    --sidebar-target-width: 280px;
}

.light, .rust, html:not(.js) {
    --dx-ink: #0f172a;
    --dx-muted: #475569;
    --dx-faint: #94a3b8;
    --dx-surface: #f8fafc;
    --dx-border: #e2e8f0;
    --dx-grid: rgba(15, 23, 42, 0.05);
    --dx-code-bg: #f8fafc;
    --dx-accent: #c4161d;
    --dx-accent-soft: rgba(222, 26, 34, 0.08);

    --bg: #ffffff;
    --fg: #1e293b;
    --sidebar-bg: #f8fafc;
    --sidebar-fg: #334155;
    --sidebar-non-existant: #94a3b8;
    --sidebar-active: #c4161d;
    --sidebar-spacer: #e2e8f0;
    --sidebar-header-border-color: #de1a22;
    --scrollbar: #cbd5e1;
    --icons: #64748b;
    --icons-hover: #0f172a;
    --links: #c4161d;
    --inline-code-color: #0f172a;
    --theme-popup-bg: #ffffff;
    --theme-popup-border: #e2e8f0;
    --theme-hover: #f1f5f9;
    --quote-bg: #f8fafc;
    --quote-border: #e2e8f0;
    --warning-border: #d97706;
    --table-border-color: #e2e8f0;
    --table-header-bg: #f1f5f9;
    --table-alternate-bg: #fbfcfd;
    --searchbar-border-color: #cbd5e1;
    --searchbar-bg: #ffffff;
    --searchbar-fg: #0f172a;
    --searchbar-shadow-color: rgba(15, 23, 42, 0.08);
    --searchresults-header-fg: #64748b;
    --searchresults-border-color: #e2e8f0;
    --searchresults-li-bg: #f8fafc;
    --search-mark-bg: rgba(222, 26, 34, 0.18);
    --color-scheme: light;
    --copy-button-filter: invert(45%);
    --copy-button-filter-hover: invert(15%) sepia(90%) saturate(5000%) hue-rotate(350deg);
    --footnote-highlight: #de1a22;
    --overlay-bg: rgba(15, 23, 42, 0.35);
    --blockquote-note-color: #0969da;
    --blockquote-tip-color: #1a7f37;
    --blockquote-important-color: #8250df;
    --blockquote-warning-color: #9a6700;
    --blockquote-caution-color: #c4161d;
}

.coal, .navy, .ayu {
    --dx-ink: #f8fafc;
    --dx-muted: #94a3b8;
    --dx-faint: #64748b;
    --dx-surface: #111827;
    --dx-border: #1e293b;
    --dx-grid: rgba(255, 255, 255, 0.035);
    --dx-code-bg: #0f1623;
    --dx-accent: #ff5a60;
    --dx-accent-soft: rgba(255, 90, 96, 0.1);

    --bg: #0b0f17;
    --fg: #cbd5e1;
    --sidebar-bg: #0d121c;
    --sidebar-fg: #94a3b8;
    --sidebar-non-existant: #475569;
    --sidebar-active: #ff5a60;
    --sidebar-spacer: #1e293b;
    --sidebar-header-border-color: #de1a22;
    --scrollbar: #334155;
    --icons: #64748b;
    --icons-hover: #f8fafc;
    --links: #ff6b70;
    --inline-code-color: #e2e8f0;
    --theme-popup-bg: #111827;
    --theme-popup-border: #1e293b;
    --theme-hover: #1e293b;
    --quote-bg: #111827;
    --quote-border: #1e293b;
    --warning-border: #f59e0b;
    --table-border-color: #1e293b;
    --table-header-bg: #111827;
    --table-alternate-bg: #0d131e;
    --searchbar-border-color: #334155;
    --searchbar-bg: #111827;
    --searchbar-fg: #f8fafc;
    --searchbar-shadow-color: rgba(0, 0, 0, 0.4);
    --searchresults-header-fg: #94a3b8;
    --searchresults-border-color: #1e293b;
    --searchresults-li-bg: #111827;
    --search-mark-bg: rgba(255, 90, 96, 0.3);
    --color-scheme: dark;
    --copy-button-filter: invert(55%);
    --copy-button-filter-hover: invert(50%) sepia(90%) saturate(3000%) hue-rotate(330deg);
    --footnote-highlight: #ff5a60;
    --overlay-bg: rgba(0, 0, 0, 0.55);
    --blockquote-note-color: #4493f8;
    --blockquote-tip-color: #3fb950;
    --blockquote-important-color: #ab7df8;
    --blockquote-warning-color: #d29922;
    --blockquote-caution-color: #ff5a60;
}

/* ── Two lights, not five: the menu offers what the identity has ─────────── */

#mdbook-theme-rust,
#mdbook-theme-navy,
#mdbook-theme-ayu {
    display: none;
}
#mdbook-theme-coal { font-size: 0; }
#mdbook-theme-coal::after { content: "Dark"; font-size: 1.4rem; }

/* ── Type ───────────────────────────────────────────────────────────────── */

html, body, .content, .menu-title, .sidebar {
    font-family: var(--dx-font);
}

.content {
    font-size: 16.5px;
    line-height: 1.7;
}

.content h1, .content h2, .content h3, .content h4 {
    color: var(--dx-ink);
    letter-spacing: -0.02em;
}
.content h1 { font-size: 2.3em; font-weight: 800; line-height: 1.15; margin: 1.6em 0 1.1em; }
.content h2 {
    font-size: 1.5em;
    font-weight: 750;
    margin-top: 2.8em;
    padding-bottom: 0.45em;
    border-bottom: 1px solid var(--dx-border);
}
.content h3 { font-size: 1.18em; font-weight: 700; margin-top: 2em; }
.content h4 { font-size: 1em; font-weight: 700; }

.content a, .content a:visited { color: var(--links); text-decoration: none; }
.content a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
.content .header, .content .header:visited { color: inherit; }

.content strong { color: var(--dx-ink); }

/* ── Code ───────────────────────────────────────────────────────────────── */

.content :not(pre) > code {
    background: var(--dx-surface);
    border: 1px solid var(--dx-border);
    border-radius: 6px;
    padding: 0.1em 0.38em;
}

.content pre {
    background: var(--dx-code-bg);
    border: 1px solid var(--dx-border);
    border-radius: var(--dx-radius);
    padding: 0;
}
.content pre > code.hljs,
.content pre > code {
    background: transparent;
    padding: 1em 1.15em;
    line-height: 1.6;
}
.content pre > .buttons { opacity: 0; transition: opacity 0.15s; }
.content pre:hover > .buttons { opacity: 1; }

/* ── Chrome ─────────────────────────────────────────────────────────────── */

#mdbook-menu-bar {
    border-bottom: 1px solid var(--dx-border);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(8px);
}
.menu-title {
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--dx-ink);
}

.sidebar { border-right: 1px solid var(--dx-border); font-size: 0.95em; }
.chapter li.chapter-item { line-height: 1.5; margin-block-start: 0.35em; }
.chapter li.chapter-item a { border-radius: 6px; padding: 2px 8px; }
.chapter li.chapter-item a:hover { color: var(--dx-ink); background: var(--theme-hover); text-decoration: none; }
.chapter li a.active {
    color: var(--sidebar-active);
    background: var(--dx-accent-soft);
    font-weight: 600;
}
.chapter li.part-title {
    color: var(--dx-faint);
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    margin: 1.6em 0 0.35em 8px;
}

.nav-chapters { color: var(--dx-faint); }
.nav-chapters:hover { color: var(--dx-accent); }

/* ── Tables and callouts ────────────────────────────────────────────────── */

.content table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--dx-border);
    border-radius: var(--dx-radius);
    overflow: hidden;
    font-size: 0.93em;
    display: table;
}
.content table th {
    background: var(--table-header-bg);
    color: var(--dx-ink);
    font-weight: 650;
    text-align: left;
}
.content table td, .content table th {
    border: none;
    border-bottom: 1px solid var(--dx-border);
    padding: 0.55em 0.85em;
}
.content table tr:last-child td { border-bottom: none; }

.content blockquote {
    background: var(--quote-bg);
    border: 1px solid var(--dx-border);
    border-left: 3px solid var(--dx-faint);
    border-radius: 8px;
    padding: 0.75em 1.1em;
    margin: 1.4em 0;
}
.content blockquote > :first-child { margin-top: 0; }
.content blockquote > :last-child { margin-bottom: 0; }

/* ── Landing page ───────────────────────────────────────────────────────── */

.dx-hero {
    position: relative;
    text-align: center;
    padding: 0.5em 0 1.5em;
    margin-bottom: 1em;
}
.dx-hero::before {
    content: "";
    position: absolute;
    inset: -2rem -30vw 0;
    z-index: -1;
    background-image:
        linear-gradient(var(--dx-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--dx-grid) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at 50% 35%, black 25%, transparent 70%);
}

.dx-banner { display: block; width: 100%; height: auto; margin: 0 auto; }
.coal .dx-banner-light, .navy .dx-banner-light, .ayu .dx-banner-light,
.light .dx-banner-dark, .rust .dx-banner-dark { display: none; }
html:not(.js) .dx-banner-dark { display: none; }

.dx-title {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.dx-lede {
    max-width: 620px;
    margin: 0.5em auto 1.6em;
    font-size: 1.14em;
    line-height: 1.6;
    color: var(--dx-muted);
}

.dx-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6em; margin: 0; }
.dx-cta a, .dx-cta a:visited {
    display: inline-flex;
    align-items: center;
    padding: 0.62em 1.15em;
    border-radius: 8px;
    font-weight: 650;
    font-size: 0.95em;
    text-decoration: none !important;
    border: 1px solid var(--dx-border);
    color: var(--dx-ink);
    background: var(--bg);
    transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.dx-cta a:hover { border-color: var(--dx-accent); transform: translateY(-1px); }
.dx-cta a.dx-primary, .dx-cta a.dx-primary:visited {
    background: var(--dx-red);
    border-color: var(--dx-red);
    color: #ffffff;
}
.dx-cta a.dx-primary:hover { background: #c4161d; border-color: #c4161d; }

.dx-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.9em;
    margin: 1.4em 0 1em;
}
.dx-card {
    border: 1px solid var(--dx-border);
    border-radius: var(--dx-radius);
    padding: 1.05em 1.15em;
    background: var(--dx-surface);
    transition: border-color 0.15s;
}
.dx-card:hover { border-color: var(--dx-accent); }
.dx-card-title {
    margin: 0 0 0.35em !important;
    font-weight: 700;
    color: var(--dx-ink);
    display: flex;
    align-items: center;
    gap: 0.5em;
}
.dx-card-title::before {
    content: "";
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--dx-red);
    flex: none;
}
.dx-card p:not(.dx-card-title) { margin: 0 !important; font-size: 0.93em; line-height: 1.6; color: var(--dx-muted); }

a.dx-card, a.dx-card:visited { display: block; color: inherit !important; text-decoration: none !important; }
a.dx-card:hover { transform: translateY(-1px); }
a.dx-card strong { display: block; color: var(--dx-ink); margin-bottom: 0.2em; }
a.dx-card span { font-size: 0.92em; color: var(--dx-muted); }