/* Overrides for the theme, if needed */

/* Long exercise code templates: cap height and allow vertical scroll so the
   reading flow is not broken by a multi-screen code dump. Apply via the MyST
   :class: attribute on {code-block}. */
.scrollable-code {
    max-height: 360px;
    overflow-y: auto;
}
.scrollable-code pre {
    margin: 0;
}

/* Step slideshow: radio-button-driven, JS-free stepper for figure sequences
   that the parent course originally showed as Beamer \only<N> overlays.
   Markup pattern (embed as raw HTML in a markdown cell):

     <div class="step-slideshow">
       <input type="radio" name="ssX" id="ssX-1" checked />
       <input type="radio" name="ssX" id="ssX-2" />
       <div class="frames">
         <figure class="frame-1"><img src="..."><figcaption>Step 1</figcaption></figure>
         <figure class="frame-2"><img src="..."><figcaption>Step 2</figcaption></figure>
       </div>
       <nav>
         <label for="ssX-1">1</label>
         <label for="ssX-2">2</label>
       </nav>
     </div>
*/
.step-slideshow {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0.5rem;
    margin: 1rem 0;
}
.step-slideshow > input[type="radio"] { display: none; }
.step-slideshow .frames > figure { display: none; margin: 0; }
.step-slideshow .frames img { max-width: 100%; height: auto; }
.step-slideshow .frames figcaption {
    font-size: 0.9em;
    color: #555;
    margin-top: 0.25rem;
    text-align: center;
}
/* Up to 6 steps supported by the sibling-combinator pattern below */
.step-slideshow > input:nth-of-type(1):checked ~ .frames .frame-1,
.step-slideshow > input:nth-of-type(2):checked ~ .frames .frame-2,
.step-slideshow > input:nth-of-type(3):checked ~ .frames .frame-3,
.step-slideshow > input:nth-of-type(4):checked ~ .frames .frame-4,
.step-slideshow > input:nth-of-type(5):checked ~ .frames .frame-5,
.step-slideshow > input:nth-of-type(6):checked ~ .frames .frame-6 {
    display: block;
}
.step-slideshow nav {
    display: flex;
    gap: 0.4rem;
    justify-content: center;
    margin-top: 0.5rem;
}
.step-slideshow nav label {
    cursor: pointer;
    border: 1px solid #888;
    border-radius: 3px;
    padding: 0.2rem 0.6rem;
    font-size: 0.9em;
    user-select: none;
    background: #f3f3f3;
}
.step-slideshow nav label:hover { background: #e0e0e0; }
.step-slideshow > input:nth-of-type(1):checked ~ nav label[for$="-1"],
.step-slideshow > input:nth-of-type(2):checked ~ nav label[for$="-2"],
.step-slideshow > input:nth-of-type(3):checked ~ nav label[for$="-3"],
.step-slideshow > input:nth-of-type(4):checked ~ nav label[for$="-4"],
.step-slideshow > input:nth-of-type(5):checked ~ nav label[for$="-5"],
.step-slideshow > input:nth-of-type(6):checked ~ nav label[for$="-6"] {
    background: #4a7fb0;
    color: white;
    border-color: #2f5a82;
}