/* ============================================================
   job.css: the DM setter application page (job.html, /job) ONLY.
   ------------------------------------------------------------
   Loaded AFTER styles.css. /job shipped on its own, ahead of the calculator
   work that added several wizard components to styles.css, so this file
   carries every rule the job wizard needs that the shared stylesheet may not
   have yet (progress bar, multi-select cards, picked state, textarea). Every
   rule is scoped to #jobPage, so it can never leak onto another page, and once
   styles.css carries the same components the duplicates are harmless.

   The wizard itself is built by job.js with the shared .qualify / .qstep /
   .qchoice / .qform family; the stats strip and coach wheel are the global
   .credibility / .wheel-sec components from styles.css.
   ============================================================ */

/* ---------- wizard components (mirrors styles.css) ---------- */
#jobPage .qprog { margin: -14px 0 26px; }
#jobPage .qprog__bar {
  height: 5px;
  border-radius: 99px;
  background: rgba(255,255,255,0.09);
  overflow: hidden;
}
#jobPage .qprog__fill {
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .32s cubic-bezier(.4,0,.2,1);
}
@media (prefers-reduced-motion: reduce) { #jobPage .qprog__fill { transition: none; } }
#jobPage .qchoice.is-picked {
  border-color: var(--accent);
  background: rgba(30,162,255,0.14);
}
#jobPage .qchoices--multi { gap: 11px; }
#jobPage .qchoice--multi {
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
  padding: 16px 18px;
}
#jobPage .qchoice--multi[aria-pressed="true"] {
  border-color: var(--accent);
  background: rgba(30,162,255,0.12);
}
#jobPage .qchoice__label { flex: 1 1 auto; }
#jobPage .qform--multi { margin-top: 18px; max-width: 420px; margin-left: auto; margin-right: auto; }
#jobPage .qfield textarea {
  width: 100%;
  min-height: 132px;
  resize: vertical;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: #fff;
  background: #141414;
  border: 1.5px solid rgba(30,162,255,0.22);
  border-radius: 10px;
  padding: 15px 16px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
#jobPage .qfield textarea::placeholder { color: #5f5f5f; }
#jobPage .qfield textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(30,162,255,0.18); }
#jobPage .qfield textarea.is-invalid { border-color: #e0473a; }
@media (max-width: 480px) {
  #jobPage .qchoice--multi { padding: 14px 14px; font-size: 15px; }
  #jobPage .qfield textarea { font-size: 15px; padding: 13px 14px; }
}

/* ---------- page shell ----------
   Like #bookPage it is NOT .page, so no zoom and an explicit z-index to sit
   above the fixed .app-bg. */
#jobPage {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: 44px 20px 60px;
}
#jobPage .job-hero { text-align: center; max-width: 900px; margin: 0 auto; }
#jobPage .job-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(26px, 3.5vw, 42px);
  line-height: 1.18;
  color: #fff;
  margin: 0;
}
#jobPage .job-title__line { display: block; }
@media (min-width: 700px) { #jobPage .job-title__line { white-space: nowrap; } }
#jobPage .job-title .hl { color: var(--accent); }
#jobPage .job-sec { margin-top: 76px; text-align: center; }
/* The application sits directly under the headline, so it reads as one block
   with it rather than as the next section down. */
#jobPage .job-apply { margin-top: 34px; }
/* Clear air between the stats heading and the strip's top rule. */
#jobPage .proof .wheel-sec__title { margin-bottom: 26px; }
#jobPage .wheel-sec__sub { max-width: 680px; margin-left: auto; margin-right: auto; }
#jobPage .job-apply .qualify { max-width: 820px; margin: 22px auto 0; animation: none; text-align: center; }
/* Long briefs (the experience and intro video questions) read as a paragraph, not
   a caption, and their lists need their markers back. */
#jobPage .jobq__sub { text-align: left; max-width: 560px; margin-left: auto; margin-right: auto; }
#jobPage .jobq__list { margin: 8px 0 10px; padding-left: 22px; }
#jobPage .jobq__list li { margin: 3px 0; }
#jobPage .jobq__done .qstep__sub { text-align: center; margin: 0 auto; }
#jobPage .qfield input[type="date"] { color-scheme: dark; }
#jobPage .qform__submit:disabled { opacity: 0.6; cursor: wait; }
#jobPage .job-foot { margin-top: 56px; text-align: center; font-size: 14px; line-height: 1.8; color: var(--muted); }
#jobPage .job-foot a { color: var(--accent); text-decoration: none; }

@media (max-width: 480px) {
  #jobPage { padding: 28px 14px 44px; }
  #jobPage .job-sec { margin-top: 54px; }
}