/* ══════════════════════════════════════════════
   SHARED — Sonographer Trial Cards
   ══════════════════════════════════════════════ */

/* ── Background ── */
body {
  background-color: #f0ede6;
  background-image:
    linear-gradient(to bottom, #f0ede6 0%, transparent 120px),
    radial-gradient(ellipse 90% 60% at 50% 50%, transparent 50%, rgba(220,213,200,0.5) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='340'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Ccircle cx='20' cy='38' r='2.2' fill='%232a9d5c' opacity='0.18'/%3E%3Ccircle cx='38' cy='36' r='2.6' fill='%232a9d5c' opacity='0.22'/%3E%3Ccircle cx='57' cy='38' r='2.2' fill='%232a9d5c' opacity='0.18'/%3E%3Ccircle cx='78' cy='36' r='2.6' fill='%232a9d5c' opacity='0.22'/%3E%3Ccircle cx='116' cy='36' r='2.8' fill='%232a9d5c' opacity='0.24'/%3E%3Ccircle cx='156' cy='36' r='2.6' fill='%232a9d5c' opacity='0.22'/%3E%3Ccircle cx='195' cy='36' r='2.8' fill='%232a9d5c' opacity='0.24'/%3E%3Ccircle cx='234' cy='36' r='2.6' fill='%232a9d5c' opacity='0.22'/%3E%3Ccircle cx='312' cy='36' r='2.8' fill='%232a9d5c' opacity='0.24'/%3E%3Ccircle cx='392' cy='36' r='2.8' fill='%232a9d5c' opacity='0.24'/%3E%3Ccircle cx='512' cy='36' r='2.8' fill='%232a9d5c' opacity='0.24'/%3E%3Ccircle cx='632' cy='36' r='2.6' fill='%232a9d5c' opacity='0.22'/%3E%3Ccircle cx='712' cy='36' r='2.8' fill='%232a9d5c' opacity='0.24'/%3E%3Ccircle cx='792' cy='36' r='2.8' fill='%232a9d5c' opacity='0.24'/%3E%3Ccircle cx='872' cy='36' r='2.6' fill='%232a9d5c' opacity='0.22'/%3E%3Cpath d='M0 50 C30 30,60 30,90 50 C120 70,150 70,180 50 C210 30,240 30,270 50 C300 70,330 70,360 50 C390 30,420 30,450 50 C480 70,510 70,540 50 C570 30,600 30,630 50 C660 70,690 70,720 50 C750 30,780 30,810 50 C840 70,870 70,900 50' stroke='%232a9d5c' stroke-width='1.4' opacity='0.2'/%3E%3Cpath d='M0 130 C45 105,90 105,135 130 C180 155,225 155,270 130 C315 105,360 105,405 130 C450 155,495 155,540 130 C585 105,630 105,675 130 C720 155,765 155,810 130 C855 105,900 105,900 130' stroke='%234a70a0' stroke-width='1.6' opacity='0.18'/%3E%3Ccircle cx='52' cy='118' r='2.0' fill='%234a70a0' opacity='0.16'/%3E%3Ccircle cx='112' cy='116' r='2.6' fill='%234a70a0' opacity='0.22'/%3E%3Ccircle cx='192' cy='116' r='2.6' fill='%234a70a0' opacity='0.22'/%3E%3Ccircle cx='312' cy='116' r='2.6' fill='%234a70a0' opacity='0.22'/%3E%3Ccircle cx='512' cy='116' r='2.6' fill='%234a70a0' opacity='0.22'/%3E%3Ccircle cx='712' cy='116' r='2.6' fill='%234a70a0' opacity='0.22'/%3E%3Ccircle cx='852' cy='118' r='2.0' fill='%234a70a0' opacity='0.16'/%3E%3Cpath d='M0 210 C60 180,120 180,180 210 C240 240,300 240,360 210 C420 180,480 180,540 210 C600 240,660 240,720 210 C780 180,840 180,900 210' stroke='%237c5cbf' stroke-width='1.5' opacity='0.16'/%3E%3Ccircle cx='120' cy='196' r='2.4' fill='%237c5cbf' opacity='0.21'/%3E%3Ccircle cx='320' cy='196' r='2.4' fill='%237c5cbf' opacity='0.21'/%3E%3Ccircle cx='520' cy='196' r='2.4' fill='%237c5cbf' opacity='0.21'/%3E%3Ccircle cx='720' cy='196' r='2.4' fill='%237c5cbf' opacity='0.21'/%3E%3Cpath d='M0 290 C22 275,45 275,67 290 C89 305,112 305,134 290 C156 275,179 275,201 290 C223 305,246 305,268 290 C290 275,313 275,335 290 C357 305,380 305,402 290 C424 275,447 275,469 290 C491 305,514 305,536 290 C558 275,581 275,603 290 C625 305,648 305,670 290 C692 275,715 275,737 290 C759 305,782 305,804 290 C826 275,849 275,871 290 C893 305,900 305,900 290' stroke='%23c08040' stroke-width='1.3' opacity='0.15'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 900px auto;
  background-position: center top;
}

/* ── Pill Tabs (centered) ── */
.tabs {
  display: flex;
  justify-content: center;
  gap: 6px;
  background: var(--card, #fff);
  padding: 6px;
  border-radius: 100px;
  border: 1px solid var(--border, #E8E8EE);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.tab-btn {
  background: transparent;
  border: none;
  padding: 8px 16px;
  border-radius: 100px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text2, #5A5A72);
  cursor: pointer;
  transition: all 0.2s ease;
}

.tab-btn:hover { color: var(--text, #1E1E2A); }

.tab-btn.active {
  background: var(--card, #fff);
  color: var(--accent, #6366F1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border: 1.5px solid var(--accent, #6366F1);
}

.tab-btn.unlocked { color: var(--text2, #5A5A72); }
.tab-btn.locked { opacity: .35; cursor: not-allowed; }

/* ── Flat Tabs (card-style underline) ── */
.tabs--flat {
  gap: 0;
  padding: 0;
  border-radius: 16px 16px 0 0;
  border: none;
  border-bottom: 1px solid var(--border, #E8E8EE);
  box-shadow: none;
  overflow: hidden;
}

.tabs--flat .tab-btn {
  flex: 1;
  padding: .7rem .5rem;
  border-radius: 0;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  position: relative;
}

.tabs--flat .tab-btn.active {
  color: var(--accent, #6366F1);
  background: var(--card, #fff);
  box-shadow: none;
  border: none;
}

.tabs--flat .tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: var(--accent, #6366F1);
}

/* ── Flat Tab Body ── */
.tab-body {
  background: var(--card, #fff);
  border-radius: 0 0 16px 16px;
  border: 1px solid var(--border, #E8E8EE);
  border-top: none;
  padding: 2rem;
  min-height: 240px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

/* ── Flat Panes ── */
.pane { display: none; }
.pane.active { display: block; }

/* ══════════════════════════════════════════════
   PANEL TRANSITIONS
   ══════════════════════════════════════════════ */
.panel {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  display: flex;
  flex-direction: column;
}
.panel.active {
  opacity: 1;
  pointer-events: auto;
}

/* ══════════════════════════════════════════════
   STEPPED QUIZ
   ══════════════════════════════════════════════ */

/* ── Progress dots ── */
.quiz-progress { display: flex; gap: 6px; justify-content: center; margin-bottom: 1rem; }
.quiz-dot {
  height: 8px; width: 8px; border-radius: 4px;
  background: var(--border, #E8E8EE);
  transition: all .3s ease;
}
.quiz-dot.active { width: 24px; background: var(--accent, #6366F1); }
.quiz-dot.completed { background: #10B981; }

/* ── Step visibility ── */
.quiz-step-hidden { display: none; }
.quiz-step-active { display: block; animation: quizSlideUp .4s ease-out; }
@keyframes quizSlideUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Question block ── */
.quiz-q {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 1.5rem;
}
.quiz-q-label {
  display: block;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent, #6366F1);
  margin-bottom: .5rem;
}
.quiz-q-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text, #1E1E2A);
  line-height: 1.3;
  margin-bottom: 1.5rem;
}
.quiz-hint {
  font-size: .8rem;
  color: var(--text3, #8A8AA0);
  font-style: italic;
  margin-bottom: .5rem;
}

/* ── Option buttons ── */
.quiz-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  background: var(--card, #fff);
  border: 2px solid #f1f5f9;
  border-radius: 20px;
  padding: 1.25rem 1.5rem;
  margin-bottom: .75rem;
  font-family: 'DM Sans', sans-serif;
  font-size: .95rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all .2s ease;
}
.quiz-opt:hover:not(:disabled) {
  border-color: var(--accent, #818cf8);
  background: #f8faff;
  color: var(--accent, #4f46e5);
  transform: translateX(6px);
}
.quiz-opt.correct { background: #ECFDF5; border-color: #34D399; color: #065F46; }
.quiz-opt.wrong { background: #FFF1F2; border-color: #FDA4AF; color: #9F1239; animation: quizShake .4s ease-in-out; }
.quiz-opt:disabled { cursor: default; }
@keyframes quizShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ── Concept recall ── */
.quiz-recall {
  margin-top: 1rem;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .4s ease, opacity .3s;
}
.quiz-recall.visible {
  max-height: 300px;
  opacity: 1;
}
.quiz-recall-inner {
  background: var(--accent-light, #EEF0FE);
  border: 1px solid var(--accent-border, #B4B6F0);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
}
.quiz-recall-label {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent, #6366F1);
  margin-bottom: .4rem;
}
.quiz-recall-text {
  font-size: .9rem;
  color: var(--text2, #5A5A72);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.quiz-recall-btn {
  display: block;
  width: 100%;
  padding: .75rem;
  background: var(--accent, #6366F1);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: 'DM Sans', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
}
.quiz-recall-btn:hover { filter: brightness(1.1); }

/* ── Final step ── */
.quiz-final { text-align: center; padding: 1rem 0; }
.quiz-final-icon {
  width: 80px; height: 80px;
  background: #D1FAE5;
  color: #059669;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.5rem;
}
.quiz-final-icon svg { width: 40px; height: 40px; }
.quiz-final h3 { font-size: 1.75rem; font-weight: 800; margin-bottom: .5rem; }
.quiz-final p { color: var(--text3, #8A8AA0); font-size: .95rem; font-weight: 500; margin-bottom: 2.5rem; }

/* ── Self-sort ── */
.quiz-self-sort {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.quiz-sort-btn {
  width: 100%;
  padding: 1rem 1.5rem;
  border-radius: 16px;
  border: none;
  font-family: 'DM Sans', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
  text-align: center;
}
.quiz-sort-btn.got-it {
  background: #10B981;
  color: #fff;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}
.quiz-sort-btn.got-it:hover { background: #059669; }
.quiz-sort-btn.review {
  background: #f1f5f9;
  color: #475569;
}
.quiz-sort-btn.review:hover { background: #e2e8f0; }
.quiz-sort-btn.selected { font-weight: 700; transform: scale(0.97); }
.quiz-sort-btn.got-it.selected { background: #059669; }
.quiz-sort-btn.review.selected { background: #e2e8f0; }
.quiz-sort-icon { width: 16px; height: 16px; vertical-align: middle; margin-right: 6px; }

/* ── Toast ── */
.quiz-toast {
  position: fixed;
  top: 1.2rem;
  left: 50%;
  transform: translate(-50%, -1rem);
  background: #1E1E2A;
  color: #fff;
  padding: .75rem 2rem;
  border-radius: 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
  opacity: 0;
  pointer-events: none;
  transition: all .3s ease;
  z-index: 200;
}
.quiz-toast.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}