/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=Outfit:wght@400;500;600&display=swap');

/* ── Color scheme ─────────────────────────────────────────── */
[data-md-color-scheme="slate"] {
    --md-default-bg-color:       #12110e !important;
    --md-default-fg-color:       #c8bba8 !important;
    --md-typeset-color:          #9a8878 !important;
    --md-code-bg-color:          #1a1813 !important;
    --md-sidebar-bg-color:       #0f0e0c !important;

    /* Kill the blue — override every primary/accent slot */
    --md-primary-fg-color:               #0f0e0c !important;
    --md-primary-bg-color:               #0f0e0c !important;
    --md-primary-fg-color--light:        #0f0e0c !important;
    --md-primary-fg-color--dark:         #0f0e0c !important;
    --md-accent-fg-color:                #c8894a !important;
    --md-accent-fg-color--transparent:   rgba(200,137,74,0.1) !important;
}

/* ── Header ───────────────────────────────────────────────── */
.md-header {
    background: #0f0e0c !important;
    border-bottom: 0.5px solid #2a2520 !important;
    box-shadow: none !important;
}
.md-header__title {
    color: #e8e0d5 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
}

/* ── Nav tabs (Home / Pipeline / Extras) ──────────────────── */
.md-tabs {
    background: #0f0e0c !important;
    border-bottom: 0.5px solid #2a2520 !important;
}
.md-tabs__link {
    color: #7a6a55 !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}
.md-tabs__link--active,
.md-tabs__link:hover {
    color: #c8894a !important;
}
.md-tabs__link--active::after {
    background: #c8894a !important;
}

/* ── Sidebar background ───────────────────────────────────── */
.md-sidebar {
    background: #0f0e0c !important;
}

/* ── Section titles: "Pipeline", "Extras" ────────────────── */
/* No pill — amber uppercase text with a subtle bottom rule */
.md-nav__title {
    color: #c8894a !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    background: transparent !important;
    box-shadow: none !important;
    border-left: none !important;
    border-bottom: 0.5px solid #2a2520 !important;
    border-radius: 0 !important;
    padding: 0.3rem 0.6rem 0.5rem !important;
    margin-bottom: 0.3rem !important;
}
/* Catch section label when rendered as a nav link */
.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link,
.md-nav--lifted > .md-nav__list > .md-nav__item > label.md-nav__link {
    color: #c8894a !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    background: transparent !important;
    border-left: none !important;
    border-bottom: 0.5px solid #2a2520 !important;
    border-radius: 0 !important;
    padding: 0.3rem 0.6rem 0.5rem !important;
}

/* ── Regular nav links ────────────────────────────────────── */
.md-nav__link {
    color: #7a6a55 !important;
    font-size: 0.83rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    padding: 0.3rem 0.6rem !important;
    border-radius: 4px !important;
    transition: color 0.15s, background 0.15s !important;
}
.md-nav__link:hover {
    color: #c8bba8 !important;
    background: #1a1610 !important;
}

/* ── Active nav item — thicker border, amber ─────────────── */
.md-nav__item--active > .md-nav__link {
    color: #c8894a !important;
    border-left: 3px solid #c8894a !important;
    padding-left: calc(0.6rem - 3px) !important;
    background: #1e1a14 !important;
    border-radius: 0 4px 4px 0 !important;
    font-weight: 600 !important;
}

/* ── Table of Contents (right sidebar) ───────────────────── */
.md-nav--secondary .md-nav__title {
    color: #4a3e30 !important;
    font-size: 0.63rem !important;
    letter-spacing: 0.13em !important;
    padding: 0 0.6rem 0.4rem !important;
}
.md-nav--secondary .md-nav__link {
    color: #6a5c4a !important;
    font-size: 0.80rem !important;
    font-weight: 400 !important;
}
.md-nav--secondary .md-nav__link:hover {
    color: #c8894a !important;
    background: transparent !important;
}
.md-nav--secondary .md-nav__item--active > .md-nav__link {
    color: #c8894a !important;
    border-left: 2px solid #c8894a !important;
    padding-left: calc(0.6rem - 2px) !important;
    background: transparent !important;
    border-radius: 0 !important;
    font-weight: 500 !important;
}

/* ── Typography ───────────────────────────────────────────── */
h1 {
    font-family: "Playfair Display", serif !important;
    color: #e8c080 !important;
    font-size: 2.6rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    margin-bottom: 0.8rem !important;
}
h2 {
    font-family: "Outfit", sans-serif !important;
    color: #c8894a !important;
    font-size: 1.45rem !important;
    font-weight: 600 !important;
    border-bottom: 0.5px solid #2a2520 !important;
    padding-bottom: 0.4rem !important;
    margin-top: 2rem !important;
}
h3 {
    font-family: "Outfit", sans-serif !important;
    color: #b07840 !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
}
h4, h5, h6 {
    font-family: "Outfit", sans-serif !important;
    color: #9a7840 !important;
}

/* Body text — bumped up from 0.78 to 0.92 */
.md-typeset {
    font-size: 0.92rem !important;
    line-height: 1.85 !important;
    color: #9a8878 !important;
}
.md-content {
    padding-left: 2rem !important;
}

/* ── Code ─────────────────────────────────────────────────── */
.md-typeset code {
    background: #1a1813 !important;
    color: #8a9e82 !important;
    border: 0.5px solid #2a2520 !important;
    border-radius: 4px !important;
    font-size: 0.88rem !important;
}
.md-typeset pre {
    background: #1a1813 !important;
    border: 0.5px solid #2a2520 !important;
    border-left: 3px solid #c8894a !important;
    border-radius: 4px !important;
}
.md-typeset pre code {
    font-size: 0.86rem !important;
    line-height: 1.7 !important;
}

/* ── Links ────────────────────────────────────────────────── */
.md-typeset a {
    color: #d4a855 !important;
    text-decoration: none !important;
    border-bottom: 0.5px solid #5a4820 !important;
}
.md-typeset a:hover {
    color: #e8c080 !important;
    border-bottom-color: #c8894a !important;
}

/* ── GitHub repo icon (top right) ────────────────────────── */
.md-header__source {
    color: #c8bba8 !important;
}
.md-source__icon svg {
    fill: #c8bba8 !important;
}
.md-source__facts {
    color: #7a6a55 !important;
}
.md-source__repository {
    color: #c8bba8 !important;
    font-weight: 500 !important;
}
.md-header__source:hover .md-source__repository {
    color: #e8c080 !important;
}
.md-header__source:hover .md-source__icon svg {
    fill: #e8c080 !important;
}

/* ── Index — subtitle ─────────────────────────────────────── */
.subtitle {
    margin-top: 1.2rem !important;
    margin-bottom: 2rem !important;
    font-size: 1.0rem !important;
    color: #7a6a55 !important;
    line-height: 1.7 !important;
}

/* ── Index — hero image ───────────────────────────────────── */
.hero-figure {
    margin: 1.5rem 0 2rem !important;
}
.hero-img {
    width: 100% !important;
    border-radius: 10px !important;
    border: 1px solid #2a2520 !important;
    display: block !important;
}
.hero-figure figcaption {
    font-size: 0.78rem !important;
    color: #5a4e3e !important;
    text-align: center !important;
    margin-top: 0.5rem !important;
    font-family: monospace !important;
    letter-spacing: 0.02em !important;
    line-height: 1.4 !important;
}

/* ── Index — feature grid ─────────────────────────────────── */
.feature-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 8px !important;
    margin: 1rem 0 2rem !important;
}
.feature-item {
    display: flex !important;
    align-items: baseline !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    background: #1a1813 !important;
    border: 0.5px solid #2a2520 !important;
    border-radius: 6px !important;
    font-size: 0.85rem !important;
    color: #9a8878 !important;
    line-height: 1.5 !important;
}
.feature-tag {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #c8894a !important;
    white-space: nowrap !important;
    font-family: monospace !important;
    letter-spacing: 0.04em !important;
    min-width: 88px !important;
}

/* ── Index — stack grid ───────────────────────────────────── */
.stack-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin: 1rem 0 2rem !important;
    border: 0.5px solid #2a2520 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}
.stack-item {
    display: flex !important;
    align-items: baseline !important;
    gap: 0 !important;
    padding: 8px 14px !important;
    border-bottom: 0.5px solid #2a2520 !important;
    font-size: 0.88rem !important;
}
.stack-item:last-child {
    border-bottom: none !important;
}
.stack-label {
    color: #c8894a !important;
    font-weight: 600 !important;
    font-family: monospace !important;
    font-size: 0.80rem !important;
    min-width: 110px !important;
}
.stack-val {
    color: #9a8878 !important;
}

/* ── Accent colors for inline text ───────────────────────── */
.accent-red  { color: #c87060 !important; font-weight: 600 !important; }
.accent-gold { color: #e8c080 !important; font-weight: 600 !important; }
.accent-sage { color: #8a9e82 !important; font-weight: 600 !important; }

/* ── Footer ───────────────────────────────────────────────── */
.md-footer {
    background: #0d0c0a !important;
    border-top: 0.5px solid #1e1a14 !important;
}
.md-footer-meta {
    background: #0d0c0a !important;
}
.md-footer-meta__inner {
    color: #2a2218 !important;
}
.md-footer-meta__inner a {
    color: #2a2218 !important;
    border-bottom: none !important;
}

/* ── Body text brightness bump ────────────────────────────── */
.md-typeset {
    color: #b8a898 !important;
}
.md-typeset p {
    color: #b8a898 !important;
}

/* ── Feature grid — fix overlap ───────────────────────────── */
.feature-item {
    align-items: flex-start !important;
}
.feature-tag {
    flex-shrink: 0 !important;
    margin-top: 0.15rem !important;
}

/* ── Stack grid — fix Dependencies spacing ────────────────── */
.stack-label {
    flex-shrink: 0 !important;
}
.stack-val {
    padding-left: 1rem !important;
}

/* ── Nav cards (bottom of index) ──────────────────────────── */
.nav-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-top: 2rem !important;
}
.nav-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    padding: 18px 20px !important;
    background: #1a1813 !important;
    border: 0.5px solid #2a2520 !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    border-bottom: none !important;
    transition: border-color 0.2s, background 0.2s !important;
}
.nav-card:hover {
    background: #201c14 !important;
    border-color: #c8894a !important;
}
.nav-card-label {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: #c8894a !important;
    font-family: monospace !important;
}
.nav-card-title {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #c8bba8 !important;
}
.nav-card-sub {
    font-size: 0.80rem !important;
    color: #7a6a55 !important;
    line-height: 1.5 !important;
}

/* ── Github link at bottom ────────────────────────────────── */
.github-link {
    margin-top: 1rem !important;
    font-size: 0.82rem !important;
    color: #5a4e3e !important;
}
.github-link a {
    color: #5a4e3e !important;
    border-bottom: 0.5px solid #3a3020 !important;
}
.github-link a:hover {
    color: #c8894a !important;
    border-bottom-color: #c8894a !important;
}

/* ── Page images ──────────────────────────────────────────── */
.page-img {
    width: 100% !important;
    border-radius: 8px !important;
    border: 0.5px solid #2a2520 !important;
    display: block !important;
}
figure {
    margin: 1.5rem 0 !important;
}
figure figcaption {
    font-size: 0.78rem !important;
    color: #5a4e3e !important;
    text-align: center !important;
    margin-top: 0.5rem !important;
    font-family: monospace !important;
    line-height: 1.4 !important;
}

/* ── Bug card ─────────────────────────────────────────────── */
.bug-card {
    border: 0.5px solid #4a2020 !important;
    border-left: 3px solid #c87060 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    margin: 1.5rem 0 !important;
}
.bug-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 14px !important;
    background: #1e1210 !important;
    border-bottom: 0.5px solid #4a2020 !important;
}
.bug-tag {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    color: #c87060 !important;
    font-family: monospace !important;
    background: #2a1410 !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    border: 0.5px solid #4a2020 !important;
}
.bug-title {
    font-size: 0.90rem !important;
    font-weight: 600 !important;
    color: #c8bba8 !important;
}
.bug-body {
    padding: 4px 0 !important;
}
.bug-row {
    display: grid !important;
    grid-template-columns: 110px 1fr !important;
    gap: 12px !important;
    padding: 9px 14px !important;
    border-bottom: 0.5px solid #2a1a18 !important;
    font-size: 0.87rem !important;
    line-height: 1.6 !important;
}
.bug-row:last-child {
    border-bottom: none !important;
}
.bug-label {
    color: #c87060 !important;
    font-weight: 600 !important;
    font-size: 0.80rem !important;
    padding-top: 0.1rem !important;
}

/* ── Code blocks — more breathing room ───────────────────── */
.md-typeset pre {
    margin: 1.4rem 0 !important;
    padding: 1rem 1.2rem !important;
}
.md-typeset pre code {
    font-size: 0.80rem !important;
    line-height: 1.75 !important;
}
.md-typeset code {
    font-size: 0.83rem !important;
    padding: 0.1em 0.4em !important;
}

/* ── Remove left border from code blocks ─────────────────── */
.md-typeset pre {
    border-left: none !important;
}

/* ── Interactive viz wrapper ──────────────────────────────── */
.viz-wrapper {
    border: 0.5px solid #2a2520 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    margin: 1.5rem 0 !important;
}
.viz-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 14px !important;
    background: #1a1813 !important;
    border-bottom: 0.5px solid #2a2520 !important;
}
.viz-label {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: #c8894a !important;
    font-family: monospace !important;
    letter-spacing: 0.06em !important;
}
.viz-hint {
    font-size: 0.70rem !important;
    color: #5a4e3e !important;
    font-family: monospace !important;
}
.viz-wrapper iframe {
    display: block !important;
    border: none !important;
}

/* ── Remove inner border on code inside pre ──────────────── */
.md-typeset pre > code {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* ── Math block (formula display) ────────────────────────── */
.math-block {
    font-family: "JetBrains Mono", monospace !important;
    font-size: 1.05rem !important;
    color: #c8bba8 !important;
    background: #1a1813 !important;
    border: 0.5px solid #2a2520 !important;
    border-radius: 6px !important;
    padding: 0.7rem 1.2rem !important;
    margin: 1.2rem 0 !important;
    text-align: center !important;
    letter-spacing: 0.03em !important;
}

/* ── MathJax / arithmatex — no background, centered ─────── */
.arithmatex {
    text-align: center !important;
    margin: 1.4rem 0 !important;
    background: transparent !important;
    border: none !important;
    overflow-x: auto !important;
}
.arithmatex mjx-container {
    font-size: 1.1rem !important;
}

/* Override math-block to remove background ──────────────── */
.math-block {
    background: transparent !important;
    border: none !important;
    font-size: 1.05rem !important;
    text-align: center !important;
    margin: 1.4rem 0 !important;
    color: #c8bba8 !important;
    padding: 0 !important;
}

/* ── Page navigation buttons ──────────────────────────────── */
.page-nav {
    display: flex !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-top: 3rem !important;
    padding-top: 1.5rem !important;
    border-top: 0.5px solid #2a2520 !important;
}
.page-nav-btn {
    display: inline-flex !important;
    align-items: center !important;
    padding: 10px 18px !important;
    background: #1a1813 !important;
    border: 0.5px solid #2a2520 !important;
    border-radius: 6px !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: #9a8878 !important;
    text-decoration: none !important;
    border-bottom: 0.5px solid #2a2520 !important;
    transition: all 0.2s !important;
}
.page-nav-btn:hover {
    color: #e8c080 !important;
    border-color: #c8894a !important;
    background: #201c14 !important;
    border-bottom-color: #c8894a !important;
}
.page-nav-btn.next {
    margin-left: auto !important;
}

/* ── Image caption (replaces figcaption) ─────────────────── */
.img-caption {
    font-size: 0.78rem !important;
    color: #5a4e3e !important;
    text-align: center !important;
    margin-top: 0.4rem !important;
    margin-bottom: 2rem !important;
    font-family: monospace !important;
    line-height: 1.4 !important;
}

/* ── Remove dark background from Pipeline/Extras title ───── */
.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link,
.md-nav__title,
[data-md-scrollfix] .md-nav__title {
    background: transparent !important;
    box-shadow: none !important;
}

/* ── Remove ALL backgrounds from nav titles ──────────────── */
.md-nav__title,
.md-nav__title::before,
.md-nav__title[for],
.md-nav--primary .md-nav__title,
.md-nav--lifted .md-nav__title,
[data-md-scrollfix] {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* ── Nuclear override for sticky nav title background ────── */
.md-sidebar .md-nav__title {
    background-color: #0f0e0c !important;
    box-shadow: 0 1px 0 #2a2520 !important;
}
.md-sidebar--primary .md-nav__title {
    background-color: #0f0e0c !important;
    box-shadow: none !important;
}
/* The scrollfix attribute adds inline style — override with color matching sidebar */
[data-md-component="sidebar"] .md-nav__title,
.md-sidebar__scrollwrap .md-nav__title {
    background-color: #0f0e0c !important;
    box-shadow: none !important;
}

/* ── Viz header — keep to one line ───────────────────────── */
.viz-header {
    flex-wrap: nowrap !important;
    padding: 6px 14px !important;
    gap: 8px !important;
}
.viz-hint {
    font-size: 0.68rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.viz-label {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* ── Prerequisite note ────────────────────────────────────── */
.prereq-note {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    background: #1a1813 !important;
    border: 0.5px solid #2a2520 !important;
    border-left: 3px solid #d4a855 !important;
    border-radius: 0 6px 6px 0 !important;
    margin-bottom: 1.5rem !important;
    font-size: 0.88rem !important;
    color: #9a8878 !important;
    line-height: 1.5 !important;
}
.prereq-icon {
    font-size: 1rem !important;
    flex-shrink: 0 !important;
}
.prereq-note a {
    color: #d4a855 !important;
    border-bottom: 0.5px solid #5a4820 !important;
    font-weight: 500 !important;
}
.prereq-note a:hover {
    color: #e8c080 !important;
    border-bottom-color: #c8894a !important;
}