/**
 * Quarto Content Styles
 *
 * Styles for Quarto-rendered content served inside Django's base.html chrome.
 * All colors use CSS variables from theme-consolidated.css.
 *
 * @see physicslabs/quarto/templates/quarto/content_page.html
 */

/* ============================================================================
   BODY TEXT: Slightly softer than pure white/black for comfortable reading
   ============================================================================ */

.quarto-content .quarto-page-content {
    color: var(--text-secondary);
    line-height: var(--line-height-base);
}

.quarto-content .quarto-page-content h1,
.quarto-content .quarto-page-content h2,
.quarto-content .quarto-page-content h3,
.quarto-content .quarto-page-content h4,
.quarto-content .quarto-page-content h5,
.quarto-content .quarto-page-content h6 {
    color: var(--text-primary);
}

/* ============================================================================
   LAYOUT: Reuses docs-layout grid from components.css.
   - docs-layout-with-toc: sidebar + content + TOC (3-col)
   - docs-layout: sidebar + content (2-col)
   - docs-layout-no-sidebar: content only (block)
   ============================================================================ */

.quarto-page-content {
    min-width: 0;  /* Prevent grid blowout from long content */
}

/* TOC-only layout (no left sidebar) — content + right TOC, 2-column */
.quarto-layout-toc-only {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: var(--spacing-8);
    align-items: start;
}

@media (max-width: 991px) {
    .quarto-layout-toc-only {
        grid-template-columns: 1fr;
    }

    .quarto-layout-toc-only .quarto-page-toc {
        display: none;
    }
}

/* Override components.css which hides .docs-toc at 1200px —
   in the TOC-only layout, the quarto TOC should remain visible
   down to 991px since there's no left sidebar competing for space. */
@media (min-width: 992px) {
    .quarto-layout-toc-only .quarto-page-toc.docs-toc {
        display: block;
    }
}

/* ============================================================================
   SIDEBAR TOC — Reuses docs-toc styling from components.css.
   The render service transforms Pandoc's nested <ul> into a flat list
   with toc-level-N classes matching the docs app's TOC format.
   All sidebar styling (sticky, links, levels, active state, gold border)
   is handled by .docs-toc rules in components.css.
   Override: hide the always-visible webkit scrollbar; show thumb only on hover.
   ============================================================================ */

/* Scrollbar-hidden ToC and overflow fade are handled by the base .docs-toc
   rules in components.css.  Only override: allow horizontal overflow since
   Quarto ToCs don't need the hidden-x that docs pages use. */
.quarto-page-toc.docs-toc {
    overflow-x: visible;
}

/* Mobile TOC styles are in components.css (shared across all content types).
   Visibility for Quarto is triggered by: .quarto-layout-toc-only ~ .quarto-mobile-toc-panel
   (at ≤991px) and .docs-layout-with-toc ~ .quarto-mobile-toc-panel (at ≤1200px). */

/* Quarto-specific: footer spacer for the fixed dock strip */
@media (max-width: 991px) {
    body.quarto-content::after {
        content: '';
        display: block;
        height: 34px;
        background: var(--ucb-black);
    }
}

/* ============================================================================
   PREV/NEXT PAGE NAVIGATION
   ============================================================================ */

.quarto-page-nav {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-4);
    margin-top: var(--spacing-8);
    padding-top: var(--spacing-6);
    border-top: var(--border-1) solid var(--border-color-light);
}

.quarto-page-nav a {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    color: var(--text-secondary);
    text-decoration: none;
    border: var(--border-1) solid var(--border-color-light);
    border-radius: var(--radius-md);
    transition: color var(--transition-fast), border-color var(--transition-fast);
    max-width: 48%;
}

.quarto-page-nav a:hover,
.quarto-page-nav a:focus {
    color: var(--color-link-hover);
    border-color: var(--border-color);
    text-decoration: none;
}

.quarto-page-nav a:focus-visible {
    outline: 2px solid var(--ucb-gold);
    outline-offset: 2px;
}

.quarto-page-nav-next {
    margin-left: auto;
}

.quarto-page-nav-label {
    font-size: var(--font-lg);
    line-height: 1;
}

@media (max-width: 575px) {
    .quarto-page-nav {
        flex-direction: column;
    }

    .quarto-page-nav a {
        max-width: 100%;
    }

    .quarto-page-nav-next {
        margin-left: 0;
        justify-content: flex-end;
    }
}

/* ============================================================================
   TITLE BLOCK
   ============================================================================ */

.quarto-title-block,
#title-block-header {
    margin-top: 0;
    margin-bottom: var(--spacing-6);
}

.quarto-title-block .title,
#title-block-header h1 {
    display: block !important;  /* Override docs-markdown-content h1:first-child { display: none } */
    font-family: var(--font-family-headings);
    color: var(--text-primary);
    margin-top: 0;
    margin-bottom: var(--spacing-2);
}


/* Download links in the title-block meta now use the shared
   `.content-download-link` component in components.css (single source of
   truth, reused by the documentation pages). */

/* ============================================================================
   HEADINGS
   ============================================================================ */

.quarto-page-content h2 {
    border-bottom: var(--border-2) solid var(--heading-rule-color);
    padding-bottom: var(--spacing-2);
    margin-top: var(--spacing-8);
    margin-bottom: var(--spacing-4);
}

.quarto-page-content h3 {
    border-bottom: var(--border-1) solid var(--heading-rule-color);
    padding-bottom: var(--spacing-1);
    margin-top: var(--spacing-6);
    margin-bottom: var(--spacing-3);
}

/* Scroll margin for sticky header offset — must match docs-toc.js's
   getScrollOffset() calculation (--header-height + 1rem) so scroll-spy
   correctly detects headings after anchor navigation. */
.quarto-page-content h1,
.quarto-page-content h2,
.quarto-page-content h3,
.quarto-page-content h4,
.quarto-page-content h5,
.quarto-page-content h6 {
    scroll-margin-top: calc(var(--header-height, 100px) + 1rem);
}

/* Section number styling */
.quarto-page-content .header-section-number {
    color: var(--section-number-color);
    margin-right: 0.3em;
}

/* ============================================================================
   CALLOUTS — Quarto-compatible structure produced by crossref.lua:
   .callout.callout-titled > .callout-header > .callout-icon-container + .callout-title-container
                           > .callout-body-container.callout-body
   ============================================================================ */

.callout {
    border-radius: var(--radius-sm);
    margin: var(--spacing-4) 0;
    background-color: var(--bg-secondary);
    overflow: hidden;
}

.callout-header {
    display: flex;
    align-items: center;
    padding: var(--spacing-1) var(--spacing-3);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-base);
}

.callout-title-container {
    flex: 1;
    min-width: 0;
}

.callout-body-container {
    padding: var(--spacing-2) var(--spacing-3) var(--spacing-2);
}

.callout-body-container > :first-child {
    margin-top: 0;
}

.callout-body-container > :last-child {
    margin-bottom: 0;
}

/* Callout icon — SVG mask approach matching .quarto-section-link pattern */
.callout-icon-container {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: var(--spacing-2);
}

.callout-icon {
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    vertical-align: middle;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Type-specific colors and icons */
.callout-note {
    background-color: var(--callout-note-bg);
}

.callout-note .callout-header {
    background-color: var(--callout-note-header-bg);
}

.callout-note .callout-icon {
    background-color: var(--ucb-link-blue);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0'/%3E%3C/svg%3E");
}

.callout-warning {
    background-color: var(--callout-warning-bg);
}

.callout-warning .callout-header {
    background-color: var(--callout-warning-header-bg);
}

.callout-warning .callout-icon {
    background-color: var(--yellow-600);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2'/%3E%3C/svg%3E");
}

.callout-tip {
    background-color: var(--callout-tip-bg);
}

.callout-tip .callout-header {
    background-color: var(--callout-tip-header-bg);
}

.callout-tip .callout-icon {
    background-color: var(--ucb-green);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a2 2 0 0 0-.453-.618A5.98 5.98 0 0 1 2 6m6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 6a6 6 0 1 1 10.174 4.31c-.203.196-.359.4-.453.619l-.762 1.769A.5.5 0 0 1 10.5 13a.5.5 0 0 1 0 1 .5.5 0 0 1 0 1l-.224.447a1 1 0 0 1-.894.553H6.618a1 1 0 0 1-.894-.553L5.5 15a.5.5 0 0 1 0-1 .5.5 0 0 1 0-1 .5.5 0 0 1-.46-.302l-.761-1.77a2 2 0 0 0-.453-.618A5.98 5.98 0 0 1 2 6m6-5a5 5 0 0 0-3.479 8.592c.263.254.514.564.676.941L5.83 12h4.342l.632-1.467c.162-.377.413-.687.676-.941A5 5 0 0 0 8 1'/%3E%3C/svg%3E");
}

.callout-important {
    background-color: var(--callout-important-bg);
}

.callout-important .callout-header {
    background-color: var(--callout-important-header-bg);
}

.callout-important .callout-icon {
    background-color: var(--ucb-red);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.46.146A.5.5 0 0 0 11.107 0H4.893a.5.5 0 0 0-.353.146L.146 4.54A.5.5 0 0 0 0 4.893v6.214a.5.5 0 0 0 .146.353l4.394 4.394a.5.5 0 0 0 .353.146h6.214a.5.5 0 0 0 .353-.146l4.394-4.394a.5.5 0 0 0 .146-.353V4.893a.5.5 0 0 0-.146-.353zM8 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M11.46.146A.5.5 0 0 0 11.107 0H4.893a.5.5 0 0 0-.353.146L.146 4.54A.5.5 0 0 0 0 4.893v6.214a.5.5 0 0 0 .146.353l4.394 4.394a.5.5 0 0 0 .353.146h6.214a.5.5 0 0 0 .353-.146l4.394-4.394a.5.5 0 0 0 .146-.353V4.893a.5.5 0 0 0-.146-.353zM8 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2'/%3E%3C/svg%3E");
}

.callout-caution {
    background-color: var(--callout-caution-bg);
}

.callout-caution .callout-header {
    background-color: var(--callout-caution-header-bg);
}

.callout-caution .callout-icon {
    background-color: var(--ucb-brick);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.05.435c-.58-.58-1.52-.58-2.1 0L.436 6.95c-.58.58-.58 1.519 0 2.098l6.516 6.516c.58.58 1.519.58 2.098 0l6.516-6.516c.58-.58.58-1.519 0-2.098zM8 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.05.435c-.58-.58-1.52-.58-2.1 0L.436 6.95c-.58.58-.58 1.519 0 2.098l6.516 6.516c.58.58 1.519.58 2.098 0l6.516-6.516c.58-.58.58-1.519 0-2.098zM8 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2'/%3E%3C/svg%3E");
}

.callout-notebook {
    background-color: var(--callout-notebook-bg);
}

.callout-notebook .callout-header {
    background-color: var(--callout-notebook-header-bg);
}

.callout-notebook .callout-icon {
    background-color: var(--ucb-gold);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.5.5 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.5.5 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11z'/%3E%3C/svg%3E");
}

/* Collapsible callouts — toggled by quarto-content.js initCalloutCollapse() */
.callout-collapse .callout-header {
    cursor: pointer;
    user-select: none;
}

.callout-collapse .callout-header::after {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-left: auto;
    flex-shrink: 0;
    background-color: var(--text-secondary);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: transform 0.2s ease;
}

.callout-collapse .callout-body-container {
    display: none;
}

.callout-collapse.callout-expanded .callout-body-container {
    display: block;
}

.callout-collapse.callout-expanded .callout-header::after {
    transform: rotate(180deg);
}

.callout-collapse .callout-header:focus-visible {
    outline: var(--border-2) solid var(--focus-ring-color);
    outline-offset: calc(-1 * var(--border-2));
    border-radius: var(--radius-sm);
}

/* ============================================================================
   TABLES
   ============================================================================ */

.quarto-page-content .table-scroll-wrapper {
    overflow-x: auto;
    margin: var(--spacing-4) 0;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-bg) transparent;
}

.quarto-page-content .table-scroll-wrapper table {
    margin: 0;  /* wrapper handles the margin */
}

.quarto-page-content table {
    width: 100%;
    margin: var(--spacing-4) 0;
    border-collapse: collapse;
    /* Override Bootstrap .table variables to match our theme */
    --bs-table-bg: transparent;
    --bs-table-color: var(--text-secondary);
    --bs-table-border-color: var(--border-color-light);
    --bs-table-striped-bg: var(--bg-tertiary);
    --bs-table-striped-color: var(--text-secondary);
    --bs-table-hover-bg: var(--bg-secondary);
    --bs-table-hover-color: var(--text-secondary);
}

.quarto-page-content thead {
    border-bottom: var(--border-1) solid var(--border-color);
}

.quarto-page-content th {
    font-weight: var(--font-weight-bold);
    text-align: center;
    padding: var(--spacing-2) var(--spacing-3);
    color: var(--table-header-text);
    background-color: var(--table-header-bg);
}

.quarto-page-content td {
    text-align: center;
    padding: var(--spacing-2) var(--spacing-3);
    border-bottom: var(--border-1) solid var(--border-color-light);
}

.quarto-page-content caption {
    caption-side: top;
    font-size: var(--font-sm);
    color: var(--text-secondary);
    padding: var(--spacing-2) 0;
    text-align: center;
}

/* ============================================================================
   TABSETS
   ============================================================================ */

.quarto-page-content .nav-tabs {
    border-bottom-color: var(--ucb-gold);
}

.quarto-page-content .nav-tabs .nav-link.active {
    border-color: var(--ucb-gold) var(--ucb-gold) var(--bg-primary);
    color: var(--text-primary);
}

.quarto-page-content .nav-tabs .nav-link {
    color: var(--text-secondary);
}

.quarto-page-content .nav-tabs .nav-link:hover {
    border-color: var(--ucb-gold-dark);
    color: var(--text-primary);
}

/* ============================================================================
   INLINE CODE & CODE BLOCKS
   ============================================================================ */

.quarto-page-content :not(pre) > code {
    color: var(--inline-code-color);
    background-color: var(--inline-code-bg);
    padding: 0.125em 0.375em;
    border-radius: var(--radius-sm);
    font-size: 0.9em;
}

/* Code block container — Pandoc wraps code in div.sourceCode > pre > code */
.quarto-page-content div.sourceCode {
    position: relative;
    background-color: var(--gray-100);
    border: var(--border-1) solid var(--border-color-light);
    border-radius: var(--radius-md);
    margin: var(--spacing-4) 0;
    overflow: hidden;
}

[data-theme="dark"] .quarto-page-content div.sourceCode {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

/* Code blocks for languages Pandoc doesn't highlight (e.g., ```text).
   Pandoc renders these as bare <pre class="lang"><code> without a
   div.sourceCode wrapper. Give them the same visual treatment. */
.quarto-page-content pre[class]:not(.sourceCode) {
    position: relative;
    background-color: var(--gray-100);
    border: var(--border-1) solid var(--border-color-light);
    border-radius: var(--radius-md);
    margin: var(--spacing-4) 0;
    overflow: hidden;
    padding: var(--spacing-4);
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-bg) transparent;
}

[data-theme="dark"] .quarto-page-content pre[class]:not(.sourceCode) {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

.quarto-page-content pre[class]:not(.sourceCode) code {
    font-size: 14px;
    line-height: var(--line-height-relaxed);
    color: var(--text-primary);
    background: transparent;
}

[data-theme="dark"] .quarto-page-content pre[class]:not(.sourceCode) code {
    color: var(--text-secondary);
}

.quarto-page-content div.sourceCode > pre {
    margin: 0;
    padding: var(--spacing-4);
    overflow-x: auto;
    background: transparent;
    border: none;
    border-radius: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-bg) transparent;
}

.quarto-page-content div.sourceCode > pre::-webkit-scrollbar {
    height: 8px;
}

.quarto-page-content div.sourceCode > pre::-webkit-scrollbar-track {
    background: transparent;
}

.quarto-page-content div.sourceCode > pre::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-bg);
    border-radius: var(--radius-sm);
}

.quarto-page-content div.sourceCode > pre::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover-bg);
}

.quarto-page-content div.sourceCode code {
    font-size: 14px;
    line-height: var(--line-height-relaxed);
    color: var(--text-primary);
    background: transparent;
}

[data-theme="dark"] .quarto-page-content div.sourceCode code {
    color: var(--text-secondary);
}

/* Reset backgrounds on all spans inside code blocks — prevents
   inherited or conflicting backgrounds from other stylesheets. */
.quarto-page-content div.sourceCode code span {
    background: transparent;
}

/* Line number anchors — Pandoc wraps each line in a span with an anchor */
.quarto-page-content div.sourceCode code > span > a:first-child {
    text-decoration: none;
    color: var(--text-muted);
    margin-right: 0.5em;
    user-select: none;
    display: none;  /* Hide line anchors by default */
}

/* ---- Pandoc Syntax Highlighting ---- */

/* Keywords & control flow */
.quarto-page-content code.sourceCode .kw,
.quarto-page-content code.sourceCode .cf {
    color: var(--syntax-keyword);
    font-weight: 600;
}

/* Built-in functions */
.quarto-page-content code.sourceCode .bu {
    color: var(--syntax-namespace);
}

/* Data types */
.quarto-page-content code.sourceCode .dt {
    color: var(--syntax-type);
}

/* Numbers (decimal, float, base-N) */
.quarto-page-content code.sourceCode .dv,
.quarto-page-content code.sourceCode .bn,
.quarto-page-content code.sourceCode .fl {
    color: var(--syntax-number);
}

/* Strings (all variants) */
.quarto-page-content code.sourceCode .st,
.quarto-page-content code.sourceCode .ch,
.quarto-page-content code.sourceCode .vs,
.quarto-page-content code.sourceCode .ss {
    color: var(--syntax-string);
}

/* Special characters & escape sequences */
.quarto-page-content code.sourceCode .sc {
    color: var(--syntax-string-escape);
}

/* Comments */
.quarto-page-content code.sourceCode .co,
.quarto-page-content code.sourceCode .do,
.quarto-page-content code.sourceCode .an,
.quarto-page-content code.sourceCode .cv {
    color: var(--syntax-comment);
    font-style: italic;
}

/* Functions */
.quarto-page-content code.sourceCode .fu {
    color: var(--syntax-function);
}

/* Imports */
.quarto-page-content code.sourceCode .im {
    color: var(--syntax-preprocessor);
    font-weight: 600;
}

/* Operators */
.quarto-page-content code.sourceCode .op {
    color: var(--syntax-operator);
}

/* Variables & attributes */
.quarto-page-content code.sourceCode .va,
.quarto-page-content code.sourceCode .at {
    color: var(--syntax-variable);
}

/* Constants (True, False, None) */
.quarto-page-content code.sourceCode .cn {
    color: var(--syntax-keyword);
}

/* Preprocessor */
.quarto-page-content code.sourceCode .pp {
    color: var(--syntax-preprocessor);
}

/* Alerts & warnings */
.quarto-page-content code.sourceCode .al {
    color: var(--syntax-error);
    font-weight: 600;
}

.quarto-page-content code.sourceCode .wa {
    color: var(--syntax-comment);
    font-weight: 600;
    font-style: italic;
}

/* Errors */
.quarto-page-content code.sourceCode .er {
    color: var(--syntax-error);
    font-weight: 600;
}

/* Other tokens */
.quarto-page-content code.sourceCode .ot {
    color: var(--syntax-keyword);
}

/* ============================================================================
   JUPYTER NOTEBOOK CELLS — Pandoc ipynb output structure:
   .cell.code wraps div.sourceCode (code) + .output (results)
   .cell.markdown becomes a <section> with heading + prose
   .cell.raw holds YAML frontmatter (hidden)
   ============================================================================ */

/* Hide raw cells (YAML frontmatter) */
.quarto-page-content .cell.raw {
    display: none;
}

/* Code cells: group code + output with shared spacing */
.quarto-page-content .cell.code {
    margin: var(--spacing-4) 0;
}

/* Remove double margin: sourceCode already has margin, cell.code wraps it */
.quarto-page-content .cell.code > div.sourceCode {
    margin-top: 0;
    margin-bottom: 0;
}

/* Text output (print/stdout) */
.quarto-page-content .cell.code .output.stream {
    background-color: var(--gray-100);
    border: var(--border-1) solid var(--border-color-light);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    padding: var(--spacing-3) var(--spacing-4);
    overflow-x: auto;
    font-family: var(--font-family-monospace, monospace);
    font-size: 13px;
    line-height: var(--line-height-relaxed);
    color: var(--text-secondary);
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-bg) transparent;
}

[data-theme="dark"] .quarto-page-content .cell.code .output.stream {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

.quarto-page-content .cell.code .output.stream pre {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    font-size: inherit;
    line-height: inherit;
    white-space: pre-wrap;
    word-break: break-word;
}

/* When text output follows code, merge borders for a connected look */
.quarto-page-content .cell.code > div.sourceCode + .output.stream {
    border-top: var(--border-1) solid var(--border-color-light);
}

[data-theme="dark"] .quarto-page-content .cell.code > div.sourceCode + .output.stream {
    border-top-color: var(--border-color);
}

/* Round only bottom corners when code block connects to output */
.quarto-page-content .cell.code > div.sourceCode:has(+ .output) {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* Image/plot output */
.quarto-page-content .cell.code .output.display_data {
    text-align: center;
    margin-top: var(--spacing-3);
}

.quarto-page-content .cell.code .output.display_data p {
    margin: 0;
}

.quarto-page-content .cell.code .output.display_data img {
    border-radius: var(--radius-sm);
}

[data-theme="dark"] .quarto-page-content .cell.code .output.display_data img {
    background-color: var(--ucb-white);
}

/* ============================================================================
   BLOCKQUOTES
   ============================================================================ */

.quarto-page-content blockquote {
    border-left: var(--border-4) solid var(--ucb-gold);
    padding: var(--spacing-2) var(--spacing-4);
    margin: var(--spacing-4) 0;
    color: var(--text-secondary);
}

/* ============================================================================
   FIGURES & IMAGES
   ============================================================================ */

.quarto-page-content .quarto-figure,
.quarto-page-content figure {
    text-align: center;
    margin: var(--spacing-3) auto;
}

/* Scroll offset for figure cross-references */
.quarto-page-content [id^="fig-"] {
    scroll-margin-top: calc(var(--header-height, 100px) + 1rem);
}

/* All images — constrain to content column and preserve aspect ratio.
   The Lua crossref filter sets inline `width` (e.g. style="width: 60%")
   on images from QMD attributes.  max-width caps overflow without
   fighting the author-specified width. */
.quarto-page-content img {
    max-width: 100% !important;
    height: auto !important;
}

.quarto-page-content .quarto-figure img,
.quarto-page-content figure img {
    border-radius: var(--radius-sm);
}

[data-theme="dark"] .quarto-page-content .quarto-figure img,
[data-theme="dark"] .quarto-page-content figure img {
    background-color: var(--ucb-white);
}

/* Image zoom — click-to-zoom affordance (medium-zoom) */
.quarto-page-content img:not(.no-zoom) {
    cursor: zoom-in;
}

/* Override max-width constraint so zoomed image can expand beyond container */
.medium-zoom-image--opened {
    max-width: none !important;
}

.quarto-page-content figcaption {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    margin-top: var(--spacing-2);
}

/* Float classes from Quarto */
.quarto-page-content .quarto-figure-left {
    float: left;
    margin-right: var(--spacing-4);
    max-width: 50%;
}

.quarto-page-content .quarto-figure-right {
    float: right;
    margin-left: var(--spacing-4);
    max-width: 50%;
}

/* ============================================================================
   LAYOUT PANELS — Quarto layout-ncol multi-column figure grids
   ============================================================================ */

.quarto-page-content .quarto-layout-panel {
    display: grid;
    gap: var(--spacing-4);
    margin: var(--spacing-4) 0;
}

.quarto-page-content .quarto-layout-panel[data-layout-ncol="2"] {
    grid-template-columns: repeat(2, 1fr);
}

.quarto-page-content .quarto-layout-panel[data-layout-ncol="3"] {
    grid-template-columns: repeat(3, 1fr);
}

.quarto-page-content .quarto-layout-panel[data-layout-ncol="4"] {
    grid-template-columns: repeat(4, 1fr);
}

/* Shared caption spans all columns */
.quarto-page-content .quarto-layout-panel .quarto-layout-caption {
    grid-column: 1 / -1;
    text-align: center;
}

.quarto-page-content .quarto-layout-panel .quarto-layout-caption p {
    font-size: var(--font-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* Sub-figures in panels — remove default figure margin */
.quarto-page-content .quarto-layout-panel figure {
    margin: 0;
}

/* Responsive: collapse to single column on small screens */
@media (max-width: 575px) {
    .quarto-page-content .quarto-layout-panel {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================================
   EQUATIONS — Pandoc-rendered equation containers with right-aligned numbers
   ============================================================================ */

.quarto-page-content .equation-container {
    margin: var(--spacing-4) 0;
    scroll-margin-top: calc(var(--header-height, 100px) + 1rem);
}

.quarto-page-content .equation-container > p {
    display: flex;
    align-items: center;
    margin: 0;
    min-width: 0;  /* Allow flex children to shrink below content size */
}

.quarto-page-content .equation-container .display-math {
    flex: 1;
    min-width: 0;
    text-align: center;
    /* overflow-x: auto handled globally in components.css */
}

.quarto-page-content .equation-container .equation-number {
    flex-shrink: 0;
    padding-left: var(--spacing-3);
    font-weight: 500;
    color: var(--text-secondary);
}

/* Standalone display math overflow handled globally in components.css */

/* ============================================================================
   SECTION LINK — chain icon on heading hover, copies URL to clipboard
   ============================================================================ */

.quarto-section-link {
    text-decoration: none !important;
    opacity: 0;
    transition: opacity var(--transition-fast);
    margin-left: 0.4em;
    vertical-align: middle;
    cursor: pointer;
}

/* Chain-link SVG icon (Bootstrap Icons link-45deg) via CSS mask */
.quarto-section-link::after {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1 1 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4 4 0 0 1-.128-1.287z'/%3E%3Cpath d='M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1 1 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4 4 0 0 1-.128-1.287z'/%3E%3Cpath d='M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-color: var(--color-link);
    vertical-align: middle;
    position: relative;
    top: -0.1em;
}

/* Show on heading hover or direct focus */
.quarto-page-content h1:hover .quarto-section-link,
.quarto-page-content h2:hover .quarto-section-link,
.quarto-page-content h3:hover .quarto-section-link,
.quarto-page-content h4:hover .quarto-section-link,
.quarto-page-content h5:hover .quarto-section-link,
.quarto-page-content h6:hover .quarto-section-link,
.quarto-section-link:focus {
    opacity: 1;
}

.quarto-section-link:focus-visible {
    outline: 2px solid var(--ucb-gold);
    outline-offset: 2px;
    opacity: 1;
}

/* Brief flash green on successful copy */
.quarto-section-link.copied::after {
    background-color: var(--ucb-green);
}

/* Figure link — absolutely positioned top-right corner */
.quarto-figure-link {
    position: absolute;
    top: 0;
    right: 0.4em;
    margin-left: 0;
}

.quarto-figure-link::after {
    position: static;
    top: auto;
}

/* Show on figure hover */
.quarto-page-content [id^="fig-"]:hover .quarto-figure-link,
.quarto-figure-link:focus {
    opacity: 1;
}

/* ============================================================================
   CROSS-REFERENCE PREVIEWS — Hover popups for @fig-/@eq-/@sec- references
   ============================================================================ */

.crossref-preview {
    position: absolute;
    z-index: var(--z-popover, 1070);
    background-color: var(--bg-primary);
    border: var(--border-1) solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    color: var(--text-primary);
    font-size: var(--font-sm);
    padding: var(--spacing-3);
    max-width: 500px;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: auto;
}

/* Figure previews — generous sizing, caption matches image width */
.crossref-preview-inner figure,
.crossref-preview-inner .crossref-fig-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
}

.crossref-preview-inner img {
    display: block;
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.crossref-preview-inner figcaption,
.crossref-preview-inner .crossref-fig-caption {
    font-size: var(--font-xs);
    color: var(--text-secondary);
    margin-top: var(--spacing-2);
    text-align: center;
    max-width: 100%;
}

/* Section previews — heading + intro paragraph */
.crossref-preview-inner h1,
.crossref-preview-inner h2,
.crossref-preview-inner h3,
.crossref-preview-inner h4,
.crossref-preview-inner h5,
.crossref-preview-inner h6 {
    font-size: var(--font-base);
    font-weight: 600;
    margin: 0 0 var(--spacing-2) 0;
    border: none;
    padding: 0;
}

.crossref-preview-inner p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-sm);
}

/* Equation previews */
.crossref-preview-inner .equation-container {
    margin: 0;
}

.crossref-preview-inner .equation-container > p {
    display: flex;
    align-items: center;
}

.crossref-preview-inner .equation-number {
    padding-left: var(--spacing-3);
    flex-shrink: 0;
}

/* Table previews — compact full-table view */
.crossref-preview-inner table {
    font-size: var(--font-xs);
    margin: 0;
    width: auto;
    min-width: 200px;
}

.crossref-preview-inner caption {
    font-size: var(--font-xs);
    color: var(--text-muted);
}

.crossref-preview-inner th,
.crossref-preview-inner td {
    padding: var(--spacing-1) var(--spacing-2);
    white-space: nowrap;
}

/* Footnote previews */
.crossref-preview-inner li {
    list-style: none;
    padding: 0;
}

.crossref-preview-inner li p {
    margin: 0 0 var(--spacing-1) 0;
}

.crossref-preview-inner li p:last-child {
    margin-bottom: 0;
}

/* ============================================================================
   LINKS — Dark mode uses UCB gold, no underline
   ============================================================================ */

.quarto-page-content a {
    text-decoration: none;
}

.quarto-page-content a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

[data-theme="dark"] .quarto-page-content a {
    color: var(--color-link);
}

[data-theme="dark"] .quarto-page-content a:hover {
    color: var(--color-link-hover);
}

/* Cross-reference links (Pandoc uses .crossref class) */
.quarto-page-content a.crossref {
    color: var(--ucb-link-blue);
}

[data-theme="dark"] .quarto-page-content a.crossref {
    color: var(--color-link);
}

/* ============================================================================
   COPY BUTTON & STRUCTURAL
   ============================================================================ */

/* Quarto copy button (injected by quarto-content.js) */
.quarto-copy-btn {
    position: absolute;
    top: var(--spacing-2);
    right: var(--spacing-2);
    padding: var(--spacing-1) var(--spacing-2);
    background: var(--bg-secondary);
    border: var(--border-1) solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: var(--font-xs);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition-fast);
    user-select: none;
}

div.sourceCode:hover .quarto-copy-btn,
.quarto-page-content pre[class]:not(.sourceCode):hover > .quarto-copy-btn {
    opacity: 1;
}

.quarto-copy-btn.copied {
    color: var(--ucb-green);
}

/* ============================================================================
   COURSE SIDEBAR — Left sidebar navigation for Quarto course sites.
   Inherits sticky/scroll/responsive behavior from .docs-sidebar in
   components.css. Nav links reuse docs-section-group / docs-nav-link
   classes from components.css. Course-specific: site header + mobile toggle.
   ============================================================================ */

/* Course name header — links to site root */
.course-sidebar-header {
    padding-bottom: var(--spacing-3);
    margin-bottom: var(--spacing-3);
    border-bottom: var(--border-1) solid var(--border-color-light);
}

.course-sidebar .course-sidebar-header a {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--text-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-base);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.course-sidebar-home-icon {
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}

.course-sidebar .course-sidebar-header a:hover .course-sidebar-home-icon {
    opacity: 1;
}

/* Subsection groups align with sibling links (no extra indent) */
.course-sidebar .docs-subsection-group {
    margin-left: 0;
}

/* Compact sidebar: consistent spacing for links and subsection titles.
   Overrides accessibility.css (44px = AAA) — links are full-width blocks
   so touch targets are adequate at this size (AA compliant). */
.course-sidebar .docs-sidebar-nav a {
    min-height: auto;
    padding: var(--spacing-1) var(--spacing-2);
}

.course-sidebar .docs-subsection-title {
    padding: var(--spacing-1) var(--spacing-2);
}

/* Top-level standalone links align with section titles */
.course-sidebar > .docs-sidebar-collapse .docs-sidebar-nav > .docs-nav-link {
    padding-left: 0;
}

/* Mobile-only "Course Home" link — hidden on desktop where the header serves this role.
   Styled to match docs-section-title: semibold, primary text, same alignment.
   Higher specificity needed to override accessibility.css:
   nav:not([aria-label="breadcrumb"]) a { padding: 0.5rem 1rem } (0,1,2) */
.docs-sidebar-nav a.course-sidebar-home-link {
    display: none;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: none;
    padding: var(--spacing-1) 0;
    margin-bottom: var(--spacing-1);
    min-height: auto;
    min-width: auto;
    transition: color var(--transition-fast);
}

.docs-sidebar-nav a.course-sidebar-home-link:visited {
    color: var(--text-primary);
}

.docs-sidebar-nav a.course-sidebar-home-link:hover {
    color: var(--color-link);
    text-decoration: none;
}

.docs-sidebar-nav a.course-sidebar-home-link:focus-visible {
    outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
}

.docs-sidebar-nav a.course-sidebar-home-link.active,
.docs-sidebar-nav a.course-sidebar-home-link.active:visited {
    color: var(--color-link);
    text-decoration: none;
    border-bottom: none;
}

.course-sidebar .course-sidebar-header a:visited {
    color: var(--text-primary);
}

.course-sidebar .course-sidebar-header a:hover {
    color: var(--color-link);
    text-decoration: none;
}

/* ── Collapsible sidebar ───────────────────────────────────────────────────
   Reuses docs-sidebar-collapse / docs-sidebar-toggle / docs-sidebar-body
   classes from components.css. Course-specific overrides only below.
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 992px) {
    .course-sidebar {
        position: static;
        max-height: none;
        margin-bottom: 0;
    }

    /* Reduce grid row-gap — default var(--spacing-8) is too much on mobile;
       a small gap keeps visual breathing room without wasting space. */
    .docs-layout:has(.course-sidebar),
    .docs-layout-with-toc:has(.course-sidebar) {
        gap: var(--spacing-3);
    }

    /* Header is redundant — summary already shows site name */
    .course-sidebar .course-sidebar-header {
        display: none;
    }

    /* Show "Course Home" link on mobile (header is hidden) */
    .docs-sidebar-nav a.course-sidebar-home-link {
        display: flex;
    }
}

/* ============================================================================
   TASK LISTS: Quarto/Pandoc renders - [ ] as <input type="checkbox"> in <li>
   ============================================================================ */

.quarto-page-content ul.task-list {
    list-style: none;
    padding-left: var(--spacing-4);
}

.quarto-page-content .task-list li {
    color: var(--text-secondary);
    transition: opacity var(--transition-fast);
}

.quarto-page-content .task-list li label {
    display: inline;
    margin-bottom: 0;
    font-weight: normal;
    color: inherit;
}

.quarto-page-content .task-list input[type="checkbox"] {
    margin-right: var(--spacing-2);
    cursor: pointer;
}

.quarto-page-content .task-list li.task-checked {
    text-decoration: line-through;
    opacity: 0.6;
}