/*
 * KURS step 206: shared lesson component geometry.
 * One layout for a lesson in the cabinet, the demo on the home page,
 * the standalone demo, and lesson blocks embedded in public materials.
 * Loaded AFTER page styles / older trainer rules / steps 204-205.
 *
 * Intentionally no surfaces, semantic colours, gradients, shadows, icons,
 * content visibility, response states, table widths, or native media rules.
 * They remain the responsibility of the chosen Light/Dark/Joyfull palette.
 */
:root {
    --kurs-learn-font: var(--kurs-font-ui, Arial, sans-serif);
    --kurs-learn-radius: var(--kurs-card-radius, 12px);
    --kurs-learn-radius-small: var(--kurs-control-radius, 8px);
    --kurs-learn-card-padding: 20px 24px;
    --kurs-learn-trainer-padding: 22px 24px;
    --kurs-learn-inner-padding: 14px 16px;
    --kurs-learn-stack-gap: 16px;
    --kurs-learn-option-gap: 10px;
    --kurs-learn-paragraph-size: 13px;
    --kurs-learn-button-size: var(--kurs-text-button, 14px);
    --kurs-learn-control-height: var(--kurs-control-height, 42px);
}

/* Content roots exist on BOTH public pages and in student cabinet. */
:is(.lesson-main, .kurs-blog-content) {
    font-family: var(--kurs-learn-font);
}
.lesson-main {
    gap: var(--kurs-learn-stack-gap) !important;
    font-size: var(--kurs-learn-paragraph-size) !important;
    line-height: 1.55 !important;
}
.lesson-main :is(.lesson-material-card, .lesson-audio-card, .lesson-test-card) {
    font-size: var(--kurs-learn-paragraph-size) !important;
    line-height: 1.55 !important;
}

/* Same geometry, regardless of page-specific style sheets / theme palette. */
:is(.lesson-material-card, .lesson-audio-card, .lesson-test-card) {
    box-sizing: border-box !important;
    border-radius: var(--kurs-learn-radius) !important;
    padding: var(--kurs-learn-card-padding) !important;
    min-width: 0;
}
:is(.letter-trainer, .roots-trainer, .stress-trainer,
    .grammar-trainer, .joined-trainer, .ne-trainer,
    .nn-trainer, .punctuation-trainer, .grammar-error-trainer) {
    box-sizing: border-box !important;
    border-radius: var(--kurs-learn-radius) !important;
    border-width: 2px !important;
    border-style: solid !important;
    padding: var(--kurs-learn-trainer-padding) !important;
    min-width: 0;
    font-family: var(--kurs-learn-font);
}
/* EditorJS content cards: preserve meaningful colour and author formatting. */
:is(.lesson-rule, .lesson-base-material-callout,
    .lesson-callout, .lesson-warning, .lesson-alert,
    .lesson-note, .lesson-notice, .lesson-important) {
    box-sizing: border-box;
    border-radius: var(--kurs-learn-radius-small) !important;
    min-width: 0;
}
:is(.lesson-test-inline, .lesson-test-embedded) {
    box-sizing: border-box;
    border-radius: var(--kurs-learn-radius) !important;
    min-width: 0;
}
:is(.lesson-test-question, .test-question,
    .trainer-card, .letter-trainer-row, .stress-word) {
    box-sizing: border-box;
    border-radius: var(--kurs-learn-radius-small) !important;
    min-width: 0;
}

/* Shared text rhythm within lessons; do not touch editable HTML spans. */
:is(.lesson-content, .kurs-blog-content) :is(
    .lesson-paragraph, .lesson-list, .lesson-rule-text,
    .lesson-base-material-callout-text, .lesson-student-rich-input,
    .lesson-student-table-input, .lesson-test-question-text,
    .lesson-test-option, .lesson-test-feedback, .lesson-test-result
) {
    font-family: var(--kurs-learn-font);
    font-size: var(--kurs-learn-paragraph-size) !important;
    line-height: 1.55 !important;
}
:is(.lesson-content, .kurs-blog-content) :is(
    .lesson-student-rich-input, .lesson-student-table-input,
    .lesson-rule-text[contenteditable="true"]
) {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
:is(.lesson-test-form, .lesson-test-question, .lesson-test-feedback,
    .lesson-test-result, .stress-word, .letter-trainer-row) {
    min-width: 0;
}

/* Embedded / branching tests use the same option sizing on either page. */
:is(.lesson-test-option, .test-option, .test-checkbox-single,
    .grammar-error-option) {
    box-sizing: border-box !important;
    border-radius: var(--kurs-learn-radius-small) !important;
    min-height: var(--kurs-forms-option-height, 44px);
    font-family: var(--kurs-learn-font);
}
:is(.lesson-test-option, .test-option, .test-checkbox-single) {
    padding: var(--kurs-forms-option-padding-y, 10px)
             var(--kurs-forms-option-padding-x, 13px) !important;
    gap: var(--kurs-learn-option-gap) !important;
}
/* Labels and text fields do not change width/behaviour, only their metrics. */
:is(.lesson-student-input, .lesson-student-rich-input,
    .lesson-student-table-input, .test-short-answer, .grammar-answer,
    .joined-select, .ne-writing, .ne-reason, .punct-reason,
    .roots-answer-input, .letter-answer-input) {
    box-sizing: border-box;
    border-radius: var(--kurs-learn-radius-small) !important;
    font-family: var(--kurs-learn-font);
}
:is(.lesson-test-submit, .lesson-test-inline-button, .lesson-branch-retry,
    .test-submit, .test-retry, .trainer-check-btn,
    .trainer-secondary-btn, .letter-check, .letter-again,
    .roots-check, .roots-again, .stress-check, .stress-again,
    .grammar-check, .grammar-again, .joined-check, .joined-again,
    .ne-check, .ne-again, .nn-check, .nn-again,
    .lesson-essay-submit, .lesson-complete-button),
.lesson-main :is(.lesson-test-submit, .lesson-test-inline-button, .lesson-branch-retry,
    .test-submit, .test-retry, .trainer-check-btn,
    .trainer-secondary-btn, .letter-check, .letter-again,
    .roots-check, .roots-again, .stress-check, .stress-again,
    .grammar-check, .grammar-again, .joined-check, .joined-again,
    .ne-check, .ne-again, .nn-check, .nn-again,
    .lesson-essay-submit, .lesson-complete-button) {
    box-sizing: border-box !important;
    min-height: var(--kurs-learn-control-height) !important;
    border-radius: var(--kurs-learn-radius-small) !important;
    padding: var(--kurs-button-padding-y, 8px)
             var(--kurs-button-padding-x, 16px) !important;
    font-family: var(--kurs-learn-font) !important;
    font-size: var(--kurs-learn-button-size) !important;
    line-height: 1.2 !important;
}

/* Keep the editor-defined table width / col sizing and mobile scrolling. */
.lesson-table-scroll {
    box-sizing: border-box;
    border-radius: var(--kurs-learn-radius-small) !important;
    max-width: 100%;
}
.lesson-table :is(th, td) {
    box-sizing: border-box;
    vertical-align: middle;
}

/* Stress: protect steps 205/205a against higher-specificity old rules.
   Orange on selected glyph only; no background, halo, border or shifting.
   Align each word vertically; keep words horizontally LEFT-aligned. */
.stress-trainer .stress-word {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
}
.stress-trainer .stress-word .stress-letters {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    align-self: center !important;
}
.stress-trainer .stress-word .stress-letter {
    min-height: 0 !important;
    height: auto !important;
    line-height: 1 !important;
}
.stress-trainer .stress-letters :is(button.stress-vowel, .stress-vowel[role="button"]).is-selected,
.stress-trainer .stress-letters :is(button.stress-vowel, .stress-vowel[role="button"]).is-selected:is(:focus,:focus-visible,:active,:hover,:disabled) {
    color: #f28c28 !important;
    -webkit-text-fill-color: #f28c28 !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    text-decoration: none !important;
    text-shadow: none !important;
    filter: none !important;
}

@media (max-width: 700px) {
    :root {
        --kurs-learn-card-padding: 14px;
        --kurs-learn-trainer-padding: 14px;
        --kurs-learn-inner-padding: 12px;
    }
    :is(.lesson-main, .kurs-blog-content) { min-width: 0; }
    :is(.letter-trainer, .roots-trainer, .stress-trainer,
        .grammar-trainer, .joined-trainer, .ne-trainer,
        .nn-trainer, .punctuation-trainer, .grammar-error-trainer) {
        max-width: 100%;
    }
}

/* KURS 236f: unified trainer root width: 30% narrower, across types. */
@media (min-width: 851px) {
  :is(.lesson-main, .lesson-content, .kurs-blog-content, .demo-lesson-content, .kurs-public-trainer-share-wrapper)
  :is(.letter-trainer, .roots-trainer, .stress-trainer, .grammar-trainer,
      .joined-trainer, .ne-trainer, .nn-trainer, .punctuation-trainer,
      .grammar-error-trainer, .kurs-published-trainer) {
    width: 70% !important;
    inline-size: 70% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    margin-inline-start: 0 !important;
  }
}
@media (max-width: 850px) {
  :is(.lesson-main, .lesson-content, .kurs-blog-content, .demo-lesson-content, .kurs-public-trainer-share-wrapper)
  :is(.letter-trainer, .roots-trainer, .stress-trainer, .grammar-trainer,
      .joined-trainer, .ne-trainer, .nn-trainer, .punctuation-trainer,
      .grammar-error-trainer, .kurs-published-trainer) {
    width: 100% !important;
    inline-size: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}