/*
 * Bauhaus layer for library and structure pages.
 * Loaded last: aligns inner pages with the landing page —
 * thick ink rules, flat primary colors, square geometry, no soft surfaces.
 */
:is(
    #df-types,
    #df-errors,
    #df-wire,
    #df-handlers,
    #df-handlers-rest,
    #df-handlers-next,
    #df-react,
    #df-scaffolder
) {
    --bh-paper: #eeeade;
    --bh-ink: #22221e;
    --bh-red: #e6412c;
    --bh-blue: #2547bb;
    --bh-green: #476b5a;
    --bh-rule: 3px solid var(--bh-ink);
    --dt-paper: var(--bh-paper);
    --dt-ink: var(--bh-ink);
    --dt-red: var(--bh-red);
    --dt-blue: var(--bh-blue);
    --dt-green: var(--bh-green);
    background: var(--bh-paper);
    color: var(--bh-ink);

    & *,
    & *::before,
    & *::after {
        border-radius: 0 !important;
    }

    /* Labels: a colored square marks every label. */
    & .dt-label {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--bh-ink);
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
    & .dt-label::before {
        content: '';
        width: 12px;
        height: 12px;
        flex: none;
        background: var(--bh-red);
    }

    /*
     * First screen: the hero on the left, the three facts stacked
     * on the right. Both share one frame; everything else spans the page.
     */
    & .dt-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
        align-items: stretch;
    }
    & .dt-main > * {
        grid-column: 1 / -1;
    }
    & .dt-main > .dt-hero {
        grid-column: 1;
        grid-row: 1;
    }
    & .dt-main > .dt-facts {
        grid-column: 2;
        grid-row: 1;
    }

    & .dt-hero {
        display: block;
        margin-top: 32px;
        padding: 40px 40px 44px;
        border: var(--bh-rule);
        background: var(--bh-paper);
    }
    & .dt-hero h1 {
        margin: 18px 0 20px;
        letter-spacing: -0.02em;
        text-transform: uppercase;
    }
    & .dt-hero h1 em {
        color: var(--bh-red);
        font-style: normal;
    }
    & p.dt-package {
        display: inline-block;
        padding: 6px 12px;
        background: var(--bh-ink);
        color: var(--bh-paper) !important;
        -webkit-text-fill-color: var(--bh-paper) !important;
    }
    & .dt-intro {
        max-width: 560px;
    }

    /* Facts: a vertical column of three cells, each with its own color bar. */
    & .dt-facts {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(3, 1fr);
        margin-top: 32px;
        border: var(--bh-rule);
        border-left: 0;
        gap: 0;
    }
    & .dt-facts > div {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 16px;
        padding: 20px 24px !important;
        border: 0;
        border-left: 14px solid var(--bh-red);
    }
    & .dt-facts > div + div {
        border-top: var(--bh-rule);
        border-left: 14px solid var(--bh-red);
    }
    & .dt-facts > div:nth-child(2) {
        border-left-color: var(--bh-blue);
    }
    & .dt-facts > div:nth-child(3) {
        border-left-color: var(--bh-green);
    }
    & .dt-facts span {
        display: inline-grid;
        place-items: center;
        flex: none;
        width: 44px;
        height: 44px;
        background: var(--bh-ink);
        color: var(--bh-paper) !important;
    }

    /* Sections: thick rule on top, heading with a solid block. */
    & .dt-section {
        border-top: var(--bh-rule) !important;
        border-bottom: 0 !important;
        padding-top: 40px;
        margin-top: 0;
    }
    /* Section text uses the full page width. */
    & .dt-section p {
        max-width: none;
    }
    /* The first section sits right under the framed first screen. */
    & .dt-facts + .dt-section {
        border-top: 0 !important;
    }
    & .dt-section-title h2 {
        position: relative;
        padding-left: 30px;
    }
    & .dt-section-title h2::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0.12em;
        bottom: 0.12em;
        width: 14px;
        background: var(--bh-ink);
    }

    /* Code and terminals: framed, flat color bars, square marker. */
    & :is(.dt-code-head, .df-terminal-head) {
        border: var(--bh-rule);
        border-bottom: 0;
        margin-top: 28px;
        padding: 12px 18px;
        align-items: center;
    }
    & .dt-code-head {
        background: var(--bh-red);
        color: var(--bh-paper);
    }
    & .df-terminal-head {
        background: var(--bh-blue);
        color: var(--bh-paper);
    }
    & :is(.dt-code-head, .df-terminal-head) > span:first-child {
        display: inline-flex;
        align-items: center;
        gap: 10px;
    }
    & :is(.dt-code-head, .df-terminal-head) > span:first-child::before {
        content: '';
        width: 10px;
        height: 10px;
        background: var(--bh-paper);
    }
    & .df-terminal {
        margin-top: 28px;
    }
    & .df-terminal .df-terminal-head {
        margin-top: 0;
    }
    & pre {
        margin-top: 0;
        border: var(--bh-rule);
        background: var(--bh-ink);
    }
    & .df-terminal-copy {
        border: 2px solid var(--bh-paper);
        background: var(--bh-ink);
        color: var(--bh-paper);
        cursor: pointer;
    }
    & .df-terminal-copy:hover {
        background: var(--bh-paper);
        color: var(--bh-ink);
    }

    /* Callouts: framed box with an inverted tag instead of a soft panel. */
    & .dt-callout {
        position: relative;
        margin-top: 28px;
        padding: 22px 24px 22px 76px;
        border: var(--bh-rule) !important;
        background: var(--bh-paper);
    }
    & .dt-callout::before {
        content: '';
        position: absolute;
        left: 24px;
        top: 24px;
        width: 30px;
        height: 30px;
        border-radius: 50% !important;
        background: var(--bh-blue);
    }
    & .dt-callout > span {
        display: inline-block;
        margin-bottom: 8px;
        padding: 4px 10px;
        background: var(--bh-ink);
        color: var(--bh-paper) !important;
        letter-spacing: 0.08em;
    }

    /* Two notes: side-by-side framed cells. */
    & .dt-two-notes {
        gap: 0;
        border: var(--bh-rule);
        margin-top: 28px;
    }
    & .dt-two-notes > div {
        padding: 22px 24px;
    }
    & .dt-two-notes > div + div {
        border-left: var(--bh-rule);
    }

    /* Reference rows and catalogs: a strict table inside a thick frame. */
    & .dt-api {
        border: var(--bh-rule);
        margin-top: 24px;
    }
    & .dt-api > div {
        margin: 0;
        padding: 16px 20px;
        border-top: 1px solid var(--bh-ink);
    }
    & .dt-api > div:first-child {
        border-top: 0;
    }
    & .dt-api > div > code {
        justify-self: start;
        color: var(--bh-blue);
        font-weight: 700;
    }
    & .df-catalog-scroll {
        border: var(--bh-rule);
    }
    & .df-catalog {
        border-collapse: collapse;
    }
    & .df-catalog thead th {
        background: var(--bh-ink);
        color: var(--bh-paper);
    }
    & .df-catalog :is(th, td) {
        border: 1px solid var(--bh-ink);
    }

    /* Numbered notes: numbers in alternating geometric shapes. */
    & .dt-notes > div:not(.dt-section-title) {
        align-items: flex-start;
        border-top: 1px solid var(--bh-ink);
    }
    & .dt-notes > div:not(.dt-section-title) > span {
        display: inline-grid;
        place-items: center;
        flex: none;
        width: 40px;
        height: 40px;
        padding: 0;
        background: var(--bh-red);
        color: var(--bh-paper) !important;
    }
    & .dt-notes > div:not(.dt-section-title):nth-of-type(3n) > span {
        background: var(--bh-blue);
        border-radius: 50% !important;
    }
    & .dt-notes > div:not(.dt-section-title):nth-of-type(3n + 1) > span {
        background: var(--bh-green);
    }

    /* Inline code: flat chip, as on the landing page. */
    & :not(pre) > code {
        color: var(--bh-ink);
        background: #22221e14;
        padding: 0 4px;
    }

    /* Footer: dark band, as at the bottom of the landing page. */
    & .dt-footer {
        margin: 56px -38px 0;
        padding: 26px 38px;
        background: var(--bh-ink);
        color: var(--bh-paper);
        align-items: center;
    }
    & .dt-footer a {
        color: var(--bh-paper) !important;
        border: 2px solid var(--bh-paper);
        padding: 6px 12px;
    }
    & .dt-footer a:hover {
        background: var(--bh-red);
        border-color: var(--bh-red);
    }
}

@media (max-width: 980px) {
    :is(
        #df-types,
        #df-errors,
        #df-wire,
        #df-handlers,
        #df-handlers-rest,
        #df-handlers-next,
        #df-react,
        #df-scaffolder
    ) {
        & .dt-main {
            display: block;
        }
        & .dt-facts {
            margin-top: 0;
            border: var(--bh-rule);
            border-top: 0;
        }
    }
}

@media (max-width: 760px) {
    :is(
        #df-types,
        #df-errors,
        #df-wire,
        #df-handlers,
        #df-handlers-rest,
        #df-handlers-next,
        #df-react,
        #df-scaffolder
    ) {
        & .dt-hero {
            padding: 24px 20px 28px;
        }
        & .dt-two-notes > div + div {
            border-left: 0;
            border-top: var(--bh-rule);
        }
        & .dt-callout {
            padding-left: 24px;
        }
        & .dt-callout::before {
            display: none;
        }
        & .dt-footer {
            margin-inline: -16px;
            padding-inline: 16px;
        }
    }
}

/*
 * Problem → approach → without / with.
 * Two code columns in one frame, then a table of what changed.
 */
:is(
    #df-types,
    #df-errors,
    #df-wire,
    #df-handlers,
    #df-handlers-rest,
    #df-react
) {
    & .dt-facts a:hover {
        color: var(--bh-red);
    }

    & .dt-compare {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 28px;
        border: var(--bh-rule);
    }
    & .dt-compare > div {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
    & .dt-compare > div + div {
        border-left: var(--bh-rule);
    }
    & .dt-compare .dt-code-head {
        margin-top: 0;
        border: 0;
        border-bottom: var(--bh-rule);
    }
    & .dt-compare pre + .dt-code-head {
        border-top: var(--bh-rule);
    }
    & .dt-compare pre {
        border: 0;
    }
    /* Half-width columns: a slightly smaller code size keeps lines whole. */
    & .dt-compare :is(pre, pre *) {
        font-size: 15px !important;
    }
    & .dt-compare pre:last-child {
        flex: 1;
    }
    & .dt-compare .dt-without,
    & .dt-compare .dt-without > span {
        background: var(--bh-paper);
        color: var(--bh-ink) !important;
        -webkit-text-fill-color: var(--bh-ink) !important;
    }
    & .dt-compare .dt-without > span:first-child::before {
        background: var(--bh-ink);
    }

    & .dt-shift {
        margin-top: 28px;
        border: var(--bh-rule);
    }
    & .dt-shift > div {
        display: grid;
        grid-template-columns: minmax(0, 0.8fr) repeat(2, minmax(0, 1fr));
        border-top: 1px solid var(--bh-ink);
    }
    & .dt-shift > div:first-child {
        border-top: 0;
        background: var(--bh-ink);
        color: var(--bh-paper);
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
    & .dt-shift > div > * {
        margin: 0;
        padding: 14px 20px;
        min-width: 0;
    }
    & .dt-shift > div > * + * {
        border-left: 1px solid var(--bh-ink);
    }
    & .dt-shift > div:first-child > * + * {
        border-left-color: var(--bh-paper);
    }

    /* Commands side by side: a dark head, then what happens on each run. */
    & .dt-cli {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-top: 28px;
        border: var(--bh-rule);
    }
    & .dt-cli > div {
        min-width: 0;
    }
    & .dt-cli > div + div {
        border-left: var(--bh-rule);
    }
    & .dt-cli-head {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 4px 12px;
        padding: 14px 20px;
        border-bottom: var(--bh-rule);
        background: var(--bh-ink);
        color: var(--bh-paper);
    }
    & .dt-cli > div:first-child .dt-cli-head {
        background: var(--bh-blue);
    }
    & .dt-cli > div:last-child .dt-cli-head {
        background: var(--bh-red);
    }
    & .dt-cli-head code {
        padding: 0;
        border: 0;
        background: none;
        color: inherit !important;
        -webkit-text-fill-color: currentColor !important;
        font-weight: 700;
    }
    & .dt-cli-head span {
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
    & .dt-cli ol {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    & .dt-cli li {
        margin: 0;
        padding: 16px 20px;
    }
    & .dt-cli li + li {
        border-top: 1px solid var(--bh-ink);
    }
    & .dt-cli li > span {
        display: block;
        color: var(--bh-red);
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
    & .dt-cli li p {
        margin: 6px 0 0;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 760px) {
    :is(
        #df-types,
        #df-errors,
        #df-wire,
        #df-handlers,
        #df-handlers-rest,
        #df-react
    ) {
        & .dt-compare {
            grid-template-columns: minmax(0, 1fr);
        }
        & .dt-compare :is(pre, pre *) {
            font-size: var(--df-text) !important;
        }
        & .dt-compare > div + div {
            border-left: 0;
            border-top: var(--bh-rule);
        }
        & .dt-shift > div {
            grid-template-columns: minmax(0, 1fr);
            padding: 14px 20px;
        }
        & .dt-shift > div:first-child {
            display: none;
        }
        & .dt-shift > div:nth-child(2) {
            border-top: 0;
        }
        & .dt-shift > div > * {
            padding: 0;
        }
        & .dt-shift > div > * + * {
            border-left: 0;
            margin-top: 6px;
        }
        & .dt-shift [data-label]::before {
            content: attr(data-label) ': ';
            font-weight: 700;
        }
        & .dt-cli {
            grid-template-columns: minmax(0, 1fr);
        }
        & .dt-cli > div + div {
            border-left: 0;
            border-top: var(--bh-rule);
        }
    }
}