/* Medical Conference Presentation Trainer — flipped-classroom "learn first" opener.
 * Loaded after styles.css; scoped under #learn so it does not affect the rest of
 * the page. Reuses the shared .q-card self-check styles from styles.css. */

.learn-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
}

.learn-head h2 { margin: 0; }

/* Lesson list ------------------------------------------------------------- */
.learn-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem 1rem;
  margin-top: .75rem;
  border: 1px solid var(--line, #e3e3e8);
  border-radius: 10px;
  background: #fff;
}

.learn-item.done { background: var(--card-soft, #fafafb); }

.learn-item-info { flex: 1 1 14rem; min-width: 0; }
.learn-item-title { margin: 0; font-weight: 600; }
.learn-item-info p { margin: .15rem 0; }
.learn-tick { color: #1e7e34; font-weight: 700; }

.learn-handoff {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line, #e3e3e8);
}

/* Lesson player ----------------------------------------------------------- */
.learn-player { margin-top: .5rem; }
.learn-player h3 { margin: 0 0 .25rem; }
.learn-player h4 { margin: 1rem 0 .5rem; font-size: 1rem; }

.learn-slide {
  margin-top: .85rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line, #e3e3e8);
  border-left: 4px solid var(--brand, #3b4cca);
  border-radius: 10px;
  background: #fff;
}

.learn-slide h4 { margin: 0 0 .5rem; font-size: 1.1rem; }
.learn-points { margin: .5rem 0 0 1.1rem; padding: 0; }
.learn-points li { margin: .4rem 0; }
.learn-points li p { margin: .1rem 0 0; }

.learn-play-row { margin: .85rem 0 .35rem; }

.learn-script { margin: .35rem 0 .5rem; }
.learn-script summary { cursor: pointer; color: var(--muted, #777); }
.learn-script p { margin: .4rem 0; }

.learn-check-head { border-top: 1px solid var(--line, #e3e3e8); padding-top: .75rem; }

.learn-finish-row {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1rem;
}

@media (max-width: 640px) {
  .learn-item .btn,
  .learn-handoff .btn,
  .learn-finish-row .btn { width: 100%; justify-content: center; }
}