/* Lesson content (article.content): serif typography, tables, coloured boxes and the helper classes
   used by the converted lessons in obsah/ (.krok, .op, .plus/.minus, .rov, .tahak, .sach, .schema, figures, .svg-*).
   Macros ([[ ]], {{ }}) are styled in makra.css, exercises in ulohy.css. */

.content { font-family: var(--serif); font-size: 17px; line-height: 1.65; counter-reset: u; } /* counter "u" numbers exercises across all lists in a lesson */
.content h1 { font-size: 30px; line-height: 1.2; margin: 0 0 var(--s-1); letter-spacing: -.3px; }
.content .pod { font-family: var(--sans); color: var(--muted); margin: 0 0 var(--s-5); font-size: 15px; }
.content .pod.odstup { margin-top: 2em; }
.content .pod.mensie { font-size: .9em; }
.content h2 { font-size: 22px; margin: 44px 0 var(--s-3); padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.content .box + h2, .content .karty + h2, .content .lista + h2, .content details + h2 { margin-top: var(--s-6); }
.content h3 { font-size: 18px; margin: 28px 0 var(--s-2); }
.content .stred { text-align: center; }
.content p { margin: 10px 0; }
.content ul { padding-left: 22px; }
.content strong { font-weight: 650; }
.content code, .content kbd { font-family: var(--mono); font-size: .85em; background: var(--surface-2); padding: 1px 5px; border-radius: var(--r-s); }
.zosit { font-style: italic; color: var(--muted); } /* quotes from the lecture notebooks */

/* inline helpers */
.krok { color: var(--def-line); font-family: var(--sans); font-size: .85em; } /* small side remark under a worked step */
.op { font-size: 1.1em; margin: 0 var(--s-2); } /* operator between matrices, e.g. + or = */
.plus { color: var(--ok); }
.minus { color: var(--err-line); }

/* tables */
.tabulka-obal { overflow-x: auto; max-width: 100%; } /* scroll wrapper for wide tables (legal pages, lessons) */
.content table.t, .content table.tahak { display: block; overflow-x: auto; max-width: max-content; } /* lesson tables scroll instead of widening the page */
.content table.t, .content table.tahak, .content table:not([class]):not(.mx table) { border-collapse: collapse; margin: var(--s-3) 0; font-size: .95em; }
/* wide tables scroll inside their own box, never the whole page (mobile) */
.content table:not([class]):not(.mx table) { display: block; overflow-x: auto; max-width: max-content; }
.content table.t td, .content table.t th,
.content table.tahak td, .content table.tahak th,
/* `:not(.mx td)` keeps the grid lines off matrices that sit inside a table cell */
.content table:not([class]):not(.mx table) td:not(.mx td), .content table:not([class]):not(.mx table) th { border: 1px solid var(--border); padding: 5px var(--s-3); text-align: left; }
.content table.tahak th, .content table:not([class]):not(.mx table) th { background: var(--surface-2); }
.content table.tahak td { vertical-align: top; }
.content table.t.sach { margin-left: auto; margin-right: auto; text-align: center; } /* sign chessboard of cofactors */
.content table.t.sach td { text-align: center; }
/* aligned system of equations: only the cells, no grid lines */
.content table.rov { border-collapse: collapse; margin: var(--s-3) 0; }
.content table.rov td { border: 0; padding: 1px 6px; text-align: right; }

/* Sarrus scheme: the two re-written columns next to the determinant, three rows by two columns */
.schema { display: inline-grid; grid-template-columns: repeat(2, auto); gap: 2px 10px; vertical-align: middle; text-align: center; }

/* figures and SVG */
.content figure { margin: var(--s-3) auto; text-align: center; }
.content svg { display: block; margin: var(--s-3) auto; max-width: 100%; height: auto; }
.content svg text { font-family: var(--sans); }
.content svg text:not([font-size]) { font-size: 13px; } /* a font-size attribute in the markup wins, CSS would override it otherwise */
.content svg.venn { max-width: 420px; width: 100%; margin-left: 0; }
.paraboly { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin: 14px 0; }
.paraboly figure { margin: 0; text-align: center; font-size: .9em; }
.paraboly svg { width: 200px; height: 130px; border: 1px solid var(--border); background: var(--surface-2); margin: 0 auto; }
.styri { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s-3); margin: var(--s-3) 0; }
.styri figure { margin: 0; text-align: center; }
.styri svg { width: 100%; height: auto; }
.styri figcaption { font-size: .95em; }

/* SVG colours. One rule per class sets both stroke and fill, because the same class is used on lines (stroke only),
   on points and arrow heads (fill) and on labels (fill). This keeps the markup free of colour attributes.
   Elements written with fill="none" keep it (see the attribute rule); text never gets an outline. */
.svg-ciara   { stroke: var(--svg-ciara);   fill: var(--svg-ciara); }
.svg-akcent  { stroke: var(--svg-akcent);  fill: var(--svg-akcent); }
.svg-chyba   { stroke: var(--svg-chyba);   fill: var(--svg-chyba); }
.svg-tlmene  { stroke: var(--svg-tlmene);  fill: var(--svg-tlmene); }
.svg-ok      { stroke: var(--svg-ok);      fill: var(--svg-ok); }
.svg-vyplna-1 { fill: var(--svg-vyplna-1); } /* fill only: combined with .svg-ciara for the outline */
.svg-vyplna-2 { fill: var(--svg-vyplna-2); }

/* Colour classes of the networking course diagrams: .svg-v-<colour> sets the fill, .svg-o-<colour> the
   stroke, so one element can combine a light fill with a darker outline. Tokens in tokeny.css. */
.svg-v-text { fill: var(--svg-ciara); }                    .svg-o-text { stroke: var(--svg-ciara); }
.svg-v-tlmena { fill: var(--svg-tlmene); }                  .svg-o-tlmena { stroke: var(--svg-tlmene); }
.svg-v-linka { fill: var(--svg-linka); }                   .svg-o-linka { stroke: var(--svg-linka); }
.svg-v-plocha { fill: var(--surface-2); }                  .svg-o-plocha { stroke: var(--surface-2); }
.svg-v-pozadie { fill: var(--surface); }                 .svg-o-pozadie { stroke: var(--surface); }
.svg-v-modra { fill: var(--svg-modra); }                   .svg-o-modra { stroke: var(--svg-modra); }
.svg-v-modra-svetla { fill: var(--svg-modra-svetla); }            .svg-o-modra-svetla { stroke: var(--svg-modra-svetla); }
.svg-v-zelena { fill: var(--svg-zelena); }                  .svg-o-zelena { stroke: var(--svg-zelena); }
.svg-v-zelena-svetla { fill: var(--svg-zelena-svetla); }           .svg-o-zelena-svetla { stroke: var(--svg-zelena-svetla); }
.svg-v-oranzova { fill: var(--svg-oranzova); }                .svg-o-oranzova { stroke: var(--svg-oranzova); }
.svg-v-oranzova-svetla { fill: var(--svg-oranzova-svetla); }         .svg-o-oranzova-svetla { stroke: var(--svg-oranzova-svetla); }
.svg-v-fialova { fill: var(--svg-fialova); }                 .svg-o-fialova { stroke: var(--svg-fialova); }
.svg-v-fialova-svetla { fill: var(--svg-fialova-svetla); }          .svg-o-fialova-svetla { stroke: var(--svg-fialova-svetla); }
.svg-v-cervena { fill: var(--svg-cervena); }                 .svg-o-cervena { stroke: var(--svg-cervena); }
.svg-v-cervena-svetla { fill: var(--svg-cervena-svetla); }          .svg-o-cervena-svetla { stroke: var(--svg-cervena-svetla); }
.svg-v-tyrkysova { fill: var(--svg-tyrkysova); }               .svg-o-tyrkysova { stroke: var(--svg-tyrkysova); }
.svg-v-tyrkysova-svetla { fill: var(--svg-tyrkysova-svetla); }        .svg-o-tyrkysova-svetla { stroke: var(--svg-tyrkysova-svetla); }
.svg-v-zlta { fill: var(--svg-zlta); }                    .svg-o-zlta { stroke: var(--svg-zlta); }
.svg-v-zlta-svetla { fill: var(--svg-zlta-svetla); }             .svg-o-zlta-svetla { stroke: var(--svg-zlta-svetla); }
.content svg [fill="none"] { fill: none; }
.content svg text[class] { stroke: none; }

/* boxes */
.box { position: relative; margin: var(--s-4) 0; padding: var(--s-3) var(--s-4) var(--s-3) 18px; border-radius: var(--r); border-left: 4px solid; }
.box > .lbl, .box > summary { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; display: block; margin: 0 0 var(--s-1); font-weight: 700; }
.box p:first-of-type { margin-top: 0; }
.box p:last-child { margin-bottom: 0; }
.v { background: var(--def-bg); border-color: var(--def-line); }
.v > .lbl { color: var(--def-line); }
.pr { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--muted); }
.pr > .lbl { color: var(--muted); }
.chyba { background: var(--err-bg); border-color: var(--err-line); }
.chyba > .lbl { color: var(--err-line); }
.pouzitie { background: var(--use-bg); border-color: var(--use-line); }
.pouzitie > .lbl { color: var(--use-line); }
.du { background: var(--du-bg); border-color: var(--du-line); }
.du > .lbl { color: var(--du-ink); }
.tip { background: var(--use-bg); border-color: var(--use-line); font-size: .95em; }
.tip > summary { color: var(--use-line); cursor: pointer; margin: 0; }
.tip[open] > summary { margin-bottom: 6px; }
.tip > summary::before { content: "▸ "; }
.tip[open] > summary::before { content: "▾ "; }

/* cards side by side (one column on a phone): a short titled block, e.g. three kinds of devices */
.karty { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-3); margin: var(--s-4) 0; }
.karty > .box { margin: 0; }
.karta { background: var(--surface); border: 1px solid var(--border); padding-left: var(--s-4); }
.karta > .lbl { font-family: var(--sans); font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--text); }

/* command output and listings: scroll inside the block on a phone instead of widening the page */
.content pre { overflow-x: auto; max-width: 100%; margin: var(--s-3) 0; padding: var(--s-3); border-radius: var(--r); background: var(--surface-2); font-family: var(--mono); font-size: .85em; line-height: 1.5; }
.content pre code { background: none; padding: 0; font-size: inherit; }

/* figure.siroka: a wide diagram (viewBox ~700–800) keeps a readable size on a phone and scrolls sideways
   inside its figure instead of shrinking to unreadable text */
.content figure.siroka { overflow-x: auto; max-width: 100%; }
.content figure.siroka > svg { min-width: 560px; }