/**
 * Shared chapter document — match Notion App Default page style
 * Body 16px / 1.75 with distinct paragraph gaps and preserved spacer blocks.
 * Used by TinyMCE (body.bk-chapter) and student reader (.bk-chapter).
 */

.bk-chapter {
    --bk-text-leading: 1.75;
    --bk-paragraph-gap: 12px;
    box-sizing: border-box;
    width: 100%;
    max-width: 756px;
    padding: 24px;
    margin-inline: auto;
    overflow-wrap: break-word;
    word-break: normal;
    /* Notion Default font stack + Myanmar fallbacks */
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, "Noto Sans Myanmar", "Myanmar Text", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    font-size: 16px !important;
    line-height: var(--bk-text-leading) !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    font-weight: 400;
    font-style: normal;
    text-align: left;
    color: #37352f !important;
    -webkit-font-smoothing: auto;
    text-rendering: optimizeLegibility;
}

/* TinyMCE has no Tailwind preflight; use the same box sizing in its iframe. */
.bk-chapter *,
.bk-chapter *::before,
.bk-chapter *::after { box-sizing: border-box; }

body.bk-chapter {
    min-height: 100%;
    margin: 0 auto;
    padding: 24px;
    background: transparent;
}

/* Notion text / list / table cells — do not set line-height on span */
.bk-chapter :where(p, li, td, th) {
    margin: 0;
    color: #37352f !important;
    font-weight: 400;
    font-size: inherit;
    line-height: var(--bk-text-leading) !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    text-align: left;
}

.bk-chapter :where(span, div) {
    margin: 0;
    letter-spacing: normal !important;
    word-spacing: normal !important;
}

/* notion-text-block ≈ padding 3px 2px */
.bk-chapter p {
    margin: 0 !important;
    padding: 3px 2px !important;
    min-height: 1.75em;
    font-size: inherit;
    line-height: var(--bk-text-leading) !important;
    letter-spacing: normal !important;
    color: #37352f !important;
}

/* Notion heading blocks: weight 600, letter-spacing -0.01em */
.bk-chapter :where(h1, h2, h3, h4, h5, h6) {
    color: #37352f !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    text-align: left;
    padding: 3px 2px;
}

.bk-chapter h1 {
    font-size: 24px !important;
    margin: 2em 0 0 !important;
}
.bk-chapter h1:first-child {
    margin-top: 0 !important;
}
.bk-chapter h2 {
    font-size: 21px !important;
    margin: 1.4em 0 0 !important;
}
.bk-chapter h3 {
    font-size: 19px !important;
    margin: 1em 0 0 !important;
}
.bk-chapter h4 {
    font-size: 18px !important;
    margin: 0.8em 0 0 !important;
}

.bk-chapter :where(strong, b) { font-weight: 600; color: inherit; }
.bk-chapter :where(h5, h6) { font-size: 16px !important; }
/* Ordinary paragraphs need a visible gap as well as room between text lines.
   Explicit blank paragraphs already supply space: never add the gap to them. */
.bk-chapter p:where(:not(:empty):not(:has(> br:only-child))) + p:where(:not(:empty):not(:has(> br:only-child))) {
    margin-top: var(--bk-paragraph-gap) !important;
}
.bk-chapter p:empty,
.bk-chapter p:has(> br:only-child) { margin: 0 !important; min-height: calc(1.75em + 6px); }
/* Keep cells and list items compact; their container supplies the spacing. */
.bk-chapter :where(li, td, th) > p + p { margin-top: 0 !important; }
.bk-chapter :where(h1, h2, h3, h4, h5, h6),
.bk-chapter :where(h1, h2, h3, h4, h5, h6) :where(b, strong) { font-style: normal !important; }
.bk-chapter :where(em, i) { font-style: italic; }
.bk-chapter a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    opacity: 0.85;
}

.bk-chapter :where(ul, ol) {
    margin: 0;
    padding: 0 0 0 26px;
    list-style-position: outside;
}
.bk-chapter ul { list-style-type: disc; }
.bk-chapter ol { list-style-type: decimal; }
.bk-chapter ul ul { list-style-type: circle; }
.bk-chapter ul ul ul { list-style-type: square; }
.bk-chapter li::marker { color: inherit; font-weight: 400; }
.bk-chapter li > p { padding: 0 !important; min-height: 0; }
.bk-chapter li {
    margin: 0;
    padding: 3px 2px;
    line-height: var(--bk-text-leading) !important;
}

/* Author-selected leading must survive editing and use the same reader style. */
.bk-chapter [data-bk-lh="1.0"] { line-height: 1 !important; }
.bk-chapter [data-bk-lh="1.15"] { line-height: 1.15 !important; }
.bk-chapter [data-bk-lh="1.5"] { line-height: 1.5 !important; }
.bk-chapter [data-bk-lh="1.75"] { line-height: 1.75 !important; }
.bk-chapter [data-bk-lh="2.0"] { line-height: 2 !important; }
.bk-chapter [data-bk-lh="2.5"] { line-height: 2.5 !important; }
.bk-chapter [data-bk-lh="3.0"] { line-height: 3 !important; }

/* Quote ≈ Notion quote block */
.bk-chapter blockquote {
    margin: 4px 0;
    padding: 3px 14px;
    border-left: 3px solid currentColor;
    background: transparent;
    color: #37352f;
}

/* Callout ≈ Notion callout */
.bk-chapter aside.bk-callout {
    display: block;
    margin: 0.35em 0;
    padding: 16px 16px 16px 12px;
    border-radius: 3px;
    background: #f1f1ef;
    color: #37352f;
}
.bk-chapter aside.bk-callout > :first-child { margin-top: 0; }
.bk-chapter aside.bk-callout > :last-child { margin-bottom: 0; }
.bk-chapter aside.bk-callout p {
    padding-top: 1px;
    padding-bottom: 1px;
}

.bk-chapter hr {
    border: 0;
    border-top: 1px solid rgba(55, 53, 47, 0.16);
    margin: 13px 0;
}

.bk-chapter figure.bk-figure,
.bk-chapter figure {
    display: block;
    padding: 0;
}

/* Default / full-width image (no text wrap) */
.bk-chapter figure.bk-figure--block,
.bk-chapter figure.bk-figure:not(.bk-figure--wrap-left):not(.bk-figure--wrap-right) {
    float: none;
    clear: both;
    width: var(--bk-w, 100%);
    max-width: 100%;
    margin: 0.5em auto;
    box-sizing: border-box;
}

/* Text wraps beside the image (old Word / Notion style). --bk-w comes from data-bk-w. */
.bk-chapter figure.bk-figure--wrap-left {
    float: left;
    clear: left;
    width: var(--bk-w, 46%);
    max-width: 100%;
    margin: 0.25em 1em 0.5em 0;
    z-index: 0;
    box-sizing: border-box;
}

.bk-chapter figure.bk-figure--wrap-right {
    float: right;
    clear: right;
    width: var(--bk-w, 46%);
    max-width: 100%;
    margin: 0.25em 0 0.5em 1em;
    z-index: 0;
    box-sizing: border-box;
}

.bk-chapter figure.bk-figure img,
.bk-chapter figure img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
}

.bk-chapter figure.bk-figure--wrap-left img,
.bk-chapter figure.bk-figure--wrap-right img {
    width: 100%;
}

.bk-chapter .bk-figure__tools,
.bk-chapter .bk-figure__status,
.bk-chapter .bk-figure__resize,
.bk-chapter .bk-figure__edge,
.bk-chapter .bk-figure__size {
    /* Reader: never show editor chrome */
}

.sp-lesson__body .bk-figure__tools,
.sp-lesson__body .bk-figure__status,
.sp-lesson__body .bk-figure__resize,
.sp-lesson__body .bk-figure__edge,
.sp-lesson__body .bk-figure__size,
.sp-lesson__body .bk-figure__add,
.sp-lesson__body figure.bk-figure.is-slot {
    display: none !important;
}

.bk-chapter .bk-table-scroll {
    display: block;
    width: 100%;
    margin: 8px 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.bk-chapter .bk-table-scroll table,
.bk-chapter table {
    width: 100%;
    min-width: 480px;
    max-width: none;
    margin: 0;
    border-collapse: collapse;
    border: 1px solid #222;
}

.bk-chapter :where(td, th) {
    border: 1px solid #222;
    padding: 7px 9px;
    vertical-align: top;
    text-align: left;
    min-width: 7rem;
    word-break: normal;
    overflow-wrap: break-word;
}

.bk-chapter .bk-wrap,
.bk-chapter .bk-hole,
.bk-chapter .bk-push,
.bk-chapter .bk-in,
.bk-chapter .bk-img-shim,
.sp-lesson__body .bk-wrap,
.sp-lesson__body .bk-hole {
    display: none !important;
}

@media (max-width: 767px) {
    .bk-chapter,
    body.bk-chapter,
    .sp-lesson__body.bk-chapter {
        max-width: none;
    }

    body.bk-chapter {
        padding: 24px;
    }

    .sp-shell--learn .sp-learn-body,
    .sp-learn-body {
        padding-left: 16px;
        padding-right: 16px;
    }

    .bk-chapter figure.bk-figure,
    .bk-chapter figure.bk-figure--wrap-left,
    .bk-chapter figure.bk-figure--wrap-right,
    .bk-chapter figure.bk-figure--block {
        float: none !important;
        clear: both !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0.75rem 0 !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
    }

    .bk-chapter figure.bk-figure img,
    .sp-shell--learn .sp-lesson__body.bk-chapter figure.bk-figure img,
    .sp-learn-body .sp-lesson__body.bk-chapter figure.bk-figure img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        position: static !important;
        display: block !important;
    }

    .bk-chapter img.float-left,
    .bk-chapter img.float-right,
    .bk-chapter img.img-beside,
    .bk-chapter img.img-free,
    .bk-chapter img.word-square-left,
    .bk-chapter img.word-square-right {
        float: none !important;
        clear: both !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0.75rem 0 !important;
    }

    .sp-shell--learn .sp-lesson__body.bk-chapter > img,
    .sp-learn-body .sp-lesson__body.bk-chapter > img,
    .sp-lesson__body.bk-chapter > img,
    .bk-chapter > img {
        max-width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    body.bk-chapter {
        max-width: 756px;
        padding: 24px;
    }
}

/* The student reader uses a dark surface; keep the light Notion ink only in editors. */
.sp-lesson__body.bk-chapter {
    color: #e8edf6 !important;
}
.sp-lesson__body.bk-chapter :where(p, li, td, th, h1, h2, h3, h4, h5, h6, blockquote) {
    color: #e8edf6 !important;
}
.sp-lesson__body.bk-chapter a {
    color: #93c5fd !important;
}
.sp-lesson__body.bk-chapter blockquote {
    border-left-color: rgba(232, 237, 246, 0.45);
}
.sp-lesson__body.bk-chapter aside.bk-callout {
    background: rgba(255, 255, 255, 0.08);
    color: #e8edf6;
}
.sp-lesson__body.bk-chapter table,
.sp-lesson__body.bk-chapter :where(td, th) {
    border-color: rgba(232, 237, 246, 0.2);
}