/* ── WellRx Practice — Stylesheet ─────────────────────────────── */

:root {
  --wellrx-blue:    #2563EB;
  --wellrx-indigo:  #4F46E5;
  --wellrx-green:   #16A34A;
  --wellrx-yellow:  #D97706;
  --wellrx-red:     #DC2626;
  --wellrx-bg:      #F8FAFC;
  --wellrx-card:    #FFFFFF;
  --wellrx-border:  #E2E8F0;
  --wellrx-text:    #1E293B;
  --wellrx-muted:   #64748B;
  --radius:         0.75rem;
  --shadow:         0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
}

/* ── Layout ──────────────────────────────────────────────────────── */
.wellrx-landing,
.wellrx-practice,
.wellrx-gate,
.researcher-dashboard { max-width: 800px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.researcher-dashboard  { max-width: 1100px; }

/* ── Header ──────────────────────────────────────────────────────── */
.wellrx-header { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem; gap: 1rem; flex-wrap: wrap; }
.wellrx-header h1 { font-size: 1.75rem; font-weight: 700; color: var(--wellrx-text); margin: 0; }
.wellrx-subtitle  { color: var(--wellrx-muted); margin: 0.2rem 0 0; font-size: .9rem; }

.wellrx-countdown { text-align: center; background: var(--wellrx-indigo); color: white;
  border-radius: var(--radius); padding: .6rem 1rem; min-width: 90px; }
.countdown-days   { display: block; font-size: 2rem; font-weight: 700; line-height: 1; }
.countdown-label  { display: block; font-size: .75rem; opacity: .85; }
.countdown-end    { display: block; font-size: .7rem; opacity: .7; margin-top: .15rem; }

/* ── Closed / gate banners ───────────────────────────────────────── */
.wellrx-closed-banner { background: #FEF2F2; border: 1px solid #FECACA; border-radius: var(--radius);
  padding: .75rem 1rem; margin-bottom: 1.25rem; color: var(--wellrx-red); font-size: .9rem; }

/* ── Study intro (first-visit context + incentive) ───────────────── */
.wellrx-study-intro { display: flex; flex-direction: column; gap: .875rem; margin-bottom: 1.5rem; }

.study-context-block, .study-incentive-block {
  display: flex; gap: .875rem; align-items: flex-start;
  border-radius: var(--radius); padding: 1rem 1.125rem; font-size: .93rem; line-height: 1.55; }

.study-context-block {
  background: #EEF2FF; border: 1px solid #C7D2FE; }

.study-incentive-block {
  background: #FFFBEB; border: 1px solid #FDE68A; }

.context-icon { font-size: 1.4rem; flex-shrink: 0; margin-top: .05rem; }

/* ── Returning-user hint ──────────────────────────────────────────── */
.wellrx-returning-hint {
  background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: var(--radius);
  padding: .75rem 1rem; margin-bottom: 1.25rem; font-size: .88rem; color: #166534; }

/* kept for any legacy references */
.wellrx-incentive-notice { display: flex; gap: .75rem; background: #FFFBEB;
  border: 1px solid #FDE68A; border-radius: var(--radius); padding: 1rem; margin-bottom: 1.25rem; }
.notice-icon { font-size: 1.5rem; flex-shrink: 0; }

/* ── Progress card ───────────────────────────────────────────────── */
.wellrx-progress-card { background: var(--wellrx-card); border: 1px solid var(--wellrx-border);
  border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); margin-bottom: 1.25rem; }

.progress-stats { display: flex; gap: 1.5rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.stat-block { text-align: center; }
.stat-number { display: block; font-size: 2rem; font-weight: 700; color: var(--wellrx-indigo); }
.stat-label  { font-size: .75rem; color: var(--wellrx-muted); text-transform: uppercase; letter-spacing: .04em; }
.stat-green  { color: var(--wellrx-green) !important; }
.stat-yellow { color: var(--wellrx-yellow) !important; }
.stat-red    { color: var(--wellrx-red) !important; }
.stat-muted  { color: var(--wellrx-muted) !important; }

/* ── Milestone track ────────────────────────────────────────────── */
.milestone-track { position: relative; padding-top: 1.75rem; }
.milestone-bar-bg   { height: 10px; background: var(--wellrx-border); border-radius: 99px; overflow: hidden; }
.milestone-bar-fill { height: 100%; background: var(--wellrx-indigo); border-radius: 99px;
  transition: width .6s ease; }
.milestone-hint { font-size: .8rem; color: var(--wellrx-muted); margin-top: .4rem; }
.milestone-labels { position: relative; height: 1.5rem; }
.milestone-pip { position: absolute; font-size: .7rem; font-weight: 600; color: var(--wellrx-muted);
  transform: translateX(-50%); }
.milestone-pip.reached { color: var(--wellrx-green); }
.pip-check { margin-left: 2px; }
.milestone-complete { background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: var(--radius);
  padding: .75rem 1rem; color: var(--wellrx-green); font-weight: 600; }

/* ── Topic grid ──────────────────────────────────────────────────── */
.wellrx-topics h2 { font-size: 1.1rem; font-weight: 700; margin: 0 0 .75rem; }
.topic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem;
  margin-bottom: 1.25rem; }
.topic-card { background: var(--wellrx-card); border: 1px solid var(--wellrx-border);
  border-radius: var(--radius); padding: .9rem; box-shadow: var(--shadow); }
.topic-label { font-weight: 600; font-size: .85rem; margin-bottom: .4rem; }
.topic-bar-bg   { height: 8px; background: var(--wellrx-border); border-radius: 99px; overflow: hidden; margin-bottom: .3rem; }
.topic-bar-fill { height: 100%; border-radius: 99px; }
.topic-stats-row { display: flex; justify-content: space-between; font-size: .8rem; color: var(--wellrx-muted); }
.topic-pct { font-weight: 700; }

/* ── Colour utilities ────────────────────────────────────────────── */
.bar-green  { background: var(--wellrx-green); }
.bar-yellow { background: var(--wellrx-yellow); }
.bar-red    { background: var(--wellrx-red); }

/* ── Action buttons ──────────────────────────────────────────────── */
.wellrx-actions { text-align: center; margin-top: 1.5rem; }
.btn-primary-large { display: inline-block; background: var(--wellrx-indigo); color: white;
  font-weight: 700; font-size: 1rem; padding: .85rem 2rem; border-radius: var(--radius);
  text-decoration: none; border: none; cursor: pointer; transition: opacity .15s; }
.btn-primary-large:hover { opacity: .9; }
.enrollment-note { font-size: .85rem; color: var(--wellrx-muted); margin-top: .75rem; }

/* ── Top bar ──────────────────────────────────────────────────────── */
.practice-topbar { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem; }
.topbar-back  { color: var(--wellrx-indigo); text-decoration: none; font-size: .85rem; font-weight: 600; }
.topbar-center { flex: 1; text-align: center; }
.q-counter    { font-weight: 700; color: var(--wellrx-text); }
.review-badge { background: #EDE9FE; color: var(--wellrx-indigo); border-radius: 99px;
  padding: .15rem .5rem; font-size: .75rem; font-weight: 600; margin-left: .5rem; }
.days-chip    { background: var(--wellrx-border); border-radius: 99px; padding: .2rem .6rem;
  font-size: .75rem; color: var(--wellrx-muted); }

/* ── Condition 2 batch indicator ─────────────────────────────────── */
.batch-indicator { text-align: center; margin-bottom: .75rem; }
.batch-pips      { display: inline-flex; gap: .4rem; }
.batch-pip       { width: 10px; height: 10px; border-radius: 50%;
  background: var(--wellrx-border); transition: background .2s; }
.batch-pip.filled { background: var(--wellrx-indigo); }

/* ── Question card ───────────────────────────────────────────────── */
.question-card { background: var(--wellrx-card); border: 1px solid var(--wellrx-border);
  border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); margin-bottom: 1rem; }
.recap-card    { margin-bottom: 0; }
.question-meta { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .75rem; }
.blooms-badge, .topic-badge, .difficulty-badge {
  font-size: .7rem; font-weight: 600; border-radius: 99px; padding: .2rem .6rem;
  text-transform: uppercase; letter-spacing: .04em; }
.blooms-badge    { background: #EDE9FE; color: var(--wellrx-indigo); }
.topic-badge     { background: #E0F2FE; color: #0369A1; }
.difficulty-badge{ background: var(--wellrx-border); color: var(--wellrx-muted); }
.question-stem   { font-size: 1.05rem; font-weight: 500; line-height: 1.55; color: var(--wellrx-text); }

/* ── Options ─────────────────────────────────────────────────────── */
.options-list  { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.option-label  { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer;
  background: var(--wellrx-card); border: 2px solid var(--wellrx-border); border-radius: var(--radius);
  padding: .9rem 1rem; transition: border-color .15s, background .15s; }
.option-label:hover   { border-color: var(--wellrx-indigo); background: #EEF2FF; }
.option-label.selected{ border-color: var(--wellrx-indigo); background: #EEF2FF; }
.option-label input   { display: none; }
.option-letter { font-weight: 700; color: var(--wellrx-indigo); min-width: 1.2rem; }
.option-text   { line-height: 1.45; color: var(--wellrx-text); }

.submit-row { justify-content: center; }
.btn-submit { background: var(--wellrx-indigo); color: white; font-weight: 700; font-size: 1rem;
  padding: .8rem 2rem; border: none; border-radius: var(--radius); cursor: pointer;
  transition: opacity .15s; }
.btn-submit:hover    { opacity: .9; }
.btn-submit:disabled { opacity: .5; cursor: not-allowed; }

/* ── Result indicator ─────────────────────────────────────────────── */
.result-indicator { border-radius: var(--radius); padding: .85rem 1.1rem; font-size: 1rem;
  display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.result-correct   { background: #F0FDF4; border: 1px solid #BBF7D0; color: var(--wellrx-green); }
.result-incorrect { background: #FEF2F2; border: 1px solid #FECACA; color: var(--wellrx-red); }
.result-icon      { font-size: 1.2rem; font-weight: 700; }

/* ── Options recap (after answer) ────────────────────────────────── */
.options-recap { display: flex; flex-direction: column; gap: .35rem; margin-top: .85rem; }
.option-recap  { display: flex; align-items: flex-start; gap: .6rem; padding: .5rem .75rem;
  border-radius: calc(var(--radius) - .25rem); border: 1.5px solid transparent; }
.option-correct { background: #F0FDF4; border-color: #86EFAC; }
.option-wrong   { background: #FEF2F2; border-color: #FECACA; }
.option-mark    { margin-left: auto; font-weight: 700; }
.correct-mark   { color: var(--wellrx-green); }
.wrong-mark     { color: var(--wellrx-red); }

/* ── Feedback card ───────────────────────────────────────────────── */
.feedback-card { background: var(--wellrx-card); border: 1px solid var(--wellrx-border);
  border-left: 4px solid var(--wellrx-indigo); border-radius: var(--radius);
  padding: 1.1rem 1.25rem; box-shadow: var(--shadow); margin: .75rem 0; }
.feedback-card h3, .feedback-card h4 { font-size: .85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--wellrx-muted); margin: 0 0 .5rem; }
.feedback-text { line-height: 1.65; color: var(--wellrx-text); font-size: .95rem; }

/* ── Progress dashboard panel ────────────────────────────────────── */
.dashboard-panel { background: var(--wellrx-card); border: 2px solid var(--wellrx-indigo);
  border-radius: var(--radius); padding: 1.1rem 1.25rem; box-shadow: var(--shadow); margin: 1rem 0; }
.dashboard-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .85rem; }
.dashboard-header h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.dashboard-close { background: none; border: none; cursor: pointer; font-size: 1rem;
  color: var(--wellrx-muted); padding: .2rem .4rem; }
.dash-topic-row   { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.dash-topic-label { font-size: .85rem; font-weight: 600; min-width: 110px; }
.dash-bar-bg      { flex: 1; height: 8px; background: var(--wellrx-border); border-radius: 99px; overflow: hidden; }
.dash-bar-fill    { height: 100%; border-radius: 99px; }
.dash-pct         { font-size: .8rem; font-weight: 700; min-width: 35px; text-align: right; }
.dash-counts      { font-size: .75rem; color: var(--wellrx-muted); min-width: 40px; }

/* ── Milestone banner ────────────────────────────────────────────── */
.milestone-banner { background: #FEF9C3; border: 1px solid #FDE047;
  border-radius: var(--radius); margin-bottom: 1rem; }
.milestone-inner  { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; }
.milestone-emoji  { font-size: 1.75rem; flex-shrink: 0; }
.milestone-inner strong { display: block; font-size: 1rem; }
.milestone-inner span   { font-size: .85rem; color: #92400E; }
.milestone-close  { background: none; border: none; cursor: pointer; font-size: 1rem;
  color: var(--wellrx-muted); margin-left: auto; flex-shrink: 0; padding: .2rem .4rem; }

/* ── Feedback actions ────────────────────────────────────────────── */
.feedback-actions { text-align: center; margin-top: 1.25rem; }

/* ── Batch view ──────────────────────────────────────────────────── */
.batch-intro      { color: var(--wellrx-muted); margin-bottom: 1rem; }
.batch-response-card { background: var(--wellrx-card); border: 1px solid var(--wellrx-border);
  border-radius: var(--radius); padding: 1.1rem 1.25rem; margin-bottom: .75rem; box-shadow: var(--shadow); }
.batch-correct    { border-left: 4px solid var(--wellrx-green); }
.batch-incorrect  { border-left: 4px solid var(--wellrx-red); }
.batch-result-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.batch-q-num      { font-weight: 700; font-size: .85rem; color: var(--wellrx-muted); }
.result-correct-chip   { background: #F0FDF4; color: var(--wellrx-green); border-radius: 99px;
  padding: .1rem .6rem; font-size: .8rem; font-weight: 600; }
.result-incorrect-chip { background: #FEF2F2; color: var(--wellrx-red); border-radius: 99px;
  padding: .1rem .6rem; font-size: .8rem; font-weight: 600; flex: 1; }
.batch-stem { font-weight: 500; line-height: 1.45; margin-bottom: .5rem; font-size: .95rem; }

/* ── Researcher dashboard ────────────────────────────────────────── */
.rd-header      { margin-bottom: 1.5rem; }
.rd-header h1   { font-size: 1.6rem; font-weight: 700; margin: 0 0 .4rem; }
.rd-meta        { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .85rem; color: var(--wellrx-muted); }
.rd-days        { font-weight: 700; }
.rd-days-urgent { color: var(--wellrx-red); }
.rd-table       { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; font-size: .85rem; }
.rd-table th    { background: var(--wellrx-bg); border-bottom: 2px solid var(--wellrx-border);
  padding: .6rem .75rem; text-align: left; font-weight: 700; color: var(--wellrx-muted);
  text-transform: uppercase; letter-spacing: .04em; font-size: .75rem; }
.rd-table td    { border-bottom: 1px solid var(--wellrx-border); padding: .55rem .75rem; }
.rd-table tr:hover td { background: var(--wellrx-bg); }
.cond-label     { display: block; font-size: .75rem; color: var(--wellrx-muted); font-weight: 400; }
.rd-pct         { color: var(--wellrx-muted); font-size: .75rem; }
.rd-email       { font-size: .8rem; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-empty       { color: var(--wellrx-muted); font-style: italic; padding: 1rem; text-align: center; }
.td-green       { color: var(--wellrx-green); font-weight: 700; }
.td-yellow      { color: var(--wellrx-yellow); font-weight: 700; }
.td-red         { color: var(--wellrx-red); font-weight: 700; }
.eligible-yes   { color: var(--wellrx-green); font-weight: 700; }
.eligible-no    { color: var(--wellrx-muted); }
.wellrx-gate    { text-align: center; padding: 4rem 1rem; }
.wellrx-gate h1 { font-size: 1.5rem; margin-bottom: .75rem; }
.wellrx-gate p  { color: var(--wellrx-muted); margin-bottom: 1.25rem; }

/* ── In-app banners ──────────────────────────────────────────────────── */
.wellrx-banner { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; border-radius: var(--radius); padding: .9rem 1.1rem; margin-bottom: .75rem; }
.wellrx-banner--info    { background: #EEF2FF; border: 1px solid #C7D2FE; }
.wellrx-banner--warning { background: #FFFBEB; border: 1px solid #FDE68A; }
.wellrx-banner--urgent  { background: #FEF2F2; border: 1px solid #FECACA; }
.banner-content p { margin: .25rem 0 0; font-size: .9rem; }
.banner-dismiss-form { flex-shrink: 0; }
.banner-dismiss { background: none; border: none; cursor: pointer; font-size: 1rem;
  color: var(--wellrx-muted); padding: 0 .25rem; line-height: 1; }
.banner-dismiss:hover { color: var(--wellrx-indigo); }

/* ── Needs Attention ─────────────────────────────────────────────────── */
.attention-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem; margin-bottom: 2rem; }
.attention-card { background: var(--wellrx-card); border: 1px solid var(--wellrx-border);
  border-radius: var(--radius); padding: 1.1rem; display: flex; flex-direction: column; gap: .75rem; }
.attention-header { display: flex; gap: .9rem; align-items: flex-start; }
.attention-count { font-size: 2rem; font-weight: 800; color: var(--wellrx-indigo);
  line-height: 1; flex-shrink: 0; min-width: 2rem; text-align: center; }
.attention-header strong { display: block; font-size: .95rem; }
.attention-header p { margin: .2rem 0 0; font-size: .82rem; color: var(--wellrx-muted); }
.attention-list { list-style: none; padding: 0; margin: 0; font-size: .83rem;
  border-top: 1px solid var(--wellrx-border); padding-top: .5rem; }
.attention-list li { padding: .2rem 0; color: var(--wellrx-muted); }
.btn-nudge { display: inline-block; background: var(--wellrx-indigo); color: #fff;
  padding: .45rem .9rem; border-radius: 6px; font-size: .83rem; font-weight: 600;
  text-decoration: none; margin-top: auto; }
.btn-nudge:hover { background: #4338CA; color: #fff; }

/* ── Message panel ────────────────────────────────────────────────────── */
.message-panel { background: var(--wellrx-bg); border: 1px solid var(--wellrx-border);
  border-radius: var(--radius); padding: 1.1rem 1.25rem; margin-bottom: 2rem; }
.message-panel h2 { margin: 0 0 .35rem; }
.message-panel p  { margin: 0 0 .75rem; font-size: .9rem; color: var(--wellrx-muted); }
.message-quick-links { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ── Email type badge ─────────────────────────────────────────────────── */
.email-type-badge { background: #EEF2FF; color: var(--wellrx-indigo);
  padding: .15rem .5rem; border-radius: 4px; font-size: .75rem; font-weight: 600; }

/* ── Compose form ─────────────────────────────────────────────────────── */
.message-compose-form { max-width: 680px; }
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; margin-bottom: .35rem; }
.form-input, .form-select { width: 100%; padding: .55rem .75rem; border: 1px solid var(--wellrx-border);
  border-radius: 6px; font-size: .95rem; }
.form-textarea { width: 100%; padding: .55rem .75rem; border: 1px solid var(--wellrx-border);
  border-radius: 6px; font-size: .95rem; resize: vertical; font-family: inherit; }
.form-hint { font-size: .8rem; color: var(--wellrx-muted); margin-top: .25rem; }
.form-actions { display: flex; gap: 1rem; align-items: center; }
.btn-cancel { color: var(--wellrx-muted); text-decoration: none; font-size: .9rem; }
.alert-success { background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: var(--radius);
  padding: 1rem 1.25rem; color: #166534; margin-bottom: 1.5rem; }
.alert-error { background: #FEF2F2; border: 1px solid #FECACA; border-radius: var(--radius);
  padding: 1rem 1.25rem; color: #991B1B; margin-bottom: 1.5rem; }