/* StarWebX Hiring: public application form (mobile-first). */
/* Hero: layered glows over midnight navy with a faint grid texture */
.hero { position: relative; overflow: hidden; background: var(--hero-bg); color: #fff; padding: 16px 16px 76px; }
.hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(180deg, #000 0%, transparent 85%); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); pointer-events: none; }
.hero-inner { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.hero h1 { font-size: 1.55rem; font-weight: 800; margin-top: 1.25rem; letter-spacing: -.025em; line-height: 1.2; }
.hero-accent { background: linear-gradient(90deg, #f3d48a, #c9a043); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { margin-top: .4rem; font-size: .9rem; color: rgba(255, 255, 255, .78); }
.hero-chips { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.hero-chips li { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 999px; font-size: .74rem; font-weight: 600; color: rgba(255, 255, 255, .92); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(6px); }
.hero-chips svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.shell { position: relative; z-index: 2; max-width: 820px; margin: -58px auto 0; padding: 0 12px calc(32px + env(safe-area-inset-bottom)); }

.state { padding: 2rem 1.25rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .75rem; color: var(--muted); }
.state.success { color: var(--text); }
.tick { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--gradient); box-shadow: 0 0 0 8px var(--primary-soft), 0 12px 28px -6px rgba(26, 86, 219, .5); }
.state.success h2 { font-size: 1.3rem; }
.app-code { display: inline-block; padding: .15rem .6rem; border-radius: 8px; font-size: 1.05rem; color: var(--navy); background: var(--gold-soft); border: 1px dashed var(--gold); letter-spacing: .05em; }

.form { padding: 16px; }
.hp { position: absolute; left: -9999px; }

/* Stepper: always one horizontal row; circles joined by a connector line that fills as steps are completed */
.stepper { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.stepper li { position: relative; display: flex; flex-direction: column; align-items: center; gap: .35rem; font-size: .68rem; color: var(--faint); font-weight: 600; min-width: 0; text-align: center; }
.stepper li:not(:first-child)::before { content: ''; position: absolute; top: 13px; right: calc(50% + 16px); left: calc(-50% + 16px); height: 3px; border-radius: 3px; background: var(--border); transition: background .3s; }
.stepper li.done::before, .stepper li.active::before { background: var(--gradient); }
.stepper span { position: relative; z-index: 1; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--border); font-size: .78rem; background: var(--surface); transition: all .2s; }
.stepper em { max-width: 100%; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Small phones: only the current step's label, so labels never crowd */
@media (max-width: 479px) { .stepper li:not(.active) em { visibility: hidden; } }
.stepper li.active { color: var(--primary); }
.stepper li.active span { border-color: var(--primary); background: var(--primary); color: #fff; box-shadow: 0 0 0 4px var(--primary-soft); }
.stepper li.done { color: var(--success); }
.stepper li.done span { border-color: var(--success); background: var(--success); color: #fff; }

.step-title { font-size: 1.2rem; font-weight: 800; }
.step-sub { color: var(--muted); font-size: .88rem; margin: .25rem 0 1rem; }
.section-title { font-size: .95rem; margin: 1.4rem 0 .8rem; padding-top: 1.1rem; border-top: 1px dashed var(--border); }
.section-title.first { margin-top: 0; padding-top: 0; border-top: 0; }
.note { background: var(--primary-soft); color: var(--text); padding: .65rem .85rem; border-radius: var(--radius-sm); font-size: .86rem; margin-bottom: 1rem; }

.selected-job { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .6rem; padding: .6rem .85rem; margin-bottom: 1rem; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); font-size: .86rem; }
.selected-job:empty { display: none; }
.selected-job span { color: var(--muted); }
.selected-job .link-btn { margin-left: auto; }

.job-cards { display: grid; grid-template-columns: 1fr; gap: .65rem; }
.job-card { position: relative; display: flex; align-items: center; gap: .85rem; padding: .9rem; border: 1.5px solid var(--border); border-radius: var(--radius); cursor: pointer; background: var(--surface); transition: border-color .15s, background .15s, box-shadow .15s, transform .15s; }
.job-card:hover { border-color: #b9c9ea; transform: translateY(-1px); box-shadow: var(--shadow); }
.job-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.job-icon { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: var(--primary); background: var(--primary-soft); transition: all .15s; }
.job-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.job-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.job-card strong { font-family: var(--font-head); font-size: 1rem; }
.job-card small { color: var(--muted); font-size: .8rem; line-height: 1.4; }
.job-badge { align-self: flex-start; margin-top: .3rem; padding: .12rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; color: #8a6414; background: var(--gold-soft); border: 1px solid rgba(201, 160, 67, .45); }
.job-check { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); transition: all .15s; }
.job-card:has(input:checked) { border-color: var(--primary); background: linear-gradient(180deg, var(--primary-soft), var(--surface)); box-shadow: 0 10px 24px -10px rgba(26, 86, 219, .45); }
.job-card:has(input:checked) .job-icon { background: var(--gradient); color: #fff; }
.job-card:has(input:checked) .job-check { border-color: var(--primary); background: var(--primary); box-shadow: inset 0 0 0 4px var(--surface); }
.job-card:has(input:focus-visible) { box-shadow: var(--focus); }

.dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-height: 88px; padding: .9rem; border: 2px dashed var(--border); border-radius: var(--radius-sm); text-align: center; cursor: pointer; background: var(--surface-2); transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone.drag { border-color: var(--primary); background: var(--primary-soft); }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dz-text { font-size: .86rem; font-weight: 600; color: var(--text); }
.file-list { display: flex; flex-direction: column; gap: .4rem; }
.file-list:empty { display: none; }
.file-item { display: flex; align-items: center; gap: .55rem; padding: .4rem .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: .82rem; background: var(--surface); }
.file-item img { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; }
.file-icon { width: 30px; height: 30px; padding: 4px; color: var(--primary); background: var(--primary-soft); border-radius: 6px; flex: none; }
.file-item .fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-item .fsize { color: var(--faint); flex: none; }

.questions { display: flex; flex-direction: column; gap: .75rem; }
.question { border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem; margin: 0; background: var(--surface-2); min-width: 0; }
.question.invalid { border-color: var(--danger); }
.question legend { float: left; width: 100%; display: flex; gap: .45rem; font-weight: 600; font-size: .92rem; margin-bottom: .65rem; padding: 0; }
.q-num { flex: none; color: var(--primary); }
.q-options { clear: both; display: flex; flex-direction: column; gap: .45rem; }
.option { position: relative; display: flex; gap: .6rem; align-items: flex-start; min-height: var(--tap); padding: .6rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; font-size: .88rem; transition: border-color .15s, background .15s; }
.option input { margin-top: .2rem; accent-color: var(--primary); flex: none; width: 18px; height: 18px; }
.option:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }

.declaration { margin-top: 1.25rem; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; cursor: pointer; }
.check input { margin-top: .15rem; accent-color: var(--primary); width: 18px; height: 18px; flex: none; }

/* Sticky action bar on phones keeps Back / Continue within thumb reach */
.form-nav { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: .6rem; margin: 1.25rem -16px -16px; padding: .75rem 16px calc(.75rem + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); }
.form-nav .btn-primary { margin-left: auto; flex: 1; }
.step-count { display: none; color: var(--faint); font-size: .8rem; }

/* Skeleton form */
.skeleton-form { display: flex; flex-direction: column; }
.sk-stepper { display: flex; justify-content: space-between; margin-bottom: 1.25rem; }
.sk-dot { width: 28px; height: 28px; border-radius: 50%; }
.sk-cards { display: grid; gap: .65rem; margin: .6rem 0 1rem; }
.sk-card { height: 78px; border-radius: var(--radius); }
.sk-row { display: grid; gap: .75rem; margin-top: .6rem; }
.sk-input { height: 44px; border-radius: var(--radius-sm); }
.loading-note { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1.1rem; color: var(--muted); font-size: .86rem; text-align: center; }
.loading-note .spinner { color: var(--primary); }
#load-error { gap: 1rem; }

@media (min-width: 640px) {
  .hero { padding: 20px 24px 84px; }
  .hero h1 { font-size: 2.1rem; }
  .shell { margin-top: -64px; padding: 0 20px 48px; }
  .form { padding: 24px 28px; }
  .stepper li { font-size: .78rem; }
  .stepper span { width: 32px; height: 32px; }
  .stepper li:not(:first-child)::before { top: 15px; right: calc(50% + 18px); left: calc(-50% + 18px); }
  .job-cards, .sk-cards { grid-template-columns: repeat(2, 1fr); }
  .sk-row { grid-template-columns: 1fr 1fr; }
  .question { padding: 1rem 1.1rem; }
  .form-nav { position: static; margin: 1.5rem 0 0; padding: 1.1rem 0 0; background: none; border-radius: 0; }
  .form-nav .btn-primary { flex: none; min-width: 170px; }
  .step-count { display: inline; }
}