/* ==========================================================================
   Interactive Live REPL Tutorial Modal
   ========================================================================== */

.neo-tutorial-card {
    position: fixed;
    top: var(--tutorial-card-top);
    left: var(--tutorial-card-left);
    width: var(--tutorial-card-width);
    max-width: calc(100vw - 16px);
    background: var(--bg-surface);
    backdrop-filter: var(--blur-glass);
    border: 1px solid var(--border-strong);
    padding: var(--tutorial-card-padding);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    z-index: 60;
    pointer-events: auto;
    max-height: var(--tutorial-max-height);
    box-shadow: var(--shadow-modal);
    border-radius: var(--radius-sm);

    @media (max-width: 640px) {
        top: var(--space-md);
        left: var(--space-md);
        right: var(--space-md);
        padding: var(--space-sm) var(--space-lg);
        gap: var(--space-sm);
    }
}

.neo-modal-tabs {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-left: auto;
}

.tab-btn {
    font-family: inherit;
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: var(--space-2xs) var(--space-md);
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;

    &:hover {
        color: var(--text-brand);
        border-color: var(--border-primary);
        background: var(--bg-interactive-hover);
    }
}

.scratchpad-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
}

.scratchpad-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    width: 100%;

    @media (max-width: 640px) {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }
}

.scratchpad-hint {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
}

.scratchpad-btn-group {
    display: flex;
    align-items: center;
    gap: var(--space-sm);

    @media (max-width: 640px) {
        width: 100%;
        justify-content: flex-end;
    }
}

.neo-run-btn {
    font-family: inherit;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: var(--space-xs) var(--space-md);
    border: 1px solid var(--border-success);
    background: var(--bg-success-tint);
    color: var(--text-success);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.15s ease, color 0.15s ease;

    &:hover {
        background: var(--color-success);
        color: var(--text-inverse);
    }

    &.btn-all {
        border-color: var(--border-primary);
        background: var(--bg-primary-tint);
        color: var(--text-brand);

        &:hover {
            background: var(--color-primary);
            color: var(--text-inverse);
        }
    }
}

.neo-code-editor {
    width: 100%;
    box-sizing: border-box;
    display: block;
    font-family: inherit;
    font-size: var(--font-size-md);
    line-height: var(--line-height-editor);
    background: var(--bg-input);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    padding: var(--space-md) var(--space-xl);
    resize: vertical;
    border-radius: var(--radius-sm);
    outline: none;
    min-height: var(--editor-min-height);
    max-height: var(--editor-max-height);
    white-space: pre;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--bg-scrollbar-thumb) var(--bg-scrollbar-track);

    &::-webkit-scrollbar { width: var(--space-xs); height: var(--space-xs); }
    &::-webkit-scrollbar-track { background: var(--bg-scrollbar-track); }
    &::-webkit-scrollbar-thumb { background: var(--bg-scrollbar-thumb); border-radius: var(--radius-sm); }

    &:focus {
        border-color: var(--border-primary);
        box-shadow: var(--glow-focus);
    }
}

.neo-output-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    width: 100%;
}

.neo-output-console {
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-console);
    border: 1px solid var(--border-subtle);
    padding: var(--space-md) var(--space-lg);
    font-size: var(--font-size-sm);
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    max-height: calc(var(--space-3xl) * 3);
    overflow-y: auto;
    border-radius: var(--radius-sm);

    &.output-ok {
        border-color: var(--border-success-subtle);
        .output-prompt { color: var(--text-success); }
        .output-text   { color: var(--text-success); }
    }

    &.output-err {
        border-color: var(--border-danger-subtle);
        .output-prompt { color: var(--text-danger); }
        .output-text   { color: var(--text-danger); }
    }
}