/* Three reading sizes; code and file-tree previews remain compact. */
:is(
    #domain-first-preview,
    #df-types,
    #df-errors,
    #df-wire,
    #df-handlers,
    #df-handlers-rest,
    #df-handlers-next,
    #df-react,
    #df-scaffolder
) {
    --df-text: 18px;
    --df-heading: 36px;
    --df-display: 96px;
    font-size: var(--df-text) !important;
}
:is(
        #domain-first-preview,
        #df-types,
        #df-errors,
        #df-wire,
        #df-handlers,
        #df-handlers-rest,
        #df-handlers-next,
        #df-react,
        #df-scaffolder
    )
    :where(*):not(
        :where(
            pre,
            pre *,
            .sf-file-tree,
            .sf-file-tree *,
            .sf-landing-tree,
            .sf-landing-tree *,
            .sf-feature-map
        )
    ) {
    font-size: var(--df-text) !important;
}
:is(
        #domain-first-preview,
        #df-types,
        #df-errors,
        #df-wire,
        #df-handlers,
        #df-handlers-rest,
        #df-handlers-next,
        #df-react,
        #df-scaffolder
    )
    :is(h2, h3, h4, h2 *, h3 *, h4 *) {
    font-size: var(--df-heading) !important;
}
:is(
        #domain-first-preview,
        #df-types,
        #df-errors,
        #df-wire,
        #df-handlers,
        #df-handlers-rest,
        #df-handlers-next,
        #df-react,
        #df-scaffolder
    )
    :is(h1, h1 *) {
    font-size: var(--df-display) !important;
}
:is(
        #domain-first-preview,
        #df-types,
        #df-errors,
        #df-wire,
        #df-handlers,
        #df-handlers-rest,
        #df-handlers-next,
        #df-react,
        #df-scaffolder
    )
    :is(p, li) {
    line-height: 1.6;
}
:is(
        #domain-first-preview,
        #df-types,
        #df-errors,
        #df-wire,
        #df-handlers,
        #df-handlers-rest,
        #df-handlers-next,
        #df-react,
        #df-scaffolder
    )
    :is(h2, h3, h4) {
    line-height: 1.1;
}
:is(
        #domain-first-preview,
        #df-types,
        #df-errors,
        #df-wire,
        #df-handlers,
        #df-handlers-rest,
        #df-handlers-next,
        #df-react,
        #df-scaffolder
    )
    .df-terminal-head {
    flex-wrap: wrap;
}
:is(
        #domain-first-preview,
        #df-types,
        #df-errors,
        #df-wire,
        #df-handlers,
        #df-handlers-rest,
        #df-handlers-next,
        #df-react,
        #df-scaffolder
    )
    .df-terminal-copy {
    flex-shrink: 0;
}
:is(
        #domain-first-preview,
        #df-types,
        #df-errors,
        #df-wire,
        #df-handlers,
        #df-handlers-rest,
        #df-handlers-next,
        #df-react,
        #df-scaffolder
    )
    :is(
        .dt-api > div,
        .dt-two-notes > div,
        .sf-cards-three article,
        .sf-add-grid article
    ) {
    min-width: 0;
}
:is(
        #domain-first-preview,
        #df-types,
        #df-errors,
        #df-wire,
        #df-handlers,
        #df-handlers-rest,
        #df-handlers-next,
        #df-react,
        #df-scaffolder
    )
    .dt-api
    > div
    > code {
    overflow-wrap: anywhere;
}
:is(
        #domain-first-preview,
        #df-types,
        #df-errors,
        #df-wire,
        #df-handlers,
        #df-handlers-rest,
        #df-handlers-next,
        #df-react,
        #df-scaffolder
    )
    :is(.dt-footer, .sf-footer) {
    flex-wrap: wrap;
    gap: 12px;
}
#domain-first-preview :is(.edition, .hero-bottom, .sf-feature-foot, footer) {
    flex-wrap: wrap;
    gap: 12px;
}
#domain-first-preview .hero-copy {
    min-width: 0;
}
#domain-first-preview :is(.intro, .system-heading) {
    flex-wrap: wrap;
}
#domain-first-preview .runtime-links {
    flex-wrap: wrap;
}
#domain-first-preview .sf-feature-button {
    white-space: normal;
}
#df-scaffolder
    :is(.sf-added-foot, .sf-missing-head, .sf-work-caption, .sf-hero-foot) {
    flex-wrap: wrap;
    gap: 12px;
}
#df-scaffolder .sf-steps button {
    height: auto;
    min-height: 110px;
}
#df-scaffolder .sf-steps button small {
    overflow-wrap: anywhere;
    line-height: 1.45;
}
#df-scaffolder .sf-output header {
    flex-wrap: wrap;
}
#df-scaffolder .sf-workbench {
    grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.6fr);
}
@media (max-width: 800px) {
    :is(
        #domain-first-preview,
        #df-types,
        #df-errors,
        #df-wire,
        #df-handlers,
        #df-handlers-rest,
        #df-handlers-next,
        #df-react,
        #df-scaffolder
    ) {
        --df-text: 16px;
        --df-heading: 28px;
        --df-display: 56px;
    }
    #df-scaffolder .sf-workbench {
        grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1.6fr);
    }
}
@media (max-width: 580px) {
    :is(
        #domain-first-preview,
        #df-types,
        #df-errors,
        #df-wire,
        #df-handlers,
        #df-handlers-rest,
        #df-handlers-next,
        #df-react,
        #df-scaffolder
    ) {
        --df-display: 44px;
    }
    #df-scaffolder .sf-workbench {
        grid-template-columns: 125px minmax(0, 1fr);
    }
    #df-scaffolder .sf-steps button {
        padding: 12px 8px;
        min-height: 140px;
    }
}

/* Package identifiers stand alone beneath each page title. */
:is(
        #df-types,
        #df-errors,
        #df-wire,
        #df-handlers,
        #df-handlers-rest,
        #df-handlers-next,
        #df-react,
        #df-scaffolder
    )
    :is(p.dt-package, p.sf-version) {
    font-family: "Courier New", Courier, monospace !important;
    font-weight: 400 !important;
    letter-spacing: 0;
    line-height: 1.6;
    overflow-wrap: anywhere;
    color: #171717 !important;
    -webkit-text-fill-color: #171717;
}
/* Green identifies text links outside source previews. */
:is(
        #domain-first-preview,
        #df-types,
        #df-errors,
        #df-wire,
        #df-handlers,
        #df-handlers-rest,
        #df-handlers-next,
        #df-react,
        #df-scaffolder
    )
    main
    a:not(.df-terminal-copy) {
    color: #176b45 !important;
}
#df-scaffolder main .sf-hero .sf-hero-label {
    color: #176b45 !important;
    -webkit-text-fill-color: #176b45 !important;
}
:is(
        #domain-first-preview,
        #df-types,
        #df-errors,
        #df-wire,
        #df-handlers,
        #df-handlers-rest,
        #df-handlers-next,
        #df-react,
        #df-scaffolder
    )
    :is(.dt-main, .sf-output, .sf-points, .approach-text) {
    min-width: 0;
}
:is(
        #domain-first-preview,
        #df-types,
        #df-errors,
        #df-wire,
        #df-handlers,
        #df-handlers-rest,
        #df-handlers-next,
        #df-react,
        #df-scaffolder
    )
    :is(.dt-code-head, .df-terminal-head) {
    align-items: center;
}
:is(
        #domain-first-preview,
        #df-types,
        #df-errors,
        #df-wire,
        #df-handlers,
        #df-handlers-rest,
        #df-handlers-next,
        #df-react,
        #df-scaffolder
    )
    :is(.dt-footer, .sf-footer) {
    align-items: center;
}
/* Monospaced documentation typography: preserve the three-size scale. */
:is(
    #domain-first-preview,
    #df-types,
    #df-errors,
    #df-wire,
    #df-handlers,
    #df-handlers-rest,
    #df-handlers-next,
    #df-react,
    #df-scaffolder
) {
    font-family:
        ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono",
        monospace;
}
:is(
        #domain-first-preview,
        #df-types,
        #df-errors,
        #df-wire,
        #df-handlers,
        #df-handlers-rest,
        #df-handlers-next,
        #df-react,
        #df-scaffolder
    )
    :is(h1, h2, h3, h4) {
    overflow-wrap: anywhere;
}

/* Large headings retain their scale with lighter monospaced strokes. */
:is(
        #domain-first-preview,
        #df-types,
        #df-errors,
        #df-wire,
        #df-handlers,
        #df-handlers-rest,
        #df-handlers-next,
        #df-react,
        #df-scaffolder
    )
    :is(h1, h2, h3, h4, h1 *, h2 *, h3 *, h4 *) {
    font-weight: 400 !important;
}

/* Air between monospaced heading letters; Courier has lighter strokes. */
:is(
        #domain-first-preview,
        #df-types,
        #df-errors,
        #df-wire,
        #df-handlers,
        #df-handlers-rest,
        #df-handlers-next,
        #df-react,
        #df-scaffolder
    )
    :is(h1, h2, h3, h4, h1 *, h2 *, h3 *, h4 *) {
    font-family: "Courier New", Courier, monospace !important;
    font-weight: 400 !important;
    letter-spacing: 0.015em !important;
}

/* Section captions use the same numbered slash format and ink as libraries. */
#df-scaffolder .sf-section .sf-label {
    color: #b92b1b !important;
    -webkit-text-fill-color: #b92b1b !important;
    font-family: monospace;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Code examples and shell commands share the caption's reading size. */
:is(
        #domain-first-preview,
        #df-types,
        #df-errors,
        #df-wire,
        #df-handlers,
        #df-handlers-rest,
        #df-handlers-next,
        #df-react,
        #df-scaffolder
    )
    :is(pre, pre *, code, code *) {
    font-size: var(--df-text) !important;
    line-height: 1.6 !important;
}
:is(
        #domain-first-preview,
        #df-types,
        #df-errors,
        #df-wire,
        #df-handlers,
        #df-handlers-rest,
        #df-handlers-next,
        #df-react,
        #df-scaffolder
    )
    pre {
    max-width: 100%;
    min-width: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    overflow-x: auto;
    tab-size: 2;
}

/* A modest increase for the interactive workflow tree. */
#df-scaffolder #sf-tree,
#df-scaffolder #sf-tree * {
    font-size: 14px !important;
    line-height: 1.8;
}
@media (max-width: 580px) {
    #df-scaffolder #sf-tree,
    #df-scaffolder #sf-tree * {
        font-size: 12px !important;
    }
}

/* Generator reference uses the shared reading scale and paper rules. */
#df-react .df-catalog-group {
    margin-top: 32px;
    min-width: 0;
}
#df-react .df-catalog-scroll {
    max-width: 100%;
    overflow-x: auto;
}
#df-react .df-catalog {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
    table-layout: fixed;
}
#df-react .df-catalog th,
#df-react .df-catalog td {
    padding: 14px 12px;
    vertical-align: top;
    text-align: left;
    border: 1px solid #17171744;
    line-height: 1.6;
    overflow-wrap: anywhere;
}
#df-react .df-catalog thead {
    background: #171717;
    color: #f1efe5;
}
#df-react .df-catalog th:first-child {
    width: 22%;
}
#df-react .df-catalog tbody th {
    font-weight: 700;
    background: #17171708;
}
#df-react .df-catalog th:nth-child(2) {
    width: 25%;
}
#df-react .df-catalog th:nth-child(3) {
    width: 25%;
}
#df-react .df-catalog-scroll:focus-visible {
    outline: 2px solid #176b45;
    outline-offset: 4px;
}

/* Shared motto accents; balanced white space around the landing edition row. */
.df-site-edition .df-motto-accent {
    color: #b92b1b !important;
}