/* =============================================================
   ENS Immigration Advice — questionnaire.css
   Styling for the multi-step client questionnaire wizard
   (naturalisation onboarding form). Loaded only on
   /apply/naturalisation/. Reuses form-field styling from
   components.css; adds wizard chrome, choice pills, repeaters,
   conditional blocks and the review/success panels.
   ============================================================= */

.q-shell{background:var(--paper);}
.q-wrap{max-width:820px;margin:0 auto;padding:0 20px;}

/* ---------- Language switcher ---------- */
.q-langbar{display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin:20px 0 4px;}
.q-langbar-label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--slate-light);margin-right:2px;}
.q-lang{
  display:inline-block;padding:5px 12px;border:1px solid var(--line);border-radius:var(--radius);
  font-size:13.5px;color:var(--slate);text-decoration:none;background:var(--cream);transition:all .12s;
}
.q-lang:hover{border-color:var(--sage);color:var(--ink-deep);}
.q-lang.is-active{background:var(--ink);border-color:var(--ink);color:var(--cream);font-weight:600;pointer-events:none;}

/* ---------- Intro callout (absence limits / instructions) ---------- */
.q-callout{
  border:1px solid var(--line);
  border-left:4px solid var(--sage);
  background:var(--cream);
  padding:20px 22px;border-radius:var(--radius);
  margin:22px 0;
}
.q-callout--accent{border-left-color:var(--brass);background:#FCF3F0;border-color:#F1D9D1;}
.q-callout h3{font-size:16px;margin:0 0 8px;color:var(--ink-deep);}
.q-callout p{margin:0 0 8px;font-size:14.5px;color:var(--slate);}
.q-callout ul{margin:8px 0 0;padding-left:20px;}
.q-callout li{font-size:14.5px;color:var(--slate);margin-bottom:6px;}
.q-callout p:last-child,.q-callout li:last-child{margin-bottom:0;}

/* ---------- Progress bar (sticky) ---------- */
.q-progress{
  position:sticky;top:var(--q-hh,66px);z-index:20;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  padding:12px 0;margin-bottom:6px;
}
.q-progress-inner{max-width:820px;margin:0 auto;padding:0 20px;}
.q-progress-meta{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.04em;
  color:var(--slate-light);text-transform:uppercase;margin-bottom:8px;
}
.q-progress-meta .q-step-name{color:var(--ink);font-weight:600;text-transform:none;letter-spacing:0;font-family:'Bai Jamjuree',sans-serif;font-size:14px;}
.q-progress-track{height:6px;background:var(--paper-dim);border-radius:99px;overflow:hidden;}
.q-progress-fill{height:100%;width:0;background:var(--brass);border-radius:99px;transition:width .3s ease;}

/* ---------- Card + steps ---------- */
.q-card{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px 34px 26px;
  margin:14px 0 40px;
  box-shadow:0 1px 2px rgba(23,63,53,.04);
}
.q-step{display:none;}
.q-step.is-active{display:block;animation:qfade .25s ease;}
.no-js .q-step{display:block;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:26px;}
@keyframes qfade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

.q-step-eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brass);margin:0 0 6px;
}
.q-step > h2{font-size:clamp(20px,2.6vw,26px);color:var(--ink-deep);margin:0 0 6px;line-height:1.2;}
.q-step-help{color:var(--slate-light);font-size:14px;margin:0 0 22px;max-width:60ch;}

/* ---------- Fields (build on components.css .form-grid/.form-field) ---------- */
.q-field{margin-bottom:18px;}
.q-field > label{display:block;font-weight:600;font-size:14.5px;color:var(--ink-deep);margin-bottom:6px;}
.q-field .q-sub{display:block;font-weight:400;color:var(--slate-light);font-size:13px;margin-top:2px;}
.q-field input[type=text],
.q-field input[type=email],
.q-field input[type=tel],
.q-field input[type=date],
.q-field input[type=number],
.q-field select,
.q-field textarea{
  width:100%;font-family:inherit;font-size:15px;color:var(--slate);
  padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--cream);transition:border-color .15s,box-shadow .15s;
}
.q-field input:focus,.q-field select:focus,.q-field textarea:focus{
  outline:none;border-color:var(--sage);box-shadow:0 0 0 3px rgba(85,124,112,.15);
}
.q-field textarea{min-height:96px;resize:vertical;}
.q-field .req{color:var(--brass);}
.q-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.q-three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
.field-error{display:block;color:var(--brass-dark);font-size:12.5px;margin-top:5px;min-height:1em;}
.q-field.has-error input,.q-field.has-error select,.q-field.has-error textarea{border-color:var(--brass-dark);}
.q-check.has-error label{color:var(--brass-dark);font-weight:600;}
.q-choice.has-error,.q-field.has-error > .q-choice{outline:1px solid var(--brass-light);outline-offset:4px;border-radius:var(--radius);}

/* ---------- Choice pills (Yes/No, radios) ---------- */
.q-choice{display:flex;flex-wrap:wrap;gap:10px;}
.q-choice label{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 16px;font-size:14.5px;color:var(--slate);
  background:var(--cream);transition:all .12s;user-select:none;
}
.q-choice label:hover{border-color:var(--sage);}
.q-choice input{accent-color:var(--ink);margin:0;}
.q-choice input:checked + span{font-weight:600;color:var(--ink-deep);}
.q-choice label:has(input:checked){border-color:var(--ink);background:var(--paper-dim);}
.q-choice--stack{flex-direction:column;align-items:stretch;}
.q-choice--stack label{width:100%;}

/* checkbox rows (documents, declaration) */
.q-check{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--paper-dim);}
.q-check:last-child{border-bottom:none;}
.q-check input{margin-top:3px;accent-color:var(--ink);width:17px;height:17px;flex:0 0 auto;}
.q-check label{font-size:14px;color:var(--slate);line-height:1.45;cursor:pointer;}
.q-checklist{margin:6px 0 4px;}

/* ---------- Cross-field consistency warning ---------- */
.q-inconsistency{
  background:#FBEDE9;border:1px solid #F1C9BE;border-left:4px solid var(--brass);
  color:var(--brass-dark);padding:12px 15px;border-radius:var(--radius);
  font-size:13.5px;line-height:1.5;margin:14px 0 2px;
}
.q-inconsistency[hidden]{display:none;}
.q-inconsistency strong{color:var(--brass-dark);}
.q-inconsistency a{color:var(--brass-dark);}
/* soft "adviser will review" flag — amber, does not block submission */
.q-inconsistency--soft{background:#FBF4E6;border-color:#EAD9B0;border-left-color:#B7822A;color:#6C531A;}
.q-inconsistency--soft strong,.q-inconsistency--soft a{color:#6C531A;}

/* ---------- Conditional blocks ---------- */
.q-cond{
  border-left:2px solid var(--paper-dim);
  padding:4px 0 4px 18px;margin:4px 0 18px;
}
.q-cond[hidden]{display:none;}

/* ---------- Repeaters ---------- */
.repeater{margin:4px 0 8px;}
.repeat-row{
  position:relative;border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 18px 4px;margin-bottom:14px;background:var(--paper);
}
.repeat-row .repeat-num{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--slate-light);margin-bottom:10px;display:block;
}
.repeat-remove{
  position:absolute;top:12px;right:12px;border:1px solid var(--line);background:var(--cream);
  color:var(--brass-dark);font-size:12px;padding:4px 10px;border-radius:var(--radius);cursor:pointer;
}
.repeat-remove:hover{border-color:var(--brass);}
.repeat-add{
  border:1px dashed var(--sage);background:transparent;color:var(--ink);
  font-family:inherit;font-size:14px;font-weight:600;padding:11px 16px;border-radius:var(--radius);
  cursor:pointer;width:100%;transition:background .12s;
}
.repeat-add:hover{background:var(--paper-dim);}

/* ---------- Wizard nav ---------- */
.q-nav{display:flex;justify-content:space-between;gap:12px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line);}
.q-nav .btn{min-width:120px;}
.q-nav-spacer{flex:1;}
.no-js .q-nav{display:none;}

.q-save-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between;
  margin:2px 0 20px;font-size:13px;color:var(--slate-light);
}
.q-save-row label{display:inline-flex;align-items:center;gap:8px;cursor:pointer;}
.q-save-row input{accent-color:var(--ink);}
.q-linklike{background:none;border:none;color:var(--brass-dark);font:inherit;cursor:pointer;text-decoration:underline;padding:0;}

/* ---------- Review + status + success ---------- */
.q-review-list{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--line);}
.q-review-list li{display:flex;justify-content:space-between;gap:18px;padding:9px 0;border-bottom:1px solid var(--paper-dim);font-size:14px;}
.q-review-list .q-review-k{color:var(--slate-light);}
.q-review-list .q-review-v{color:var(--ink-deep);font-weight:600;text-align:right;}

.form-status{min-height:1.2em;font-size:14px;margin:8px 0;}
.form-status.is-error{color:var(--brass-dark);font-weight:600;}
.form-status.is-busy{color:var(--slate-light);}

.q-success{display:none;text-align:center;padding:30px 20px;}
.q-success.is-shown{display:block;animation:qfade .3s ease;}
.q-success svg{width:56px;height:56px;color:var(--sage);margin-bottom:14px;}
.q-success h2{color:var(--ink-deep);font-size:24px;margin:0 0 8px;}
.q-success p{color:var(--slate);max-width:52ch;margin:0 auto 6px;font-size:15px;}

/* ---------- Small print ---------- */
.q-legal{font-size:12.5px;color:var(--slate-light);line-height:1.55;margin-top:14px;}

/* ---------- Responsive ---------- */
@media (max-width:700px){
  .q-card{padding:22px 18px 20px;}
  .q-two,.q-three{grid-template-columns:1fr;}
  .q-nav{flex-direction:column-reverse;}
  .q-nav .btn{width:100%;}
  .q-progress-inner,.q-wrap{padding:0 16px;}
}