/* =============================================================================
   Custom MyST Directive Styles for Sphinx Documentation
   =============================================================================*/

/* -----------------------------------------------------------------------------
   @font-face — TeX Gyre Pagella (system fonts, no network fetch)
   ----------------------------------------------------------------------------- */
@font-face {
    font-family: 'TeX Gyre Pagella';
    src: local('TeX Gyre Pagella'),
         local('TeX Gyre Pagella Regular'),
         url('assets/fonts/tex-gyre/texgyrepagella-regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'TeX Gyre Pagella';
    src: local('TeX Gyre Pagella Bold'),
         local('TeX Gyre Pagella-Bold'),
         url('assets/fonts/tex-gyre/texgyrepagella-bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'TeX Gyre Pagella';
    src: local('TeX Gyre Pagella Italic'),
         local('TeX Gyre Pagella-Italic'),
         url('assets/fonts/tex-gyre/texgyrepagella-italic.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'TeX Gyre Pagella';
    src: local('TeX Gyre Pagella Bold Italic'),
         local('TeX Gyre Pagella-BoldItalic'),
         url('assets/fonts/tex-gyre/texgyrepagella-bolditalic.otf') format('opentype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

/* -----------------------------------------------------------------------------
   @font-face — SourceSerifPro (system fonts, no network fetch)
   ----------------------------------------------------------------------------- */
@font-face {
    font-family: 'Source Serif Pro';
    src: local('Source Serif Pro'),
         local('SourceSerifPro-Regular'),
         url('assets/fonts/Source_Serif_Pro/SourceSerifPro-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Source Serif Pro';
    src: local('Source Serif Pro Bold'),
         local('SourceSerifPro-Bold'),
         url('assets/fonts/Source_Serif_Pro/SourceSerifPro-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Source Serif Pro';
    src: local('Source Serif Pro Italic'),
         local('SourceSerifPro-Italic'),
         url('assets/fonts/Source_Serif_Pro/SourceSerifPro-Italic.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Source Serif Pro';
    src: local('Source Serif Pro Bold Italic'),
         local('SourceSerifPro-BoldItalic'),
         url('assets/fonts/Source_Serif_Pro/SourceSerifPro-BoldItalic.otf') format('opentype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}


/* -----------------------------------------------------------------------------
   CSS Custom Properties (Design Tokens)
   ----------------------------------------------------------------------------- */

:root {

    /* ── Typography: Source Serif Pro (system font, no network fetch) ───────── */
    --font-body:  'Source Serif Pro', Georgia, 'Times New Roman', serif;
    --font-heading: 'Source Serif Pro', Georgia, 'Times New Roman', serif;
    --font-mono:  'Fira Code', 'JetBrains Mono', 'Courier New', monospace;

/* KOLORY PIERWOTNE */
    --pw-color-green:                      #006872;
    --pw-color-green-rgb:                  0, 104, 114;

    --pw-color-blue:                       #3466af;
    --pw-color-blue-rgb:                   52, 102, 175;

    --pw-color-gray:                       #c0d1c8;
    --pw-color-gray-rgb:                   192, 209, 200;

    /* KOLORY WTÓRNE */
    --pw-color-yellow:                     #e7a217;
    --pw-color-yellow-rgb:                 231, 162, 23;

    --pw-color-red:                        #e63312;
    --pw-color-red-rgb:                    230, 51, 18;

    --pw-color-brick-red:                  #9a1006;
    --pw-color-brick-red-rgb:              154, 15, 6;

    --pw-color-fiolet:                     #552c4d;
    --pw-color-fiolet-rgb:                 94, 49, 86;


}

html[data-theme="light"] {

    --color-tip:                           var(--pw-color-brick-red);
    --color-tip-rgb:                       var(--pw-color-brick-red-rgb);

    --color-theorem:                       var(--pw-color-green);
    --color-theorem-rgb:                   var(--pw-color-green-rgb);
    --color-proposition:                   var(--pw-color-green);
    --color-proposition-rgb:               var(--pw-color-green-rgb);
    --color-corollary:                     var(--pw-color-green);
    --color-corollary-rgb:                 var(--pw-color-green-rgb);

    --color-definition:                    var(--pw-color-gray);
    --color-definition-rgb:                var(--pw-color-gray-rgb);

    --color-exercise:                      var(--pw-color-red);
    --color-exercise-rgb:                  var(--pw-color-red-rgb);
    --color-solution:                      var(--pw-color-blue);
    --color-solution-rgb:                  var(--pw-color-blue-rgb);

    --color-proof:                         var(--pw-color-blue);
    --color-proof-rgb:                     var(--pw-color-blue-rgb);

    --color-example:                       var(--pw-color-yellow);
    --color-example-rgb:                   var(--pw-color-yellow-rgb);
    --color-remark:                        var(--pw-color-yellow);
    --color-remark-rgb:                    var(--pw-color-yellow-rgb);

    --color-code-cell:                     var(--pw-color-fiolet);
    --color-code-cell-rgb:                 var(--pw-color-fiolet-rgb);

    --color-sagecell:                      var(--pw-color-green);
    --color-sagecell-rgb:                  var(--pw-color-green-rgb);
    --color-sagecell-output:               var(--pw-color-gray);
    --color-sagecell-output-rgb:           var(--pw-color-gray-rgb);
    --color-sagecell-exercise:             var(--pw-color-fiolet);
    --color-sagecell-exercise-rgb:         var(--pw-color-fiolet-rgb);

    --color-emphasis:                      var(--pw-color-brick-red);
    --color-emphasis-rgb:                  var(--pw-color-brick-red-rgb);
}

html[data-theme="dark"] {

    --color-tip:                           var(--pw-color-brick-red);
    --color-tip-rgb:                       var(--pw-color-brick-red-rgb);

    --color-theorem:                       var(--pw-color-green);
    --color-theorem-rgb:                   var(--pw-color-green-rgb);
    --color-proposition:                   var(--pw-color-green);
    --color-proposition-rgb:               var(--pw-color-green-rgb);
    --color-corollary:                     var(--pw-color-green);
    --color-corollary-rgb:                 var(--pw-color-green-rgb);

    --color-definition:                    var(--pw-color-gray);
    --color-definition-rgb:                var(--pw-color-gray-rgb);

    --color-exercise:                      var(--pw-color-red);
    --color-exercise-rgb:                  var(--pw-color-red-rgb);
    --color-solution:                      var(--pw-color-blue);
    --color-solution-rgb:                  var(--pw-color-blue-rgb);

    --color-proof:                         var(--pw-color-blue);
    --color-proof-rgb:                     var(--pw-color-blue-rgb);

    --color-example:                       var(--pw-color-yellow);
    --color-example-rgb:                   var(--pw-color-yellow-rgb);
    --color-remark:                        var(--pw-color-yellow);
    --color-remark-rgb:                    var(--pw-color-yellow-rgb);

    --color-code-cell:                     var(--pw-color-fiolet);
    --color-code-cell-rgb:                 var(--pw-color-fiolet-rgb);
    
    --color-sagecell-exercise:             var(--pw-color-fiolet);
    --color-sagecell-exercise-rgb:         var(--pw-color-fiolet-rgb);
    --color-sagecell-output:               var(--pw-color-gray);
    --color-sagecell-output-rgb:           var(--pw-color-gray-rgb);
    --color-sagecell:                      var(--pw-color-green);
    --color-sagecell-rgb:                  var(--pw-color-green-rgb);
    
    --color-emphasis:                      var(--pw-color-brick-red);
    --color-emphasis-rgb:                  var(--pw-color-brick-red-rgb);

}

/* -----------------------------------------------------------------------------
   Global Typography — TeX Gyre Pagella font family
   Applies the project's primary typeface to all text elements rendered by
   Sphinx + sphinx-proof. Fetches font files from system path; falls back
   gracefully to Georgia / Times New Roman if the font is absent.
   ----------------------------------------------------------------------------- */
body,
div.body,
div.document,
rst-content,
p, li, td, th, span, a,
h1, h2, h3, h4, h5, h6,
.admonition-title,
caption,
.label,
.rubric,
.sidebar,
.sphinxsidebar,
.documentwrapper,
.bodywrapper {
    font-family: var(--font-body, 'Source Serif Pro', Georgia, 'Times New Roman', serif) !important;
}

/* Headings — use heading font weight; fall back to Pagella Bold */
h1, h2, h3, h4, h5, h6,
.rubric,
.sidebar h1, .sidebar h2, .sidebar h3,
.document h1, .document h2, .document h3 {
    font-family: var(--font-heading, 'Source Serif Pro', Georgia, 'Times New Roman', serif) !important;
    font-weight: bold;
}

/* Headings in admonitions */
div.admonition-title,
.admonition-title,
.admonition > p.admonition-title {
    font-family: var(--font-heading, 'Source Serif Pro', Georgia, 'Times New Roman', serif) !important;
}

/* Code — monospace stack (Fira Code → JetBrains Mono → Courier New) */
code, pre, tt, .code,
.highlight,
.highlight pre,
.literal,
.rst-content tt,
.rst-content code {
    font-family: var(--font-mono, 'Fira Code', 'JetBrains Mono', 'Courier New', monospace) !important;
}

/* Side by side container
   Używane jako: :::{container} side-by-side  (w MyST)
   Owija dwie (lub więcej) kolumny .column i układa je obok siebie. */
.side-by-side {
    display: flex;          /* włącza układ flex — dzieci ustawiają się w rzędzie zamiast jedna pod drugą */
    align-items: center;    /* centruje kolumny w pionie względem siebie nawzajem (np. gdy tekst i tikz mają różną wysokość) */
                             /* alternatywy: flex-start (wyrównanie do góry), stretch (rozciąga obie kolumny do wysokości najwyższej) */
    gap: 1rem;               /* odstęp między kolumnami — zwiększ/zmniejsz, żeby zmienić przerwę (np. 1rem = mniej, 3rem = więcej) */
    flex-wrap: wrap;         /* gdy okno/ekran jest za wąskie, kolumny "spadają" pod siebie zamiast się ściskać w nieskończoność */
                             /* usunięcie tej linii wymusi układ zawsze w jednym rzędzie, nawet na telefonie — odradzane */
}

/* Side by side column
   Używane jako: :::{container} column  (wewnątrz side-by-side)
   Pojedyncza kolumna — np. tekst po lewej, {tikz}/{math} po prawej. */
.side-by-side .column-half {
    flex: 1 1 47%;   /* skrót od: flex-grow flex-shrink flex-basis
                         - flex-grow: 1   -> kolumna może rosnąć, żeby wypełnić wolne miejsce
                         - flex-shrink: 1 -> kolumna może się kurczyć, gdy brakuje miejsca
                         - flex-basis: 45% -> "startowa" szerokość kolumny (nie licząc gap)
                         Przy dwóch kolumnach 45%+45%+gap daje w przybliżeniu podział pół na pół.
                         Żeby zrobić asymetryczny układ (np. tekst węższy, obrazek szerszy),
                         nadaj innej kolumnie inną wartość, np. flex: 1 1 35% / flex: 1 1 55%. */
    min-width: 0;    /* bez tego flexbox nie pozwala kolumnie skurczyć się poniżej szerokości
                         jej najdłuższego "nierozbijalnego" elementu (np. długiego wzoru albo SVG)
                         i layout się rozjeżdża/wychodzi poza kontener na wąskich ekranach */
}

/* Side by side column — wariant na 3 kolumny
   Używane jako: :::{container} column-one-third  (wewnątrz side-by-side) */
.side-by-side .column-one-third {
    flex: 1 1 31%;   /* 3 kolumny × ~30% + 2× gap ≈ 100% */
    min-width: 0;
}

/* Side by side column — wariant na 3 kolumny
   Używane jako: :::{container} column-one-third  (wewnątrz side-by-side) */
.side-by-side .column-two-third {
    flex: 1 1 62%;
    min-width: 0;
}

.side-by-side .column-one-fourth {
    flex: 1 1 20%;
    min-width: 0;
}

.side-by-side .column-three-fourth {
    flex: 1 1 70%;
    min-width: 0;
}

/* Ograniczenie rozmiaru obrazków/SVG (np. wygenerowanych z {tikz})
   wewnątrz side-by-side, żeby nie wychodziły poza swoją kolumnę. */
.side-by-side img,
.side-by-side svg {
    max-width: 100%;  /* obrazek/SVG nigdy nie jest szerszy niż jego kolumna — kluczowe przy dużym {tikz} ze scale=2 */
    height: auto;      /* wysokość skaluje się proporcjonalnie do szerokości — bez tego max-width same by rozciągnęło/zgniotło grafikę */
}

/* Automatyczne układy wielokolumnowe
   Używane jako: :::{container} columns-2 / columns-3-auto / columns-2-auto
   - columns-2 / columns-3-auto: sztywna liczba kolumn (CSS column-count)
   - columns-2-auto: w pełni responsywne — układa się samoczynnie w tyle kolumn,
     by każda miała ~16em szerokości (columns: 16em)
   break-inside: avoid na li zapobiega łamaniu punktów listy między kolumnami. */
.columns-2 {
    column-count: 2;
    column-gap: 1.5rem;
}
.columns-3 {
    column-count: 3;
    column-gap: 1.5rem;
}
.columns-2-auto {
    columns: 16em;
    column-gap: 1.5rem;
}
.columns-3-auto {
    columns: 12em;
    column-gap: 1.5rem;
}
.columns-2 li,
.columns-3 li,
.columns-2-auto li,
.columns-3-auto li {
    break-inside: avoid;
}

/* Wycentrowany tekst
   Używane jako: :::{container} center-text
   Centruje zawartość w poziomie — np. podpis pod rysunkiem {tikz}. */
.center-text {
    text-align: center;
}

/* -----------------------------------------------------------------------------
   Cross-reference pills — "see-lecture" / "see-problem"
   Kompaktowe, wymalowane w "pigułkę" banery łączące ćwiczenie ze zbioru zadań
   z jego odpowiednikiem w wykładzie (i odwrotnie). Dodaj :class: [see-lecture]
   do bloku :::{note} (lub :::{tip}). W HTML daje to
   <div class="admonition note see-lecture">…</div>.

   Kolory podążają za aktywnym motywem dzięki tokenom --color-exercise
   (czerwień — link do wykładu) i --color-solution (błękit — link do zbioru).
   ----------------------------------------------------------------------------- */
.see-lecture,
.see-problem {
    display: inline-block !important;
    border: 1px solid var(--color-exercise) !important;
    border-left-width: 4px !important;
    border-radius: 999px !important;
    background-color: color-mix(in srgb, var(--color-exercise) 10%, transparent) !important;
    color: var(--color-exercise) !important;
    padding: 0.2em 0.9em !important;
    margin: 0.5em 0 0.5em 0 !important;
    font-size: 0.9em;
    line-height: 1.4;
}

/* wariant "do zbioru zadań" — inny kolor, by łatwo odróżnić kierunek */
.see-problem {
    border-color: var(--color-solution) !important;
    background-color: color-mix(in srgb, var(--color-solution) 10%, transparent) !important;
    color: var(--color-solution) !important;
}

/* ukrywamy domyślny tytuł admonitionu (np. "Powiązane z wykładem") */
.see-lecture > .admonition-title,
.see-lecture > p.admonition-title,
.see-problem > .admonition-title,
.see-problem > p.admonition-title {
    display: none !important;
}

/* treść w jednej linii wewnątrz pigułki */
.see-lecture > p,
.see-problem > p {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* wiódłka strzałka przed tekstem */
.see-lecture > p::before,
.see-problem > p::before {
    content: "\2192\00a0";   /* → + twarda spacja */
    font-weight: bold;
}

/* sam link wewnątrz pigułki */
.see-lecture a,
.see-problem a {
    color: inherit !important;
    font-weight: bold;
    text-decoration: none;
}
.see-lecture a:hover,
.see-problem a:hover {
    text-decoration: underline;
}

/* usuwamy ewentualne ikony motywu z tych pigułek */
.see-lecture::before,
.see-lecture::after,
.see-problem::before,
.see-problem::after {
    content: none !important;
}

/* =============================================================================
   THEME TIP STYLING
   ============================================================================= */

div.admonition.tip {
    border-left: .2rem solid var(--color-tip);
    border-color: var(--color-tip);
    box-shadow: 0 .2rem .5rem rgba(0,0,0,.05), 0 0 .05rem rgba(0,0,0,.1);
    background: rgba(var(--color-tip-rgb), 0.08);
}

div.admonition.tip > .admonition-title {
    background: rgba(var(--color-tip-rgb), 0.15);
}

/* =============================================================================
   THEME BLOCK STYLING
   =============================================================================
   Controls: theorem, proposition, corollary, definition, exercise, solution,
             example, remark blocks
   Properties:
     - border-color — color of all other borders
     - border-left — thickness, style, and color of left border
     - box-shadow — shadow effects
     - background — subtle background tint using --color-*-rgb
     - admonition-title background — title bar highlight using --color-*-rgb
*/
div.proof.theorem {
    border-left: .2rem solid var(--color-theorem);
    border-color: var(--color-theorem);
    box-shadow: 0 .2rem .5rem rgba(0,0,0,.05), 0 0 .05rem rgba(0,0,0,.1);
    background: rgba(var(--color-theorem-rgb), 0.08);
}

div.proof.theorem > .admonition-title {
    background: rgba(var(--color-theorem-rgb), 0.15);
}

div.proof.proposition,
div.proof.corollary {
    border-left: .2rem solid var(--color-proposition);
    border-color: var(--color-proposition);
    box-shadow: 0 .2rem .5rem rgba(0,0,0,.05), 0 0 .05rem rgba(0,0,0,.1);
    background: rgba(var(--color-proposition-rgb), 0.08);
}

div.proof.proposition > .admonition-title,
div.proof.corollary > .admonition-title {
    background: rgba(var(--color-proposition-rgb), 0.15);
}

div.proof.axiom {
    border-left: .2rem solid var(--color-theorem);
    border-color: var(--color-theorem);
    box-shadow: 0 .2rem .5rem rgba(0,0,0,.05), 0 0 .05rem rgba(0,0,0,.1);
    background: rgba(var(--color-theorem-rgb), 0.08);
}

div.proof.axiom > .admonition-title {
    background: rgba(var(--color-theorem-rgb), 0.15);
}

div.proof.definition {
    border-left: .2rem solid var(--color-definition);
    border-color: var(--color-definition);
    box-shadow: 0 .2rem .5rem rgba(0,0,0,.05), 0 0 .05rem rgba(0,0,0,.1);
    background: rgba(var(--color-definition-rgb), 0.08);
}

div.proof.definition > .admonition-title {
    background: rgba(var(--color-definition-rgb), 0.15);
}

div.proof.example,
div.proof.remark {
    border-left: .2rem solid var(--color-example);
    border-color: var(--color-example);
    box-shadow: 0 .2rem .5rem rgba(0,0,0,.05), 0 0 .05rem rgba(0,0,0,.1);
    background: rgba(var(--color-example-rgb), 0.08);
}

div.proof.example > .admonition-title,
div.proof.remark > .admonition-title {
    background: rgba(var(--color-example-rgb), 0.15);
}

/* -----------------------------------------------------------------------------
   ADMONITION EXERCISE/SOLUTION STYLING
   Controls: MyST {exercise} and {solution} directives (regular admonitions)
   ----------------------------------------------------------------------------- */
div.admonition.exercise {
    border-left: .2rem solid var(--color-exercise);
    border-color: var(--color-exercise);
    box-shadow: 0 .2rem .5rem rgba(0,0,0,.05), 0 0 .05rem rgba(0,0,0,.1);
    background: rgba(var(--color-exercise-rgb), 0.08);
}

div.admonition.exercise > p.admonition-title {
    background: rgba(var(--color-exercise-rgb), 0.15);
}

div.admonition.solution {
    border-left: .2rem solid var(--color-solution);
    border-color: var(--color-solution);
    box-shadow: 0 .2rem .5rem rgba(0,0,0,.05), 0 0 .05rem rgba(0,0,0,.1);
    background: rgba(var(--color-solution-rgb), 0.08);
}

div.admonition.solution > p.admonition-title {
    background: rgba(var(--color-solution-rgb), 0.15);
}

div.proof,
div.proof.dropdown {
    border-left: .2rem solid var(--color-proof);
    border-color: var(--color-proof);
    box-shadow: 0 .2rem .5rem rgba(0,0,0,.05), 0 0 .05rem rgba(0,0,0,.1);
    background: rgba(var(--color-proof-rgb), 0.08);
}

div.proof > p.admonition-title,
div.proof.dropdown > p.admonition-title {
    background: rgba(var(--color-proof-rgb), 0.15);
}

/* =============================================================================
   EMPHASIS STYLING
   =============================================================================
   Controls: .emph class and <strong> elements
   Properties:
     - color — text color for emphasized content (default: var(--pst-color-danger))
     - font-style — italic style (default: italic)
     - font-weight — bold weight (default: bold)
 */
.bd-article-container .emph {
    color: var(--color-emphasis);
    font-style: italic;
    font-weight: bold;
}

.bd-article-container strong,
.bd-article-container li strong,
.bd-article-container p strong {
    color: var(--color-emphasis);
    font-weight: bold;
}

.bd-article-container strong em,
.bd-article-container em strong {
    color: var(--color-emphasis);
    font-style: italic;
    font-weight: bold;
}

/* =============================================================================
   NARRATION ADMONITION STYLING
   =============================================================================
   Controls: {narration} directive — renders as plain text with no container
   Properties:
     - background — background color (default: transparent)
     - border — border styling (default: none)
     - box-sizing — how padding is calculated (default: border-box)
     - display — visibility of title paragraph (default: none)
     - margin — outer spacing (default: 0)
     - margin-top/bottom — spacing for first math element (default: 0.8em)
     - max-width — maximum width constraint (default: 100%)
     - padding — inner spacing (default: 0)
     - padding-top/bottom — spacing for narration content (default: 0.8em)
     - width — width constraint (default: 100%)
 */
div.admonition-narration {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

div.admonition-narration > p.admonition-title {
    display: none;
}

div.admonition-narration {
    padding-top: 0.8em;
    padding-bottom: 0.8em;
}

div.admonition-narration > .math:first-child,
div.admonition-narration > mjx-container:first-child {
    margin-top: 0.8em;
    margin-bottom: 0.8em;
}

/* =============================================================================
   CODE CELL STYLING
   Controls: MyST-NB code cells — makes them match example blocks visually
   Uses: --color-code-cell for border and background colors
*/

/* ── Outer .cell container ─────────────────────────────────────────────────── */
.bd-article-container .cell,
.cell {
    border-left: .2rem solid var(--color-code-cell);
    border-color: var(--color-code-cell);
    box-shadow: 0 .2rem .5rem rgba(0,0,0,.05), 0 0 .05rem rgba(0,0,0,.1);
    background: rgba(var(--color-code-cell-rgb), 0.08);
    border-radius: var(--mystnb-source-border-radius, .4em);
    overflow: hidden;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

/* ── <details> wrapper ───────────────────────────────────────────────────── */
.bd-article-container .cell details,
.cell details {
    border: none;
    background-color: rgba(var(--color-code-cell-rgb), 0.15);
    border-radius: 0;
}

/* ── <summary> title bar ─────────────────────────────────────────────────── */
/* UWAGA: ta reguła jest częściowo nadpisywana przez bardziej specyficzną
   ".cell details.admonition > summary" niżej (padding: 0.4em 0.75em wygrywa
   z tym padding: 0.5em 0.75em) — to WŁAŚNIE ta druga reguła odpowiadała za
   inną wysokość nagłówka "SageMath" niż ".admonition-title" reszty bloków.
   Obie reguły trzymamy teraz zsynchronizowane na tej samej wartości paddingu,
   żeby nie było niespodzianki przy edycji tylko jednej z nich. */
.bd-article-container .cell details summary,
.cell details summary {
    display: flex;
    align-items: center;
    border-left: 3px solid var(--color-code-cell);
    background: rgba(var(--color-code-cell-rgb), 0.15);
    padding: 0.5em 0.75em;
    margin: 0;
    line-height: 1.5;
    cursor: pointer;
}

.bd-article-container .cell summary .admonition-title,
.bd-article-container .cell summary .collapsed,
.bd-article-container .cell summary .expanded,
.cell summary .admonition-title,
.cell summary .collapsed,
.cell summary .expanded {
    color: inherit;
    font-weight: bold;
    font-size: 1em;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

/* ── Cell output ─────────────────────────────────────────────────────────── */
.bd-article-container .cell_output,
.cell_output {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}

/* ── Code cell details element cleanup ───────────────────────────────────── */
/* In pydata-sphinx-theme >= 0.17 the <details> inside .cell no longer carries
   the .admonition class, so the selectors below target .cell details directly. */
.cell details,
.cell details.hide,
.cell details.above-input {
    padding: 0;
    margin: 0;
    border: none;
}

/* Ta reguła jest bardziej specyficzna (".admonition > summary" bije samo
   "summary") — dlatego padding tutaj MUSI być taki sam jak w regule wyżej,
   inaczej to on decyduje o realnej wysokości nagłówka "SageMath (...)". */
.cell details > summary {
    display: flex;
    align-items: center;
    padding: 0.5em 0.75em;
    margin: 0;
    border: none;
    min-height: auto;
}

.cell details > summary > p {
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

/* ── Input cell cleanup ──────────────────────────────────────────────────── */
/* remove-input chowa WYŁĄCZNIE blok z kodem źródłowym (.cell_input) —
   output (wykres, tekst, itd.) pozostaje widoczny, zgodnie z założeniem
   myst-nb (patrz: https://myst-nb.readthedocs.io/en/latest/render/hiding.html).
   Komórki, które mają być całkowicie niewidoczne na stronie (np. komórki
   wyłącznie z `glue(...)`, bez własnego widocznego outputu w tym miejscu)
   NIE powinny używać remove-input — użyj tam tagu remove-cell, patrz niżej. */
div.cell.tag_remove-input .cell_input {
    display: none !important;
}

/* Usuwa nadmiarowy odstęp po znikającym kodzie, bez zerowania wysokości
   całej komórki (to wcześniej zabijało też output). */
div.cell.tag_remove-input {
    margin-top: 0;
}

/* ── Komórki remove-cell (np. z samym glue()) ────────────────────────────── */
/* remove-cell w myst-nb usuwa komórkę z wygenerowanego HTML-a już na etapie
   builda (nie tylko wizualnie przez CSS) — więc zwykle nie zostawia po sobie
   żadnego węzła DOM. Reguła poniżej to tylko zabezpieczenie na wypadek,
   gdyby jakiś kontener-wrapper (np. z marginesem) jednak się przebijał. */
div.cell.tag_remove-cell {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =============================================================================
   SAGECELL WIDGET STYLING
   =============================================================================
   Controls: interactive SageMathCell widgets embedded via {raw} html blocks
   (<div class="sagecell-widget">...</div>) for live, editable Sage
   computations (markup examples: content/-dev/dev-04.md).

   Tokens:
     --color-sagecell            accent/border for the widget frame
     --color-sagecell-output     neutral border/background for the result box
     --color-sagecell-exercise   variant accent for sandbox/exercise widgets
                                  (add class="sagecell-exercise")

   Structural notes (from inspecting the generated DOM):
     - SageCell adds its own classes ("sagecell", "output_<hash>") to the
       same <div>, so every top-level selector below uses the tag+class
       combo `div.sagecell-widget` — this guarantees higher specificity
       than SageCell's own bundled stylesheet, regardless of load order.
     - mjx-container (MathJax v3 / CHTML) draws fraction bars, radicals,
       matrix delimiters etc. using border/background on its OWN internal
       elements. Never reset border/background/font-family with a wildcard
       `*` selector inside a math output — it silently breaks that
       rendering instead of just removing an unwanted frame.
   ============================================================================= */
div.sagecell-widget {
    border-left: .2rem solid var(--color-sagecell);   /* same convention as div.admonition.exercise/solution and div.proof.* — accent stripe, no full border */
    border-color: var(--color-sagecell);
    box-shadow: 0 .2rem .5rem rgba(0,0,0,.05), 0 0 .05rem rgba(0,0,0,.1);
    background: rgba(var(--color-sagecell-rgb), 0.08);
    border-radius: var(--mystnb-source-border-radius, .4em);
    overflow: hidden;              /* clips SageCell's internal markup (editor/button/output) to the rounded shape */
    padding: 0.75rem 1rem;
    margin: 1rem 0;
}

/* Optional label above the widget: <p class="sagecell-label">Piaskownica</p> */
.sagecell-label {
    font-family: var(--font-heading);
    font-weight: bold;
    color: var(--color-sagecell);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}

/* Code editor (CodeMirror) — match the monospace stack used elsewhere */
div.sagecell-widget .CodeMirror {
    font-family: var(--font-mono);
    border-radius: 4px;
    border: 1px solid var(--color-sagecell-output);
}

/* Wspólny reset — box-sizing wymuszony jawnie, bo domyślnie różni się
   między zwykłym <button> a widgetem jQuery UI (content-box vs border-box),
   co powodowało, że identyczny padding dawał różne rozmiary. Zamiast
   bawić się paddingiem/line-height, wymuszamy stałą wysokość (height)
   i pionowe centrowanie tekstu przez flex — to jest odporne na różnice
   w wewnętrznej strukturze obu przycisków. */
div.sagecell-widget .sagecell_evalButton,
div.sagecell-widget .sagecell_permalink > button {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 1.6rem !important;
    padding: 0 0.75rem !important;
    margin: 0 !important;
    border-style: solid !important;
    border-width: 1px !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    font-family: var(--font-body) !important;
    font-size: 0.85rem !important;
    line-height: normal !important;
}

div.sagecell-widget .sagecell_evalButton .ui-button-text {
    padding: 0 !important;
    margin: 0 !important;
    font-size: inherit !important;
    line-height: normal !important;
}
div.sagecell-widget .sagecell_evalButton:hover,
div.sagecell-widget .sagecell_permalink > button:hover {
    filter: brightness(1.5);
}

/* "Share" button — oryginalny tekst "Share" ukryty przez font-size:0,
   ::after wstrzykuje polski napis z WŁASNYM font-size w rem (bo dziedziczenie
   z rodzica o font-size:0 zeruje wszystko liczone w em). */
div.sagecell-widget .sagecell_permalink > button {
    background-color: rgba(var(--color-sagecell-rgb), 0.08) !important;
    border: 1px solid var(--color-sagecell) !important;
    color: var(--color-sagecell) !important;
    font-size: 0 !important;
}
div.sagecell-widget .sagecell_permalink > button::after {
    content: "Udostępnij";
    font-size: 0.85rem !important;
    font-family: var(--font-body);
}
div.sagecell-widget .sagecell_permalink > button:hover {
    border-color: var(--color-sagecell) !important;
    color: var(--color-sagecell) !important;
}

/* Plot images (plot()/show()) inside the output */
div.sagecell-widget .sagecell_output img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
    margin: 0.5rem auto 0;
}

/* Math/text output (show()) — SageCell typesets with its OWN, independent
   MathJax instance (unrelated to core/mathjax/conf.py). Only the theme's
   text color is inherited here; font-family is intentionally left alone
   (see file header note above — overriding it breaks fraction bars,
   radicals, matrix brackets, etc.). */
div.sagecell-widget .sagecell_sessionOutput {
    color: inherit;
}

/* Neutralize border/background on every ancestor wrapper ABOVE the one
   box actually styled below (sagecell_output_elements > sagecell_output >
   sagecell_sessionContainer > sagecell_sessionOutput), in case SageCell's
   bundled stylesheet puts a default border on any of them. */
div.sagecell-widget .sagecell_output_elements,
div.sagecell-widget .sagecell_output,
div.sagecell-widget .sagecell_sessionContainer,
div.sagecell-widget .sagecell_sessionOutput {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* The one, actual result box: the unnamed <div> directly inside
   .sagecell_sessionOutput that wraps <mjx-container>. Selected via
   :not([class]) to skip its siblings .sagecell_poweredBy/.sagecell_sessionFiles. */
div.sagecell-widget .sagecell_sessionOutput > div:not([class]) {
    background-color: color-mix(in srgb, var(--color-sagecell-output) 8%, transparent) !important;
    border: 1px solid var(--color-sagecell-output) !important;
    border-radius: 6px !important;
    overflow: hidden;
    padding: 0.5rem !important;
    color: inherit !important;
}

/* mjx-container itself gets no border/background/focus-ring of its own —
   the box above already provides it. It keeps only what MathJax needs
   functionally (scrolling for formulas wider than the container). The
   native horizontal scrollbar is shown again; spurious scrollbars for
   formulas that actually fit are removed by custom.js, which adds the
   `mjx-fits` class (see "MATH SCROLLBARS" at the end of this file). */
div.sagecell-widget mjx-container[overflow="overflow"] {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    color: inherit !important;
}
div.sagecell-widget mjx-container:focus,
div.sagecell-widget mjx-container:focus-visible,
div.sagecell-widget mjx-container:focus-within {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Footer "Help | Powered by SageMath" — kolorujemy zarówno oba linki
   ("Help", "SageMath"), jak i sam tekst "Powered by" pomiędzy nimi, żeby
   cała linijka była wizualnie spójna zamiast mieszanki domyślnych,
   nieostylowanych kolorów SageCell. */
div.sagecell-widget .sagecell_poweredBy {
    color: var(--color-sagecell-output);
}
div.sagecell-widget .sagecell_poweredBy a {
    color: var(--color-sagecell) !important;
}

/* Exercise variant — add class="sagecell-exercise" alongside
   "sagecell-widget" for a distinct accent color (reader sandbox) */
div.sagecell-widget.sagecell-exercise {
    border-left: .2rem solid var(--color-sagecell-exercise);
    border-color: var(--color-sagecell-exercise);
    box-shadow: 0 .2rem .5rem rgba(0,0,0,.05), 0 0 .05rem rgba(0,0,0,.1);
    background: rgba(var(--color-sagecell-exercise-rgb), 0.08);
}
div.sagecell-widget.sagecell-exercise .sagecell_evalButton {
    background-color: rgba(var(--color-sagecell-exercise-rgb), 0.08) !important;
    border-color: rgba(var(--color-sagecell-exercise-rgb), 1) !important;
    color: rgba(var(--color-sagecell-exercise-rgb), 1) !important;
}
div.sagecell-widget.sagecell-exercise .sagecell_permalink > button {
    background-color: rgba(var(--color-sagecell-exercise-rgb), 0.08) !important;
    border: 1px solid var(--color-sagecell-exercise) !important;
    color: var(--color-sagecell-exercise) !important;
}
/* =============================================================================
   MATH IN ADMONITIONS
   =============================================================================
   Controls: MathJax formulas inside note, tip, warning, etc. admonitions
   Properties:
     - background — scrollbar track background (default: transparent)
     - border-radius — scrollbar thumb rounding (default: 3px)
     - height — WebKit scrollbar height (default: 5px)
     - margin-top/bottom — spacing around formulas (default: 0)
     - max-width — formula width constraint (default: 100%)
     - overflow-x — horizontal scrolling behavior (default: auto)
     - overflow-y — vertical scrolling behavior (default: hidden)
     - padding-top/bottom — internal spacing (default: 0)
     - scrollbar-color — scrollbar colors (default: rgba(0, 0, 0, 0.2) transparent)
     - scrollbar-width — Firefox scrollbar width (default: thin)
 */

/* ── Width and scrolling control ─────────────────────────────────────────── */
/* The scroller is the display-math mjx-container (the theme already sets
   `div.math mjx-container { overflow: auto hidden }`); div.math just clips. */
div.admonition .math,
div.admonition mjx-container {
    max-width: 100%;
}

div.admonition div.math {
    overflow: hidden;
}

div.admonition mjx-container[display="true"] {
    overflow-x: auto;
    overflow-y: hidden;
}

/* ── Reset all vertical margins ───────────────────────────────────────────── */
div.admonition p,
div.admonition .math,
div.admonition mjx-container,
div.admonition mjx-container[display="true"],
div.admonition mjx-math {
    margin-top: 0.1em;
    margin-bottom: 0.1em;
    padding-top: 0;
    padding-bottom: 0;
}

/* ── Scrollbar styling ───────────────────────────────────────────────────── */
div.admonition mjx-container[display="true"] {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

div.admonition mjx-container[display="true"]::-webkit-scrollbar {
    height: 5px;
}

div.admonition mjx-container[display="true"]::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

div.admonition mjx-container[display="true"]::-webkit-scrollbar-track {
    background: transparent;
}

/* =============================================================================
   MATH SCROLLBARS
   =============================================================================
   Display math scrolls horizontally when it is wider than its container. A
   scrollbar sometimes showed up although the formula fit: the content was only
   a fraction of a pixel wider than the box (sub-pixel rounding of em-based
   widths, font swap after load). CSS cannot tell "1px too wide" from "really
   too wide", so custom.js measures scrollWidth vs. clientWidth and adds
   `mjx-fits` when the overflow is negligible (<= 2px) — then scrolling is off
   and no scrollbar is drawn. Formulas that really overflow keep their scrollbar. */
mjx-container.mjx-fits[display="true"] {
    overflow-x: hidden !important;
}