/* Adapted from Open Props
 * https://github.com/argyleink/open-props
 * Copyright (c) 2021 Adam Argyle
 * MIT License
 */

:where(html) {
    color-scheme: light;

    --brand: var(--pink-6);

    --link: var(--indigo-7);
    --link-visited: var(--grape-7);

    --text-1: var(--gray-9);
    --text-2: var(--gray-7);

    --surface-1: var(--gray-0);
    --surface-2: var(--gray-2);
    --surface-3: var(--gray-3);
    --surface-4: var(--gray-4);

    @media (dynamic-range: high) {
        --link: color(display-p3 0 .5 1);
        --link-visited: color(display-p3 .6 .2 1);
    }
}

@media (prefers-color-scheme: dark) {
    :where(html) {
        color-scheme: dark;

        --brand: var(--pink-4);

        --link: var(--indigo-3);
        --link-visited: var(--grape-3);

        --text-1: var(--gray-1);
        --text-2: var(--gray-2);

        --surface-1: var(--gray-9);
        --surface-2: var(--gray-8);
        --surface-3: var(--gray-7);
        --surface-4: var(--gray-6);
    }
}

:where(html) {
    color: var(--text-2);
    background-color: var(--surface-1);
}

:where(h1, h2, h3, h4, h5, h6, dt) {
    color: var(--text-1);
}

:where(a) {
    color: var(--link);
}

:where(a):visited {
    color: var(--link-visited);
}

:where(html) {
    --scrollbar-color: var(--gray-7);

    scrollbar-color: var(--scrollbar-color) transparent;
    accent-color: var(--brand);
    caret-color: var(--brand);

    @media (prefers-color-scheme: light) {
        --scrollbar-color: var(--gray-4);
    }
}

:focus-visible { outline-color: var(--brand); }

*, ::before, ::after { box-sizing: border-box; }

* {
    background-origin: border-box;
    background-repeat: no-repeat;
    margin: 0;
}

*:where(:not(fieldset)) {
    border-width: 0;
    border-style: solid;
}

:is(html) {
    block-size: 100%;
    font-family: var(--font-sans);
    line-height: var(--font-lineheight-3);
    -webkit-text-size-adjust: none; /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
}

@media (prefers-reduced-motion: no-preference) {
    :focus-visible {
        transition: outline-offset .25s var(--ease-2);
        outline-offset: 5px;
    }
}

:where(body) {
    min-block-size: 100%;
    scrollbar-gutter: stable both-edges;
}

:is(h1, h2, h3, h4, h5, h6) {
    line-height: var(--font-lineheight-1);
    font-weight: var(--font-weight-9);
}

:is(h1) {
    font-size: var(--font-size-8);
    max-inline-size: var(--size-header-1);
}

:is(h2) {
    font-size: var(--font-size-6);
    max-inline-size: var(--size-header-2);
}

:is(h3) { font-size: var(--font-size-5) }
:is(h4) { font-size: var(--font-size-4) }
:is(h5) { font-size: var(--font-size-3) }

:is(h3, h4, h5, h6, dt) {
    max-inline-size: var(--size-header-3);
}

:where(a, u, ins, abbr) {
    text-underline-offset: 1px;
}

:where(a, area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
    cursor: pointer;
    touch-action: manipulation;
}

:where(a) {
    padding-inline: var(--size-1);
    margin-inline: calc(var(--size-1) * -1);
    padding-block: var(--size-1);
    margin-block: calc(var(--size-1) * -1);
    text-decoration-color: var(--indigo-2);
}

:where(a):where(:visited) {
    text-decoration-color: var(--grape-2);
}

:where(a):where(:not(:hover)) {
    text-decoration: inherit;
}

:where(button) {
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

:where(img, svg, video) {
    max-inline-size: 100%;
    block-size: auto;
}

:where(input, button, textarea, select) {
    font: inherit;
    font-size: inherit;
    color: inherit;
    letter-spacing: inherit;
}

:where(input) {
    padding-inline: var(--size-2);
    padding-block: var(--size-1);
}

:where(select) {
    padding-inline: var(--size-2);
    padding-block: var(--size-1);
}

:where(textarea) { resize: block }

:where(input[type="checkbox"], input[type="radio"]) {
    block-size: var(--size-3);
    inline-size: var(--size-3);
}

:where(svg) {
    stroke: none;
    fill: currentColor;
}

:where(svg):where(:not([fill])) {
    stroke: currentColor;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

:where(svg):where(:not([width])) {
    inline-size: var(--size-10);
}

:is(code, kbd, samp, pre) { font-family: var(--font-mono) }
:where(:not(pre) > code, kbd) { white-space: nowrap }

:is(pre) {
    white-space: pre;
    min-inline-size: 0;
    max-inline-size: max-content;
}

:where(:not(pre) > code) {
    padding: var(--size-1) var(--size-2);
    background: var(--surface-2);
    border-radius: var(--radius-2);
}

:where(kbd, var) {
    padding: var(--size-1) var(--size-2);
    border-width: var(--border-size-1);
    border-color: var(--surface-4);
    border-radius: var(--radius-2);
}

:where(mark) {
    border-radius: var(--radius-2);
    padding-inline: var(--size-1);
}

:where(ol, ul) { padding-inline-start: var(--size-8) }
:where(li) { padding-inline-start: var(--size-2) }
:where(li, dd, figcaption) { max-inline-size: var(--size-content-2) }
:where(p) { max-inline-size: var(--size-content-3) }
:where(dt, summary) { font-weight: var(--font-weight-7) }

:where(dt:not(:first-of-type)) {
    margin-block-start: var(--size-5);
}

:where(small) {
    font-size: max(.5em, var(--font-size-0));
    max-inline-size: var(--size-content-1);
}

:where(hr) {
    margin-block: var(--size-fluid-5);
    height: var(--border-size-2);
    background-color: var(--surface-3);
}

:where(figure) {
    display: grid;
    gap: var(--size-2);
    place-items: center;
}

:where(figure) > :where(figcaption) {
    font-size: var(--font-size-1);
}

:where(blockquote, :not(blockquote) > cite) {
    border-inline-start-width: var(--border-size-3);
}

:where(blockquote) {
    display: grid;
    gap: var(--size-3);
    padding-block: var(--size-3);
    padding-inline: var(--size-4);
    max-inline-size: var(--size-content-2);
}

:where(:not(blockquote) > cite) {
    padding-inline-start: var(--size-2);
}

:where(summary) {
    background: var(--surface-3);
    padding: var(--size-2) var(--size-3);
    margin: calc(var(--size-2) * -1) calc(var(--size-3) * -1);
    border-radius: var(--radius-2);
}

:where(details) {
    padding-inline: var(--size-3);
    padding-block: var(--size-2);
    background: var(--surface-2);
    border-radius: var(--radius-2);
}

:where(details[open] > summary) {
    margin-bottom: var(--size-2);
    border-end-start-radius: 0;
    border-end-end-radius: 0;
}

:where(fieldset) {
    border-radius: var(--radius-2);
}

:where(del) {
    background: var(--red-9);
    color: var(--red-2);
}

:where(ins) {
    background: var(--green-9);
    color: var(--green-1);
}

:where(abbr) {
    text-decoration-color: var(--blue-5);
}

/* New code by USWDS, adapted from Open Props */

h1 {
    margin: 0;
}

.opener {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr;
    background: white;
}

.hero {
    padding: var(--size-10);
    display: grid;
    gap: var(--size-5);
}

.hero-message {
    display: grid;
    grid-template-columns: max-content;
    color: var(--gray-9);
    line-height: var(--font-lineheight-0);
}

.hero-message > span {
    display: block;
}

.hero-message > span:last-child {
    color: var(--indigo-7);
}

.under-hero {
    color: var(--gray-7);
    font-size: var(--font-size-4);
    margin-block-end: var(--size-3);
}

.button-list {
    display: flex;
    gap: var(--size-3);
    margin-top: var(--size-3);
}

.button {
    background: white;
    color: var(--indigo-8);
    font-size: var(--font-size-3);
    padding-inline: var(--size-4);
    padding-block: var(--size-3);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-2);
    display: flex;
    align-items: center;
    line-height: 1;
}

.button span.right {
    padding-left: var(--size-2);
}

.button:hover {
    text-decoration: none;
}

.button.primary {
    background: var(--indigo-8);
    text-shadow: 0 1px 0 var(--indigo-9);
    color: white;
}

.button.primary:hover {
    background: var(--gray-9);
}

.button.secondary {
    background: white;
    border: var(--border-size-2) solid var(--indigo-8);
}

.button.secondary:visited {
    color: var(--indigo-8);
}

.button.secondary:hover {
    color: var(--gray-9);
    border-color: var(--gray-9);
}

.promo-art {
    align-self: stretch;
    background-color: var(--indigo-9);
}

.promo-art > img {
    block-size: 100%;
    object-fit: cover;
}

main {
    padding: 0;
    background-color: var(--yellow-7);
    color: var(--gray-9);
}

main .part {
    border-left: var(--border-size-5) solid var(--yellow-7);
    padding: 0 var(--size-8) var(--size-10) var(--size-10);
    padding-left: calc(var(--size-10) - var(--border-size-5));
    counter-reset: steps-primary;
}

main  .part.intro {
    color: var(--indigo-4);
    padding-top: var(--size-4);
    background-color: var(--gray-9);
    border-left-color: var(--gray-9);
    width: 100%;
}

.part.intro > h1 {
    color: white;
    padding-top: var(--size-7)
}

.part.intro > h1 + h2 {
    padding-top: var(--size-2)
}


.part.intro > h2 {
    color: var(--yellow-7);
    font-size: var(--font-size-8);
    font-weight: normal;
}

.part.intro > h3 {
    color: var(--yellow-7);
}

h2 > span {
    display: block;
    font-weight: normal;
    font-size: var(--font-size-4);
    color: var(--red-9);
    margin-bottom: var(--size-5);
    padding-bottom: var(--size-2);
    text-transform: uppercase;
    letter-spacing: var(--font-letterspacing-2);
    border-bottom: var(--border-size-2) solid;
}

main .part.one {
    padding-top: var(--size-5);
    border-left-color: var(--gray-9);
}

main .part.two {
    border-left-color: var(--teal-9);
}

main .part.three {
    border-left-color: var(--teal-7);
}

main .part.four {
    border-left-color: var(--teal-5);
}

main .part.five {
    border-left-color: var(--teal-3);
}

main .part.six {
    border-left-color: var(--teal-2);
}

main .part.seven {
    border-left-color: var(--teal-1);
}

main .part.eight {
    border-left-color: white;
}

main .section-one-end {
    border-left-color: var(--gray-9);
}

main .grid-container {
    max-width: 100%;
    padding: 0;
}

main .demo-display {
    background-color: var(--yellow-7);
}

main h2 {
    color: var(--gray-9);
    line-height: var(--font-lineheight-0);
    margin-top: 0;
    padding-top: var(--size-9);
    max-width: none;
}

main {
    --step-indent: 3rem;
}

main h3 {
    color: var(--gray-9);
    line-height: var(--font-lineheight-0);
    font-weight: normal;
    margin-top: var(--size-7);
    max-width: 64ex;
    margin-left: var(--step-indent);
    text-indent: calc(-1 * var(--step-indent));
}

.step:before {
    counter-increment: steps-primary;
    content: counter(steps-primary) ". ";
    font-weight: bold;
    display: inline-block;
    width: var(--step-indent);
    margin-left: 0;
    text-indent: 0;
}

.step-description {
    margin-left: var(--step-indent);
}

main p {
    margin-top: var(--size-3);
    font-size: var(--font-size-3);
    max-width: 80ex;
}

main p a[href],
main p a[href]:visited {
    color: var(--gray-9);
    text-decoration: underline;
    border-radius: var(--radius-1);
}

main p a:hover {
    background-color: rgba(255,255,255,.5);
}

main p a:active {
    background-color: rgba(255,255,255,.85);
}

.subhed {
    font-size: var(--font-size-5);
    line-height: var(--font-lineheight-1);
    padding-top: var(--size-2);
}

.terminal,
.editor {
    font-size: var(--font-size-3);
    padding: var(--size-3);
    border-radius: var(--radius-2);
    margin-top: var(--size-4);
    margin-bottom: var(--size-4);
    position: relative;
}

.terminal {
    background-color: var(--gray-9);
    color: var(--gray-2);
    overflow: scroll;
}

.editor {
    background-color: rgba(255,255,255,.25);
    color: var(--gray-9);
    overflow: scroll;
    padding-top: var(--size-9);
    padding-bottom: var(--size-5);
}

.terminal pre,
.editor pre {
    padding: 0 var(--size-5);
}

.terminal pre {
}

.editor pre {
}

pre.blur {
    opacity: 0.5;
}

pre.feature {
    font-weight: bold;
}

.editor > .add,
.editor > .remove {
    text-indent: calc(-1 * var(--size-5));
}

.editor > .add {
    font-weight: bold;
}

.editor > .remove {
    color: var(--red-8);
}

.editor > .add:before,
.editor > .remove:before {
    width: var(--size-5);
    display: inline-flex;
    text-indent: 0;
    font-weight: normal;
}

.editor > .add:before {
    content: "+ ";
    color: var(--blue-8);
}

.editor > .remove:before {
    content: "- ";
    color: var(--red-8);
}

.editor .filename {
    font-family: var(--font-mono);
    font-weight: normal;
    font-size: var(--font-size-2);
    display: flex;
    position: absolute;
    padding: var(--size-2) var(--size-3) var(--size-2) var(--size-2);
    line-height: var(--font-lineheight-1);
    background: var(--blue-8);
    border-top-left-radius: var(--radius-2);
    top: 0;
    left: 0;
    align-items: center;
    max-width: 100%;
    color: white;
}

.editor .filename span {
    padding-right: 0.4em;
}

.terminal > pre:before {
    content: "> ";
    color: var(--red-8);
}

footer {
    font-size: var(--font-size-2);
    padding: var(--size-5) var(--size-10);
    background-color: var(--gray-9);
    color: white;
}

footer a {
    color: var(--blue-2)
}

footer a:hover {
    color: var(--blue-3)
}

footer a:visited {
    color: var(--indigo-3)
}

.alert {
    padding: var(--size-5);
    background: var(--yellow-1);
    border-radius: var(--radius-2);
}

.alert p:first-child {
    margin-top: 0;
}

ul.contents {
    list-style: none;
    padding-left: 0;
    padding-right: 0;
    max-width: none;
    margin-top: var(--size-5);
}

ul.contents li {
    padding: 0;
    margin: 0;
    max-width: none;
}

a.contents-item {
    display: flex;
    padding: var(--size-3);
    align-items: center;
    border-left: var(--border-size-3) solid;
    width: 100%;
    margin-top: var(--size-2);
    font-size: var(--font-size-4);
    border-color: var(--indigo-7);
    color: white;
    margin-left: var(--size-1);
    line-height: var(--font-lineheight-1);
}

a.contents-item:hover {
    border-color: white;
    text-decoration: none;
    color: var(--yellow-7);
}

.contents-part {
    padding-right: var(--size-3);
    color: var(--indigo-4);
    font-weight: bold;
}

.contents-item .material-icons {
    margin-left: var(--size-1);
}