/* ==========================================================
   PUBLIC APPLICATION FORM
   ========================================================== */

.application-form-section {
    width: 100%;
    margin-top: 2rem;
}

.application-form-shell {
    width: 100%;
}


/* ==========================================================
   FORM HEADING
   ========================================================== */

.application-form-heading {
    margin-bottom: 1.4rem;
    padding: 1.5rem 1.6rem;
    border: 1px solid #d8e3ec;
    border-radius: 0.85rem;
    background: #ffffff;
    box-shadow: 0 0.8rem 2.4rem rgb(9 37 59 / 6%);
}

.application-form-heading__eyebrow {
    margin: 0 0 0.35rem;
    color: #0787d1;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.08em;
}

.application-form-heading__title {
    margin: 0;
    color: #09243a;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 850;
    line-height: 1.15;
}

.application-form-heading__period {
    display: inline-flex;
    margin: 0.65rem 0 0;
    padding: 0.3rem 0.55rem;
    border: 1px solid #c9e5f4;
    border-radius: 999px;
    color: #0878bd;
    background: #eef9fe;
    font-size: 0.7rem;
    font-weight: 800;
}

.application-form-heading__description {
    max-width: 48rem;
    margin: 0.8rem 0 0;
    color: #53697c;
    font-size: 0.82rem;
    line-height: 1.65;
}

.application-form-heading__required {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin: 0.7rem 0 0;
    color: #697d8f;
    font-size: 0.68rem;
    line-height: 1.5;
}


/* ==========================================================
   APPLICATION RULES
   ========================================================== */

.application-rules {
    margin-bottom: 1.4rem;
    padding: 1.25rem 1.4rem;
    border: 1px solid #cbdce8;
    border-radius: 0.85rem;
    background: #f5f9fc;
}

.application-rules__heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
}

.application-rules__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    color: #ffffff;
    background: #0878bd;
    font-size: 0.78rem;
    font-weight: 900;
}

.application-rules__heading h3 {
    margin: 0;
    color: #09243a;
    font-size: 1rem;
    font-weight: 850;
    line-height: 1.3;
}

.application-rules__heading p {
    margin: 0.2rem 0 0;
    color: #677b8d;
    font-size: 0.7rem;
    line-height: 1.5;
}


/* ==========================================================
   APPLICATION RULE LIST
   ========================================================== */

.application-rules__list {
    display: grid;
    gap: 0;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: application-rule;
}

.application-rules__list > li {
    position: relative;
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.12rem 0.75rem;
    padding: 0.78rem 0;
    border-top: 1px solid #dbe5ec;
    counter-increment: application-rule;
}

.application-rules__list > li::before {
    display: inline-flex;
    grid-row: 1 / span 2;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    margin-top: 0.05rem;
    border: 1px solid #b7d7e9;
    border-radius: 50%;
    color: #0878bd;
    background: #ffffff;
    font-size: 0.65rem;
    font-weight: 900;
    content: counter(application-rule);
}

.application-rules__list strong {
    color: #203b52;
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1.4;
}

.application-rules__list > li > span {
    color: #617688;
    font-size: 0.68rem;
    line-height: 1.55;
}


/* ==========================================================
   FORM
   ========================================================== */

.application-form {
    display: grid;
    gap: 1.2rem;
}


/* ==========================================================
   FORM CARD
   ========================================================== */

.application-form-card {
    min-width: 0;
    margin: 0;
    padding: 1.4rem 1.5rem 1.5rem;
    border: 1px solid #d8e3ec;
    border-radius: 0.85rem;
    background: #ffffff;
    box-shadow: 0 0.8rem 2.4rem rgb(9 37 59 / 5%);
}

.application-form-card__legend {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    color: #09243a;
    font-size: 1.05rem;
    font-weight: 850;
    line-height: 1.35;
}

.application-form-card__number {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    color: #ffffff;
    background: #0878bd;
    font-size: 0.72rem;
    font-weight: 900;
}

.application-form-card__description {
    max-width: 48rem;
    margin: 0.65rem 0 1.2rem;
    color: #6d7f8f;
    font-size: 0.72rem;
    line-height: 1.55;
}


/* ==========================================================
   FORM GRID
   ========================================================== */

.application-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem 1rem;
}

.application-field {
    display: grid;
    align-content: start;
    min-width: 0;
    gap: 0.4rem;
}

.application-field--full {
    grid-column: 1 / -1;
}


/* ==========================================================
   QUESTION LABEL
   ========================================================== */

.application-field > label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.18rem;
    min-width: 0;
    color: #263d52;
    font-size: 0.73rem;
    font-weight: 800;
    line-height: 1.45;
}


/* ==========================================================
   QUESTION NUMBER
   ========================================================== */

.application-question-number {
    flex: 0 0 auto;
    margin-right: 0.08rem;
    color: #0878bd;
    font-weight: 900;
}


/* ==========================================================
   REQUIRED MARK
   ========================================================== */

.application-required {
    flex: 0 0 auto;
    margin-left: 0.05rem;
    color: #c32720;
    font-weight: 900;
}


/* ==========================================================
   OPTIONAL BADGE
   ========================================================== */

.application-optional {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    margin-left: 0.3rem;
    padding: 0.08rem 0.35rem;
    border: 1px solid #dce5eb;
    border-radius: 999px;
    color: #667989;
    background: #edf2f5;
    font-size: 0.54rem;
    font-weight: 750;
    line-height: 1.35;
    vertical-align: middle;
}


/* ==========================================================
   FORM CONTROLS
   ========================================================== */

.application-form-control {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 2.85rem;
    box-sizing: border-box;
    padding: 0.68rem 0.78rem;
    border: 1px solid #cbd8e3;
    border-radius: 0.52rem;
    outline: none;
    color: #183248;
    background: #ffffff;
    font: inherit;
    font-size: 0.78rem;
    line-height: 1.45;
    transition:
        border-color 120ms ease,
        box-shadow 120ms ease;
}

.application-form-control::placeholder {
    color: #9aa7b3;
    opacity: 1;
}

.application-form-control:hover {
    border-color: #adbecd;
}

.application-form-control:focus {
    border-color: #0878bd;
    box-shadow: 0 0 0 0.2rem rgb(8 120 189 / 10%);
}

textarea.application-form-control {
    min-height: 10rem;
    resize: vertical;
}

select.application-form-control {
    cursor: pointer;
}


/* ==========================================================
   HELP TEXT
   ========================================================== */

.application-field__help {
    max-width: 48rem;
    margin: 0;
    color: #718496;
    font-size: 0.65rem;
    line-height: 1.5;
}


/* ==========================================================
   FIELD ERRORS
   ========================================================== */

.application-field__error {
    margin: 0;
    color: #b9231b;
    font-size: 0.68rem;
    font-weight: 750;
    line-height: 1.45;
}

.application-field:has(.application-field__error) .application-form-control {
    border-color: #d55850;
}

.application-field:has(.application-field__error) > label {
    color: #8f211b;
}


/* ==========================================================
   VIDEO NOTES
   ========================================================== */

.application-video-note {
    margin-top: 0.25rem;
    padding: 0.72rem 0.8rem;
    border-left: 0.2rem solid #0787d1;
    border-radius: 0 0.45rem 0.45rem 0;
    background: #f1f7fb;
}

.application-video-note > strong {
    display: block;
    margin-bottom: 0.2rem;
    color: #24445c;
    font-size: 0.68rem;
}

.application-video-note p {
    margin: 0;
    color: #607587;
    font-size: 0.65rem;
    line-height: 1.55;
}

.application-video-note p strong {
    color: #263d52;
}


/* ==========================================================
   GENERAL ERROR MESSAGE
   ========================================================== */

.application-form-message {
    margin-bottom: 1.2rem;
    padding: 0.85rem 1rem;
    border: 1px solid;
    border-radius: 0.65rem;
}

.application-form-message strong {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.75rem;
}

.application-form-message p {
    margin: 0.15rem 0 0;
    font-size: 0.7rem;
    line-height: 1.5;
}

.application-form-message--error {
    border-color: #efc2bf;
    color: #a72720;
    background: #fff5f4;
}


/* ==========================================================
   SUBMIT
   ========================================================== */

.application-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.2rem 1.4rem;
    border: 1px solid #cddce7;
    border-radius: 0.85rem;
    background: #f4f9fc;
}

.application-submit__text {
    min-width: 0;
}

.application-submit__text strong {
    display: block;
    color: #17354d;
    font-size: 0.8rem;
}

.application-submit__text p {
    max-width: 38rem;
    margin: 0.25rem 0 0;
    color: #6c7f8f;
    font-size: 0.67rem;
    line-height: 1.5;
}

.application-submit__button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 2.9rem;
    padding: 0.72rem 1.1rem;
    border: 1px solid #0878bd;
    border-radius: 0.52rem;
    color: #ffffff;
    background: #0878bd;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 850;
    cursor: pointer;
}

.application-submit__button:hover {
    border-color: #066da9;
    background: #066da9;
}

.application-submit__button:focus-visible {
    outline: 0.2rem solid rgb(8 120 189 / 25%);
    outline-offset: 0.15rem;
}


/* ==========================================================
   SUCCESS / CLOSED
   ========================================================== */

.application-result {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    padding: 1.4rem 1.5rem;
    border: 1px solid #d8e3ec;
    border-radius: 0.85rem;
    background: #ffffff;
    box-shadow: 0 0.8rem 2.4rem rgb(9 37 59 / 5%);
}

.application-result__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: 900;
}

.application-result--success .application-result__icon {
    color: #17683a;
    background: #e5f6eb;
}

.application-result--closed .application-result__icon {
    color: #086d9f;
    background: #e5f4fb;
}

.application-result__eyebrow {
    margin: 0 0 0.2rem;
    color: #0878bd;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.065em;
    text-transform: uppercase;
}

.application-result__title {
    margin: 0;
    color: #09243a;
    font-size: 1.3rem;
    font-weight: 850;
    line-height: 1.25;
}

.application-result__text {
    max-width: 44rem;
    margin: 0.55rem 0 0;
    color: #607485;
    font-size: 0.75rem;
    line-height: 1.6;
}


/* ==========================================================
   REFERENCE NUMBER
   ========================================================== */

.application-reference {
    display: inline-grid;
    gap: 0.15rem;
    margin-top: 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid #bfe2ca;
    border-radius: 0.55rem;
    background: #f0faf3;
}

.application-reference__label {
    color: #668073;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.application-reference__value {
    color: #175c35;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.03em;
}


/* ==========================================================
   PERIOD DATES
   ========================================================== */

.application-period-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 1rem 0 0;
}

.application-period-dates > div {
    display: grid;
    gap: 0.1rem;
    min-width: 9rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid #d8e4ec;
    border-radius: 0.5rem;
    background: #f7fafc;
}

.application-period-dates dt {
    color: #82909c;
    font-size: 0.57rem;
    font-weight: 850;
    text-transform: uppercase;
}

.application-period-dates dd {
    margin: 0;
    color: #2d465b;
    font-size: 0.7rem;
    font-weight: 800;
}


/* ==========================================================
   ACCESSIBILITY — HIGH CONTRAST
   ========================================================== */

html.a11y-high-contrast .application-form-heading,
html.a11y-high-contrast .application-form-card,
html.a11y-high-contrast .application-rules,
html.a11y-high-contrast .application-submit,
html.a11y-high-contrast .application-result,
html.a11y-high-contrast .application-reference,
html.a11y-high-contrast .application-period-dates > div {
    border-color: #ffffff !important;
    color: #ffffff !important;
    background: #000000 !important;
    box-shadow: none !important;
}


/* ==========================================================
   HIGH CONTRAST — HEADINGS / TEXT
   ========================================================== */

html.a11y-high-contrast .application-form-heading__title,
html.a11y-high-contrast .application-form-heading__description,
html.a11y-high-contrast .application-form-heading__required,
html.a11y-high-contrast .application-form-card__legend,
html.a11y-high-contrast .application-form-card__description,
html.a11y-high-contrast .application-field > label,
html.a11y-high-contrast .application-field__help,
html.a11y-high-contrast .application-submit__text strong,
html.a11y-high-contrast .application-submit__text p,
html.a11y-high-contrast .application-result__title,
html.a11y-high-contrast .application-result__text,
html.a11y-high-contrast .application-rules__heading h3,
html.a11y-high-contrast .application-rules__heading p,
html.a11y-high-contrast .application-rules__list strong,
html.a11y-high-contrast .application-rules__list > li > span {
    color: #ffffff !important;
}


/* ==========================================================
   HIGH CONTRAST — QUESTION NUMBERS
   ========================================================== */

html.a11y-high-contrast .application-question-number {
    color: #00ffff !important;
}


/* ==========================================================
   HIGH CONTRAST — REQUIRED
   ========================================================== */

html.a11y-high-contrast .application-required {
    color: #ffff00 !important;
}


/* ==========================================================
   HIGH CONTRAST — OPTIONAL
   ========================================================== */

html.a11y-high-contrast .application-optional {
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
    background: #000000 !important;
}


/* ==========================================================
   HIGH CONTRAST — RULE NUMBERS
   ========================================================== */

html.a11y-high-contrast .application-rules__list > li {
    border-color: #ffffff !important;
}

html.a11y-high-contrast .application-rules__icon,
html.a11y-high-contrast .application-rules__list > li::before,
html.a11y-high-contrast .application-form-card__number {
    border: 2px solid #00ffff !important;
    color: #000000 !important;
    background: #00ffff !important;
}


/* ==========================================================
   HIGH CONTRAST — INPUTS
   ========================================================== */

html.a11y-high-contrast .application-form-control {
    border: 2px solid #ffffff !important;
    color: #ffffff !important;
    background: #000000 !important;
    box-shadow: none !important;
}

html.a11y-high-contrast .application-form-control::placeholder {
    color: #d8d8d8 !important;
}

html.a11y-high-contrast .application-form-control:focus {
    border-color: #00ffff !important;
    outline: 0.22rem solid #00ffff !important;
    outline-offset: 0.15rem !important;
}


/* ==========================================================
   HIGH CONTRAST — VIDEO NOTES
   ========================================================== */

html.a11y-high-contrast .application-video-note {
    border-top: 1px solid #ffffff !important;
    border-right: 1px solid #ffffff !important;
    border-bottom: 1px solid #ffffff !important;
    border-left: 0.3rem solid #00ffff !important;
    color: #ffffff !important;
    background: #000000 !important;
}

html.a11y-high-contrast .application-video-note > strong,
html.a11y-high-contrast .application-video-note p,
html.a11y-high-contrast .application-video-note p strong {
    color: #ffffff !important;
}


/* ==========================================================
   HIGH CONTRAST — SUBMIT
   ========================================================== */

html.a11y-high-contrast .application-submit__button {
    border: 2px solid #ffff00 !important;
    color: #000000 !important;
    background: #ffff00 !important;
}

html.a11y-high-contrast .application-submit__button:hover {
    border-color: #00ffff !important;
    color: #000000 !important;
    background: #00ffff !important;
}


/* ==========================================================
   HIGH CONTRAST — ERRORS
   ========================================================== */

html.a11y-high-contrast .application-field__error {
    color: #ff9b9b !important;
}

html.a11y-high-contrast .application-form-message--error {
    border: 2px solid #ff9b9b !important;
    color: #ffffff !important;
    background: #500000 !important;
}


/* ==========================================================
   HIGH CONTRAST — SUCCESS
   ========================================================== */

html.a11y-high-contrast .application-reference {
    border-color: #00ff00 !important;
}

html.a11y-high-contrast .application-reference__label,
html.a11y-high-contrast .application-reference__value {
    color: #00ff00 !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 760px) {
    .application-form-grid {
        grid-template-columns: 1fr;
    }

    .application-field--full {
        grid-column: auto;
    }

    .application-submit {
        align-items: stretch;
        flex-direction: column;
    }

    .application-submit__button {
        width: 100%;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 520px) {
    .application-form-section {
        margin-top: 1.25rem;
    }

    .application-form-heading,
    .application-form-card,
    .application-result,
    .application-rules {
        padding: 1.1rem;
        border-radius: 0.7rem;
    }

    .application-form-card__legend {
        font-size: 0.95rem;
    }

    .application-form-heading__title {
        font-size: 1.5rem;
    }

    .application-result {
        grid-template-columns: 1fr;
    }

    .application-period-dates {
        display: grid;
        grid-template-columns: 1fr;
    }

    .application-period-dates > div {
        min-width: 0;
    }

    .application-rules__list > li {
        grid-template-columns: 1.8rem minmax(0, 1fr);
        gap: 0.12rem 0.6rem;
    }

    .application-rules__list > li::before {
        width: 1.6rem;
        height: 1.6rem;
    }

    .application-field > label {
        font-size: 0.72rem;
    }

    .application-optional {
        margin-left: 0.2rem;
    }
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    .application-form-control,
    .application-submit__button {
        transition: none;
    }
}


/* ==========================================================
   FORCED COLORS
   ========================================================== */

@media (forced-colors: active) {
    .application-form-heading,
    .application-form-card,
    .application-rules,
    .application-result,
    .application-form-control,
    .application-submit,
    .application-reference,
    .application-period-dates > div,
    .application-optional {
        border-color: CanvasText;
    }
}