/* ============================================================
   HireXA - Public resume upload (talent network)

   Layered on top of job_apply.css, which supplies the shared candidate-facing
   design language (glass cards, ja-* components, tokens). Everything here is
   either specific to this page or an addition job_apply.css does not define.

   Two departures from job_apply:
     1. No fixed brand rail and no breadcrumb bar. A single centered column with
        the wordmark on top, because most candidates arrive on a phone.
     2. The whole flow is sized to one viewport. Spacing, the stat strip and the
        card paddings are all tuned so nothing needs scrolling to reach Submit.
        Scrolling is left available as a safety valve for very short viewports
        (landscape phones, tiny laptops) rather than clipped away.
   ============================================================ */

html, body {
    overflow-x: hidden;                     /* nothing may cause a sideways scroll */
    -webkit-text-size-adjust: 100%;         /* stop iOS inflating text in landscape */
}
body { -webkit-tap-highlight-color: transparent; }

/* ---------- Page shell (replaces .ja-shell) ---------- */
.ru-page {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    padding: 22px 24px 18px;
    min-height: 100vh;
    min-height: 100dvh;                     /* dvh tracks mobile browser chrome */
    display: flex;
    flex-direction: column;
}

/* ---------- Centered brand ---------- */
.ru-brand {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
}
.ru-brand img {
    height: 58px;
    width: auto;
    max-width: 72vw;
    object-fit: contain;
}

/* Takes the leftover height and centers the flow inside it, so a short page
   sits balanced in the viewport instead of hugging the logo. */
.ja-main {
    margin-top: 16px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ja-wrap { gap: 14px; }

/* ---------- Hero ---------- */
.ja-hero { padding: 18px 20px; gap: 14px; }
.ja-hero-head { align-items: center; }
.ja-hero-title { gap: 6px; }
.ja-hero-title h1 { font-size: 26px; }
.ja-hero-loc { align-items: flex-start; line-height: 1.45; font-size: 13px; }
.ja-hero-loc svg { flex: 0 0 auto; margin-top: 2px; }

/* ---------- Compact stat strip ----------
   job_apply.css sizes these for a job description page (92px tall, 18px
   padding, 16px gap). Here they are supporting detail, not the headline. */
.ja-stats { gap: 10px; }
.ja-stat {
    gap: 2px;
    padding: 9px 10px;
    min-height: 0;
    border-radius: 10px;
}
.ja-stat-label { font-size: 11px; line-height: 1.3; }
.ja-stat-value { font-size: 13px; line-height: 1.3; }

/* ---------- Cards ---------- */
.ja-card { padding: 16px 20px; gap: 12px; }
.ja-card-head { gap: 2px; }
.ja-card-head h2 { font-size: 18px; }
.ja-card-head p { font-size: 12px; line-height: 1.45; }

/* ---------- Drag-and-drop feedback (not in job_apply.css) ---------- */
.ja-upload-zone {
    outline: none;
    padding: 26px 20px;
    gap: 6px;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}
.ja-upload-zone:focus-visible {
    border-color: var(--blue-2);
    box-shadow: 0 0 0 3px rgba(11, 144, 243, 0.18);
}
.ja-upload-zone.dragover {
    border-color: var(--blue);
    border-style: solid;
    background: rgba(11, 144, 243, 0.08);
}
.ja-upload-zone.dragover .ja-upload-text { color: var(--blue); }
.ja-upload-zone.is-busy { pointer-events: none; opacity: .65; }
.ja-upload-zone:active { background: rgba(11, 144, 243, 0.06); }
.ja-upload-icon { width: 42px; height: 42px; }

/* ---------- Selected-file row ---------- */
.ja-upload-file { flex-wrap: wrap; padding: 10px 14px; }
.ru-file-tick { flex: 0 0 auto; }
.ru-filesize {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-3);
}
.ja-remove {
    flex: 0 0 auto;
    padding: 6px 4px;
    min-height: 32px;
    touch-action: manipulation;
}

/* ---------- Helper note under the upload card ---------- */
.ru-notes {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 0;
}
.ru-notes li {
    position: relative;
    padding-left: 16px;
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--ink-3);
}
.ru-notes li::before {
    content: "";
    position: absolute;
    left: 3px; top: 6px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--ink-4);
}

/* ---------- Footer ---------- */
.ja-footer { padding: 14px 20px; }
.ru-footer-note {
    font-size: 12px;
    color: var(--ink-3);
    max-width: 44ch;
}
.ja-btn-continue { touch-action: manipulation; }
.ja-btn-continue:disabled { opacity: .45; }
.ja-disclaimer { font-size: 11px; margin-top: 2px; }

/* ---------- Sending state ---------- */
.ja-state { min-height: 0; padding: 12px 4px; gap: 10px; }

/* ---------- Thank you ---------- */
.ru-thanks-note {
    font-size: 12.5px;
    color: var(--ink-3);
    margin-top: 2px;
}

/* ============================================================
   Mobile. Most candidates upload from a phone, so this is the
   primary layout rather than an afterthought.
   ============================================================ */
@media (max-width: 700px) {
    .ru-page { padding: 16px 14px calc(14px + env(safe-area-inset-bottom)); }
    .ru-brand img { height: 44px; }
    .ja-main { margin-top: 12px; }

    .ja-wrap { gap: 10px; }
    .ja-hero { padding: 15px 16px; gap: 11px; }
    .ja-card { padding: 14px 16px; gap: 10px; }

    /* Title above the pitch, left-aligned. */
    .ja-hero-head { flex-direction: column; align-items: flex-start; gap: 8px; }
    .ja-hero-title h1 { font-size: 22px; }
    .ja-hero-loc { font-size: 12.5px; }

    /* 4 short stats as a 2x2 grid. job_apply.css drops to 1 column at 480px,
       which strands a lot of vertical space on a phone. */
    .ja-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
    .ja-stat { padding: 8px 8px; }
    .ja-stat-label { font-size: 10.5px; }
    .ja-stat-value { font-size: 12.5px; }

    .ja-card-head h2 { font-size: 17px; }
    .ja-upload-zone { padding: 20px 14px; }
    .ja-upload-text { font-size: 14px; }
    .ja-upload-icon { width: 38px; height: 38px; }
    .ru-notes li { font-size: 10.5px; }

    /* Submit goes full width and the desktop-only reassurance line is dropped,
       so the action bar stays one compact row. */
    .ja-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 11px 14px;
    }
    .ru-footer-note { display: none; }
    .ja-btn-continue {
        width: 100%;
        justify-content: center;
        padding: 14px 20px;
        font-size: 15px;
    }
    .ja-disclaimer { font-size: 10.5px; padding: 0 4px; }

    /* States */
    .ja-state h2 { font-size: 20px; }
    .ja-state p { font-size: 13.5px; }

    .toast {
        left: 14px; right: 14px;
        bottom: calc(16px + env(safe-area-inset-bottom));
        transform: none;
        max-width: none;
        text-align: center;
    }
}

/* Narrow phones (360px class). Copy wraps onto more lines here than on a 375px
   iPhone, which costs about 30px, so the optional note goes and spacing tightens. */
@media (max-width: 370px) {
    .ru-page { padding: 14px 12px calc(12px + env(safe-area-inset-bottom)); }
    .ru-brand img { height: 38px; }
    .ja-main { margin-top: 9px; }
    .ja-wrap { gap: 9px; }
    .ja-hero { padding: 13px 14px; gap: 10px; }
    .ja-hero-title h1 { font-size: 20px; }
    .ja-card { padding: 12px 14px; gap: 9px; }
    .ja-upload-zone { padding: 17px 12px; }
    .ja-stat { padding: 7px 6px; }
    .ru-notes { display: none; }
}

/* Short viewports (small laptops). Scoped to >700px wide so it cannot override
   and undo the tighter phone values above, which would cost more than it saves. */
@media (max-height: 680px) and (min-width: 701px) {
    .ru-brand img { height: 42px; }
    .ja-main { margin-top: 10px; }
    .ja-wrap { gap: 10px; }
    .ja-hero { padding: 14px 18px; gap: 10px; }
    .ja-hero-title h1 { font-size: 21px; }
    .ja-card { padding: 13px 18px; gap: 10px; }
    .ja-upload-zone { padding: 18px 14px; }
    .ru-notes, .ja-disclaimer { display: none; }
    .ja-stat { padding: 7px 8px; }
}

/* Short phones (iPhone SE, 360x640 Android). The helper note goes, but the
   consent line stays: it is the one piece of copy that has to be on screen. */
@media (max-width: 700px) and (max-height: 700px) {
    .ru-notes { display: none; }
    .ru-page { padding: 12px 12px calc(10px + env(safe-area-inset-bottom)); }
    .ru-brand img { height: 38px; }
    .ja-main { margin-top: 8px; }
    .ja-wrap { gap: 9px; }
    .ja-hero { padding: 12px 14px; gap: 9px; }
    .ja-hero-title h1 { font-size: 21px; }
    .ja-card { padding: 12px 14px; gap: 9px; }
    .ja-upload-zone { padding: 16px 12px; }
    .ja-upload-icon { width: 34px; height: 34px; }
    .ja-stat { padding: 7px 7px; }
    .ja-disclaimer { font-size: 10px; }
}

/* Smallest phones still in real use (360x640). Last thing to go is the card's
   descriptive subtitle, which is nice-to-have; the consent line is not. */
@media (max-width: 700px) and (max-height: 650px) {
    .ja-card-head p { display: none; }
    .ja-upload-zone { padding: 14px 12px; }
    .ja-hero-title h1 { font-size: 20px; }
    /* Headroom so the larger wordmark cannot tip this into scrolling on a
       device whose font metrics differ slightly from the test render. */
    .ja-main { margin-top: 6px; }
    .ja-wrap { gap: 8px; }
    .ja-hero { padding: 11px 14px; gap: 8px; }
    .ja-stat { padding: 6px; }
}

/* Landscape phones: wide but very short. Stacking cannot fit 390px of height,
   so the flow goes two-up, hero beside the upload card. */
@media (max-height: 560px) and (min-width: 680px) {
    .ru-page { padding: 12px 18px calc(10px + env(safe-area-inset-bottom)); }
    .ru-brand img { height: 36px; }
    .ja-main { margin-top: 10px; justify-content: flex-start; }

    .ja-wrap {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        grid-template-areas:
            "hero card"
            "hero footer";
        grid-template-rows: auto auto;
        gap: 10px 14px;
        align-content: start;
    }
    .ja-hero   { grid-area: hero; align-self: stretch; }
    .ja-card   { grid-area: card; }
    .ja-footer { grid-area: footer; }

    .ja-hero-head { gap: 8px; }
    .ja-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .ru-footer-note { display: none; }
    .ja-footer { justify-content: flex-end; padding: 10px 16px; }

    /* States keep the single centered column, but shed vertical bulk */
    .ja-state { padding: 6px 4px; gap: 8px; }
    .ja-state h2 { font-size: 19px; }
    .ja-state p { font-size: 13px; }

    .success-icon svg { width: 24px; height: 24px; }
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px 24px;
        padding: 12px 18px;
    }
}

/* Respect reduced-motion for the spinner and step dots */
@media (prefers-reduced-motion: reduce) {
    .spinner { animation-duration: 2.4s; }
}