/* ==========================================================================
   Fonts
   ========================================================================== */
@font-face {
    font-family: 'Red Hat Display';
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url("../fonts/RedHatDisplay/8vIQ7wUr0m80wwYf0QCXZzYzUoTg_T6h.woff2") format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Red Hat Text';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/RedHatText/RrQXbohi_ic6B3yVSzGBrMxQaKct.woff2") format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}




/* ==========================================================================
   Global Styles
   ========================================================================== */
:root {
    --circular-progress-svg: url("data:image/svg+xml,%3Csvg class='progress-spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle type='text/css'%3E .progress-spinner %7B animation: 2s linear infinite svg-animation; %7D .progress-spinner circle %7B animation: 1.4s ease-in-out infinite both circle-animation; display: block; fill: transparent; stroke: %2300847b; stroke-linecap: round; stroke-dasharray: 283; stroke-dashoffset: 280; stroke-width: 10px; transform-origin: 50%25 50%25; %7D @keyframes svg-animation %7B 0%25 %7B transform: rotateZ(0deg); %7D 100%25 %7B transform: rotateZ(360deg) %7D %7D @keyframes circle-animation %7B 0%25, 25%25 %7B stroke-dashoffset: 280; transform: rotate(0); %7D 50%25, 75%25 %7B stroke-dashoffset: 75; transform: rotate(45deg); %7D 100%25 %7B stroke-dashoffset: 280; transform: rotate(360deg); %7D %7D %3C/style%3E%3Ccircle cx='50' cy='50' r='45' /%3E%3C/svg%3E");
    --color-branding-blue: #080C55;
    --color-branding-coral: #EF7F67;
    --color-branding-navy: #2F3043;
    --color-branding-red: #B24F53;
    --color-branding-teal: #00A69B;
    --color-error: #BA1A1A;
    --color-error-container: #FFDAD6;
    --color-inverse-on-surface: #FFEDEC;
    --color-inverse-primary: #FFB3B3;
    --color-inverse-surface: #382E2E;
    --color-neutral-variant40: #6B5A5A;
    --color-neutral60: #998E8E;
    --color-on-error-container: #410002;
    --color-on-primary: #FFF;
    --color-on-secondary: #FFF;
    --color-on-secondary-container: #10144B;
    --color-on-secondary-container-opacity12: color-mix(in oklab, var(--color-on-secondary-container) 12%, transparent);
    --color-on-secondary-container-variant: #3D4278;
    --color-on-surface: #221919;
    --color-on-surface-opacity04: color-mix(in oklab, var(--color-on-surface) 4%, transparent);
    --color-on-surface-opacity12: color-mix(in oklab, var(--color-on-surface) 12%, transparent);
    --color-on-surface-opacity38: color-mix(in oklab, var(--color-on-surface) 38%, transparent);
    --color-on-surface-variant: #524343;
    --color-on-tertiary-container: #281800;
    --color-outline: #857372;
    --color-outline-variant: #D7C1C1;
    --color-primary: #8F4A4B;
    --color-secondary: #555A92;
    --color-secondary-container: #E0E0FF;
    --color-surface: #F2EFEA;
    --color-surface-container: #EAE6DF;
    --color-surface-container-highest: #D9D3CB;
    --color-surface-container-high: color-mix(in oklab, var(--color-surface-container-highest), var(--color-surface-container));
    --color-surface-container-low: color-mix(in oklab, var(--color-surface-container), var(--color-surface));
    --color-surface-container-lowest: #FFF;
    --color-tertiary30: #5B4218; 
    --color-tertiary-container: #FFDEAE;
    --easing-accelerate: cubic-bezier(0.3, 0, 1, 1);
    --easing-decelerate: cubic-bezier(0, 0, 0, 1);
    --easing-emphasized-accelerate: cubic-bezier(0.3, 0.0, 0.8, 0.15);
    --easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1.0);
    --easing-standard: cubic-bezier(0.2, 0.0, 0, 1.0);
    --elevation-1: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
    --elevation-2: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
    --elevation-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
    --font-family-default: 'Red Hat Text', ui-sans-serif, system-ui;
    --font-family-display: 'Red Hat Display', ui-sans-serif, system-ui;
    --font-body-lg: 1rem/1.5rem var(--font-family-default);
    --font-body-md: .875rem/1.25rem var(--font-family-default);
    --font-body-sm: .75rem/1rem var(--font-family-default);
    --font-headline-lg: 2rem/2.5rem var(--font-family-display);
    --font-headline-sm: 1.5rem/2rem var(--font-family-display);
    --font-label-lg: 500 .875rem/1.25rem var(--font-family-default);
    --font-label-md: 500 .75rem/1rem var(--font-family-default);
    --font-label-sm: 500 .6875rem/1rem var(--font-family-default);
    --font-title-lg: 1.375rem/1.75rem var(--font-family-display);
    --font-title-md: 500 1rem/1.5rem var(--font-family-display);
}

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

@supports (-webkit-tap-highlight-color: transparent) {
    *,
    *::after,
    *::before {
        -webkit-tap-highlight-color: transparent;
    }
}

* {
    margin: 0;
    padding: 0;
}

html,
body {
    block-size: 100dvb;
    inline-size: 100%;
}

html {
    background-color: var(--color-surface);
    color: var(--color-on-surface);
    fill: currentColor;
}

body {
    display: contents;
    font: var(--font-body-lg);
    letter-spacing: .15px;
}

a.link {
    color: var(--color-primary);
    text-decoration: none;
    text-underline-position: under;
}

    a.link:not([aria-disabled="true"]):hover {
        text-decoration: underline;
    }

    a.link:not([aria-disabled="true"]):focus-visible {
        border-radius: 100px;
        outline: 1px solid currentColor;
        outline-offset: 4px;
    }

dl dd + dt {
    margin-block-start: 24px;
}

dl dd {
    color: var(--color-on-surface-variant);
}

dl dt {
    font: var(--font-title-md);
    letter-spacing: .15px;
}

fieldset {
    border: none;
}

menu, ol, ul {
    list-style: none;
}

.display-contents {
    display: contents;
}

.ori-avatar {
    block-size: 64px;
    inline-size: 64px;
}

@media (600px <= width) and (orientation: portrait), (480px <= height) and (orientation: landscape) {
    .ori-avatar {
        block-size: 96px;
        inline-size: 96px;
    }
}




/* ==========================================================================
   Colors
   ========================================================================== */
.background-color-branding-blue {
    background-color: var(--color-branding-blue);
}

.background-color-branding-red {
    background-color: var(--color-branding-red);
}

.background-color-branding-teal {
    background-color: var(--color-branding-teal);
}

.color-neutral-variant40 {
    color: var(--color-neutral-variant40);
}

.color-on-surface-variant {
    color: var(--color-on-surface-variant);
}

.color-secondary {
    color: var(--color-secondary);
}


/* ==========================================================================
   Text & Typography
   ========================================================================== */
.text-align-center {
    text-align: center;
}

.text-wrap-pretty {
    text-wrap: pretty;
}

.typography-body-md {
    font: var(--font-body-md);
    letter-spacing: .25px;
}

.typography-body-sm {
    font: var(--font-body-sm);
    letter-spacing: .4px;
}

.typography-headline-lg {
    font: var(--font-headline-lg);
    letter-spacing: normal;
}

.typography-headline-sm {
    font: var(--font-headline-sm);
    letter-spacing: normal;
}

.typography-label-lg {
    font: var(--font-label-lg);
    letter-spacing: .1px;
}

.typography-label-md {
    font: var(--font-label-md);
    letter-spacing: .5px;
}

.typography-title-lg {
    font: var(--font-title-lg);
    letter-spacing: normal;
}

.typography-title-md {
    font: var(--font-title-md);
    letter-spacing: .15px;
}




/* ==========================================================================
   Grids
   ========================================================================== */
.align-content-start {
    align-content: start;
}

.grid {
    display: grid;
}

.justify-self-center {
    justify-self: center;
}

.justify-self-start {
    justify-self: start;
}

.row-gap-4 {
    row-gap: 4px;
}

.row-gap-8 {
    row-gap: 8px;
}

.row-gap-16 {
    row-gap: 16px;
}

.row-gap-24 {
    row-gap: 24px;
}




/* ==========================================================================
   Buttons
   ========================================================================== */
:where(.button, .button-filled, .button-icon, .button-outlined) {
    -webkit-user-select: none;
    appearance: none;
    align-items: center;
    background: none;
    block-size: 40px;
    border: none;
    border-radius: 100px;
    color: unset;
    column-gap: 8px;
    contain: content;
    display: flex;
    fill: unset;
    font: var(--font-label-lg);
    justify-content: center;
    letter-spacing: .1px;
    outline: none;
    text-decoration: none;
    transition-duration: 200ms;
    transition-property: background-color, color, fill;
    transition-timing-function: var(--easing-standard);
    user-select: none;
}

    :where(.button, .button-filled, .button-icon, .button-outlined)[aria-busy="true"]::before {
        block-size: 28px;
        content: var(--circular-progress-svg);
        inline-size: 28px;
        inset-inline-start: calc(50% - 14px);
        pointer-events: none;
        position: absolute;
        z-index: 1;
    }

    :where(.button, .button-filled, .button-icon, .button-outlined)::after {
        background-color: currentColor;
        content: '';
        inset: 0;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        transition: opacity 200ms var(--easing-standard);
    }

    :where(.button, .button-filled, .button-icon, .button-outlined):not([aria-disabled="true"], :disabled):hover::after {
        opacity: .08;
    }

    :where(.button, .button-filled, .button-icon, .button-outlined):not([aria-disabled="true"], :disabled):is(:active, :focus-visible)::after {
        opacity: .12;
    }

    :where(.button, .button-filled, .button-icon, .button-outlined) > :where(span, svg) {
        pointer-events: none;
    }

.button {
    color: var(--color-primary);
    min-inline-size: 64px;
    padding-inline: 12px;
}

    .button:is([aria-disabled="true"], :disabled) {
        color: var(--color-on-surface-opacity38);
        pointer-events: none;
    }

.button-filled {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    min-inline-size: 64px;
    padding-inline: 24px;
}

    .button-filled:focus-visible {
        outline: 2px solid currentColor;
        outline-offset: -4px;
    }

    .button-filled:has(> svg:last-child) {
        padding-inline-end: 16px;
    }

    .button-filled:is([aria-disabled="true"], :disabled) {
        background-color: var(--color-on-surface-opacity12);
        color: var(--color-on-surface-opacity38);
        pointer-events: none;
    }

.button-icon {
    color: var(--color-on-surface);
    contain: strict;
    fill: var(--color-on-surface-variant);
    inline-size: 40px;
}

    .button-icon:is([aria-disabled="true"], :disabled) {
        fill: var(--color-on-surface-opacity38);
        pointer-events: none;
    }

.button-icon-primary {
    fill: var(--color-primary);
}

.button-outlined {
    color: var(--color-primary);
    outline: 1px solid var(--color-outline);
    outline-offset: -1px;
    padding-inline: 24px;
    transition-property: background-color, color, fill, outline-color;
}

    .button-outlined:focus-visible {
        outline-color: var(--color-primary);
    }

    .button-outlined:has(> svg:first-child) {
        padding-inline-start: 16px;
    }

    .button-outlined:is([aria-disabled="true"], :disabled) {
        color: var(--color-on-surface-opacity38);
        outline-color: var(--color-on-surface-opacity12);
        pointer-events: none;
    }




/* ==========================================================================
   Form Fields
   ========================================================================== */
.form-field {
    color: var(--color-on-surface-variant);
    display: grid;
    grid-template: "label" "input" "helper" / 1fr;
}

    .form-field:has(.form-field-input:read-only) .form-field-leading-icon {
        fill: var(--color-on-surface-opacity38);
    }

    .form-field:has(.form-field-leading-icon) .form-field-input {
        padding-inline-start: 50px;
    }

    .form-field:has(.form-field-validation-error:not(:empty)) .form-field-assistive-text {
        display: none;
    }

.form-field-assistive-text,
.form-field-character-counter,
.form-field-validation-error {
    font: var(--font-body-sm);
    grid-area: helper;
    letter-spacing: .4px;
    margin: 4px 16px 0;
}

.form-field-assistive-text {
    color: var(--color-neutral-variant40);
}

.form-field-character-counter {
    justify-self: end;
}

.form-field-input {
    grid-area: input;
}

    .form-field-input:where(input, textarea) {
        background-color: var(--color-surface-container-lowest);
        border: 2px solid transparent;
        border-radius: 4px;
        color: var(--color-on-surface);
        font: unset;
        inline-size: 100%;
        letter-spacing: unset;
        outline: 1px solid transparent;
        outline-offset: -1px;
        padding: unset;
        padding-inline: 14px;
        transition-duration: 200ms;
        transition-property: background-color, border-color, color, outline-color;
        transition-timing-function: var(--easing-standard);
    }

        .form-field-input:where(input, textarea):read-only {
            background-color: var(--color-on-surface-opacity04);
            color: var(--color-on-surface-opacity38);
        }

            .form-field-input:where(input, textarea):read-only::placeholder {
                opacity: 0;
            }

        .form-field-input:where(input, textarea):read-write:hover {
            outline-color: var(--color-outline-variant);
        }

        .form-field-input:where(input, textarea):read-write:focus {
            border-color: var(--color-primary);
            outline-color: transparent;
        }

        .form-field-input:where(input, textarea):read-write:is(.input-validation-error, :user-invalid) {
            outline-color: var(--color-error);
        }

        .form-field-input:where(input, textarea)::placeholder {
            color: var(--color-neutral60);
            opacity: unset;
            transition: opacity 200ms var(--easing-standard);
        }

    .form-field-input:where(input, wt-select) {
        block-size: 56px;
        contain: size style;
    }

    .form-field-input:where(input[type="time"]) {
        font-family: monospace;
    }

    .form-field-input:where(textarea) {
        box-sizing: content-box;
        field-sizing: content;
        inline-size: unset;
        min-block-size: 6lh;
        padding: 14px;
        resize: none;
    }

.form-field-label {
    font: var(--font-label-md);
    grid-area: label;
    letter-spacing: .5px;
    padding-block-end: 8px;
}

.form-field-leading-icon {
    grid-area: input;
    margin-inline-start: 16px;
    order: 1;
    place-self: center start;
    pointer-events: none;
    transition: fill 200ms var(--easing-standard);
}

.form-field-validation-error {
    color: var(--color-error);
}

@supports selector(:autofill) {
    .form-field-input:where(input):read-write:autofill {
        outline-color: var(--color-on-surface-opacity12);
    }
}

@supports selector(::-ms-reveal) {
    .form-field-input:where(input, textarea) {
        font-weight: 410;
    }
}





/* ==========================================================================
   Select Lists
   ========================================================================== */
.select-headline {
    color: var(--color-on-surface-variant);
    display: block;
    font: var(--font-label-md);
    letter-spacing: .5px;
    line-height: 2.5rem;
}

.select-item:has(input[aria-hidden="true"]) {
    display: none;
}

.select-item-avatar {
    aspect-ratio: 1;
    border-radius: 8px;
    inline-size: 100%;
    transition: opacity 200ms var(--easing-standard, cubic-bezier(0.2, 0.0, 0, 1.0));
}

.select-item-checkmark {
    fill: none;
    grid-area: checkmark;
    place-self: center;
    pointer-events: none;
    stroke: currentColor;
    stroke-dasharray: 29.7833385;
    stroke-dashoffset: 29.7833385;
    stroke-width: 3.12px;
    transition: stroke-dashoffset 200ms cubic-bezier(0.55, 0.06, 0.68, 0.19);
}

input:checked ~ .select-item-checkmark {
    stroke-dashoffset: 0px;
}

.select-item-container {
    -webkit-user-select: none;
    background-color: var(--color-surface-container-lowest);
    border-radius: 4px;
    column-gap: 16px;
    contain: inline-size layout paint style;
    display: grid;
    fill: var(--color-on-surface-variant);
    grid-template: "leading content checkmark" / 24px 1fr 18px;
    outline: 1px solid transparent;
    outline-offset: -1px;
    overflow: hidden;
    padding-inline: 16px;
    position: relative;
    transition-duration: 200ms;
    transition-property: background-color, color, fill, outline-color;
    transition-timing-function: var(--easing-standard, cubic-bezier(0.2, 0.0, 0, 1.0));
    user-select: none;
}

    .select-item-container:has(.select-item-avatar) {
        grid-template-columns: 40px 1fr 18px;
    }

    .select-item-container:has(input:disabled) {
        background-color: var(--color-on-surface-opacity04);
        color: var(--color-on-surface-opacity38);
        fill: var(--color-on-surface-opacity38);
    }

        .select-item-container:has(input:disabled) .select-item-avatar {
            opacity: .38;
        }

        .select-item-container:has(input:disabled) .select-item-supporting-text {
            color: var(--color-on-surface-variant-opacity38);
        }

    .select-item-container:has(input:enabled:is(:active, :hover, :focus-visible)) {
        outline-color: var(--color-on-surface-opacity12);
        outline-offset: -1px;
    }

    .select-item-container:has(input:enabled:checked) {
        background-color: var(--color-secondary-container);
        color: var(--color-on-secondary-container);
        fill: var(--color-on-secondary-container);
        outline-color: var(--color-on-secondary-container-opacity12);
    }

        .select-item-container:has(input:enabled:checked) .select-item-supporting-text {
            color: var(--color-on-secondary-container-variant);
        }

.select-item-content {
    align-content: center;
    display: grid;
    grid-area: content;
    margin-block: 12px;
    min-block-size: 32px;
    pointer-events: none;
}

    .select-item-content:has(> :nth-child(2)) {
        min-block-size: 48px;
    }

.select-item-input {
    appearance: none;
    block-size: 0px;
    color: unset;
    grid-area: leading;
    inline-size: 0px;
    outline: unset;
    pointer-events: none;
}

    .select-item-input::after {
        background-color: currentColor;
        content: '';
        inset: 0;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        transition-duration: 200ms;
        transition-property: background-color, opacity;
        transition-timing-function: var(--easing-standard, cubic-bezier(0.2, 0, 0, 1));
    }

    .select-item-input:enabled:hover::after {
        opacity: .08;
    }

    .select-item-container:active input:enabled::after,
    .select-item-input:enabled:is(:active, :focus-visible)::after {
        opacity: .12;
    }

    .select-item-input + .select-item-content {
        grid-column-start: leading;
    }

.select-item-leading {
    align-content: center;
    display: grid;
    grid-area: leading;
    max-block-size: 72px;
    min-block-size: 56px;
}

.select-item-supporting-text {
    color: var(--color-neutral-variant40);
    font: var(--font-body-md);
    letter-spacing: .25px;
}

.select-list {
    display: grid;
    row-gap: 2px;
}

    .select-list > :nth-child(1 of .select-item) > .select-item-container,
    .select-list > :nth-child(1 of .select-item:has(input[aria-hidden="false"])) > .select-item-container {
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }

    .select-list > :nth-last-child(1 of .select-item) > .select-item-container,
    .select-list > :nth-last-child(1 of .select-item:has(input[aria-hidden="false"])) > .select-item-container {
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
    }

@media (600px <= width) {
    .select-item-container:has(.select-item-avatar) {
        grid-template-columns: 48px 1fr 18px;
    }
}




/* ==========================================================================
   Validation Messages
   ========================================================================== */
.validation-error,
.validation-summary-errors {
    background-color: var(--color-error-container);
    border-radius: 4px;
    color: var(--color-on-error-container);
    font: var(--font-label-lg);
    letter-spacing: .1px;
}

    .validation-error,
    .validation-summary-errors li {
        align-items: center;
        column-gap: 8px;
        display: grid;
        grid-template: minmax(24px, auto) / 20px 1fr;
        padding: 12px 16px;
    }

        .validation-error::before,
        .validation-summary-errors li::before {
            block-size: 20px;
            content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20' viewBox='0 -960 960 960' width='20'%3E%3Cpath d='M479.789-288Q495-288 505.5-298.289q10.5-10.29 10.5-25.5Q516-339 505.711-349.5q-10.29-10.5-25.5-10.5Q465-360 454.5-349.711q-10.5 10.29-10.5 25.5Q444-309 454.289-298.5q10.29 10.5 25.5 10.5ZM444-432h72v-240h-72v240Zm36.276 336Q401-96 331-126q-70-30-122.5-82.5T126-330.958q-30-69.959-30-149.5Q96-560 126-629.5t82.5-122Q261-804 330.958-834q69.959-30 149.5-30Q560-864 629.5-834t122 82.5Q804-699 834-629.276q30 69.725 30 149Q864-401 834-331q-30 70-82.5 122.5T629.276-126q-69.725 30-149 30ZM480-168q130 0 221-91t91-221q0-130-91-221t-221-91q-130 0-221 91t-91 221q0 130 91 221t221 91Zm0-312Z' fill='%23410002'/%3E%3C/svg%3E");
            inline-size: 20px;
        }




/* ==========================================================================
   Animations
   ========================================================================== */
.animatable.ori-avatar path {
    animation-duration: 1000ms;
    animation-fill-mode: backwards;
    animation-name: avatar-pulse;
    animation-timing-function: linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34 16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%, 0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%);
    transform-origin: center;
}

    .animatable.ori-avatar path:nth-of-type(1) {
        animation-delay: 300ms;
    }

    .animatable.ori-avatar path:nth-of-type(3) {
        animation-delay: 450ms;
    }

    .animatable.ori-avatar path:nth-of-type(4) {
        animation-delay: 150ms;
    }

.animatable:is(blockquote, h1, li, p, section) {
    animation-duration: 400ms;
    animation-fill-mode: backwards;
    animation-name: translateY75pct-end-in, fade-in;
    animation-timing-function: var(--easing-decelerate);
}

@keyframes avatar-pulse {
    from {
        scale: 0;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
}

@keyframes fade-out {
    to {
        opacity: 0;
    }
}

@keyframes scale80pct-start-in {
    from {
        scale: .8;
    }
}

@keyframes translateX32-end-in {
    from {
        translate: 32px;
    }
}

@keyframes translateX32-end-out {
    to {
        translate: 32px;
    }
}

@keyframes translateX32-start-in {
    from {
        translate: -32px;
    }
}

@keyframes translateX32-start-out {
    to {
        translate: -32px;
    }
}

@keyframes translateY32-end-in {
    from {
        translate: 0 32px;
    }
}

@keyframes translateY75pct-end-in {
    from {
        translate: 0 75%;
    }
}