:root {
    --bg: rgb(14, 14, 14);
    --surface: rgb(19, 19, 19);
    --border: rgb(32, 35, 43);
    --accent: rgb(0, 128, 240);
    --accent2: rgb(78, 170, 255);
    --text: rgb(212, 216, 226);
    --muted: rgb(102, 108, 122);
    --muted2: rgb(123, 123, 144);
    --green: rgb(78, 201, 148);
    --red: rgb(240, 96, 96);
    --purple: rgb(184, 127, 255);
    --mono: "JetBrains Mono", monospace;
    --sans: "IBM Plex Sans", sans-serif;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex-sans-v23-latin-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex-sans-v23-latin-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex-sans-v23-latin-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Sans";
    src: url("../fonts/ibm-plex-sans-v23-latin-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/jetbrains-mono-v24-latin-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/jetbrains-mono-v24-latin-500.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/jetbrains-mono-v24-latin-600.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    src: url("../fonts/jetbrains-mono-v24-latin-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--sans);
    font-size: 14px;
    display: flex;
    height: 100vh;
    overflow: hidden;
}

#sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#sidebar-header {
    padding: 18px 16px 14px;
    border-bottom: 1px solid var(--border);
}

#sidebar-header h1 {
    font-family: var(--mono);
    font-size: 15px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.02em;
}

#sidebar-header p {
    font-size: 11px;
    color: var(--muted);
    margin-top: 3px;
}

#nav {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    cursor: pointer;
    color: var(--muted);
    font-size: 15px;
    font-weight: 500;
    border-left: 2px solid transparent;
    transition:
        color 0.15s,
        border-color 0.15s,
        background 0.15s;
    user-select: none;
}

.nav-item:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.03);
}

.nav-item.active {
    color: var(--accent);
    border-left-color: var(--accent);
    background: rgba(0, 152, 240, 0.06);
}

.nav-badge {
    margin-left: auto;
    background: var(--border);
    color: var(--muted2);
    font-family: var(--mono);
    font-size: 13px;
    padding: 1px 6px;
    border-radius: 10px;

    white-space: nowrap;
    flex-shrink: 0;
}

#meta-strip {
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--muted);
    font-family: var(--mono);
    line-height: 1.7;
}

#meta-strip a {
    color: var(--accent2);
    text-decoration: none;
}

#main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

#search {
    flex: 1;
    max-width: 380px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: var(--mono);
    font-size: 13px;
    padding: 6px 12px;
    outline: none;
    transition: border-color 0.15s;
}

#search:focus {
    border-color: var(--accent);
}

#search::placeholder {
    color: var(--muted);
}

#count-label {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    margin-left: auto;
}

#content {
    flex: 1;
    overflow-y: auto;
    padding: 18px;
}

.section-title {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    cursor: pointer;
    user-select: none;
    transition: background 0.1s;
}

.card-header:hover {
    background: rgba(255, 255, 255, 0.025);
}

.card-name {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
}

.card-subtitle {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
}

.card-chevron {
    margin-left: auto;
    color: var(--muted);
    font-size: 12px;
    transition: transform 0.2s;
}

.card.open .card-chevron {
    transform: rotate(90deg);
}

.card-body {
    display: none;
    padding: 0 14px 14px;
    border-top: 1px solid var(--border);
}

.card.open .card-body {
    display: block;
}

.fields-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin-top: 12px;
    font-family: var(--mono);
    font-size: 12px;
}

.fields-table th:first-child,
.fields-table td:first-child {
    width: 40%;
}

.fields-table th:last-child,
.fields-table td:last-child {
    width: 60%;
}

.fields-table th {
    text-align: left;
    color: var(--muted);
    font-weight: 500;
    padding: 4px 8px;
    border-bottom: 1px solid var(--border);
}

.fields-table td {
    padding: 5px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    vertical-align: top;
}

.fields-table tr:last-child td {
    border-bottom: none;
}

.type-badge {
    color: var(--purple);
}

.type-badge.bool {
    color: var(--green);
}

.type-badge.int,
.type-badge.float {
    color: var(--accent2);
}

.type-badge.string {
    color: var(--accent);
}

.code-block {
    position: relative;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px 14px;
    margin-top: 12px;
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1.7;
    overflow-x: auto;
    white-space: pre;
    color: var(--text);
}

.c-kw {
    color: rgb(86, 156, 214);
}
.c-pre {
    color: rgb(197, 134, 192);
}
.c-type {
    color: rgb(78, 201, 176);
}
.c-str {
    color: rgb(206, 145, 120);
}
.c-cm {
    color: rgb(106, 153, 85);
}
.c-fn {
    color: rgb(220, 220, 170);
}
.c-var {
    color: rgb(156, 220, 254);
}
.c-num {
    color: rgb(181, 206, 168);
}

.file-path {
    margin-top: 10px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
}

.pill {
    display: inline-block;
    font-family: var(--mono);
    font-size: 12px;
    padding: 2px 7px;
    border-radius: 4px;
    margin-right: 4px;
}

.pill-event {
    background: rgba(240, 165, 0, 0.12);
    color: var(--accent);
}

.pill-listener {
    background: rgba(78, 170, 255, 0.12);
    color: var(--accent2);
}

.pill-api {
    background: rgba(184, 127, 255, 0.12);
    color: var(--purple);
}

.pill-convar {
    background: rgba(78, 201, 148, 0.12);
    color: var(--green);
}

.empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 13px;
}

::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 3px;
}

.copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: var(--mono);
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
}

.copy-btn:hover {
    background: var(--border);
    color: var(--text);
}

.pill-added {
    background: rgba(78, 201, 148, 0.12);
    color: var(--green);
}

.pill-removed {
    background: rgba(240, 96, 96, 0.12);
    color: var(--red);
}

.pill-changed {
    background: rgba(240, 165, 0, 0.12);
    color: var(--accent);
}

.card.diff-added {
    border-color: rgba(78, 201, 148, 0.3);
}

.card.diff-removed {
    border-color: rgba(240, 96, 96, 0.3);
}

.card.diff-changed {
    border-color: rgba(240, 165, 0, 0.3);
}

#diff-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

#diff-controls select {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-family: var(--mono);
    font-size: 12px;
    padding: 5px 10px;
    outline: none;
    cursor: pointer;
}

#diff-controls select:focus {
    border-color: var(--accent);
}

#diff-controls label {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

#diff-source-tabs {
    display: flex;
    gap: 6px;
    margin-right: 6px;
}

.diff-source-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 11px;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.15s;
}

.diff-source-btn.active {
    background: rgba(0, 96, 240, 0.1);
    border-color: var(--accent);
    color: var(--accent);
}

#diff-compare-btn {
    background: var(--accent);
    border: none;
    border-radius: 6px;
    color: var(--bg);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    padding: 6px 16px;
    cursor: pointer;
    transition: opacity 0.15s;
}

#diff-compare-btn:hover {
    opacity: 0.85;
}

#diff-compare-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.diff-stats {
    display: flex;
    gap: 14px;
    margin-left: auto;
    font-family: var(--mono);
    font-size: 12px;
}

.diff-stat-added {
    color: var(--green);
}
.diff-stat-removed {
    color: var(--red);
}
.diff-stat-changed {
    color: var(--accent);
}

.diff-changed-detail {
    margin-top: 10px;
    font-family: var(--mono);
    font-size: 12px;
}

.diff-changed-row {
    display: flex;
    gap: 8px;
    padding: 3px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.diff-changed-row:last-child {
    border-bottom: none;
}

.diff-changed-field {
    color: var(--muted);
    min-width: 80px;
}

.diff-old {
    color: var(--red);
    text-decoration: line-through;
    margin-right: 6px;
}
.diff-new {
    color: var(--green);
}

/* Getting Started keeps the same compact sidebar instead of introducing a
   separate docs layout. */
.nav-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    cursor: pointer;
    color: var(--muted);
    font-size: 15px;
    font-weight: 500;
    border-left: 2px solid transparent;
    transition:
        color 0.15s,
        background 0.15s;
    user-select: none;
}

.nav-group-header:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.03);
}

.nav-group-chevron {
    margin-left: auto;
    font-size: 10px;
    transition: transform 0.15s;
}

.nav-group.open .nav-group-chevron {
    transform: rotate(90deg);
}

.nav-subitems {
    display: none;
    padding-bottom: 4px;
}

.nav-group.open .nav-subitems {
    display: block;
}

.nav-subitem {
    padding: 6px 16px 6px 30px;
    cursor: pointer;
    color: var(--muted);
    font-size: 13px;
    border-left: 2px solid transparent;
    transition:
        color 0.15s,
        border-color 0.15s,
        background 0.15s;
    user-select: none;
}

.nav-subitem:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.025);
}

.nav-subitem.active {
    color: var(--accent);
    border-left-color: var(--accent);
    background: rgba(0, 96, 240, 0.05);
}

.guide-page {
    max-width: 900px;
    padding: 4px 2px 40px;
}

.guide-kicker {
    font-family: var(--mono);
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
}

.guide-page h2 {
    font-family: var(--mono);
    color: var(--accent);
    font-size: 22px;
    line-height: 1.25;
    margin-bottom: 8px;
}

.guide-intro {
    color: var(--text);
    max-width: 760px;
    line-height: 1.65;
    margin-bottom: 22px;
}

.guide-section {
    max-width: 800px;
    padding: 14px 0 18px;
    border-top: 1px solid var(--border);
}

.guide-section h3 {
    font-family: var(--mono);
    font-size: 14px;
    color: var(--text);
    margin-bottom: 8px;
}

.guide-section p {
    color: var(--muted2);
    line-height: 1.65;
    margin-bottom: 8px;
    overflow-wrap: anywhere;
}

.guide-code {
    margin-top: 10px;
    padding-top: 36px;
}

.guide-jump {
    margin-top: 8px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--accent2);
    font-family: var(--mono);
    font-size: 12px;
    padding: 7px 11px;
    cursor: pointer;
    transition:
        color 0.15s,
        border-color 0.15s,
        background 0.15s;
}

.guide-jump:hover {
    color: var(--text);
    border-color: var(--accent2);
    background: rgba(78, 170, 255, 0.06);
}

@media (max-width: 640px) {
    body {
        flex-direction: column;
        height: 100dvh;
    }

    #sidebar {
        width: 100%;
        height: 190px;
        max-height: 30dvh;
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }

    #sidebar-header {
        padding: 10px 14px;
    }

    #sidebar-header p,
    #meta-strip {
        display: none;
    }

    #nav {
        min-height: 0;
        padding: 4px 0;
    }

    #topbar,
    #content {
        padding: 12px;
    }

    #search {
        min-width: 0;
    }

    .guide-page h2 {
        overflow-wrap: anywhere;
    }
}