/* Copyright (c) 2026 Barry Adams / CADcoLabs. All rights reserved. */

@media (max-width: 768px) {
    html,
    body,
    #app {
        height: auto;
        min-height: 100%;
    }

    #app {
        display: flex;
        flex-direction: column;
    }

    #panel {
        width: 100%;
        padding: 12px;
        overflow-y: visible;
    }

    #panel h1 {
        font-size: 1rem;
        line-height: 1.25;
        margin-bottom: 12px;
    }

    #param-form,
    #components {
        grid-template-columns: 1fr;
        column-gap: 0;
    }

    #param-form label {
        font-size: 0.88rem;
    }

    #param-form input[type="number"],
    #param-form select {
        min-height: 40px;
        font-size: 1rem;
    }

    #check-btn,
    #generate-btn {
        min-height: 44px;
        font-size: 0.95rem;
    }

    #fbc-box {
        flex: initial;
    }

    #fbc-panel {
        max-height: none;
        overflow-y: visible;
    }

    #viewer-wrap {
        min-height: 70vh;
        border-top: 1px solid #444;
    }

    #toolbar {
        align-items: stretch;
        gap: 8px;
        padding: 8px;
    }

    .tb-label {
        width: 100%;
        margin-left: 0;
    }

    .tb-btn,
    #toolbar select,
    .tb-check {
        min-height: 40px;
    }

    .tb-btn {
        flex: 1 1 70px;
        padding: 6px 8px;
    }

    .tb-check {
        flex: 1 1 140px;
        margin-left: 0;
    }

    #toolbar select {
        flex: 1 1 180px;
    }

    #opacity-slider {
        flex: 1 1 160px;
        width: auto;
    }

    #viewer {
        min-height: 55vh;
    }
}

@media (max-width: 420px) {
    #panel {
        padding: 10px;
    }

    #toolbar {
        font-size: 0.78rem;
    }
}