/* Shared styles for the lesson pages (fractions, divisibility, polynomial identities, percents, ratio and proportion)
   and the games hub (.hub, at the end of the non-media rules).
   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}

/* Games hub (matematika.bg/software/): <div class="hub">. ul.hub-cards > li > a holds b (title) + span (text);
   ul.hub-cards.pics puts a picture on top of each card; a.hub-feature is the wide banner with span.pz pictures. */
.hub{line-height:1.5}
.hub .hub-intro{font-size:1.05em;margin:.3em 0 .9em}
.hub .hub-toc{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 1.2em;padding:0;list-style:none}
.hub .hub-toc li{margin:0}
.hub .hub-toc a{display:block;padding:3px 12px;border:1px solid #c9dcec;border-radius:999px;background:#f4f8fc;color:#004d73;text-decoration:none;font-size:.92em}
.hub .hub-toc a:hover{background:#e6f0f8;border-color:#006699}
.hub h2{margin:1.5em 0 .6em}
.hub-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin:0 0 .5em;padding:0;list-style:none}
.hub-cards li{margin:0;padding:0}
.hub-cards a{display:block;height:100%;box-sizing:border-box;padding:12px 14px;border:1px solid #dbe4ee;border-radius:12px;background:#fff;color:#444746;text-decoration:none;box-shadow:0 1px 2px rgba(26,31,39,.06),0 2px 8px rgba(26,31,39,.04)}
.hub-cards a:hover{border-color:#006699;box-shadow:0 2px 10px rgba(0,102,153,.16)}
.hub-cards a:focus-visible,.hub-feature:focus-visible{outline:2px solid #004d73;outline-offset:2px}
.hub-cards b{display:block;margin:0 0 4px;color:#0275d8;font-size:1.05em;line-height:1.3}
.hub-cards a:hover b{text-decoration:underline}
.hub-cards span{display:block;font-size:.92em}
.hub-cards.pics{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.hub-cards.pics a{padding:0 0 10px;overflow:hidden}
.hub-cards.pics img{display:block;width:100%;height:auto;aspect-ratio:35/24;object-fit:cover;object-position:50% 0;margin:0 0 8px}
.hub-cards.pics b,.hub-cards.pics span{padding:0 12px}
.hub-feature{display:flex;align-items:center;gap:16px;margin:0 0 1.2em;padding:14px 16px;border:1px solid #f5c9a5;border-radius:12px;background:#fff1e6;color:#444746;text-decoration:none}
.hub-feature:hover{border-color:#ee6600}
.hub-feature b{display:block;margin:0 0 4px;color:#9a4200;font-size:1.25em}
.hub-feature .go{display:block;margin-top:6px;color:#0275d8;font-weight:600}
.hub-feature:hover .go{text-decoration:underline}
.hub-feature .pz{display:grid;grid-template-columns:repeat(4,76px);gap:6px;flex:none}
.hub-feature .pz img{display:block;width:76px;height:76px;padding:4px;box-sizing:border-box;object-fit:contain;background:#fff;border-radius:8px}

@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}}
@media (max-width:600px){.hub-feature{flex-direction:column;align-items:stretch}.hub-feature .pz{grid-template-columns:repeat(4,1fr)}.hub-feature .pz img{width:100%}}
@media (max-width:480px){.hub-cards{grid-template-columns:1fr;gap:8px}.hub-cards.pics{grid-template-columns:1fr 1fr}.hub-cards a{padding:10px 12px}.hub-cards.pics a{padding:0 0 8px}.hub-cards.pics b,.hub-cards.pics span{padding:0 10px}}