/* The application form.
 *
 * Shared by careers.html and every job posting, which is why it is here rather
 * than in either page: the speculative form and the per-role forms are the
 * same form asking different questions, and a candidate who looks at both
 * should not be able to tell they were built separately.
 *
 * Both host sections are dark (#1d1d1f) with the same green accent, so the
 * form sits in a translucent panel like the panels already on those pages.
 * The controls themselves are white with dark text rather than dark-on-dark:
 * this is the one thing on the site a person has to fill in accurately, often
 * on a phone, and legibility beats mood.
 */

.apply-form {
    max-width: 880px;
    margin: 0 auto;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border: 1px solid rgba(255, 255, 255, .17);
    background: rgba(255, 255, 255, .06);
    /* careers.html centres its CTA section; a centred form is unreadable. */
    text-align: left;
}

.apply-progress {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .75rem;
    margin: 0 0 .8rem;
    padding: 0;
    list-style: none;
}
.apply-progress li {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: #d8d8db;
    font: 500 .72rem 'IBM Plex Mono', monospace;
    line-height: 1.35;
}
.apply-progress li::after {
    content: "";
    flex: 1;
    height: 1px;
    margin-left: .2rem;
    background: rgba(255, 255, 255, .2);
}
.apply-progress li:last-child::after { display: none; }
.apply-progress span,
.apply-step legend > span {
    display: inline-grid;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    place-items: center;
    border: 1px solid rgba(195, 221, 138, .55);
    border-radius: 50%;
    color: #d7ef9f;
    font: 600 .72rem 'IBM Plex Mono', monospace;
}
.apply-required-note {
    margin: 0 0 2rem !important;
    color: #b9b9bd !important;
    font-size: .78rem;
}
.apply-required-note span { color: #ffb4ab; }

.apply-step {
    min-width: 0;
    margin: 0;
    padding: 0 0 2rem;
    border: 0;
}
.apply-step + .apply-step {
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
}
.apply-step legend {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .08rem .75rem;
    width: 100%;
    margin: 0 0 1.35rem;
    padding: 0;
    color: #fff;
}
.apply-step legend > span { grid-row: 1 / 3; }
.apply-step legend b {
    font: 600 1rem 'Space Grotesk', Inter, sans-serif;
    letter-spacing: -.01em;
}
.apply-step legend small { color: #b9b9bd; font-size: .78rem; }

.apply-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}

.apply-field { display: flex; flex-direction: column; min-width: 0; }
/* A paragraph answer gets the full width; at 240px it is a slot, not a box. */
.apply-field--wide { grid-column: 1 / -1; }

.apply-field label {
    margin-bottom: .45rem;
    color: #fff;
    font: 500 .78rem 'IBM Plex Mono', monospace;
    letter-spacing: .04em;
}

.apply-req { color: #ffb4ab; }
.apply-optional { color: #a9a9ae; font-weight: 400; }

.apply-field input,
.apply-field select,
.apply-field textarea {
    width: 100%;
    padding: .75rem .9rem;
    /* Tokens, not literals, even though this whole section sits on a slab
       that is dark in both schemes. The field is the exception: a white input
       reads as paper against the slab on a white page, and as the only lit
       object in the room on a dark one -- and the quotation form on the
       contact page, which is the same form in a different colour, had already
       gone dark. In the light scheme these resolve to the values that were
       here, so nothing moves. */
    border: 1px solid var(--c-line-firm);
    border-radius: 8px;
    background: var(--c-surface);
    color: var(--c-ink);
    font-family: Inter, Arial, sans-serif;
    font-size: .95rem;
}
.apply-field textarea { resize: vertical; min-height: 6.5rem; }
.apply-field select { appearance: none; padding-right: 2.4rem;
    /* The arrow is a data: URI so the page still has nothing to fetch. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236e6e73' stroke-width='1.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .95rem center;
    background-size: .7rem;
}

.apply-field input:focus,
.apply-field select:focus,
.apply-field textarea:focus {
    outline: 2px solid #a7c46a;
    outline-offset: 2px;
    border-color: #a7c46a;
}

.apply-hint { margin-top: .4rem; color: #b9b9bd; font-size: .78rem; line-height: 1.5; }
.apply-error:empty { display: none; }
.apply-error { display: block; margin-top: .4rem; color: #ffb4ab; font-size: .78rem; line-height: 1.5; }
.apply-field.is-invalid input,
.apply-field.is-invalid select,
.apply-field.is-invalid textarea {
    border-color: #ffb4ab;
    box-shadow: 0 0 0 3px rgba(255, 180, 171, .22);
}
.apply-field.is-invalid label { color: #ffb4ab; }

/* --- The CV ---------------------------------------------------------------
   Its own block above the consent line rather than a twelfth cell in the grid.
   It is the one thing the hiring team cannot work without, and a file input
   sitting among ten text boxes is the one people scroll past. */
.apply-cv {
    margin-top: 1.5rem;
    padding: 1.25rem;
    border: 1px dashed rgba(255, 255, 255, .28);
    border-radius: 10px;
}
.apply-cv .apply-field label { font-size: .82rem; }
.apply-cv input[type="file"] {
    padding: .6rem;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    font-size: .88rem;
}
/* The button inside the control is a shadow-DOM part in every engine that has
   one; without this it renders as a grey system button on a dark panel. */
.apply-cv input[type="file"]::file-selector-button {
    margin-right: .9rem;
    padding: .5rem 1rem;
    border: 0;
    border-radius: 6px;
    background: #a7c46a;
    color: #1d1d1f;
    font: 600 .74rem 'IBM Plex Mono', monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
}
.apply-cv input[type="file"]::file-selector-button:hover { background: #bcd484; }

/* Off-screen rather than hidden: display:none is the first thing a bot checks
   for, and it would also drop the field from the submitted form on some
   browsers. */
.apply-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.apply-consent {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .6rem .75rem;
    align-items: start;
    margin-top: 1.75rem;
}
.apply-consent input { width: 20px; height: 20px; margin-top: .15rem; accent-color: #a7c46a; }
.apply-consent label { color: #e8e8ea; font-size: .9rem; line-height: 1.6; }
.apply-consent .apply-error { grid-column: 1 / -1; }
.apply-consent.is-invalid label { color: #ffb4ab; }

.apply-privacy { max-width: 680px; margin: 1rem 0 0 !important; color: #b9b9bd !important; font-size: .82rem; line-height: 1.7; }
.apply-privacy a { color: #c3dd8a; }

.apply-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: 2rem; }
.apply-submit {
    padding: .95rem 2rem;
    border: 0;
    border-radius: 6px;
    background: #a7c46a;
    color: #1d1d1f;
    font: 600 .8rem 'IBM Plex Mono', monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s ease;
}
.apply-submit:hover:not(:disabled) { background: #bcd484; }
.apply-submit:disabled { opacity: .6; cursor: progress; }
.apply-alt { color: #b9b9bd; font-size: .88rem; line-height: 1.7; }
.apply-alt a { color: #c3dd8a; overflow-wrap: anywhere; }

.apply-status:empty { display: none; }
.apply-status {
    margin: 1.5rem 0 0 !important;
    padding: 1rem 1.25rem;
    border-radius: 10px;
    font-size: .95rem;
    line-height: 1.6;
}
.apply-status.is-ok { border-left: 4px solid #a7c46a; background: rgba(167, 196, 106, .14); color: #fff !important; }
.apply-status.is-error { border-left: 4px solid #ffb4ab; background: rgba(255, 180, 171, .14); color: #fff !important; }

@media (max-width: 600px) {
    .apply-form { padding: 1.25rem 1rem; }
    .apply-grid { grid-template-columns: 1fr; }
    .apply-progress { gap: .35rem; }
    .apply-progress li { display: grid; justify-items: center; text-align: center; font-size: .65rem; }
    .apply-progress li::after { display: none; }
    .apply-required-note { margin-bottom: 1.5rem !important; }
    .apply-step { padding-bottom: 1.6rem; }
    .apply-step + .apply-step { padding-top: 1.6rem; }
}

/* --- The LinkedIn nudge ---------------------------------------------------
 *
 * Shown once an application has actually been sent, never before: the point
 * of the form is the application, and a dialog that interrupts someone
 * mid-submit to ask for a follow would cost more than a follower is worth.
 *
 * Unlike the form above it, this panel is NOT dark-on-dark. It sits over the
 * dark careers section as a card in the page's own scheme -- the same
 * --c-surface / --c-ink pairing every other card on the site uses -- so it
 * reads as the site talking to you rather than as more form. That also means
 * it follows the dark scheme without a second set of colours here.
 */
.apply-ln {
    position: fixed;
    inset: 0;
    z-index: 950;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 4vw, 2rem);
    background: var(--c-scrim);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.apply-ln.is-open { display: flex; }
/* The page behind a dialog should not scroll under it, least of all on a
   phone where the panel is most of the viewport. */
body.apply-ln-locked { overflow: hidden; }

.apply-ln__card {
    position: relative;
    width: 100%;
    max-width: 25rem;
    /* A short phone in landscape is shorter than this card; let it scroll
       inside itself rather than push its buttons off the screen. */
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    border-radius: 20px;
    background: var(--c-surface);
    color: var(--c-ink);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
    text-align: center;
    animation: apply-ln-rise .28s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes apply-ln-rise {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .apply-ln__card { animation: none; }
}

/* The green band and the mark over it stand in for the header of the
   LinkedIn page itself, which is what makes the card recognisable as "our
   page" before the heading is read. */
.apply-ln__banner {
    height: 5rem;
    background: linear-gradient(135deg, var(--c-accent-deep), var(--c-accent));
}
.apply-ln__mark {
    position: relative;
    width: 5rem;
    height: 5rem;
    margin: -2.75rem auto 0;
    border: 3px solid var(--c-surface);
    border-radius: 18px;
    /* White in both schemes, like every other logo plate on this site: the
       mark is dark artwork on white and a dark plate puts a hole in it. */
    background: var(--c-plate);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
}
.apply-ln__mark img {
    display: block;
    width: 100%;
    height: 100%;
    /* The mark is a wide badge inside a square plate, the way LinkedIn shows
       a landscape logo; enough padding to keep it off the corners, no more,
       or the artwork ends up too small to read. */
    padding: .3rem;
    object-fit: contain;
    border-radius: 15px;
}
.apply-ln__badge {
    position: absolute;
    right: -.4rem;
    bottom: -.4rem;
    display: grid;
    width: 1.85rem;
    height: 1.85rem;
    place-items: center;
    border: 2px solid var(--c-surface);
    border-radius: 50%;
    /* The accent, not LinkedIn blue: a blue disc is the one thing on this
       card that would not belong to the site. */
    background: var(--c-accent-fill);
    color: var(--c-on-accent);
}
.apply-ln__badge svg { width: .95rem; height: .95rem; }

.apply-ln__body { padding: 1rem clamp(1.25rem, 5vw, 1.75rem) clamp(1.25rem, 4vw, 1.6rem); }
.apply-ln__name {
    margin: .7rem 0 0;
    font-family: 'Space Grotesk', Arial, sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--c-ink);
}
.apply-ln__meta {
    margin: .3rem 0 0;
    color: var(--c-sub);
    font: 500 .72rem 'IBM Plex Mono', monospace;
}
.apply-ln__text {
    margin: 1rem 0 0;
    color: var(--c-sub);
    font-size: .95rem;
    line-height: 1.7;
}
/* One action, so this is a single full-width button rather than a stack. */
.apply-ln__actions { display: grid; margin-top: 1.4rem; }
.apply-ln__follow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.1rem;
    border-radius: 12px;
    background: var(--c-accent-fill);
    color: var(--c-on-accent);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s ease;
}
.apply-ln__follow:hover { background: var(--c-accent-fill-hover); }
.apply-ln__follow svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }

.apply-ln__close {
    position: absolute;
    top: .6rem;
    right: .6rem;
    display: grid;
    /* 40px: the dismiss control is the one a thumb reaches for first. */
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    /* The card's own colours rather than a wash over the banner: the banner
       is dark green in the light scheme and light green in the dark one, so
       any single glyph colour fails the contrast check in one of them. As a
       solid disc it also matches the ring around the mark below it. */
    background: var(--c-surface);
    color: var(--c-ink);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease;
}
.apply-ln__close:hover { background: var(--c-surface-2); color: var(--c-accent); }

.apply-ln :focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

@media (max-width: 420px) {
    .apply-ln__banner { height: 4.25rem; }
    .apply-ln__text { font-size: .92rem; }
}