/*!
 * module.css — module/lesson page template (editorial redesign handoff).
 *
 * Linked ONLY from src/modules/*.html, AFTER css/main.css. It layers the
 * lesson-page specifics from docs/design-handoff/README.md ("Module/lesson
 * page") on top of the shared system:
 *
 *   - narrower main column (max-width 740px)
 *   - 16.5px / 1.65 long-form body copy
 *   - key-concept callout: white card, 3px indigo left border,
 *     right-side-only radius
 *   - knowledge-check card with radio-style answer rows — the selected /
 *     correct row gets an indigo border + tint
 *   - split footer nav: outline "Back to course" / filled indigo
 *     "Mark complete & continue"
 *
 * TOKENS ONLY: every color here is a var(--ca-*) custom property declared in
 * css/main.css (light on :root, dark on prefers-color-scheme +
 * :root[data-theme="dark"]), so both themes work with no literal values and
 * no theme blocks in this file. All rules are scoped under body.ca-lesson,
 * the class the module pages set, so this sheet can never restyle other
 * page types even if linked by mistake.
 */

/* ---------- Lesson column: 740px, per the handoff module screen ----------- */
.ca-lesson .ca-content {
  max-width: var(--ca-content-narrow);
}

/* ---------- Long-form body copy: 16.5px / 1.65 ---------------------------- */
/* Applies to the lesson prose (paragraphs + lists, including inside the
   restyled callouts, tables aside). Interactive widgets that set their own
   compact sizes (quiz, playground, paywall panels, cards) are re-inherited
   back to the system scale just below. */
.ca-lesson .ca-content p:not(.ca-lede),
.ca-lesson .ca-content li {
  font-size: 1.03125rem; /* 16.5px */
  line-height: 1.65;
}
.ca-lesson .ca-content .ca-card p,
.ca-lesson .ca-content .ca-card li,
.ca-lesson .ca-content .ca-module-card p,
.ca-lesson .ca-content .ca-quiz p,
.ca-lesson .ca-content .ca-quiz li,
.ca-lesson .ca-content .ca-playground p,
.ca-lesson .ca-content .ca-playground li,
.ca-lesson .ca-content .ca-paywall p,
.ca-lesson .ca-content .ca-paywall li,
.ca-lesson .ca-content .ca-softgate p,
.ca-lesson .ca-content .ca-softgate li,
.ca-lesson .ca-content .ca-legal p {
  font-size: inherit;
  line-height: inherit;
}

/* ---------- Key-concept callout ------------------------------------------- */
/* One per page (tagged in the page markup, or by lesson.js for
   server-injected premium bodies): white card, 3px indigo left border, and a
   radius on the right side only — the handoff's signature lesson element. */
.ca-lesson .ca-callout--key {
  background: var(--ca-bg-elevated);
  border: 1px solid var(--ca-border);
  border-left: 3px solid var(--ca-brand);
  border-radius: 0 var(--ca-radius-md) var(--ca-radius-md) 0;
  padding: 18px 22px;
}
.ca-lesson .ca-callout--key p,
.ca-lesson .ca-callout--key li {
  font-size: 0.90625rem; /* 14.5px, per the reference callout */
  line-height: 1.65;
  color: var(--ca-text-secondary);
}
.ca-lesson .ca-callout--key strong {
  color: var(--ca-text);
}

/* ---------- Knowledge check ----------------------------------------------- */
/* The H2 is already serif via the global heading rules; here each question
   becomes the handoff's white card and the answers become radio-style rows:
   a drawn 16px dot + label, with the native input visually hidden but still
   focusable (keyboard + screen-reader behavior unchanged). */
.ca-lesson .ca-quiz-question {
  background: var(--ca-bg-elevated);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-md);
  padding: 20px 22px;
}

.ca-lesson .ca-quiz-choice {
  position: relative; /* anchors the hidden input */
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: transparent;
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-radius-sm);
  font-size: 0.875rem; /* 14px answer rows, per the reference */
}
.ca-lesson .ca-quiz-choice:hover {
  border-color: var(--ca-brand);
  background: var(--ca-brand-tint);
}

/* Keep the native input in the accessibility tree (focus order, arrow-key
   radio group behavior) but let the drawn dot do the talking visually. The
   focus ring still shows via main.css's :has(input:focus-visible) rule. */
.ca-lesson .ca-quiz-choice > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* Radio-style dot (square-cornered for multi-select checkboxes). */
.ca-lesson .ca-quiz-dot {
  flex: none;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px solid var(--ca-border-strong);
  background: transparent;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ca-lesson .ca-quiz-choice > input[type="checkbox"] ~ .ca-quiz-dot {
  border-radius: 4px;
}
.ca-lesson .ca-quiz-choice:hover .ca-quiz-dot {
  border-color: var(--ca-brand);
}

/* Selected row (pre-grading): indigo border + tint, filled dot. */
.ca-lesson .ca-quiz-choice.is-selected {
  border-color: var(--ca-brand);
  background: var(--ca-brand-tint);
}
.ca-lesson .ca-quiz-choice.is-selected .ca-quiz-dot {
  border-color: var(--ca-brand);
  background: var(--ca-brand);
}

/* Graded: neutral rows go quiet; the correct row carries the indigo
   border + tint; a selected-but-wrong row keeps the danger treatment. */
.ca-lesson .ca-quiz-question.is-graded .ca-quiz-choice,
.ca-lesson .ca-quiz-question.is-graded .ca-quiz-choice:hover {
  border-color: var(--ca-border);
  background: transparent;
}
.ca-lesson .ca-quiz-question.is-graded .ca-quiz-choice .ca-quiz-dot {
  border-color: var(--ca-border-strong);
  background: transparent;
}
.ca-lesson .ca-quiz-question.is-graded .ca-quiz-choice.is-correct,
.ca-lesson .ca-quiz-question.is-graded .ca-quiz-choice.is-correct:hover {
  border-color: var(--ca-brand);
  background: var(--ca-brand-tint);
}
.ca-lesson .ca-quiz-question.is-graded .ca-quiz-choice.is-correct .ca-quiz-dot {
  border-color: var(--ca-brand);
  background: var(--ca-brand);
}
.ca-lesson .ca-quiz-question.is-graded .ca-quiz-choice.is-incorrect-selected,
.ca-lesson .ca-quiz-question.is-graded .ca-quiz-choice.is-incorrect-selected:hover {
  border-color: var(--ca-danger);
  background: var(--ca-danger-soft);
}
.ca-lesson .ca-quiz-question.is-graded .ca-quiz-choice.is-incorrect-selected .ca-quiz-dot {
  border-color: var(--ca-danger);
  background: var(--ca-danger);
}

/* ---------- Split footer nav ---------------------------------------------- */
/* Layout (flex, space-between, hairline top border) comes from main.css's
   .ca-prevnext; the buttons are the shared outline/filled .ca-btn variants.
   This just pins the pair to the ends even if one side is ever absent. */
.ca-lesson .ca-lesson-footnav {
  justify-content: space-between;
}
.ca-lesson .ca-lesson-footnav .ca-btn--primary {
  margin-left: auto;
}