/* docBuilder - how a page made in htmlBuilder (an HTML block) looks, for students and in docBuilder (exam-prep Task 1.7e).
 * A page is kept in the content as one checked block (docBuilderHtml.js, Task 1.7b), and students get it in a box of its
 * own, <div class="doc-html">, which docContent.css places in the content (nothing in it shows outside it). This sheet
 * gives what is in the box the look htmlBuilder gives it while its author makes it. htmlBuilder's editing frame shows a
 * page with the site's whole-page sheet (glob_style), the site's math sheet (text_structure) and htmlBuilder's effects
 * sheet (html_effects); their rules for content are here, made from them:
 *   - Every rule is for the box or what is in it: its selector starts with :where(.doc-content .doc-html), which adds
 *     nothing to its weight, so the rules weigh against each other, and against Font Awesome's for the icons, as they do
 *     on the site. (docContent.css's own rules for <p>, headings and quotes leave what is in the box alone.)
 *   - What only helps while editing is left out (the marks shown in an empty box of math or an empty paragraph keep
 *     their room but show nothing; the editor's colours for an empty element aren't here), and so is what would reach
 *     out of the box: a picture that opens large is opened by the app in a window of its own
 *     (apps/web/src/components/picture-viewer.ts), not fixed over the screen; nothing here selects or forbids selecting
 *     words. On the app's pages the app shows a word's tooltip too (components/page-tooltip.ts), which the box would cut
 *     off near its edges.
 *   - The site's dark look (#body.dark) is the app's: the computer's dark mode, outside docBuilder's own page (its white
 *     paper keeps the light look, as drawings do). A box with a light background of its own (the page marks it,
 *     data-doc-bg) keeps the light look's colours in it.
 * Its sources (tests/htmllook.test.js fails when one of them changes, so that this sheet is looked at again):
 *   packages/htmlbuilder/site/css/common/glob_style_ver0103202401_.css
 *       sha256 0f1e9138f9f9f5d2abdace0cd083e01bb9f076c0dba472daf84be8b6e27c13c0
 *   packages/svgbuilder/site/css/common/text_structure_ver2404202401_.css
 *       sha256 320082768fc515963bc1d9ce1b2f90fce9fccb4e32fa167d090bf82ce2e1b4dd
 *   packages/htmlbuilder/src/styles/html_effects_ver1210202601_.css
 *       sha256 6124c90f67e9a71681ebcb5c78b0e5afd0a6db4c9e39a3e4e4a51f5739a62928
 * Font Awesome's sheet, for the icons, is loaded by the page only when a page shows one (apps/web/src/core/doc-html.ts).
 */

/* ---------- fonts ----------
   The site's: its Kufi (the Arabic font with its own Latin letters, at the site's address) and its math font (XITS,
   served at /fonts/xits/ with svgBuilder's site files), where a rule names it "math" in quotes; unquoted, math is the
   browser's own math font (CSS's generic family), as on the site. STIX Two is docContent.css's. */
@font-face {
    font-family: 'kufi';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: local('Droid Arabic Kufi'),
        url(/fonts/DroidKufi-Regular.woff2) format('woff2');
}
@font-face {
    font-family: 'math';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/fonts/xits/xits-math.woff) format('woff');
}
@font-face {
    font-family: 'math';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(/fonts/xits/xits-mathbold.woff) format('woff');
}

/* ==================== the page's text (glob_style) ==================== */
/* The box is htmlBuilder's page: the site's body (its font, its size, and a line as high as 1.8 times the box's
   font, which every line in it takes, as on the site), and the site's colours that content uses. */
.doc-content .doc-html {
    --background-color: white;
    --background-color-mid: #e6e5e5;
    --border-color: #d8d8d8;
    --border-color-high: #d8d8d8;
    --color-low: #afafaf;
    --color-mid: #2e2e2e;
    --color-high: #000;
    font-family: "kufi", "Droid Arabic Kufi", Arial, sans-serif, math;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.8em;
    tab-size: 8;
}
/* the site's reset: no margins, padding or borders of their own, and the box's font */
:where(.doc-content .doc-html) :is(div, span, h1, h2, h3, h4, h5, h6, p, blockquote, abbr, cite, code, del, dfn, em, img,
        ins, kbd, q, s, samp, small, strike, strong, sub, sup, var, b, u, i, dl, dt, dd, ol, ul, li, table, caption,
        tbody, tfoot, thead, tr, th, td, figure, figcaption, mark) {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
:where(.doc-content .doc-html) :is(figcaption, figure) {
    display: block;
}
:where(.doc-content .doc-html) :is(ol, ul) {
    padding-inline-start: 40px;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
:where(.doc-content .doc-html) :is(blockquote, q) {
    quotes: none;
}
:where(.doc-content .doc-html) :is(blockquote, q)::before,
:where(.doc-content .doc-html) :is(blockquote, q)::after {
    content: '';
    content: none;
}
:where(.doc-content .doc-html) table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* (normalize, then the site's own) */
:where(.doc-content .doc-html) :is(b, strong) {
    font-weight: bold;
}
:where(.doc-content .doc-html) dfn {
    font-style: italic;
}
:where(.doc-content .doc-html) mark {
    background: #ff0;
    color: #000;
}
:where(.doc-content .doc-html) small {
    font-size: 80%;
}
:where(.doc-content .doc-html) :is(sub, sup) {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
:where(.doc-content .doc-html) sup {
    top: -0.5em;
}
:where(.doc-content .doc-html) sub {
    bottom: -0.25em;
}
:where(.doc-content .doc-html) svg * {
    vector-effect: non-scaling-stroke;
}
:where(.doc-content .doc-html) figure {
    margin: 1em 40px;
}
:where(.doc-content .doc-html) hr {
    box-sizing: content-box;
    height: 0;
}
:where(.doc-content .doc-html) :is(code, kbd, samp) {
    font-family: monospace, monospace;
    font-size: 1em;
}
:where(.doc-content .doc-html) :is(td, th) {
    padding: 0;
}
:where(.doc-content .doc-html) td.has-id.numerator {
    text-align: center;
}
:where(.doc-content .doc-html) td.has-id.dominator {
    text-align: center;
}
:where(.doc-content .doc-html) *,
:where(.doc-content .doc-html) *::before,
:where(.doc-content .doc-html) *::after {
    box-sizing: border-box;
}
:where(.doc-content .doc-html) figure {
    margin: 0;
}
:where(.doc-content .doc-html) img {
    vertical-align: middle;
    border: 0;
}
:where(.doc-content .doc-html) hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid;
    border-color: var(--border-color-high);
}
:where(.doc-content .doc-html) :is(h1, h2, h3, h4, h5, h6) {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}
:where(.doc-content .doc-html) :is(h1, h2, h3, h4, h5, h6) small {
    font-weight: normal;
    line-height: 1;
    color: #777777;
}
:where(.doc-content .doc-html) :is(h2, h3) {
    margin-top: 20px;
    margin-bottom: 10px;
}
:where(.doc-content .doc-html) h1 {
    font-size: 36px;
}
:where(.doc-content .doc-html) h2 {
    font-size: 30px;
}
:where(.doc-content .doc-html) h3 {
    font-size: 24px;
}
:where(.doc-content .doc-html) h4 {
    font-size: 18px;
}
:where(.doc-content .doc-html) h5 {
    font-size: 14px;
}
:where(.doc-content .doc-html) h6 {
    font-size: 12px;
}
:where(.doc-content .doc-html) p {
    margin: 0 0 10px;
}
:where(.doc-content .doc-html) small {
    font-size: 85%;
}
:where(.doc-content .doc-html) mark {
    background-color: #f9e491;
    padding: .2em;
}
:where(.doc-content .doc-html) abbr[title] {
    cursor: help;
    border-bottom: 1px dotted #777777;
}
:where(.doc-content .doc-html) :is(ul, ol) {
    margin-top: 0;
    margin-bottom: 10px;
}
:where(.doc-content .doc-html) svg text {
    font-family: "kufi", "Droid Arabic Kufi", Arial, sans-serif;
}
:where(.doc-content .doc-html) :is(h1, h2, h3, h4, h5, h6) {
    font-family: "kufi", "Droid Arabic Kufi", "math", Arial, sans-serif;
}
/* the site's tables (a table keeps these classes for a page without htmlBuilder's designs) */
:where(.doc-content .doc-html) table {
    background-color: transparent;
}
:where(.doc-content .doc-html) caption {
    padding-top: 8px;
    padding-bottom: 8px;
    color: #777777;
    text-align: right;
}
:where(.doc-content .doc-html) th {
    text-align: right;
}
:where(.doc-content .doc-html) .table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
}
:where(.doc-content .doc-html) .table > :is(thead, tbody, tfoot) > tr > :is(th, td) {
    padding: 8px;
    line-height: 1.42857;
    vertical-align: top;
    border-top: 1px solid;
    border-color: var(--border-color-high);
}
:where(.doc-content .doc-html) .table > thead > tr > th {
    vertical-align: bottom;
    border-bottom: 2px solid #e7ecf1;
}
:where(.doc-content .doc-html) .table > :is(caption, colgroup) + thead > tr:first-child > :is(th, td),
:where(.doc-content .doc-html) .table > thead:first-child > tr:first-child > :is(th, td) {
    border-top: 0;
}
:where(.doc-content .doc-html) .table > tbody + tbody {
    border-top: 2px solid #e7ecf1;
}
:where(.doc-content .doc-html) .table .table {
    background-color: #fff;
}
:where(.doc-content .doc-html) .table-bordered {
    border: 1px solid #e7ecf1;
}
:where(.doc-content .doc-html) .table-bordered > :is(thead, tbody, tfoot) > tr > :is(th, td) {
    border: 1px solid #929292;
}
:where(.doc-content .doc-html) .table-bordered > thead > tr > :is(th, td) {
    border-bottom-width: 2px;
}
/* the site's colour class htmlBuilder's ready blocks use, and the steps of a solution (its Solution block) */
:where(.doc-content .doc-html) :is(.w3-bg-light-grey, .w3-hover-bg-light-grey:hover) {
    color: var(--color-high);
    background-color: var(--background-color-mid);
}
:where(.doc-content .doc-html) .ssteps-col {
    margin-bottom: 0px;
}
:where(.doc-content .doc-html) .ssteps-col-h-text {
    color: var(--color-high);
}
:where(.doc-content .doc-html) .ssteps-table > tbody > tr > td:nth-child(1) {
    width: 60px;
    vertical-align: top;
    font-weight: bold;
    padding-top: 8px;
}
:where(.doc-content .doc-html) .ssteps-table > tbody > tr > td:nth-child(2) {
    width: 100%;
    padding: 8px;
}
:where(.doc-content .doc-html) .ssteps-col-body {
    padding: 8px 0px;
    margin-top: 2px;
    border-top: 1px solid var(--border-color-high);
}
:where(.doc-content .doc-html) .ssteps-table .red-text {
    color: red;
}
/* the site's math made of tables (pages made before htmlBuilder's own math) */
:where(.doc-content .doc-html) .math-table {
    display: inline-table;
    vertical-align: middle;
    line-height: 100%;
}
:where(.doc-content .doc-html) .math-table > tbody > tr > td > .can-edit:empty {
    display: none !important;
}
:where(.doc-content .doc-html) .root-power > tbody > tr > td > .can-edit:empty::after {
    content: '';
}
:where(.doc-content .doc-html) .root-power > tbody > tr > td > .can-edit:empty {
    display: none !important;
}
:where(.doc-content .doc-html) .root-oper + .math-cell {
    vertical-align: revert !important;
}
:where(.doc-content .doc-html) .math-cell.root-oper {
    line-height: 100%;
}
:where(.doc-content .doc-html) .v-align-bottom {
    vertical-align: bottom;
}
:where(.doc-content .doc-html) .math-cell {
    text-align: center;
}
:where(.doc-content .doc-html) .math-cell:empty {
    display: none;
}
:where(.doc-content .doc-html) .math-cell.mathOpertator {
    vertical-align: bottom;
}
:where(.doc-content .doc-html) .power.math-cell > table > tbody > tr > td.math-cell {
    font-size: 70%;
}

/* ==================== math (text_structure) ====================
   The site's math: fractions, roots, powers, brackets, matrices and letter boxes, as htmlBuilder's math drawer
   makes them. */
.doc-content .doc-html {
    --math-division-line: #333;
}
:where(.doc-content .doc-html) .fraction .dominator,
:where(.doc-content .doc-html) .fraction .numerator {
    padding: 0px;
}
:where(.doc-content .doc-html) .mathOperator {
    font-family: math;
}
:where(.doc-content .doc-html) .mathOperator:after,
:where(.doc-content .doc-html) .mathOperator:before {
    content: '\0000a0';
}
:where(.doc-content .doc-html) .a1 {
    border-left: 1px solid black;
    border-right: 1px solid black;
    padding: 0px 2px;
    border-color: var(--color-low);
}
:where(.doc-content .doc-html) .a2 {
    padding: 0px 2px;
}
:where(.doc-content .doc-html) .sbl {
    /* border-width: 1px 2px 1px 0px; */
    /* border-style: solid; */
    /* width: .5em; */
}
:where(.doc-content .doc-html) .sbl + td > table {
    margin:2px 2px;
}
:where(.doc-content .doc-html) .sbr {
    /* border-width: 1px 0px 1px 2px; */
    /* border-style: solid; */
    /* width: .5em; */
}
:where(.doc-content .doc-html) .right-rb path {
    vector-effect: non-scaling-stroke;
}
:where(.doc-content .doc-html) .left-rb path {
    vector-effect: non-scaling-stroke;
}
:where(.doc-content .doc-html) .power {
    vertical-align: top;
    /* font-size: .7em; */
}
:where(.doc-content .doc-html) .power > table {
    vertical-align: top !important;
}
:where(.doc-content .doc-html) .power td {
    line-height: 60%;
}
:where(.doc-content .doc-html) .numerator {
    text-align: center;
    padding: 0px 4px;
}
:where(.doc-content .doc-html) .numerator > * {
    margin: auto;
}
:where(.doc-content .doc-html) .dominator > * {
    margin: auto;
}
:where(.doc-content .doc-html) .dominator {
    text-align: center;
    padding: 0px 4px;
}
:where(.doc-content .doc-html) .inline-ltr-division {
    direction: ltr;
    display: inline-block!important;
    font-family: "math";
    font-size: 18px;
}
:where(.doc-content .doc-html) .inline-rtl-division.has-id {
    display: inline-block;
}
:where(.doc-content .doc-html) .inline-ltr-division .right-rb,
:where(.doc-content .doc-html) .inline-ltr-division .left-rb,
:where(.doc-content .doc-html) .inline-ltr-division .sbl,
:where(.doc-content .doc-html) .inline-ltr-division .sbr,
:where(.doc-content .doc-html) .inline-ltr-division .cbl,
:where(.doc-content .doc-html) .inline-ltr-division .cbr,
:where(.doc-content .doc-html) .inline-ltr-division .root-oper > svg {
    transform: rotateY(180deg);
}
:where(.doc-content .doc-html) .root-power {
    margin-left: -6px;
}
:where(.doc-content .doc-html) .inline-ltr-division .root-power {
    margin-right: -6px !important;
    margin-left: 0px;
}
:where(.doc-content .doc-html) table.default-style > tbody > tr > td,
:where(.doc-content .doc-html) table.default-style > tbody > tr > th {
    border: 1px solid black;
    padding:4px 4px;
}
:where(.doc-content .doc-html) table.default-style > tbody > tr > td:empty:after,
:where(.doc-content .doc-html) table.default-style > tbody > tr > th:empty:after {
    content:".";
    visibility:hidden;
}
:where(.doc-content .doc-html) table.real-table {
    display:table !important;
    line-height:2.2em;
}
:where(.doc-content .doc-html) .division-table td {
    padding-left: 2px;
    padding-right: 2px;
    line-height: 1.4em;
    width: auto !important;
}
:where(.doc-content .doc-html) .division-table tr > td:last-of-type {
    display: none;
}
:where(.doc-content .doc-html) .division-table tr:nth-child(1) > td {
    border-bottom:1px solid black;
}
:where(.doc-content .doc-html) .division-table tr:nth-child(2) > td:last-of-type {
    border-bottom:1px solid black;
    border-right:1px solid black;
    display:initial;
}
:where(.doc-content .doc-html) .matrix-table td {
    padding: 0px .5em;
    line-height: 1.4em;
    width: auto !important;
    text-align: center;
}
:where(.doc-content .doc-html) .matrix-table tr:first-of-type > td {
    padding-top: 0px;
}
:where(.doc-content .doc-html) .matrix-table tr:last-of-type > td {
    padding-bottom: 0px;
}
:where(.doc-content .doc-html) .virtual-paragraph {
    line-height: 2.2em;
    margin-bottom: 20px;
    margin-top: 20px;
}
:where(.doc-content .doc-html) .virtual-paragraph * {
    vertical-align: middle;
}
:where(.doc-content .doc-html) .virtual-paragraph .power {
    vertical-align: top;
}
:where(.doc-content .doc-html) .virtual-paragraph > .mt {
    display: inline-block;
}
:where(.doc-content .doc-html) .math-letters > span > span:empty {
    margin: 0px 2px;
}
:where(.doc-content .doc-html) .mt {
    display: inline-flex;
    vertical-align: middle;
    flex-flow: column;
    position: relative;
}
:where(.doc-content .doc-html) .mt.absolute-bracket {
    padding: 0px 2px;
}
:where(.doc-content .doc-html) .mt.square-bracket {
    padding: 0px 3px;
}
/*.mt ~ * {
    vertical-align: middle;
}*/
:where(.doc-content .doc-html) .mt > .mr {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
:where(.doc-content .doc-html) .mt.has-symbol .mr {
    flex-direction: column;
}
:where(.doc-content .doc-html) .mt > .mr > .mc {
    display: block;
    line-height: 0;
}
:where(.doc-content .doc-html) .mt > .mr > .mc.oc {
    /* line-height: 1em; */
    display: inline-block;
}
:where(.doc-content .doc-html) .mt > .mr > .mc > .math.can-edit {
    line-height: 1em;
    display: inline-block;
}
:where(.doc-content .doc-html) .mt.root > .mr > .mc.pc > .math.can-edit {
    font-size: 80%;
}
:where(.doc-content .doc-html) .mt.complex-fraction > .mr {
    direction: ltr;
    display: grid;
    grid-template-columns: auto auto;
}
:where(.doc-content .doc-html) .mt.complex-fraction > .mr > .mc {
    text-align: center;
}
:where(.doc-content .doc-html) .mt.complex-fraction > .mr > .ec {
    padding: 2px 2px;
    grid-row: 1 / 4;
}
:where(.doc-content .doc-html) .mt.complex-fraction > .mr > .uc {
    grid-row: 1 / 2;
    padding: 2px 2px;
    padding-bottom: .3em;
}
:where(.doc-content .doc-html) .mt.complex-fraction > .mr > .cc {
    grid-row: 2 / 3;
    height: 1px;
    width: 100%;
    background: black;
}
:where(.doc-content .doc-html) .mt.complex-fraction > .mr > .lc {
    grid-row: 3 / 4;
    padding: 2px 2px;
}
:where(.doc-content .doc-html) .mt.has-symbol {
    align-items: start;
}
:where(.doc-content .doc-html) .mt.has-symbol > .mr > .sc > .can-edit {
    font-size: 80%;
    line-height: 1em;
    display: inline-block;
}
:where(.doc-content .doc-html) .mt.has-symbol > .mr > .sc > .can-edit:empty {
    padding: 0px !important;
    display: block;
}
:where(.doc-content .doc-html) .mt.has-symbol > .mr > .sc > .can-edit:empty:after {
    content: '===';
    line-height: 1.4em;
    visibility: hidden;
}
:where(.doc-content .doc-html) .mt.has-symbol > .mr > .tc > .can-edit:empty {
    margin-top: 2px;
    margin-bottom: 2px;
}
:where(.doc-content .doc-html) .mt.has-symbol > .mr > .tc > .can-edit {
    text-wrap: nowrap;
    display: inline-block;
}
:where(.doc-content .doc-html) .mt.has-symbol > .mr > .tc > .can-edit:empty:after {
    line-height: 2em;
    content: '|';
    visibility: hidden;
}
:where(.doc-content .doc-html) .mt.has-symbol > .mr > .ec > .can-edit {
    font-size: 80%;
    line-height: 15px;
    display: inline-block;
}
:where(.doc-content .doc-html) .mt.has-symbol > .mr > .ec > .can-edit:empty {
    padding: 0px !important;
    display: block;
}
:where(.doc-content .doc-html) .mt.has-symbol > .mr > .ec > .can-edit:empty:after {
    content: '===';
    line-height: 1.4em;
    visibility: hidden;
}
:where(.doc-content .doc-html) .mt.root > .mr {
    align-items: end;
}
:where(.doc-content .doc-html) .mt.root > .mr > .mc.pc {
    z-index: 1;
}
:where(.doc-content .doc-html) .mt.root > .mr > .pc > .can-edit:empty {
    width: .7em !important;
    display: block !important;
}
:where(.doc-content .doc-html) .mt.root > .mr > .pc > .can-edit:empty:after {
    content: '.' !important;
    /*line-height: 0px !important;*/
    visibility: hidden;
}
:where(.doc-content .doc-html) .mt.root > .mr > .pc.up {
    z-index: 1;
    font-size: 12px;
    line-height: 12px;
    grid-row: 1 / span 1;
}
:where(.doc-content .doc-html) .mt.root > .mr > .pc > .can-edit:empty {
    padding: .5em !important;
}
:where(.doc-content .doc-html) .mt.root > .mr > .rc > svg {
    filter: initial !important;
    stroke: var(--color-high) !important;
    fill: none;
}
:where(.doc-content .doc-html) .mt.root > .mr > .rc > svg > * {
    vector-effect: non-scaling-stroke;
}
:where(.doc-content .doc-html) .mt.root > .mr > .tc {
    border-top: 1px solid black;
    padding-top: 2px;
    padding-inline-start: 3px;
    grid-row: 1 / span 2;
    border-color: var(--math-division-line);
}
:where(.doc-content .doc-html) .mt.root > .mr > .tc > .can-edit {
    display: inline-block;
    padding-inline-end: .3em;
}
:where(.doc-content .doc-html) .mt.division > .mr {
    display: flex;
    flex-direction: column;
}
:where(.doc-content .doc-html) .mt.division > .mr > .cc {
    height: 1px;
    width: 100%;
    background: var(--math-division-line);
    margin-top: 2px;
    margin-bottom: 3px;
}
:where(.doc-content .doc-html) .mt.division > .mr > .ec {
    margin: 0px 2px;
}
:where(.doc-content .doc-html) .mt.division > .mr > .mc.sc > .math {
    padding: 0px 5px;
}
:where(.doc-content .doc-html) .mt.power > .mr {
    flex-direction: column-reverse;
    display: grid;
    grid-template-columns: auto auto;
}
:where(.doc-content .doc-html) .mt.power > .mr > .pc {
    font-size: 80%;
    margin-bottom: -.5em;
}
:where(.doc-content .doc-html) .mt.power > .mr > .pc > * {
    line-height: 90%;
    display: inline-block;
}
:where(.doc-content .doc-html) .mt.power > .mr > .pc > .can-edit:empty {
    padding: 0px 5px !important;
    margin-bottom: .3em;
}
:where(.doc-content .doc-html) .mt.power > .mr > .tc {
    grid-row: 2/span 1;
}
:where(.doc-content .doc-html) .mt.power > .mr > .gc {
    grid-row: 1/span 1;
}
:where(.doc-content .doc-html) .mt.power > .mr > .tc .round-bracket {
    margin-inline-end: -.3em;
}
:where(.doc-content .doc-html) .mt.power > .mr > .pc .round-bracket {
    margin-inline-start: -.4em;
}
:where(.doc-content .doc-html) .mt.power > .mr > .pc > .can-edit:empty:after {
    content: "|";
    line-height: .5em;
    visibility: hidden;
}
:where(.doc-content .doc-html) .mt.math-brackets > .mr {
    align-items: stretch;
    /* direction: rtl; */
    /* flex-direction: row-reverse; */
}
/*html[dir="ltr"] .mt.math-brackets > .mr {
    flex-direction: row;
}*/
:where(.doc-content .doc-html) .mt.math-brackets > .mr > .mc.tc {
    padding: 0px 2px;
}
:where(.doc-content .doc-html) .mt.math-brackets > .mr > .mc > svg {
    filter: initial !important;
    vertical-align: middle;
    fill: none;
    stroke: var(--color-high) !important;
}
:where(.doc-content .doc-html) .mt.math-brackets > .mr > .mc > svg > path {
    vector-effect: non-scaling-stroke;
}
:where(.doc-content .doc-html) .mt.math-brackets > .mr > .mc > svg.e {
    /*transform: scale(-1);*/
}
:where(.doc-content .doc-html) .mt.operator > .mr > .operator-cell {
    font-family: math;
    font-size: 1.4em;
}
:where(.doc-content .doc-html) .xt {
    display: inline-table;
}
:where(.doc-content .doc-html) .xt * {
    line-height: initial;
}
:where(.doc-content .doc-html) .xt > .xr > .xc {
    padding: 2px 4px;
    display: table-cell;
}
:where(.doc-content .doc-html) .xt > .xr {
    display: table-row;
}
:where(.doc-content .doc-html) .can-edit:empty {
    opacity: .8;
    color: var(--can-edit-empty-color);
    background-color: var(--can-edit-empty-bg);
    padding-inline-start: 2px;
    padding-inline-end: 20px;
    display: inline-block;
    /* height: 1em; */
}
:where(.doc-content .doc-html) .can-edit:empty:after {
    content: '.';
    color: transparent;
}
:where(.doc-content .doc-html) td.can-edit:empty {
    background: transparent !important;
    display: table-cell;
}
:where(.doc-content .doc-html) td.can-edit:empty:after {
    content: '|' !important;
    opacity: 0;
    line-height: 1.8em;
}
:where(.doc-content .doc-html) th.can-edit:empty:after {
    content: '|' !important;
    opacity: 0;
    line-height: 1.8em;
}
:where(.doc-content .doc-html) p.has-id > .can-edit:only-child {
    display: block;
    background-color: transparent !important;
}
:where(.doc-content .doc-html) .can-edit {
    white-space: pre-wrap;
}
:where(.doc-content .doc-html) p.has-id > .can-edit:only-child:empty:after {
    content: '.';
}
:where(.doc-content .doc-html) li.has-id > .can-edit:only-child {
    display: block;
    background: transparent;
}
:where(.doc-content .doc-html) li.has-id > .can-edit:only-child:after {
    content: '.';
    color: transparent;
}
:where(.doc-content .doc-html) caption.has-id.can-edit:empty {
    line-height: 1.4em;
    height: 2em;
    display: table-caption;
}
:where(.doc-content .doc-html) th.has-id.can-edit {
    text-align: center;
    display: table-cell;
}
/* (its colours are the editor's, which this sheet hasn't: only the room it keeps shows, the room the author sees round a
   picture) */
:where(.doc-content .doc-html) .has-id:not(.can-edit):empty {
    /* opacity: .8; */
    color: var(--can-edit-empty-color);
    padding: 0px 10px;
    background-color: var(--can-edit-empty-bg);
    text-align: center;
}
:where(.doc-content .doc-html) math.can-edit:only-child:empty {
    display: block;
    /* height: 1em; */
}
:where(.doc-content .doc-html) math.can-edit {
    margin-top: 2px;
    margin-bottom: 2px;
}
:where(.doc-content .doc-html) math.can-edit:only-child:empty:after {
    content: '.';
}
:where(.doc-content .doc-html) .can-edit:empty:focus {
    background: transparent !important;
}
:where(.doc-content .doc-html) p.has-id > .can-edit:only-child:empty:after {
    content: '.';
}
/* an empty paragraph keeps its line, without the word the editor writes in it */
:where(.doc-content .doc-html) p.has-id:empty:after {
    line-height: 1.8em;
    content: '.';
    visibility: hidden;
}
:where(.doc-content .doc-html) math.can-edit:only-child:empty {
    display: block;
}
:where(.doc-content .doc-html) math.can-edit {
    margin-top: 2px;
    margin-bottom: 2px;
}
:where(.doc-content .doc-html) math.can-edit:only-child:empty:after {
    content: '.';
}
:where(.doc-content .doc-html) .root-oper svg {
    fill: none;
    stroke: black;
}
:where(.doc-content .doc-html) svg text {
    font-family: "kufi","Droid Arabic Kufi",Arial, sans-serif;
    vector-effect: non-scaling-stroke;
    /*direction: rtl;*/
}
/* (the site's rules for math in a box with its own background in its dark look are in the dark look below) */
:where(.doc-content .doc-html) p.has-id {
    margin:0px;
}
:where(.doc-content .doc-html) ul.has-id,
:where(.doc-content .doc-html) ol.has-id {
    margin:0;
}

/* ==================== effects and the rest of htmlBuilder's own (html_effects) ==================== */
/*
 * htmlBuilder's effects sheet: hover effects, animations, tooltips, pictures that open large, the tables' designs,
 * checklists, the MATH drawer's figures and the CHARTS drawer's charts, and its additions to the site's math. They are
 * classes (hb-...) and attributes (data-tooltip, data-hb-stack), so a page keeps no style rules of its own.
 * The effects use the individual transform properties (scale, translate, rotate), so they add to a transform set on
 * the element instead of replacing it. It also gives back italic words their slant, which the site's reset takes off
 * <i> and <em>.
 */
/* ------------------------------------------------------------------ italic words */
/* (:where adds nothing to the weight of the rule, so the icons' own rules, .fa..., still win) */
:where(.doc-content .doc-html) i,
:where(.doc-content .doc-html) em {
    font-style: italic;
}
/* ------------------------------------------------------------------ hover effects */
:where(.doc-content .doc-html) .hb-hover-grow,
:where(.doc-content .doc-html) .hb-hover-shrink,
:where(.doc-content .doc-html) .hb-hover-lift,
:where(.doc-content .doc-html) .hb-hover-glow,
:where(.doc-content .doc-html) .hb-hover-fade,
:where(.doc-content .doc-html) .hb-hover-tilt,
:where(.doc-content .doc-html) .hb-hover-color {
    transition-property: scale, translate, rotate, box-shadow, opacity, filter;
    transition-duration: .3s;
    transition-timing-function: ease;
}
:where(.doc-content .doc-html) .hb-hover-grow:hover {
    scale: 1.05;
}
:where(.doc-content .doc-html) .hb-hover-shrink:hover {
    scale: .95;
}
:where(.doc-content .doc-html) .hb-hover-lift:hover {
    translate: 0 -4px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .18);
}
:where(.doc-content .doc-html) .hb-hover-glow:hover {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .25), 0 0 18px rgba(37, 99, 235, .45);
}
:where(.doc-content .doc-html) .hb-hover-fade:hover {
    opacity: .7;
}
:where(.doc-content .doc-html) .hb-hover-tilt:hover {
    rotate: -2deg;
    scale: 1.02;
}
:where(.doc-content .doc-html) .hb-hover-color {
    filter: grayscale(100%);
}
:where(.doc-content .doc-html) .hb-hover-color:hover {
    filter: none;
}
/* ------------------------------------------------------------------ animations (once when shown) */
:where(.doc-content .doc-html) .hb-anim-fade-in {
    animation: hb-fade-in 1s ease both;
}
:where(.doc-content .doc-html) .hb-anim-slide-left {
    animation: hb-slide-left 1s ease both;
}
:where(.doc-content .doc-html) .hb-anim-slide-right {
    animation: hb-slide-right 1s ease both;
}
:where(.doc-content .doc-html) .hb-anim-slide-up {
    animation: hb-slide-up 1s ease both;
}
:where(.doc-content .doc-html) .hb-anim-zoom-in {
    animation: hb-zoom-in 1s ease both;
}
:where(.doc-content .doc-html) .hb-anim-bounce {
    animation: hb-bounce 1s ease both;
}
:where(.doc-content .doc-html) .hb-anim-pulse {
    animation: hb-pulse 1s ease-in-out both;
}
:where(.doc-content .doc-html) .hb-anim-shake {
    animation: hb-shake .8s ease both;
}
:where(.doc-content .doc-html) .hb-anim-spin {
    animation: hb-spin 1s linear both;
}
:where(.doc-content .doc-html) .hb-anim-float {
    animation: hb-float 3s ease-in-out infinite both;
}
@keyframes hb-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes hb-slide-left {
    from { opacity: 0; translate: -40px 0; }
    to { opacity: 1; translate: 0 0; }
}
@keyframes hb-slide-right {
    from { opacity: 0; translate: 40px 0; }
    to { opacity: 1; translate: 0 0; }
}
@keyframes hb-slide-up {
    from { opacity: 0; translate: 0 30px; }
    to { opacity: 1; translate: 0 0; }
}
@keyframes hb-zoom-in {
    from { opacity: 0; scale: .6; }
    to { opacity: 1; scale: 1; }
}
@keyframes hb-bounce {
    0%, 20%, 50%, 80%, 100% { translate: 0 0; }
    40% { translate: 0 -18px; }
    60% { translate: 0 -8px; }
}
@keyframes hb-pulse {
    0%, 100% { scale: 1; }
    50% { scale: 1.08; }
}
@keyframes hb-shake {
    0%, 100% { translate: 0 0; }
    20%, 60% { translate: -8px 0; }
    40%, 80% { translate: 8px 0; }
}
@keyframes hb-spin {
    from { rotate: 0deg; }
    to { rotate: 360deg; }
}
@keyframes hb-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -8px; }
}
/* ------------------------------------------------------------------ tooltips (data-tooltip) */
/* (on the app's pages the app shows them itself, in the page's top layer: components/page-tooltip.ts, base.css) */
:where(.doc-content .doc-html) .hb-tooltip {
    position: relative;
}
:where(.doc-content .doc-html) .hb-tooltip[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    translate: -50% 4px;
    width: max-content;
    max-width: 260px;
    padding: 6px 10px;
    border-radius: 6px;
    background: #111827;
    color: #f9fafb;
    font: 500 13px/1.4 system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
    text-align: center;
    white-space: normal;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 50;
    transition: opacity .15s ease, translate .15s ease, visibility 0s linear .15s;
}
:where(.doc-content .doc-html) .hb-tooltip[data-tooltip]:hover::after,
:where(.doc-content .doc-html) .hb-tooltip[data-tooltip]:focus-within::after {
    opacity: 1;
    visibility: visible;
    translate: -50% 0;
    transition: opacity .15s ease, translate .15s ease;
}
/* ------------------------------------------------------------------ a picture that opens large when clicked */
/* (htmlBuilder's way, the picture fixed over the screen while it has the focus, can't work in the box, which keeps what
   is in it inside it: the app opens the picture in a window of its own, picture-viewer.ts) */
:where(.doc-content .doc-html) img.hb-zoomable {
    cursor: zoom-in;
}
/* ------------------------------------------------------------------ the styles of tables (the table's Design key) */
/*
 * A table's style: hb-tbl, a kind (hb-tbl-light: lines between the rows; hb-tbl-medium: the cells filled;
 * hb-tbl-grid: a line round every cell), a colour (hb-tbl-blue...) and the parts it marks (hb-tbl-header: the
 * first row; hb-tbl-banded: every other row; hb-tbl-first: the first column; hb-tbl-total: the last row).
 * Each rule has two classes, to come before the site's table classes (.table, .table-bordered), which the table
 * keeps for a page without this sheet; a cell's own style (its colour, its borders) still comes first.
 * --hb-tbl is the colour (r, g, b), --hb-tbl-on the colour of words on it.
 */
:where(.doc-content .doc-html) table.hb-tbl {
    --hb-tbl: 64, 64, 64;
    --hb-tbl-on: #fff;
}
:where(.doc-content .doc-html) table.hb-tbl-blue {
    --hb-tbl: 68, 114, 196;
    --hb-tbl-on: #fff;
}
:where(.doc-content .doc-html) table.hb-tbl-orange {
    --hb-tbl: 237, 125, 49;
    --hb-tbl-on: #000;
}
:where(.doc-content .doc-html) table.hb-tbl-gray {
    --hb-tbl: 165, 165, 165;
    --hb-tbl-on: #000;
}
:where(.doc-content .doc-html) table.hb-tbl-gold {
    --hb-tbl: 255, 192, 0;
    --hb-tbl-on: #000;
}
:where(.doc-content .doc-html) table.hb-tbl-lightblue {
    --hb-tbl: 91, 155, 213;
    --hb-tbl-on: #000;
}
:where(.doc-content .doc-html) table.hb-tbl-green {
    --hb-tbl: 112, 173, 71;
    --hb-tbl-on: #000;
}
/* Light: a line above and under the table, and between the rows */
:where(.doc-content .doc-html) table.hb-tbl-light.hb-tbl {
    border: 0;
    border-top: 2px solid rgb(var(--hb-tbl));
    border-bottom: 2px solid rgb(var(--hb-tbl));
}
:where(.doc-content .doc-html) table.hb-tbl-light.hb-tbl > * > tr > * {
    border: 0;
    border-bottom: 1px solid rgba(var(--hb-tbl), .4);
}
/* Medium: the cells filled, with lines of the page's colour between them */
:where(.doc-content .doc-html) table.hb-tbl-medium.hb-tbl {
    border: 0;
}
:where(.doc-content .doc-html) table.hb-tbl-medium.hb-tbl > * > tr > * {
    border: 1px solid var(--background-color, #fff);
    background-color: rgba(var(--hb-tbl), .16);
}
/* Grid: a line round every cell */
:where(.doc-content .doc-html) table.hb-tbl-grid.hb-tbl,
:where(.doc-content .doc-html) table.hb-tbl-grid.hb-tbl > * > tr > * {
    border: 1px solid rgba(var(--hb-tbl), .7);
}
/* the header row: the head row, or else the first row of the table */
:where(.doc-content .doc-html) table.hb-tbl-header.hb-tbl > thead > tr > *,
:where(.doc-content .doc-html) table.hb-tbl-header.hb-tbl > tbody:first-child > tr:first-child > *,
:where(.doc-content .doc-html) table.hb-tbl-header.hb-tbl > caption + tbody > tr:first-child > * {
    font-weight: bold;
}
:where(.doc-content .doc-html) table.hb-tbl-header.hb-tbl-light > thead > tr > *,
:where(.doc-content .doc-html) table.hb-tbl-header.hb-tbl-light > tbody:first-child > tr:first-child > *,
:where(.doc-content .doc-html) table.hb-tbl-header.hb-tbl-light > caption + tbody > tr:first-child > * {
    border-bottom: 2px solid rgb(var(--hb-tbl));
}
:where(.doc-content .doc-html) table.hb-tbl-header.hb-tbl-medium > thead > tr > *,
:where(.doc-content .doc-html) table.hb-tbl-header.hb-tbl-medium > tbody:first-child > tr:first-child > *,
:where(.doc-content .doc-html) table.hb-tbl-header.hb-tbl-medium > caption + tbody > tr:first-child > * {
    background-color: rgb(var(--hb-tbl));
    color: var(--hb-tbl-on);
}
:where(.doc-content .doc-html) table.hb-tbl-header.hb-tbl-grid > thead > tr > *,
:where(.doc-content .doc-html) table.hb-tbl-header.hb-tbl-grid > tbody:first-child > tr:first-child > *,
:where(.doc-content .doc-html) table.hb-tbl-header.hb-tbl-grid > caption + tbody > tr:first-child > * {
    background-color: rgba(var(--hb-tbl), .28);
    border-bottom: 2px solid rgb(var(--hb-tbl));
}
/* banded rows: every other row of the body */
:where(.doc-content .doc-html) table.hb-tbl-banded.hb-tbl-light > tbody > tr:nth-child(even) > * {
    background-color: rgba(var(--hb-tbl), .12);
}
:where(.doc-content .doc-html) table.hb-tbl-banded.hb-tbl-medium > tbody > tr:nth-child(even) > * {
    background-color: rgba(var(--hb-tbl), .32);
}
:where(.doc-content .doc-html) table.hb-tbl-banded.hb-tbl-grid > tbody > tr:nth-child(even) > * {
    background-color: rgba(var(--hb-tbl), .1);
}
/* the first column, and the total row (the last one) */
:where(.doc-content .doc-html) table.hb-tbl-first.hb-tbl > * > tr > :first-child {
    font-weight: bold;
}
:where(.doc-content .doc-html) table.hb-tbl-total.hb-tbl > tbody:last-child > tr:last-child > *,
:where(.doc-content .doc-html) table.hb-tbl-total.hb-tbl > tfoot > tr:last-child > * {
    font-weight: bold;
    border-top: 3px double rgb(var(--hb-tbl));
}
/* ------------------------------------------------------------------ people who ask for less motion get none */
@media (prefers-reduced-motion: reduce) {
    :where(.doc-content .doc-html) [class*="hb-anim-"] {
        animation: none !important;
    }
    :where(.doc-content .doc-html) [class*="hb-hover-"] {
        transition: none !important;
    }
}
/* ------------------------------------------------------------------ checklists */
/* a box before each item of a checklist (htmlBuilder's Bullet library), ticked when the item has data-checked */
:where(.doc-content .doc-html) ul.hb-checklist {
    list-style: none;
    padding-inline-start: 1.8em;
}
:where(.doc-content .doc-html) ul.hb-checklist > li {
    position: relative;
}
:where(.doc-content .doc-html) ul.hb-checklist > li::before {
    content: '';
    position: absolute;
    inset-inline-start: -1.6em;
    top: .25em;
    box-sizing: border-box;
    width: 1.05em;
    height: 1.05em;
    border: 2px solid currentColor;
    border-radius: .25em;
    opacity: .6;
}
:where(.doc-content .doc-html) ul.hb-checklist > li[data-checked]::before {
    border-color: #2563eb;
    opacity: 1;
    background: #2563eb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 85% no-repeat;
}
/* ------------------------------------------------------------------ a figure of htmlBuilder's MATH drawer, a chart of its CHARTS drawer (SVG drawings) */
/* as wide as its division (its handles size it), and never cut by a page break when it is printed */
:where(.doc-content .doc-html) .hb-figure > svg {
    display: block;
    width: 100%;
    height: auto;
}
:where(.doc-content .doc-html) .hb-figure {
    break-inside: avoid;
}
/* ------------------------------------------------------------------ math */
/*
 * a fraction with no whole number keeps no room for one (the site's style keeps 20 pixels for an empty box, then 8):
 * neither its box nor, where the browser has :has() (in a rule of its own), its cell
 */
:where(.doc-content .doc-html) .mt.complex-fraction > .mr > .ec > .can-edit:empty {
    padding: 0;
}
:where(.doc-content .doc-html) .mt.complex-fraction > .mr > .ec > .can-edit:empty::after {
    content: none;
}
:where(.doc-content .doc-html) .mt.complex-fraction > .mr > .ec:has(> .can-edit:empty) {
    padding: 0;
}
/*
 * an empty limit of a sum or an integral lined up by this editor (hb-limits) takes no room, on the page as in the
 * editor, which draws a box to click in its place (the site's style keeps a line for it: a sum with its lower limit
 * alone had a blank line over it); a page made before keeps its look until it is opened in the editor and saved
 */
:where(.doc-content .doc-html) .mt.symbol_on_both.hb-limits > .mr > .sc > .can-edit:empty,
:where(.doc-content .doc-html) .mt.symbol_on_both.hb-limits > .mr > .ec > .can-edit:empty {
    height: 0;
}
:where(.doc-content .doc-html) .mt.symbol_on_both.hb-limits > .mr > .sc > .can-edit:empty::after,
:where(.doc-content .doc-html) .mt.symbol_on_both.hb-limits > .mr > .ec > .can-edit:empty::after {
    content: none;
}
/* parts side by side in a ready formula (1/2 bh, 2(l + w)): no spaces around the empty sign between them */
:where(.doc-content .doc-html) .mt.operator > .mr > .mathOperator:empty::before,
:where(.doc-content .doc-html) .mt.operator > .mr > .mathOperator:empty::after {
    content: none;
}
/*
 * words of math in a bigger (or smaller) font: their line is as high as their letters, so the box, its root and
 * its brackets grow with them (the site gives the box line-height: 1em, which its words keep in any size)
 */
:where(.doc-content .doc-html) .mt > .mr > .mc > .can-edit * {
    line-height: 1;
}
/*
 * the shapes in the boxes of a symbol, as in a line (i = 1 under a sum, a formula under Symbol above): the site's style
 * puts every row in a symbol one under the other; the editor marks the symbols it lines up (hb-rows)
 */
:where(.doc-content .doc-html) .mt.has-symbol.hb-rows .mt:not(.has-symbol):not(.division) > .mr {
    flex-direction: row;
}
/* a fraction's bar is the background of a cell: printed even when the browser leaves backgrounds out (as it does by default) */
:where(.doc-content .doc-html) .mt.complex-fraction > .mr > .cc,
:where(.doc-content .doc-html) .mt.division > .mr > .cc {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
/* the numbers of a matrix in the middle of their columns, as books write them */
:where(.doc-content .doc-html) .xt > .xr > .xc {
    text-align: center;
}
/*
 * its rows as close as a book's, in a matrix lined up by this editor (hb-tight): the site's style gives each row the line
 * of its font, which the Arabic font makes almost two lines high
 */
:where(.doc-content .doc-html) .xt.hb-tight > .xr > .xc,
:where(.doc-content .doc-html) .xt.hb-tight > .xr > .xc > .can-edit {
    line-height: 1.3;
}
/* a matrix in the middle of the line, as the other math (its first row sat on the line, the others under it) */
:where(.doc-content .doc-html) .xt {
    vertical-align: middle;
}
/*
 * a root made by this editor (hb-slim-index): an empty index takes no room, so the root sits on the line as the
 * words do (the site's style keeps 1.7em for it, above the root's hook; the editor shows a small box to click)
 */
:where(.doc-content .doc-html) .mt.root.hb-slim-index > .mr > .mc.pc > .can-edit:empty {
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
}
:where(.doc-content .doc-html) .mt.root.hb-slim-index > .mr > .mc.pc > .can-edit:empty::after {
    content: none !important;
}
/*
 * a root drawn by this editor for any width (hb-fit): its sign as tall as what is under it and its index at half the
 * sign's height, however the width of the page breaks the lines under it (the editor's page is narrower than the
 * site's); in a text, the last line under it is on the line of the words (its baseline), so no margin is measured
 */
:where(.doc-content .doc-html) .mt.root.hb-fit > .mr > .rc {
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}
:where(.doc-content .doc-html) .mt.root.hb-fit > .mr > .rc > svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
:where(.doc-content .doc-html) .mt.root.hb-fit > .mr > .pc {
    align-self: center;
    height: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
:where(.doc-content .doc-html) .mt.root.hb-fit > .mr > .tc {
    align-self: baseline;
}
/* (a row box, whose baseline is its row's: some browsers make a column box's baseline the bottom of its first row) */
:where(.doc-content .doc-html) .mt.root.hb-fit:not(.mt *, .xt *) {
    vertical-align: baseline;
    flex-direction: row;
}
/*
 * brackets drawn by this editor for any width (hb-fit): their signs as tall as what is in them, whatever the width of
 * the page breaks its lines (the site's style stretches the cells of brackets over their row)
 */
:where(.doc-content .doc-html) .mt.math-brackets.hb-fit > .mr > .sc,
:where(.doc-content .doc-html) .mt.math-brackets.hb-fit > .mr > .ec {
    flex-shrink: 0;
    position: relative;
}
:where(.doc-content .doc-html) .mt.math-brackets.hb-fit > .mr > .sc > svg,
:where(.doc-content .doc-html) .mt.math-brackets.hb-fit > .mr > .ec > svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*
 * a fraction in a text drawn by this editor (hb-fit) is on the line by the baseline of the last line of its top, as a
 * root is: its bar is under that line at a height that does not change with the width of the page, and the editor
 * raises it (vertical-align) so that its bar is at the middle of the words (Fraction with the text on top: a grid, as
 * Fraction, for the same baseline in every browser)
 */
:where(.doc-content .doc-html) .mt.complex-fraction.hb-fit:not(.mt *, .xt *),
:where(.doc-content .doc-html) .mt.division.hb-fit:not(.mt *, .xt *) {
    vertical-align: baseline;
    flex-direction: row;
}
:where(.doc-content .doc-html) .mt.complex-fraction.hb-fit:not(.mt *, .xt *) > .mr > .uc,
:where(.doc-content .doc-html) .mt.division.hb-fit:not(.mt *, .xt *) > .mr > .sc {
    align-self: baseline;
}
:where(.doc-content .doc-html) .mt.division.hb-fit:not(.mt *, .xt *) > .mr {
    display: grid;
    justify-items: center;
}
:where(.doc-content .doc-html) .mt.division.hb-fit:not(.mt *, .xt *) > .mr > .cc {
    justify-self: stretch;
}
/*
 * the lines of big math (your decision, D10): a fraction's bar, a root's sign and line, and brackets and bars are 1
 * pixel thick up to words of 24 pixels, as before, and then grow with the size (1/24 of it: 1.67 pixels at 40), as a
 * book's lines do; on the math the editor lines up (hb-fit), so a page made before keeps its look until it is saved
 */
:where(.doc-content .doc-html) .mt.division.hb-fit > .mr > .cc,
:where(.doc-content .doc-html) .mt.complex-fraction.hb-fit > .mr > .cc {
    height: max(1px, 0.0417em);
}
/*
 * (a root's line is drawn as a fraction's bar is, a background, printed: a border's width is rounded to whole pixels of
 * the screen, so it stayed 1 pixel at 40 while the sign beside it grew; as high, with its 2 pixels under it, as before)
 */
:where(.doc-content .doc-html) .mt.root.hb-fit > .mr > .tc {
    border-top-width: 0;
    padding-top: calc(2px + max(1px, 0.0417em));
    background-image: linear-gradient(var(--math-division-line, #333), var(--math-division-line, #333));
    background-size: 100% max(1px, 0.0417em);
    background-position: top;
    background-repeat: no-repeat;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
/* (where the system's colours replace the page's, it is a line again: backgrounds are not drawn there) */
@media (forced-colors: active) {
    :where(.doc-content .doc-html) .mt.root.hb-fit > .mr > .tc {
        border-top-width: max(1px, 0.0417em);
        padding-top: 2px;
    }
}
:where(.doc-content .doc-html) .mt.root.hb-fit > .mr > .rc > svg > *,
:where(.doc-content .doc-html) .mt.math-brackets.hb-fit > .mr > .mc > svg > path {
    stroke-width: max(1px, 0.0417em);
}
/*
 * a sum or an integral made by this editor (hb-big-symbol): its sign bigger than the words, as books write it (the
 * sign goes down past the line of the letters: the room under it keeps it off its lower limit)
 */
:where(.doc-content .doc-html) .mt.symbol_on_both.hb-big-symbol > .mr > .tc > .can-edit {
    font-size: 1.6em;
    line-height: 1;
    padding-bottom: .15em;
}
/* a vector: the arrow typed over its letters (hb-arrow, data-arrow) is drawn over all of them */
:where(.doc-content .doc-html) .mt.symbol_on_top.hb-arrow > .mr > .sc {
    align-self: stretch;
    line-height: 0;
}
:where(.doc-content .doc-html) .mt.symbol_on_top.hb-arrow > .mr > .sc > .can-edit {
    position: relative;
    display: block;
    height: 7px;
    padding: 0 !important;
    font-size: 0 !important;
}
:where(.doc-content .doc-html) .mt.symbol_on_top.hb-arrow > .mr > .sc > .can-edit::before {
    content: '';
    position: absolute;
    top: 3px;
    right: 1px;
    left: 1px;
    border-top: 1px solid currentColor;
}
:where(.doc-content .doc-html) .mt.symbol_on_top.hb-arrow > .mr > .sc > .can-edit::after {
    content: '';
    position: absolute;
    top: 1px;
    right: 1px;
    width: 4px;
    height: 4px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);
}
:where(.doc-content .doc-html) .mt.symbol_on_top.hb-arrow[data-arrow="\2190"] > .mr > .sc > .can-edit::after {
    right: auto;
    left: 1px;
    transform: rotate(-135deg);
}
/* a line: a head at each end (the second one is the cell's) */
:where(.doc-content .doc-html) .mt.symbol_on_top.hb-arrow[data-arrow="\2194"] > .mr > .sc {
    position: relative;
}
:where(.doc-content .doc-html) .mt.symbol_on_top.hb-arrow[data-arrow="\2194"] > .mr > .sc::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 4px;
    height: 4px;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(-135deg);
}
/* an arc: the top of an ellipse as wide as the letters, a third as high; a bar (a segment): the line alone */
:where(.doc-content .doc-html) .mt.symbol_on_top.hb-arrow[data-arrow="\2312"] > .mr > .sc > .can-edit::before {
    top: 1px;
    aspect-ratio: 3 / 1;
    border-radius: 50% / 100% 100% 0 0;
}
:where(.doc-content .doc-html) .mt.symbol_on_top.hb-arrow[data-arrow="\2312"] > .mr > .sc > .can-edit::after,
:where(.doc-content .doc-html) .mt.symbol_on_top.hb-arrow[data-arrow="\203E"] > .mr > .sc > .can-edit::after {
    content: none;
}
/*
 * the numbered steps of a solution (the solution template's table of one column, hb-steps): each step has its
 * number before its words, and how many there are, as the questions write it, 1 \\ 3 (in Arabic-Indic digits in
 * an Arabic one, data-digits="arabic"); a step added or taken out numbers them again by itself
 */
:where(.doc-content .doc-html) .hb-steps > tbody {
    counter-reset: hb-step;
}
:where(.doc-content .doc-html) .hb-steps > tbody > tr {
    counter-increment: hb-step;
}
:where(.doc-content .doc-html) .hb-steps > tbody > tr > td {
    position: relative;
    padding: 8px;
    padding-inline-start: 64px;
    vertical-align: top;
}
:where(.doc-content .doc-html) .hb-steps > tbody > tr > td::before {
    content: counter(hb-step) " \\ " var(--hb-steps, "");
    position: absolute;
    top: 8px;
    inset-inline-start: 0;
    font-weight: bold;
}
:where(.doc-content .doc-html) .hb-steps[data-digits="arabic"] > tbody > tr > td::before {
    content: counter(hb-step, arabic-indic) " \\ " var(--hb-steps-ar, "");
}
/* (how many steps there are: a rule for each count, up to twelve) */
:where(.doc-content .doc-html) .hb-steps > tbody > tr:first-child:nth-last-child(1),
:where(.doc-content .doc-html) .hb-steps > tbody > tr:first-child:nth-last-child(1) ~ tr {
    --hb-steps: "1";
    --hb-steps-ar: "\661";
}
:where(.doc-content .doc-html) .hb-steps > tbody > tr:first-child:nth-last-child(2),
:where(.doc-content .doc-html) .hb-steps > tbody > tr:first-child:nth-last-child(2) ~ tr {
    --hb-steps: "2";
    --hb-steps-ar: "\662";
}
:where(.doc-content .doc-html) .hb-steps > tbody > tr:first-child:nth-last-child(3),
:where(.doc-content .doc-html) .hb-steps > tbody > tr:first-child:nth-last-child(3) ~ tr {
    --hb-steps: "3";
    --hb-steps-ar: "\663";
}
:where(.doc-content .doc-html) .hb-steps > tbody > tr:first-child:nth-last-child(4),
:where(.doc-content .doc-html) .hb-steps > tbody > tr:first-child:nth-last-child(4) ~ tr {
    --hb-steps: "4";
    --hb-steps-ar: "\664";
}
:where(.doc-content .doc-html) .hb-steps > tbody > tr:first-child:nth-last-child(5),
:where(.doc-content .doc-html) .hb-steps > tbody > tr:first-child:nth-last-child(5) ~ tr {
    --hb-steps: "5";
    --hb-steps-ar: "\665";
}
:where(.doc-content .doc-html) .hb-steps > tbody > tr:first-child:nth-last-child(6),
:where(.doc-content .doc-html) .hb-steps > tbody > tr:first-child:nth-last-child(6) ~ tr {
    --hb-steps: "6";
    --hb-steps-ar: "\666";
}
:where(.doc-content .doc-html) .hb-steps > tbody > tr:first-child:nth-last-child(7),
:where(.doc-content .doc-html) .hb-steps > tbody > tr:first-child:nth-last-child(7) ~ tr {
    --hb-steps: "7";
    --hb-steps-ar: "\667";
}
:where(.doc-content .doc-html) .hb-steps > tbody > tr:first-child:nth-last-child(8),
:where(.doc-content .doc-html) .hb-steps > tbody > tr:first-child:nth-last-child(8) ~ tr {
    --hb-steps: "8";
    --hb-steps-ar: "\668";
}
:where(.doc-content .doc-html) .hb-steps > tbody > tr:first-child:nth-last-child(9),
:where(.doc-content .doc-html) .hb-steps > tbody > tr:first-child:nth-last-child(9) ~ tr {
    --hb-steps: "9";
    --hb-steps-ar: "\669";
}
:where(.doc-content .doc-html) .hb-steps > tbody > tr:first-child:nth-last-child(10),
:where(.doc-content .doc-html) .hb-steps > tbody > tr:first-child:nth-last-child(10) ~ tr {
    --hb-steps: "10";
    --hb-steps-ar: "\661\660";
}
:where(.doc-content .doc-html) .hb-steps > tbody > tr:first-child:nth-last-child(11),
:where(.doc-content .doc-html) .hb-steps > tbody > tr:first-child:nth-last-child(11) ~ tr {
    --hb-steps: "11";
    --hb-steps-ar: "\661\661";
}
:where(.doc-content .doc-html) .hb-steps > tbody > tr:first-child:nth-last-child(12),
:where(.doc-content .doc-html) .hb-steps > tbody > tr:first-child:nth-last-child(12) ~ tr {
    --hb-steps: "12";
    --hb-steps-ar: "\661\662";
}
/* an angle's sign turned round in a right to left text, as Arabic books print it (put by the Symbols tab) */
:where(.doc-content .doc-html) .hb-mirror {
    display: inline-block;
    transform: scaleX(-1);
}
/* a row of letter boxes: a box for each letter, to fill in (empty, they showed nothing on a page, one bar in the editor) */
:where(.doc-content .doc-html) .mt.math-letters > .mr > .mc.math-letter {
    margin: 0 2px;
}
:where(.doc-content .doc-html) .mt.math-letters > .mr > .mc.math-letter > .math-data {
    display: inline-block;
    box-sizing: border-box;
    min-width: 1.3em;
    height: 1.5em;
    padding: 0 .15em !important;
    border: 1px solid currentColor;
    border-radius: 3px;
    line-height: 1.4em;
    text-align: center;
    vertical-align: middle;
}
/* ------------------------------------------------------------------ parts side by side (the Layout key, the ready layouts) */
/* on a phone (a screen narrower than 576 pixels) they go one under the other: data-hb-stack="phone" ("never": they stay side by side) */
@media (max-width: 575px) {
    :where(.doc-content .doc-html) [data-hb-stack="phone"] {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-auto-flow: row !important;
    }
}

/* ==================== the dark look ====================
   The site's dark look (#body.dark) in the app's: the computer's dark mode, outside docBuilder's own page. The
   site's dark colours that content uses, then the two sheets' rules for the dark look. */
@media (prefers-color-scheme: dark) {
    .doc-content:not(.doc-page) .doc-html {
        --background-color: black;
        --background-color-mid: #474747;
        --border-color: #5a5e63;
        --border-color-high: #312f2f;
        --color-low: #7d7d7d;
        --color-mid: #939393;
        --color-high: #a9a9a9;
        --math-division-line: white;
        --hb-figure-filter: invert(.9) hue-rotate(180deg);
    }
    :where(.doc-content:not(.doc-page) .doc-html) .root-oper > svg > path {
        stroke-width: 1.4px;
    }
    /* black on the site's dark look: a light gray */
    :where(.doc-content:not(.doc-page) .doc-html) table.hb-tbl-black {
        --hb-tbl: 166, 166, 166;
        --hb-tbl-on: #000;
    }
    /* the site's dark look turns every drawing into its negative: the colours of a figure or a chart keep their hue (blue stays blue) */
    :where(.doc-content:not(.doc-page) .doc-html) .hb-figure > svg {
        filter: var(--hb-figure-filter);
    }
    /* the site's dark look: a fraction's bar in the light colour of the other lines of math (the site draws it black) */
    :where(.doc-content:not(.doc-page) .doc-html) .mt.complex-fraction > .mr > .cc {
        background: var(--math-division-line, #fff);
    }
    /*
     * and brackets and a root's sign in that colour too, as the root's line (the site draws them grey, its --color-high:
     * a root had two colours); in a box with its own background the site's rule keeps them black
     */
    :where(.doc-content:not(.doc-page) .doc-html) .mt.math-brackets > .mr > .mc > svg,
    :where(.doc-content:not(.doc-page) .doc-html) .mt.root > .mr > .rc > svg {
        stroke: var(--math-division-line, #fff) !important;
    }
    /*
     * the site's older math: the sign of a root in that colour too (the site's dark look turns every drawing round), and
     * the lines of its fractions and roots in the site's dark colours for them
     */
    :where(.doc-content:not(.doc-page) .doc-html) .root-oper > svg {
        stroke: var(--math-division-line, #fff);
    }
    :where(.doc-content:not(.doc-page) .doc-html) [style*="border-top: 1px solid black"] {
        border-color: var(--border-color) !important;
    }
    :where(.doc-content:not(.doc-page) .doc-html) .root-oper + td {
        border-color: #868686 !important;
    }
    /*
     * A box with a light background of its own (the page marks it after the colour that shows: data-doc-bg, doc-html.ts;
     * its words are dark, base.css): in it the light look's colours, figures and charts as they are, as the site's rule
     * keeps the lines of math black in a box with a background. A box with a dark one takes the dark look's again.
     */
    :where(.doc-content:not(.doc-page) .doc-html) [data-doc-bg="light"] {
        --background-color: white;
        --background-color-mid: #e6e5e5;
        --border-color: #d8d8d8;
        --border-color-high: #d8d8d8;
        --color-low: #afafaf;
        --color-mid: #2e2e2e;
        --color-high: #000;
        --math-division-line: #333;
        --hb-figure-filter: none;
    }
    :where(.doc-content:not(.doc-page) .doc-html) [data-doc-bg="light"] [style*="border-top: 1px solid black"] {
        border-color: black !important;
    }
    :where(.doc-content:not(.doc-page) .doc-html) [data-doc-bg="dark"] {
        --background-color: black;
        --background-color-mid: #474747;
        --border-color: #5a5e63;
        --border-color-high: #312f2f;
        --color-low: #7d7d7d;
        --color-mid: #939393;
        --color-high: #a9a9a9;
        --math-division-line: white;
        --hb-figure-filter: invert(.9) hue-rotate(180deg);
    }
}