/* public/widgets/lms-cards.css
   A lesson as cards (public/widgets/lms-cards.js). Loaded by People (web player,
   Settings > Training preview, the lesson editor's card outline) and by
   /mobile/training. Tokens only, so both themes and both surfaces follow the
   system. The selectors carry one class more than people.html's .lms-content
   rules on purpose: those load after this file and would win a tie. */

/* Reading size: Richard, 2026-10-29, "the words are all meshed together".
   The sizes are custom properties because the two surfaces have different rem:
   the phone app's root is 16px, People's is 14px (shell.css), so People raises
   them (people.html, #panel-my-training) instead of this file guessing. */
.lms-content.lms-cards {
  --lms-card-body: var(--text-lg); --lms-card-head: var(--text-2xl);
  --lms-card-sub: var(--text-xl); --lms-card-small: var(--text-md);
  font-size: var(--lms-card-body); line-height: var(--lh-loose); max-width: none; color: var(--ink);
}
.lms-cards .lms-card-pane,
.lms-cards .lms-card-pane:focus,
.lms-cards .lms-card-pane:focus-visible { outline: none; box-shadow: none; }
.lms-cards.is-one .lms-card-pane[hidden] { display: none; }
.lms-cards .lms-card-pane > :first-child { margin-top: 0; }
.lms-cards .lms-card-pane > :last-child { margin-bottom: 0; }
.lms-cards .lms-card-pane.is-entering { animation: lms-cardpane-in var(--dur-slow) var(--ease-out); }
/* Not lms-card-in: people.html already has one (the course cards rising). */
@keyframes lms-cardpane-in {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lms-cards .lms-card-pane.is-entering { animation: none; }
}

/* The card's own title, then any smaller heading inside it. */
.lms-cards .lms-card-pane .lms-card-title {
  font-size: var(--lms-card-head); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight);
  font-weight: 650; color: var(--ink); margin: 0 0 var(--s-5);
}
.lms-cards .lms-card-pane :is(h1, h2, h3, h4):not(.lms-card-title) {
  font-size: var(--lms-card-sub); line-height: var(--lh-snug); font-weight: 650; margin: var(--s-6) 0 var(--s-2);
}
.lms-cards .lms-card-pane :is(p, ul, ol) { margin: 0 0 var(--s-4); }
.lms-cards .lms-card-pane li { margin-bottom: var(--s-2); padding-left: var(--s-1); }
.lms-cards .lms-card-pane li::marker { color: var(--brand-royal); }
.lms-cards .lms-card-pane strong { font-weight: 650; }

.lms-cards .lms-card-cont,
.lms-cards .lms-card-num {
  font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 var(--s-3);
}

/* A quote in a lesson is almost always the words to say on the call: a speech
   bubble, full contrast, not the grey indented aside it used to be. */
.lms-cards .lms-card-pane blockquote {
  margin: var(--s-4) 0; padding: var(--s-4) var(--s-5);
  background: var(--info-soft); border: 1px solid var(--border-subtle);
  border-radius: var(--r-xs) var(--r-lg) var(--r-lg) var(--r-lg);
  color: var(--ink); font-size: var(--lms-card-body); line-height: var(--lh-normal);
}

/* "Why this matters" and friends: the point of the lesson, highlighted. */
.lms-cards .lms-card-pane.is-takeaway {
  background: var(--accent-soft); border-radius: var(--r-lg); padding: var(--s-6);
}

/* Tables stay readable on a phone: they scroll sideways inside the card. */
.lms-cards .lms-card-pane table {
  display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse;
  font-size: var(--lms-card-small); line-height: var(--lh-normal); margin: var(--s-4) 0;
}
.lms-cards .lms-card-pane th { background: var(--surface-2); font-weight: 650; }
.lms-cards .lms-card-pane :is(th, td) { padding: var(--s-2) var(--s-3); vertical-align: top; }

/* Every card shown at once, numbered: the Settings > Training preview. */
.lms-cards.is-stack .lms-card-pane {
  border: 1px dashed var(--border); border-radius: var(--r-md); padding: var(--s-5); margin-bottom: var(--s-3);
}

/* The dots: one per card. Back to any card already seen, never past one. */
.lms-cards-dots { display: flex; align-items: center; gap: var(--s-1); flex: 1 1 auto; min-width: 0; }
.lms-cards-dots[hidden] { display: none; }
.lms-cards-dot {
  flex: 1 1 0; min-width: 10px; max-width: 72px; height: 28px; padding: 0; margin: 0;
  border: 0; background: transparent; cursor: pointer; display: flex; align-items: center;
}
.lms-cards-dot::before {
  content: ''; display: block; width: 100%; height: 6px; border-radius: var(--r-full);
  background: var(--surface-3); transition: background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.lms-cards-dot[data-state="seen"]::before { background: var(--brand-royal); opacity: 0.55; }
.lms-cards-dot[data-state="current"]::before { background: var(--brand-royal); box-shadow: 0 0 0 3px var(--accent-soft); }
.lms-cards-dot:disabled { cursor: not-allowed; }
.lms-cards-dot:focus-visible { outline: 2px solid var(--brand-royal); outline-offset: 2px; border-radius: var(--r-sm); }

/* The lesson editor: a card break is visible while writing, and the outline
   under the editing area says what the learner will get. */
.lms-editor hr {
  border: 0; border-top: 2px dashed var(--brand-royal); margin: var(--s-6) 0; height: 0; overflow: visible; position: relative;
}
.lms-editor hr::after {
  content: 'New card'; position: absolute; left: 50%; top: -0.8em; transform: translateX(-50%);
  padding: 0 var(--s-2); background: var(--surface); color: var(--brand-royal-ink);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.lms-card-plan { margin-top: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-3) var(--s-4); background: var(--surface-2); }
.lms-card-plan-head { display: flex; justify-content: space-between; gap: var(--s-2); flex-wrap: wrap; font-size: var(--text-sm); font-weight: 650; color: var(--ink); }
.lms-card-plan-help { font-size: var(--text-xs); color: var(--ink-3); margin: var(--s-1) 0 var(--s-2); }
.lms-card-plan ol { margin: 0; padding-left: var(--s-5); display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); color: var(--ink-2); }
.lms-card-plan-meta { color: var(--ink-3); }
.lms-card-plan-warn { color: var(--warn-ink); font-weight: 600; }

@media (max-width: 640px) {
  .lms-cards .lms-card-pane .lms-card-title { margin-bottom: var(--s-4); }
  .lms-cards .lms-card-pane blockquote { padding: var(--s-3) var(--s-4); }
  .lms-cards .lms-card-pane.is-takeaway { padding: var(--s-4); }
  .lms-cards-dot { height: 32px; }
}