body {
    --highlight: var(--ddc-rockorchid);
    --pel-label-color: var(--ddc-bluegum);
    --pel-input-color-valid: var(--ddc-peppermintgum);
    flex-flow: column wrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--f-size-larger);
    /* These header and footer styles should probably go into a special dd-ui-library css file for web applications */
    > header:first-child, footer:last-of-type {
        width: 100%;
        padding-inline: 1ch;
        background-color: var(--color-primary);
        display: flex;
        flex-flow: row wrap;
        justify-content: space-around;
        color: var(--color-lightest);
        font-variant-alternates: styleset(square-punctuation, square-quotes) character-variant(simplified-u, upper-i-serif, single-story-a);
        a {
            color: var(--color-lightest);
        }
        noscript p {
            line-height: 4ex;
        }
    }
    > header:first-child {
        flex-wrap: nowrap;
        padding-inline: 1ch;
        align-items: end;
        justify-content: space-between;
        gap: 2ch;
        span {
            text-align: end;
        }
    }
    > footer:last-of-type {
        font-size: var(--f-size-smallest);
        margin-block-start: 1em;
        font-variant-ligatures: discretionary-ligatures;
        font-variant-alternates: styleset(square-punctuation, square-quotes) character-variant(simplified-u, upper-i-serif, single-story-a);
        font-weight: var(--f-weight-body-light);
        padding-block: 1ex;
        div {
            display: flex;
            flex-flow: row wrap;
            align-items: center;
            img {
                height: 3em;
                aspect-ratio: 1 auto;
                margin-inline-end: 1ch;
            }
        }
    }
    main {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        address-lookup + noscript {
            font-family: var(--f-family-mono);
            font-style: italic;
            display: block;
            margin-inline: 10ch;
            background-color: var(--ddc-purpledaisy);
            padding: 4ex 4ch;
        }
    }
}
search {
    width: clamp(30vw, 35ch, 80vw);
    display: flex;
    justify-content: center;
}
label {
    display: block;
    margin-block-start: 2ex;
    font-size: 0.9em;
    text-transform: small-caps;
}
div[data-lookupstep]:has(input[disabled]) label {
    color: var(--ddc-pandorea);
}
input:user-invalid {
    background-color: var(--ddc-grevillea);
}
input.patterned:user-valid {
    color: var(--ddc-peppermintgum);
}
section.results {
    background-color: var(--highlight);
}
/* PARTS */
address-lookup::part(labels) {
    --pel-label-color: var(--ddc-bluegum);
    margin-block-start: 0.5ex;
    font-weight: 480;
}
address-lookup::part(search-area), address-lookup::part(results-area) {
    width: var(--pel-results-width, clamp(16vw, 30ch, 80vw));
}
address-lookup::part(results-area) {
    display: flex;
    flex-flow: column wrap;
}
address-lookup::part(results-area-heading), address-lookup::part(search-area-heading) {
    margin-block-start: unset;
}
.details {
    margin-inline: inherit;
}
details {
    margin-inline-start: 1ch;
}
footer p {
    line-height: 0.9;
}
.jurisdiction-switcher {
    border: 1px black solid;
    float: right;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 0.5em;
    align-items: center;
    width: min-content;
    background-color: var(--ddc-bluegum);
    padding: 1ex;
    margin-block: 2ex;
    font-size: var(--f-size-smallest);
    legend {
        padding: 0;
        /* font-size: 0.9em; */
        line-height: 1;
        font-weight: var(--f-weight-body-bold);
        margin-block-start: -5ex;
        text-align: center;
        color: var(--color-lightest);
        background-color: var(--ddc-bluegumbark);
        padding-inline: 0em;
        text-shadow: 1px 1px var(--color-darkest);
    }
    label {
        display: inline-flex;
        align-items: center;
        cursor: pointer;
        padding: 0.25em 0.75em;
        border: 1px solid var(--color-lightest);
        border-radius: 2em;
        margin-block-start: 0;
        transition: background-color 0.15s, color 0.15s;
        background-color: var(--color-lightest);
    }
    label:has(input:checked) {
        background-color: var(--ddc-grevillea);
        color: white;
        border-color: var(--color-darkest);
    }
    label input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }
}