/* Octacer Careers — public apply + quiz wizard.
   Re-toned onto the canonical Octacer Design System (octacer-theme.css must load FIRST):
   deep-indigo brand, Inter, slate neutrals, matching shadows/radii/focus-ring. This file only
   adds the bespoke public-apply components (aurora, dropzone, quiz options, progress, checkmark)
   that the shared theme doesn't carry — all in the SAME palette so it matches octa-id 1:1. */

:root {
    /* Alias the shared theme tokens (single source of truth = octacer-theme.css) */
    --brand: var(--brand-600);        /* #4f46e5 */
    --brand-dark: var(--brand-700);   /* #4338ca */
    --brand-soft: var(--brand-50);    /* #eef2ff */
    --ink: var(--ink-900);
    --muted: var(--ink-500);
    /* Elevation — small layered shadows aligned to the theme */
    --e1: var(--shadow-sm);
    --e2: var(--shadow-sm);
    --e3: var(--shadow-md);
    --e4: var(--shadow-lg);
}

html { scroll-behavior: smooth; }

/* ---------- Skip to content (visually hidden until focused) ---------- */
.skip-link {
    position: absolute; left: .75rem; top: -3rem; z-index: 100;
    display: inline-flex; align-items: center;
    padding: .55rem .9rem; border-radius: .6rem;
    background: var(--brand-600); color: #fff; font-weight: 600; font-size: .875rem;
    text-decoration: none; box-shadow: var(--shadow-md);
    transition: top .18s ease;
}
.skip-link:focus-visible, .skip-link:focus { top: .75rem; outline: none; box-shadow: var(--shadow-md), var(--ring); }
#careers-main:focus { outline: none; }
/* body font/colour comes from octacer-theme.css (Inter, ink-900). */
::selection { background: rgba(79,70,229,.16); }

/* ---------- Depth: soft indigo aurora background ---------- */
.aurora {
    position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
    background: var(--bg);
}
.aurora::before, .aurora::after {
    content: ""; position: absolute; width: 60vmax; height: 60vmax; border-radius: 9999px;
    filter: blur(60px); opacity: .5; will-change: transform;
}
.aurora::before { background: radial-gradient(circle at 30% 30%, rgba(79,70,229,.22), transparent 60%); top: -18vmax; left: -12vmax; animation: drift1 22s ease-in-out infinite alternate; }
.aurora::after  { background: radial-gradient(circle at 70% 70%, rgba(99,102,241,.16), transparent 60%); bottom: -20vmax; right: -14vmax; animation: drift2 26s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate3d(6vmax, 4vmax, 0) scale(1.08); } }
@keyframes drift2 { to { transform: translate3d(-5vmax, -3vmax, 0) scale(1.05); } }

/* ---------- Layout shell ---------- */
.careers-shell { width: 100%; max-width: 46rem; margin: 0 auto; padding: 1rem; }
@media (min-width: 640px) { .careers-shell { padding: 1.5rem; } }
@media (min-width: 1024px) { .careers-shell { padding: 2rem 1rem; } }

.careers-hero {
    background: linear-gradient(135deg, var(--brand-800) 0%, var(--brand-700) 55%, var(--brand-600) 130%);
    color: #fff;
    box-shadow: var(--shadow-sm);
}

/* ---------- Cards ---------- */
.careers-card {
    background: rgba(255,255,255,.86);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow .25s ease, transform .25s ease;
}
.careers-card.lift:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
/* keyboard focus for cards that are links (job/org tiles in Listing/Home) */
.careers-card:focus-visible { outline: none; box-shadow: var(--shadow-md), var(--ring); }

/* iOS Safari leaves the page unresponsive after the native file picker closes when
   backdrop-filter layers are on screen. Touch devices don't need the frosted-glass effect. */
@media (hover: none) {
    .careers-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: #fff; }
    .submit-overlay { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(248,250,252,.94); }
}

/* ---------- Inputs ----------
   Element-qualified so the Tailwind `forms` plugin (loaded after) doesn't win the cascade. */
input.careers-input,
textarea.careers-input,
select.careers-input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: .75rem;
    padding: .8rem .9rem;
    font-size: 1rem;               /* 16px avoids iOS zoom */
    background: #fff;
    color: var(--ink-900);
    transition: border-color .18s, box-shadow .18s, background .18s;
}
input.careers-input::placeholder,
textarea.careers-input::placeholder { color: #b4bccb; }
input.careers-input:focus,
textarea.careers-input:focus,
select.careers-input:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: var(--ring);
}
.careers-input.invalid { border-color: var(--danger); animation: shake .3s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

/* ---------- Buttons ---------- */
.careers-btn {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 3rem; padding: 0 1.5rem;
    border-radius: .85rem; font-weight: 600; font-size: 1rem;
    background: linear-gradient(180deg, var(--brand-500), var(--brand-600)); color: #fff; border: 0;
    cursor: pointer; width: 100%;
    box-shadow: 0 8px 18px -8px rgba(79,70,229,.6);
    transition: transform .12s ease, box-shadow .2s ease, opacity .2s ease, filter .2s ease, background .2s ease;
}
@media (min-width: 640px) { .careers-btn { width: auto; } }
.careers-btn:hover { background: linear-gradient(180deg, var(--brand-600), var(--brand-700)); box-shadow: 0 12px 24px -10px rgba(79,70,229,.7); }
.careers-btn:focus-visible { outline: none; box-shadow: 0 8px 18px -8px rgba(79,70,229,.6), var(--ring); }
.careers-btn:active { transform: translateY(1px) scale(.99); }
.careers-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; filter: grayscale(.2); }
/* shine sweep */
.careers-btn::after {
    content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-20deg); transition: left .6s ease;
}
.careers-btn:hover::after { left: 130%; }
.careers-btn-ghost {
    background: #fff; color: var(--ink-700); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.careers-btn-ghost:hover { background: #f8fafc; border-color: #cbd5e1; filter: none; }
/* loading state — swap label for a spinner */
.careers-btn.is-loading { color: transparent; pointer-events: none; }
.careers-btn.is-loading::before {
    content: ""; position: absolute; width: 1.15rem; height: 1.15rem; border-radius: 9999px;
    border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; animation: oc-spin .7s linear infinite;
}

/* ---------- Option rows (quiz) ---------- */
.opt {
    display: flex; align-items: center; gap: .75rem;
    padding: .95rem 1rem;
    border: 1.5px solid var(--line); border-radius: .85rem;
    background: #fff; cursor: pointer; font-size: 1rem;
    transition: border-color .15s, background .15s, transform .12s, box-shadow .15s;
}
.opt:hover { border-color: var(--brand-300, #a5b4fc); background: var(--brand-soft); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
/* keyboard focus: the clickable row wraps a native radio/checkbox, so key off :focus-within */
.opt:focus-within { outline: none; border-color: var(--brand-600); box-shadow: var(--ring); }
.opt:active { transform: translateY(0) scale(.995); }
.opt input { width: 1.15rem; height: 1.15rem; accent-color: var(--brand-600); flex: 0 0 auto; }
.opt.is-selected { border-color: var(--brand-600); background: var(--brand-soft); box-shadow: 0 0 0 3px rgba(79,70,229,.10); }

/* ---------- Progress bar ---------- */
.progress-track { height: .55rem; background: var(--brand-100); border-radius: 9999px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--brand-600), var(--brand-400, #818cf8)); border-radius: 9999px; transition: width .5s cubic-bezier(.4,0,.2,1); }
.countdown-pulse { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .55; } }

/* ---------- Upload dropzone ---------- */
.dropzone { position: relative; }
.dropzone-inner {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
    text-align: center; padding: 1.4rem 1rem;
    border: 1.5px dashed #cbcbe0; border-radius: 1rem; background: #fbfbff;
    cursor: pointer; transition: border-color .18s, background .18s, transform .18s;
}
.dropzone-inner:hover { border-color: var(--brand-600); background: var(--brand-soft); }
/* keyboard focus: the visible label wraps the sr-only file input, so key off :focus-within */
.dropzone-inner:focus-within { outline: none; border-color: var(--brand-600); background: var(--brand-soft); box-shadow: var(--ring); }
.dropzone.is-drag .dropzone-inner { border-color: var(--brand-600); background: var(--brand-soft); transform: scale(1.01); }
.file-chip {
    display: flex; align-items: center; gap: .6rem;
    padding: .7rem .8rem; border: 1px solid var(--line); border-radius: .85rem; background: #fff; box-shadow: var(--shadow-sm);
    animation: pop .2s ease;
}
@keyframes pop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- Reveal on load (staggered) ---------- */
@keyframes reveal-up { from { opacity: 0; transform: translateY(14px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
.reveal > * { opacity: 0; animation: reveal-up .5s cubic-bezier(.22,1,.36,1) forwards; }
.reveal > *:nth-child(1) { animation-delay: .04s; }
.reveal > *:nth-child(2) { animation-delay: .12s; }
.reveal > *:nth-child(3) { animation-delay: .20s; }
.reveal > *:nth-child(4) { animation-delay: .28s; }
.reveal > *:nth-child(5) { animation-delay: .36s; }
.reveal-in { opacity: 0; animation: reveal-up .5s cubic-bezier(.22,1,.36,1) forwards; }

/* ---------- Stepper chips ---------- */
.step-chip { transition: background .25s, color .25s, transform .25s; }

/* ---------- Skeleton / shimmer ---------- */
.skeleton { position: relative; overflow: hidden; background: #eef1f5; border-radius: .6rem; }
.skeleton::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
    animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* ---------- Full-screen submit overlay ---------- */
.submit-overlay {
    position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center;
    background: rgba(248,250,252,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    animation: fade .25s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.submit-overlay .spinner {
    width: 3rem; height: 3rem; border-radius: 9999px;
    border: 3px solid var(--brand-100); border-top-color: var(--brand-600); animation: oc-spin .8s linear infinite;
}

/* ---------- Animated success checkmark ---------- */
.check-circle { width: 4.5rem; height: 4.5rem; }
.check-circle .circle { stroke: var(--brand-600); stroke-width: 3; fill: none; stroke-dasharray: 166; stroke-dashoffset: 166; animation: stroke .6s cubic-bezier(.65,0,.45,1) forwards; }
.check-circle .tick { stroke: var(--brand-600); stroke-width: 4; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke .35s cubic-bezier(.65,0,.45,1) .55s forwards; }
@keyframes stroke { to { stroke-dashoffset: 0; } }

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .reveal > *, .reveal-in { opacity: 1 !important; }
}