/* ============================================================
   CAREERS — application block (.sd-apply)
   ------------------------------------------------------------
   An ink band, read top to bottom: pitch → three promises → the
   form across the full width. It was briefly two columns; the
   pitch column is much shorter than the form, so whichever way
   they were aligned one floated against the other and the block
   looked like it was sliding around.

   The form is dark, on the band itself — same treatment as
   .contact-section elsewhere on the site. It spent one revision
   on a white card; the card read cleanly but broke the band, so
   the dark form is back with the layout fixes kept.

   ⚠️ The markup must NOT carry .clcf-light. That is the
   light-background variant in contact-form.css and its rules
   (0-3-1) outrank the dark overrides here.
   ============================================================ */

.sd-apply {
    padding: 60px 0;
    background: var(--color-text-primary);
}

/* The hero links to #apply and the header is sticky — without this the jump
   parks the pill underneath it. */
.sd-apply { scroll-margin-top: 96px; }

/* ── Pitch ────────────────────────────────────────────────── */

.sd-apply__head {
    max-width: 760px;
}

.sd-apply__heading {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 600;
    color: #ffffff;
    margin: 8px 0 0;
}

.sd-apply__sub {
    font-family: var(--font-heading);
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.55);
    margin: 16px 0 0;
}

/* "What happens after you send it" — three numbered promises across the width. */
.sd-apply__next {
    list-style: none;
    padding: 0;
    margin: 40px 0 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 32px;
    counter-reset: sd-apply-next;
}

.sd-apply__next li {
    counter-increment: sd-apply-next;
    position: relative;
    padding-left: 44px;
    font-family: var(--font-heading);
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
}

.sd-apply__next li::before {
    content: counter(sd-apply-next, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 1px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.75);
}

.sd-apply__next b {
    display: block;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 2px;
}

/* ── The form ─────────────────────────────────────────────── */

/* A hairline panel rather than a solid card: it keeps the form grouped
   without putting a light rectangle in the middle of the band. */
.sd-apply__card {
    margin-top: 44px;
    padding: 36px 40px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
}

.sd-apply__card-title {
    font-family: var(--font-card-title);
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 4px;
}

.sd-apply__card-note {
    font-family: var(--font-heading);
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 24px;
}

.sd-apply__card .clcf-field input:not([type="checkbox"]),
.sd-apply__card .clcf-field textarea {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.34);
    color: #ffffff;
}

.sd-apply__card .clcf-field input:not([type="checkbox"]):focus,
.sd-apply__card .clcf-field textarea:focus {
    border-color: rgba(255, 255, 255, 0.5);
}

/* The site default for dark forms is .3 — ~2.6:1, well under the AA floor.
   .5 measured 3.96:1 on the field fill, still short; .6 clears it at 4.7:1 and
   still reads as a placeholder next to #fff typed text. */
.sd-apply__card .clcf-field input::placeholder,
.sd-apply__card .clcf-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

/* Chrome paints autofilled fields near-white. This inset has to be the exact
   composite of the field fill (.08 white over the band) — eyeball it and the
   autofilled field sits visibly lighter or darker than the ones beside it. */
.sd-apply__card .clcf-field input:-webkit-autofill,
.sd-apply__card .clcf-field input:-webkit-autofill:hover,
.sd-apply__card .clcf-field input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #303A4B inset;
    -webkit-text-fill-color: #ffffff;
    caret-color: #ffffff;
}

.sd-apply__card .clcf-field {
    color: rgba(255, 255, 255, 0.75);
}

.sd-apply__card .clcf-field textarea {
    min-height: 120px;
}

/* Fill the stretched grid cell so the dashed box and the input beside it end
   at exactly the same height. */
.sd-apply__card .clhf-file {
    flex: 1 1 auto;
}

/* Full-bleed inputs are fine in pairs; a full-width submit button is not —
   at 1150px it reads as a banner rather than a control. */
.sd-apply__card .clcf-submit {
    padding: 16px 44px;
    background: #ffffff;
    color: var(--color-text-primary);
}

.sd-apply__card .clcf-submit:hover {
    background: rgba(255, 255, 255, 0.92);
}

/* #c0392b on navy is ~3:1 and reads as brown. */
.sd-apply__card .clcf-error {
    margin: 12px 0 16px;
    color: #fca5a5;
}

/* ── CV file field ────────────────────────────────────────── */

.clhf-file {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    cursor: pointer;
    padding: 14px 18px;
    border: 1px dashed rgba(255, 255, 255, 0.34);
    border-radius: 5px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.clhf-file:hover {
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.05);
}

.clhf-file input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}

/* The CV is the one required field people skip — it must not read as muted
   helper text the way it did when it inherited the light-theme grey. */
.clhf-file__btn {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
    white-space: nowrap;
}

.clhf-file__name {
    font-family: var(--font-heading);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    word-break: break-all;
}

.clhf-file.is-filled {
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.06);
}

.clhf-file input[type="file"]:focus-visible + .clhf-file__btn {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

/* ── Consent ──────────────────────────────────────────────── */

.sd-apply__card .clcf-consent {
    color: rgba(255, 255, 255, 0.75);
}

.sd-apply__card .clcf-consent a {
    color: #ffffff;
    text-decoration: underline;
}

/* The native checkbox is a bright white system square — the loudest thing in
   the block, louder than the sentence it belongs to. */
.sd-apply__card .clcf-consent input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    margin-top: 1px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
    position: relative;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.sd-apply__card .clcf-consent input[type="checkbox"]:checked {
    background: #ffffff;
    border-color: #ffffff;
}

.sd-apply__card .clcf-consent input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 4px;
    height: 9px;
    border: solid var(--color-text-primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.sd-apply__card .clcf-consent input[type="checkbox"]:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* ── Success state — replaces the form once the CV is in ──── */

.sd-apply__done {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
    padding: 8px 0 4px;
}

.sd-apply__done-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.16);
    color: #6ee7b7;
}

.sd-apply__done-title {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 10px;
}

.sd-apply__done-text {
    font-family: var(--font-heading);
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* The questionnaire invite only renders when the HR system returned a
   personal link for this candidate — never as an empty promise. */
.sd-apply__quiz {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.sd-apply__quiz-title {
    font-family: var(--font-card-title);
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px;
}

.sd-apply__quiz-text {
    font-family: var(--font-heading);
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
    margin: 0 0 18px;
}

/* .btn-primary is navy on white — invisible on the band. */
.sd-apply__quiz .btn-primary {
    display: inline-block;
    text-decoration: none;
    background: #ffffff;
    color: var(--color-text-primary);
}

.sd-apply__quiz .btn-primary:hover {
    background: rgba(255, 255, 255, 0.92);
}

.sd-apply__quiz-ttl {
    display: block;
    font-family: var(--font-heading);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 12px;
}

/* ── Misc ─────────────────────────────────────────────────── */

/* The form and the success panel swap via the hidden attribute; make sure a
   later display rule can never resurrect the one that is meant to be gone. */
.sd-apply [hidden] { display: none !important; }

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 1010px) {
    /* Two columns can only ever orphan the third promise. */
    .sd-apply__next { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 910px) {
    .sd-apply__next { margin-top: 32px; }
    .sd-apply__card { margin-top: 36px; padding: 28px 24px; }

    /* Paired fields get too narrow to hold the CV control on one line — in
       Russian it wrapped to two and stood 33px taller than the input beside
       it. Stack the pairs before that happens (RU needs ~352px, which the
       card runs out of just under 910). */
    .sd-apply__card .clcf-row { flex-direction: column; gap: 0; margin-bottom: 0; }
    .sd-apply__card .clcf-field { margin-bottom: 16px; }
}

@media (max-width: 600px) {
    .sd-apply__card { padding: 24px 20px; }
    .sd-apply__next li { padding-left: 40px; font-size: 14px; }
    .sd-apply__card .clcf-submit { width: 100%; }
}