/*
 * ml4science course sheet.
 *
 * Every ml4science deck was authored against the older template: Reveal 4.5,
 * the night theme, titles left to slide-base.css (which paints them blue),
 * nothing pinned, no DM Sans. Rather than hand-edit fifteen style blocks,
 * the intro2ml canonical block (data/slides/intro_ml_04n.html, the style
 * contract of 2026-08-23/24) is applied to the whole course from here.
 *
 * Loaded by the injector after slide-base.css for any deck in this course,
 * so at equal specificity these rules win. Title selectors carry the
 * .reveal .slides prefix for the same reason the contract demands it.
 *
 * Pinning titles also needs center:false, which is Reveal config rather than
 * CSS; static/js/course-ml4science.js sets it at runtime.
 */

        /* ===== Shared course tokens (One Dark) ===== */
        :root {
            --bg-deep: #0d1017;
            --accent-blue: #61afef;
            --accent-green: #98c379;
            --accent-yellow: #e5c07b;
            --accent-red: #e06c75;
            --accent-purple: #c678dd;
            --accent-cyan: #56b6c2;
            --accent-orange: #d19a66;
            --ink-muted: #dbe4f5;
        }
        .reveal-viewport { background: var(--bg-deep); }
        .reveal { font-size: 30px; font-family: 'DM Sans', -apple-system, sans-serif; }
        /* Titles: yellow, sans-serif; pinned to the top (style contract 2026-08-24).
           .slides in the selector outranks the app's slide-base.css. */
        .reveal .slides h1, .reveal .slides h2, .reveal .slides h3 {
            font-family: 'DM Sans', -apple-system, sans-serif; text-transform: none;
            font-weight: 700; letter-spacing: 0.01em; color: var(--accent-yellow);
        }
        .reveal .slides h1 { font-size: 1.7em; }
        .reveal .slides h2 { font-size: 1.25em; margin-bottom: 0.6em; }
        .reveal .slides h3 { font-size: 1.0em; }
        .reveal .slides section { text-align: left; padding-top: 44px; }
        .reveal .slides section.centered {
            text-align: center; height: 100%; padding-top: 0;
            display: flex; flex-direction: column; justify-content: center;
        }
        .reveal .slides section.quiz-engine-slide { height: 100%; padding-top: 0; }
        .reveal .slides a { color: var(--accent-blue); }
        /* Interactive affordances wear orange (Joseph, note #39) */
        .ix { color: var(--accent-orange); font-weight: 600; }
        /* Notebook-style code walk: code left, live outputs right (note #43) */
        .cw-split { display: flex; gap: 20px; align-items: stretch; }
        .cw-code { flex: 0 0 56%; }
        .cw-out-panel { flex: 1; min-width: 0; overflow: hidden;
                        border: 1px solid rgba(219,228,245,0.18); border-radius: 12px;
                        padding: 14px 16px; background: rgba(255,255,255,0.02);
                        display: flex; flex-direction: column; justify-content: center; }
        .cw-print { font-family: 'JetBrains Mono', monospace; font-size: 0.55em;
                    color: #e6ebf5; line-height: 1.7; white-space: pre; }
        .cw-print .cw-lbl { color: var(--accent-yellow); }
        .cw-out .katex-display { margin: 0.4em 0; }
        .flow-node.solid-in  { background: var(--accent-orange); border: none; color: #0d1017; }
        .flow-node.solid-out { background: var(--accent-green); border: none; color: #0d1017; }

        .small-text { font-size: 21.6px; }
        .tiny-text { font-size: 17.4px; }
        .muted { color: #dbe4f5; }
        .keyword { color: var(--accent-blue); font-weight: 600; }

        /* ===== Template Book system: B boxes, K1/K2 key results, C cards, D aside ===== */
        .box-b { position: relative; border: 1px solid rgba(97,175,239,0.32); border-radius: 10px;
                 padding: 0.72em 0.9em 0.52em; margin: 0.85em 0 0.4em; background: transparent; }
        .box-b > .tab { position: absolute; top: -0.7em; left: 16px; background: var(--bg-deep);
                 padding: 0 9px; font-family: 'JetBrains Mono', monospace; font-size: 0.5em;
                 font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase;
                 color: var(--accent-blue); white-space: nowrap; }
        .box-b.green  { border-color: rgba(152,195,121,0.32); } .box-b.green > .tab  { color: var(--accent-green); }
        .box-b.red    { border-color: rgba(224,108,117,0.32); } .box-b.red > .tab    { color: var(--accent-red); }
        .box-b.yellow { border-color: rgba(229,192,123,0.32); } .box-b.yellow > .tab { color: var(--accent-yellow); }

        .key-k1 { position: relative; border: 1px solid rgba(152,195,121,0.45); border-radius: 12px;
                  padding: 0.8em 1.1em 0.6em; margin: 1em auto 0.4em; text-align: center;
                  box-shadow: 0 0 22px rgba(152,195,121,0.08) inset, 0 0 14px rgba(152,195,121,0.06); }
        .key-k1 > .tab { position: absolute; top: -0.72em; left: 50%; transform: translateX(-50%);
                  background: var(--bg-deep); padding: 0 11px; font-family: 'JetBrains Mono', monospace;
                  font-size: 0.5em; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase;
                  color: var(--accent-green); white-space: nowrap; }
        .key-k2 { background: #6e2a33; border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
                  padding: 0.55em 1em; text-align: center; margin: 0.55em auto;
                  box-shadow: 0 6px 22px rgba(0,0,0,0.5); }
        .key-k2.blue { background: #274768; }

        .box-c { border-radius: 10px; overflow: hidden; margin: 0.3em 0;
                 background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); }
        .box-c > .hdr { background: rgba(97,175,239,0.13); color: #cfdcf2; font-weight: 600;
                 font-size: 0.62em; letter-spacing: 1.2px; text-transform: uppercase; padding: 0.42em 1em; }
        .box-c > .bod { padding: 0.5em 0.85em 0.6em; font-size: 21.6px; }
        .box-c.green  > .hdr { background: rgba(152,195,121,0.13); color: #d3e4c4; }
        .box-c.red    > .hdr { background: rgba(224,108,117,0.13); color: #f0cdd1; }
        .box-c.yellow > .hdr { background: rgba(229,192,123,0.13); color: #efe0c2; }
        .box-c ul { display: block; margin: 0 0 0 1em; }

        .eq-box {
            border: 1px solid rgba(219,228,245,0.18);
            border-radius: 12px; padding: 0.45em 0.8em; text-align: center; margin: 0.5em auto;
        }
        .two-column { display: flex; gap: 26px; align-items: flex-start; }
        .two-column > div { flex: 1; min-width: 0; }

        .viz-wrap { text-align: center; }
        .viz-wrap svg { background: rgba(255,255,255,0.03); border-radius: 12px; }
        .axis text { fill: #dbe4f5; font-size: 15px; }
        .axis path, .axis line { stroke: #4a5261; }
        .axis-label { fill: #e6ebf5; font-size: 17px; font-weight: 600; }

        .viz-controls { display: flex; gap: 22px; justify-content: center; align-items: center;
                    margin-top: 8px; font-size: 0.55em; color: #e6ebf5; flex-wrap: wrap; }
        .viz-controls label { display: flex; align-items: center; gap: 8px; }
        .viz-controls input[type=range] { width: 150px; accent-color: var(--accent-blue); }
        .viz-controls .val { font-family: 'JetBrains Mono', monospace; color: var(--accent-yellow);
                         min-width: 3.2em; display: inline-block; }
        .btn {
            background: rgba(97,175,239,0.15); color: #dbe4f5; border: 1px solid rgba(97,175,239,0.4);
            border-radius: 8px; padding: 4px 14px; font-size: 1em; cursor: pointer;
        }
        .btn:hover { background: rgba(97,175,239,0.3); }
        .btn.active { background: rgba(152,195,121,0.25); border-color: var(--accent-green); }

        .data-table { border-collapse: collapse; margin: 0.4em auto; font-size: 0.62em; }
        .data-table th { color: var(--accent-yellow); border-bottom: 2px solid #4a5261; padding: 6px 22px; }
        .data-table td { border-bottom: 1px solid #333a46; padding: 6px 22px; text-align: center;
                         font-family: 'JetBrains Mono', monospace; }
        .data-table .hl { color: var(--accent-cyan); }

        .box-title { display: block; font-weight: 650; margin-bottom: 0.3em; color: #e8edf7; }
        .highlight-box ul, .principle-box ul, .warning-box ul, .success-box ul {
            display: block; margin: 0.2em 0 0.1em 1.1em; }
        .aside-rule { border-left: 2px solid var(--ink-faint, #4a5261); padding-left: 0.8em;
                      color: var(--ink-muted); font-style: italic; margin: 0.5em 0; }
        .flow-diagram { display: flex; justify-content: center; align-items: center;
                        gap: 20px; margin: 0.5em 0; }
        .flow-node { border-radius: 12px; padding: 0.25em 0.8em; font-size: 1.1em; font-weight: 600; }
        .flow-node.in  { background: rgba(97,175,239,0.22); border: 2px solid var(--accent-blue); }
        .flow-node.out { background: rgba(152,195,121,0.22); border: 2px solid var(--accent-green); }
        .flow-arrow { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
        .flow-arrow .fn { color: var(--accent-yellow); font-size: 0.75em; }
        .reveal pre { width: 88%; margin: 0.5em auto; font-size: 0.76em; line-height: 1.42;
                      font-family: 'JetBrains Mono', Menlo, monospace;
                      box-shadow: 0 8px 26px rgba(0,0,0,0.45); }
        .reveal pre code { border-radius: 10px; padding: 18px 22px; max-height: 560px;
                           font-family: 'JetBrains Mono', Menlo, monospace; }
        .footnote { position: absolute; bottom: 0.4em; right: 0.8em; font-size: 0.45em; color: #dbe4f5; }
    

/* ---- overrides for decks still on the night theme ---- */

/* Grey-on-black is banned by the style contract. Decks reach for it through
   a .muted class and through inline hexes; the class is fixed here, the
   inline hexes are content and are listed by scripts/audit_style.py. */
.reveal .slides .muted,
.reveal .slides .text-muted,
.reveal .slides .small,
.reveal .slides small { color: #dbe4f5 !important; }

/* night.css sets body/section text in its own serif-ish stack and centres
   sections; the contract is DM Sans, left-aligned, title pinned at 44px. */
.reveal .slides section { text-align: left; padding-top: 44px; }
.reveal .slides section.centered { text-align: center; padding-top: 0; }
.reveal, .reveal .slides section { font-family: 'DM Sans', -apple-system, sans-serif; }
.reveal .slides section h1,
.reveal .slides section h2,
.reveal .slides section h3 { text-transform: none; }

/* The old decks' boxes were written against night.css colours; keep their
   text bright. */
.reveal .slides .highlight-box,
.reveal .slides .warning-box,
.reveal .slides .success-box,
.reveal .slides .principle-box,
.reveal .slides blockquote { color: #e6ebf5; }
.reveal .slides blockquote footer { color: #dbe4f5; }

/* =====================================================================
   v2 (2026-09-07): measured against scripts/audit_style.py, see
   docs/ML4SCIENCE_STATUS.md for the before/after numbers.
   ===================================================================== */

/* Body text is 30px course-wide. Several decks scaled every section to
   0.85em, and the vertical stacks compounded it to 0.7225em (21.7px), which
   is why those decks looked smaller on the projector than the rest. This
   loads after the deck sheet, same specificity, so it wins. */
.reveal .slides section { font-size: 1em; }

/* Code at the canonical size (17.2px, as in intro_ml_04n), in a box that
   scrolls rather than pushing the slide past its bottom. The decks used
   `pre code { font-size: .. !important }`, hence the !important here. */
.reveal .slides pre { font-size: 0.82em; }
.reveal .slides pre code {
    font-size: 0.7em !important;
    display: block;
    max-height: 560px;
    overflow: auto;
}

/* A plot SVG that is the only thing in its div sits on the text baseline and
   adds ~9px of descender space under itself. That was the entire "9px
   overflow" on nine widget slides in 09_svd_pca and 10_dmd. */
.reveal .slides div > svg:only-child { display: block; }

/* Secondary text students still read: author line, captions, references,
   attributions. No grey on the dark ground, nothing under the floor. */
.reveal .slides .author-info,
.reveal .slides .figure-caption,
.reveal .slides .ref-link,
.reveal .slides .attribution,
.reveal .slides blockquote .attribution,
.reveal .slides blockquote footer,
.reveal .slides .caption,
.reveal .slides .fig-caption {
    color: #dbe4f5;
    font-size: max(17.4px, 0.6em);
}

/* A lone code block: the <pre> box must not be shorter than the code it holds
   (slide-base caps pre at 420px with overflow visible, so the shadow ended
   174px above the code), and 460px is what fits under a pinned title with
   one line of introduction. Longer code scrolls; the audit lists those slides. */
.reveal .slides pre { max-height: none; }
.reveal .slides pre code { max-height: 460px; }