/* Tokens: dark */

[data-md-color-scheme="slate"] {
    --bon-bg: #09090b;
    --bon-surface: #0a0a0f;
    --bon-surface-2: #18181b;
    --bon-elevated: #27272a;
    --bon-border: rgba(255, 255, 255, 0.07);
    --bon-border-strong: #27272a;
    --bon-line: rgba(255, 255, 255, 0.1);
    --bon-text: #ffffff;
    --bon-text-body: #f0efe8;
    --bon-text-muted: #a1a1aa;
    --bon-text-faint: #71717a;
    --bon-header-bg: rgba(9, 9, 11, 0.95);
    --bon-hover-bg: rgba(255, 255, 255, 0.05);
    --bon-active-bg: rgba(255, 255, 255, 0.08);
    --bon-card-text: rgba(240, 239, 232, 0.7);
    --bon-card-hover-border: rgba(255, 255, 255, 0.5);
    --bon-shadow: rgba(0, 0, 0, 0.35);
    --bon-code-fg: #e4e4e7;
}

/* Tokens: light */

[data-md-color-scheme="default"] {
    --bon-bg: #ffffff;
    --bon-surface: #fafafa;
    --bon-surface-2: #f4f4f5;
    --bon-elevated: #e4e4e7;
    --bon-border: rgba(0, 0, 0, 0.08);
    --bon-border-strong: #e4e4e7;
    --bon-line: rgba(0, 0, 0, 0.1);
    --bon-text: #09090b;
    --bon-text-body: #18181b;
    --bon-text-muted: #52525b;
    --bon-text-faint: #71717a;
    --bon-header-bg: rgba(255, 255, 255, 0.95);
    --bon-hover-bg: rgba(0, 0, 0, 0.04);
    --bon-active-bg: rgba(0, 0, 0, 0.07);
    --bon-card-text: rgba(24, 24, 27, 0.75);
    --bon-card-hover-border: rgba(0, 0, 0, 0.35);
    --bon-shadow: rgba(0, 0, 0, 0.12);
    --bon-code-fg: #18181b;
}

/* Tokens: shared */

:root {
    --bon-accent: #F2CD3A;
    --bon-accent-hover: #E6C22E;
    --bon-accent-text: #020C13;
    --bon-radius: 8px;
    --bon-radius-card: 16px;
    --bon-nav-yellow: #f6dd6e;
}

/* Material colour variables */

[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
    --md-default-bg-color: var(--bon-bg);
    --md-default-fg-color: var(--bon-text-body);
    --md-default-fg-color--light: var(--bon-text-muted);
    --md-default-fg-color--lighter: var(--bon-text-faint);
    --md-default-fg-color--lightest: var(--bon-border-strong);

    --md-primary-fg-color: var(--bon-accent);
    --md-primary-fg-color--light: #f6da6b;
    --md-primary-fg-color--dark: var(--bon-accent-hover);
    --md-primary-bg-color: var(--bon-accent-text);
    --md-primary-bg-color--light: rgba(2, 12, 19, 0.7);
    --md-accent-fg-color: var(--bon-accent);
    --md-accent-fg-color--transparent: rgba(242, 205, 58, 0.1);
    --md-accent-bg-color: var(--bon-accent-text);
    --md-accent-bg-color--light: rgba(2, 12, 19, 0.7);

    --md-typeset-a-color: var(--bon-text);
    --md-code-bg-color: var(--bon-surface-2);
    --md-code-fg-color: var(--bon-code-fg);
    --md-typeset-table-color: var(--bon-border-strong);
    --md-typeset-table-color--light: var(--bon-hover-bg);
    --md-typeset-kbd-color: var(--bon-elevated);
    --md-typeset-kbd-accent-color: var(--bon-surface-2);
    --md-typeset-kbd-border-color: var(--bon-border-strong);
    --md-admonition-fg-color: var(--bon-text-body);
    --md-admonition-bg-color: var(--bon-surface);

    --md-footer-bg-color: var(--bon-bg);
    --md-footer-bg-color--dark: var(--bon-bg);
    --md-footer-fg-color: var(--bon-text);
    --md-footer-fg-color--light: var(--bon-text-muted);
    --md-footer-fg-color--lighter: var(--bon-text-faint);
}

body {
    background-color: var(--bon-bg);
}

/* Header */

.md-header {
    background-color: var(--bon-header-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--bon-text);
    border-bottom: 1px solid var(--bon-line);
    box-shadow: none;
}

.md-header--shadow {
    box-shadow: none;
}

.md-header__title {
    font-weight: 600;
}

.md-header__button.md-logo {
    padding: 0;
    margin: 0.2rem 0.4rem 0.2rem 0.2rem;
}

.md-header__button.md-logo img {
    height: 2rem;
    width: auto;
}

.md-search__form {
    background-color: var(--bon-surface-2);
    border: 1px solid var(--bon-border);
    border-radius: var(--bon-radius);
}

.md-search__form:hover {
    background-color: var(--bon-elevated);
}

.md-search__input,
.md-search__icon {
    color: var(--bon-text);
}

.md-search__input::placeholder,
.md-search__icon[for="__search"] {
    color: var(--bon-text-muted);
}

.md-search__output {
    background-color: var(--bon-surface);
    border: 1px solid var(--bon-border-strong);
    border-radius: 0 0 var(--bon-radius) var(--bon-radius);
}

/* Sidebar */

.md-sidebar--secondary {
    visibility: hidden;
}

.md-nav--primary .md-nav__title {
    background-color: var(--bon-bg);
    box-shadow: none;
}

.md-nav--primary .md-nav__title ~ .md-nav__list {
    box-shadow: none;
}

.md-nav--primary .md-nav__item--section > .md-nav__link,
.md-nav--primary .md-nav__title {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bon-text-muted);
}

.md-nav--primary .md-nav__link {
    color: var(--bon-text-body);
    transition: background-color 0.15s, color 0.15s;
}

@media screen and (min-width: 76.25em) {
    .md-nav--primary .md-nav__item {
        font-size: 0.7rem;
    }
}

@media screen and (min-width: 76.25em) {
    .md-sidebar--primary {
        width: 14.4rem;
    }

    /* Material pins nav width to 11.5rem here */
    .md-sidebar--primary .md-sidebar__inner {
        padding-right: calc(100% - 13.8rem);
    }

    .md-nav--primary .md-nav__link {
        margin: 0.35em 0 0 -0.4em;
        padding: 0.2em 0.4em;
        border-radius: 6px;
    }
}

.md-nav--primary a.md-nav__link:hover {
    color: var(--bon-text);
    background-color: rgba(242, 205, 58, 0.18);
}

.md-nav--primary a.md-nav__link--active,
.md-nav--primary a.md-nav__link--active:hover {
    color: var(--bon-accent-text);
    background-color: var(--bon-nav-yellow);
}

/* Typography */

.md-typeset {
    color: var(--bon-text-body);
    font-size: 0.75rem;
    line-height: 1.6;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
    color: var(--bon-text);
    font-weight: 600;
}

.md-typeset h1 {
    font-size: 1.5rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-bottom: 1.2rem;
}

.md-typeset h2 {
    font-size: 0.95rem;
    line-height: 1.3;
    margin: 2em 0 0.6em;
}

.md-typeset h3 {
    font-size: 0.75rem;
    line-height: 1.4;
    margin: 1.6em 0 0.5em;
}

.md-typeset .bon-lede {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--bon-text-muted);
    max-width: 60ch;
    margin: -0.4rem 0 1.4rem;
}

.md-header__title {
    font-size: 0.8rem;
}

.md-typeset a:not(.md-button) {
    color: var(--bon-text);
    text-decoration: underline;
    text-decoration-color: var(--bon-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: color 0.15s;
}

.md-typeset a:not(.md-button):hover,
.md-typeset a:not(.md-button):focus {
    color: var(--bon-accent-hover);
}

.md-typeset code {
    border-radius: 4px;
}

.highlight,
.md-typeset pre,
.md-typeset pre > code {
    border-radius: var(--bon-radius);
}

.md-typeset .highlight > pre,
.md-typeset pre > code {
    border: 1px solid var(--bon-border);
}

.md-typeset .md-clipboard {
    color: var(--bon-text-muted);
}

.md-typeset .md-clipboard:hover,
.md-typeset .md-clipboard:focus {
    color: var(--bon-accent-hover);
}

.md-content img {
    border-radius: var(--bon-radius);
    border: 1px solid var(--bon-border);
}

.md-typeset hr {
    border-color: var(--bon-border-strong);
}

/* Buttons */

.md-typeset .md-button--primary {
    font-size: 0.8rem;
    min-width: min(320px, 100%);
    text-align: center;
    background-color: var(--bon-accent);
    border-color: var(--bon-accent);
    color: var(--bon-accent-text);
    border-radius: var(--bon-radius);
    font-weight: 600;
    box-shadow: 0 10px 15px -3px var(--bon-shadow), 0 4px 6px -4px var(--bon-shadow);
    transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus {
    background-color: var(--bon-accent-hover);
    border-color: var(--bon-accent-hover);
    color: var(--bon-accent-text);
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px var(--bon-shadow), 0 8px 10px -6px var(--bon-shadow);
}

/* Cards */

.md-typeset .grid {
    gap: 0.6rem;
}

.md-typeset .grid.cards > ul > li {
    position: relative;
    background-color: var(--bon-surface);
    border: 1px solid var(--bon-border);
    border-radius: var(--bon-radius);
    padding: 0.8rem;
    transition: border-color 0.2s;
}

.md-typeset .grid.cards > ul > li:hover {
    border-color: var(--bon-accent);
}

.md-typeset .grid.cards > ul > li > p {
    margin: 0;
    color: var(--bon-card-text);
    font-size: 0.65rem;
    line-height: 1.5;
}

.md-typeset .grid.cards > ul > li > p:first-child {
    margin-bottom: 0.2rem;
}

.md-typeset .grid.cards > ul > li strong {
    color: var(--bon-text);
    font-size: 0.75rem;
    font-weight: 600;
}

.md-typeset .grid.cards > ul > li strong a {
    color: inherit;
    text-decoration: none;
}

.md-typeset .grid.cards > ul > li strong a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.md-typeset .bon-feature.grid.cards > ul > li {
    background-color: var(--bon-accent);
    border-color: var(--bon-accent);
    color: var(--bon-accent-text);
    text-align: center;
    padding: 1.3rem 0.8rem;
}

.md-typeset .bon-feature.grid.cards > ul > li:hover {
    background-color: var(--bon-accent-hover);
    border-color: var(--bon-accent-hover);
}

.md-typeset .bon-feature.grid.cards > ul > li strong {
    color: var(--bon-accent-text);
    font-size: 0.9rem;
}

.md-typeset .bon-feature.grid.cards > ul > li > p {
    color: rgba(2, 12, 19, 0.75);
    font-size: 0.7rem;
}

/* Note callout */

.md-typeset .bon-note {
    border-left: 3px solid var(--bon-accent);
    background-color: rgba(242, 205, 58, 0.12);
    padding: 0.6rem 0.7rem;
    border-radius: 0 var(--bon-radius) var(--bon-radius) 0;
    font-size: 0.7rem;
    margin: 0 0 0.9rem;
}

.md-typeset .bon-note > :last-child {
    margin-bottom: 0;
}

/* Numbered steps: plain rows, +/- toggle */

.md-typeset .bon-steps {
    counter-reset: step;
    margin: 0 0 1rem;
}

.md-typeset .bon-steps details[class] {
    counter-increment: step;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--bon-border-strong);
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0.55rem 0;
}

.md-typeset .bon-steps details[class]:last-child {
    border-bottom: 0;
}

.md-typeset .bon-steps details[class] > summary {
    background: none;
    margin: 0;
    padding: 0.1rem 1.5rem 0.1rem 2rem;
    min-height: 1.3rem;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--bon-text);
    border: 0;
}

.md-typeset .bon-steps details[class] > summary:hover {
    background: none;
    color: var(--bon-accent-hover);
}

.md-typeset .bon-steps details[class] > summary::before {
    content: counter(step);
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background-color: rgba(242, 205, 58, 0.18);
    color: #8a6600;
    font-size: 0.6rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-mask-image: none;
    mask-image: none;
}

[data-md-color-scheme="slate"] .md-typeset .bon-steps details[class] > summary::before {
    color: var(--bon-accent);
}

.md-typeset .bon-steps details[class] > summary::after {
    content: "+";
    right: 0.2rem;
    top: 50%;
    width: auto;
    height: auto;
    transform: translateY(-50%);
    background: none;
    -webkit-mask-image: none;
    mask-image: none;
    color: var(--bon-text-muted);
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1;
}

.md-typeset .bon-steps details[class][open] > summary::after {
    content: "\2212";
    transform: translateY(-50%);
}

.md-typeset .bon-steps details[class] > :not(summary) {
    margin-left: 2rem;
    margin-right: 0;
    font-size: 0.7rem;
}

.md-typeset .bon-steps details[class] > summary + * {
    margin-top: 0.5rem;
}

/* Collapsible steps */

.md-typeset .admonition[class],
.md-typeset details[class] {
    background-color: var(--bon-surface);
    border: 1px solid var(--bon-border);
    border-left: 3px solid var(--bon-accent);
    border-radius: var(--bon-radius);
    box-shadow: none;
}

.md-typeset .admonition[class] > .admonition-title,
.md-typeset details[class] > summary {
    background-color: rgba(242, 205, 58, 0.1);
    color: var(--bon-text);
}

.md-typeset .admonition[class] > .admonition-title::before,
.md-typeset details[class] > summary::before,
.md-typeset details[class] > summary::after {
    background-color: var(--bon-accent-hover);
}

.md-typeset details[class][open] > summary {
    border-bottom: 1px solid var(--bon-border);
}

.md-typeset details[class] > summary:hover {
    background-color: rgba(242, 205, 58, 0.18);
}

/* Tables: no outer border, plain header */

.md-typeset table:not([class]) {
    border: 0;
    border-radius: 0;
    font-size: 0.65rem;
    width: 100%;
    display: table;
}

.md-typeset table:not([class]) th {
    color: var(--bon-text-muted);
    font-size: 0.6rem;
    font-weight: 600;
    background: none;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--bon-border-strong);
}

.md-typeset table:not([class]) td {
    padding: 0.4rem 0.5rem;
    vertical-align: top;
    border-top: 0;
    border-bottom: 1px solid var(--bon-border-strong);
}

.md-typeset table:not([class]) code {
    background: none;
    padding: 0;
    font-size: 0.6rem;
    color: var(--bon-text);
}

@media screen and (min-width: 60em) {
    .md-typeset table:not([class]) td:first-child {
        white-space: nowrap;
    }
}

/* Footer */

.md-footer {
    border-top: 1px solid var(--bon-line);
}

.md-footer__link:hover .md-footer__title {
    color: var(--bon-accent-hover);
}

.md-footer-meta {
    background-color: var(--bon-bg);
}

/* Marketing logos */

.md-typeset img.bon-logo-dark,
.md-typeset img.bon-logo-light {
    display: block;
    width: 100%;
    max-width: 640px;
    padding: 1.5rem 2rem;
    border-radius: var(--bon-radius);
    margin-bottom: 0.6rem;
}

.md-typeset img.bon-logo-dark {
    background-color: #09090b;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.md-typeset img.bon-logo-light {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

/* "New" badges in the sidebar */

.md-nav--primary .md-status {
    margin-left: auto;
    padding: 0 0.35rem;
    border-radius: 99px;
    font-size: 0.5rem;
    font-weight: 600;
    line-height: 1.6;
    background-color: var(--bon-nav-yellow);
    color: var(--bon-accent-text);
    align-self: center;
    flex-shrink: 0;
    white-space: nowrap;
}

[data-md-color-scheme="default"] .md-nav--primary .md-status,
[data-md-color-scheme="default"] .md-nav--primary a.md-nav__link--active .md-status {
    background-color: var(--bon-nav-yellow);
    color: #7D5C00;
}

.md-nav--primary .md-status::after {
    content: "New";
    display: inline;
    height: auto;
    width: auto;
    background: none;
    -webkit-mask-image: none;
    mask-image: none;
    vertical-align: baseline;
}

.md-nav--primary a.md-nav__link--active .md-status {
    background-color: var(--bon-nav-yellow);
    color: var(--bon-accent-text);
}

/* Full-width layout */

.md-grid {
    max-width: none;
}

.md-header__inner {
    padding: 0 1rem;
}

@media screen and (min-width: 76.25em) {
    .md-main__inner {
        margin-top: 0;
    }

    .md-sidebar--primary {
        position: fixed;
        top: 2.4rem;
        left: 0;
        box-sizing: border-box;
        height: calc(100vh - 2.4rem);
        padding: 1.2rem 0;
        display: flex;
        flex-direction: column;
        background-color: var(--bon-surface);
        border-right: 1px solid var(--bon-border);
    }

    .md-sidebar--primary .md-sidebar__scrollwrap {
        height: auto !important;
        max-height: none;
        flex: 1 1 auto;
        overflow-y: auto;
    }

    .md-sidebar--primary:not([hidden]) ~ .md-content {
        margin-left: 14.4rem;
    }

    .md-sidebar--primary .md-sidebar__inner {
        padding-left: 0.8rem;
    }

    .md-nav--primary .md-nav__title {
        background-color: var(--bon-surface);
    }

    .md-content {
        max-width: 38rem;
    }

    .md-content__inner {
        margin: 0 2.8rem;
        padding-top: 2rem;
        padding-bottom: 4rem;
    }

    .md-sidebar--primary:not([hidden]) ~ .md-content > .md-content__inner {
        margin-left: 2.8rem;
    }

    .md-footer__inner,
    .md-footer-meta__inner {
        margin: 0;
        padding-left: 15.6rem;
        max-width: calc(15.6rem + 38rem);
    }
}

.md-path {
    margin-bottom: 0.3rem;
}

.md-path + .md-content__button + h1,
.md-path + h1 {
    margin-top: 0;
}