/* ============================================================
   Virtual Coworker — Candidate Application Styles
   Brand: Navy #1B2B5E | Cyan #00C6D7 | Gold #F5A623
   ============================================================ */

/* ---------- Reset & Base ---------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* Palette sampled from the Virtual Coworker careers page:
       navy actions (#254B76) + teal hero/accents (#6DD3DC). */
    --navy:        #21456B;   /* headings, dark surfaces */
    --navy-dark:   #16324F;   /* deepest navy */
    --primary:     #254B76;   /* primary actions (careers navy button) */
    --primary-dark:#1B3A5C;   /* primary hover */
    --teal:        #6DD3DC;   /* hero teal */
    --teal-soft:   #A4E1E6;   /* light teal */
    --cyan:        #3FB6C9;   /* accent for links / borders / underlines */
    --cyan-light:  #E4F7FA;   /* chip / pill background */
    --gold:        #6DD3DC;   /* repurposed: avatars now teal, not gold */
    --gold-dark:   #3FB6C9;
    --white:       #FFFFFF;
    --bg:          #F5F8FB;   /* cool near-white app background */
    --surface:     #FFFFFF;
    --text:        #263445;   /* navy-charcoal body text */
    --text-muted:  #667789;
    --border:      #E3E9F1;
    --radius:      12px;
    --shadow:      0 4px 20px rgba(33, 69, 107, 0.08);
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ============================================================
   HEADER
   ============================================================ */

#header,
header.header {
    background: var(--navy);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    height: 70px;
    width: 100%;
}

/* Logo area */
.logo {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

.logo img {
    height: 42px;
    width: auto;
    object-fit: contain;
}

.logo h2 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--white);
    line-height: 1.2;
    letter-spacing: -0.3px;
}

.logo span {
    display: block;
    font-size: 0.72rem;
    color: var(--cyan);
    font-weight: 500;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

/* Nav links */
nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

nav a {
    color: rgba(255,255,255,0.78);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}

nav a:hover {
    color: var(--white);
    background: rgba(255,255,255,0.1);
}

nav a:last-child {
    background: var(--gold);
    color: var(--navy-dark);
    font-weight: 700;
    padding: 8px 18px;
}

nav a:last-child:hover {
    background: var(--gold-dark);
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
    background: linear-gradient(120deg, #34A6BC 0%, #4CC0D2 52%, #6DD3DC 100%);
    color: var(--white);
    padding: 72px 24px 60px;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    top: -80px;
    right: -80px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, transparent 70%);
    pointer-events: none;
}

.hero::after {
    content: "";
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(37,75,118,0.12) 0%, transparent 70%);
    pointer-events: none;
}

.hero-content {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.hero-content h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.15;
    margin-bottom: 16px;
    color: var(--white);
    text-shadow: 0 2px 14px rgba(22,50,79,0.28);
}

.hero-content h1 span {
    color: var(--navy-dark);
}

.hero-content p {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.95);
    max-width: 540px;
    margin: 0 auto;
    line-height: 1.7;
    text-shadow: 0 1px 8px rgba(22,50,79,0.22);
}

/* ============================================================
   FORM SECTION
   ============================================================ */

main {
    flex: 1;
}

.form-section {
    padding: 52px 24px 80px;
}

/* ---------- Card ---------- */
.card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    max-width: 880px;
    margin: 0 auto;
    overflow: hidden;
}

.card-header {
    background: linear-gradient(90deg, var(--navy) 0%, #1E3A8A 100%);
    padding: 28px 40px;
    border-bottom: 3px solid var(--cyan);
}

.card-header h2 {
    color: var(--white);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.card-header p {
    color: rgba(255,255,255,0.65);
    font-size: 0.9rem;
}

/* ---------- Form ---------- */
form {
    padding: 40px;
}

/* ---------- Grid ---------- */
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 32px;
    margin-bottom: 36px;
}

/* ---------- Field ---------- */
.field {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.field.full {
    grid-column: 1 / -1;
}

.field label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--navy);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.field input {
    height: 48px;
    padding: 0 16px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--text);
    background: #FAFBFF;
    transition: border-color 0.18s, box-shadow 0.18s;
    outline: none;
    font-family: inherit;
    width: 100%;
}

.field input::placeholder {
    color: #B0BBCC;
}

.field input:hover {
    border-color: #A0AEC8;
}

.field input:focus {
    border-color: var(--cyan);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(0,198,215,0.15);
}

/* ---------- Submit Button ---------- */
#submitBtn {
    display: block;
    width: 100%;
    padding: 16px 0;
    background: var(--gold);
    color: var(--navy-dark);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.18s, transform 0.15s, box-shadow 0.18s;
    font-family: inherit;
}

#submitBtn:hover:not(:disabled) {
    background: var(--gold-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245,166,35,0.35);
}

#submitBtn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
}

#submitBtn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ============================================================
   FOOTER
   ============================================================ */

#footer,
footer.footer {
    background: var(--navy-dark);
    color: rgba(255,255,255,0.75);
}

.footer {
    padding: 56px 32px 0;
}

.footer-container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
}

.footer-about h2 {
    color: var(--white);
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: 12px;
    letter-spacing: -0.2px;
}

.footer-about p {
    font-size: 0.88rem;
    line-height: 1.7;
    color: rgba(255,255,255,0.60);
    max-width: 280px;
}

.footer-office h3,
.footer-contact h3 {
    color: var(--cyan);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.footer-office p,
.footer-contact p {
    font-size: 0.87rem;
    line-height: 1.8;
    color: rgba(255,255,255,0.65);
}

.social {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.social a {
    color: var(--white);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 5px 12px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 20px;
    transition: background 0.15s, border-color 0.15s;
}

.social a:hover {
    background: var(--cyan);
    border-color: var(--cyan);
    color: var(--navy-dark);
}

.copyright {
    text-align: center;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.35);
    padding: 20px 0;
    max-width: 1200px;
    margin: 0 auto;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
    .footer-container {
        grid-template-columns: 1fr 1fr;
    }
    .footer-about {
        grid-column: 1 / -1;
    }
    .footer-about p {
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .header {
        padding: 0 20px;
        height: 62px;
    }

    .logo h2 {
        font-size: 1rem;
    }

    .grid {
        grid-template-columns: 1fr;
    }

    .field.full {
        grid-column: 1;
    }

    form {
        padding: 24px 20px;
    }

    .card-header {
        padding: 22px 20px;
    }

    .hero {
        padding: 48px 16px 40px;
    }

    .footer-container {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer {
        padding: 40px 20px 0;
    }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
}
/* ============================================================
   ============  PORTAL EXTENSION STYLES (added)  ============
   Builds on the existing Navy / Cyan / Gold design tokens.
   ============================================================ */

.view-container { flex: 1; }

/* ---------- Navigation (4-tab) — overrides legacy nav rules ---------- */
header.header nav { gap: 4px; }

header.header nav a.nav-link {
    display: inline-flex;
    align-items: center;
    color: rgba(255,255,255,0.80);
    background: transparent;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 6px;
}

header.header nav a.nav-link:hover {
    color: var(--white);
    background: rgba(255,255,255,0.10);
}

header.header nav a.nav-link.active {
    color: var(--navy-dark);
    background: var(--gold);
    font-weight: 700;
}

/* Hamburger (hidden on desktop) */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}
.nav-toggle span {
    width: 24px; height: 2px;
    background: var(--white);
    border-radius: 2px;
    transition: 0.2s;
}

/* ---------- Generic primary button ---------- */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    background: var(--gold);
    color: var(--navy-dark);
    font-size: 0.98rem;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.18s, transform 0.15s, box-shadow 0.18s;
}
.btn-primary:hover:not(:disabled) {
    background: var(--gold-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245,166,35,0.32);
}
.btn-primary:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.btn-primary:disabled { opacity: 0.7; cursor: not-allowed; }

.btn-spinner {
    width: 15px; height: 15px;
    border: 2px solid rgba(27,43,94,0.35);
    border-top-color: var(--navy-dark);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

/* ---------- Board / section headings ---------- */
.board { max-width: 1160px; margin: 0 auto; padding: 40px 24px 72px; }
.board-head { margin-bottom: 26px; }
.board-head h2 { font-size: 1.6rem; font-weight: 800; color: var(--navy); letter-spacing: -0.4px; }
.muted { color: var(--text-muted); font-size: 0.92rem; margin-top: 4px; }

/* ---------- Jobs grid + cards ---------- */
.jobs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 22px;
}

.job-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.job-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(27,43,94,0.16);
    border-color: var(--cyan);
}
.job-card-body { padding: 24px 24px 16px; flex: 1; }
.job-title { font-size: 1.2rem; font-weight: 700; color: var(--navy); margin-bottom: 12px; line-height: 1.3; }

.job-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 14px; }
.meta-item { font-size: 0.8rem; color: var(--text-muted); font-weight: 500; }

.job-desc { font-size: 0.9rem; color: var(--text); line-height: 1.65; }

.matched-skills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.chip {
    font-size: 0.72rem; font-weight: 600;
    background: var(--cyan-light); color: #0A7C88;
    padding: 4px 10px; border-radius: 20px;
    text-transform: capitalize;
}

.job-card-foot { padding: 0 24px 24px; }
.job-card-foot .btn-apply { width: 100%; }

/* ---------- Search section (Related / Tracking) ---------- */
.search-section { max-width: 1160px; margin: 0 auto; padding: 48px 24px 0; }
.search-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border-top: 3px solid var(--cyan);
    padding: 34px 36px;
    max-width: 720px;
    margin: 0 auto;
}
.search-card h2 { font-size: 1.45rem; font-weight: 800; color: var(--navy); }
.search-bar { display: flex; gap: 12px; margin-top: 20px; }
.search-bar input {
    flex: 1;
    height: 50px; padding: 0 16px;
    border: 1.5px solid var(--border); border-radius: 8px;
    font-size: 0.96rem; font-family: inherit; background: #FAFBFF;
    outline: none; transition: border-color 0.18s, box-shadow 0.18s;
}
.search-bar input:focus {
    border-color: var(--cyan); background: var(--white);
    box-shadow: 0 0 0 3px rgba(0,198,215,0.15);
}

/* ---------- Application tracking cards ---------- */
.app-list { display: flex; flex-direction: column; gap: 16px; }
.app-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 4px solid var(--cyan);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px 26px;
}
/* Req 14: long titles wrap within their column while the status badge stays
   pinned to the top-right (no wrapping the badge to a new line). */
.app-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.app-card-top h3 { font-size: 1.12rem; font-weight: 700; color: var(--navy); flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.app-card-top .status-badge { flex: 0 0 auto; }
.app-card-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 16px; margin-top: 16px;
}
.app-card-grid > div { display: flex; flex-direction: column; gap: 3px; }
.app-label {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--text-muted);
}
.app-card-grid span:not(.app-label) { font-size: 0.92rem; color: var(--text); font-weight: 500; }

/* Stage badges */
.stage-badge {
    font-size: 0.74rem; font-weight: 700;
    padding: 5px 12px; border-radius: 20px;
    white-space: nowrap; text-transform: capitalize;
}
.stage-default     { background: #EEF1F8; color: var(--navy); }
.stage-applied     { background: #E6F0FF; color: #1E4F87; }
.stage-screening   { background: #FFF4DB; color: #9A6B00; }
.stage-shortlisted { background: #E7F6EC; color: #1E7A45; }
.stage-interview   { background: #E6F9FB; color: #0A7C88; }
.stage-offer       { background: #EDE7FB; color: #5B3FA8; }
.stage-hired       { background: #DBF5E1; color: #166534; }
.stage-rejected    { background: #FDE6E6; color: #B42323; }

/* Req 2: OPEN / CLOSED status badges — the only two statuses shown. */
.status-badge {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
    padding: 5px 14px; border-radius: 20px;
    white-space: nowrap; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 6px;
}
.status-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-open   { background: #E6F4EC; color: #1E7A45; }
.status-closed { background: #F0F1F5; color: #5B6473; }

/* ---------- Modal ---------- */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(17,29,63,0.55);
    backdrop-filter: blur(2px);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 40px 16px;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000; overflow-y: auto;
}
.modal-overlay.open { opacity: 1; visibility: visible; }

.modal {
    background: var(--white);
    border-radius: 16px;
    width: 100%; max-width: 720px;
    box-shadow: 0 24px 60px rgba(17,29,63,0.40);
    opacity: 0;
    transform: translateY(26px) scale(0.985);
    transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease;
    overflow: hidden;
}
.modal-overlay.open .modal { opacity: 1; transform: translateY(0) scale(1); }

.modal-header {
    background: linear-gradient(90deg, var(--navy) 0%, #1E3A8A 100%);
    border-bottom: 3px solid var(--cyan);
    padding: 22px 28px;
    display: flex; align-items: flex-start; justify-content: space-between;
}
.modal-header h3 { color: var(--white); font-size: 1.3rem; font-weight: 700; }
.modal-sub { color: rgba(255,255,255,0.65); font-size: 0.85rem; margin-top: 2px; }
.modal-close {
    background: none; border: none; color: rgba(255,255,255,0.8);
    font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 0 4px;
    transition: color 0.15s;
}
.modal-close:hover { color: var(--white); }

.modal-body { padding: 28px; max-height: 70vh; overflow-y: auto; }
.modal-body form { padding: 0; }
.modal-body .btn-primary { width: 100%; margin-top: 6px; }

/* ---------- Form additions (textarea, file, locked) ---------- */
.recruit-form textarea {
    padding: 12px 16px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem; font-family: inherit; color: var(--text);
    background: #FAFBFF; outline: none; resize: vertical;
    transition: border-color 0.18s, box-shadow 0.18s; width: 100%;
}
.recruit-form textarea:focus {
    border-color: var(--cyan); background: var(--white);
    box-shadow: 0 0 0 3px rgba(0,198,215,0.15);
}
.file-input {
    padding: 11px 14px !important;
    height: auto !important;
    background: #FAFBFF;
    border: 1.5px dashed var(--border) !important;
    cursor: pointer;
}
.file-input::file-selector-button {
    border: none; background: var(--navy); color: var(--white);
    padding: 7px 14px; border-radius: 6px; font-weight: 600;
    cursor: pointer; margin-right: 12px; font-family: inherit;
}
input.locked, input[readonly].locked {
    background: #EEF1F8 !important;
    color: var(--text-muted) !important;
    cursor: not-allowed;
}

/* ---------- Toasts ---------- */
.toast-root {
    position: fixed; right: 20px; bottom: 20px;
    display: flex; flex-direction: column; gap: 10px;
    z-index: 1200;
}
.toast {
    min-width: 240px; max-width: 360px;
    padding: 14px 18px; border-radius: 10px;
    color: var(--white); font-size: 0.9rem; font-weight: 500;
    box-shadow: 0 10px 30px rgba(0,0,0,0.22);
    transform: translateX(120%); opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
.toast.show { transform: translateX(0); opacity: 1; }
.toast-success { background: #1E7A45; }
.toast-error   { background: #B42323; }
.toast-info    { background: var(--navy); }

/* ---------- Loaders & states ---------- */
.page-loader {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    padding: 64px 0; color: var(--text-muted); grid-column: 1 / -1;
}
.spinner {
    width: 38px; height: 38px;
    border: 3px solid var(--border);
    border-top-color: var(--cyan);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.state-block {
    text-align: center; padding: 56px 24px; grid-column: 1 / -1;
    background: var(--white); border: 1px dashed var(--border);
    border-radius: var(--radius);
}
.state-block .state-icon { font-size: 2.4rem; margin-bottom: 10px; }
.state-block h3 { color: var(--navy); font-size: 1.2rem; margin-bottom: 6px; }
.state-block p { color: var(--text-muted); font-size: 0.92rem; max-width: 420px; margin: 0 auto; }
.state-block.error h3 { color: #B42323; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
    .nav-toggle { display: flex; }
    header.header nav {
        position: absolute; top: 100%; right: 0; left: 0;
        flex-direction: column; align-items: stretch;
        background: var(--navy-dark);
        padding: 0 16px;
        gap: 4px;
        max-height: 0; overflow: hidden;
        box-shadow: 0 12px 24px rgba(0,0,0,0.22);
        transition: max-height 0.25s ease, padding 0.25s ease;
    }
    header.header nav.open { max-height: 70vh; padding: 12px 16px; overflow-y: auto; }
    header.header nav a.nav-link { width: 100%; }
    /* the hover underline reads as a stray line inside the drawer — hide it */
    header.header nav a.nav-link::after { display: none; }
    /* greeting badge stacks cleanly above the links */
    header.header nav .nav-user { width: 100%; justify-content: flex-start; margin-bottom: 4px; }
    .app-card-grid { grid-template-columns: 1fr; }
    .search-bar { flex-direction: column; }
}

@media (max-width: 640px) {
    .board, .search-section { padding-left: 16px; padding-right: 16px; }
    .modal-body { padding: 20px; }
}

/* ============================================================
   ============  ANIMATIONS + PROFILE + CONFIRM (added)  =====
   ============================================================ */

/* ---------- View slide-in on tab change ---------- */
@keyframes viewSlideIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.view-anim { animation: viewSlideIn 0.38s cubic-bezier(0.22, 0.61, 0.36, 1); }

/* ---------- Staggered card entrance ---------- */
@keyframes cardIn {
    from { opacity: 0; transform: translateY(18px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.jobs-grid .job-card,
.app-list .app-card {
    animation: cardIn 0.45s ease backwards;
    animation-delay: calc(var(--i, 0) * 55ms);
}

/* ---------- Hover micro-interactions ---------- */
header.header nav a.nav-link { position: relative; }
header.header nav a.nav-link::after {
    content: "";
    position: absolute; left: 14px; right: 14px; bottom: 4px;
    height: 2px; background: var(--cyan);
    transform: scaleX(0); transform-origin: left;
    transition: transform 0.22s ease;
}
header.header nav a.nav-link:hover::after { transform: scaleX(1); }
header.header nav a.nav-link.active::after { transform: scaleX(0); }

.btn-apply { transition: transform 0.15s, box-shadow 0.18s, background 0.18s; }

/* ---------- Ghost button (used in confirm dialog) ---------- */
.btn-ghost {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 20px;
    background: transparent; color: var(--text);
    border: 1.5px solid var(--border); border-radius: 8px;
    font-size: 0.95rem; font-weight: 600; cursor: pointer; font-family: inherit;
    transition: border-color 0.15s, background 0.15s;
}
.btn-ghost:hover { border-color: #A0AEC8; background: #F4F6FB; }

/* ---------- Confirm dialog ---------- */
.confirm-overlay {
    position: fixed; inset: 0; z-index: 1300;
    background: rgba(17,29,63,0.55); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px; opacity: 0; visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}
.confirm-overlay.open { opacity: 1; visibility: visible; }
.confirm-box {
    background: var(--white); border-radius: 14px;
    max-width: 440px; width: 100%; padding: 30px 28px 24px;
    text-align: center; box-shadow: 0 24px 60px rgba(17,29,63,0.40);
    transform: translateY(14px) scale(0.96); transition: transform 0.22s ease;
}
.confirm-overlay.open .confirm-box { transform: translateY(0) scale(1); }
.confirm-icon {
    width: 56px; height: 56px; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    background: var(--cyan-light); border-radius: 50%; font-size: 1.6rem;
}
.confirm-box h3 { color: var(--navy); font-size: 1.25rem; font-weight: 800; margin-bottom: 8px; }
.confirm-box p { color: var(--text-muted); font-size: 0.94rem; line-height: 1.6; }
.confirm-actions { display: flex; gap: 12px; margin-top: 22px; }
.confirm-actions button { flex: 1; }

/* ---------- Current resume row (in apply modal) ---------- */
.current-resume {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 16px;
    background: var(--cyan-light); border: 1px solid #BDEFF4;
    border-radius: 8px; font-size: 0.9rem; color: var(--navy); font-weight: 600;
}
.current-resume a {
    color: #0A7C88; font-weight: 700; text-decoration: none;
    border-bottom: 1px solid currentColor;
}

/* ============================================================
   CANDIDATE PROFILE
   ============================================================ */
.profile-shell {
    max-width: 880px; margin: 0 auto;
    background: var(--white); border-radius: 16px;
    box-shadow: var(--shadow); overflow: hidden;
    animation: viewSlideIn 0.4s ease;
}

.profile-banner {
    position: relative;
    display: flex; align-items: center; gap: 22px;
    padding: 34px 36px;
    background: linear-gradient(120deg, var(--navy-dark) 0%, var(--navy) 55%, #1E4080 100%);
    border-bottom: 3px solid var(--cyan);
}
.profile-avatar {
    flex-shrink: 0;
    width: 78px; height: 78px; border-radius: 50%;
    background: var(--gold); color: var(--navy-dark);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.9rem; font-weight: 800;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    animation: avatarPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

/* Req 11: circular photo avatar (img with initials fallback). Reused in the
   profile banner, the photo-upload preview and the resume section. */
.avatar-circle {
    position: relative; flex-shrink: 0;
    border-radius: 50%; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--gold); color: var(--navy-dark);
    font-weight: 800;
}
.avatar-circle .avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-circle .avatar-initials { display: none; }
.avatar-circle.no-photo .avatar-initials { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
/* Banner avatar keeps the original 78px look + pop animation. */
.avatar-circle.profile-avatar { width: 78px; height: 78px; font-size: 1.9rem;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    animation: avatarPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; }
.avatar-circle.photo-preview { width: 96px; height: 96px; font-size: 2.1rem; border: 3px solid var(--border); }
.avatar-circle.resume-photo { width: 64px; height: 64px; font-size: 1.5rem; border: 2px solid var(--border); }

/* Photo upload row inside My Profile */
.photo-upload-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.photo-upload-controls { display: flex; flex-direction: column; gap: 6px; }
.photo-input { display: none; }
.photo-btn { display: inline-flex; align-items: center; cursor: pointer; width: max-content; }
.photo-hint { font-size: 0.82rem; margin: 0; }

/* Resume section: resume card on the left, photo pinned top-right */
.resume-with-photo { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.resume-with-photo .resume-main { flex: 1 1 auto; min-width: 0; }
.resume-with-photo .resume-photo { margin-top: 2px; }

/* Outline button variant used by the photo picker */
.btn-outline {
    background: transparent; color: var(--primary, #266EB3);
    border: 1.5px solid var(--primary, #266EB3);
    padding: 9px 18px; border-radius: 8px; font-weight: 600; font-size: 0.9rem;
    transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.btn-outline:hover { background: var(--primary, #266EB3); color: #fff; }
@keyframes avatarPop {
    from { opacity: 0; transform: scale(0.4); }
    to   { opacity: 1; transform: scale(1); }
}
.profile-id h2 { color: var(--white); font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
.profile-role { color: var(--cyan); font-size: 0.95rem; font-weight: 600; margin: 2px 0 8px; }
.profile-contact { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.profile-contact span { color: rgba(255,255,255,0.85); font-size: 0.86rem; }
.readonly-pill {
    position: absolute; top: 18px; right: 20px;
    background: rgba(255,255,255,0.16); color: var(--white);
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.5px;
    text-transform: uppercase; padding: 5px 12px; border-radius: 20px;
}
.editable-pill {
    position: absolute; top: 18px; right: 20px;
    background: rgba(0,198,215,0.22); color: var(--white);
    border: 1px solid rgba(0,198,215,0.55);
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.5px;
    text-transform: uppercase; padding: 5px 12px; border-radius: 20px;
}

/* Editable profile form: reuse the recruit-form field styling, drop the
   form's own card chrome so it sits inside the profile shell cleanly. */
.profile-form { padding: 0; background: transparent; box-shadow: none; }
.profile-form .profile-section { animation: none; }
.profile-actions {
    display: flex; justify-content: flex-end;
    padding: 22px 36px 30px;
}
.profile-actions .btn-primary { min-width: 180px; }
@media (max-width: 640px) {
    .profile-actions { padding: 18px 20px 26px; }
    .profile-actions .btn-primary { width: 100%; }
}

.profile-section {
    padding: 26px 36px;
    border-bottom: 1px solid var(--border);
    animation: cardIn 0.45s ease backwards;
    animation-delay: calc(var(--i, 0) * 90ms + 120ms);
}
.profile-section:last-child { border-bottom: none; }
.profile-section h3 {
    font-size: 0.82rem; font-weight: 800; letter-spacing: 0.6px;
    text-transform: uppercase; color: var(--navy); margin-bottom: 16px;
}

.profile-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 32px;
}
.profile-field {
    display: flex; flex-direction: column; gap: 3px;
    padding-bottom: 12px; border-bottom: 1px dashed var(--border);
    animation: cardIn 0.4s ease backwards;
    animation-delay: calc(var(--i, 0) * 45ms + 160ms);
}
.pf-label {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.4px; color: var(--text-muted);
}
.pf-value { font-size: 0.98rem; color: var(--text); font-weight: 600; }

.profile-skills { display: flex; flex-wrap: wrap; gap: 8px; }

.profile-resume {
    display: flex; align-items: center; gap: 16px;
    padding: 18px 20px; border: 1px solid var(--border);
    border-radius: 10px; background: #FAFBFF;
}
.profile-resume.empty { background: #FAFBFF; }
.pr-icon {
    width: 46px; height: 46px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--cyan-light); border-radius: 10px; font-size: 1.4rem;
}
.pr-info { flex: 1; }
.pr-info strong { color: var(--navy); font-size: 0.98rem; }
.pr-view { white-space: nowrap; padding: 10px 18px; }

@media (max-width: 640px) {
    .profile-banner { flex-direction: column; text-align: center; padding: 28px 20px; }
    .profile-contact { justify-content: center; }
    .profile-section { padding: 22px 20px; }
    .profile-grid { grid-template-columns: 1fr; }
    .profile-resume { flex-direction: column; text-align: center; }
}
/* ============================================================
   HOME PAGE POLISH + JOB SEARCH
   ============================================================ */
.home-hero {
    background:
        radial-gradient(900px 300px at 12% -40%, rgba(0,198,215,0.18), transparent 60%),
        linear-gradient(120deg, var(--navy-dark) 0%, var(--navy) 60%, #1E4080 100%);
    color: var(--white);
    padding: 46px 24px 40px;
}
.home-hero-inner { max-width: 1160px; margin: 0 auto; text-align: center; }
.home-hero .eyebrow {
    text-transform: uppercase; letter-spacing: 1.5px;
    font-size: 0.74rem; font-weight: 700; color: var(--cyan); margin-bottom: 8px;
}
.home-hero h1 {
    font-size: 2.1rem; font-weight: 800; line-height: 1.15;
    letter-spacing: -0.5px; margin-bottom: 8px;
}
.home-hero .home-sub { color: rgba(255,255,255,0.78); font-size: 1rem; }

.job-search {
    position: relative; display: flex; align-items: center;
    max-width: 560px; margin: 22px auto 0;
    background: var(--white); border-radius: 12px;
    box-shadow: 0 10px 30px rgba(8,18,45,0.28);
    transition: box-shadow 0.2s, transform 0.2s;
}
.job-search:focus-within { box-shadow: 0 12px 34px rgba(0,198,215,0.34); transform: translateY(-1px); }
.job-search-icon { display: flex; align-items: center; padding-left: 16px; color: var(--text-muted); }
.job-search input {
    flex: 1; border: none; outline: none; background: transparent;
    height: 52px; padding: 0 12px; font-size: 0.98rem; font-family: inherit; color: var(--text);
}
.job-search input::placeholder { color: #9AA6BE; }
.job-search-clear {
    border: none; background: #EEF1F8; color: var(--navy);
    width: 30px; height: 30px; margin-right: 11px; border-radius: 50%;
    font-size: 1.2rem; line-height: 1; cursor: pointer; transition: background 0.15s;
}
.job-search-clear:hover { background: #DDE3F0; }

/* Job card polish (also improves Related Jobs cards) */
.job-card { position: relative; }
.job-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--cyan), var(--gold));
    opacity: 0; transition: opacity 0.2s;
}
.job-card:hover::before { opacity: 1; }

.job-desc {
    display: -webkit-box;
    -webkit-line-clamp: 3; line-clamp: 3;
    -webkit-box-orient: vertical; overflow: hidden; min-height: 4.9em;
}

.job-meta { gap: 8px 10px; }
.meta-item {
    display: inline-flex; align-items: center; gap: 5px;
    background: #F3F6FC; color: var(--navy);
    padding: 4px 10px; border-radius: 20px; font-size: 0.76rem; font-weight: 600;
}

.btn-apply { letter-spacing: 0.2px; }
.btn-apply::after { content: "→"; font-size: 1.05rem; line-height: 1; transition: transform 0.18s; }
.btn-apply:hover::after { transform: translateX(4px); }

@media (max-width: 640px) {
    .home-hero { padding: 34px 16px 30px; }
    .home-hero h1 { font-size: 1.65rem; }
}
/* ============================================================
   ============  AUTH + UNIFIED PORTAL STYLES (added)  ========
   Login, Signup, dynamic nav states, session banners, prompt.
   Builds on the same Navy / Cyan / Gold tokens.
   ============================================================ */

/* ---------- Nav: signed-in greeting + CTA links ---------- */
.nav-user {
    display: inline-flex;
    align-items: center;
    color: var(--cyan);
    font-weight: 700;
    font-size: 0.92rem;
    padding: 6px 12px;
    margin-right: 4px;
    border-radius: 999px;
    background: rgba(0,198,215,0.12);
    border: 1px solid rgba(0,198,215,0.35);
}
header.header nav a.nav-link.nav-cta {
    background: var(--gold);
    color: var(--navy-dark);
    font-weight: 700;
}
header.header nav a.nav-link.nav-cta:hover { background: var(--gold-dark); color: var(--navy-dark); }
header.header nav a.nav-link.nav-cta-ghost {
    border: 1px solid rgba(255,255,255,0.45);
    color: var(--white);
}
header.header nav a.nav-link.nav-cta-ghost:hover { background: rgba(255,255,255,0.12); }
/* CTA links should not paint the gold "active" underline state */
header.header nav a.nav-link.nav-cta.active,
header.header nav a.nav-link.nav-cta-ghost.active { background: var(--gold); }
header.header nav a.nav-link.nav-cta-ghost.active { background: rgba(255,255,255,0.16); }

/* ---------- Auth split layout ---------- */
.auth-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 48px 24px 64px;
}
.auth-split {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.auth-aside {
    background: linear-gradient(150deg, var(--navy) 0%, var(--navy-dark) 100%);
    color: var(--white);
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.auth-aside::after {
    content: "";
    position: absolute;
    right: -60px; bottom: -60px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(0,198,215,0.30), transparent 70%);
    pointer-events: none;
}
.auth-aside .eyebrow { color: var(--cyan); }
.auth-aside h1 {
    font-size: 1.9rem;
    line-height: 1.2;
    font-weight: 800;
    margin: 10px 0 14px;
}
.auth-aside-sub { color: rgba(255,255,255,0.82); font-size: 1rem; line-height: 1.6; }
.auth-points {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
}
.auth-points li {
    position: relative;
    padding-left: 28px;
    color: rgba(255,255,255,0.92);
    font-size: 0.95rem;
}
.auth-points li::before {
    content: "✓";
    position: absolute; left: 0; top: 0;
    width: 18px; height: 18px;
    display: grid; place-items: center;
    color: var(--navy-dark);
    background: var(--cyan);
    border-radius: 50%;
    font-size: 0.7rem; font-weight: 900;
}

.auth-panel {
    padding: 48px 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-card { width: 100%; max-width: 380px; }
.auth-card.wide { max-width: 560px; }
.auth-card h2 { font-size: 1.6rem; font-weight: 800; color: var(--navy); margin-bottom: 4px; }
.auth-card .muted { margin-bottom: 22px; }

#login { margin-top: 6px; }
#login iframe { width: 100% !important; border: none; min-height: 320px; }

.auth-switch { margin-top: 22px; font-size: 0.92rem; color: var(--text-muted); text-align: center; }
.auth-switch a { color: var(--cyan); font-weight: 700; }
.auth-switch a:hover { text-decoration: underline; }

.field-hint { display: block; margin-top: 6px; font-size: 0.8rem; color: var(--text-muted); }

.auth-note {
    margin-top: 18px;
    padding: 14px 16px;
    background: var(--cyan-light);
    border: 1px solid rgba(0,198,215,0.4);
    border-radius: 10px;
    font-size: 0.88rem;
    color: var(--navy);
    line-height: 1.55;
}
.auth-note code {
    background: rgba(27,43,94,0.08);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.85em;
}

/* ---------- Session banner on auth views ---------- */
.auth-banner {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 10px 16px;
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 4px solid var(--cyan);
    border-radius: 10px;
    color: var(--text);
    font-size: 0.92rem;
    box-shadow: var(--shadow);
}
.auth-banner strong { color: var(--navy); }
.ab-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: #2ecc71;
    box-shadow: 0 0 0 4px rgba(46,204,113,0.18);
}

/* ---------- Email prompt dialog ---------- */
.prompt-box { text-align: left; }
.prompt-box .field { margin-top: 14px; }
.prompt-box input.invalid {
    border-color: var(--red, #DF3A3C);
    box-shadow: 0 0 0 3px rgba(223,58,60,0.15);
}

/* ---------- Responsive: stack the split ---------- */
@media (max-width: 820px) {
    .auth-split { grid-template-columns: 1fr; }
    .auth-aside { padding: 36px 28px; }
    .auth-aside h1 { font-size: 1.6rem; }
    .auth-panel { padding: 32px 28px; }
    .auth-card, .auth-card.wide { max-width: 100%; }
}
@media (max-width: 640px) {
    .auth-section { padding: 28px 14px 48px; }
    .nav-user { display: none; }
}

/* ============================================================
   ============  LOGIN EMAIL GATE + ACTIVATION (added)  ======
   ============================================================ */
#emailGate .field { margin-bottom: 14px; }
#emailGate .btn-primary { width: 100%; }

.gate-for {
    font-size: 0.9rem; font-weight: 600; color: var(--navy);
    margin-bottom: 12px;
}

.auth-help {
    margin-top: 14px; font-size: 0.86rem; color: var(--text-muted);
}
.auth-help a { color: var(--cyan); font-weight: 600; text-decoration: none; }
.auth-help a:hover { text-decoration: underline; }

.invite-msg {
    text-align: center;
    padding: 8px 4px 4px;
    animation: viewSlideIn 0.35s ease;
}
.invite-icon {
    width: 64px; height: 64px; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.9rem;
    background: var(--cyan-light); border-radius: 50%;
}
.invite-msg h3 { color: var(--navy); font-size: 1.25rem; margin-bottom: 8px; }
.invite-msg p { color: var(--text); font-size: 0.95rem; line-height: 1.55; margin-bottom: 18px; }
.invite-msg .btn-ghost { margin: 0 auto; }
.invite-msg .auth-switch { margin-top: 16px; }

/* ============================================================
   ============  APPLY FLOW: DETAILS + PRE-SCREEN (added)  ====
   Multi-step apply: Job Details -> Pre-Screening -> Application.
   All new styles below; nothing above is modified.
   ============================================================ */

/* Softer, glassier backdrop for the apply-flow dialogs */
.glass-overlay {
    background: rgba(17,29,63,0.42);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
}

/* ---------- Shared dialog footer ---------- */
.modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
#jobDetailsOverlay .modal-foot,
#preScreenOverlay .modal-foot,
#applyEmailOverlay .modal-foot {
    padding: 18px 28px;
    border-top: 1px solid var(--border);
    background: #FCFDFF;
    border-radius: 0 0 16px 16px;
}
.modal-foot.space-between { justify-content: space-between; }
.modal-foot.in-form { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.modal-foot .btn-primary { min-width: 150px; }
@media (max-width: 640px) {
    .modal-foot { flex-direction: column-reverse; align-items: stretch; }
    .modal-foot .btn-primary, .modal-foot .btn-ghost { width: 100%; }
}

/* ---------- Job card: clickable + draft badge ---------- */
.job-card { cursor: pointer; }
.job-card:focus-visible { outline: 3px solid rgba(0,198,215,0.45); outline-offset: 2px; }
.job-card-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.draft-badge {
    flex-shrink: 0; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.4px;
    text-transform: uppercase; color: var(--gold-dark);
    background: #FFF4DB; border: 1px solid #F3D08A;
    padding: 3px 9px; border-radius: 20px; margin-top: 3px; white-space: nowrap;
}

/* ---------- Job details popup ---------- */
.modal-details .modal-body, .modal-prescreen .modal-body { max-height: 64vh; }
.jd-meta {
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px 26px; margin-bottom: 24px;
}
.jd-meta-item { display: flex; flex-direction: column; gap: 3px; }
.jd-meta-k { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); }
.jd-meta-v { font-size: 0.95rem; color: var(--navy); font-weight: 600; }
.jd-section { margin-bottom: 20px; }
.jd-section h4 { font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: var(--navy); margin-bottom: 8px; }
/* Req 6/7/8: bulleted lists for Required Skills, Must Have, Nice To Have, Work Schedule */
.jd-section ul.jd-list { margin: 0; padding-left: 20px; list-style: disc; white-space: normal; }
.jd-section ul.jd-list li { margin-bottom: 7px; line-height: 1.6; color: var(--text); }
.jd-section ul.jd-list li:last-child { margin-bottom: 0; }
.jd-desc { font-size: 0.94rem; color: var(--text); line-height: 1.7; white-space: pre-line; }
/* Change 2: readable point-by-point description list */
.jd-desc .jd-list { margin: 0; padding-left: 20px; list-style: disc; white-space: normal; }
.jd-desc .jd-list li { margin-bottom: 7px; line-height: 1.6; }
.jd-desc .jd-list li:last-child { margin-bottom: 0; }
.jd-skills { display: flex; flex-wrap: wrap; gap: 8px; }
.jd-draft-note { font-size: 0.82rem; color: var(--gold-dark); font-weight: 600; margin-right: auto; }
@media (max-width: 640px) { .jd-meta { grid-template-columns: 1fr; } }

/* ---------- Step progress indicator ---------- */
.apply-steps {
    display: flex; align-items: center; gap: 6px; list-style: none;
    margin: 0 0 24px; padding: 0; counter-reset: step;
}
.apply-steps li {
    flex: 1; position: relative; padding-left: 26px;
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.4px; color: var(--text-muted);
}
.apply-steps li::before {
    counter-increment: step; content: counter(step);
    position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 19px; height: 19px; border-radius: 50%;
    background: #E4E9F5; color: var(--text-muted);
    display: flex; align-items: center; justify-content: center; font-size: 0.66rem;
}
.apply-steps li.active { color: var(--navy); }
.apply-steps li.active::before { background: var(--cyan); color: var(--white); }
.apply-steps li.done { color: var(--navy); }
.apply-steps li.done::before { content: "\2713"; background: #1E7A45; color: var(--white); }

/* ---------- Pre-screening questions ---------- */
.prescreen-list { display: flex; flex-direction: column; gap: 14px; }
.prescreen-item {
    background: #FAFBFF; border: 1px solid var(--border); border-radius: 10px;
    padding: 16px 18px; animation: cardIn 0.4s ease backwards;
    animation-delay: calc(var(--i,0) * 60ms);
}
.prescreen-q {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 0.96rem; font-weight: 600; color: var(--navy);
    margin-bottom: 14px; line-height: 1.5;
}
.prescreen-n {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    background: var(--navy); color: var(--white); font-size: 0.74rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.yesno { display: inline-flex; gap: 8px; }
.yesno-btn {
    min-width: 84px; padding: 9px 18px; border-radius: 8px; cursor: pointer;
    border: 1.5px solid var(--border); background: var(--white);
    font-size: 0.9rem; font-weight: 700; color: var(--text); font-family: inherit;
    transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.12s;
}
.yesno-btn:hover { border-color: var(--cyan); transform: translateY(-1px); }
.yesno-btn.selected { background: var(--navy); border-color: var(--navy); color: var(--white); }
.yesno-btn.selected[data-val="No"] { background: #B42323; border-color: #B42323; }

/* ---------- Skeleton loaders (jobs grid) ---------- */
.skeleton-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: 22px; }
.skeleton-card {
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; overflow: hidden;
}
.skeleton-line {
    height: 14px; border-radius: 6px; margin-bottom: 12px;
    background: linear-gradient(90deg, #EDF1FA 25%, #F6F8FC 37%, #EDF1FA 63%);
    background-size: 400% 100%; animation: shimmer 1.4s ease infinite;
}
.skeleton-line.title { height: 20px; width: 65%; margin-bottom: 18px; }
.skeleton-line.short { width: 42%; }
.skeleton-line.btn { height: 42px; border-radius: 8px; margin-top: 18px; margin-bottom: 0; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ---------- Smoother modal entrance for the new dialogs ---------- */
.modal-details, .modal-prescreen, .modal-email {
    transition: transform 0.3s cubic-bezier(0.22,0.61,0.36,1), opacity 0.3s ease;
}

/* ============================================================
   ====  EMAIL GATE • DUPLICATE GUARD • HOME DECO (added)  ====
   New, additive styles only. Nothing above is modified.
   ============================================================ */

/* ---------- Email gate dialog (guest apply, step 0) ---------- */
.modal-email { max-width: 480px; }
.modal-email .modal-sub strong { color: var(--white); font-weight: 700; }
.ae-note {
    font-size: 0.9rem; line-height: 1.6; color: var(--text-muted);
    margin: 0 0 18px;
}
.ae-error {
    margin: 14px 0 0;
    padding: 12px 14px;
    font-size: 0.9rem; line-height: 1.55;
    color: #8A1F21;
    background: #FDECEC;
    border: 1.5px solid #F3B7B8;
    border-radius: 10px;
}
.modal-email .field { margin-bottom: 4px; }
.modal-email .field input {
    height: 48px; font-size: 1rem;
}

/* Shared invalid state for any dialog email input (was scoped to prompt-box) */
.modal input.invalid,
.prompt-box input.invalid {
    border-color: #DF3A3C;
    box-shadow: 0 0 0 3px rgba(223,58,60,0.15);
}

/* ---------- "Already applied" indicator ---------- */
.applied-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.86rem; font-weight: 700; letter-spacing: 0.2px;
    color: #14683B;
    background: #E6F6EC; border: 1.5px solid #B7E3C6;
    padding: 9px 18px; border-radius: 8px;
    white-space: nowrap;
}
/* In a job-card foot the pill should sit like the button it replaces */
.job-card-foot .applied-pill { width: 100%; justify-content: center; }
/* In the Job Details footer it sits inline next to (hidden) actions */
#jdApplied { margin-left: auto; }

/* Applied cards read as "done": muted accent, no hover lift on the bar */
.job-card.is-applied { cursor: default; }
.job-card.is-applied::before {
    opacity: 1;
    background: linear-gradient(90deg, #2FA968, #B7E3C6);
}

/* ---------- Popup polish (spacing / typography, non-breaking) ---------- */
.modal-header { border-top-left-radius: 16px; border-top-right-radius: 16px; }
.modal-header h3 { letter-spacing: -0.2px; }
.modal-close { border-radius: 8px; }
.modal-close:hover { background: rgba(255,255,255,0.12); }
.prescreen-item { border-radius: 12px; }
.yesno-btn { border-radius: 10px; }

/* Inline loader for buttons already styled via .btn-spinner; ensure the
   email-gate + dialog buttons show a consistent min width while busy. */
#aeContinue, #psNext, #jdApply { min-width: 140px; }

/* ============================================================
   ---------- Home page: subtle career-themed backdrop ----------
   Purely decorative, low-opacity icons behind the hero. Does not
   affect layout: the deco layer is absolutely positioned and
   ignores pointer events; hero content stays above it.
   ============================================================ */
.home-hero { position: relative; overflow: hidden; }
.home-hero-inner { position: relative; z-index: 2; }

.hero-deco {
    position: absolute; inset: 0; z-index: 1;
    pointer-events: none; overflow: hidden;
}
.hero-deco svg {
    position: absolute; color: #FFFFFF;
    opacity: 0.06;
    animation: decoFloat 9s ease-in-out infinite;
    will-change: transform;
}
.hero-deco .d1 { top: 12%;  left: 6%;   width: 76px;  height: 76px;  animation-delay: 0s;    }
.hero-deco .d2 { top: 58%;  left: 13%;  width: 54px;  height: 54px;  animation-delay: 1.1s;  }
.hero-deco .d3 { top: 20%;  left: 40%;  width: 46px;  height: 46px;  animation-delay: 2.3s;  opacity: 0.05; }
.hero-deco .d4 { top: 66%;  left: 46%;  width: 40px;  height: 40px;  animation-delay: 0.6s;  opacity: 0.05; }
.hero-deco .d5 { top: 14%;  right: 8%;  width: 82px;  height: 82px;  animation-delay: 1.7s;  }
.hero-deco .d6 { top: 60%;  right: 14%; width: 58px;  height: 58px;  animation-delay: 2.9s;  }
.hero-deco .d7 { top: 40%;  right: 40%; width: 44px;  height: 44px;  animation-delay: 3.6s;  opacity: 0.045; }

@keyframes decoFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-14px) rotate(3deg); }
}

/* Trim the count on smaller screens so the icons never crowd content */
@media (max-width: 720px) {
    .hero-deco .d3, .hero-deco .d4, .hero-deco .d7 { display: none; }
    .hero-deco .d1 { width: 56px; height: 56px; }
    .hero-deco .d5 { width: 60px; height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-deco svg { animation: none; }
}

/* ============================================================
   ENHANCEMENTS (Requirements 2 & 6)
   Additive only — no existing rule is removed. Brand colours,
   layout and flow are unchanged; these polish spacing, depth,
   motion and add the job filters + not-eligible dialog.
   ============================================================ */
:root {
    --shadow-sm: 0 2px 10px rgba(27,43,94,0.06);
    --shadow-md: 0 8px 26px rgba(27,43,94,0.12);
    --shadow-lg: 0 18px 44px rgba(17,29,63,0.22);
    --ring:      0 0 0 3px rgba(0,198,215,0.20);
    --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- Buttons: subtle depth + keyboard focus ring ---------- */
.btn-primary {
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%);
    box-shadow: 0 2px 8px rgba(245,166,35,0.28);
    letter-spacing: 0.1px;
}
.btn-primary:hover:not(:disabled) { box-shadow: 0 8px 22px rgba(245,166,35,0.38); }
.btn-primary:focus-visible,
.btn-ghost:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(245,166,35,0.45); }
.btn-ghost { transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s; }
.btn-ghost:hover { transform: translateY(-1px); }

/* ---------- Inputs: consistent focus ring everywhere ---------- */
.field input:focus,
.recruit-form textarea:focus,
.search-bar input:focus,
.modal-email .field input:focus { box-shadow: var(--ring); }

/* ---------- Job cards: smoother lift + title accent on hover ---------- */
.job-card { transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease); }
.job-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.job-card:hover .job-title { color: #0A7C88; }
.job-title { transition: color 0.18s ease; }
.chip { transition: transform 0.15s ease, background 0.15s ease; }
.job-card:hover .chip { background: #D6F4F8; }
.meta-item { display: inline-flex; align-items: center; gap: 4px; }

/* ============================================================
   JOB FILTERS  (Requirement 2)
   ============================================================ */
.board-layout {
    display: grid;
    grid-template-columns: 258px 1fr;
    gap: 28px;
    align-items: start;
}
.board-main { min-width: 0; }

.filters-panel {
    position: sticky;
    top: 86px;
    /* Requirement 4: the sidebar gets its OWN smooth vertical scroll so every
       section (Job Type, Job Category, Location) is reachable without scrolling
       to the bottom of the page. */
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    padding: 20px 20px 8px;
    animation: viewSlideIn 0.4s var(--ease);
}
.filters-panel::-webkit-scrollbar { width: 8px; }
.filters-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
.filters-panel::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
.filters-head {
    /* Keep the "Filters" heading + Clear all pinned while the panel scrolls. */
    position: sticky;
    top: -20px;
    background: var(--white);
    z-index: 2;
    display: flex; align-items: center; justify-content: space-between;
    margin: -20px -20px 14px; padding: 20px 20px 12px;
    border-bottom: 1px solid var(--border);
}
.filters-head h3 { font-size: 1.02rem; font-weight: 800; color: var(--navy); letter-spacing: -0.2px; }
.filters-clear {
    background: none; border: none; cursor: pointer; font-family: inherit;
    color: var(--cyan); font-size: 0.8rem; font-weight: 700;
    padding: 4px 6px; border-radius: 6px; transition: background 0.15s, color 0.15s;
}
.filters-clear:hover { background: var(--cyan-light); color: #0A7C88; }

.filter-group { margin-bottom: 18px; }
.filter-group-title {
    font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.7px;
    color: var(--text-muted); margin-bottom: 10px;
}
/* Requirement 4: no inner height cap — the whole list shows and the panel's own
   scroll (above) handles any overflow, so long category lists are never clipped. */
.filter-options { display: flex; flex-direction: column; gap: 2px; }

.filter-option {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 8px; border-radius: 8px; cursor: pointer;
    font-size: 0.88rem; color: var(--text);
    transition: background 0.15s ease;
    animation: cardIn 0.35s ease backwards;
}
.filter-option:hover { background: #F4F6FB; }
.filter-option.checked { background: var(--cyan-light); }
.filter-option.disabled { opacity: 0.45; cursor: not-allowed; }
.filter-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.filter-check {
    width: 18px; height: 18px; flex: 0 0 18px; border-radius: 5px;
    border: 1.5px solid var(--border); background: var(--white);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.filter-check::after {
    content: ""; width: 5px; height: 9px;
    border: solid var(--white); border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0); transition: transform 0.15s var(--ease);
    margin-top: -1px;
}
.filter-option input:checked + .filter-check {
    background: var(--cyan); border-color: var(--cyan);
}
.filter-option input:checked + .filter-check::after { transform: rotate(45deg) scale(1); }
.filter-option input:focus-visible + .filter-check { box-shadow: var(--ring); }
.filter-label { flex: 1; line-height: 1.3; }
.filter-count {
    font-size: 0.74rem; font-weight: 700; color: var(--text-muted);
    background: #EEF1F8; border-radius: 20px; padding: 1px 8px; min-width: 24px; text-align: center;
}
.filter-option.checked .filter-count { background: #C9EEF3; color: #0A7C88; }

/* Mobile filter toggle button (hidden on desktop) */
.filters-toggle {
    display: none;
    align-items: center; gap: 8px;
    background: var(--white); color: var(--navy);
    border: 1px solid var(--border); border-radius: 10px;
    padding: 11px 16px; font-family: inherit; font-size: 0.92rem; font-weight: 700;
    cursor: pointer; margin-bottom: 18px; box-shadow: var(--shadow-sm);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.filters-toggle:hover { border-color: var(--cyan); }
.filters-toggle-count {
    background: var(--cyan); color: var(--white);
    font-size: 0.74rem; font-weight: 800; border-radius: 20px;
    padding: 1px 8px; min-width: 22px; text-align: center;
}

@media (max-width: 860px) {
    .board-layout { grid-template-columns: 1fr; gap: 0; }
    .filters-toggle { display: inline-flex; }
    .filters-panel {
        position: static; order: -1;
        max-height: 0; overflow: hidden; opacity: 0;
        padding-top: 0; padding-bottom: 0; margin-bottom: 0; border-color: transparent;
        box-shadow: none;
        transition: max-height 0.32s var(--ease), opacity 0.22s ease, margin 0.22s ease, padding 0.22s ease;
    }
    .filters-panel.open {
        max-height: 1400px; opacity: 1;
        padding: 20px 20px 8px; margin-bottom: 18px; border-color: var(--border);
        box-shadow: var(--shadow-sm);
    }
}

/* ============================================================
   NOT-ELIGIBLE DIALOG  (Requirement 1)
   ============================================================ */
.modal-ineligible {
    max-width: 460px;
    position: relative;
    border-radius: 18px;
    overflow: visible;
}
.modal-ineligible .ine-x {
    position: absolute; top: 12px; right: 14px;
    color: var(--text-muted); font-size: 1.6rem; z-index: 2;
}
.modal-ineligible .ine-x:hover { color: var(--navy); background: #F4F6FB; }
.ine-body { padding: 40px 34px 30px; text-align: center; }
.ine-icon {
    width: 84px; height: 84px; margin: 0 auto 20px;
    display: flex; align-items: center; justify-content: center;
    position: relative; color: var(--gold-dark);
}
.ine-icon svg {
    width: 46px; height: 46px; position: relative; z-index: 2;
    animation: ineIconPop 0.5s var(--ease) both;
}
.ine-icon::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: #FEF3E0; z-index: 1;
    animation: ineIconPop 0.42s var(--ease) both;
}
.ine-ring {
    position: absolute; inset: -6px; border-radius: 50%;
    border: 2px solid rgba(245,166,35,0.35); z-index: 0;
    animation: inePulse 1.9s ease-out infinite;
}
@keyframes ineIconPop {
    0% { transform: scale(0.4); opacity: 0; }
    60% { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes inePulse {
    0% { transform: scale(0.85); opacity: 0.9; }
    70% { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
}
.ine-body h3 {
    color: var(--navy); font-size: 1.4rem; font-weight: 800;
    letter-spacing: -0.3px; margin-bottom: 12px;
    animation: ineRise 0.45s var(--ease) 0.06s both;
}
.ine-msg {
    color: var(--text-muted); font-size: 0.95rem; line-height: 1.65;
    margin-bottom: 10px; animation: ineRise 0.45s var(--ease) 0.12s both;
}
.ine-wish { color: var(--text); font-weight: 600; }
.ine-actions { margin-top: 24px; animation: ineRise 0.45s var(--ease) 0.18s both; }
.ine-actions .btn-primary { min-width: 160px; }
@keyframes ineRise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Modal scrollbars + polish ---------- */
.modal-body::-webkit-scrollbar { width: 8px; }
.modal-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
.modal-body::-webkit-scrollbar-thumb:hover { background: #C2CAE4; }

/* ---------- Prescreen items: gentle hover ---------- */
.prescreen-item { transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; }
.prescreen-item:hover { border-color: var(--cyan); box-shadow: var(--shadow-sm); }
.yesno-btn { transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.12s; }
.yesno-btn:active { transform: translateY(0) scale(0.97); }

/* ---------- Application / profile cards: richer depth ---------- */
.app-card { transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.app-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.profile-shell .profile-section { transition: box-shadow 0.2s ease; }

/* ---------- Skeleton shimmer refinement ---------- */
.skeleton-line {
    background: linear-gradient(90deg, #E9EDF6 25%, #F3F6FC 37%, #E9EDF6 63%);
    background-size: 400% 100%;
    animation: shimmer 1.3s ease infinite;
}

/* ---------- Toast entrance easing ---------- */
.toast { transition: transform 0.3s var(--ease), opacity 0.3s ease; }

@media (prefers-reduced-motion: reduce) {
    .ine-ring { animation: none; }
    .ine-icon svg, .ine-icon::before, .ine-body h3, .ine-msg, .ine-actions { animation: none; }
    .filter-option { animation: none; }
}

/* ============================================================
   CAREERS-PALETTE REDESIGN (#1)
   Minimalist navy + teal, colours sampled from the Virtual
   Coworker careers page. Appended last so it tunes the existing
   components without rewriting them.
   ============================================================ */

/* Primary actions = careers navy button (was gold) */
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover:not(:disabled) {
    background: var(--primary-dark);
    box-shadow: 0 8px 20px rgba(37, 75, 118, 0.26);
    transform: translateY(-2px);
}
.btn-primary:disabled { background: #9DB2C7; color: #fff; }

/* Skill / tag chips = soft teal */
.chip {
    background: var(--cyan-light);
    color: #14636E;
    border: 1px solid #C7EBF0;
}
.job-card:hover .chip { background: #D2F2F6; }

/* Teal focus ring on all form controls */
.recruit-form input:focus,
.recruit-form textarea:focus,
.recruit-form select:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(63, 182, 201, 0.18);
    outline: none;
}

/* Softer corners + lighter borders = cleaner, more minimal surfaces */
.job-card, .app-card, .card, .search-card, .profile-shell, .modal {
    border-radius: 14px;
}
.job-card { border: 1px solid var(--border); }

/* Teal avatar keeps dark navy initials for contrast */
.avatar-circle { color: var(--navy-dark); }

/* Section headings a touch tighter/cleaner */
.board-head h2, .search-card h2, .profile-section h3 { letter-spacing: -0.3px; }

/* Job-card left accent + hover use the teal accent consistently */
.app-card { border-left: 4px solid var(--teal); }
.job-card:focus-visible { outline: 3px solid rgba(63, 182, 201, 0.45); }
.job-card:hover .job-title { color: var(--primary); }

/* Editable pill + draft badge in the teal family */
.editable-pill { background: var(--cyan-light); color: #14636E; }

/* ============================================================
   CHANGE REQUEST — round 3
   ============================================================ */

/* Req 5: Job Status badge is the only coloured badge — Open green, Closed RED. */
.status-open   { background: #E6F4EC; color: #1E7A45; }
.status-closed { background: #FDE6E6; color: #B42323; }

/* Req 5: Candidate Status keeps the previous stage-badge styling. */
.app-card-grid .stage-badge { display: inline-flex; align-items: center; }


/* Compact popup shell (shared by the password-setup dialog). */
.modal-compact { max-width: 520px; width: 100%; }

/* Req 1 & 5: Work Schedule renders as a single comma-separated line (no
   bullets), wrapping cleanly when the value is long. */
.jd-meta-inline { display: block; line-height: 1.5; overflow-wrap: anywhere; word-break: normal; }

/* Profile Req 1: photo control lives in the header, below the avatar. */
.profile-photo-block { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.avatar-button {
    position: relative; padding: 0; border: none; background: none;
    cursor: pointer; border-radius: 50%; line-height: 0;
    display: inline-block;
}
.avatar-button .avatar-overlay {
    position: absolute; right: 2px; bottom: 2px;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--primary); color: #fff;
    font-size: 0.78rem; line-height: 26px; text-align: center;
    border: 2px solid #fff;
    transition: transform 0.15s var(--ease);
}
.avatar-button:hover .avatar-overlay { transform: scale(1.1); }
.avatar-button:focus-visible { outline: 3px solid rgba(255,255,255,0.7); outline-offset: 3px; }
.avatar-caption {
    font-size: 0.76rem; font-weight: 700; letter-spacing: 0.02em;
    color: rgba(255,255,255,0.92); text-transform: uppercase;
}
/* File input kept in the form (so it submits) but visually hidden. */
.visually-hidden-input {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Profile Req 3: resume actions — View + Download side by side. */
.pr-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.profile-resume .pr-info { min-width: 0; }
.profile-resume .pr-info strong { display: block; overflow-wrap: anywhere; }
.pr-download { white-space: nowrap; }
.pr-view { white-space: nowrap; }

@media (max-width: 560px) {
    .pr-actions { width: 100%; }
    .pr-actions > a { flex: 1 1 auto; text-align: center; }
}



/* ============================================================
   PASSWORD SETUP CONFIRMATION — replaces the old toast.
   Scoped to #setupSentOverlay; no other view is affected.
   ============================================================ */
#setupSentOverlay .modal-success { max-width: 460px; text-align: center; }
#setupSentOverlay .setup-sent-body { padding: 36px 32px 8px; }

#setupSentOverlay .setup-sent-anim { color: var(--cyan); margin: 0 auto 18px; width: 96px; height: 96px; }
#setupSentOverlay .setup-sent-title {
    color: var(--navy); font-size: 1.35rem; font-weight: 700; margin: 0 0 10px;
}
#setupSentOverlay .setup-sent-text {
    color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; margin: 0;
}
#setupSentOverlay .setup-sent-text strong { color: var(--text); font-weight: 700; }
#setupSentOverlay .setup-sent-foot {
    justify-content: center; margin: 22px 32px 0; padding: 18px 0 26px;
    border-top: 1px solid var(--border);
}
#setupSentOverlay .setup-sent-foot .btn-primary { min-width: 160px; }

/* Envelope draws itself, then the tick pops. Purely decorative. */
#setupSentOverlay .ss-ring {
    opacity: 0.28;
    transform-origin: 50% 50%;
    animation: ssRing 0.6s var(--ease) both;
}
#setupSentOverlay .ss-env {
    stroke-dasharray: 160; stroke-dashoffset: 160;
    animation: ssDraw 0.55s var(--ease) 0.1s forwards;
}
#setupSentOverlay .ss-flap {
    stroke-dasharray: 60; stroke-dashoffset: 60;
    animation: ssDraw 0.4s var(--ease) 0.5s forwards;
}
#setupSentOverlay .ss-badge-bg {
    transform-origin: 70px 64px;
    animation: ssPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s both;
}
#setupSentOverlay .ss-tick {
    stroke-dasharray: 22; stroke-dashoffset: 22;
    animation: ssDraw 0.3s var(--ease) 1.05s forwards;
}
@keyframes ssDraw { to { stroke-dashoffset: 0; } }
@keyframes ssPop  { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes ssRing { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 0.28; } }

@media (prefers-reduced-motion: reduce) {
    #setupSentOverlay .ss-ring, #setupSentOverlay .ss-env, #setupSentOverlay .ss-flap,
    #setupSentOverlay .ss-badge-bg, #setupSentOverlay .ss-tick {
        animation: none; stroke-dashoffset: 0; opacity: 1; transform: none;
    }
}

/* Footer office phone numbers. Scoped to .footer-office so nothing else moves. */
.footer-office .footer-phone { margin-top: 8px; }
.footer-office .footer-phone a {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    transition: border-color 0.18s, opacity 0.18s;
}
.footer-office .footer-phone a:hover { border-bottom-color: currentColor; opacity: 0.85; }

/* ============ JOB ORDER ASSESSMENT (apply form section) ============
   The per-job assessment rendered inside the application form. Mirrors the
   pre-screen look; choice questions reuse .yesno / .yesno-btn. */
.jobasmt-section {
    margin-top: 6px; padding-top: 20px; border-top: 1px solid var(--border);
}
.jobasmt-section > h4 {
    font-size: 0.8rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.6px; color: var(--navy); margin-bottom: 4px;
}
.jobasmt-section > .modal-sub { margin-bottom: 14px; }
.jobasmt-list { display: flex; flex-direction: column; gap: 12px; }
.jobasmt-item {
    background: #FAFBFF; border: 1px solid var(--border); border-radius: 10px;
    padding: 16px 18px; animation: cardIn 0.4s ease backwards;
    animation-delay: calc(var(--i,0) * 60ms);
}
.jobasmt-q {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 0.96rem; font-weight: 600; color: var(--navy);
    margin-bottom: 12px; line-height: 1.5;
}
.jobasmt-n {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    background: var(--navy); color: var(--white); font-size: 0.74rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.jobasmt-q .req { color: #B42323; font-weight: 800; }
.jobasmt-input {
    width: 100%; padding: 10px 12px; border: 1.5px solid var(--border);
    border-radius: 8px; font-family: inherit; font-size: 0.92rem; color: var(--text);
    background: var(--white); resize: vertical;
}
.jobasmt-input:focus { outline: none; border-color: var(--cyan); }
.jobasmt-choice { flex-wrap: wrap; }

/* Assessment step footer: Back on the left, Save + Submit grouped on the right. */
.asmt-foot-right { display: inline-flex; gap: 10px; align-items: center; }

/* ============================================================
   APPLY-FLOW STEP HANDOFF  (added)
   ------------------------------------------------------------
   Makes the move between two apply-flow dialogs read as one
   continuous sheet instead of a close-then-open. Nothing above
   is modified; these are additive classes toggled by StepFlow
   in views.js and they only affect dialogs mid-handoff.

   The rule that makes it work: exactly ONE backdrop is visible
   at any moment. The dialog that is leaving gives its backdrop
   up in the same frame the next surface takes it over, so the
   page behind never double-blurs and never flashes clear.
   ============================================================ */

/* The surface taking over the backdrop shows it at once rather than
   fading it in over 300ms — the fade is what caused the flash.
   Pairs with .open, which already supplies opacity/visibility. */
.modal-overlay.step-instant { transition: none; }

/* Hard cut. Used for the single frame in which a surface is removed, so
   the backdrop disappears with the panel instead of fading out behind
   the next dialog and briefly stacking two backdrops. */
.modal-overlay.step-cut { transition: none !important; }

/* Outgoing dialog: keeps its panel on screen to animate away, but
   surrenders the backdrop immediately (the scrim already has it).
   Sits above the scrim so the panel is never veiled on its way out. */
.modal-overlay.step-out {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: none;
    pointer-events: none;
    opacity: 1;
    visibility: visible;
    z-index: 1010;
}
.modal-overlay.step-out .modal {
    opacity: 0;
    transform: translateY(-14px) scale(0.975);
    transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1), opacity 0.16s ease;
}

/* Incoming dialog: only the panel animates, and it rises from below
   so the direction of travel matches the step order. */
.modal-overlay.step-in { z-index: 1012; }   /* above the panel it replaces */
.modal-overlay.step-in .modal {
    animation: stepPanelIn 0.34s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
@keyframes stepPanelIn {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- The scrim that holds the gap ---------- */
.step-scrim {
    align-items: center;
    z-index: 1005;              /* above the leaving dialog, below the arriving one */
    cursor: progress;
}
.step-scrim .step-scrim-card {
    display: flex; align-items: center; gap: 12px;
    background: var(--white);
    border-radius: 14px;
    padding: 16px 22px;
    box-shadow: 0 18px 44px rgba(17, 29, 63, 0.28);
    color: var(--navy);
    font-size: 0.92rem; font-weight: 600;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}
/* Only revealed once the wait is long enough to notice, so a fast
   handoff never flashes a spinner at the candidate. */
.step-scrim.waiting .step-scrim-card { opacity: 1; transform: translateY(0); }
.step-scrim-spinner {
    width: 18px; height: 18px; flex-shrink: 0;
    border: 2.5px solid var(--border);
    border-top-color: var(--cyan);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}
.step-scrim p { margin: 0; }

/* Motion-sensitive candidates get the same flow with no movement. */
@media (prefers-reduced-motion: reduce) {
    .modal-overlay.step-out .modal,
    .modal-overlay.step-in .modal { animation: none; transition: opacity 0.15s ease; transform: none; }
    .step-scrim .step-scrim-card { transition: opacity 0.15s ease; transform: none; }
}

/* ============================================================
   ASSESSMENT STEP POLISH  (added)
   Spacing, hierarchy, validation and submit state for the
   Role Assessment dialog. Presentation only.
   ============================================================ */

.modal-assessment .modal-body { padding-top: 24px; }

/* ---------- Answered counter ---------- */
.asmt-progress {
    display: flex; align-items: center; gap: 12px;
    margin: 0 0 18px;
}
.asmt-progress-count {
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.5px;
    text-transform: uppercase; color: var(--text-muted);
    white-space: nowrap;
}
.asmt-progress.complete .asmt-progress-count { color: #1E7A45; }
.asmt-progress-track {
    flex: 1; height: 5px; border-radius: 99px;
    background: #E9EEF7; overflow: hidden;
}
.asmt-progress-bar {
    display: block; height: 100%; width: 0;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--cyan), var(--teal));
    transition: width 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.3s ease;
}
.asmt-progress.complete .asmt-progress-bar { background: #1E7A45; }

/* ---------- Validation summary ---------- */
.asmt-alert {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 16px; padding: 12px 14px;
    border-radius: 10px;
    background: #FDF1F1;
    border: 1px solid #F3C9C9;
    color: #8E1F1F;
    font-size: 0.88rem; font-weight: 600;
}
.asmt-alert::before {
    content: "!";
    flex-shrink: 0;
    width: 18px; height: 18px; border-radius: 50%;
    background: #B42323; color: var(--white);
    font-size: 0.7rem; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
}
.asmt-alert[hidden] { display: none; }
.asmt-alert.shake { animation: asmtShake 0.32s ease; }
@keyframes asmtShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-5px); }
    75%      { transform: translateX(5px); }
}

/* ---------- Question cards ---------- */
.modal-assessment .jobasmt-list { gap: 14px; }
.modal-assessment .jobasmt-item {
    padding: 18px 20px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.modal-assessment .jobasmt-item:focus-within {
    border-color: var(--cyan);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(63, 182, 201, 0.14);
}
.modal-assessment .jobasmt-q {
    font-size: 0.95rem;
    margin-bottom: 14px;
}
.modal-assessment .jobasmt-input {
    padding: 12px 14px;
    line-height: 1.55;
    min-height: 46px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.modal-assessment .jobasmt-input::placeholder { color: #9AA7B8; }
.modal-assessment .jobasmt-input:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(63, 182, 201, 0.16);
}

/* Unanswered required question, flagged in place on submit. */
.jobasmt-item.has-error {
    border-color: #E2A2A2;
    background: #FEF7F7;
    box-shadow: 0 0 0 3px rgba(180, 35, 35, 0.08);
}
.jobasmt-item.has-error .jobasmt-n { background: #B42323; }
.jobasmt-item.has-error .jobasmt-input { border-color: #E2A2A2; }
.jobasmt-item.has-error::after {
    content: "This question is required.";
    display: block; margin-top: 9px;
    font-size: 0.78rem; font-weight: 700; color: #B42323;
}

/* ---------- Footer + submit state ---------- */
#assessmentOverlay .modal-foot.asmt-foot {
    padding: 18px 28px;
    border-top: 1px solid var(--border);
    background: #FCFDFF;
    border-radius: 0 0 16px 16px;
    gap: 12px;
}
.asmt-foot .btn-submit { min-width: 190px; }
.asmt-foot .btn-ghost:disabled,
.asmt-foot .btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }

/* While the application is in flight the questions are locked, so a
   late edit can never disagree with what was already sent. */
#assessmentOverlay.submitting .jobasmt-list {
    opacity: 0.6;
    pointer-events: none;
}
#assessmentOverlay.submitting .modal-close { pointer-events: none; opacity: 0.4; }

@media (max-width: 640px) {
    .asmt-foot-right { display: flex; flex-direction: column-reverse; width: 100%; gap: 10px; }
    .asmt-foot-right .btn-ghost, .asmt-foot .btn-submit { width: 100%; }
    .asmt-progress { gap: 10px; }
}

/* ============================================================
   APPLICATION SUBMITTED POPUP  (added)
   Replaces the auto-dismissing success toast.
   ============================================================ */
#applySuccessOverlay { align-items: center; }
#applySuccessOverlay .modal-success { max-width: 460px; text-align: center; }
.as-body { padding: 34px 32px 26px; }
.as-icon {
    position: relative;
    width: 76px; height: 76px; margin: 0 auto 20px;
    color: #1E7A45;
    display: flex; align-items: center; justify-content: center;
}
.as-icon svg { width: 40px; height: 40px; position: relative; z-index: 1; }
.as-ring {
    position: absolute; inset: 0; border-radius: 50%;
    background: #E6F4EC;
    animation: asPop 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.as-tick {
    stroke-dasharray: 26; stroke-dashoffset: 26;
    animation: asTick 0.42s ease 0.2s forwards;
}
@keyframes asPop  { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes asTick { to { stroke-dashoffset: 0; } }
.as-title {
    font-size: 1.24rem; font-weight: 800; color: var(--navy);
    margin-bottom: 10px; letter-spacing: -0.2px;
}
.as-text { font-size: 0.93rem; color: var(--text-muted); line-height: 1.65; margin: 0; }
.as-list {
    list-style: none; margin: 18px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.as-list[hidden] { display: none; }
.as-list li {
    font-size: 0.78rem; font-weight: 700; color: #1E7A45;
    background: #E6F4EC; border-radius: 99px; padding: 5px 12px;
}
.as-list li::before { content: "\2713"; margin-right: 6px; }
.as-foot { padding: 18px 28px; border-top: 1px solid var(--border); justify-content: center; }
.as-foot .btn-primary { min-width: 160px; }

@media (prefers-reduced-motion: reduce) {
    .as-ring, .as-tick { animation: none; }
    .as-tick { stroke-dashoffset: 0; }
}

/* ============================================================
   ROLE ASSESSMENT — REDESIGN  (appended; overrides the earlier
   ".ASSESSMENT STEP POLISH" block by cascade order)
   ------------------------------------------------------------
   Presentation only. No id, class hook, data attribute or DOM
   contract that views.js reads is changed here — the renderer
   still emits .jobasmt-item / .jobasmt-input / .yesno-btn, so
   collect(), missingIds() and progress() are untouched.
   ============================================================ */

/* ---------- Shell ---------- */
.modal-assessment { max-width: 780px; }
.modal-assessment .modal-body {
    padding: 0 28px 28px;
    max-height: 72vh;
    scroll-behavior: smooth;
}

/* The stepper + counter stay visible while the questions scroll, so the
   candidate always knows which section they are in and how much is left. */
.modal-assessment .asmt-sticky {
    position: sticky; top: 0; z-index: 3;
    padding: 22px 0 16px;
    background: linear-gradient(180deg,
        var(--white) 0%, var(--white) 72%, rgba(255,255,255,0) 100%);
}

/* ---------- Section stepper ---------- */
.modal-assessment .apply-steps {
    display: flex; align-items: center; gap: 0;
    margin: 0 0 18px; padding: 0; list-style: none;
}
.modal-assessment .apply-steps li {
    position: relative;
    flex: 1 1 0;
    /* The base stepper indents for an absolutely positioned badge; this
       variant stacks the badge above the label, so that indent is removed. */
    padding-left: 0;
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.4px;
    text-transform: uppercase; color: var(--text-muted);
    text-align: center;
}
/* Connector rail between the numbered dots. */
.modal-assessment .apply-steps li:not(:first-child)::after {
    content: "";
    position: absolute; top: 12px; right: 50%; left: -50%;
    height: 2px; background: var(--border); z-index: 0;
    border-radius: 2px;
}
.modal-assessment .apply-steps li.done::after,
.modal-assessment .apply-steps li.active::after { background: var(--teal); }
.modal-assessment .apply-steps li::before {
    content: counter(step);
    counter-increment: step;
    /* Undo the base rule's absolute placement so the badge sits in flow. */
    position: relative; left: auto; top: auto; transform: none;
    z-index: 1;
    width: 25px; height: 25px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.74rem; font-weight: 800;
    background: var(--white); color: var(--text-muted);
    border: 2px solid var(--border);
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.modal-assessment .apply-steps { counter-reset: step; }
.modal-assessment .apply-steps li.done { color: var(--navy); }
.modal-assessment .apply-steps li.done::before {
    content: "\2713";
    background: #1E7A45; border-color: #1E7A45; color: var(--white);
}
.modal-assessment .apply-steps li.active { color: var(--navy); }
.modal-assessment .apply-steps li.active::before {
    background: var(--primary); border-color: var(--primary); color: var(--white);
    box-shadow: 0 0 0 4px rgba(37, 75, 118, 0.13);
}

/* ---------- Answered counter ---------- */
.asmt-progress {
    display: flex; align-items: center; gap: 14px;
    margin: 0; padding: 12px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.asmt-progress-count {
    font-size: 0.74rem; font-weight: 800; letter-spacing: 0.5px;
    text-transform: uppercase; color: var(--navy);
    white-space: nowrap;
}
.asmt-progress.complete { background: #F0F9F3; border-color: #C7E6D2; }
.asmt-progress.complete .asmt-progress-count { color: #1A6B3C; }
.asmt-progress-track {
    flex: 1; height: 7px; border-radius: 99px;
    background: #DFE7F1; overflow: hidden;
}
.asmt-progress-bar {
    display: block; height: 100%; width: 0; border-radius: 99px;
    background: linear-gradient(90deg, var(--cyan), var(--teal));
    transition: width 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.3s ease;
}
.asmt-progress.complete .asmt-progress-bar {
    background: linear-gradient(90deg, #1E7A45, #45A96B);
}

/* ---------- Validation summary ---------- */
.asmt-alert {
    display: flex; align-items: center; gap: 10px;
    margin: 14px 0 0; padding: 13px 15px;
    border-radius: 10px;
    background: #FDF2F2; border: 1px solid #F0C4C4;
    color: #8E1F1F; font-size: 0.87rem; font-weight: 600;
}

/* ---------- Question cards ---------- */
.modal-assessment .jobasmt-list {
    display: flex; flex-direction: column; gap: 16px;
    padding-top: 4px;
}
.modal-assessment .jobasmt-item {
    position: relative;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 14px;
    padding: 20px 22px;
    box-shadow: 0 1px 2px rgba(33, 69, 107, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    animation: asmtCardIn 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
    animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes asmtCardIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Accent rail that lights up as the question is dealt with. */
.modal-assessment .jobasmt-item::before {
    content: "";
    position: absolute; left: 0; top: 16px; bottom: 16px;
    width: 3px; border-radius: 0 3px 3px 0;
    background: transparent;
    transition: background 0.2s ease;
}
.modal-assessment .jobasmt-item:hover {
    border-color: #CFDCEA;
    box-shadow: 0 4px 14px rgba(33, 69, 107, 0.07);
}
.modal-assessment .jobasmt-item:focus-within {
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(63, 182, 201, 0.15);
}
.modal-assessment .jobasmt-item:focus-within::before { background: var(--cyan); }

/* ---------- Question header ---------- */
.jobasmt-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: start;
    gap: 12px;
    margin-bottom: 14px;
}
.modal-assessment .jobasmt-n {
    flex-shrink: 0;
    width: 26px; height: 26px; border-radius: 8px;
    background: var(--navy); color: var(--white);
    font-size: 0.78rem; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.2s ease;
}
.jobasmt-qwrap { min-width: 0; }
.modal-assessment .jobasmt-q {
    margin: 0 0 6px;
    font-size: 0.99rem; font-weight: 650; line-height: 1.5;
    color: var(--navy);
    letter-spacing: -0.1px;
}
.jobasmt-tag {
    display: inline-block;
    padding: 2px 9px; border-radius: 99px;
    font-size: 0.64rem; font-weight: 800;
    letter-spacing: 0.6px; text-transform: uppercase;
}
.jobasmt-tag.is-required { background: #FDF0F0; color: #A82A2A; border: 1px solid #F2CFCF; }
.jobasmt-tag.is-optional { background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); }

/* Answered check, hidden until the question has a value. */
.jobasmt-tick {
    width: 22px; height: 22px; border-radius: 50%;
    background: #E9F5EE; border: 1.5px solid #C7E6D2;
    display: inline-flex; align-items: center; justify-content: center;
    opacity: 0; transform: scale(0.6);
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.jobasmt-tick::after {
    content: "\2713";
    font-size: 0.7rem; font-weight: 800; color: #1E7A45;
}
.jobasmt-item.is-answered .jobasmt-tick { opacity: 1; transform: scale(1); }
.jobasmt-item.is-answered .jobasmt-n { background: #1E7A45; }
.modal-assessment .jobasmt-item.is-answered::before { background: #1E7A45; }

/* ---------- Text inputs ---------- */
.modal-assessment .jobasmt-input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    font-family: inherit; font-size: 0.94rem; line-height: 1.6;
    color: var(--text); background: var(--white);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.modal-assessment .jobasmt-textarea { min-height: 84px; resize: vertical; overflow: hidden; }
.modal-assessment .jobasmt-input::placeholder { color: #A3AFBE; }
.modal-assessment .jobasmt-input:hover { border-color: #CFDCEA; }
.modal-assessment .jobasmt-input:focus {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(63, 182, 201, 0.16);
}

/* ---------- Dropdown ---------- */
.jobasmt-selectwrap { position: relative; }
.jobasmt-selectwrap::after {
    content: "";
    position: absolute; right: 15px; top: 50%;
    width: 8px; height: 8px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}
.modal-assessment .jobasmt-select {
    appearance: none; -webkit-appearance: none;
    padding-right: 38px; cursor: pointer;
}

/* ---------- Choice pills ---------- */
.modal-assessment .jobasmt-choice {
    display: flex; flex-wrap: wrap; gap: 10px;
}
.modal-assessment .jobasmt-pill {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 10px 16px;
    border: 1.5px solid var(--border); border-radius: 10px;
    background: var(--white);
    font-family: inherit; font-size: 0.9rem; font-weight: 600;
    color: var(--text); cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease,
                color 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease;
}
.modal-assessment .jobasmt-pill:hover {
    border-color: var(--cyan); background: var(--cyan-light);
    transform: translateY(-1px);
}
.modal-assessment .jobasmt-pill:active { transform: translateY(0) scale(0.98); }
.modal-assessment .jobasmt-pill:focus-visible {
    outline: none; box-shadow: 0 0 0 3px rgba(63, 182, 201, 0.28);
}
/* Radio-style mark for single-select, box-style for multi-select. */
.jobasmt-pill-mark {
    flex-shrink: 0;
    width: 16px; height: 16px;
    border: 2px solid #C4D0DE; border-radius: 50%;
    display: inline-block; position: relative;
    transition: border-color 0.16s ease, background 0.16s ease;
}
.jobasmt-choice[data-multi] .jobasmt-pill-mark { border-radius: 5px; }
.modal-assessment .jobasmt-pill.selected {
    background: var(--primary); border-color: var(--primary);
    color: var(--white);
    box-shadow: 0 2px 8px rgba(37, 75, 118, 0.22);
}
.modal-assessment .jobasmt-pill.selected .jobasmt-pill-mark {
    background: var(--white); border-color: var(--white);
}
.modal-assessment .jobasmt-pill.selected .jobasmt-pill-mark::after {
    content: "";
    position: absolute; left: 3px; top: 3px;
    width: 6px; height: 6px; border-radius: inherit;
    background: var(--primary);
}
.jobasmt-choice[data-multi] .jobasmt-pill.selected .jobasmt-pill-mark::after {
    left: 1px; top: -1px;
    width: 9px; height: 5px; border-radius: 0;
    background: transparent;
    border-left: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(-45deg);
}
/* A "No" answer reads as a rejection, so it is not tinted like a choice. */
.modal-assessment .jobasmt-pill.selected[data-val="No"] {
    background: #B42323; border-color: #B42323;
    box-shadow: 0 2px 8px rgba(180, 35, 35, 0.22);
}
.modal-assessment .jobasmt-pill.selected[data-val="No"] .jobasmt-pill-mark::after { background: #B42323; }

.jobasmt-hint {
    margin: 9px 0 0;
    font-size: 0.77rem; color: var(--text-muted); font-weight: 500;
}

/* ---------- Inline validation ---------- */
.jobasmt-err {
    display: none;
    margin: 10px 0 0;
    font-size: 0.79rem; font-weight: 700; color: #B42323;
}
.jobasmt-err::before {
    content: "!";
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; margin-right: 7px;
    border-radius: 50%; background: #B42323; color: var(--white);
    font-size: 0.62rem; font-weight: 800;
    vertical-align: -2px;
}
.modal-assessment .jobasmt-item.has-error {
    border-color: #E7ADAD; background: #FFFCFC;
    box-shadow: 0 0 0 3px rgba(180, 35, 35, 0.07);
}
.modal-assessment .jobasmt-item.has-error::before { background: #B42323; }
.modal-assessment .jobasmt-item.has-error .jobasmt-n { background: #B42323; }
.modal-assessment .jobasmt-item.has-error .jobasmt-input { border-color: #E7ADAD; }
.jobasmt-item.has-error .jobasmt-err { display: block; }
/* The old generic message was injected with ::after on the card; the real
   <p class="jobasmt-err"> replaces it, so suppress the duplicate. */
.jobasmt-item.has-error::after { content: none !important; display: none !important; }

/* ---------- Footer ---------- */
#assessmentOverlay .modal-foot.asmt-foot {
    padding: 18px 28px;
    border-top: 1px solid var(--border);
    background: #FCFDFF;
    border-radius: 0 0 16px 16px;
    gap: 12px;
}
.asmt-foot .btn-submit { min-width: 200px; }

/* ---------- Responsive ---------- */
@media (max-width: 680px) {
    .modal-assessment .modal-body { padding: 0 18px 20px; max-height: 76vh; }
    .modal-assessment .asmt-sticky { padding: 16px 0 12px; }
    .modal-assessment .apply-steps li { font-size: 0; gap: 0; }
    .modal-assessment .apply-steps li::before { width: 22px; height: 22px; }
    .modal-assessment .apply-steps li:not(:first-child)::after { top: 10px; }
    .modal-assessment .jobasmt-item { padding: 16px 16px 16px 18px; border-radius: 12px; }
    .modal-assessment .jobasmt-q { font-size: 0.94rem; }
    .jobasmt-head { gap: 10px; margin-bottom: 12px; }
    .modal-assessment .jobasmt-choice { gap: 8px; }
    .modal-assessment .jobasmt-pill { width: 100%; justify-content: flex-start; }
    .jobasmt-choice[data-single] .jobasmt-pill { width: auto; flex: 1 1 40%; }
    .asmt-progress { padding: 10px 12px; gap: 10px; }
    .asmt-progress-count { font-size: 0.68rem; }
}

@media (prefers-reduced-motion: reduce) {
    .modal-assessment .jobasmt-item { animation: none; }
    .modal-assessment .jobasmt-item,
    .modal-assessment .jobasmt-pill,
    .jobasmt-tick,
    .asmt-progress-bar { transition: none; }
    .modal-assessment .jobasmt-pill:hover { transform: none; }
}

/* ============================================================
   ROLE ASSESSMENT — PAGINATED VIEW  (appended; overrides above)
   ------------------------------------------------------------
   One question per screen with a review step. Presentation only:
   .is-hidden merely hides a card, it never removes it, so the
   answer collector and validator in views.js still see them all.
   ============================================================ */

/* Only the current question is visible. */
.jobasmt-item.is-hidden { display: none !important; }

/* Slide the question panel on each step change. */
.modal-assessment .jobasmt-list.slide-in {
    animation: asmtSlideIn 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes asmtSlideIn {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: translateX(0); }
}
/* The per-card stagger belongs to a list; a single card should just appear. */
.modal-assessment .jobasmt-item { animation: none; }

/* ---------- Position indicator ---------- */
.asmt-nav {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; margin: 12px 0 0;
}
.asmt-nav[hidden] { display: none; }
.asmt-nav-label {
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.6px;
    text-transform: uppercase; color: var(--text-muted); white-space: nowrap;
}
.asmt-dots { display: inline-flex; align-items: center; gap: 7px; }
.asmt-dot {
    width: 9px; height: 9px; padding: 0;
    border: none; border-radius: 50%;
    background: #D3DCE8; cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.asmt-dot:hover { background: var(--cyan); transform: scale(1.2); }
.asmt-dot.is-done { background: #6FBF8E; }
.asmt-dot.is-current {
    width: 22px; border-radius: 99px;
    background: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 75, 118, 0.13);
}
.asmt-dot.is-review { border: 1.5px solid #C3CFDE; background: transparent; }
.asmt-dot.is-review.is-current { border-color: var(--primary); background: var(--primary); }
.asmt-dot:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(63, 182, 201, 0.35); }

/* ---------- The single visible question, given room to breathe ---------- */
.modal-assessment .jobasmt-list { padding-top: 18px; gap: 0; }
.modal-assessment .jobasmt-item {
    padding: 26px 28px;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(33, 69, 107, 0.05);
}
.modal-assessment .jobasmt-item:hover { transform: none; }
.modal-assessment .jobasmt-q {
    font-size: 1.06rem; line-height: 1.55; margin: 0;
    /* Inline so the Required/Optional pill sits at the end of the question
       instead of taking a whole row of its own. */
    display: inline;
}
.jobasmt-head { margin-bottom: 18px; }
.modal-assessment .jobasmt-n { width: 28px; height: 28px; font-size: 0.82rem; }
.jobasmt-tag { margin-left: 9px; vertical-align: 2px; }
.modal-assessment .jobasmt-textarea { min-height: 132px; }
.modal-assessment .jobasmt-input { font-size: 0.97rem; padding: 14px 16px; }

/* ---------- Review step ---------- */
.asmt-review { padding: 18px 0 4px; animation: asmtSlideIn 0.28s cubic-bezier(0.22,0.61,0.36,1); }
.asmt-review[hidden] { display: none; }
.asmt-review-title {
    font-size: 1.06rem; font-weight: 750; color: var(--navy); margin: 0 0 4px;
}
.asmt-review-sub { font-size: 0.87rem; color: var(--text-muted); margin: 0 0 18px; }
.asmt-review-list { list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 12px; }
.asmt-review-item {
    background: var(--white); border: 1.5px solid var(--border);
    border-radius: 12px; padding: 16px 18px;
    border-left: 3px solid #1E7A45;
}
.asmt-review-item.is-empty { border-left-color: #D8DFE9; background: #FCFDFE; }
.asmt-review-head {
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: start; gap: 10px; margin-bottom: 8px;
}
.asmt-review-n {
    width: 22px; height: 22px; border-radius: 7px;
    background: var(--navy); color: var(--white);
    font-size: 0.72rem; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center;
}
.asmt-review-item.is-empty .asmt-review-n { background: #AEBACA; }
.asmt-review-q {
    margin: 0; font-size: 0.88rem; font-weight: 650;
    color: var(--navy); line-height: 1.5;
}
.asmt-review-edit {
    border: 1px solid var(--border); background: var(--white);
    border-radius: 8px; padding: 4px 12px;
    font-family: inherit; font-size: 0.74rem; font-weight: 700;
    color: var(--primary); cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease;
}
.asmt-review-edit:hover { border-color: var(--cyan); background: var(--cyan-light); }
.asmt-review-a {
    margin: 0; padding-left: 32px;
    font-size: 0.91rem; line-height: 1.6; color: var(--text);
    white-space: pre-wrap; word-break: break-word;
}
.asmt-review-item.is-empty .asmt-review-a {
    color: #93A1B2; font-style: italic;
}

/* The submit button only reads as final on the review step. */
.asmt-foot .btn-submit { min-width: 150px; }
.asmt-foot .btn-submit.is-final { min-width: 200px; }

/* ---------- Responsive ---------- */
@media (max-width: 680px) {
    .modal-assessment .jobasmt-item { padding: 20px 18px; border-radius: 14px; }
    .modal-assessment .jobasmt-q { font-size: 0.99rem; }
    .asmt-nav { flex-direction: column; align-items: flex-start; gap: 9px; }
    .asmt-review-a { padding-left: 0; }
    .asmt-review-head { grid-template-columns: auto 1fr; }
    .asmt-review-edit { grid-column: 2; justify-self: start; margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .modal-assessment .jobasmt-list.slide-in,
    .asmt-review { animation: none; }
    .asmt-dot { transition: none; }
    .asmt-dot:hover { transform: none; }
}