/* ============================================================
   ASSESSMENT INTAKE — scoped UI/UX refinements
   All rules are namespaced under .assessment-page so the shared
   counseling intake (intakeform.css) is never affected. Colors,
   branding and theme tokens are reused as-is (no new palette).
   Loaded AFTER intakeform.css so equal-specificity rules win.
   ============================================================ */

/* Slightly wider canvas for two-column layouts, comfortable rhythm */
.assessment-page .intake-wrapper { max-width: 920px; }

/* ---------- CONSENT SCREEN ---------- */
/* Long-form content should read top-down, not be vertically centered. */
.assessment-page #consent-screen {
  justify-content: flex-start;
  min-height: auto;
  text-align: left;
  align-items: stretch;
}
.assessment-page #consent-screen .select-screen__head { text-align: center; margin: 0 auto 24px; }

.assessment-page .consent-shell {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  /* Show the DPA and the Code of Ethics SIDE BY SIDE. The action bar spans both
     columns below them. Collapses to a single column on narrow screens. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
.assessment-page .consent-footer { grid-column: 1 / -1; }
@media (max-width: 860px) {
  .assessment-page .consent-shell { grid-template-columns: 1fr; }
}

.assessment-page .consent-card { margin: 0; }
.assessment-page .consent-card__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  color: var(--green-dark);
}
.assessment-page .consent-card__title svg {
  width: 20px; height: 20px; flex: 0 0 auto;
  fill: var(--green-primary);
}

/* Action bar: clear, full-width, always findable. */
.assessment-page .consent-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 6px;
  padding: 16px 18px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  border: 1.5px solid #E6EAF1;
  border-radius: 14px;
  box-shadow: 0 6px 24px rgba(16,42,90,0.08);
}
.assessment-page .consent-footer .btn-consent-continue { padding: 13px 30px; }

/* ---------- STEP META (Step X of N) ---------- */
.assessment-page .step-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 14px;
}
.assessment-page .step-meta__count {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--green-primary);
}
.assessment-page .step-meta__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-body);
}

/* Make completed steps feel clickable, future steps inert. */
.assessment-page .step[data-clickable="true"] { cursor: pointer; }
.assessment-page .step[data-clickable="false"] { cursor: default; }

/* ---------- IN-CARD SECTION GROUPING ---------- */
.assessment-page .form-section { border: none; padding: 0; margin: 0; }
.assessment-page .form-section + .form-section {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid #EEF1F6;
}
.assessment-page .form-section__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--green-primary);
  margin: 0 0 16px;
}

/* Lead paragraph: give the bilingual line room to breathe. */
.assessment-page .intake-card__lead { margin: -10px 0 26px; }
.assessment-page .intake-card__lead em {
  display: block;
  margin-top: 4px;
  color: #7b8595;
}

/* ---------- CHOICE GRID (multi-select language) ---------- */
.assessment-page .choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 6px;
}
.assessment-page .choice-grid .radio-option {
  flex: none;
  min-width: 0;
  padding: 11px 14px;
  align-items: center;
}

/* Read-only auto-calculated age field reads as derived, not editable. */
.assessment-page #age[readonly] {
  background: #f7f9fc;
  color: var(--text-body);
  cursor: default;
}

/* ---------- COMPACT INLINE OPTION GROUPS (2–3 choices) ---------- */
/* Stop tiny groups from stretching edge-to-edge. */
.assessment-page .option-inline { gap: 10px; }
.assessment-page .option-inline .radio-option {
  flex: 0 1 auto;
  min-width: 0;
  padding: 11px 22px;
}

/* ---------- BLOCK OPTIONS (referral: label + description) ---------- */
.assessment-page .option-stack {
  flex-direction: column;
  gap: 10px;
}
.assessment-page .option-stack .radio-option {
  flex: none;
  width: 100%;
  align-items: flex-start;
  padding: 14px 16px;
}
.assessment-page .option-stack .radio-option > input { margin-top: 2px; }
.assessment-page .opt-body { display: flex; flex-direction: column; gap: 3px; }
.assessment-page .opt-title { font-size: 14px; font-weight: 600; color: var(--text-dark); }
.assessment-page .opt-desc { font-size: 12.5px; line-height: 1.45; color: #7b8595; }
.assessment-page .opt-flag {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--green-dark);
  background: var(--royal-wash, rgba(30,58,138,0.06));
  border-radius: 6px;
  padding: 2px 8px;
}

/* ---------- YES / NO — keyboard accessible focus ring ---------- */
.assessment-page .yn-option:focus-visible {
  outline: 3px solid rgba(30,58,138,0.30);
  outline-offset: 2px;
}

/* ---------- SCHEDULE: two-column on desktop ---------- */
.assessment-page .schedule-layout {
  display: grid;
  grid-template-columns: minmax(0, 380px) 1fr;
  gap: 26px;
  align-items: start;
}
.assessment-page .schedule-layout .cal-widget { max-width: none; width: 100%; }
.assessment-page .schedule-side { display: flex; flex-direction: column; gap: 18px; }
.assessment-page .schedule-side .field { margin-bottom: 0; }
.assessment-page .schedule-note {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-body);
  background: var(--royal-wash, rgba(30,58,138,0.05));
  border: 1px solid #DCE3F5;
  border-radius: 12px;
  padding: 14px 16px;
}
.assessment-page .schedule-note strong { color: var(--green-dark); }

/* ---------- STICKY STEP NAV (faster completion) ---------- */
.assessment-page .intake-nav {
  position: sticky;
  bottom: 16px;
  z-index: 20;
  margin-top: 20px;
  padding: 12px;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
  border: 1px solid #E6EAF1;
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(16,42,90,0.08);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 760px) {
  .assessment-page .schedule-layout { grid-template-columns: 1fr; }
  .assessment-page .schedule-layout .cal-widget { max-width: 380px; margin: 0 auto; }
  .assessment-page .option-inline .radio-option { flex: 1 1 auto; }
}
@media (max-width: 480px) {
  .assessment-page .choice-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .assessment-page .consent-footer { flex-direction: column-reverse; align-items: stretch; }
  .assessment-page .consent-footer .btn-consent-continue,
  .assessment-page .consent-footer .select-back-btn { width: 100%; text-align: center; }
}