/* User Provided Stylesheet */

/* autogenerated, DO NOT EDIT ME ! - edit style_jb2.css or style_local.css instead */
/*
 * for jupyter-book 2 aka mystmd
 * with myst.yml:  template: book-theme
 * trying to improve the rendering of jupyter notebooks
 * particularly wrt spacing around lists and paragraphs
 * as well as other miscellanous tweaks
 */

/* ---------- the left hand side toc */

.primary-scrollbar {

    div.w-full {

        &[data-state='open'] {
            border: 1px solid var(--jp-border-color0);
            border-radius: 8px;
            padding-top: 0px;
        }

        div.block {
            &::before {
                content: '≡ ';
            }
        }
    }

    a.p-2 {
        padding: 0.08em 1em;

        &.active {
            &::before {
                content: '⌘ ';
            }
        }
    }
}

/* ---------- space around lists */

/* a paragraph that is just above a list should not have a bottom margin
 * thanks SO
 * https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector
 */
main {
    p:has(+ :is(ol, ul)) {
        margin-bottom: 0px !important;
    }

    p+ :is(ol, ul) {
        margin-top: 0px !important;
    }

    li>ul {
        margin-top: 0px !important;
    }
}

.article :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~=not-prose], [class~=not-prose] *)) {
    margin-bottom: 0.25em;
}

/* ---------- code */

:root {
    --myst-code-border-radius: 0.5rem;
    --myst-code-border-width: 0.8px;
}

/* cell inputs */
html.light {
    --myst-input-background-color: rgb(243, 244, 245);
    --myst-input-border-color: rgb(209, 213, 218);
    --myst-input-left-color: rgb(0, 128, 0);
    --myst-input-left-width: 4px;
}

html.dark {
    --myst-input-background-color: rgb(41, 49, 61);
    --myst-input-border-color: rgb(206, 214, 221);
    --myst-input-left-color: rgb(0, 128, 0);
    --myst-input-left-width: 4px;
}


.relative.group\/block>.relative.group:has(>pre) {
    border-radius: var(--myst-code-border-radius);
    border-width: var(--myst-code-border-width);
    border-color: var(--myst-input-border-color);
    background-color: var(--myst-input-background-color);
    border-left-width: var(--myst-input-left-width);
    border-left-color: var(--myst-input-left-color);
}


/* cell outputs */
html.light {
    --myst-output-background-color: rgb(248, 255, 248);
    --myst-output-border-color: blue;
    --myst-output-empty-border-color: red;
}

html.dark {
    --myst-output-background-color: rgb(6, 75, 6);
    --myst-output-border-color: rgb(35, 182, 211);
    --myst-output-empty-border-color: rgb(128, 0, 0);
}

html article main .relative.group[data-mdast-node-id] {
    &:empty {
        &::before {
            content: ' ∅ no output ∅ ';
        }
        font-size: xx-small;
        padding: 0px 1em;

        border-color: var(--myst-output-empty-border-color);
        margin-bottom: 1rem;
    }

    border-radius: var(--myst-code-border-radius);
    margin-top: 0px;
    padding: 0.25em 1em;
    border-width: var(--myst-code-border-width);
    border-color: var(--myst-output-border-color);
    background-color: var(--myst-output-background-color);

    &>div {
        border: 0px solid #00000000 !important;
        background-color: #00000000 !important;

        &>code {
            border: 0px solid #00000000 !important;
        }
    }
}
html article main .relative.group:has(+[data-mdast-node-id]) {
    margin-bottom: 0.7em;
}

/* code blocks */
html.light {
    --myst-block-background-color: rgb(243, 244, 245);
    --myst-block-border-color: rgb(209, 213, 218);
    --myst-block-left-color: rgb(0, 0, 128);
    --myst-block-left-width: 2px;
}

html.dark {
    --myst-block-background-color: rgb(41, 49, 61);
    --myst-block-border-color: rgb(72, 86, 107);
    --myst-block-left-color: rgb(0, 0, 128);
    --myst-block-left-width: 2px;
}

html body article main div.group.relative:has(>pre>code) {
    padding: .1rem .25rem !important;
    border-radius: var(--myst-code-border-radius);
    background-color: var(--myst-block-background-color);
    border-width: var(--myst-code-border-width);
    border-color: var(--myst-block-border-color);
    border-left-width: var(--myst-block-left-width);
    border-left-color: var(--myst-block-left-color);

    &>pre.hljs.block {
        background-color: #00000000 !important;
    }
}

/* inline code : use same style as blocks */
p>code {
    background-color: var(--myst-block-background-color);
    border-width: var(--myst-code-border-width);
    border-color: var(--myst-block-border-color);
    padding: 0.1rem 0.20rem;
    margin-left: 0.20rem;
    margin-right: 0.20rem;
    border-radius: 3px;
}

/* ---------- use page width more effectively */
@media (min-width: 1536px) {
    html {
        .article-grid, .xl\:article-grid {
            grid-template-columns:
                /* [screen-start] .5rem [screen-inset-start] 1fr [page-start] 3rem [page-inset-start] minmax(4rem, 9rem) [body-outset-start] 3rem [body-start gutter-left-start] 1rem [body-inset-start] minmax(8ch, 10ch) [middle-start] minmax(8ch, 10ch) [gutter-left-end] minmax(8ch, 10ch) minmax(8ch, 10ch) [gutter-right-start] minmax(8ch, 10ch) [middle-end] minmax(8ch, 10ch) [body-inset-end] 1rem [body-end gutter-right-end] 3rem [body-outset-end] minmax(5rem, 13rem) [page-inset-end] 3rem [page-end] 1fr [screen-inset-end] .5rem [screen-end]; */
                [screen-start] .5rem
                [screen-inset-start] 1fr
                [page-start] 3rem
                [page-inset-start] minmax(4rem, 9rem)
                [body-outset-start] 3rem
                [body-start gutter-left-start] 1rem
                [body-inset-start] minmax(8ch, 10ch)
                [middle-start] minmax(8ch, 10ch)
                [gutter-left-end] minmax(8ch, 10ch)
                /* this is the one we increase from minmax(8ch, 10ch)*/
                10fr
                [gutter-right-start] minmax(8ch, 10ch)
                [middle-end] minmax(8ch, 10ch)
                [body-inset-end] 1rem
                [body-end gutter-right-end] 3rem
                [body-outset-end] minmax(5rem, 13rem)
                [page-inset-end] 3rem
                [page-end] 1fr
                [screen-inset-end] .5rem
                [screen-end] !important;
        }
    }
}

.full-width {
    grid-column: body / page;
}

/* here's the settings for the medium size screens
 * it's hard to do much better,
 * ideally the right had side toc could take a little less space
*/
/* @media (min-width: 1024px) and (max-width: 1535px) {
    html {
        .article-grid, .xl\:article-grid {
            grid-template-columns:
            [screen-start] .25rem [screen-inset-start page-start] 1rem [page-inset-start body-outset-start] 1fr [body-start gutter-left-start] 1rem [body-inset-start] minmax(8ch,10ch) [middle-start] minmax(8ch,10ch) [gutter-left-end] minmax(8ch,10ch) minmax(8ch,10ch) [gutter-right-start] minmax(8ch,10ch) [middle-end] minmax(8ch,10ch) [body-inset-end] 1rem [body-end gutter-right-end] 3rem [body-outset-end] minmax(5rem,13rem) [page-inset-end] 3rem [page-end] 1fr [screen-inset-end] .25rem [screen-end]
        }
    }
} */


/* ---------- tables */
html.light {
    --myst-table-background-color-header: #f8f8f8;
    --myst-table-bottom-color-header: rgb(90, 175, 211);
    --myst-table-background-color-even: #fbfbfb;
    --myst-table-background-color-odd: #fdfdfd;
}

html.dark {
    --myst-table-background-color-header: #080808;
    --myst-table-bottom-color-header: rgb(11, 128, 137);
    --myst-table-background-color-even: #020202;
    --myst-table-background-color-odd: #040404;
}

article main table {
    thead, tfoot {
        tr {
            background-color: var(--myst-table-background-color-header);
        }
    }
    tbody {
        th {
            background-color: var(--myst-table-background-color-header);
            padding:0.65rem;
            font-size: larger;
            border-bottom-color: var(--myst-table-bottom-color-header);
            border-bottom-width: 2px;
        }
        tr:nth-child(even) {
            background-color: var(--myst-table-background-color-even);
        }

        tr:nth-child(odd) {
            background-color: var(--myst-table-background-color-odd)
        }
    }
}

/* space before admonitions */
/* :is(.bd-container, .myst) div.admonition>.admonition-title+* {
    margin-top: 0px !important;
}
 */

/* standard admonition classes */
.admonition-smaller {
    font-size: smaller;
    line-height: 1.2;
}

.admonition-small {
    font-size: small;
    line-height: 1.2;
}

.admonition-x-small {
    font-size: x-small;
    line-height: 1.2;
}

/* slight gradient for corriges */
.corrige {
    background-image: radial-gradient(circle at top left, #d1effa, #e2f9cd);
}

html[data-theme='dark'] .corrige {
    background-image: radial-gradient(circle at top left, #0e3852, #0c5517);
}

/* our exercises often do
1. the thing to do

```{code-cell} ipython3
# your code
```

it would be better if we could indent the code cell but if we do, we lose the overall cell structure
as the code cell is then part of the list item, in markdown, and is no longer deemed a code cell by jupyter
*/

*+div.group\/block>div.myst-code {
    margin-top: 0.3em;
}

*:has(+div.group\/block>div.myst-code) {
    margin-bottom: 0.3em;
}
/* light mode value */
:root {
    /* --my-pink: #fcedf1;
    --my-dark: #2d2d2d;
    --my-blue: #e2edf8; */
    --exercise-color: #e1f8ef;
}

/* dark mode value */
html.dark {
    /* --my-pink: #9c476b;
    --my-dark: #474545;
    --my-blue: #4a5da7; */
    --exercise-color: #4a7c6b;
}

/*
 * treat all {code-cell} with a dark background
 * no longer require an explicit class:dark-background
*/
.myst-jp-nb-block > div[data-name="outputs-container"], .jupyter-output, .jupyter-error {
    --ansi-bright-black:          rgb(40 40 40);
    --ansi-black:                 rgb(40 40 40);
    --ansi-black-fg:              rgb(40 40 40);
    --ansi-bright-red:            rgb(255 100 100);
    --ansi-red:                   rgb(255 100 100);
    --ansi-red-fg:                rgb(255 100 100);
    --ansi-bright-green:          rgb(120 220 120);
    --ansi-green:                 rgb(120 220 120);
    --ansi-green-fg:              rgb(120 220 120);
    --ansi-bright-yellow:         rgb(230 200 80);
    --ansi-yellow:                rgb(230 200 80);
    --ansi-yellow-fg:             rgb(230 200 80);
    --ansi-bright-blue:           rgb(120 160 255);
    --ansi-blue:                  rgb(120 160 255);
    --ansi-blue-fg:               rgb(120 160 255);
    --ansi-bright-magenta:        rgb(220 140 220);
    --ansi-magenta:               rgb(220 140 220);
    --ansi-magenta-fg:            rgb(220 140 220);
    --ansi-bright-cyan:           rgb(120 220 220);
    --ansi-cyan:                  rgb(120 220 220);
    --ansi-cyan-fg:               rgb(120 220 220);
    --ansi-bright-white:          rgb(230 230 230);
    --ansi-white:                 rgb(230 230 230);
    --ansi-white-fg:              rgb(230 230 230);
    /* --ansi-black:                 rgb(110 110 110);
    --ansi-red:                   rgb(255 130 130);
    --ansi-green:                 rgb(150 240 150);
    --ansi-yellow:                rgb(255 230 100);
    --ansi-blue:                  rgb(140 180 255);
    --ansi-magenta:               rgb(240 160 240);
    --ansi-cyan:                  rgb(150 240 240);
    --ansi-white:                 rgb(255 255 255); */

    background-color: var(--ansi-bright-black);
    border-radius: 6px;

    & > div[data-name^="safe-output-"] {
        color: white;
    }
}

/* handling bash_kernel's output style, i.e. one stream chunk per line */

/* applies to the div whose immediate left sibling is another such div */
div[data-name^="safe-output-"] + div[data-name^="safe-output-"] {
    &>div>pre {
        padding-top: 0px;
    }
}

/* applies to the div whose immediate right sibling is another such div */
div[data-name^="safe-output-"]:has(+ div[data-name^="safe-output-"]) {
    &>div>pre {
        padding-bottom: 0px;
    }
}

div[data-name^="safe-output-"]>div>pre:has(code:empty) {
    display: none;
}

/* div[data-name="outputs-container"]:has(div[data-name="safe-output-text"]) { */
div[data-name="outputs-container"]:has(div[data-name^="safe-output-"]) {
    padding: 8px;
    border-radius: 6px;
    background-color: var(--ansi-bright-black);
}

.myst-exercise {
    border-radius: 6px;

    .myst-exercise-header {
        background-color: var(--exercise-color);
    }
}

/* draft */

body::before {
    content: "Draft";
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
    font: 700 20vw/1 'Comic Sans MS', cursive;
    color: currentColor;
    opacity: 0.06;
    pointer-events: none;
    z-index: -1;
    white-space: nowrap;
  /* no z-index — let it sit in normal flow above the body background */
}
html.dark body::before {
    color: #c0c0c0;
    opacity: 0.2;   /* white on dark needs more to be perceived equally */
}

/* ============================================================
 * Multi-cell sequence styling
 *
 * Per-cell role classes:
 *   .seq-start   first cell of a group
 *   .seq-cont    middle cell(s) of a group
 *   .seq-stop    last cell of a group
 *
 * Per-cell visual modifiers (composable):
 *   .badges   small label in the top-right of each cell
 *             (start / cont / stop with upstream PDF colors)
 *   .border   continuous left border bracketing the group
 *
 * The two modifiers can be combined (.badges .border) on the
 * same cell to get both effects at once.
 * ============================================================ */

/* --- Common positioning for every cell ----------------------- */
/*  every code-cell becomes a positioning context for any badge */
.myst-jp-nb-block {
    position: relative;
}

/* --- Shared badge style -------------------------------------- */
.myst-jp-nb-block.badges::before,
.myst-jp-nb-block.dark-background::after,
.myst-jp-nb-block.disabled::after {
    position: absolute;
    top: -8px;
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    padding: 2px 7px;
    border-radius: 3px;
    letter-spacing: 0.5px;
    z-index: 5;
    pointer-events: none;
}

/* --- Language / disabled badge (right edge, via ::after) ----- */
.myst-jp-nb-block.dark-background::after,
.myst-jp-nb-block.disabled::after {
    right: 10px;
}
/* every bash cell carries the "bash" tag — unless it is .disabled */
.myst-jp-nb-block.dark-background:not(.disabled)::after {
    content: "bash";
    background: #000;
    color: #ddd;
}
/* a .disabled cell shows the "disabled" tag instead */
.myst-jp-nb-block.disabled::after {
    content: "disabled";
    background: #999;
    color: #222;
}

/* --- Sequence badge (left of language tag, via ::before) ----- */
.myst-jp-nb-block.badges::before {
    right: 60px;
}
.myst-jp-nb-block.seq-start.badges::before {
    content: "start";
    background: #125c09;
    color: #dbbd72;
}
.myst-jp-nb-block.seq-cont.badges::before {
    content: "cont";
    background: #56a0d3;
    color: #000;
}
.myst-jp-nb-block.seq-stop.badges::before {
    content: "stop";
    background: #cb4338;
    color: #dbbd72;
}

/* --- Border variant -------------------------------------------- */
.myst-jp-nb-block.seq-start.border,
.myst-jp-nb-block.seq-cont.border,
.myst-jp-nb-block.seq-stop.border {
    border-left: 6px solid #147817;
    padding-left: 10px;
    margin-left: 0;
}
.myst-jp-nb-block.seq-start.border {
    border-top-left-radius: 10px;
    padding-top: 4px;
}
.myst-jp-nb-block.seq-stop.border {
    border-bottom-left-radius: 10px;
    padding-bottom: 4px;
}

/* ============================================================
 * Course-readiness banners
 *
 * Applied on admonitions in course_readiness.md via a :class:
 * option, e.g.:
 *
 *   :::{danger} Draft
 *   :class: readiness-draft
 *
 * MyST resolves each admonition kind's colors (border / background /
 * title text) from 3 CSS custom properties that cascade down from an
 * ancestor: --myst-color-{group}, --myst-color-{group}-bg and
 * --myst-color-{group}-text, where {group} is "danger" for the
 * {danger} kind, "warning" for {warning}, "info" for {note}. Scoping
 * an override of those variables to our own marker class recolors
 * only that admonition, leaving every other {danger}/{warning}/{note}
 * on the site untouched.
 * ============================================================ */

.myst-admonition.readiness-draft {
    --myst-color-danger: #dc2626;
    --myst-color-danger-bg: #fecaca;
    --myst-color-danger-text: #7f1d1d;
}
.myst-admonition.readiness-inprogress {
    --myst-color-danger: #ea580c;
    --myst-color-danger-bg: #fed7aa;
    --myst-color-danger-text: #7c2d12;
}
.myst-admonition.readiness-todo {
    --myst-color-danger: #ca8a04;
    --myst-color-danger-bg: #fde047;
    --myst-color-danger-text: #422006;
}
.myst-admonition.readiness-toreview {
    --myst-color-warning: #4d7c0f;
    --myst-color-warning-bg: #bef264;
    --myst-color-warning-text: #365314;
}
.myst-admonition.readiness-finalized {
    --myst-color-info: #15803d;
    --myst-color-info-bg: #bbf7d0;
    --myst-color-info-text: #14532d;
}

html.dark .myst-admonition.readiness-draft {
    --myst-color-danger: #ef4444;
    --myst-color-danger-bg: #450a0a;
    --myst-color-danger-text: #f87171;
}
html.dark .myst-admonition.readiness-inprogress {
    --myst-color-danger: #fb923c;
    --myst-color-danger-bg: #431407;
    --myst-color-danger-text: #fdba74;
}
html.dark .myst-admonition.readiness-todo {
    --myst-color-danger: #facc15;
    --myst-color-danger-bg: #422006;
    --myst-color-danger-text: #fde047;
}
html.dark .myst-admonition.readiness-toreview {
    --myst-color-warning: #a3e635;
    --myst-color-warning-bg: #1a2e05;
    --myst-color-warning-text: #bef264;
}
html.dark .myst-admonition.readiness-finalized {
    --myst-color-info: #4ade80;
    --myst-color-info-bg: #052e16;
    --myst-color-info-text: #86efac;
}

/* ============================================================
 * Sidebar TOC: less wasted space, more chapters visible
 *
 * The theme renders the sidebar with Tailwind utility classes
 * baked into the HTML (no semantic "sidebar.css" to edit), so we
 * override those utility classes by targeting the theme's own
 * semantic wrapper classes instead — same element, same
 * specificity (single class selector), our rule wins because
 * style_local.css is concatenated after the theme's CSS.
 *
 * Three independent, composable tweaks:
 * 1. Widen the sidebar text column (was capped at 350px at every
 *    viewport width, even on wide desktop windows with visible
 *    unused space to its right) so long titles wrap less.
 * 2. Tighten each entry's vertical padding/margin (pure per-item
 *    overhead, on top of however many lines its title wraps to).
 * 3. Slightly smaller sidebar font (theme's own "text-sm" scale)
 *    - shortens both wrapped-line count and per-line height.
 * ============================================================ */

 /*
 override page layout from style_jb2.css for more space in the toc
*/
@media (min-width: 1280px) {
    /* make it more specific */
    html body {
        .article-grid, .xl\:article-grid {
            grid-template-columns:
                /* [screen-start] .5rem [screen-inset-start] 1fr [page-start] 3rem [page-inset-start] minmax(4rem, 9rem) [body-outset-start] 3rem [body-start gutter-left-start] 1rem [body-inset-start] minmax(8ch, 10ch) [middle-start] minmax(8ch, 10ch) [gutter-left-end] minmax(8ch, 10ch) minmax(8ch, 10ch) [gutter-right-start] minmax(8ch, 10ch) [middle-end] minmax(8ch, 10ch) [body-inset-end] 1rem [body-end gutter-right-end] 3rem [body-outset-end] minmax(5rem, 13rem) [page-inset-end] 3rem [page-end] 1fr [screen-inset-end] .5rem [screen-end]; */
                [screen-start] .5rem
                [screen-inset-start] 1fr
                [page-start] 3rem
                /* [page-inset-start] minmax(4rem, 9rem) */
                [page-inset-start] 12rem
                [body-outset-start] 3rem
                [body-start gutter-left-start] 1rem
                [body-inset-start] minmax(8ch, 10ch)
                [middle-start] minmax(8ch, 10ch)
                [gutter-left-end] minmax(8ch, 10ch)
                /* this is the one we increase from minmax(8ch, 10ch)*/
                10fr
                [gutter-right-start] minmax(8ch, 10ch)
                [middle-end] minmax(8ch, 10ch)
                [body-inset-end] 1rem
                [body-end gutter-right-end] 3rem
                [body-outset-end] minmax(5rem, 13rem)
                [page-inset-end] 3rem
                [page-end] 1fr
                [screen-inset-end] .5rem
                [screen-end] !important;
        }
    }
}


/* more compact lhs toc */

.myst-primary-sidebar-toc,
.myst-primary-sidebar-footer,
.myst-primary-sidebar-topnav {
    max-width: 480px;
}

.myst-toc {
    font-size: 1.05rem;
}

.myst-toc-item {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    margin-top: 0.15rem;
    margin-bottom: 0.15rem;
}

div[data-state="closed"] > .myst-toc-item {
    padding-top: 0px;
    padding-bottom: 0px;
   > a[title] {
    padding-top: 0px;
    padding-bottom: 0px;
   }
}