/* docBuilder - how content looks: in the builder's page, on the teacher's page, and for students.
 * Every rule sits under .doc-content (or .doc-reader for the student view page), so nothing else on
 * the site changes. Sizes are in points, like Word, so 12pt text is 12pt everywhere.
 * It is made to sit next to Titrah's shared style sheets (css/common): their reset, their
 * "* { box-sizing: border-box }" and their dark mode (#body.dark) change nothing here, and the fonts are
 * the site's own files (/fonts/...), under the same names as the site's fonts.css.
 */

@font-face {
    font-family: "Droid Arabic Kufi";
    src: url("/fonts/DroidKufi-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+25CC;
}
@font-face {
    font-family: "Droid Arabic Kufi";
    src: url("/fonts/DroidKufi-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+25CC;
}
/* STIX Two, the math fonts the site already has: letters, digits and signs of equations look the same on
   every device (Windows, phones, tablets) */
@font-face {
    font-family: "stix2Text";
    src: url("/fonts/stix/WOFF2/STIX2Text-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}
@font-face {
    font-family: "stix2Text";
    src: url("/fonts/stix/WOFF2/STIX2Text-Italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: block;
}
@font-face {
    font-family: "stix2Math";
    src: url("/fonts/stix/WOFF2/STIX2Math.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}
/* The angle signs ∠ ∡ ∢, which Kufi hasn't, are drawn by STIX Two Math in text too, as in the equations. In a line
   written right to left the browser draws each as its mirrored pair, ⦣ ⦛ ⦠ (Unicode's Bidi_Mirroring_Glyph), so in
   Arabic an angle opens to the left, towards the letters of its name (∡أبج), and in a line written left to right to
   the right. It takes the pair only from the face that draws the sign, so the pairs are in this face's range too:
   without them Chromium kept the sign as it is, facing right in Arabic text (the owner, 30 Oct 2026). A font the
   browser takes for them otherwise needn't have the pairs (DejaVu Sans hasn't). */
@font-face {
    font-family: "Droid Arabic Kufi";
    src: url("/fonts/stix/WOFF2/STIX2Math.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: block;
    unicode-range: U+2220-2222, U+299B, U+29A0, U+29A3;
}
@font-face {
    font-family: "Droid Arabic Kufi";
    src: url("/fonts/stix/WOFF2/STIX2Math.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: block;
    unicode-range: U+2220-2222, U+299B, U+29A0, U+29A3;
}

.doc-content {
    /* the colours of the content; the site's dark mode changes them (below) */
    --doc-text: #1d2329;
    --doc-title: #142029;
    --doc-subtitle: #59636e;
    --doc-heading: #006ca6;
    --doc-heading-3: #0a4a70;
    --doc-quote: #45505b;
    --doc-quote-line: #8cbfdc;
    font-family: "Droid Arabic Kufi", "Segoe UI", Tahoma, system-ui, sans-serif;
    font-size: 12pt;
    font-weight: 400;
    line-height: 1.61; /* Word's 1.15 lines */
    color: var(--doc-text);
    text-align: start;
    white-space: pre-wrap; /* spaces and tabs stay as they were typed */
    overflow-wrap: break-word;
    tab-size: 1.27cm;
    font-kerning: normal;
}
/* (not in a page made in htmlBuilder, which has its own look: docHtml.css; :where adds nothing to the rules' weight) */
.doc-content p:where(:not(.doc-html *)),
.doc-content h1:where(:not(.doc-html *)),
.doc-content h2:where(:not(.doc-html *)),
.doc-content h3:where(:not(.doc-html *)),
.doc-content blockquote:where(:not(.doc-html *)),
.doc-content .doc-p {
    margin: 0 0 8pt;
    padding: 0;
    font-family: inherit;
    letter-spacing: normal;
    text-transform: none;
}
.doc-content > :first-child {
    margin-top: 0;
}

/* paragraph styles */
.doc-content .doc-normal {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}
.doc-content .doc-title {
    font-size: 26pt;
    font-weight: 400;
    line-height: 1.25;
    color: var(--doc-title);
    margin-bottom: 6pt;
}
.doc-content .doc-subtitle {
    font-size: 15pt;
    font-weight: 400;
    line-height: 1.4;
    color: var(--doc-subtitle);
    margin-bottom: 10pt;
}
.doc-content .doc-h1 {
    font-size: 18pt;
    font-weight: 700;
    line-height: 1.3;
    color: var(--doc-heading);
    margin: 16pt 0 6pt;
}
.doc-content .doc-h2 {
    font-size: 15pt;
    font-weight: 700;
    line-height: 1.35;
    color: var(--doc-heading);
    margin: 12pt 0 4pt;
}
.doc-content .doc-h3 {
    font-size: 13pt;
    font-weight: 700;
    line-height: 1.4;
    color: var(--doc-heading-3);
    margin: 10pt 0 4pt;
}
/* a quote is set off by a line on its starting side and a softer colour; Arabic has no italic */
.doc-content .doc-quote {
    font-size: inherit;
    color: var(--doc-quote);
    border-inline-start: 3px solid var(--doc-quote-line);
    padding-inline-start: 12pt;
    margin: 10pt 0;
}

/* ---------- indent, lists and lines ----------
   One step of indent is 1.27 cm, like Word (half on a phone). A list item's level is its indent. Its bullet
   or number is not text of the paragraph: docBuilder writes it in data-marker, and it is drawn in the space
   before the text, looking like the start of the text (the --doc-mk-* variables). These rules come after
   the paragraph styles, so a heading or a quote can be indented and be a list item too. */
.doc-content {
    --doc-indent: 36pt;
    --doc-rule: #9aa5b1;
}
.doc-content .doc-ind-1 { margin-inline-start: calc(1 * var(--doc-indent)); }
.doc-content .doc-ind-2 { margin-inline-start: calc(2 * var(--doc-indent)); }
.doc-content .doc-ind-3 { margin-inline-start: calc(3 * var(--doc-indent)); }
.doc-content .doc-ind-4 { margin-inline-start: calc(4 * var(--doc-indent)); }
.doc-content .doc-ind-5 { margin-inline-start: calc(5 * var(--doc-indent)); }
.doc-content .doc-ind-6 { margin-inline-start: calc(6 * var(--doc-indent)); }
.doc-content .doc-ind-7 { margin-inline-start: calc(7 * var(--doc-indent)); }
.doc-content .doc-ind-8 { margin-inline-start: calc(8 * var(--doc-indent)); }
.doc-content .doc-li {
    padding-inline-start: var(--doc-indent);
}
/* the bullet or number fills the space before the text and stands against the text; a long number reaches
   further out instead of pushing the text */
.doc-content .doc-li::before {
    content: attr(data-marker);
    display: inline-flex;
    justify-content: flex-end;
    box-sizing: border-box;
    width: var(--doc-indent);
    margin-inline-start: calc(-1 * var(--doc-indent));
    padding-inline-end: 0.5em;
    white-space: nowrap;
    font-family: var(--doc-mk-font, inherit);
    font-size: var(--doc-mk-size, inherit);
    font-weight: var(--doc-mk-weight, inherit);
    font-style: normal;
    color: var(--doc-mk-color, inherit);
    text-decoration: none;
}
/* the items of a list stand close together; the space comes after the list */
.doc-content .doc-li:has(+ .doc-li) {
    margin-bottom: 3pt;
}
/* a line under a paragraph; a paragraph that is only a line has it across the middle of its space */
.doc-content .doc-rule {
    padding-bottom: 4pt;
    border-bottom: 1px solid var(--doc-rule);
}
.doc-content .doc-rule-empty {
    position: relative;
    padding-bottom: 0;
    border-bottom: 0;
}
.doc-content .doc-rule-empty::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 50%;
    border-top: 1px solid var(--doc-rule);
}
@media (max-width: 760px) {
    .doc-content {
        --doc-indent: 18pt;
    }
}

/* ---------- pictures ----------
   A picture sits in its line like a letter, on the line's baseline (Word's "In line with text"). Its width and
   height say how big it is shown; on a screen narrower than that it gets smaller and keeps its shape. */
.doc-content .doc-img {
    display: inline;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}
/* on the left or the right, with the text going round it (Word's "Square") */
.doc-content .doc-img-left {
    float: left;
    margin: 2pt 12pt 6pt 0;
}
.doc-content .doc-img-right {
    float: right;
    margin: 2pt 0 6pt 12pt;
}
/* a phone has no room for text next to a picture: it stands on its own, in the middle */
@media (max-width: 480px) {
    .doc-content .doc-img-left,
    .doc-content .doc-img-right {
        float: none;
        display: block;
        margin: 4pt auto 8pt;
    }
}

/* ---------- drawings ----------
   A drawing (svgBuilder) is shown like a picture: in its line, or on the left or the right with the text going
   round it, smaller on a narrow screen (its viewBox keeps its shape), on its own line on a phone. */
.doc-content .doc-draw {
    display: inline;
    max-width: 100%;
    height: auto;
    margin: 0;
    vertical-align: baseline;
    overflow: visible;
}
.doc-content .doc-draw-left {
    float: left;
    margin: 2pt 12pt 6pt 0;
}
.doc-content .doc-draw-right {
    float: right;
    margin: 2pt 0 6pt 12pt;
}
/* the page of the drawing editor (its background, which the site's base.css hides too) is not part of the drawing */
.doc-content .doc-draw .drawing-rect {
    display: none;
}
@media (max-width: 480px) {
    .doc-content .doc-draw-left,
    .doc-content .doc-draw-right {
        float: none;
        display: block;
        margin: 4pt auto 8pt;
    }
}
/* The site's dark mode turns every drawing round (#body.dark svg { filter: invert(.9) }), so its black lines and
   words show light; the hue is turned back, so a blue part stays blue (as htmlBuilder does for its figures). */
#body.dark .doc-content:not(.doc-page) .doc-draw {
    filter: invert(.9) hue-rotate(180deg);
}

/* ---------- HTML blocks ----------
   A page made in htmlBuilder (Task 1.7b) is a block across the text, in its own direction, with the spaces and
   lines of an ordinary page (not the content's, which keeps every space typed). Nothing in it shows outside it,
   and nothing in it can come in front of the rest of the page. htmlBuilder's own look is docHtml.css's (Task 1.7e),
   which a page loads after this sheet. The paragraph that holds it is a <div class="doc-p">: a <p> can't hold its
   divisions and tables. */
.doc-content .doc-html {
    display: block;
    position: relative;
    isolation: isolate;
    contain: paint;
    clear: both;
    margin: 0;
    padding: 0;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: start;
}

/* ---------- tables ----------
   On the builder's page (.doc-page) a table goes across the page and its columns share the width, to be written
   in; for readers it is as wide as its contents, in the middle of the page (below). Thin grey lines go round its
   cells (like Word's "Table Grid"), and the cells have Word's margins. The cells of a header row are bold on a light
   grey (the owner, 31 Oct 2026: "something like gray"; a light grey-blue before). The direction of the table puts its
   first column on the right (rtl) or on the left (ltr). A word too long for its cell goes on to the next line. */
.doc-content {
    --doc-cell-line: #9aa5b1;
    --doc-header-bg: #e8eaed;
}
.doc-content .doc-table {
    width: 100%;
    margin: 0 0 8pt;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    font: inherit;
}
.doc-content .doc-table > tbody > tr > td,
.doc-content .doc-table > tbody > tr > th {
    padding: 2pt 5.4pt;
    border: 1px solid var(--doc-cell-line);
    vertical-align: top;
    text-align: start;
    font-weight: inherit;
    overflow-wrap: anywhere;
}
.doc-content .doc-table-header > tbody > tr:first-child > th {
    font-weight: 700;
    background: var(--doc-header-bg);
}
/* the lines a table may have instead of all of them: only across (between the rows, at the top and at the
   bottom), only the box round it, or none */
.doc-content .doc-table-border-rows > tbody > tr > td,
.doc-content .doc-table-border-rows > tbody > tr > th {
    border-left: 0;
    border-right: 0;
}
.doc-content .doc-table-border-outside > tbody > tr > td,
.doc-content .doc-table-border-outside > tbody > tr > th,
.doc-content .doc-table-border-none > tbody > tr > td,
.doc-content .doc-table-border-none > tbody > tr > th {
    border: 0;
}
.doc-content .doc-table-border-outside {
    border: 1px solid var(--doc-cell-line);
}
/* the paragraphs of a cell: no space before the first or after the last */
.doc-content .doc-table td > :first-child,
.doc-content .doc-table th > :first-child {
    margin-top: 0;
}
.doc-content .doc-table td > :last-child,
.doc-content .doc-table th > :last-child {
    margin-bottom: 0;
}
/* For readers (not on the builder's page; the owner, 31 Oct 2026): a table is as wide as its contents but at least
   300px (the page's width when it is narrower), in the middle of the page with 12pt of room above and below it (none
   above at the top of the text, below), each column as wide as its own (widths given in the builder stay their
   shares of it), and the contents of its cells are in their middle, across and down; a paragraph aligned otherwise
   in the builder keeps its own alignment. A word or a number is never cut in two: a table whose words can't all fit
   across the page (a few wide ones on a small phone) scrolls sideways in its box (div.doc-table-box,
   docBuilderRender.js' docTableToHTML). */
.doc-content:not(.doc-page) .doc-table-box {
    max-width: 100%;
    margin: 12pt 0;
    overflow-x: auto;
}
.doc-content:not(.doc-page) .doc-table {
    width: auto;
    min-width: min(300px, 100%);
    margin: 0 auto;
    table-layout: auto;
}
/* a table in HTML written before it had a box (a material's slides, until the material is published again) is its
   own box: as wide as its contents, in the middle, scrolling sideways in itself; to screen readers still a table */
.doc-content:not(.doc-page) .doc-table:not(.doc-table-box > *) {
    display: block;
    width: max-content;
    min-width: 0;
    max-width: 100%;
    margin: 12pt auto;
    overflow-x: auto;
}
.doc-content:not(.doc-page) .doc-table > tbody > tr > td,
.doc-content:not(.doc-page) .doc-table > tbody > tr > th {
    vertical-align: middle;
    text-align: center;
    overflow-wrap: break-word;
}
/* A table of one or two rows comes to readers as columns side by side (docBuilderRender.js' docColumnsToHTML),
   each column its cells one under the other, in the middle of the page with 12pt of room above and below them: the
   columns only as wide as their contents but at least 300px all together (the page's width when it is narrower),
   and where the page is too narrow for them side by side they go on to the next line with a small gap, each with
   its cells, as words do in a line (each line in the middle), never cut in a word (two columns: below). The contents
   of a cell are in its middle, across and down. A table of two rows has its first row as its header, the names over
   the values (a comparison's «القيمة الأولى» and «القيمة الثانية»). Its lines, header and shading are a table's; a
   line two cells share is drawn once (each column and each cell moved back over the line before it, the box making
   room for the first). */
.doc-content .doc-cols {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 4pt;
    box-sizing: border-box;
    width: fit-content;
    min-width: min(300px, 100%);
    max-width: 100%;
    margin: 12pt auto;
    padding-inline-start: 1px;
}
/* at the top of the text a table has no room above it, as a paragraph has none */
.doc-content:not(.doc-page) > .doc-table-box:first-child,
.doc-content:not(.doc-page) > .doc-table:first-child,
.doc-content > .doc-cols:first-child {
    margin-top: 0;
}
/* Two columns (a comparison, two answers) are as wide as each other, as wide as the wider one's contents, side by
   side; one under the other on a phone (up to 480px wide), each as wide as the wider. */
.doc-content .doc-cols-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 480px) {
    .doc-content .doc-cols-two {
        grid-template-columns: 1fr;
    }
}
.doc-content .doc-col {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    margin-inline-start: -1px;
}
.doc-content .doc-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2pt 5.4pt;
    border: 1px solid var(--doc-cell-line);
    text-align: center;
    overflow-wrap: break-word;
}
.doc-content .doc-cell + .doc-cell {
    margin-block-start: -1px;
}
.doc-content .doc-cell:last-child {
    flex-grow: 1;
}
.doc-content .doc-cell-head {
    font-weight: 700;
    background: var(--doc-header-bg);
}
.doc-content .doc-cell > :first-child {
    margin-top: 0;
}
.doc-content .doc-cell > :last-child {
    margin-bottom: 0;
}
/* the lines it may have instead of all of them, as a table's: only across, only the box round it, or none */
.doc-content .doc-cols-border-rows .doc-cell {
    border-inline-width: 0;
}
.doc-content .doc-cols-border-outside,
.doc-content .doc-cols-border-none {
    padding: 0;
}
.doc-content .doc-cols-border-outside {
    border: 1px solid var(--doc-cell-line);
}
.doc-content .doc-cols-border-outside .doc-col,
.doc-content .doc-cols-border-outside .doc-cell,
.doc-content .doc-cols-border-none .doc-col,
.doc-content .doc-cols-border-none .doc-cell {
    margin: 0;
    border: 0;
}

/* The site's dark mode (#body.dark): light text on the dark page. The builder's own page stays a white
   sheet. Highlighted text keeps dark letters on its light highlight (unless it has a colour of its own). Where
   the page marks the backgrounds (data-doc-bg, after the colour that shows: a see-through one over what is
   behind it; the app's builders' page, Task 1.7e), dark letters on a light one and light letters on a dark one. */
#body.dark .doc-content:not(.doc-page) {
    --doc-text: #e3e8ed;
    --doc-title: #f3f6f8;
    --doc-subtitle: #a9b3bd;
    --doc-heading: #6ab7e6;
    --doc-heading-3: #93c9ea;
    --doc-quote: #c2cad2;
    --doc-quote-line: #3f7ea6;
    --doc-rule: #56626e;
    --doc-cell-line: #56626e;
    --doc-header-bg: #2a3138;
}
#body.dark .doc-content:not(.doc-page) [style*="background-color"]:not([data-doc-bg]),
#body.dark .doc-content:not(.doc-page) [data-doc-bg="light"] {
    color: #1d2329;
}
#body.dark .doc-content:not(.doc-page) [data-doc-bg="dark"] {
    color: var(--doc-text);
}

/* text formatting (not in a page made in htmlBuilder, whose classes are its own: Task 1.7e) */
.doc-content .b:where(:not(.doc-html *)) {
    font-weight: 700;
}
.doc-content .i:where(:not(.doc-html *)) {
    font-style: italic;
}
.doc-content .u:where(:not(.doc-html *)) {
    text-decoration: underline;
}
.doc-content .s:where(:not(.doc-html *)) {
    text-decoration: line-through;
}
.doc-content .u.s:where(:not(.doc-html *)) {
    text-decoration: underline line-through;
}
.doc-content .sup:where(:not(.doc-html *)),
.doc-content .sub:where(:not(.doc-html *)) {
    font-size: 65%;
    line-height: 0;
}
.doc-content .sup:where(:not(.doc-html *)) {
    vertical-align: super;
}
.doc-content .sub:where(:not(.doc-html *)) {
    vertical-align: sub;
}

/* fonts (the same list as DOC_FONTS in docBuilderModel.js) */
.doc-content .f-kufi {
    font-family: "Droid Arabic Kufi", "Segoe UI", Tahoma, sans-serif;
}
.doc-content .f-arial {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.doc-content .f-tahoma {
    font-family: Tahoma, Verdana, sans-serif;
}
.doc-content .f-segoe {
    font-family: "Segoe UI", system-ui, sans-serif;
}
.doc-content .f-times {
    font-family: "Times New Roman", Times, serif;
}
.doc-content .f-traditional {
    font-family: "Traditional Arabic", "Times New Roman", serif;
}
.doc-content .f-sakkal {
    font-family: "Sakkal Majalla", "Traditional Arabic", serif;
}
.doc-content .f-courier {
    font-family: "Courier New", Courier, monospace;
}

/* ---------- equations (drawn by docMathHTML in docBuilderMath.js) ----------
   Western equations use the math font of the device (Cambria Math on Windows, like Word); the letters
   and digits of Arabic equations use the font of the text (--eq-text-font, Kufi by default). Roots and
   growing brackets are small SVGs that stretch to what they hold. */
.doc-eq {
    --eq-line: 0.066em;
    display: inline-block;
    padding: 0 0.1em;
    font-family: "stix2Text", "stix2Math", "Cambria Math", Cambria, "STIX Two Math", "Times New Roman", "Noto Serif", "DejaVu Serif", serif;
    font-style: normal;
    font-weight: normal;
    line-height: 1.3;
    text-indent: 0;
    text-decoration: none;
    /* an equation is never wider than its line: a longer one goes on to the next line before a sign or
       between the brackets of a product (the <wbr> of docMathRowHTML) */
    white-space: pre-wrap;
    unicode-bidi: isolate;
}
/* the sizes of the parts are their own, whatever box-sizing the page around uses */
.doc-content .doc-eq,
.doc-content .doc-eq * {
    box-sizing: content-box;
}
.doc-eq .eq-row,
.doc-eq .eq-fenced,
.doc-eq .eq-radicand,
.doc-eq .eq-cell,
.doc-eq .eq-quot,
.doc-eq .eq-divisor,
.doc-eq .eq-dividend-row,
.doc-eq .eq-base,
.doc-eq .eq-hi,
.doc-eq .eq-lo {
    display: inline-block;
}
.doc-eq .eq-empty {
    min-width: 0.6em;
    min-height: 1em;
}
/* every part is drawn strictly in the direction of the equation, so signs, letters and structures stand
   in reading order whatever the letters are (a Western equation with Arabic letters, an Arabic one with
   x and y); numbers in an Arabic equation and Arabic words in a Western one are read the other way */
.doc-eq-ar .eq-seq {
    direction: rtl;
    unicode-bidi: bidi-override;
}
.doc-eq-en .eq-seq {
    direction: ltr;
    unicode-bidi: bidi-override;
}
.doc-eq .eq-run {
    unicode-bidi: isolate;
}
/* the stretches of the main row between the places where it may go on to the next line */
.doc-eq .eq-chunk {
    white-space: pre;
}
.doc-eq-ar .eq-run {
    direction: ltr;
}
.doc-eq-en .eq-run {
    direction: rtl;
}
/* characters */
.doc-eq .eq-i {
    font-style: italic;
}
.doc-eq .eq-a,
.doc-eq-ar .eq-n,
.doc-eq-ar .eq-p {
    font-family: var(--eq-text-font, "Droid Arabic Kufi", "Segoe UI", Tahoma, sans-serif);
}
/* Arabic letters that stand for numbers or points (س ص، ب ج) are drawn apart, not joined like a word: a zero-width
   non-joiner keeps each from the letter before it (docMathApart), and a small space parts them */
.doc-eq .eq-apart {
    margin-inline-start: 0.15em;
}
.doc-eq .eq-b {
    margin: 0 0.22em;
}
.doc-eq .eq-r {
    margin: 0 0.28em;
}
.doc-eq .eq-p {
    margin-inline-end: 0.17em;
}
.doc-eq-en .eq-fn-end {
    margin-right: 0.17em;
}
/* in an Arabic equation what the function works on comes on its left */
.doc-eq-ar .eq-fn-start {
    margin-left: 0.17em;
}
/* fractions: the bar sits on the middle line of the text */
.doc-eq .eq-frac {
    display: inline-block;
    margin: 0 0.1em;
    text-align: center;
    vertical-align: middle;
}
.doc-eq .eq-num,
.doc-eq .eq-den {
    display: block;
    padding: 0 0.15em;
}
.doc-eq .eq-den {
    border-top: var(--eq-line) solid currentColor;
}
/* powers and subscripts follow the item before them (on its left in an Arabic equation) */
.doc-eq .eq-scr {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 70%;
    line-height: 1.1;
}
.doc-eq .eq-scr.eq-up,
.doc-eq .eq-scr.eq-both {
    vertical-align: 0.7em;
}
.doc-eq .eq-scr.eq-down {
    vertical-align: -0.45em;
}
.doc-eq .eq-sup,
.doc-eq .eq-sub {
    display: block;
    padding: 0 0.05em;
}
/* roots and brackets that grow with what they hold */
.doc-eq .eq-sqrt,
.doc-eq .eq-fence {
    display: inline-flex;
    align-items: stretch;
}
.doc-eq .eq-radicand,
.doc-eq .eq-fenced {
    align-self: baseline;
}
.doc-eq .eq-radicand {
    border-top: var(--eq-line) solid currentColor;
    padding: 0.08em 0.1em 0;
}
.doc-eq .eq-svg {
    flex: none;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: var(--eq-line);
    stroke-linejoin: round;
}
.doc-eq .eq-svg path {
    vector-effect: non-scaling-stroke;
}
/* the lines take the colour of the text, so the site's dark mode must not turn them round
   (#body.dark svg { filter: invert(.9) }) */
.doc-eq .eq-svg {
    filter: none !important;
}
.doc-eq .eq-svg-root {
    width: 0.62em;
}
.doc-eq .eq-svg-fence {
    width: 0.38em;
}
.doc-eq .eq-nofence {
    width: 0.1em;
}
.doc-eq .eq-mirror {
    transform: scaleX(-1);
}
.doc-eq .eq-index {
    align-self: flex-start;
    font-size: 60%;
    line-height: 1;
    margin-inline-end: -0.55em;
    margin-top: 0.1em;
}
/* a matrix stands on the middle line of the text */
.doc-eq .eq-fence.eq-matrix {
    vertical-align: middle;
}
.doc-eq .eq-mat {
    display: inline-grid;
    align-self: center;
    column-gap: 0.9em;
    row-gap: 0.15em;
    padding: 0.1em 0.15em;
    text-align: center;
}
/* a symbol on top and/or at the bottom (htmlBuilder's "symbol on top"): a small table whose first line
   is the base, so the base keeps the line of the text; the symbol on top is the table's caption */
.doc-eq .eq-ou {
    display: inline-table;
    border-spacing: 0;
    text-align: center;
}
.doc-eq .eq-ou > .eq-base,
.doc-eq .eq-ou > .eq-lo {
    display: block;
}
.doc-eq .eq-ou > .eq-hi {
    display: table-caption;
    caption-side: top;
}
.doc-eq .eq-hi,
.doc-eq .eq-lo {
    font-size: 70%;
    line-height: 1.1;
}
/* a bar alone on top (‾، the line over a segment's name: ‾بج) is a line over the whole base, just above its letters;
   the bar's own character keeps its place for the editor's caret but isn't shown (in high contrast too, where the
   line keeps the text's colour and no backplate cuts it). In the editor (data-mp) the line keeps a little room above
   it, so the caret can stand there */
.doc-eq .eq-ou.eq-line > .eq-hi {
    font-size: 1em;
    line-height: 0;
    height: 0;
    overflow: visible;
    border-bottom: 0.075em solid;
    margin: 0 0.05em 0.03em;
    forced-color-adjust: none;
}
.doc-eq .eq-ou.eq-line > .eq-hi > * {
    visibility: hidden;
}
.doc-eq .eq-ou.eq-line > .eq-hi[data-mp] {
    height: 0.4em;
}
/* its line of text grows a little, so the line never touches the text of the line above */
.doc-eq .eq-ou.eq-line {
    margin-top: 0.25em;
}
.doc-eq .eq-ou.eq-line > .eq-base {
    line-height: 1.5;
}
.doc-eq .eq-g {
    font-size: 150%;
    line-height: 1;
}
/* in an Arabic equation a big operator faces the way the equation is written, as its roots and brackets do: ∑ opens
   to the left, ∫ leans the other way (the owner's words of 31 Oct 2026: Σ "facing left not right"); the symmetric
   ones (∏ ∐ ⋃ ⋂ ⋀ ⋁) look the same */
.doc-eq-ar .eq-g {
    display: inline-block;
    transform: scaleX(-1);
}
/* long division: the divisor beside the dividend, the quotient over the dividend's end */
.doc-eq .eq-ldiv {
    display: inline-table;
    border-spacing: 0;
    margin: 0 0.1em;
}
.doc-eq .eq-ldiv > .eq-quot {
    display: table-caption;
    caption-side: top;
    text-align: end;
    padding: 0 0.15em;
}
.doc-eq .eq-ldiv-main {
    display: table-row;
}
.doc-eq .eq-ldiv-main > .eq-divisor,
.doc-eq .eq-ldiv-main > .eq-dividend {
    display: table-cell;
    vertical-align: baseline;
}
.doc-eq .eq-divisor {
    padding: 0 0.1em;
}
.doc-eq .eq-dividend-box {
    display: inline-flex;
    align-items: stretch;
    border-top: var(--eq-line) solid currentColor;
}
.doc-eq .eq-dividend-row {
    align-self: baseline;
    padding: 0.05em 0.15em 0;
}
.doc-eq .eq-dividend-box .eq-svg-fence {
    width: 0.32em;
}

/* the student view page, written by the server */
body.doc-reader {
    margin: 0;
    background: #e9edf1;
}
.doc-reader-page {
    max-width: 794px;
    margin: 24px auto 48px;
    padding: 56px 64px;
    background: #ffffff;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(16, 26, 36, 0.08), 0 4px 16px rgba(16, 26, 36, 0.08);
}
/* the site's dark mode */
#body.dark.doc-reader {
    background: #121212;
}
#body.dark .doc-reader-page {
    background: #1e1e1e;
    box-shadow: none;
}
@media (max-width: 760px) {
    .doc-reader-page {
        margin: 0;
        padding: 20px 16px;
        border-radius: 0;
        box-shadow: none;
    }
}
@media print {
    body.doc-reader {
        background: #ffffff;
    }
    .doc-reader-page {
        margin: 0;
        padding: 0;
        box-shadow: none;
    }
}