html {
    width: 100vw;
    height: 100vh;
    font-family: 'DM Sans', Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.25em;
    color: var(--shade-800);
    background-color: var(--shade-100);
    background: radial-gradient(farthest-corner at 35% 35%, var(--shade-100), black);
    background-attachment: fixed;
}

body {
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    width: 100%;
    height: 100%;
    line-height: 1.25em;
}

body * {
    box-sizing: border-box;
}

h1,
h2,
h3 {
    font-family: 'General Sans', Arial, Helvetica, sans-serif;
    line-height: 1.25em;
}

h1 {
    font-size: var(--size-4xl);
}
h1:has(svg) {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 0.25em;

    svg {
        margin-top: 0.15em;
    }
}

h2 {
    font-size: var(--size-3xl);
}

h3 {
    font-size: var(--size-2xl);
}

main h1,
main h2,
main h3 {
    margin-top: 0.25em;
    margin-bottom: 1em;
}

main > h2,
main > h3 {
    margin-top: 2em;
}

svg {
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1em;
    vertical-align: middle;
    color: inherit;

    &.icon > * {
        color: inherit;
        fill: currentColor;
    }
}

p {
    font-size: var(--size-lg);
    line-height: 1.5em;
    color: var(--shade-500);

    &.error {
        color: var(--negative-strong);
    }
}

b {
    font-weight: bold;
}

em {
    font-weight: 600;
}

pre {
    font-family: monospace;
}

sub {
    font-size: var(--size-sm);
    color: var(--shade-500);
}

a {
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--cerulean-400);
    color: var(--cerulean-200);
    cursor: pointer;

    transition: color 0.1s ease, text-decoration 0.2s ease;

    &:focus {
        color: var(--cerulean-100);
    }

    &:hover {
        color: var(--cerulean-50);
        text-decoration-color: var(--cerulean-200);
        z-index: 99999;
    }
}

label {
    font-size: var(--size-lg);
    line-height: 1em;
    color: var(--shade-700);
}

button,
.button,
.button-icon, ::file-selector-button {
    display: inline-flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
    column-gap: 0.25em;
    padding: 0.25em 0.5em;
    font-size: var(--size-lg);
    line-height: 1em;
    appearance: unset;
    cursor: pointer;
    outline: none;
    text-decoration: none;

    background: linear-gradient(-5deg, var(--shade-50) 0%, var(--shade-100) 200%);
    color: var(--shade-800);
    border: 1px solid var(--shade-100);
    box-shadow: 0.2em 0.2em 0 rgb(0 0 0 / 50%);

    transition: all 0.2s ease;

    &.small {
        font-size: var(--size-sm);
    }

    &.large {
        font-size: var(--size-2xl);
    }

    &.negative {
        border-color: var(--negative);
    }

    &.caution {
        border-color: var(--caution);
    }

    &.positive {
        border-color: var(--positive);
    }

    &:focus {
        color: var(--shade-900);
        outline: 1px solid var(--shade-800);
    }

    &:hover {
        background: linear-gradient(-5deg, var(--shade-50) 0%, var(--shade-100) 100%);
        color: var(--shade-900);
        box-shadow: 0.2em 0.2em 0 rgb(0 0 0 / 80%);
        transform: scale(1.05);
    }

    &:active {
        background: linear-gradient(-5deg, var(--shade-100) 0%, var(--shade-200) 100%);
        color: var(--shade-900);
    }
}

.button-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1.25em;
    height: 1.25em;
    padding: 0 0.125em;
    line-height: 1.25em;
    vertical-align: middle;
    font-size: inherit;
}

input,
select,
textarea, .textarea {
    padding: 0.25em 0.5em;
    font-size: var(--size-lg);
    line-height: 1em;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    outline: none;
    position: relative;

    background: linear-gradient(178deg, var(--shade-50) 0%, var(--shade-100) 200%);
    color: var(--shade-800);
    border: 1px solid var(--shade-100);
    box-shadow: 0.1em 0.1em 0 rgb(0 0 0 / 50%) inset;
    transition: all 0.2s ease;
    resize: none;

    &:required:user-valid {
        border-color: var(--positive);
    }

    &:user-invalid {
        border-color: var(--negative);
    }

    &:focus {
        color: var(--shade-900);
        outline: 1px solid var(--shade-800);
        box-shadow: 0.05em 0.05em 0 rgb(0 0 0 / 50%) inset;
    }

    &:hover {
        background: linear-gradient(178deg, var(--shade-50) 0%, var(--shade-100) 100%);
        color: var(--shade-900);
    }

    &:active {
        background: linear-gradient(178deg, var(--shade-100) 0%, var(--shade-200) 100%);
        color: var(--shade-900);
    }

    &.textarea {
        min-height: calc(var(--rows) * 1.25em);
    }
    &.textarea[contenteditable] {
        --content: attr(placeholder);

        &:empty::before {
            content: var(--content, '');
            color: var(--shade-400);
        }
    }
}

input::-webkit-slider-runnable-track {
    appearance: none;
    -webkit-appearance: none;
    width: 1rem;
    height: 1rem;
    background: transparent;
}

input::-webkit-slider-thumb {
    appearance: none;
    -webkit-appeareance: none;
    width: 1rem;
    height: 1rem;
    background: var(--shade-700);
    border-radius: 0.5rem;
}

input {
    display: inline-flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
    column-gap: 0.25em;
}

input[type=file] {
    padding: 0 0.5em 0 0;
    font-size: var(--size-sm);
    line-height: 1em;
    vertical-align: middle;

    &::file-selector-button {
        margin-right: 0.5em;
        font-size: var(--size-lg);
    }
}

select {
    display: block;
    width: auto;
    min-width: 10ch;

    & option {
        appearance: none;
        color: black;
    }
}

select[multiple] option {
    color: var(--shade-700);

    &:checked {
        background: rgb(0 0 0 / 10%);
        color: var(--positive-strongest);
    }

    &:hover {
        background: rgb(0 0 0 / 30%);
        color: var(--shade-800);
    }

    &:focus {
        background: rgb(0 0 0 / 30%);
        color: var(--shade-800);
    }

    &:active {
        background: rgb(0 0 0 / 10%);
        color: var(--shade-900);
    }
}

select:not([multiple])::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 1em;
    background: red;
    z-index: 100;
    cursor: pointer;
    pointer-events: none;
}

.select {
    display: grid;
    grid-template-areas: "select";
    align-items: center;

    position: relative;

    width: 100%;
    min-width: 15ch;
    max-width: 30ch;

    padding: 0.25em 0.5em;

    font-size: 1.25rem;
    line-height: 1.1em;

    background: linear-gradient(178deg, var(--shade-50) 0%, var(--shade-100) 200%);
    color: var(--shade-500);
    border: 1px solid var(--shade-100);
    border-radius: 0.25rem;
    box-shadow: 0.1em 0.1em 0 rgb(0 0 0 / 50%) inset;
    cursor: pointer;
    transition: color 0.15s ease-in-out;

    select {
        grid-area: select;
        justify-self: start;

        width: 100%;
        margin: 0;
        padding: 0 1em 0 0;

        font-family: inherit;
        font-size: inherit;
        line-height: inherit;

        appearance: none;
        background: transparent;
        border: none;
        box-shadow: none;
        outline: none;
        cursor: inherit;

        color: inherit;

        &:has(option:checked:not([value])),
        &:has(option:checked:not([value=""])) {
            color: var(--shade-800);
        }
    }

    &::after {
        grid-area: select;
        justify-self: end;

        content: '';

        width: 1rem;
        height: 1rem;

        color: inherit;
        background-color: currentColor;
        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M29 3c.6 0 1 .5 1 1l-.1.5-13 24c-.2.3-.6.5-.9.5s-.7-.2-.9-.5l-13-24A1 1 0 0 1 2 4c0-.5.4-1 1-1h26Z"/></svg>');
    }

    &.icon-menu::after {
        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M4 6h24v2H4zm0 18h24v2H4zm0-12h24v2H4zm0 6h24v2H4z"/></svg>');
    }
    &.icon-add::after {
        mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 2A14.2 14.2 0 0 0 2 16a14.2 14.2 0 0 0 14 14 14.2 14.2 0 0 0 14-14A14.2 14.2 0 0 0 16 2Zm8 15h-7v7h-2v-7H8v-2h7V8h2v7h7Z"/></svg>');
    }

    &:has(> :focus) {
        border-color: var(--shade-300);
    }
    &:has(> :hover) {
        color: var(--shade-800);
        border-color: var(--shade-200);
    }
    &:has(> :disabled) {
        border-color: var(--shade-50);
        opacity: 0.5;
        pointer-events: none;
    }
}

input[type='checkbox'] {
    justify-self: center;
    align-self: center;
    width: 1em;
    height: 1em;

    &:checked {
        background: radial-gradient(circle, var(--positive-strongest) 0%, var(--positive) 100%);
        box-shadow: 0 0 1rem hsl(142deg, 58%, 45%, 50%);
    }
}
.checkbox {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 0.5em;

    &:hover { color: var(--shade-700); }
    &:has(:checked) { color: var(--shade-800); font-weight: 500; }

    .label, span {
        color: inherit;
    }
}

input[type='hidden'] {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
}

input[type="datetime-local"] {
    color-scheme: dark;
    min-width: 15.5em;
    &:disabled {
        opacity: 0.5;
        color: var(--shade-300) !important;
    }
}

label:has(+ input:focus) {
    color: var(--shade-900);
}

form {
    flex: 1;
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-end;

    /* Each label is treated as a cell */
    & label {
        flex: 1;
        display: flex;
        flex-flow: column nowrap;
        align-items: stretch;
        row-gap: 0.5rem;
        color: var(--shade-700);

        &:has(:user-invalid) {
            color: var(--negative);
        }

        &:hover,
        &:focus,
        &:has(:focus) {
            color: var(--shade-900);
        }
    }

    & .section {
        flex: 1;
        align-self: stretch;
    }

    & .form-actions {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-end;
        align-items: center;
        gap: 1rem;
        margin-top: 1rem;
        padding: 1rem;
        font-size: var(--size-2xl);
        border-top: 1px solid var(--shade-200);

        & button {
            font-size: inherit;
        }
    }

    & button[type='reset'] {
        border-color: var(--caution);
        color: var(--caution-strongest);
    }

    &:has(:required) button[type='submit'] {
        border-color: var(--positive);
        color: var(--positive-strongest);
        text-shadow: 0 0 1rem var(--positive-weak);
        box-shadow: 0 0 1.5rem hsl(142deg, 58%, 45%, 50%);
    }

    &:has(:required:invalid) button[type='submit'] {
        border-color: var(--negative);
        color: var(--negative-strongest);
        text-shadow: none;
        box-shadow: none;
    }
}

form.combo {
    display: inline-flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    flex: 0 1 0;
    width: auto;

    & :not(:first-child) {
        position: relative;
        left: -2;
    }
}

table {
    display: table;
    border-collapse: collapse;
    width: 100%;
    height: auto;
    white-space: nowrap;

    & thead {
        width: 100%;
        font-weight: 700;
        color: var(--shade-700);
        border-bottom: 1px solid var(--shade-500);
    }

    & tbody {
        width: 100%;
    }

    & tr:nth-child(even) {
        background: var(--shade-100);
    }

    & th {
        padding: 0.25em 0.5em;
        white-space: nowrap;
    }

    & td {
        padding: 0.25em 0.5em;
        white-space: nowrap;
    }

    & td:not(:first-child) {
        text-align: center;
    }

    &.wrap td {
        white-space: wrap;
    }

    &.left td {
        text-align: left;
    }
}

.labeled {
    display: flex;
    flex-flow: column nowrap;
    gap: 0.125rem;

    .label {
        font-size: var(--size-sm);
        line-height: 1em;
        color: var(--shade-600);
    }

    &:has(:hover) .label {
        color: var(--shade-700);
    }
    &:has(:focus) .label {
        color: var(--shade-800);
    }
    &:has(:disabled) .label {
        color: var(--shade-400);
    }
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--shade-400) var(--shade-50);
}

::placeholder {
    color: var(--shade-400);
    opacity: 1;
    /* Firefox */
}

::-ms-input-placeholder {
    /* Edge 12 -18 */
    color: var(--shade-400);
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: var(--shade-50);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--shade-200);
    border-radius: 4px;
    border: 1px solid var(--shade-300);
}

::selection {
    color: var(--shade-50);
    background: var(--shade-500);
}

:popover-open {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    padding: 1rem;

    background: var(--shade-100);
    color: var(--shade-800);
    border: 1px solid var(--shade-200);
    border-radius: 1rem;
}

:popover-open::backdrop {
    background: rgb(0 0 0 / 50%);
    backdrop-filter: blur(0.25rem);
}