/*
 * Apply flow: the job page's apply modal (frontend/partials/job-apply-modal)
 * and the candidate's application status page
 * (frontend/pages/candidate/application-show). Colours come from the wds-*
 * tokens in workdu-ui.css, so candidate dark mode re-tints them; the
 * fallbacks are the light values.
 */

/* The modal's buttons and notices set their own display, which beats the
   browser's [hidden] rule; the step switcher relies on [hidden]. */
.wd-apply-modal [hidden],
.wd-appstatus [hidden] {
    display: none !important;
}

/* ---------------------------------------------------------------- steps */

.wd-apply-section-title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--wds-ink, #0d1526);
}

/* Read by screen readers, not shown. */
.wd-apply-sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* A step's heading takes focus when the step opens (apply-flow.js go()).
   Ring it only when the step was reached from the keyboard. */
.wd-apply-modal [data-apply-heading]:focus {
    outline: none;
}
.wd-apply-modal [data-apply-heading]:focus-visible {
    outline: 2px solid var(--wds-blue, #1875e5);
    outline-offset: 3px;
    border-radius: 4px;
}

/* --------------------------------------------------------- alerts, notes */

.wd-apply-draftnote {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
    padding: 8px 12px;
    border-radius: var(--wds-r-sm, 8px);
    background: var(--wds-blue-tint, #eef5fe);
    color: var(--wds-ink-2, #3b4a5f);
    font-size: 13px;
}
.wd-apply-draftnote button,
.wd-apply-linkbtn {
    border: 0;
    padding: 0;
    background: none;
    color: var(--wds-blue, #1875e5);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.wd-apply-guest-note {
    margin-bottom: 20px;
}

/* ------------------------------------------------------------ questions */
.wd-apply-q {
    margin-bottom: 16px;
}
.wd-apply-q__label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--wds-ink-2, #374151);
}
.wd-apply-q__choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}
.wd-apply-choice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--wds-ink-2, #374151);
    cursor: pointer;
}
.wd-apply-input {
    padding: 10px 14px;
    border: 1px solid var(--wds-line-mid, #d1d5db);
    border-radius: var(--wds-r-sm, 8px);
    font-size: 14px;
}
textarea.wd-apply-input {
    resize: vertical;
}
.wd-apply-q.has-error .wd-apply-input {
    border-color: var(--wds-red, #bf3529);
}

.wd-apply-optional {
    margin: 0 0 8px;
    padding: 12px 14px;
    border: 1px solid var(--wds-line, #e4eaf3);
    border-radius: var(--wds-r-sm, 8px);
}
.wd-apply-optional > summary {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--wds-ink, #0d1526);
    cursor: pointer;
}
.wd-apply-optional[open] > summary {
    margin-bottom: 8px;
}
.wd-apply-optional__count {
    display: inline-block;
    min-width: 20px;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: var(--wds-pill, 999px);
    background: var(--wds-fill, #eef2f8);
    color: var(--wds-ink-2, #3b4a5f);
    font-size: 12px;
    text-align: center;
}

/* --------------------------------------------------------- requirements */
.wd-apply-req {
    margin-top: 16px;
}
.wd-apply-phone {
    display: flex;
    gap: 8px;
}
.wd-apply-phone select {
    flex: 0 0 96px;
    height: 40px;
}
.wd-apply-phone input {
    flex: 1 1 auto;
    min-width: 0;
    height: 40px;
}

/* ---------------------------------------------------------------- review */
.wd-apply-review {
    margin: 0;
}
.wd-apply-review__row {
    padding: 10px 0;
    border-top: 1px solid var(--wds-line-soft, #eef2f8);
}
.wd-apply-review__row:first-child {
    border-top: 0;
}
.wd-apply-review dt {
    margin-bottom: 2px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--wds-ink-3, #7a8899);
}
.wd-apply-review dd {
    margin: 0;
    font-size: 14px;
    color: var(--wds-ink, #0d1526);
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.wd-apply-review dd.is-muted {
    color: var(--wds-ink-3, #7a8899);
    font-style: italic;
}
.wd-apply-review__link {
    font-style: normal;
    font-weight: 600;
}

/* ------------------------------------------------------------------ sent */
.wd-apply-sent {
    text-align: center;
}
.wd-apply-sent__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 10px;
    border-radius: 50%;
    background: var(--wds-green-tint, #e7f6ef);
    color: var(--wds-green, #0b8058);
}
.wd-apply-sent__title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 800;
    color: var(--wds-ink, #0d1526);
}
.wd-apply-sent__lead {
    margin: 0 auto 16px;
    max-width: 420px;
    font-size: 13.5px;
    color: var(--wds-ink-2, #3b4a5f);
}
.wd-apply-receipt {
    margin: 0;
    padding: 4px 14px;
    border: 1px solid var(--wds-line, #e4eaf3);
    border-radius: var(--wds-r-sm, 8px);
    text-align: left;
}
.wd-apply-receipt > div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    border-top: 1px solid var(--wds-line-soft, #eef2f8);
}
.wd-apply-receipt > div:first-child {
    border-top: 0;
}
.wd-apply-receipt dt {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 500;
    color: var(--wds-ink-3, #7a8899);
}
.wd-apply-receipt dd {
    margin: 0;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--wds-ink, #0d1526);
    text-align: right;
    overflow-wrap: anywhere;
}

.wd-apply-foot {
    flex-wrap: wrap;
    gap: 8px;
}

/* ------------------------------------------------- job page apply panel */
a.wd-apply-status-link {
    display: inline-flex;
    cursor: pointer;
    text-decoration: none;
}
a.wd-apply-status-link:hover,
a.wd-apply-status-link:focus {
    color: #fff;
    text-decoration: none;
    filter: brightness(.95);
}
.wd-apply-signin-link {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

/* ------------------------------------------------- application status page */
.wd-appstatus__card {
    margin-top: 16px;
    padding: 20px 22px;
}
.wd-appstatus__heading {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
    color: var(--wds-ink, #0d1526);
}
.wd-appstatus__subheading {
    margin: 16px 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--wds-ink-2, #3b4a5f);
}
.wd-appstatus__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px 24px;
    margin: 0;
}
.wd-appstatus__facts dt,
.wd-appstatus__answers dt {
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--wds-ink-3, #7a8899);
}
.wd-appstatus__facts dd,
.wd-appstatus__answers dd {
    margin: 0;
    font-size: 14px;
    color: var(--wds-ink, #0d1526);
    overflow-wrap: anywhere;
}
.wd-appstatus__inline-link {
    margin-left: 6px;
    font-size: 13px;
}
.wd-appstatus__answers > div {
    padding: 10px 0;
    border-top: 1px solid var(--wds-line-soft, #eef2f8);
}
.wd-appstatus__answers > div:first-child {
    border-top: 0;
}
.wd-appstatus__letter {
    margin: 0;
    font-size: 14px;
    color: var(--wds-ink, #0d1526);
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.wd-appstatus__muted,
.wd-appstatus__note {
    margin: 0;
    font-size: 13.5px;
    color: var(--wds-ink-3, #7a8899);
}
.wd-appstatus__note {
    margin-top: 12px;
}

.wd-timeline {
    margin: 0;
    padding: 0;
    list-style: none;
}
.wd-timeline__item {
    position: relative;
    display: flex;
    gap: 12px;
    padding-bottom: 18px;
}
.wd-timeline__item:last-child {
    padding-bottom: 0;
}
.wd-timeline__item::before {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 0;
    left: 6px;
    width: 2px;
    background: var(--wds-line, #e4eaf3);
}
.wd-timeline__item:last-child::before {
    display: none;
}
.wd-timeline__dot {
    position: relative;
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin-top: 3px;
    border: 3px solid var(--wds-surface, #fff);
    border-radius: 50%;
    background: var(--wds-line-mid, #d3dcea);
    box-shadow: 0 0 0 1px var(--wds-line-mid, #d3dcea);
}
.wd-timeline__item.is-current .wd-timeline__dot {
    background: var(--wds-blue, #1875e5);
    box-shadow: 0 0 0 1px var(--wds-blue, #1875e5);
}
.wd-timeline__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--wds-ink, #0d1526);
}
.wd-timeline__time {
    display: block;
    font-size: 12.5px;
    color: var(--wds-ink-3, #7a8899);
}

@media (max-width: 575.98px) {
    .wd-apply-receipt > div {
        flex-direction: column;
        gap: 2px;
    }
    .wd-apply-receipt dd {
        text-align: left;
    }
    .wd-appstatus__card {
        padding: 16px;
    }
}