@charset "utf-8";

:root {
    --main-color: #b4f1bd;
    --fg-color: #333;
    --fg-color-alt: #4d525f;
    --btn-fg-color: #00210c;
    --error-color: #ba1a1a;
}

body {
    font-family: "Helvetica Neue", "Segoe UI", "Hiragino Sans", "Noto Sans CJK", system-ui, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--fg-color);
    background-color: #f6f6f6;
    min-height: 100svh;
    height: -webkit-fill-available;
}

.layout-wrapper {
    display: grid;
    grid-template-rows: 1fr auto;
}

main {
    display: grid;
    place-items: center;
    padding-inline: 1.5rem;
    padding-top: 3rem;
    padding-bottom: 5rem;
}

.card {
    background-color: #fff;
    border-radius: 1.25rem;
    padding-inline: 1.5rem;
    padding-block: 2rem 3rem;
    width: min(100%, 600px);
}

.card h1 {
    color: var(--fg-color);
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1.25rem;
}

.form-group {
    display: grid;
    row-gap: 0.25rem;
    width: 100%;
    margin-bottom: 2rem;

    &>*:not(.form-field) {
        margin-inline: 0.5rem;
    }
}

.form-label {
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
    font-weight: 500;

    &[for] {
        cursor: pointer;
    }
}

.form-label span.required {
    padding: 0.375em 0.5em;
    border-radius: 0.375em;
    background-color: rgb(from var(--error-color) r g b / 0.12);
    color: var(--error-color);
    font-size: 0.75rem;
    font-weight: normal;
    line-height: 1;
    letter-spacing: 0.04em;
}

.form-field:is(input[type="text"], input[type="email"], textarea, select) {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #bbb;
    border-radius: 0.25rem;
    background-color: #fff;
    color: var(--fg-color);
    font-size: 1rem;

    &:has(+ .form-feedback:not(:empty)) {
        border-color: var(--error-color);
        outline-color: var(--error-color);
    }

    &:-webkit-autofill {
        transition-delay: calc(infinity * 1s);
        transition-property: background-color;
    }
}

textarea.form-field {
    height: 8rem;
    resize: vertical;
    field-sizing: content;
}

select.form-field {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><polyline points="1,5 8,12 15,5" fill="none" stroke="%23666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></svg>');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem 1rem;

    &:has(option:checked[value=""]) {
        color: #666;
    }
}

.form-feedback {
    color: var(--error-color);

    &:empty {
        display: none;
    }
}

.form-feedback,
.note {
    font-size: 0.875rem;
}

.note {
    color: #666;
}

.btn {
    padding: 0.6rem 2rem;
    border-radius: calc(infinity * 1px);
    border: none;
    background-color: var(--main-color);
    color: var(--btn-fg-color);
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.1s ease-in-out;

    &:hover {
        background-color: oklch(from var(--main-color) calc(l - 0.12) c h);
    }
}

.submit-button {
    display: block;
    margin-top: 20px;
    width: 40%;
    min-width: 200px;
    margin-inline: auto;
}

.dialog-close-button {
    display: block;
    width: 200px;
    margin-inline: auto;
}

.modal-dialog {
    margin: auto;
    background-color: #fff;
    border-radius: 1rem;
    border: none;
    width: min(80vw, 400px);
    min-height: 160px;
    box-shadow: 0px 2px 12px rgb(0 0 0 / 0.16);

    &:modal {
        display: block;
    }

    &::backdrop {
        background-color: rgb(0 0 0 / 0.48);
        backdrop-filter: blur(0.125rem);
    }

    ._inner {
        padding: 1.5rem;
        display: grid;
        row-gap: 2rem;
    }
}

#status-message {
    white-space: pre-wrap;
}

footer {
    background-color: #fff;
    padding: 1.25rem;
    text-align: center;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    margin-bottom: 0.75rem;
}

.footer-links a {
    color: #2196f3;
    font-size: 0.875rem;

    &:hover {
        text-decoration: underline;
    }
}

.copyright {
    color: #666;
    font-size: 0.75rem;
}