/* Native-inspired chrome. Palette tokens keep all existing themes usable. */
:root {
    --menu-bar-height: 64px;
    --mac-line: color-mix(in srgb, var(--fg) 12%, transparent);
    --mac-muted: color-mix(in srgb, var(--fg) 58%, var(--bg));
    --mac-surface: color-mix(in srgb, var(--bg) 94%, var(--fg));
    --mac-hover: color-mix(in srgb, var(--fg) 8%, transparent);
    --mac-shadow: 0 12px 36px rgb(0 0 0 / 14%), 0 1px 3px rgb(0 0 0 / 8%);
}
html.light {
    --sidebar-bg: #edf0f3;
    --sidebar-fg: #292b30;
    --sidebar-active: #007aff;
    --links: #0071e3;
    --icons: #55585e;
}
@media screen {
    #mdbook-sidebar {
        background: linear-gradient(155deg, color-mix(in srgb, var(--sidebar-bg) 93%, var(--links)), var(--sidebar-bg) 35%, color-mix(in srgb, var(--sidebar-bg) 97%, var(--links)));
        border-inline-end: 1px solid var(--mac-line);
    }
    .sidebar .sidebar-scrollbox { top: 76px; padding: 6px 14px 28px; }
    #mdbook-menu-bar {
        align-items: center;
        flex-wrap: nowrap;
        gap: 12px;
        box-sizing: border-box;
        height: var(--menu-bar-height);
        padding: 0 20px;
        background: color-mix(in srgb, var(--bg) 84%, transparent);
        -webkit-backdrop-filter: blur(24px) saturate(150%);
        backdrop-filter: blur(24px) saturate(150%);
        border-bottom: 1px solid var(--mac-line);
    }
    .content { padding-top: 28px; }
}
.sidebar-brand { display: flex; align-items: center; gap: 11px; height: 76px; padding: 0 24px; font-size: 16px; font-weight: 650; letter-spacing: -.3px; }
.sidebar-brand small { display: block; margin-top: 3px; font-size: 11px; font-weight: 400; color: color-mix(in srgb, var(--sidebar-fg) 60%, var(--sidebar-bg)); letter-spacing: .5px; }
.sidebar-brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: white; background: linear-gradient(145deg, #66b5ff, #0879ed); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 25%), 0 2px 5px rgb(0 70 150 / 12%); font-size: 23px; font-weight: 600; }
/* Keep the original grouped cards, with a translucent, softly refracting surface. */
.chapter.sidebar-cards {
    --sidebar-card-hover: color-mix(in srgb, var(--sidebar-fg) 8%, transparent);
    --sidebar-card-active-bg: color-mix(in srgb, var(--sidebar-active) 13%, transparent);
    --glass-highlight: rgb(255 255 255 / 72%);
    --glass-shade: rgb(0 20 50 / 7%);
}
html[data-color-mode="dark"] .chapter.sidebar-cards {
    --glass-highlight: rgb(255 255 255 / 18%);
    --glass-shade: rgb(0 0 0 / 24%);
}
.sidebar-cards .sidebar-card {
    margin-bottom: 12px;
    border: 1px solid color-mix(in srgb, var(--sidebar-fg) 13%, transparent);
    border-radius: 18px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--sidebar-bg) 62%, transparent),
        color-mix(in srgb, var(--sidebar-bg) 34%, transparent)),
        linear-gradient(155deg, color-mix(in srgb, white 20%, transparent),
        color-mix(in srgb, var(--sidebar-active) 5%, transparent));
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    box-shadow: inset 0 1px 0 var(--glass-highlight),
        inset 1px 0 0 color-mix(in srgb, var(--glass-highlight) 55%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--glass-highlight) 25%, transparent),
        0 4px 12px var(--glass-shade);
}
.sidebar-cards .sidebar-group-toggle {
    border-radius: 17px;
    background: transparent;
    align-items: center;
}
.sidebar-cards .sidebar-group-toggle[aria-expanded="true"] {
    border-radius: 17px 17px 0 0;
    border-bottom-color: color-mix(in srgb, var(--sidebar-fg) 10%, transparent);
    background: color-mix(in srgb, var(--sidebar-fg) 4%, transparent);
}
.sidebar-cards .sidebar-group-toggle:hover { background: var(--sidebar-card-hover); }
.sidebar-cards .sidebar-group-items { padding: 6px 7px 9px; }
.sidebar-cards .sidebar-icon { color: var(--sidebar-active); }
.sidebar-cards li a { border-radius: 9px; }
.sidebar-cards li a.active,
.sidebar-cards li a.current-header,
[dir="rtl"] .sidebar-cards li a.active,
[dir="rtl"] .sidebar-cards li a.current-header {
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--glass-highlight) 40%, transparent);
}
@supports not (backdrop-filter: blur(1px)) {
    .sidebar-cards .sidebar-card { background: var(--sidebar-card-bg); }
}
@media (prefers-reduced-transparency: reduce) {
    .sidebar-cards .sidebar-card {
        background: var(--sidebar-card-bg);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}
.mac-icon { display: block; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#mdbook-menu-bar .left-buttons, #mdbook-menu-bar .right-buttons { display: flex; align-items: center; gap: 5px; margin: 0; flex-shrink: 0; }
#mdbook-menu-bar .icon-button, #mdbook-menu-bar .right-buttons a { display: inline-flex; justify-content: center; align-items: center; box-sizing: border-box; width: 36px; height: 36px; padding: 0; border-radius: 9px; line-height: 1; color: var(--icons); transition: background-color 150ms ease; }
#mdbook-menu-bar .icon-button:hover, #mdbook-menu-bar .right-buttons a:hover { background: var(--mac-hover); color: var(--fg); }
#mdbook-menu-bar .icon-button[aria-expanded="true"] { background: var(--mac-hover); color: var(--links); }
#mdbook-menu-bar #mdbook-sidebar-toggle { width: 48px; margin-inline-end: 5px; border: 1px solid var(--mac-line); border-radius: 20px; background: color-mix(in srgb, var(--bg) 65%, transparent); box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%); }
#mdbook-menu-bar .right-buttons { padding: 2px 6px; border: 1px solid var(--mac-line); border-radius: 22px; }
#mdbook-menu-bar .right-buttons .fa-svg { display: flex; align-items: center; padding: 0; width: 19px; height: 19px; line-height: 1; }
#mdbook-menu-bar .menu-title { font-size: 14px; font-weight: 600; letter-spacing: -.15px; color: var(--fg); line-height: 1.4; }
.color-mode-control { gap: 2px; margin-inline: 7px; padding: 3px; border: 1px solid var(--mac-line); border-radius: 9px; background: var(--mac-hover); }
.color-mode-control button { padding: 5px 9px; border-radius: 6px; color: var(--mac-muted); font-size: 11px; }
.color-mode-control button[aria-pressed="true"] { background: var(--bg); color: var(--fg); box-shadow: 0 1px 4px rgb(0 0 0 / 15%); }
#mdbook-theme-list { top: 58px; padding: 7px; border: 1px solid var(--mac-line); border-radius: 14px; background: var(--bg); -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); box-shadow: var(--mac-shadow); font-size: 13px; }
#mdbook-theme-list .theme { min-height: 36px; border-radius: 7px; background: transparent; }
#mdbook-theme-list .theme:hover, #mdbook-theme-list .theme:focus-visible { background: var(--links); color: var(--bg); }
#mdbook-theme-list .theme:hover .theme-dual-mode { color: inherit; }
#mdbook-search-wrapper { padding-block: 14px 4px; }
#mdbook-searchbar { padding: 11px 16px; border: 1px solid var(--mac-line); border-radius: 11px; background: var(--mac-surface); color: var(--fg); font-size: 14px; }
#mdbook-searchbar:focus { outline: 3px solid color-mix(in srgb, var(--links) 35%, transparent); outline-offset: 1px; box-shadow: none; }
#mdbook-searchresults li { border: 1px solid var(--mac-line); border-radius: 12px; box-shadow: none; }
#mdbook-help-container { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#mdbook-help-popup { padding: 24px; border-radius: 18px; border-color: var(--mac-line); box-shadow: var(--mac-shadow); max-width: min(500px, calc(100vw - 32px)); }
.content p, .content ol, .content ul { line-height: 1.75; }
.content h1 { letter-spacing: -.035em; }
.code-window, main .table-wrapper { border-color: var(--mac-line); border-radius: 12px; }
.code-toolbar { background: var(--mac-surface); border-bottom: 1px solid var(--mac-line); }
.code-toggle, .image-gallery button, .back-to-top { border-color: var(--mac-line); border-radius: 8px; }
.back-to-top { border-radius: 50%; background: var(--bg); box-shadow: 0 4px 16px rgb(0 0 0 / 10%); }
.image-gallery { border-radius: 18px; box-shadow: var(--mac-shadow); }
@media (max-width: 700px) {
    #mdbook-menu-bar { padding-inline: 10px; gap: 5px; }
    #mdbook-menu-bar .left-buttons { gap: 2px; }
    #mdbook-menu-bar .menu-title { display: none; }
    #mdbook-menu-bar .right-buttons { margin-inline-start: auto; gap: 0; padding-inline: 2px; }
    #mdbook-menu-bar #mdbook-sidebar-toggle { width: 38px; margin-inline-end: 0; }
    .color-mode-control { margin-inline: 3px; }
    .color-mode-control button { padding-inline: 6px; }
    .content { padding-top: 16px; }
}
@media (max-width: 380px) {
    #mdbook-menu-bar { padding-inline: 6px; }
    #mdbook-menu-bar .icon-button, #mdbook-menu-bar .right-buttons a { width: 30px; }
    .color-mode-control button { padding-inline: 4px; }
}
@media (pointer: coarse) {
    #mdbook-menu-bar .icon-button, #mdbook-menu-bar .right-buttons a { min-height: 44px; }
    .sidebar-cards li a, .sidebar-cards .sidebar-group-toggle { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    #mdbook-menu-bar .icon-button, #mdbook-menu-bar .right-buttons a { transition: none; }
}
@media (prefers-reduced-transparency: reduce) {
    #mdbook-menu-bar, #mdbook-theme-list { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media print { .sidebar-brand { display: none; } }

/* Compact chapter controls keep navigation visually separate from the article. */
@media screen {
    .nav-chapters { top: 50%; bottom: auto; min-width: 40px; width: 40px; height: 48px; border: 1px solid var(--mac-line); border-radius: 12px; background: var(--bg); font-size: 22px; }
    .mobile-nav-chapters { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 40px; border: 1px solid var(--mac-line); border-radius: 10px; background: var(--mac-surface); font-size: 22px; }
}