/* LogicFun — step-through execution visualizer styles.
   Self-contained: only selectors prefixed with #step- or .step- (and the
   CodeMirror current-line classes scoped under .CodeMirror). */

/* Action buttons row (Step + Run). Compact CTA pills with leading symbol
   icons so the meaning is reinforced visually without growing the height. */
#run-controls-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

#run-controls-row > #runPythonButton {
    margin-top: 0;
    align-self: auto;
}

#stepThroughButton,
#run-controls-row > #runPythonButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
    /* Explicit height + no margins so the row's align-items:center centres
       both pills on the exact same baseline regardless of glyph metrics. */
    height: 34px;
    padding: 0 1em;
    margin: 0;
    align-self: center;
    vertical-align: middle;
    font-family: inherit;
    font-size: 0.92em;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    transition: background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
    box-sizing: border-box;
}

#stepThroughButton {
    background-color: var(--primary-color);
}

#stepThroughButton::before {
    content: '⏭';
    font-size: 0.95em;
    line-height: 1;
}

#stepThroughButton.lf-step-active::before {
    content: '✕';
    font-size: 0.95em;
}

#stepThroughButton:hover:not(:disabled),
#run-controls-row > #runPythonButton:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
}

#stepThroughButton:hover:not(:disabled) {
    background-color: var(--primary-dark);
}

#stepThroughButton.lf-step-active {
    background-color: #ef4444;
}

#stepThroughButton.lf-step-active:hover:not(:disabled) {
    background-color: #dc2626;
}

#stepThroughButton:disabled,
#runPythonButton:disabled,
#step-panel button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Layout: in normal mode #step-panel is hidden and #executionOutput fills
   #step-mode-row. Horizontal padding matches the 1em padding inside
   #codeOutput above so the output card aligns with the code editor edges
   instead of stretching all the way to the container border. In step mode,
   the layout switches to a grid and this padding is replaced by the
   debug-mode rule below. */
#step-mode-row {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 1em 1em;
    transition: background-color 200ms ease, padding 200ms ease, flex 220ms ease;
}

/* In step mode the bottom row needs more vertical real estate — the code
   editor barely changes line-to-line, but the variables/output update on
   every Next click. Force a 1:1 split so the output box gets enough room. */
body.lf-step-mode-active #codeOutput {
    flex: 1;
}
body.lf-step-mode-active #step-mode-row {
    flex: 1;
    min-height: 260px;
}

/* Shrink CodeMirror in step mode regardless of viewport height. The base
   400px (hardcoded for viewports >820px tall) leaves too little room for
   the step-mode-row's three components (Output card, Variables card,
   controls strip) — in fullscreen, where browser chrome doesn't absorb
   any overflow, the bottom controls strip gets clipped by
   #code-container's `overflow: hidden`. A viewport-relative height with
   a tight max keeps the editor usable while guaranteeing the rest fits. */
body.lf-step-mode-active .CodeMirror {
    height: calc(40vh - 60px) !important;
    min-height: 160px;
    max-height: 320px;
}

#step-mode-row > #executionOutput {
    flex: 1;
    min-height: 0;
    transition: flex 200ms ease;
}

/* Debug-mode layout: CSS Grid with output dominating the top, and
   Variables (left) + Controls (right) sharing the bottom row.
   #step-panel uses display: contents so its children participate directly
   in the parent grid instead of being wrapped in their own box. */
body.lf-step-mode-active #step-mode-row {
    display: grid;
    /* Top row = two observation cards (Output left, Variables right);
       bottom row = a thin actions strip spanning the full width with the
       step controls + step counter. This separates the "look" zone from
       the "click" zone cleanly and lets both observation cards take the
       full vertical height of the observation row. */
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
        "output    vars"
        "controls  controls";
    gap: 8px;
    padding: 8px;
    background-color: rgba(245, 158, 11, 0.06);
    border-top: 2px solid #f59e0b;
}

body.lf-step-mode-active #step-mode-row > #step-panel {
    display: contents;
}

body.lf-step-mode-active #executionOutput {
    grid-area: output;
    min-height: 0;
    min-width: 0;
}

body.lf-step-mode-active .step-vars-wrap {
    grid-area: vars;
    margin: 0;
    min-height: 0;
    min-width: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
    background: transparent;
    border: none;
    border-radius: 0;
}

body.lf-step-mode-active .step-controls {
    grid-area: controls;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 12px;
    background: var(--surface-color);
    border: 1px solid var(--text-secondary);
    border-radius: var(--border-radius);
    min-height: 0;
    min-width: 0;
}

/* ==========================================================================
   Debug-mode column transitions. Only #code-container actually resizes now
   (40% in debug mode); the rest stay put.
   ========================================================================== */

#code-container,
#codeOutput {
    transition: width 220ms ease, min-width 220ms ease, flex 220ms ease;
}

/* In debug mode, expand the right column slightly so the step panel +
   output split (60/40 horizontal) has comfortable room. Workspace keeps
   its natural flex:1 — it'll absorb whatever's left after tutorials (25%)
   and code (40%). */
body.lf-step-mode-active #code-container {
    width: 40%;
    min-width: 480px;
}

/* ==========================================================================
   Debug-mode toolbox: icon-only column. Pill size and icon font-size match
   the normal-desktop-mode toolbox (40x40 pill, 18px FontAwesome glyph) — the
   request is consistency with what the student already sees in normal mode,
   just with the text labels hidden and the column tightened.
   Per-category colored "selected" backgrounds use the same RGBA values as
   the mobile @media query in styles.css for cross-device visual identity.
   ========================================================================== */

/* Hide the toolbox collapse/expand toggle (the X / ↔ pill above the
   toolbox) in step mode — the toolbox is already forced to icon-only here,
   so the toggle has no purpose and just adds visual noise to the debugger. */
body.lf-step-mode-active #toolbox-mode-btn,
body.lf-step-mode-active .toolbox-mode-btn {
    display: none !important;
}

body.lf-step-mode-active .blocklyToolboxDiv,
body.lf-step-mode-active .blocklyToolbox {
    width: 50px !important;
    min-width: 50px !important;
    padding: 8px 4px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f5f6ff 100%) !important;
    box-shadow: 2px 0 16px rgba(99, 102, 241, 0.12) !important;
    border-right: 1px solid rgba(99, 102, 241, 0.1) !important;
    overflow: visible !important;
    transition: width 220ms ease, min-width 220ms ease;
}

body.lf-step-mode-active .blocklyToolboxCategoryLabel {
    display: none !important;
}

body.lf-step-mode-active .blocklyToolboxCategory {
    width: 40px !important;
    height: 40px !important;
    margin: 6px auto !important;
    padding: 0 !important;
    padding-left: 0 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-bottom: none !important;
    background: transparent !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
}

body.lf-step-mode-active .blocklyToolboxCategory::before {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 18px !important;
    transition: transform 0.2s ease !important;
}

body.lf-step-mode-active .blocklyToolboxCategory:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15) !important;
}

body.lf-step-mode-active .blocklyToolboxCategory:hover::before {
    transform: translate(-50%, -50%) scale(1.1) !important;
}

body.lf-step-mode-active .blocklyToolboxSelected {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    animation: none !important;
}

/* Per-category selected colors — match the mobile @media query exactly */
body.lf-step-mode-active .blocklyToolboxCategoryContainer:nth-child(1) .blocklyToolboxSelected {
    background: rgba(76, 175, 80, 0.18) !important;
    box-shadow: 0 4px 14px rgba(76, 175, 80, 0.3) !important;
}
body.lf-step-mode-active .blocklyToolboxCategoryContainer:nth-child(2) .blocklyToolboxSelected {
    background: rgba(33, 150, 243, 0.18) !important;
    box-shadow: 0 4px 14px rgba(33, 150, 243, 0.3) !important;
}
body.lf-step-mode-active .blocklyToolboxCategoryContainer:nth-child(3) .blocklyToolboxSelected {
    background: rgba(156, 39, 176, 0.18) !important;
    box-shadow: 0 4px 14px rgba(156, 39, 176, 0.3) !important;
}
body.lf-step-mode-active .blocklyToolboxCategoryContainer:nth-child(4) .blocklyToolboxSelected {
    background: rgba(255, 152, 0, 0.18) !important;
    box-shadow: 0 4px 14px rgba(255, 152, 0, 0.3) !important;
}
body.lf-step-mode-active .blocklyToolboxCategoryContainer:nth-child(5) .blocklyToolboxSelected {
    background: rgba(233, 30, 99, 0.18) !important;
    box-shadow: 0 4px 14px rgba(233, 30, 99, 0.3) !important;
}
body.lf-step-mode-active .blocklyToolboxCategoryContainer:nth-child(6) .blocklyToolboxSelected {
    background: rgba(255, 87, 34, 0.18) !important;
    box-shadow: 0 4px 14px rgba(255, 87, 34, 0.3) !important;
}
body.lf-step-mode-active .blocklyToolboxCategoryContainer:nth-child(7) .blocklyToolboxSelected {
    background: rgba(121, 85, 72, 0.18) !important;
    box-shadow: 0 4px 14px rgba(121, 85, 72, 0.3) !important;
}

body.lf-step-mode-active .blocklyToolboxSelected::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.7;
}

body.lf-step-mode-active .ctrl-row .ctrl-btn {
    /* Comment toggle is allowed — it's visual only — so leave these alone.
       Listed here only to document the deliberate choice. */
}

#step-panel {
    margin-top: 0.8em;
    padding: 0.8em;
    background-color: #fefce8;
    border: 1px solid #fde68a;
    border-radius: var(--border-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.step-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-bottom: 0.6em;
}

.step-controls button {
    background-color: var(--surface-color);
    color: var(--text-primary);
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 0.4em 0.7em;
    font-family: inherit;
    font-size: 0.92em;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    min-width: 0;
}

.step-controls button:hover:not(:disabled) {
    background-color: var(--background-color);
    border-color: var(--primary-color);
}

.step-controls #stepNextBtn {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.step-controls #stepNextBtn:hover:not(:disabled) {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

.step-controls #stepRunAllBtn.lf-step-playing {
    background-color: var(--secondary-color);
    color: #fff;
    border-color: var(--secondary-color);
}

.step-counter {
    margin-left: auto;
    font-size: 0.9em;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.step-counter #stepCounterCurrent,
.step-counter #stepCounterTotal {
    font-weight: 600;
    color: var(--text-primary);
}

.step-vars-wrap {
    max-height: 220px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background-color: var(--surface-color);
}

#stepVarTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
    font-family: 'Fira Code', monospace;
}

#stepVarTable thead th {
    position: sticky;
    top: 0;
    background-color: #f9fafb;
    color: var(--text-secondary);
    font-weight: 600;
    text-align: left;
    padding: 0.35em 0.6em;
    border-bottom: 1px solid #e5e7eb;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-family: 'Poppins', sans-serif;
}

#stepVarTable tbody td {
    padding: 0.3em 0.6em;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: top;
    word-break: break-word;
}

#stepVarTable tbody tr:last-child td {
    border-bottom: none;
}

#stepVarTable .lf-var-name {
    font-weight: 600;
    color: var(--primary-dark);
    white-space: nowrap;
}

#stepVarTable .lf-var-value {
    color: var(--text-primary);
    max-width: 320px;
}

#stepVarTable .lf-var-type {
    color: var(--text-secondary);
    white-space: nowrap;
    font-style: italic;
}

#stepVarTable .lf-step-empty-row td {
    color: var(--text-secondary);
    text-align: center;
    font-style: italic;
    font-family: 'Poppins', sans-serif;
    padding: 0.7em;
}

/* Distinct from .lf-highlight-line (block-click highlight, indigo).
   Amber accent indicates which line is about to execute. */
.CodeMirror .lf-step-current-line {
    background-color: rgba(245, 158, 11, 0.22);
}

.CodeMirror .lf-step-current-gutter {
    background-color: rgba(245, 158, 11, 0.45);
    border-left: 3px solid #f59e0b;
    color: #92400e;
    font-weight: 600;
}

/* Workspace-side "now-executing" marker. Three techniques stacked so the
   block reads as active regardless of its category color:
     1. WHITE stroke — contrasts universally against any block color
        (green/blue/purple/orange/red/brown). Amber-on-amber blocks lose
        the highlight entirely; white never does.
     2. ANIMATED PULSE — motion captures attention faster than any static
        accent, especially for pedagogical step-through where the user
        needs to find "what's running NOW" in <1s.
     3. AMBER HALO (multi-layer drop-shadow) — keeps the color story
        consistent with the Αποτέλεσμα output panel and amber gutter
        marker in CodeMirror so all three "step state" surfaces feel
        related. */
@keyframes lf-step-block-pulse {
    0%, 100% {
        stroke-width: 4px;
        filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.95))
                drop-shadow(0 0 10px rgba(245, 158, 11, 0.65));
    }
    50% {
        stroke-width: 5.5px;
        filter: drop-shadow(0 0 8px rgba(245, 158, 11, 1))
                drop-shadow(0 0 18px rgba(245, 158, 11, 0.85))
                drop-shadow(0 0 28px rgba(245, 158, 11, 0.4));
    }
}

.blocklyDraggable.lf-step-block-current > .blocklyPath,
.lf-step-block-current > .blocklyPath {
    stroke: #ffffff !important;
    stroke-width: 4px !important;
    animation: lf-step-block-pulse 1.3s ease-in-out infinite;
}

/* Accessibility: respect user's motion preference. Without animation,
   compensate with a stronger static glow so the marker is still obvious. */
@media (prefers-reduced-motion: reduce) {
    .blocklyDraggable.lf-step-block-current > .blocklyPath,
    .lf-step-block-current > .blocklyPath {
        animation: none;
        stroke-width: 5px !important;
        filter: drop-shadow(0 0 8px rgba(245, 158, 11, 1))
                drop-shadow(0 0 18px rgba(245, 158, 11, 0.75));
    }
}

/* ==========================================================================
   Variables card header + table sizing in debug mode.
   Same warm-paper card pattern as the Output card so observations read
   as a matched pair of state surfaces.
   ========================================================================== */
.vars-header {
    display: none;
    /* Shown only in debug mode (rule below) */
}

body.lf-step-mode-active .vars-header {
    display: flex;
    align-items: center;
    gap: 0.45em;
    padding: 6px 12px;
    background: linear-gradient(180deg, #fef9f3 0%, #fdf6eb 100%);
    border: 1px solid var(--text-secondary);
    border-bottom: 2px solid #fde68a;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    user-select: none;
    flex-shrink: 0;
}

body.lf-step-mode-active .vars-glyph {
    color: #d97706;
    font-family: 'Fira Code', monospace;
    font-weight: 700;
    font-size: 0.95em;
    line-height: 1;
}

body.lf-step-mode-active .vars-title {
    color: var(--text-primary);
    font-family: 'Poppins', sans-serif;
    font-size: 0.82em;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

body.lf-step-mode-active .step-vars-wrap #stepVarTable {
    flex: 1;
    background: #fafaf7;
    border: 1px solid var(--text-secondary);
    border-top: none;
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    /* `display: table` (not block) so the table re-engages its native column
       layout — block-display tables don't auto-distribute width across cells.
       In Greek the long headers (Όνομα/Τιμή/Τύπος) padded the table enough
       to disguise the issue; in English the short headers (Name/Value/Type)
       hugged the left edge with empty space on the right. */
    display: table;
    /* `fixed` honors explicit column widths instead of falling back to
       content-driven sizing — required to enforce the equal-thirds layout
       below. */
    table-layout: fixed;
    width: 100%;
    min-height: 0;
}

/* Equal-thirds: each column occupies exactly 1/3 of the table width,
   independent of header text length or value content. Keeps the layout
   identical in Greek and English and prevents value-driven column drift
   when long string values arrive. */
body.lf-step-mode-active #stepVarTable thead th,
body.lf-step-mode-active #stepVarTable tbody td {
    width: 33.3333%;
}

/* ==========================================================================
   Vertical step controls stack. Buttons full-width, Next emphasized as the
   primary action, counter pinned at the bottom of the card.
   ========================================================================== */
body.lf-step-mode-active .step-controls button {
    width: auto;
    justify-content: center;
    padding: 0.4em 0.9em;
    font-size: 0.88em;
    flex-shrink: 0;
    flex-grow: 0;
    height: auto;
    min-height: 0;
}

/* Layout: counter (left) [spacer] Reset → Run all → Next (right, primary). */
body.lf-step-mode-active .step-controls .step-counter {
    order: 1;
    margin: 0;
    padding: 0;
    border: none;
    flex-basis: auto;
    flex-shrink: 0;
    color: var(--text-secondary);
    font-family: 'Poppins', sans-serif;
    font-size: 0.88em;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
}

body.lf-step-mode-active .step-controls #stepCounterCurrent,
body.lf-step-mode-active .step-controls #stepCounterTotal {
    color: var(--text-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* margin-left: auto on the first button pushes Reset + Run all + Next to the
   right edge, separating them from the counter on the left. */
body.lf-step-mode-active .step-controls #stepResetBtn {
    order: 2;
    margin-left: auto;
}

body.lf-step-mode-active .step-controls #stepRunAllBtn { order: 3; }

body.lf-step-mode-active .step-controls #stepNextBtn {
    order: 4;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.28);
}

/* The disabled Run button has no meaning during a step session — hide it
   so the Έξοδος button sits alone on its row. */
body.lf-step-mode-active #runPythonButton {
    display: none !important;
}

/* Smaller screens: cram the controls into multiple rows, scrollable panel. */
@media (max-width: 768px) {
    #step-panel {
        padding: 0.6em;
    }
    .step-counter {
        margin-left: 0;
        flex-basis: 100%;
        text-align: right;
    }
    .step-vars-wrap {
        max-height: 180px;
    }
    #stepVarTable .lf-var-value {
        max-width: none;
    }
    /* In mobile normal-mode (not step-mode), zero out the desktop
       horizontal padding on #step-mode-row so #executionOutput aligns
       at the same x-offset as #codeOutput. Without this, the Output
       card was inset 16px while the Code card was flush — the two cards
       had visibly different widths. */
    #step-mode-row {
        padding: 0;
    }

    /* Mobile debug layout: single-column grid so Output and Variables
       BOTH get the full viewport width (visually equal-width cards).
       The vertical action rail is lifted OUT of the grid and floated
       to the top-right as an absolutely-positioned overlay — it no
       longer claims a grid column, so neither observation card is
       narrowed by it. */
    body.lf-step-mode-active #step-mode-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(110px, 1fr) minmax(110px, 1fr);
        grid-template-areas:
            "output"
            "vars";
        gap: 8px;
        padding: 8px;
        overflow: hidden;
        position: relative;
    }

    /* CRITICAL: codeOutput must NOT inherit `flex: 1` from the desktop
       step rule — would create dead space below the CodeMirror. Lock to
       natural height so step-mode-row's flex:1 absorbs the rest. */
    body.lf-step-mode-active #codeOutput {
        flex: 0 0 auto;
    }

    body.lf-step-mode-active #step-mode-row > #executionOutput {
        grid-area: output;
        min-height: 0;
        max-height: none;
        /* Zero base padding + right inset for the floating rail. Left
           padding zero so the Output card's inner bordered box aligns
           perfectly with the Variables card's left edge. */
        padding: 0 64px 0 0;
    }
    body.lf-step-mode-active #step-mode-row .step-vars-wrap {
        grid-area: vars;
        min-height: 0;
        max-height: none;
        /* Match Output's inset so the Variables card's bordered box has
           the SAME visible width as Output's card — both stop short of
           the right edge by the same amount, regardless of whether the
           floating rail sits beside them. */
        margin-right: 64px;
    }

    /* Vertical action rail — FLOATING overlay at the top-right of
       step-mode-row. position: absolute removes it from the grid flow,
       so Output and Variables can claim the full row width. The rail's
       natural content height (counter + 3 buttons) is preserved. */
    body.lf-step-mode-active #step-mode-row .step-controls {
        position: absolute;
        top: 8px;
        right: 8px;
        z-index: 6;
        width: 52px;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        gap: 6px;
        padding: 6px 4px;
        background: var(--surface-color);
        border: 1px solid var(--text-secondary);
        border-radius: var(--border-radius);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    }

    /* Counter pinned at the top of the rail, two-line stacked label */
    body.lf-step-mode-active .step-controls .step-counter {
        order: 0;
        flex: 0 0 auto;
        margin: 0 0 4px 0;
        padding: 0 0 6px 0;
        text-align: center;
        font-size: 0.7em;
        line-height: 1.15;
        white-space: nowrap;
        color: var(--text-secondary);
        border-bottom: 1px solid #e5e7eb;
    }
    body.lf-step-mode-active .step-controls .step-counter > span:first-child {
        display: block;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        opacity: 0.75;
    }
    body.lf-step-mode-active .step-controls #stepCounterCurrent,
    body.lf-step-mode-active .step-controls #stepCounterTotal {
        font-size: 1.2em;
    }

    /* Icon-only buttons — fixed natural height so the rail shrinks to
       content (combined with align-self: start on the rail). Earlier
       flex: 1 1 0 stretched the buttons to fill the column 2 height,
       which made the bordered card visually extend much taller than
       needed. */
    body.lf-step-mode-active .step-controls button {
        order: 1;
        flex: 0 0 auto;
        width: 100%;
        height: 40px;
        min-height: 40px;
        margin: 0;
        padding: 0;
        font-size: 0;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    body.lf-step-mode-active .step-controls #stepResetBtn {
        order: 1;
        margin-left: 0;
    }
    body.lf-step-mode-active .step-controls #stepRunAllBtn { order: 2; }
    body.lf-step-mode-active .step-controls #stepNextBtn { order: 3; }

    body.lf-step-mode-active .step-controls #stepResetBtn::before {
        content: '⏮';
        font-size: 22px;
        line-height: 1;
    }
    body.lf-step-mode-active .step-controls #stepRunAllBtn::before {
        content: '▶';
        font-size: 18px;
        line-height: 1;
    }
    body.lf-step-mode-active .step-controls #stepNextBtn::before {
        content: '⏭';
        font-size: 24px;
        line-height: 1;
    }

    /* In step mode mobile, shrink the code editor further to give the
       three observation surfaces (output/vars + icon rail) the space
       they need. The user is debugging, not coding. */
    body.lf-step-mode-active .CodeMirror {
        height: 24vh !important;
        height: 24dvh !important;
        min-height: 140px;
        max-height: 240px;
    }

    /* Reclaim vertical space in step mode: collapse the bottom run-controls
       row (which contains only the Έξοδος toggle on mobile — Run Python is
       already hidden) into a tiny circular × button anchored to the top-
       right corner of the code panel. Saves ~70px of vertical height that
       previously held a full-width red button, now folded into the title
       rail's empty corner. */
    body.lf-step-mode-active #codeOutput {
        position: relative;
        padding-top: 0;
    }
    body.lf-step-mode-active #run-controls-row {
        position: absolute;
        top: 10px;
        right: 10px;
        margin: 0;
        padding: 0;
        z-index: 12;
        gap: 0;
    }
    body.lf-step-mode-active #run-controls-row #stepThroughButton {
        flex: none;
        width: 32px;
        height: 32px;
        min-height: 32px;
        padding: 0;
        border-radius: 50%;
        font-size: 0;
        white-space: nowrap;
        box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35);
    }
    body.lf-step-mode-active #run-controls-row #stepThroughButton::before {
        font-size: 14px;
        margin: 0;
    }

    /* Slim down the comments toolbar (.ctrl-row) in mobile step mode —
       in debugging the student is reading code, not toggling comments,
       so the toolbar can be denser. */
    body.lf-step-mode-active .ctrl-row {
        padding: 3px 0;
    }
    body.lf-step-mode-active .ctrl-btn {
        padding: 0 10px;
        font-size: 10px;
    }

    /* Slim the code-panel-header rail too — every saved pixel here is a
       pixel given to Output + Variables below. */
    body.lf-step-mode-active .code-panel-header {
        padding: 6px 14px;
    }

    /* Step counter pinned at the rail top, tighter */
    body.lf-step-mode-active .step-controls .step-counter {
        font-size: 0.65em;
        padding-bottom: 4px;
        margin-bottom: 2px;
    }
    /* On phones the icon-strip + workspace shrink is too cramped — keep the
       tutorial-strip transformation but ignore the workspace shrink. */
    body.lf-step-mode-active #workspace-container {
        flex: 1;
        min-width: 0;
    }
    body.lf-step-mode-active #code-container {
        width: auto;
        min-width: 0;
    }
}