/* ── WellRx Outcomes — Stylesheet ──────────────────────────────── */

/* Re-uses the same CSS variables defined in practice.css */

/* ── Eligibility gate ────────────────────────────────────────────── */
.outcomes-gate {
  text-align: center;
  padding: 3rem 2rem;
  background: var(--wellrx-card, #fff);
  border: 1px solid var(--wellrx-border, #E2E8F0);
  border-radius: var(--radius, .75rem);
  max-width: 560px;
  margin: 2rem auto;
}
.outcomes-gate .gate-icon { font-size: 3rem; margin-bottom: 1rem; }
.outcomes-gate h2 { margin-bottom: .5rem; }
.gate-warning { color: var(--wellrx-red, #DC2626); font-weight: 600; }

/* ── Checklist ───────────────────────────────────────────────────── */
.outcomes-checklist {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin: 1.5rem 0;
}
.outcomes-task {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--wellrx-card, #fff);
  border: 1px solid var(--wellrx-border, #E2E8F0);
  border-radius: var(--radius, .75rem);
  box-shadow: var(--shadow);
}
.outcomes-task.task-complete { border-left: 4px solid var(--wellrx-green, #16A34A); }
.outcomes-task.task-active   { border-left: 4px solid var(--wellrx-blue, #2563EB); }
.task-indicator {
  font-size: 1.4rem;
  min-width: 2rem;
  text-align: center;
  line-height: 1.4;
}
.task-body strong { display: block; margin-bottom: .2rem; }
.task-body p      { margin: .2rem 0; color: var(--wellrx-muted, #64748B); font-size: .9rem; }
.task-meta        { font-size: .85rem; color: var(--wellrx-muted, #64748B); }

/* ── Assessment layout ───────────────────────────────────────────── */
.assessment-wrap { max-width: 820px; margin: 0 auto; padding-bottom: 4rem; }

/* ── Original sticky timer (kept for reference, now replaced by subtle variant) ── */
.assessment-timer-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .75rem 1.25rem;
  background: var(--wellrx-blue, #2563EB);
  color: #fff;
  border-radius: 0 0 var(--radius, .75rem) var(--radius, .75rem);
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.assessment-timer-bar.timer-urgent { background: var(--wellrx-red, #DC2626); }
.timer-left strong  { font-size: 1rem; }
.timer-q-count      { font-size: .85rem; opacity: .85; margin-left: .75rem; }
.timer-label        { font-size: .85rem; opacity: .85; margin-right: .5rem; }
.timer-display      { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Subtle timer (bottom-right corner, non-intrusive) ─────────── */
.assessment-timer-subtle {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--wellrx-border, #E2E8F0);
  border-radius: .5rem;
  padding: .35rem .75rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.assessment-timer-subtle.timer-urgent {
  background: rgba(254, 242, 242, 0.95);
  border-color: var(--wellrx-red, #DC2626);
}
.timer-display-subtle {
  font-size: .85rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--wellrx-muted, #64748B);
}
.assessment-timer-subtle.timer-urgent .timer-display-subtle {
  color: var(--wellrx-red, #DC2626);
  font-weight: 700;
}

.assessment-instructions {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: var(--radius, .75rem);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-size: .95rem;
}
.assessment-warning { color: var(--wellrx-red, #DC2626); font-weight: 600; margin-top: .5rem; }

.question-block {
  background: var(--wellrx-card, #fff);
  border: 1px solid var(--wellrx-border, #E2E8F0);
  border-radius: var(--radius, .75rem);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}
.question-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .75rem;
}
.question-num  { font-weight: 700; color: var(--wellrx-blue, #2563EB); }
.question-meta { font-size: .8rem; color: var(--wellrx-muted, #64748B); }
.question-stem { margin-bottom: 1rem; font-size: 1rem; line-height: 1.6; }

.answer-options { display: flex; flex-direction: column; gap: .5rem; }
.answer-option  {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .65rem .9rem;
  border: 1px solid var(--wellrx-border, #E2E8F0);
  border-radius: .5rem;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.answer-option:hover           { background: #F1F5F9; border-color: #94A3B8; }
.answer-option input[type=radio] { margin-top: .2rem; flex-shrink: 0; }
.option-letter {
  font-weight: 700;
  color: var(--wellrx-blue, #2563EB);
  min-width: 1.2rem;
  flex-shrink: 0;
}
.option-text { line-height: 1.5; }

.assessment-submit-area {
  text-align: center;
  margin-top: 2rem;
  padding: 1.5rem;
  background: #F8FAFC;
  border-radius: var(--radius, .75rem);
  border: 1px solid var(--wellrx-border, #E2E8F0);
}
.submit-reminder { color: var(--wellrx-yellow, #D97706); margin-bottom: 1rem; font-weight: 500; }

/* ── Open-ended questions ─────────────────────────────────────────── */
.open-ended-response { margin-top: .5rem; }
.open-ended-label { display: block; font-weight: 600; margin-bottom: .5rem; color: var(--wellrx-heading, #1E293B); }
.open-ended-textarea {
  width: 100%;
  min-height: 200px;
  padding: .75rem 1rem;
  border: 2px solid var(--wellrx-border, #E2E8F0);
  border-radius: var(--radius, .5rem);
  font-family: inherit;
  font-size: .95rem;
  line-height: 1.6;
  resize: vertical;
  transition: border-color .15s;
}
.open-ended-textarea:focus { outline: none; border-color: var(--wellrx-primary, #3B82F6); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }

/* Open-ended results */
.feedback-open-ended { border-left: 4px solid var(--wellrx-primary, #3B82F6); }
.open-ended-response-text {
  background: #F8FAFC;
  border: 1px solid var(--wellrx-border, #E2E8F0);
  border-radius: var(--radius, .5rem);
  padding: 1rem;
  white-space: pre-wrap;
  line-height: 1.6;
  margin: .5rem 0 1rem;
}
.open-ended-scoring-note { color: var(--wellrx-muted, #64748B); font-style: italic; font-size: .9rem; margin: .75rem 0; }
.key-points-list { margin: .5rem 0 0 1.25rem; }
.key-points-list li { margin-bottom: .4rem; line-height: 1.5; }

/* AI grading results */
.ai-grading-results {
  background: #F0F9FF;
  border: 1px solid #BAE6FD;
  border-radius: var(--radius, .5rem);
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}
.ai-grading-results h4 { margin: 0 0 .75rem; color: #0369A1; }

/* Competency explanation */
.competency-explanation {
  background: #fff;
  border: 1px solid #BAE6FD;
  border-radius: .4rem;
  padding: .6rem 1rem;
  margin-bottom: 1rem;
  font-size: .9rem;
  line-height: 1.6;
  color: #334155;
}

/* Performance summary sections */
.performance-section {
  margin-bottom: .75rem;
  padding: .75rem 1rem;
  border-radius: .4rem;
  font-size: .9rem;
}
.performance-section h5 {
  margin: 0 0 .4rem;
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.performance-section ul {
  margin: 0;
  padding-left: 1.25rem;
}
.performance-section li {
  margin-bottom: .3rem;
  line-height: 1.5;
}
.performance-strengths {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
}
.performance-strengths h5 { color: #166534; }
.performance-improvements {
  background: #FFF7ED;
  border: 1px solid #FED7AA;
}
.performance-improvements h5 { color: #9A3412; }

.rubric-breakdown { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .75rem; }
.rubric-breakdown h5 {
  margin: 0 0 .4rem;
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #0369A1;
}
.rubric-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: .35rem .75rem;
  background: #fff;
  border-radius: .35rem;
  font-size: .9rem;
}
.rubric-category { font-weight: 500; text-transform: capitalize; }
.rubric-category::before { content: ''; }
.rubric-points { font-weight: 600; color: #0369A1; }
.ai-feedback { margin-top: .5rem; line-height: 1.6; color: #334155; }

/* ── Competency badges ──────────────────────────────────────────── */
.competency-badge {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: .35rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.competency-competent {
  background: #DCFCE7; color: #166534;
}
.competency-approaching {
  background: #FEF9C3; color: #854D0E;
}
.competency-not-competent {
  background: #FEE2E2; color: #991B1B;
}

/* ── Results page ────────────────────────────────────────────────── */
.results-wrap { max-width: 820px; margin: 0 auto; padding-bottom: 3rem; }
.results-header { margin-bottom: 1.5rem; }
.results-submitted { color: var(--wellrx-muted, #64748B); font-size: .9rem; }

.results-score-card {
  background: var(--wellrx-card, #fff);
  border: 1px solid var(--wellrx-border, #E2E8F0);
  border-radius: var(--radius, .75rem);
  padding: 1.5rem 2rem;
  text-align: center;
  margin-bottom: 2rem;
  box-shadow: var(--shadow);
}
.score-main { display: flex; justify-content: center; align-items: baseline; gap: 1.5rem; }
.score-fraction { font-size: 3rem; font-weight: 700; color: var(--wellrx-text, #1E293B); }
.score-denom    { font-size: 2rem; color: var(--wellrx-muted, #64748B); }
.score-pct      { font-size: 2.5rem; font-weight: 700; }
.score-context  { margin-top: .75rem; color: var(--wellrx-muted, #64748B); }

.results-topics { margin-bottom: 2rem; }
.results-survey-cta {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-radius: var(--radius, .75rem);
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}
.results-survey-cta .survey-cta-icon { font-size: 2rem; flex-shrink: 0; }
.results-survey-done {
  background: #F0FDF4;
  border-color: #BBF7D0;
  font-weight: 600;
  color: var(--wellrx-green, #16A34A);
  align-items: center;
}
.results-hint { color: var(--wellrx-muted, #64748B); font-size: .9rem; margin-bottom: 1rem; }
.results-bottom-cta { text-align: center; margin-top: 2rem; }

/* Per-question feedback accordion */
.feedback-item {
  border: 1px solid var(--wellrx-border, #E2E8F0);
  border-radius: var(--radius, .75rem);
  margin-bottom: .6rem;
  overflow: hidden;
}
.feedback-item.feedback-correct { border-left: 4px solid var(--wellrx-green, #16A34A); }
.feedback-item.feedback-incorrect { border-left: 4px solid var(--wellrx-red, #DC2626); }

.feedback-summary {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 1rem;
  cursor: pointer;
  background: var(--wellrx-card, #fff);
  list-style: none;
  user-select: none;
}
.feedback-summary:hover { background: #F8FAFC; }
.feedback-num    { font-weight: 700; color: var(--wellrx-muted, #64748B); min-width: 2rem; }
.feedback-topic  { font-size: .8rem; color: var(--wellrx-muted, #64748B); min-width: 9rem; }
.feedback-status { font-weight: 600; min-width: 6rem; font-size: .9rem; }
.feedback-item.feedback-correct  .feedback-status { color: var(--wellrx-green, #16A34A); }
.feedback-item.feedback-incorrect .feedback-status { color: var(--wellrx-red, #DC2626); }
.feedback-stem-preview { color: var(--wellrx-text, #1E293B); font-size: .9rem; flex: 1; }

.feedback-body {
  padding: 1rem 1.25rem 1.25rem;
  background: #F8FAFC;
  border-top: 1px solid var(--wellrx-border, #E2E8F0);
}
.question-stem-full { margin-bottom: 1rem; font-size: .95rem; line-height: 1.6; font-weight: 500; }

.answer-review { margin-bottom: 1rem; }
.answer-review-option {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .4rem .7rem;
  border-radius: .4rem;
  margin-bottom: .3rem;
  font-size: .9rem;
}
.answer-review-option .option-letter { min-width: 1.2rem; font-weight: 700; color: var(--wellrx-muted, #64748B); }
.answer-review-option.option-correct { background: #F0FDF4; color: var(--wellrx-green, #16A34A); font-weight: 600; }
.answer-review-option.option-correct .option-letter { color: var(--wellrx-green, #16A34A); }
.answer-review-option.option-selected-wrong { background: #FEF2F2; color: var(--wellrx-red, #DC2626); }

.your-answer { font-size: .85rem; color: var(--wellrx-muted, #64748B); margin: .5rem 0; }
.your-answer.no-answer { color: var(--wellrx-red, #DC2626); }

.feedback-explanation {
  background: #fff;
  border: 1px solid var(--wellrx-border, #E2E8F0);
  border-radius: .5rem;
  padding: .9rem 1rem;
  font-size: .9rem;
  line-height: 1.65;
  color: var(--wellrx-text, #1E293B);
}

/* ── Survey form ─────────────────────────────────────────────────── */
.survey-form .survey-section {
  background: var(--wellrx-card, #fff);
  border: 1px solid var(--wellrx-border, #E2E8F0);
  border-radius: var(--radius, .75rem);
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
}
.survey-section h2 { margin-bottom: .3rem; font-size: 1.1rem; color: var(--wellrx-blue, #2563EB); }
.section-hint      { color: var(--wellrx-muted, #64748B); font-size: .875rem; margin-bottom: 1rem; }

.radio-group { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.radio-option {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .4rem .5rem;
  cursor: pointer;
  border-radius: .4rem;
  font-size: .95rem;
}
.radio-option:hover { background: #F1F5F9; }
.radio-option input[type=radio] { margin-top: .2rem; flex-shrink: 0; }
.form-input-inline { border: 1px solid var(--wellrx-border, #E2E8F0); border-radius: .4rem; padding: .2rem .5rem; font-size: .9rem; margin-left: .3rem; }

.likert-row {
  display: flex;
  gap: .75rem;
  margin: .5rem 0 .25rem;
}
.likert-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  cursor: pointer;
}
.likert-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 2px solid var(--wellrx-border, #E2E8F0);
  border-radius: 50%;
  font-weight: 700;
  font-size: .95rem;
  color: var(--wellrx-muted, #64748B);
  transition: background .12s, border-color .12s, color .12s;
}
.likert-option input[type=radio] { display: none; }
.likert-option input[type=radio]:checked + .likert-num {
  background: var(--wellrx-blue, #2563EB);
  border-color: var(--wellrx-blue, #2563EB);
  color: #fff;
}
.likert-labels {
  display: flex;
  justify-content: space-between;
  font-size: .75rem;
  color: var(--wellrx-muted, #64748B);
  margin-bottom: .5rem;
}

.confidence-sub { margin-bottom: 1.25rem; }
.sub-label      { font-size: .9rem; font-weight: 600; margin-bottom: .3rem; display: block; }

/* ── Completion page ─────────────────────────────────────────────── */
.complete-hero { text-align: center; padding: 2rem 1rem; }
.complete-icon { font-size: 3.5rem; margin-bottom: .75rem; }
.complete-checklist {
  max-width: 520px;
  margin: 1.5rem auto;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.complete-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .75rem 1rem;
  background: var(--wellrx-card, #fff);
  border: 1px solid var(--wellrx-border, #E2E8F0);
  border-radius: var(--radius, .75rem);
}
.complete-item.item-pending { border-left: 4px solid var(--wellrx-yellow, #D97706); }
.complete-item .eligible-yes,
.complete-item .eligible-no { font-size: 1.3rem; }
.complete-incentive {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  max-width: 540px;
  margin: 1.5rem auto;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: var(--radius, .75rem);
  padding: 1.25rem 1.5rem;
}
.complete-incentive .context-icon { font-size: 2rem; flex-shrink: 0; }
.complete-incentive--warning {
  background: #FFFBEB;
  border-color: #FDE68A;
}

/* ── Rubric page ────────────────────────────────────────────────── */
.rubric-page-wrap { max-width: 880px; margin: 0 auto; padding-bottom: 3rem; }
.rubric-page-header {
  margin-bottom: 2rem;
}
.rubric-page-header h1 { margin-bottom: .5rem; }
.rubric-page-header p { color: var(--wellrx-text, #1E293B); line-height: 1.6; margin-bottom: .4rem; }
.rubric-page-note { color: var(--wellrx-muted, #64748B); font-size: .9rem; font-style: italic; }

.rubric-scenario-section {
  margin-bottom: 2.5rem;
}
.rubric-scenario-section h2 {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}
.rubric-topic-badge {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: .35rem;
  font-size: .8rem;
  font-weight: 600;
  background: var(--wellrx-blue, #2563EB);
  color: #fff;
}

.rubric-category-card {
  background: var(--wellrx-card, #fff);
  border: 1px solid var(--wellrx-border, #E2E8F0);
  border-radius: var(--radius, .75rem);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}
.rubric-category-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: .5rem;
}
.rubric-category-header h3 { margin: 0; font-size: 1.05rem; }
.rubric-category-points {
  font-weight: 700;
  color: var(--wellrx-blue, #2563EB);
  font-size: .9rem;
  white-space: nowrap;
}
.rubric-category-criteria {
  color: var(--wellrx-muted, #64748B);
  font-size: .9rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.rubric-proficiency-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  font-size: .85rem;
  line-height: 1.5;
}
.rubric-proficiency-table th,
.rubric-proficiency-table td {
  padding: .75rem .9rem;
  vertical-align: top;
  border: 1px solid var(--wellrx-border, #E2E8F0);
  width: 33.33%;
}
.rubric-proficiency-table th {
  font-weight: 700;
  font-size: .8rem;
  text-align: center;
}
.rubric-pts-range {
  display: block;
  font-weight: 400;
  font-size: .75rem;
  opacity: .8;
  margin-top: .15rem;
}
.rubric-col-nc { background: #FEE2E2; color: #991B1B; }
.rubric-col-ac { background: #FEF9C3; color: #854D0E; }
.rubric-col-c  { background: #DCFCE7; color: #166534; }
.rubric-proficiency-table td { background: #FAFAFA; color: var(--wellrx-text, #1E293B); }

.rubric-skills-list {
  font-size: .85rem;
  color: var(--wellrx-muted, #64748B);
}
.rubric-skills-list strong {
  display: block;
  margin-bottom: .3rem;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.rubric-skills-list ul {
  margin: 0;
  padding-left: 1.25rem;
}
.rubric-skills-list li { margin-bottom: .2rem; }

.rubric-page-footer {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--wellrx-border, #E2E8F0);
}

.rubric-link {
  font-size: .9rem;
  font-weight: 500;
  color: var(--wellrx-blue, #2563EB);
  text-decoration: underline;
  text-underline-offset: .15em;
}
.rubric-link-small {
  font-size: .8rem;
  font-weight: 400;
  color: var(--wellrx-blue, #2563EB);
}

/* Responsive: stack rubric table on small screens */
@media (max-width: 640px) {
  .rubric-proficiency-table,
  .rubric-proficiency-table thead,
  .rubric-proficiency-table tbody,
  .rubric-proficiency-table tr,
  .rubric-proficiency-table th,
  .rubric-proficiency-table td {
    display: block;
    width: 100%;
  }
  .rubric-proficiency-table th { text-align: left; }
  .rubric-proficiency-table td { border-top: none; }
}

/* ── Honor statement ────────────────────────────────────────────── */
.honor-statement {
  background: #fff3cd;
  border-left: 4px solid #ffc107;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  border-radius: 4px;
  font-size: 0.9rem;
  line-height: 1.5;
}