:root {
    /* Yearbook orange brand */
    --yb-orange: #c2410c;
    --yb-orange-dark: #9a3412;
    --yb-orange-deep: #7c2d12;
    --yb-orange-light: #ea580c;
    --yb-orange-soft: #fff7ed;
    --yb-orange-muted: #ffedd5;
    /* Supporting colors */
    --yb-accent: #1f4e79;
    --yb-white: #ffffff;
    --yb-text-main: #29211d;
    --yb-text-muted: #665a53;
    --yb-border: #e7d8ce;
    --yb-border-strong: #cdb9ac;
    --yb-focus: #fb923c;
    /* Shape */
    --yb-radius-small: 0.75rem;
    --yb-radius-medium: 1rem;
    --yb-radius-large: 1.4rem;
    /* Shadows */
    --yb-shadow-small: 0 0.35rem 1rem #7c2d1214;
    --yb-shadow-medium: 0 1rem 2.5rem #7c2d121f;
}
.yearbook-code-entry {
    width: 100%;
    min-height: calc(100vh - 8rem);
    padding: clamp(2rem, 7vw, 5rem) 1rem;
}

.yearbook-code-shell {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: min(100%, 31rem);
    margin-inline: auto;
}

.yearbook-code-logo {
    display: block;
    width: min(100%, 24rem);
    height: auto;
    margin-bottom: clamp(1.75rem, 5vw, 2.75rem);
}

.yearbook-code-card {
    position: relative;
    width: 100%;
    padding: clamp(1.5rem, 5vw, 2.5rem);
    overflow: hidden;
    color: var(--yb-text-main);
    background: var(--yb-white);
    border: 1px solid var(--yb-border);
    border-radius: var(--yb-radius-large);
    box-shadow: var(--yb-shadow-medium);
}

    .yearbook-code-card::before {
        position: absolute;
        inset: 0 0 auto;
        height: 0.35rem;
        background: linear-gradient( 90deg, var(--yb-orange-deep), var(--yb-orange), var(--yb-orange-light) );
        content: "";
    }

.yearbook-code-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.yearbook-code-heading {
    margin-bottom: 0.25rem;
    text-align: center;
}

    .yearbook-code-heading .yearbook-code-title {
        margin: 0;
        color: var(--yb-text-main);
        font-weight: 750;
        line-height: 1.25;
    }

    .yearbook-code-heading .yearbook-code-help {
        max-width: 25rem;
        margin: 0.6rem auto 0;
        color: var(--yb-text-muted);
        line-height: 1.55;
    }

.yearbook-code-form .yearbook-code-field {
    width: 100%;
}

    .yearbook-code-form
    .yearbook-code-field
    .mud-input-outlined-border {
        border-color: var(--yb-border-strong);
    }

    .yearbook-code-form
    .yearbook-code-field:hover
    .mud-input-outlined-border {
        border-color: var(--yb-orange);
    }

    .yearbook-code-form
    .yearbook-code-field.mud-input-control
    .mud-input.mud-input-outlined:focus-within
    .mud-input-outlined-border {
        border-color: var(--yb-orange);
        border-width: 2px;
    }

    .yearbook-code-form
    .yearbook-code-field
    .mud-input-label {
        color: var(--yb-text-muted);
    }

        .yearbook-code-form
        .yearbook-code-field
        .mud-input-label.mud-input-label-animated.mud-shrink {
            color: var(--yb-orange-dark);
        }

.yearbook-code-form .yearbook-code-button {
    width: 100%;
    min-height: 3rem;
    padding-inline: 1.5rem;
    color: var(--yb-white);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
    background: var(--yb-orange);
    border-radius: var(--yb-radius-small);
    box-shadow: none;
}

    .yearbook-code-form .yearbook-code-button:hover {
        color: var(--yb-white);
        background: var(--yb-orange-dark);
        box-shadow: var(--yb-shadow-small);
    }

    .yearbook-code-form .yearbook-code-button:active {
        background: var(--yb-orange-deep);
    }

    .yearbook-code-form .yearbook-code-button:focus-visible {
        outline: 3px solid var(--yb-focus);
        outline-offset: 3px;
    }

@media (max-width: 600px) {
    .yearbook-code-entry {
        min-height: auto;
        padding: 2rem 1rem;
    }

    .yearbook-code-logo {
        width: min(85%, 20rem);
        margin-bottom: 1.5rem;
    }

    .yearbook-code-card {
        padding: 1.75rem 1.25rem;
        border-radius: var(--yb-radius-medium);
    }
}