/* Source column widths and offsets are stored in the editable lesson document.
   Keep these independent of HTML Elements' paired infographic subgrid. */
.ct-source-lesson-content .ct-builder-row {
    align-items: start;
    margin-block: 20px;
}
.ct-source-lesson-content .ct-content-box {
    min-width: 0;
    max-width: 100%;
    color: var(--ct-content-text, var(--ct-ink));
}
.ct-source-lesson-content .ct-content-prose {
    font-size: var(--ct-body-size, 16px);
    line-height: 1.9;
    overflow-wrap: anywhere;
    text-align: start;
}
.ct-source-lesson-content .ct-content-prose p { margin: 0 0 1em; }
/* Imported section labels are H3 under the topic H2; retain their former H4 size. */
.ct-source-lesson-content .ct-content-prose h3.ct-recovered-subheading { font-size: 1em; }
.ct-source-lesson-content .ct-content-prose > :last-child { margin-bottom: 0; }
.ct-source-lesson-content .ct-content-prose :is(ul, ol) {
    padding-inline-start: 25px;
    margin: 1em 0;
}
.ct-source-lesson-content .ct-content-prose ul { list-style: disc; }
.ct-source-lesson-content .ct-content-prose ol { list-style: decimal; }
.ct-source-lesson-content .ct-content-prose :is(ul, ol) > li {
    padding: 0;
    margin: .65em 0;
    background: transparent;
    border: 0;
}
.ct-source-lesson-content .ct-content-prose :is(ul, ol) > li::before { content: none; }
.ct-source-lesson-content .ct-content-prose :is(b, strong) { font-weight: 800; }
.ct-source-lesson-content .ct-content-prose a {
    color: var(--ct-purple);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ct-source-lesson-content .ct-content-prose code {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
    max-width: 100%;
}
.ct-source-lesson-content .ct-builder-item-image figure { margin: 0; }
.ct-source-lesson-content .ct-builder-item-image img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin-inline: auto;
    object-fit: contain;
    border-radius: 10px;
}
.ct-source-lesson-content .ct-builder-item-image figcaption {
    text-align: center;
    color: var(--ct-muted);
    font-size: 12px;
    line-height: 1.7;
    margin-top: 8px;
}
/* These nine reviewed diagrams contain black lettering on transparent pixels.
   Keep their original paper background in both themes, including image zoom;
   changing the surrounding UI colors cannot recolor text baked into a PNG. */
html[data-ct-lesson-theme] img:is(
    [src$="/lesson-assets/parity/b3441549a7899127099d79cd.png"],
    [src$="/lesson-assets/parity/e49978e180719f6e6c97ce39.png"],
    [src$="/lesson-assets/parity/446f674d350a17554ffe0dd7.png"],
    [src$="/lesson-assets/parity/a57a2a3cca7c158aa64e6b02.png"],
    [src$="/lesson-assets/parity/3ab0390080a6a0853af6d5fe.png"],
    [src$="/lesson-assets/parity/48f543e9429d169783fa3391.png"],
    [src$="/lesson-assets/parity/638eb6bc94140bb844ef24e2.png"],
    [src$="/lesson-assets/parity/945ff4ab60e2f0a4dd9e11bb.png"],
    [src$="/lesson-assets/parity/a752c38f0724bff283c10e28.png"]
) {
    background-color: #fff;
}
/* Link syntax diagram: preserve readability of its black lettering in both themes. */
html[data-ct-lesson-theme] img[src$="/lesson-assets/parity/d56153d44ec217c2bff970bd.png"] {
    background-color: #fff;
}
/* The list illustration includes purple lettering over transparent pixels. */
html[data-ct-lesson-theme] img[src$="/lesson-assets/parity/e60fb63255ef8ed3aa594a41.png"] {
    background-color: #fff;
}
/* The column-group diagram uses dark lettering on transparent pixels. */
html[data-ct-lesson-theme] img[src$="/lesson-assets/parity/452e828cb238ceab22cd12a7.png"] {
    background-color: #fff;
}
/* The semantic layout diagram has dark lettering on a transparent canvas. */
html[data-ct-lesson-theme] img[src$="/lesson-assets/parity/a96903abaea39609e11823d4.png"] {
    background-color: #fff;
}
/* CSS teaching diagrams retain their paper canvas in the page and zoom modal. */
html[data-ct-lesson-theme] img:is(
    [src$="/lesson-assets/catalogue/images/contents/image/1655370464_70011.png"],
    [src$="/lesson-assets/catalogue/images/contents/image/1623496287_44661.png"],
    [src$="/lesson-assets/catalogue/images/contents/image/1623496677_43616.png"],
    [src$="/lesson-assets/catalogue/images/contents/image/1623497341_61426.png"],
    [src$="/lesson-assets/catalogue/images/contents/image/1623498342_79231.png"]
) {
    background-color: #fff;
}
/* The text-alignment diagram needs a paper canvas for its dark labels. */
html[data-ct-lesson-theme] img[src$="/lesson-assets/catalogue/images/contents/image/1623912004_80946.png"] {
    background-color: #fff;
}
/* Font samples and family labels need the same paper canvas in both themes. */
html[data-ct-lesson-theme] img:is(
    [src$="/lesson-assets/catalogue/images/contents/image/1623911025_13516.png"],
    [src$="/lesson-assets/catalogue/images/contents/image/1623910360_4532.png"],
    [src$="/lesson-assets/catalogue/images/contents/image/1623910851_59848.png"]
) {
    background-color: #fff;
}
/* Image attribute and path diagrams have black lettering on transparent pixels. */
html[data-ct-lesson-theme] img:is(
    [src$="/lesson-assets/parity/7c1720f71d5b1788f79e4ac6.png"],
    [src$="/lesson-assets/parity/81c864ce90b97e62169122aa.png"]
) {
    background-color: #fff;
}
.ct-source-lesson-content .ct-content-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: .94em;
}
.ct-source-lesson-content .ct-content-prose :is(th, td) {
    padding: 12px;
    border: 1px solid var(--ct-line);
    vertical-align: top;
}
.ct-source-lesson-content .ct-content-prose th { background: var(--ct-lilac); }
/* Keep HTML video attribute names intact beside their wrapping explanations. */
.ct-source-lesson-content [data-ct-item="recovery-cc6998a6a5-8"] :is(th, td):first-child {
    width: 7.5em;
    min-width: 7.5em;
    overflow-wrap: normal;
    word-break: normal;
}
.ct-source-lesson-content [data-ct-item="recovery-cc6998a6a5-8"] td:first-child code {
    white-space: nowrap;
}
/* The VPN comparison has four bilingual columns. Keep protocol names readable
   in the existing theme while allowing the table to scroll on narrow screens. */
.ct-source-lesson-content [data-ct-item="recovery-daf126aedf-20"] .ct-content-prose {
    overflow-x: auto;
    overscroll-behavior-x: contain;
}
.ct-source-lesson-content [data-ct-item="recovery-daf126aedf-20"] table {
    min-width: 680px;
}
.ct-source-lesson-content [data-ct-item="recovery-daf126aedf-20"] :is(th, td) {
    overflow-wrap: normal;
    word-break: normal;
}
.ct-source-lesson-content .ct-builder-container > .ct-builder-row { margin: 0; }
/* Imported image columns are layout groups, not framed editor containers.
   Twelve fixed grid gutters used to overflow their narrow parent columns. */
.ct-source-lesson-content .ct-builder-container:is([data-ct-container^="web-col-"], [data-ct-container^="source-col-"]):has(> .ct-builder-row > .ct-builder-item-image) {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.ct-source-lesson-content .ct-builder-container:has(> .ct-builder-row > .ct-builder-item-image) > .ct-builder-row {
    column-gap: 0;
}
@media (max-width: 767px) {
    .ct-source-lesson-content .ct-builder-row { display: block; }
    .ct-source-lesson-content .ct-content-offset-spacer { display: none; }
    .ct-source-lesson-content .ct-builder-item { margin-block: 16px; }
}