/* Shared styles for the lesson pages (fractions, divisibility, polynomial identities, percents, ratio and proportion).
   Wrap the article in <div class="lesson">. Optional variants on the same div:
     blue-h2      blue section headings (fractions and divisibility pages)
     bold-rules   bold text in the blue rule boxes (divisibility pages)
     nowrap-math  inline formulas never break across lines (fractions pages)
     math-gap     a gap between lines of inline formulas, for pages with inline fractions
     wide         820px instead of 780px (Fraction Rules cheat sheet)
   Two copies: /lesson.css on math10.com and matematika.bg/lesson.css - keep them identical. */
.lesson{max-width:780px;line-height:1.6}
.lesson h2{margin:1.6em 0 .5em}
.lesson h3{font-size:1.1em;margin:1.3em 0 .4em}
.lesson .toc{background:#f4f8fc;border:1px solid #c9dcec;border-radius:4px;padding:.6em 1em}
.lesson .toc a{white-space:nowrap}
.lesson .more{margin:.3em 0 1em}

/* Boxes. A p.rule holds one statement; a div.rule holds paragraphs or display formulas. */
.lesson .rule{background:#e8f3fc;border-left:4px solid #1b64a8;padding:.7em 1em;margin:.8em 0}
.lesson div.rule{padding:.5em 1em}
.lesson .rule p{margin:.4em 0}
.lesson .rule ol{margin:.4em 0;padding-left:1.6em}
.lesson .warn{background:#fff3e6;border-left:4px solid #f28c28;padding:.7em 1em;margin:.8em 0}
.lesson .old{background:#f4f4f4;border-left:4px solid #999;padding:.5em 1em;margin:.8em 0}
.lesson .old p{margin:.4em 0}

/* Text */
.lesson .ex{padding-left:1em;line-height:2}
.lesson .m,.lesson .nw{white-space:nowrap}
.lesson .y{color:#2b7a2b;font-weight:700}
.lesson .n{color:#c0392b;font-weight:700}
.lesson .yes{color:#1e8449}
.lesson .no{color:#c0392b}
.lesson .d{background:#e2f5c0;border-radius:3px;padding:0 .12em;font-weight:700}
.lesson .bx{display:inline-block;width:.7em;height:1em;border:2px solid currentColor;border-radius:2px;vertical-align:-.15em;margin:0 .06em}
.lesson ol.steps li{margin:.3em 0}

/* Pictures: centred by default, class="pic left" keeps one inline at the left */
.lesson .pic{display:block;margin:.8em auto .3em;max-width:100%;height:auto}
.lesson .pic.left{display:inline;margin:.6em 0 .2em}
.lesson .cap{text-align:center;font-size:.92em;color:#555;margin:0 0 1em}

/* Practice answers */
.lesson details{border:1px solid #c9dcec;border-radius:4px;padding:.5em .9em;margin:.5em 0}
.lesson summary{cursor:pointer}
.lesson summary:focus-visible{outline:2px solid #1b64a8;outline-offset:2px}
.lesson details p{margin:.5em 0 0}

/* Formulas */
.lesson .katex-display{overflow-x:auto;overflow-y:hidden;padding:.2em 0}
.lesson .dq{margin:.6em 0;padding-left:3em;text-indent:-1.5em}

/* Tables. ft: formula table, cards below 561px. ct: compact centred table. */
.lesson table.ft{border-collapse:collapse;margin:.8em 0;width:100%}
.lesson .ft th,.lesson .ft td{border:1px solid #c9dcec;padding:.45em .7em;text-align:left;vertical-align:middle}
.lesson .ft th{background:#e8f3fc}
.lesson table.ct{border-collapse:collapse;margin:.8em 0}
.lesson .ct th,.lesson .ct td{border:1px solid #c9dcec;padding:.3em 1.4em;text-align:center;vertical-align:middle}
.lesson .ct th{background:#e8f3fc}
/* pt: property table, cards below 801px; props sets its column widths */
.lesson table.pt{border-collapse:collapse;width:100%;margin:.6em 0 .8em;table-layout:fixed}
.lesson .pt th,.lesson .pt td{border:1px solid #c9dcec;padding:.45em .7em;text-align:left;vertical-align:middle}
.lesson .pt thead th{background:#1b64a8;color:#fff}
.lesson .pt thead th:first-child{width:28%}
.lesson .pt tbody th{background:#e8f3fc;color:#0b3d6b;font-weight:600}
.lesson .props thead th:first-child{width:25%}
.lesson .props thead th+th{width:43%}
.lesson .props thead th+th+th{width:32%}
/* rt: rules table (Rule | Formula | Example), cards below 801px; traps colours the "not true" table */
.lesson table.rt{border-collapse:collapse;width:100%;margin:.6em 0 .4em;table-layout:fixed}
.lesson .rt th,.lesson .rt td{border:1px solid #c9dcec;padding:.5em .75em;text-align:left;vertical-align:middle}
.lesson .rt td{line-height:2}
.lesson .rt td>div+div{margin-top:.8em}
.lesson .rt thead th{background:#1b64a8;color:#fff;font-weight:bold}
.lesson .rt thead th:first-child{width:26%}
.lesson .rt thead th+th{width:37%}
.lesson .rt tbody th{background:#e8f3fc;color:#0b3d6b;font-weight:600}
.lesson .rt.traps tbody th{background:#fff3e6;color:#8a4b00}
/* A table inside .scroll scrolls sideways on small screens */
.lesson .scroll{overflow-x:auto;margin:.8em 0}
.lesson .scroll table{border-collapse:collapse}
.lesson .scroll th,.lesson .scroll td{border:1px solid #c9dcec;padding:.4em .8em;text-align:left;vertical-align:top}
.lesson .scroll th{background:#e8f3fc}

/* Pascal's triangle */
.lesson .pascal{text-align:center;margin:.8em 0;font-size:1.05em;line-height:1.8}
.lesson .pascal span{display:inline-block;width:2.3em}

/* Percent calculator */
.lesson .pc{border:1px solid #c9dcec;border-radius:6px;background:#f5f9fd;padding:.2em 1em;margin:.8em 0}
.lesson .pc-q{padding:.7em 0;border-bottom:1px solid #dbe8f3}
.lesson .pc-q:last-child{border-bottom:0}
.lesson .pc input{width:5.5em;padding:.25em .4em;margin:.15em .2em;font:inherit;color:#222;background:#fff;border:1px solid #9bb8d3;border-radius:4px}
.lesson .pc input:focus{outline:2px solid #1b64a8;outline-offset:0;border-color:#1b64a8}
.lesson .pc output{display:block;min-height:1.6em;margin-top:.2em;color:#333}

/* Variants */
.lesson.wide{max-width:820px}
.lesson.blue-h2 h2{font-size:1.35em;color:#1b64a8}
.lesson.bold-rules .rule{font-weight:600}
.lesson.nowrap-math .katex{white-space:nowrap}
/* math-gap: the site's auto-render makes inline fractions display size, so formula lines need a gap */
.lesson.math-gap .katex .base{margin:.25em 0}
.lesson.math-gap .katex-display .katex .base{margin:0}

@media (max-width:800px){
.lesson .pt,.lesson .pt tbody,.lesson .pt tr,.lesson .pt td,.lesson .pt tbody th{display:block;width:auto}
.lesson .pt thead{position:absolute;left:-9999px}
.lesson .pt tbody tr{border:1px solid #c9dcec;margin:0 0 .8em}
.lesson .pt tbody th{border:none}
.lesson .pt td{border:none;border-top:1px solid #c9dcec}
.lesson .pt td::before{content:attr(data-label);display:block;font-weight:bold;color:#1b64a8;font-size:.85em;line-height:1.4}
.lesson table.rt,.lesson .rt tbody,.lesson .rt tr,.lesson .rt td,.lesson .rt tbody th{display:block;width:auto}
.lesson .rt thead{position:absolute;left:-9999px}
.lesson .rt tbody tr{border:1px solid #c9dcec;margin:0 0 .8em}
.lesson .rt tbody th{border:none}
.lesson .rt td{border:none;border-top:1px solid #c9dcec}
.lesson .rt td::before{content:attr(data-label);display:block;font-weight:bold;color:#1b64a8;font-size:.85em;line-height:1.4}
}
@media (max-width:700px){.lesson .ct th,.lesson .ct td{padding:.3em .45em}.lesson .ct th{font-size:.85em}}
@media (max-width:560px){.lesson .ft,.lesson .ft tbody,.lesson .ft tr,.lesson .ft td{display:block;width:auto}.lesson .ft thead{display:none}.lesson .ft tr{border:1px solid #c9dcec;margin:.5em 0}.lesson .ft td{border:0}.lesson .ft td:first-child{background:#e8f3fc}}
@media (max-width:480px){
.lesson .dq{margin:.45em 0;padding:.35em 0 .35em 1.5em;overflow-x:auto;overflow-y:hidden}
.lesson .dq .katex{font-size:1.1em}
.lesson .dq .katex .base{margin:.15em 0}
.lesson div.rule,.lesson .old{padding:.4em .6em}
.lesson div.rule .katex-display>.katex{font-size:1.1em}
.lesson .pc{padding:.2em .6em}
.lesson .pc input{width:4.6em}
}
@media (max-width:360px){.lesson div.rule .katex-display>.katex{font-size:1em}}