@view-transition {
    navigation: auto;
}

@keyframes move-out {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes move-in {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0%);
    }
}

@keyframes move-back-out {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(100%);
    }
}

@keyframes move-back-in {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0%);
    }
}

html[vt-direction="back"] {
    view-transition-name: page-back;
}

html:not([vt-direction="back"]) {
    view-transition-name: page-forward;
}

::view-transition-group(page-back) {
    z-index: 100;
}

::view-transition-old(page-forward) {
    animation: 300ms ease-in-out both move-out;
}

::view-transition-new(page-forward) {
    animation: 300ms ease-in-out both move-in;
}

::view-transition-old(page-back) {
    animation: 300ms ease-in-out both move-back-out;
}

::view-transition-new(page-back) {
    animation: 300ms ease-in-out both move-back-in;
}

* {
    box-sizing: border-box;
    font-family: system-ui;
}

html {
    height: 100vh;
    height: 100svh;
}

body {
    margin: 0;
    padding: 0 1rem 1rem 1rem;
    user-select: none;
    -webkit-user-select: none;
}

button {
    font-size: 1em;
    border: none;
}

input[type="text"],
input[type="number"],
input[type="date"],
textarea,
select {
    resize: none;
    border-radius: 0.5rem;
    padding: 0.5em;
    font-size: 1em;
}

input[type="checkbox"] {
    appearance: none;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    padding: 0.5em;
    border-radius: 0.5rem;
    position: relative;
}

input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("../icons/check.svg");
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center;
}

h1 {
    margin-top: 0;
}

details {
    margin-bottom: 0.5rem;
    padding: 0.75rem 0.5rem;
    border-radius: 0.75rem;
}

summary {
    position: relative;
    list-style: none;
}

details[open] > summary {
    margin-bottom: 0.5rem;
}

summary::marker,
summary::-moz-details-marker,
summary::-webkit-details-marker,
summary::-moz-marker,
summary::-webkit-marker {
    content: "" !important;
    display: none !important;
    visibility: hidden !important;
}

summary::after {
    content: "";
    display: block;
    width: 1.5rem;
    aspect-ratio: 1;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-image: url("../icons/chevron-right.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transition: top 200ms linear,
        transform 200ms linear;
}

details[open] > summary::after {
    top: 0;
    transform: rotate(90deg);
}

@media (prefers-color-scheme: light) {
    html,
    body {
        background-color: white;
        color: black;
    }

    input[type="text"],
    input[type="number"],
    input[type="date"],
    input[type="checkbox"],
    textarea,
    select {
        border: 1px solid #ccc;
        background-color: white;
        color: black;
    }

    details {
        background-color: #ececec;
    }

    #header {
        background-color: white;
    }
}

@media (prefers-color-scheme: dark) {
    html,
    body {
        background-color: black;
        color: whitesmoke;
    }

    input[type="text"],
    input[type="number"],
    input[type="date"],
    input[type="checkbox"],
    textarea,
    select {
        border: 1px solid #444;
        background-color: #222;
        color: whitesmoke;
    }

    details {
        background-color: #101010;
    }

    #header {
        background-color: black;
    }
}

#header {
    position: sticky;
    top: 0;
    padding-block: 1rem;
    display: grid;
    align-items: center;
    z-index: 999;
}

#header:has(:last-child:nth-child(2)) {
    grid-template-columns: 20% 60% 20%;
}

#header:has(:last-child:nth-child(3)) {
    grid-template-columns: auto 1fr auto;
}

#page-title-header {
    margin: 0;
    font-weight: 600;
    text-align: center;
    opacity: 0;
    transition: opacity 150ms linear;
}

#back-button {
    width: 1.75rem;
    height: 1.75rem;
    color: #3478F5;
    background-color: transparent;
    background-image: url("../icons/chevron-left.svg");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 50% 50%;
}

.header-button {
    color: #3478F5;
    background: none;
}