.sidebar-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    padding: 0.5em 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); 
    margin-bottom: 0.5em;
}

.sidebar-buttons .button {
    display: block;
    padding: 0.2em 0.5em 0.2em 1em;
    color: var(--sidebar-text-color, #000);
    text-decoration: none;
    border-radius: 3px;
    font-size: 0.9em;
    transition: background-color 0.2s;
}

.sidebar-buttons .button:hover {
    background-color: var(--sidebar-hover-bg, rgba(0,0,0,0.05));
}

.theme-toggle {
    display: none !important;
}

/* Brand palette — pulled from the MoCSI logo */
:root {
    --color-mocsi-blue: #1f7fc7;
    --color-mocsi-warm: #ef7b11;
}

/* ---------- Landing page: hero ---------- */
.hero {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 1rem 0 2.5rem;
    padding: 1.5rem 0;
}

.hero-text {
    flex: 1 1 0;
    min-width: 0;
}

.hero-subtitle {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--color-foreground-secondary);
    margin: 0 0 0.75rem;
}

.hero-tagline {
    font-size: 1rem;
    color: var(--color-foreground-muted);
    margin: 0;
    line-height: 1.5;
}

.hero-figure {
    flex: 0 1 42%;
    max-width: 42%;
    margin: 0;
}

.hero-media {
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(239, 123, 17, 0.20), 0 4px 10px rgba(0, 0, 0, 0.08);
    display: block;
}

.hero-caption {
    margin-top: 0.6rem;
    font-size: 0.875rem;
    color: var(--color-foreground-muted);
    text-align: center;
    line-height: 1.4;
}

@media (max-width: 900px) {
    .hero {
        flex-direction: column-reverse;
        gap: 1.25rem;
    }
    .hero-figure {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* ---------- Landing page: navigation cards ---------- */
.box-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 2rem 0;
}

.box-container--two {
    grid-template-columns: repeat(2, 1fr);
}

.box-container a,
.box-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 1.5rem 1rem;
    text-align: center;
    text-decoration: none;
    color: inherit;
    background: var(--color-background-primary);
    border: 1px solid var(--color-background-border);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.box-card:hover {
    transform: translateY(-3px);
    border-color: var(--color-mocsi-warm);
    box-shadow: 0 10px 24px rgba(239, 123, 17, 0.18);
    color: inherit;
}

.box-icon {
    font-size: 1.9rem;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.box-card b {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.box-sub {
    font-size: 0.88rem;
    color: var(--color-foreground-muted);
    line-height: 1.4;
}

@media (max-width: 900px) {
    .box-container {
        grid-template-columns: 1fr;
    }
}

/* ---------- Landing page: feature grid ---------- */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem 2rem;
    margin: 1.25rem 0 2.5rem;
}

.feature {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 0.25rem 0;
}

.feature-icon {
    flex: 0 0 auto;
    font-size: 1.6rem;
    line-height: 1;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-background-secondary);
    border-radius: 10px;
}

.feature-body {
    flex: 1 1 auto;
    min-width: 0;
}

.feature-body b {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.feature-body p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--color-foreground-muted);
}

@media (max-width: 900px) {
    .feature-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Simulation profile cards ---------- */
.profile-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin: 1.25rem 0 2rem;
}

.profile-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.1rem 1.2rem;
    text-decoration: none;
    color: inherit;
    background: var(--color-background-primary);
    border: 1px solid var(--color-background-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.profile-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-mocsi-warm);
    box-shadow: 0 10px 24px rgba(239, 123, 17, 0.15);
    color: inherit;
}

.profile-card h3 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.3;
}

.profile-card p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--color-foreground-muted);
}

.profile-card .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.15rem;
}

.profile-card .tag {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--color-background-secondary);
    color: var(--color-foreground-secondary);
    border: 1px solid var(--color-background-border);
    white-space: nowrap;
}

.profile-card .tag--spice,
.profile-card .tag--radiosity,
.profile-card .tag--shape {
    background: rgba(31, 127, 199, 0.10);
    border-color: rgba(31, 127, 199, 0.30);
    color: var(--color-mocsi-blue);
}

@media (max-width: 900px) {
    .profile-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------- Quickstart step-flow ---------- */
.step-flow {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1.5rem 0 2rem;
}

.step-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
    text-decoration: none;
    color: inherit;
    background: var(--color-background-primary);
    border: 1px solid var(--color-background-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.step-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-mocsi-warm);
    box-shadow: 0 10px 24px rgba(239, 123, 17, 0.15);
    color: inherit;
}

.step-card .step-num {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--color-mocsi-blue);
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1;
}

.step-card .step-icon {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--color-background-secondary);
    font-size: 1.3rem;
    line-height: 1;
}

.step-card .step-body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.step-card .step-body b {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
}

.step-card .step-body span {
    font-size: 0.85rem;
    color: var(--color-foreground-muted);
    line-height: 1.35;
}

@media (max-width: 900px) {
    .step-flow {
        grid-template-columns: 1fr;
    }
}

/* ---------- Example gallery media & tag rows ---------- */
.example-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.25rem 0 1rem;
}

.example-tags .tag {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: rgba(31, 127, 199, 0.10);
    color: var(--color-mocsi-blue);
    border: 1px solid rgba(31, 127, 199, 0.30);
    white-space: nowrap;
}

.example-media {
    margin: 1.25rem auto 1.5rem;
    text-align: center;
}

.example-media video,
.example-media img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10), 0 4px 10px rgba(239, 123, 17, 0.10);
}

/* ---------- Content tables: uniform width ---------- */
.content table.docutils {
    width: 100%;
    table-layout: fixed;
}

.content table.docutils th:first-child,
.content table.docutils td:first-child {
    width: 32%;
}

.content table.docutils td {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.content table.docutils code {
    word-break: break-word;
}

/* ---------- Mermaid diagrams ---------- */
/* Mermaid renders client-side and stamps a fixed pixel height on the SVG.
   A wide LR flowchart is scaled down in width to fit the content column, but
   the height attribute stays at the unscaled value, so the thin diagram is
   letterboxed (empty bands above and below). height:auto makes the height
   track the scaled width, removing the vertical whitespace. */
.mermaid svg,
div.mermaid svg {
    height: auto !important;
    max-width: 100%;
}