/* Shared course presentation, based on the paragraph-matching course.
   Scoped to the self-study shell; course state and answer controls stay intact. */
.self-study-hub.sc-unified {
  --sc-ink: #173c37; --sc-teal: #16776c; --sc-soft: #edf5f0;
  --sc-line: #d7e5df; --sc-muted: #61746f; --sc-amber: #c48b20;
  box-sizing: border-box; width: 100%; max-width: 1180px; margin: 0 auto;
  padding: 24px 24px 60px; color: var(--sc-ink);
  font: 15px/1.7 system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  overflow-wrap: anywhere;
}
.self-study-hub.sc-unified *, .self-study-hub.sc-unified *::before, .self-study-hub.sc-unified *::after { box-sizing: border-box; }
.self-study-hub.sc-unified :is(.reading-course, .mc-root, .cc-root, .listening-course, .writing-course, .translation-course-page) {
  width: 100%; max-width: none; margin: 0; padding: 0; min-width: 0; font: inherit;
}
.self-study-hub.sc-unified :is(button, select, input, textarea) { max-width: 100%; }
.self-study-hub.sc-unified :focus-visible { outline: 3px solid var(--sc-amber); outline-offset: 3px; }
.self-study-hub.sc-unified [tabindex="-1"]:focus { outline: none; }
.self-study-hub.sc-unified :is(.sc-course-content, .rc-lesson, .wc-main, .tc-workbook, .lc-lesson-body) { min-width: 0; }
.self-study-hub.sc-unified :is(.rc-button, .cc-button, .lc-button, .wc-button, .tc-button, .mc-button) {
  min-height: 42px; padding: 8px 15px; border-radius: 7px; line-height: 1.5;
  font-size: 14px; font-weight: 600; white-space: normal;
}
.self-study-hub.sc-unified :is(.rc-primary, .cc-primary, .lc-primary, .wc-button-primary, .tc-primary, .mc-primary) {
  background: var(--sc-teal); border-color: var(--sc-teal); color: #fff;
}
.self-study-hub.sc-unified .sc-breadcrumb { margin-bottom: 20px; }
.self-study-hub.sc-unified .sc-breadcrumb [data-course-directory] { margin-left: auto; }
.self-study-hub.sc-unified .sc-directory-heading { margin: 0 0 18px; font-size: 22px; line-height: 1.4; }
.self-study-hub.sc-unified .sc-directory-heading[hidden] { display: none; }

.self-study-hub.sc-show-lesson :is(.lc-coach-guide, .lc-weekly-plan, .lc-sources) { max-width: 800px; margin-left: auto; margin-right: auto; }

/* Course headers: compact title, quiet progress and the same divider. */
.self-study-hub.sc-unified :is(.rc-header, .lc-intro, .wc-header, .tc-header) {
  padding: 0 0 18px; margin: 0; border: 0; border-bottom: 1px solid var(--sc-line);
  border-radius: 0; background: transparent; gap: 24px;
}
.self-study-hub.sc-unified :is(.rc-header h1, .lc-intro h1, .wc-intro h2, .tc-header h1) {
  font-size: 22px; line-height: 1.4; letter-spacing: 0; margin: 0 0 8px;
}
.self-study-hub.sc-unified :is(.rc-eyebrow, .lc-kicker, .wc-eyebrow, .tc-kicker, .cc-kicker) {
  font-size: 12px; line-height: 1.6; letter-spacing: .08em; margin: 0 0 7px; color: var(--sc-teal);
}
.self-study-hub.sc-unified :is(.rc-storage-note, .cc-status, .lc-sync-note, .wc-save-note, .tc-save-note) {
  min-height: 35px; font-size: 12px; line-height: 1.7; color: var(--sc-muted);
  margin: 0 0 15px; padding: 7px 0; border: 0;
}
.self-study-hub.sc-unified .wc-source-note { margin: -12px 0 18px; }
.self-study-hub.sc-unified .lc-progress-line { padding-top: 12px; }
.self-study-hub.sc-unified .wc-progress-number strong { font: 28px/1.3 system-ui, sans-serif; }
.self-study-hub.sc-unified .wc-progress-summary { border-left: 1px solid var(--sc-line); padding-left: 22px; }
.self-study-hub.sc-unified :is(.lc-lead, .wc-intro > p:not(.wc-eyebrow), .tc-header > div > p:last-child) { font-size: 14px; margin-bottom: 0; }

/* Numbered, full-width lesson rows replace the four unrelated card layouts. */
.self-study-hub.sc-unified :is(.rc-catalog, .tc-catalog, .wc-course-list) {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  padding: 0; margin: 0 0 28px; border-top: 1px solid var(--sc-line);
}
.self-study-hub.sc-unified :is(.lc-layout, .wc-body) { display: block; }
.self-study-hub.sc-unified :is(.lc-lessons, .wc-sidebar) { position: static; display: block; width: 100%; }
.self-study-hub.sc-unified :is(.lc-nav-heading, .wc-sidebar-heading) { margin: 0 0 15px; }
.self-study-hub.sc-unified :is(.lc-nav-heading, .wc-sidebar-heading h3) { font-size: 20px; color: var(--sc-ink); }
.self-study-hub.sc-unified :is(.rc-course-card, .lc-lesson-link, .wc-course-link, .tc-catalog > button) {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: start; gap: 6px 15px;
  width: 100%; margin: 0; padding: 23px 12px; min-width: 0;
  border: 0; border-bottom: 1px solid var(--sc-line); border-radius: 0; background: transparent;
  color: var(--sc-ink); text-align: left; box-shadow: none;
}
.self-study-hub.sc-unified :is(.rc-course-card[aria-current="page"], .lc-lesson-link.is-active, .wc-course-link.is-active, .tc-catalog > button[aria-current]) {
  border-color: var(--sc-line); background: var(--sc-soft); box-shadow: inset 3px 0 var(--sc-teal);
}
.self-study-hub.sc-unified :is(.rc-course-card, .lc-lesson-link, .wc-course-link, .tc-catalog > button):hover { background: #f2f7f4; }
.self-study-hub.sc-unified :is(.rc-course-number, .lc-lesson-number, .wc-course-number, .tc-course-index, .cc-number) {
  font: 600 20px/1.4 Georgia, serif; color: var(--sc-teal); white-space: nowrap; overflow-wrap: normal;
  padding: 0; margin: 1px 0 0; min-width: 0;
}
.self-study-hub.sc-unified :is(.rc-course-description strong, .lc-lesson-link strong, .wc-course-description strong, .tc-catalog strong) { font-size: 18px; line-height: 1.55; }
.self-study-hub.sc-unified :is(.rc-course-description > span, .rc-course-description small, .lc-lesson-link small, .wc-course-description small, .tc-catalog small, .tc-catalog span:not(.tc-course-index)) {
  display: block; font-size: 13px; color: var(--sc-muted); margin: 4px 0 0;
}
.self-study-hub.sc-unified .tc-course-index { grid-row: 1 / 4; }
.self-study-hub.sc-unified .tc-catalog > button > :not(.tc-course-index) { grid-column: 2; }
.self-study-hub.sc-unified .wc-review-button { max-width: 360px; margin-bottom: 28px; border-radius: 7px; padding: 14px; }
.self-study-hub.sc-unified .lc-lessons > .lc-small { padding: 12px 0; }
.self-study-hub.sc-unified .cc-lessons { border: 0; border-top: 1px solid var(--sc-line); border-radius: 0; background: transparent; }
.self-study-hub.sc-unified .cc-lesson { grid-template-columns: 32px minmax(0, 1fr) auto; padding: 23px 0; gap: 15px; border-bottom: 1px solid var(--sc-line); }
.self-study-hub.sc-unified .cc-lesson + .cc-lesson { border-top: 0; }
.self-study-hub.sc-unified .cc-lesson h3 { font-size: 18px; }
.self-study-hub.sc-unified .cc-lesson p { font-size: 14px; }
.self-study-hub.sc-unified .cc-intro h1 { font-size: 34px; }
.self-study-hub.sc-unified .cc-panel { border-radius: 10px; padding: 22px; }

/* Lesson reading width and paragraph rhythm mirror .mc-lesson. */
.self-study-hub.sc-unified :is(.rc-lesson, .lc-lesson-body, .wc-main, .tc-workbook) {
  max-width: 800px; margin: 14px auto 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; overflow: visible;
}
.self-study-hub.sc-unified :is(.wc-lesson, .wc-review-panel) { border: 0; border-radius: 0; background: transparent; padding: 0; }
.self-study-hub.sc-unified :is(.rc-lesson-title, .lc-lesson-header, .tc-lesson-heading) { padding: 0; border: 0; }
.self-study-hub.sc-unified :is(.rc-lesson-title h2, .lc-lesson-header h2, .wc-lesson-heading h3, .tc-lesson-heading h2, .cc-reading-header h1) {
  font-size: 30px; line-height: 1.4; letter-spacing: 0; margin: 0 0 12px;
}
.self-study-hub.sc-unified :is(.rc-lesson-title p, .lc-goal, .wc-lesson-goal, .tc-lesson-heading p, .cc-reading-header p) { font-size: 15px; line-height: 1.7; color: var(--sc-muted); }
.self-study-hub.sc-unified :is(.rc-learn, .rc-practice, .rc-review, .rc-empty, .tc-content) { padding: 0; margin-top: 28px; }
.self-study-hub.sc-unified :is(.lc-section, .wc-section, .tc-teaching-step, .cc-section) { padding: 0; margin-top: 28px; border: 0; }
.self-study-hub.sc-unified :is(.rc-methods, .wc-steps) { gap: 28px; }
.self-study-hub.sc-unified :is(.rc-methods h3, .lc-section h3, .lc-example h3, .wc-section-title h4, .tc-content h3, .cc-section h2) { font-size: 18px; line-height: 1.55; margin-bottom: 9px; }
.self-study-hub.sc-unified :is(.rc-methods p, .lc-steps li, .wc-steps p, .tc-teaching-step > p, .cc-section p) { font-size: 15px; line-height: 1.7; }
.self-study-hub.sc-unified .wc-section-title { margin-bottom: 14px; }
.self-study-hub.sc-unified .wc-steps h5 { font-size: 16px; }
.self-study-hub.sc-unified :is(.rc-worked-example, .lc-example, .tc-example, .cc-example, .wc-prompt, .wc-model) {
  border: 0; border-left: 3px solid var(--sc-teal); border-radius: 0 9px 9px 0;
  background: #fff; padding: 24px; margin-top: 28px;
}
.self-study-hub.sc-unified :is(.lc-english, .tc-english, .cc-example .cc-english, .wc-model-text) { font-family: Georgia, "Times New Roman", serif; font-size: 20px; line-height: 1.7; }
.self-study-hub.sc-unified :is(.rc-example-explanation, .tc-annotation) { border-top: 1px solid var(--sc-line); padding-top: 15px; margin-top: 15px; }
.self-study-hub.sc-unified :is(.rc-actions, .cc-actions, .tc-actions, .wc-footer-actions) { display: flex; gap: 12px; flex-wrap: wrap; margin: 25px 0 14px; }
.self-study-hub.sc-unified .cc-content:has(> .cc-reading-header) { max-width: 800px; margin: 14px auto 0; }
.self-study-hub.sc-unified .cc-reading-header { padding: 24px 0 0; }
.self-study-hub.sc-unified .cc-content:has(.cc-passage) { max-width: none; }

/* Steps use the matching course's clearly outlined current stage. */
.self-study-hub.sc-unified :is(.rc-tabs, .tc-tabs) { display: flex; gap: 8px; margin: 20px 0 24px; padding: 0; border: 0; }
.self-study-hub.sc-unified :is(.rc-tabs .rc-button, .tc-tabs .tc-button) {
  flex: 1; text-align: left; padding: 12px; border: 1px solid var(--sc-line);
  border-radius: 7px; background: #fff; color: var(--sc-muted); font-size: 14px;
}
.self-study-hub.sc-unified :is(.rc-tabs [aria-current="step"], .tc-tabs [aria-pressed="true"]) { background: var(--sc-soft); border-color: var(--sc-teal); color: var(--sc-teal); font-weight: 650; }
.self-study-hub.sc-unified :is(.lc-evidence-path, .wc-learning-path) { display: flex; flex-wrap: wrap; gap: 12px; border: 0; padding: 0; margin: 22px 0 0; }
.self-study-hub.sc-unified :is(.lc-evidence-path li, .wc-learning-path li) { padding: 0 16px 0 0; border: 0; border-right: 1px solid var(--sc-line); max-width: none; flex: 0 1 auto; }
.self-study-hub.sc-unified :is(.lc-evidence-path li:last-child, .wc-learning-path li:last-child) { border: 0; }
.self-study-hub.sc-unified :is(.lc-evidence-path li, .wc-learning-path li)::after { content: none; }
.self-study-hub.sc-unified .lc-evidence-path strong { font-size: 15px; }

/* Exercise and feedback areas stay distinct from the method text. */
.self-study-hub.sc-unified .rc-lesson:has(.rc-practice) { max-width: none; }
.self-study-hub.sc-unified :is(.rc-evidence-layout, .tc-practice-grid) { gap: 24px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.self-study-hub.sc-unified .rc-passage { padding: 20px; border: 1px solid var(--sc-line); border-radius: 10px; background: #fff; }
.self-study-hub.sc-unified :is(.rc-question-title, .tc-prompt) { padding: 18px; border-radius: 8px; background: var(--sc-soft); }
.self-study-hub.sc-unified :is(.lc-feedback, .wc-explanation, .tc-answer) { padding: 18px; border-left: 3px solid var(--sc-amber); border-radius: 0 7px 7px 0; font-size: 14px; }
.self-study-hub.sc-unified :is(.lc-feedback.is-correct, .wc-explanation:not(.needs-review)) { background: var(--sc-soft); border-left-color: var(--sc-teal); }
.self-study-hub.sc-unified :is(.rc-option, .lc-option, .wc-option, .tc-option, .cc-option) { min-height: 44px; line-height: 1.7; }
.self-study-hub.sc-unified :is(.wc-draft, .lc-section textarea, .tc-content textarea, .cc-root textarea) { border-radius: 6px; border-color: #a7c7b8; background: #fff; font-size: 16px; line-height: 1.7; }
.self-study-hub.sc-unified .lc-audio-controls:has(> .lc-speech-setting) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.self-study-hub.sc-unified .lc-speech-setting { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; margin: 0; font-size: 13px; }
.self-study-hub.sc-unified .lc-speech-setting select { display: block; width: 100%; min-height: 44px; padding: 8px; border: 1px solid #a7c7b8; border-radius: 6px; background: #fff; color: var(--sc-ink); font: inherit; }
.self-study-hub.sc-unified .lc-audio-comparison { border-top: 1px solid var(--sc-line); padding-top: 16px; margin-top: 20px; }
.self-study-hub.sc-unified .lc-audio-comparison textarea { display: block; width: 100%; min-height: 90px; padding: 12px; border: 1px solid #a7c7b8; border-radius: 6px; font-family: inherit; font-size: 16px; line-height: 1.7; }

@media (max-width: 850px) {
  .self-study-hub.sc-unified :is(.rc-evidence-layout, .tc-practice-grid, .tc-review-grid, .rc-review-comparison, .wc-language-kit) { grid-template-columns: minmax(0, 1fr); }
  .self-study-hub.sc-unified .rc-passage { border-bottom: 1px solid var(--sc-line); }
  .self-study-hub.sc-unified :is(.rc-tabs .rc-button, .tc-tabs .tc-button) { padding: 10px; font-size: 12px; }
}
@media (max-width: 720px) {
  .self-study-hub.sc-unified { padding: 18px 13px 40px; }
  .self-study-hub.sc-unified :is(.rc-header, .tc-header, .wc-header) { display: block; }
  .self-study-hub.sc-unified :is(.rc-course-progress, .tc-progress, .wc-progress-summary) { margin-top: 16px; width: 100%; padding: 12px 0 0; border: 0; border-top: 1px solid var(--sc-line); }
  .self-study-hub.sc-unified :is(.rc-header h1, .lc-intro h1, .wc-intro h2, .tc-header h1, .sc-directory-heading) { font-size: 20px; }
  .self-study-hub.sc-unified :is(.rc-lesson-title h2, .lc-lesson-header h2, .wc-lesson-heading h3, .tc-lesson-heading h2, .cc-reading-header h1) { font-size: 26px; }
  .self-study-hub.sc-unified :is(.rc-course-card, .lc-lesson-link, .wc-course-link, .tc-catalog > button) { grid-template-columns: 30px minmax(0, 1fr); gap: 6px 10px; padding: 20px 9px; }
  .self-study-hub.sc-unified :is(.rc-course-description strong, .lc-lesson-link strong, .wc-course-description strong, .tc-catalog strong) { font-size: 17px; }
  .self-study-hub.sc-unified .cc-lesson { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 20px 0; }
  .self-study-hub.sc-unified .cc-lesson-action { grid-column: 2; justify-items: start; }
  .self-study-hub.sc-unified :is(.rc-worked-example, .lc-example, .tc-example, .cc-example, .wc-prompt, .wc-model) { padding: 19px; }
  .self-study-hub.sc-unified :is(.lc-english, .tc-english, .cc-example .cc-english, .wc-model-text) { font-size: 18px; }
  .self-study-hub.sc-unified :is(.rc-actions, .cc-actions, .tc-actions, .wc-footer-actions, .lc-page-controls) { flex-wrap: wrap; }
  .self-study-hub.sc-unified :is(.rc-actions .rc-button, .cc-actions .cc-button, .tc-actions .tc-button, .wc-footer-actions .wc-button, .lc-page-controls .lc-button) { flex: 1; }
  .self-study-hub.sc-unified .lc-audio-controls:has(> .lc-speech-setting) { grid-template-columns: minmax(0, 1fr); }
  .self-study-hub.sc-unified .sc-original-note { margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .self-study-hub.sc-unified * { scroll-behavior: auto !important; }
}

/* Visibility comes last so desktop/mobile layout rules cannot reopen a hidden
   pane. The components and their local draft state remain mounted. */
.self-study-hub.sc-unified.sc-show-directory :is(.rc-lesson, .lc-lesson-body, .wc-main, .tc-workbook) { display: none; }
.self-study-hub.sc-unified.sc-show-lesson :is(.rc-catalog, .lc-lessons, .wc-sidebar, .tc-catalog) { display: none; }
.self-study-hub.sc-unified.sc-show-lesson :is(.wc-learning-path, .lc-evidence-path, .wc-progress-summary, .rc-course-progress, .tc-progress) { display: none; }