/* ==========================================================================
   Careers apply — /careers/j/{token}/apply and .../applied
   Loaded alongside careers.css, which already styles .job-back and
   .job-powered; only what is specific to the two apply screens lives here.
   Tokens come from ep-tokens.css. No raw hex.
   ========================================================================== */

/* Same top padding as .job-page: the navbar is fixed, so every careers screen
   has to clear it by the same amount or the pages jump against each other. */
.ca-page { padding: 130px 0 72px; }

.ca-container { max-width: 1060px; }

/* Form and summary sit side by side once there is room for the summary to be
   read without squeezing the fields. Below that the summary is dropped
   entirely — see the note in Apply.cshtml. */
.ca-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }

.ca-main h1 {
    font-size: clamp(1.7rem, 3.4vw, 2.35rem);
    font-weight: 800;
    color: var(--ep-ink);
    letter-spacing: -0.03em;
    line-height: 1.12;
    margin: 0 0 10px;
    text-wrap: balance;
}

.ca-lede {
    font-size: 1.02rem;
    line-height: 1.65;
    color: var(--ep-text-muted);
    max-width: 54ch;
    margin: 0 0 30px;
}

.ca-tabular { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- fields --- */
.ca-form { display: grid; grid-template-columns: 1fr; gap: 22px; }

.ca-row { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

.ca-divider { height: 1px; background: var(--ep-line-3); margin: 2px 0; }

/* The label rides the top border of the input, so it stays legible while the
   field is filled. It needs the page background behind it to cut the border,
   which is why it is a solid surface colour rather than transparent. */
.ca-field { position: relative; display: block; }

.ca-label {
    position: absolute;
    top: -8px;
    left: 11px;
    z-index: 1;
    padding: 0 6px;
    background: var(--ep-surface);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ep-text-muted);
}

.ca-label-static {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ep-text-muted);
}

.ca-field input,
.ca-field select,
.ca-field textarea {
    width: 100%;
    height: 50px;
    padding: 0 13px;
    background: var(--ep-surface);
    border: 1px solid var(--ep-line);
    border-radius: var(--ep-radius-sm);
    font-family: var(--ep-mkt-font);
    font-size: 0.98rem;
    color: var(--ep-ink);
    outline: none;
    transition: border-color var(--ep-motion-fast), box-shadow var(--ep-motion-fast);
}

/* The comment box is the only field that grows. `height: auto` undoes the
   50px line above; the vertical padding has to come back with it, since the
   shared rule centres a single line with padding it does not set. */
.ca-field textarea {
    height: auto;
    min-height: 116px;
    padding: 14px 13px;
    line-height: 1.6;
    resize: vertical;
}

.ca-field textarea::placeholder {
    color: var(--ep-text-subtle);
}

.ca-field input:focus,
.ca-field select:focus,
.ca-field textarea:focus {
    border-color: var(--ep-brand-cyan-dark);
    box-shadow: 0 0 0 3px rgba(47, 184, 204, 0.16);
}

.ca-field.is-error input,
.ca-field.is-error select,
.ca-field.is-error textarea {
    border-color: var(--ep-danger);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.10);
}

.ca-field.is-error .ca-label { color: var(--ep-danger); }

.ca-error {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 0.8rem;
    color: var(--ep-danger);
}

.ca-error.is-hidden { display: none; }

.ca-form-error {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 24px;
    background: var(--ep-danger-soft-bg);
    border: 1px solid var(--ep-danger);
    border-radius: var(--ep-radius-md);
    font-size: 0.92rem;
    color: var(--ep-danger-soft-fg);
}

.ca-form-error i { margin-top: 2px; }

/* ------------------------------------------------------------------ cv --- */
/* The file input covers the whole panel so the panel is the click target
   without any script — careers-apply.js only changes what is shown after. */
.ca-drop {
    position: relative;
    display: block;
    padding: 26px 18px;
    text-align: center;
    background: var(--ep-surface-2);
    border: 1.5px dashed var(--ep-line);
    border-radius: var(--ep-radius-md);
    cursor: pointer;
    transition: border-color var(--ep-motion-fast), background var(--ep-motion-fast);
}

.ca-drop input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.ca-drop.is-error { border-color: var(--ep-danger); }

@media (hover: hover) {
    .ca-drop:hover { border-color: var(--ep-brand-cyan); background: var(--ep-surface); }
}

/* .is-over is set by the dragover handler so a dragged file gets the same
   affordance a hover does on a device that has no hover. */
.ca-drop.is-over { border-color: var(--ep-brand-cyan-dark); background: var(--ep-surface); }

.ca-drop-inner { display: flex; flex-direction: column; align-items: center; gap: 5px; }

.ca-drop-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 7px;
    border-radius: var(--ep-radius-md);
    background: var(--ep-mkt-grad-cyan);
    color: #fff;
    font-size: 1.15rem;
}

.ca-drop-title { font-size: 0.95rem; font-weight: 700; color: var(--ep-ink); }
.ca-drop-hint { font-size: 0.8rem; color: var(--ep-text-subtle); }

/* careers-apply.js toggles these two with the `hidden` attribute. A class
   selector out-specifies the UA's `[hidden] { display: none }`, so without
   this the picker and the file card would both stay on screen. */
.ca-drop[hidden],
.ca-file[hidden],
.ca-files[hidden] { display: none; }

/* The other documents: one .ca-file card per chosen file, above the dropzone
   that adds more. */
.ca-files {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ca-file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    background: var(--ep-surface);
    border: 1px solid var(--ep-line);
    border-radius: var(--ep-radius-md);
}

.ca-file-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: var(--ep-radius-sm);
    background: var(--ep-success-soft-bg);
    color: var(--ep-success-soft-fg);
    font-size: 1.05rem;
}

.ca-file-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }

.ca-file-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--ep-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ca-file-size { font-size: 0.78rem; color: var(--ep-text-subtle); }

.ca-file-remove {
    flex: none;
    width: 34px;
    height: 34px;
    background: var(--ep-surface);
    border: 1px solid var(--ep-line);
    border-radius: var(--ep-radius-sm);
    color: var(--ep-text-subtle);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background var(--ep-motion-fast), color var(--ep-motion-fast), border-color var(--ep-motion-fast);
}

.ca-file-remove:hover {
    background: var(--ep-danger-soft-bg);
    border-color: var(--ep-danger);
    color: var(--ep-danger);
}

/* ------------------------------------------------------------- consent --- */
.ca-consent { display: flex; gap: 11px; align-items: flex-start; cursor: pointer; }

.ca-consent input {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--ep-brand-cyan-dark);
    cursor: pointer;
}

.ca-consent span { font-size: 0.82rem; line-height: 1.6; color: var(--ep-text-muted); }
.ca-consent a { color: var(--ep-brand-cyan-dark); font-weight: 600; }

.ca-submit { width: 100%; }

/* --------------------------------------------------------- summary card --- */
/* Dropped on narrow screens: it repeats the post the visitor just came from,
   and keeping it would push the form itself below the fold. */
.ca-aside { display: none; }

/* The confirmation's tracker is not a repeat of anything — it is the only
   place the next steps are set out, so it stays at every width. */
.ca-aside-wide { display: block; }

.ca-summary {
    overflow: hidden;
    background: var(--ep-surface);
    border: 1px solid var(--ep-line);
    border-radius: var(--ep-radius-xl);
    box-shadow: var(--ep-shadow-card);
}

.ca-summary-bar { height: 3px; background: var(--ep-mkt-grad-cyan); }

.ca-summary-body { padding: 22px; }

.ca-summary-title { font-size: 1rem; font-weight: 700; color: var(--ep-ink); margin: 0 0 4px; }
.ca-summary-employer { font-size: 0.85rem; color: var(--ep-text-subtle); margin: 0 0 18px; }

.ca-summary-facts {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--ep-line-3);
}

.ca-summary-facts > div { display: flex; justify-content: space-between; gap: 12px; font-size: 0.85rem; }
.ca-summary-facts dt { color: var(--ep-text-subtle); }
.ca-summary-facts dd { margin: 0; color: var(--ep-ink); font-weight: 700; text-align: right; }

/* Closes the summary card. It used to sit under a submit button, centred to
   match it; with the button gone it reads as prose and aligns with the card. */
.ca-summary-note {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--ep-text-subtle);
}

/* ---------------------------------------------------------- confirmation --- */
.ca-done-badge {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin-bottom: 22px;
    border-radius: var(--ep-radius-xl);
    background: var(--ep-mkt-grad-cyan);
    color: #fff;
    font-size: 1.6rem;
    box-shadow: var(--ep-shadow-lg);
}

.ca-ref {
    padding: 18px 20px;
    margin-bottom: 24px;
    background: var(--ep-surface-2);
    border: 1px solid var(--ep-line);
    border-radius: var(--ep-radius-md);
    max-width: 460px;
}

.ca-ref-label {
    margin: 0 0 8px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ep-text-subtle);
}

.ca-ref-row { display: flex; align-items: center; gap: 14px; }

.ca-ref-code {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--ep-ink);
}

.ca-ref-copy {
    margin-left: auto;
    height: 36px;
    padding: 0 14px;
    background: var(--ep-surface);
    border: 1px solid var(--ep-line);
    border-radius: var(--ep-radius-sm);
    font-family: var(--ep-mkt-font);
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ep-text-muted);
    cursor: pointer;
    transition: background var(--ep-motion-fast), color var(--ep-motion-fast), border-color var(--ep-motion-fast);
}

.ca-ref-copy:hover { background: var(--ep-line-3); color: var(--ep-ink); }

.ca-ref-copy.is-done {
    background: var(--ep-success-soft-bg);
    border-color: var(--ep-success);
    color: var(--ep-success-soft-fg);
}

.ca-ref-note { margin: 9px 0 0; font-size: 0.78rem; line-height: 1.6; color: var(--ep-text-subtle); }

.ca-done-tail { font-size: 0.92rem; line-height: 1.7; color: var(--ep-text-muted); max-width: 54ch; margin: 0 0 18px; }

.ca-done-back { display: inline-flex; }

/* ------------------------------------------------------------- tracker --- */
.ca-track { list-style: none; margin: 0; padding: 0; }

.ca-track li {
    position: relative;
    display: flex;
    gap: 14px;
    padding-bottom: 22px;
}

/* The connecting line is drawn from the marker down to the next item, so the
   last step must not draw one — it would run off the end of the list. */
.ca-track li::before {
    content: "";
    position: absolute;
    top: 20px;
    bottom: 4px;
    left: 6px;
    width: 2px;
    background: var(--ep-line);
}

.ca-track li.is-done::before { background: var(--ep-success); }
.ca-track li.is-last::before { display: none; }
.ca-track li.is-last { padding-bottom: 0; }

.ca-track-mark {
    position: relative;
    z-index: 1;
    flex: none;
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    margin-top: 3px;
    border-radius: var(--ep-radius-xs);
    background: var(--ep-line);
    color: transparent;
    font-size: 0.5rem;
}

.ca-track li.is-done .ca-track-mark { background: var(--ep-success); color: #fff; }

.ca-track li.is-current .ca-track-mark {
    background: var(--ep-mkt-grad-cyan);
    box-shadow: 0 0 0 4px rgba(47, 184, 204, 0.18);
}

.ca-track-text { display: flex; flex-direction: column; gap: 3px; }
.ca-track-title { font-size: 0.92rem; font-weight: 700; color: var(--ep-text-subtle); }

.ca-track li.is-done .ca-track-title,
.ca-track li.is-current .ca-track-title { color: var(--ep-ink); }

.ca-track-meta { font-size: 0.78rem; color: var(--ep-text-subtle); }

/* --------------------------------------------------------------- wide --- */
@media (min-width: 900px) {
    .ca-grid { grid-template-columns: 1fr 340px; gap: 48px; align-items: start; }

    .ca-form { grid-template-columns: 1fr 1fr; }
    .ca-span2 { grid-column: span 2; }

    .ca-aside { display: block; position: sticky; top: 100px; }
    .ca-submit { width: auto; }
}

@media (max-width: 576px) {
    .ca-page { padding: 110px 0 56px; }
}