/* ============================================================
   THE REF PAGE
   Universal Reference Page Styles
   ============================================================ */


/* ============================================================
   1. REFERENCE PAGE FRAME
   ============================================================ */

.reference-page {
    --reference-sticky-top:
        calc(var(--site-header-inner-height) + var(--section-gap));

    --reference-toc-stuck-offset:
        -2px;

    --reference-toc-top:
        calc(var(--reference-sticky-top) + var(--reference-toc-stuck-offset));

    --reference-toc-align:
        0px;

    width: 100%;

    border:
        var(--border-width-heavy) solid var(--color-border);

    background:
        var(--color-surface);
}


/* ============================================================
   2. REFERENCE HERO
   ============================================================ */

.reference-hero {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) minmax(330px, 0.42fr);

    min-width: 0;

    border-bottom:
        var(--border-width) solid var(--color-border);
}


/* ------------------------------------------------------------
   Hero main
   ------------------------------------------------------------ */

.reference-hero-main {
    min-width: 0;

    padding:
        clamp(1.25rem, 2.2vw, 2.25rem);
}

.reference-hero-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
        var(--space-3);

    margin-bottom:
        var(--space-4);
}

.reference-hero-top .eyebrow,
.reference-hero-top .category-badge {
    margin: 0;
}

.reference-hero h1 {
    max-width:
        900px;

    margin:
        0 0 var(--space-4);

    font-size:
        clamp(2.4rem, 5vw, 5rem);

    line-height:
        0.92;
}

.reference-hero-lead {
    max-width:
        850px;

    margin:
        0;

    color:
        var(--color-text-muted);

    font-size:
        var(--text-lg);

    font-weight:
        500;

    line-height:
        1.55;
}


/* ------------------------------------------------------------
   Reference freshness
   ------------------------------------------------------------ */

.reference-freshness {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
        0.4rem;

    margin-top:
        var(--space-3);

    color:
        var(--color-text-muted);

    font-family:
        var(--font-mono);

    font-size:
        0.62rem;

    font-weight:
        700;

    letter-spacing:
        0.045em;

    line-height:
        1.3;

    text-transform:
        uppercase;
}

.reference-freshness i {
    color:
        var(--color-accent);

    font-size:
        0.7rem;
}

.reference-freshness time {
    color:
        var(--color-text);

    font-weight:
        800;
}


/* ------------------------------------------------------------
   Hero metadata
   ------------------------------------------------------------ */

.reference-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
        var(--space-2) var(--space-3);

    margin-top:
        var(--space-5);
}

.reference-meta-item {
    display: inline-flex;
    align-items: center;

    gap:
        var(--space-2);

    color:
        var(--color-text-muted);

    font-family:
        var(--font-mono);

    font-size:
        var(--text-xs);

    font-weight:
        700;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;
}

.reference-meta-item i {
    color:
        var(--color-accent);
}


/* ============================================================
   3. HERO METRICS
   ============================================================ */

.reference-hero-metrics {
    display: grid;

    grid-template-rows:
        repeat(3, minmax(0, 1fr));

    min-width: 0;

    border-left:
        var(--border-width) solid var(--color-border);

    background:
        var(--color-surface-2);
}

.reference-metric {
    display: flex;
    justify-content: center;
    flex-direction: column;

    gap:
        var(--space-1);

    min-width: 0;

    padding:
        var(--space-4) var(--space-5);

    border-bottom:
        1px solid var(--color-border-soft);
}

.reference-metric:last-child {
    border-bottom: 0;
}

.reference-metric-value {
    color:
        var(--color-accent);

    font-family:
        var(--font-display);

    font-size:
        clamp(1.6rem, 2.4vw, 2.35rem);

    font-weight:
        900;

    font-stretch:
        var(--font-stretch-display);

    line-height:
        1;

    letter-spacing:
        0.03em;

    text-transform:
        uppercase;
}

.reference-metric-label {
    color:
        var(--color-text-muted);

    font-family:
        var(--font-mono);

    font-size:
        0.62rem;

    font-weight:
        700;

    line-height:
        1.4;

    letter-spacing:
        0.05em;

    text-transform:
        uppercase;
}


/* ============================================================
   4. QUICK ANSWER
   ============================================================ */

.reference-quick-answer {
    display: grid;

    grid-template-columns:
        64px minmax(0, 1fr);

    border-bottom:
        var(--border-width) solid var(--color-border);

    background:
        var(--color-bg);
}

.reference-quick-answer-icon {
    display: grid;
    place-items: center;

    border-right:
        var(--border-width) solid var(--color-border);

    background:
        var(--color-accent);

    color:
        var(--color-accent-text);

    font-size:
        1.25rem;
}

.reference-quick-answer-content {
    min-width: 0;

    padding:
        var(--space-4) clamp(1rem, 2vw, 1.5rem);
}

.reference-quick-answer-content .eyebrow {
    margin-bottom:
        var(--space-1);
}

.reference-quick-answer-content p {
    max-width:
        1000px;

    margin:
        0;

    color:
        var(--color-text);

    line-height:
        1.55;
}


/* ============================================================
   5. REFERENCE LAYOUT
   ============================================================ */

.reference-layout {
    display: grid;

    grid-template-columns:
        minmax(190px, 220px) minmax(0, 1fr);

    align-items:
        start;

    min-width:
        0;
}


/* ============================================================
   6. TABLE OF CONTENTS
   ============================================================ */

.reference-toc {
    position:
        sticky;

    top:
        calc(var(--reference-toc-top) + var(--reference-toc-align));

    min-width:
        0;

    border-right:
        var(--border-width) solid var(--color-border);

    border-bottom:
        var(--border-width) solid var(--color-border);

    background:
        var(--color-surface);
}


/* ------------------------------------------------------------
   Sticky top edge
   Appears only after the TOC detaches
   ------------------------------------------------------------ */

.reference-toc::before {
    position:
        absolute;

    top: 0;
    right: 0;
    left: 0;

    z-index:
        2;

    height:
        var(--border-width);

    background:
        var(--color-border);

    content:
        "";

    opacity:
        0;

    pointer-events:
        none;

    transition:
        opacity var(--transition-fast);
}

.reference-toc.is-stuck::before {
    opacity:
        1;
}


/* ------------------------------------------------------------
   TOC header
   ------------------------------------------------------------ */

.reference-toc-header {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    min-height:
        46px;

    padding:
        var(--space-2) var(--space-3);

    border-bottom:
        var(--border-width) solid var(--color-border);

    background:
        var(--color-surface-2);

    color:
        var(--color-text);
}


/* Yellow sticky accent */

.reference-toc-header::before {
    position:
        absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width:
        5px;

    background:
        var(--color-accent);

    content:
        "";

    opacity:
        0;

    pointer-events:
        none;

    transition:
        opacity var(--transition-fast);
}

.reference-toc.is-stuck .reference-toc-header::before {
    opacity:
        1;
}

.reference-toc-header .eyebrow {
    margin:
        0;

    padding-left:
        var(--space-2);

    color:
        var(--color-text);

    font-size:
        0.65rem;
}


/* ------------------------------------------------------------
   TOC navigation
   ------------------------------------------------------------ */

.reference-toc nav {
    display:
        flex;

    flex-direction:
        column;
}

.reference-toc a {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        var(--space-2);

    min-height:
        40px;

    padding:
        0.55rem 0.7rem 0.55rem var(--space-3);

    border-bottom:
        1px solid var(--color-border-soft);

    background:
        var(--color-surface);

    color:
        var(--color-text);

    font-family:
        var(--font-mono);

    font-size:
        0.67rem;

    font-weight:
        700;

    line-height:
        1.3;

    text-decoration:
        none;

    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        padding-left var(--transition-fast);
}

.reference-toc a:last-child {
    border-bottom:
        0;
}


/* ------------------------------------------------------------
   Arrow
   ------------------------------------------------------------ */

.reference-toc a::after {
    flex:
        0 0 auto;

    color:
        var(--color-text-muted);

    font-size:
        0.7rem;

    content:
        "→";

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}


/* ------------------------------------------------------------
   Hover / focus
   ------------------------------------------------------------ */

.reference-toc a:hover,
.reference-toc a:focus-visible {
    padding-left:
        1rem;

    background:
        var(--color-surface-2);

    color:
        var(--color-text);
}

.reference-toc a:hover::after,
.reference-toc a:focus-visible::after {
    color:
        var(--color-accent);

    transform:
        translateX(3px);
}


/* ============================================================
   7. REFERENCE CONTENT
   ============================================================ */

.reference-content {
    min-width:
        0;
}


/* ------------------------------------------------------------
   Reference section
   ------------------------------------------------------------
   Each section owns its top dividing line.

   Desktop TOC anchor positioning is handled by main.js so every
   target aligns against the actual sticky TOC position rather
   than relying on browser scroll-margin calculations.
   ------------------------------------------------------------ */

.reference-section {
    min-width:
        0;

    background:
        var(--color-surface);
}

.reference-content>.reference-section:not(:first-child) {
    border-top:
        var(--border-width) solid var(--color-border);
}


/* ------------------------------------------------------------
   Section header
   ------------------------------------------------------------ */

.reference-section-header {
    display:
        grid;

    grid-template-columns:
        64px minmax(0, 1fr);

    min-height:
        70px;

    border-bottom:
        var(--border-width) solid var(--color-border);

    background:
        var(--color-surface-2);
}

.reference-section-number {
    display:
        grid;

    place-items:
        center;

    border-right:
        var(--border-width) solid var(--color-border);

    background:
        var(--color-accent);

    color:
        var(--color-accent-text);

    font-family:
        var(--font-mono);

    font-size:
        var(--text-sm);

    font-weight:
        800;

    letter-spacing:
        0.04em;
}

.reference-section-heading {
    display:
        flex;

    justify-content:
        center;

    flex-direction:
        column;

    min-width:
        0;

    padding:
        var(--space-3) var(--space-4);
}

.reference-section-heading .eyebrow {
    margin-bottom:
        var(--space-1);
}

.reference-section-heading h2 {
    margin:
        0;

    font-size:
        clamp(1.35rem,
            2.2vw,
            2rem);

    line-height:
        1;
}


/* ------------------------------------------------------------
   Section body
   ------------------------------------------------------------ */

.reference-section-body {
    padding:
        clamp(1rem,
            2vw,
            1.75rem);
}

.reference-section-body> :first-child {
    margin-top:
        0;
}

.reference-section-body> :last-child {
    margin-bottom:
        0;
}

.reference-section-body p,
.reference-section-body ul,
.reference-section-body ol {
    max-width:
        960px;
}

.reference-section-body h3 {
    max-width:
        900px;

    margin:
        var(--space-6) 0 var(--space-3);

    font-size:
        var(--text-xl);
}

.reference-section-body a:not(.button) {
    color:
        var(--color-accent);
}

.reference-section-body a:not(.button):hover,
.reference-section-body a:not(.button):focus-visible {
    color:
        var(--color-accent-hover);
}


/* ============================================================
   8. REFERENCE TABLES
   ============================================================ */

.reference-table-wrap {
    width:
        100%;

    margin:
        var(--space-4) 0;

    overflow-x:
        auto;

    border:
        var(--border-width) solid var(--color-border);

    background:
        var(--color-surface);
}

.reference-table {
    width:
        100%;

    min-width:
        760px;

    border-collapse:
        collapse;

    font-size:
        var(--text-sm);
}

.reference-table th,
.reference-table td {
    padding:
        0.7rem 0.8rem;

    border-right:
        1px solid var(--color-border-soft);

    border-bottom:
        1px solid var(--color-border-soft);

    text-align:
        left;

    vertical-align:
        top;
}

.reference-table th:last-child,
.reference-table td:last-child {
    border-right:
        0;
}

.reference-table tr:last-child td {
    border-bottom:
        0;
}

.reference-table thead th {
    background:
        var(--color-text);

    color:
        var(--color-bg);

    font-family:
        var(--font-mono);

    font-size:
        var(--text-xs);

    font-weight:
        800;

    letter-spacing:
        0.045em;

    text-transform:
        uppercase;

    white-space:
        nowrap;
}

.reference-table tbody tr {
    background:
        var(--color-surface);
}

.reference-table tbody tr:nth-child(even) {
    background:
        var(--color-bg);
}

.reference-table tbody tr:hover {
    background:
        var(--color-surface-2);
}

.reference-table code {
    color:
        var(--color-text);

    font-family:
        var(--font-mono);

    font-size:
        0.9em;

    font-weight:
        700;

    white-space:
        nowrap;
}


/* ============================================================
   9. DEFINITION / QUICK LOOKUP CARDS
   ============================================================ */

.reference-definition-grid {
    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        var(--space-3);

    margin:
        var(--space-4) 0;
}

.reference-definition {
    min-width:
        0;

    padding:
        var(--space-4);

    border:
        1px solid var(--color-border);

    background:
        var(--color-bg);
}

.reference-definition-term {
    display:
        block;

    margin-bottom:
        var(--space-2);

    color:
        var(--color-accent);

    font-family:
        var(--font-display);

    font-size:
        var(--text-xl);

    font-weight:
        850;

    font-stretch:
        var(--font-stretch-display);

    line-height:
        1;

    letter-spacing:
        0.03em;

    text-transform:
        uppercase;
}

.reference-definition-value {
    display:
        block;

    margin-bottom:
        var(--space-2);

    color:
        var(--color-text);

    font-family:
        var(--font-mono);

    font-size:
        var(--text-sm);

    font-weight:
        700;
}

.reference-definition p {
    margin:
        0;

    color:
        var(--color-text-muted);

    font-size:
        var(--text-sm);

    line-height:
        1.45;
}


/* ============================================================
   10. NOTES / CALLOUTS / FORMULAS
   ============================================================ */

.reference-note {
    margin:
        var(--space-5) 0;

    padding:
        var(--space-4);

    border:
        var(--border-width) solid var(--color-border);

    border-left:
        6px solid var(--color-accent);

    background:
        var(--color-surface-2);
}

.reference-note--info {
    border-left-color:
        var(--color-teal);
}

.reference-note--warning {
    border-left-color:
        var(--color-accent);
}

.reference-note-title {
    display:
        block;

    margin-bottom:
        var(--space-2);

    font-family:
        var(--font-mono);

    font-size:
        var(--text-xs);

    font-weight:
        800;

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;
}

.reference-note p {
    margin:
        0;

    line-height:
        1.5;
}


/* ------------------------------------------------------------
   Formula
   ------------------------------------------------------------ */

.reference-formula {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        86px;

    margin:
        var(--space-4) 0;

    padding:
        var(--space-4);

    border:
        var(--border-width) solid var(--color-border);

    background:
        var(--color-bg);

    color:
        var(--color-text);

    font-family:
        var(--font-mono);

    font-size:
        clamp(0.9rem, 2vw, 1.25rem);

    font-weight:
        700;

    text-align:
        center;
}


/* ============================================================
   11. FIGURES
   ============================================================ */

.reference-figure {
    margin:
        var(--space-5) 0;

    border:
        var(--border-width) solid var(--color-border);

    background:
        var(--color-bg);
}

.reference-figure img,
.reference-figure svg {
    width:
        100%;
}

.reference-figure figcaption {
    padding:
        var(--space-2) var(--space-3);

    border-top:
        1px solid var(--color-border-soft);

    color:
        var(--color-text-muted);

    font-family:
        var(--font-mono);

    font-size:
        var(--text-xs);

    line-height:
        1.45;
}


/* ============================================================
   12. FAQ
   ============================================================ */

.reference-faq {
    display:
        flex;

    flex-direction:
        column;

    border:
        var(--border-width) solid var(--color-border);
}

.reference-faq details {
    background:
        var(--color-surface);

    border-bottom:
        1px solid var(--color-border-soft);
}

.reference-faq details:last-child {
    border-bottom:
        0;
}

.reference-faq summary {
    position:
        relative;

    padding:
        0.9rem 3rem 0.9rem var(--space-4);

    color:
        var(--color-text);

    font-family:
        var(--font-ui);

    font-size:
        var(--text-base);

    font-weight:
        800;

    line-height:
        1.35;

    cursor:
        pointer;

    list-style:
        none;
}

.reference-faq summary::-webkit-details-marker {
    display:
        none;
}

.reference-faq summary::after {
    position:
        absolute;

    top:
        50%;

    right:
        var(--space-4);

    color:
        var(--color-accent);

    font-family:
        var(--font-mono);

    font-weight:
        800;

    content:
        "+";

    transform:
        translateY(-50%);
}

.reference-faq details[open] summary::after {
    content:
        "−";
}

.reference-faq details[open] summary {
    border-bottom:
        1px solid var(--color-border-soft);

    background:
        var(--color-surface-2);
}

.reference-faq-answer {
    padding:
        var(--space-4);
}

.reference-faq-answer p {
    margin:
        0;

    color:
        var(--color-text-muted);

    line-height:
        1.55;
}


/* ============================================================
   13. VISUAL COMPARISON CARDS
   ============================================================ */

.reference-visual-grid {
    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        var(--space-3);

    margin:
        var(--space-4) 0;
}


/* ------------------------------------------------------------
   Card
   ------------------------------------------------------------ */

.reference-visual-card {
    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    border:
        1px solid var(--color-border);

    background:
        var(--color-bg);
}


/* ------------------------------------------------------------
   Visual stage
   ------------------------------------------------------------ */

.reference-visual-stage {
    display:
        grid;

    place-items:
        center;

    min-height:
        170px;

    padding:
        var(--space-4);

    border-bottom:
        1px solid var(--color-border-soft);

    background:
        var(--color-surface-2);
}


/* ------------------------------------------------------------
   Proportional shape
   ------------------------------------------------------------ */

.reference-visual-shape {
    position:
        relative;

    width:
        min(100%, 210px);

    aspect-ratio:
        var(--visual-ratio, 16 / 9);

    border:
        var(--border-width) solid var(--color-border);

    background:
        var(--color-surface);

    box-shadow:
        3px 3px 0 var(--color-border);
}

.reference-visual-shape::after {
    position:
        absolute;

    top:
        50%;

    left:
        50%;

    color:
        var(--color-text);

    font-family:
        var(--font-display);

    font-size:
        clamp(1rem, 2vw, 1.4rem);

    font-weight:
        850;

    font-stretch:
        var(--font-stretch-display);

    letter-spacing:
        0.04em;

    line-height:
        1;

    text-transform:
        uppercase;

    content:
        attr(data-ratio);

    transform:
        translate(-50%, -50%);

    white-space:
        nowrap;
}


/* ------------------------------------------------------------
   Card content
   ------------------------------------------------------------ */

.reference-visual-content {
    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    padding:
        var(--space-3);
}

.reference-visual-title {
    margin-bottom:
        var(--space-1);

    color:
        var(--color-text);

    font-family:
        var(--font-display);

    font-size:
        var(--text-xl);

    font-weight:
        850;

    font-stretch:
        var(--font-stretch-display);

    line-height:
        1;

    letter-spacing:
        0.03em;

    text-transform:
        uppercase;
}

.reference-visual-value {
    display:
        block;

    margin-bottom:
        var(--space-2);

    color:
        var(--color-accent);

    font-family:
        var(--font-mono);

    font-size:
        var(--text-xs);

    font-weight:
        800;

    letter-spacing:
        0.04em;
}

.reference-visual-content p {
    margin:
        0;

    color:
        var(--color-text-muted);

    font-size:
        var(--text-sm);

    line-height:
        1.45;
}


/* ------------------------------------------------------------
   Visual cards responsive
   ------------------------------------------------------------ */

@media (max-width: 900px) {

    .reference-visual-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 560px) {

    .reference-visual-grid {
        grid-template-columns:
            1fr;
    }

    .reference-visual-stage {
        min-height:
            150px;
    }

}


/* ============================================================
   14. RESPONSIVE
   ============================================================ */

@media (max-width: 1050px) {

    .reference-hero {
        grid-template-columns:
            minmax(0, 1fr) 280px;
    }

    .reference-definition-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 900px) {

    /* ------------------------------------------------------------
       Reference hero
       ------------------------------------------------------------ */

    .reference-hero {
        grid-template-columns:
            1fr;
    }


    /* ------------------------------------------------------------
       Hero metrics
       ------------------------------------------------------------ */

    .reference-hero-metrics {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        grid-template-rows:
            none;

        border-top:
            var(--border-width) solid var(--color-border);

        border-left:
            0;
    }

    .reference-metric {
        border-right:
            1px solid var(--color-border-soft);

        border-bottom:
            0;
    }

    .reference-metric:last-child {
        border-right:
            0;
    }


    /* ------------------------------------------------------------
       Reference layout
       ------------------------------------------------------------ */

    .reference-layout {
        grid-template-columns:
            1fr;
    }


    /* ------------------------------------------------------------
       Native anchor offset
       ------------------------------------------------------------
       Below 900px the table of contents is no longer sticky.
       Native browser anchor navigation therefore uses the site
       header offset instead of the desktop JS positioning.
       ------------------------------------------------------------ */

    .reference-section {
        scroll-margin-top:
            var(--reference-sticky-top);
    }


    /* ------------------------------------------------------------
       Table of contents
       ------------------------------------------------------------ */

    .reference-toc {
        position:
            static;

        width:
            100%;

        margin-top:
            0;

        border-right:
            0;

        border-bottom:
            var(--border-width) solid var(--color-border);

        background:
            var(--color-surface);
    }

    .reference-toc-header {
        min-height:
            44px;
    }

    .reference-toc nav {
        display:
            grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .reference-toc a {
        min-height:
            42px;
    }

    .reference-toc a:nth-child(odd) {
        border-right:
            1px solid var(--color-border-soft);
    }


    /* ------------------------------------------------------------
       Reset desktop sticky decoration
       ------------------------------------------------------------ */

    .reference-toc::before,
    .reference-toc-header::before {
        opacity:
            0;
    }

}


@media (max-width: 640px) {

    .reference-hero-main {
        padding:
            var(--space-4);
    }

    .reference-hero h1 {
        font-size:
            clamp(2.4rem, 13vw, 4rem);
    }

    .reference-hero-lead {
        font-size:
            var(--text-base);
    }

    .reference-hero-metrics {
        grid-template-columns:
            1fr;
    }

    .reference-metric {
        padding:
            var(--space-3) var(--space-4);

        border-right:
            0;

        border-bottom:
            1px solid var(--color-border-soft);
    }

    .reference-metric:last-child {
        border-bottom:
            0;
    }

    .reference-quick-answer {
        grid-template-columns:
            48px minmax(0, 1fr);
    }

    .reference-toc nav {
        grid-template-columns:
            1fr;
    }

    .reference-toc a:nth-child(odd) {
        border-right:
            0;
    }

    .reference-section-header {
        grid-template-columns:
            48px minmax(0, 1fr);

        min-height:
            62px;
    }

    .reference-section-body {
        padding:
            var(--space-4);
    }

    .reference-definition-grid {
        grid-template-columns:
            1fr;
    }

    .reference-formula {
        justify-content:
            flex-start;

        overflow-x:
            auto;

        text-align:
            left;
    }

}


/* ============================================================
   15. PAGE-SPECIFIC EXTENSIONS
   ============================================================ */


/* ------------------------------------------------------------
   Aspect Ratios
   ------------------------------------------------------------ */

.reference-page--aspect-ratios .reference-visual-shape {
    max-height:
        125px;
}

.reference-page--aspect-ratios .reference-visual-card--portrait .reference-visual-shape {
    width:
        76px;

    max-height:
        none;
}

.reference-page--aspect-ratios .ratio-equation {
    color:
        var(--color-accent);

    font-weight:
        800;
}


/* ------------------------------------------------------------
   USB Types
   ------------------------------------------------------------ */

.reference-page--usb-types .reference-visual-stage {
    min-height:
        150px;
}


/* ------------------------------------------------------------
   Connector diagram
   ------------------------------------------------------------ */

.usb-connector-symbol {
    position:
        relative;

    display:
        grid;

    place-items:
        center;

    background:
        var(--color-surface);

    border:
        var(--border-width) solid var(--color-border);

    box-shadow:
        3px 3px 0 var(--color-border);

    color:
        var(--color-text);

    font-family:
        var(--font-mono);

    font-size:
        0.6rem;

    font-weight:
        800;

    letter-spacing:
        0.055em;

    line-height:
        1;

    text-align:
        center;

    text-transform:
        uppercase;
}


/* USB Type-A */

.usb-connector-symbol--a {
    width:
        118px;

    height:
        50px;

    border-radius:
        2px;
}


/* USB Type-B */

.usb-connector-symbol--b {
    width:
        76px;

    height:
        68px;

    clip-path:
        polygon(14% 0,
            86% 0,
            100% 16%,
            100% 100%,
            0 100%,
            0 16%);
}


/* Mini-USB */

.usb-connector-symbol--mini {
    width:
        96px;

    height:
        46px;

    clip-path:
        polygon(12% 0,
            88% 0,
            100% 28%,
            92% 100%,
            8% 100%,
            0 28%);
}


/* Micro-USB */

.usb-connector-symbol--micro {
    width:
        110px;

    height:
        34px;

    clip-path:
        polygon(7% 0,
            93% 0,
            100% 28%,
            95% 100%,
            5% 100%,
            0 28%);
}


/* SuperSpeed Micro-B */

.usb-connector-symbol--micro-ss {
    width:
        145px;

    height:
        34px;

    border-radius:
        2px;
}

.usb-connector-symbol--micro-ss::before {
    position:
        absolute;

    top:
        0;

    bottom:
        0;

    left:
        68%;

    width:
        1px;

    background:
        var(--color-border);

    content:
        "";
}


/* USB-C */

.usb-connector-symbol--c {
    width:
        106px;

    height:
        46px;

    border-radius:
        999px;
}

.usb-connector-symbol--c::before {
    position:
        absolute;

    inset:
        9px 13px;

    border:
        1px solid var(--color-border-soft);

    border-radius:
        999px;

    content:
        "";
}


/* Keep USB-C label above inner outline */

.usb-connector-symbol--c span {
    position:
        relative;

    z-index:
        1;

    padding:
        0.15rem 0.3rem;

    background:
        var(--color-surface);
}


/* ------------------------------------------------------------
   USB responsive
   ------------------------------------------------------------ */

@media (max-width: 560px) {

    .reference-page--usb-types .reference-visual-stage {
        min-height:
            130px;
    }

}


/* ------------------------------------------------------------
   HTTP Status Codes
   ------------------------------------------------------------ */

.reference-page--http-status-codes .reference-visual-stage {
    min-height:
        135px;
}


/* ------------------------------------------------------------
   Status class marker
   ------------------------------------------------------------ */

.http-status-mark {
    display:
        grid;

    place-items:
        center;

    width:
        min(100%, 160px);

    min-height:
        74px;

    border:
        var(--border-width) solid var(--color-border);

    background:
        var(--color-surface);

    color:
        var(--color-accent);

    box-shadow:
        3px 3px 0 var(--color-border);

    font-family:
        var(--font-display);

    font-size:
        clamp(2rem,
            4vw,
            3.25rem);

    font-weight:
        900;

    font-stretch:
        var(--font-stretch-display);

    letter-spacing:
        0.035em;

    line-height:
        1;

    text-transform:
        uppercase;
}


/* ------------------------------------------------------------
   HTTP Status Codes responsive
   ------------------------------------------------------------ */

@media (max-width: 560px) {

    .reference-page--http-status-codes .reference-visual-stage {
        min-height:
            120px;
    }

}


/* ------------------------------------------------------------
   HTML Symbols
   ------------------------------------------------------------ */

.reference-page--html-symbols .reference-visual-stage {
    min-height:
        140px;
}


/* ------------------------------------------------------------
   Character reference marker
   ------------------------------------------------------------ */

.html-entity-mark {
    display:
        grid;

    place-items:
        center;

    min-width:
        150px;

    min-height:
        74px;

    padding:
        var(--space-3);

    border:
        var(--border-width) solid var(--color-border);

    background:
        var(--color-surface);

    color:
        var(--color-text);

    box-shadow:
        3px 3px 0 var(--color-border);

    text-align:
        center;
}

.html-entity-mark code {
    color:
        var(--color-accent);

    font-family:
        var(--font-mono);

    font-size:
        clamp(1rem,
            2vw,
            1.35rem);

    font-weight:
        800;

    line-height:
        1;

    white-space:
        nowrap;
}

.html-entity-glyph {
    color:
        var(--color-accent);

    font-family:
        var(--font-display);

    font-size:
        clamp(2.5rem,
            5vw,
            4rem);

    font-weight:
        900;

    line-height:
        1;
}


/* ------------------------------------------------------------
   HTML Symbols responsive
   ------------------------------------------------------------ */

@media (max-width: 560px) {

    .reference-page--html-symbols .reference-visual-stage {
        min-height:
            125px;
    }

    .html-entity-mark {
        min-width:
            135px;
    }

}


/* ------------------------------------------------------------
   Instagram Image Sizes
   ------------------------------------------------------------ */

.reference-page--instagram-image-sizes .reference-visual-stage {
    min-height:
        220px;
}


/* ------------------------------------------------------------
   Format frame
   ------------------------------------------------------------ */

.instagram-format-frame {
    display:
        grid;

    place-items:
        center;

    width:
        112px;

    aspect-ratio:
        var(--instagram-format-ratio);

    border:
        var(--border-width) solid var(--color-border);

    background:
        var(--color-surface);

    color:
        var(--color-accent);

    box-shadow:
        3px 3px 0 var(--color-border);

    font-family:
        var(--font-display);

    font-size:
        clamp(1rem,
            2vw,
            1.35rem);

    font-weight:
        900;

    font-stretch:
        var(--font-stretch-display);

    line-height:
        1;

    letter-spacing:
        0.035em;
}


/* 3:4 */

.instagram-format-frame--three-four {
    --instagram-format-ratio:
        3 / 4;
}


/* 4:5 */

.instagram-format-frame--four-five {
    --instagram-format-ratio:
        4 / 5;
}


/* Square */

.instagram-format-frame--square {
    --instagram-format-ratio:
        1 / 1;
}


/* Landscape */

.instagram-format-frame--landscape {
    --instagram-format-ratio:
        1.91 / 1;
}


/* Story / Reel */

.instagram-format-frame--story {
    --instagram-format-ratio:
        9 / 16;
}


/* ------------------------------------------------------------
   Instagram Image Sizes responsive
   ------------------------------------------------------------ */

@media (max-width: 560px) {

    .reference-page--instagram-image-sizes .reference-visual-stage {
        min-height:
            195px;
    }

    .instagram-format-frame {
        width:
            98px;
    }

}






/* ------------------------------------------------------------
   File Extensions
   ------------------------------------------------------------ */

.reference-page--file-extensions .reference-visual-stage {
    min-height:
        150px;
}


/* ------------------------------------------------------------
   Extension marker
   ------------------------------------------------------------ */

.file-extension-mark {
    display:
        grid;

    place-items:
        center;

    min-width:
        140px;

    min-height:
        72px;

    padding:
        var(--space-3) var(--space-4);

    border:
        var(--border-width) solid var(--color-border);

    background:
        var(--color-surface);

    box-shadow:
        3px 3px 0 var(--color-border);
}

.file-extension-mark code {
    color:
        var(--color-accent);

    font-family:
        var(--font-mono);

    font-size:
        clamp(1.35rem,
            3vw,
            2rem);

    font-weight:
        800;

    letter-spacing:
        0.035em;

    line-height:
        1;

    white-space:
        nowrap;
}


/* ------------------------------------------------------------
   File Extensions responsive
   ------------------------------------------------------------ */

@media (max-width: 560px) {

    .reference-page--file-extensions .reference-visual-stage {
        min-height:
            130px;
    }

    .file-extension-mark {
        min-width:
            125px;

        min-height:
            64px;
    }

}






/* ============================================================
   MIME TYPES
   ============================================================ */

.reference-page--mime-types .reference-visual-stage {
    min-height:
        150px;
}

.mime-type-mark {
    display:
        grid;

    place-items:
        center;

    width:
        min(100%, 240px);

    min-height:
        72px;

    padding:
        var(--space-3) var(--space-4);

    border:
        var(--border-width) solid var(--color-border);

    background:
        var(--color-surface);
}

.mime-type-mark code {
    max-width:
        100%;

    color:
        var(--color-accent);

    font-family:
        var(--font-mono);

    font-size:
        clamp(.85rem,
            1.8vw,
            1.2rem);

    font-weight:
        800;

    line-height:
        1.25;

    letter-spacing:
        .02em;

    text-align:
        center;

    overflow-wrap:
        anywhere;

    word-break:
        break-word;
}


/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */

@media (max-width: 560px) {

    .reference-page--mime-types .reference-visual-stage {
        min-height:
            130px;
    }

    .mime-type-mark {
        width:
            min(100%, 220px);

        min-height:
            64px;

        padding:
            var(--space-3);
    }

    .mime-type-mark code {
        font-size:
            .9rem;
    }
}






/* ============================================================
   IMAGE FILE FORMATS
   ============================================================ */

.reference-page--image-formats .reference-visual-stage {
    min-height:
        150px;
}


.image-format-mark {
    display:
        grid;

    place-items:
        center;

    width:
        min(100%, 170px);

    min-height:
        84px;

    padding:
        var(--space-3) var(--space-4);

    border:
        var(--border-width) solid var(--color-border);

    background:
        var(--color-surface);
}


.image-format-mark code {
    color:
        var(--color-accent);

    font-family:
        var(--font-mono);

    font-size:
        clamp(1.25rem,
            3vw,
            2rem);

    font-weight:
        800;

    line-height:
        1;

    letter-spacing:
        .04em;

    text-align:
        center;
}


/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */

@media (max-width: 560px) {

    .reference-page--image-formats .reference-visual-stage {
        min-height:
            130px;
    }


    .image-format-mark {
        width:
            min(100%, 150px);

        min-height:
            72px;

        padding:
            var(--space-3);
    }


    .image-format-mark code {
        font-size:
            1.35rem;
    }

}