/* =============================================================================
   BLAISE RESPONSIVE STANDARD V1.0.0
   ============================================================================= */


/* =============================================================================
   0. GLOBAL SAFETY
   ============================================================================= */

html,
body{
    max-width:100%;
}

html{
    overflow-x:hidden;
}

body{
    margin:0;
    overflow-x:hidden;
}

*,
*::before,
*::after{
    box-sizing:border-box;
}


/*
 * Critical flex/grid shrink rule.
 * Prevents long labels and controls from forcing page overflow.
 */

main,
section,
article,
aside,
header,
footer,
nav,
div{
    min-width:0;
}


img,
svg,
video,
canvas,
iframe{
    max-width:100%;
}


input,
textarea,
select,
button{
    max-width:100%;
}


table{
    max-width:100%;
}


/* =============================================================================
   1. RESPONSIVE UTILITIES
   ============================================================================= */

.blaise-mobile-only{
    display:none !important;
}

.blaise-responsive-scroll-x{
    overflow-x:auto !important;
    overflow-y:hidden !important;

    scrollbar-width:thin;

    -webkit-overflow-scrolling:touch;
}

.blaise-responsive-stack{
    min-width:0;
}


/* =============================================================================
   2. MOBILE MENU BUTTON
   ============================================================================= */

#blaiseResponsiveMenuButton{
    display:none;

    align-items:center;
    justify-content:center;

    width:44px;
    height:44px;

    min-width:44px;
    min-height:44px;

    margin:0;

    padding:0;

    border:1px solid #255d82;
    border-radius:8px;

    background:#092d4b;
    color:#fff;

    font-size:21px;

    cursor:pointer;

    z-index:1002;
}


#blaiseResponsiveOverlay{
    display:none;

    position:fixed;

    inset:0;

    z-index:998;

    background:rgba(1,12,22,.68);

    backdrop-filter:blur(2px);
}


html.blaise-mobile-nav-open
#blaiseResponsiveOverlay{
    display:block;
}


/* =============================================================================
   3. GENERIC SIDEBAR
   ============================================================================= */

/*
 * Runtime JS discovers the actual shell sidebar and adds:
 *
 * .blaise-responsive-sidebar
 */

.blaise-responsive-sidebar{
    min-width:0;
}


/* =============================================================================
   4. PROJECT / PROFILE TOOLBAR
   ============================================================================= */

/*
 * Runtime JS identifies the top control bar and adds:
 *
 * .blaise-responsive-projectbar
 */

.blaise-responsive-projectbar{
    min-width:0;
}

.blaise-responsive-projectbar > *{
    min-width:0;
}


/* =============================================================================
   5. WORKFLOW / PHASE STRIPS
   ============================================================================= */

.blaise-responsive-stagebar{
    min-width:0;

    overflow-x:auto;
    overflow-y:hidden;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:thin;
}

.blaise-responsive-stagebar > *{
    min-width:0;
}


/* =============================================================================
   6. PROJECT DEFINITION / TEMPLATES SELECTORS
   ============================================================================= */

.architect-mode-row,
.blaise-mode-row,
[class*="mode-row"],
[class*="mode-selector"]{
    min-width:0;
}


/* Existing Architect selector */

.architect-mode-button,
.blaise-architect-mode-button{
    max-width:100%;
}


/* =============================================================================
   7. MAIN CONTENT + STATUS COLUMN
   ============================================================================= */

.blaise-responsive-main-layout{
    min-width:0;
}

.blaise-responsive-main-layout > *{
    min-width:0;
}


/* =============================================================================
   8. MARKETPLACE
   ============================================================================= */

.atb-grid,
.at-grid,
.dt-grid,
.bct-grid,
.template-grid,
.marketplace-grid,
[class*="template-grid"],
[class*="marketplace-grid"]{
    min-width:0;
}


.atb-toolbar,
.at-toolbar,
.dt-toolbar,
.bct-toolbar,
.template-toolbar,
.marketplace-toolbar{
    min-width:0;
}


.atb-categories,
.at-categories,
.dt-categories,
.bct-categories,
[class*="categories"],
[class*="chips"]{
    max-width:100%;
}


/* =============================================================================
   9. MODALS / DIALOGS
   ============================================================================= */

[role="dialog"],
.modal,
.dialog,
.at-dialog,
.dt-dialog,
.bct-dialog,
.template-dialog,
[class*="modal"],
[class*="dialog"]{
    max-width:min(960px,calc(100vw - 32px));
    max-height:calc(100vh - 32px);

    overflow:auto;

    overscroll-behavior:contain;
}


/* =============================================================================
   10. FORMS
   ============================================================================= */

textarea{
    resize:vertical;
}

.blaise-responsive-form-row{
    min-width:0;
}


/* =============================================================================
   11. TABLE SAFETY
   ============================================================================= */

.blaise-responsive-table-wrap{
    width:100%;

    overflow-x:auto;

    -webkit-overflow-scrolling:touch;
}


/* =============================================================================
   12. ARCHITECT CANVAS
   ============================================================================= */

.architecture-groups,
.architect-canvas,
#blaiseArchitectGenericCanvas{
    max-width:100%;
}


.architecture-items{
    min-width:0;
}


/* =============================================================================
   13. DESKTOP
   >1200px
   ============================================================================= */

@media(min-width:1201px){

    /*
     * Preserve current desktop design.
     * Only safety rules apply.
     */

}


/* =============================================================================
   14. COMPACT DESKTOP / TABLET LANDSCAPE
   769–1200px
   ============================================================================= */

@media(min-width:769px) and (max-width:1200px){

    /* -------------------------------------------------------------------------
       General shell
       ------------------------------------------------------------------------- */

    body{
        font-size:98%;
    }


    /* -------------------------------------------------------------------------
       Top control bars may wrap rather than clip
       ------------------------------------------------------------------------- */

    .blaise-responsive-projectbar{
        display:flex !important;
        flex-wrap:wrap !important;

        gap:10px !important;
    }


    .blaise-responsive-projectbar
    select,
    .blaise-responsive-projectbar
    input{
        min-width:180px;
    }


    /* -------------------------------------------------------------------------
       Workflow stages
       ------------------------------------------------------------------------- */

    .blaise-responsive-stagebar{
        display:flex !important;
        flex-wrap:nowrap !important;
    }


    .blaise-responsive-stagebar > *{
        flex:0 0 auto;

        min-width:150px;
    }


    /* -------------------------------------------------------------------------
       Marketplace
       ------------------------------------------------------------------------- */

    .atb-grid,
    .at-grid,
    .dt-grid,
    .bct-grid,
    .template-grid,
    .marketplace-grid,
    [class*="template-grid"],
    [class*="marketplace-grid"]{

        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            ) !important;
    }


    .atb-toolbar,
    .at-toolbar,
    .dt-toolbar,
    .bct-toolbar,
    .template-toolbar,
    .marketplace-toolbar{

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;
    }


    /* -------------------------------------------------------------------------
       Architect
       ------------------------------------------------------------------------- */

    .architecture-items.cols-4,
    .architecture-items.cols-3{

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;
    }


    .architect-mode-row{
        flex-wrap:wrap !important;
    }


    .architect-mode-button{
        flex:
            1
            1
            230px !important;

        width:auto !important;
        min-width:210px !important;
    }
}


/* =============================================================================
   15. TABLET / LARGE PHONE
   <=768px
   ============================================================================= */

@media(max-width:768px){

    /* -------------------------------------------------------------------------
       Touch controls
       ------------------------------------------------------------------------- */

    button,
    select,
    input[type="button"],
    input[type="submit"]{

        min-height:44px;
    }


    /* -------------------------------------------------------------------------
       Navigation toggle
       ------------------------------------------------------------------------- */

    #blaiseResponsiveMenuButton{
        display:inline-flex;
    }


    /* -------------------------------------------------------------------------
       Sidebar becomes drawer
       ------------------------------------------------------------------------- */

    .blaise-responsive-sidebar{

        position:fixed !important;

        top:0 !important;
        left:0 !important;
        bottom:0 !important;

        z-index:1000 !important;

        width:min(82vw,290px) !important;
        min-width:0 !important;
        max-width:290px !important;

        height:100dvh !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;

        transform:
            translateX(-105%) !important;

        transition:
            transform .20s ease !important;

        box-shadow:
            14px
            0
            32px
            rgba(0,0,0,.30) !important;
    }


    html.blaise-mobile-nav-open
    .blaise-responsive-sidebar{

        transform:
            translateX(0) !important;
    }


    /* -------------------------------------------------------------------------
       Main content stops reserving desktop sidebar width
       ------------------------------------------------------------------------- */

    .blaise-responsive-content{

        margin-left:0 !important;
        padding-left:0 !important;

        width:100% !important;
        max-width:100% !important;
    }


    /* -------------------------------------------------------------------------
       Top/global nav
       ------------------------------------------------------------------------- */

    .blaise-responsive-topnav{

        display:flex !important;

        align-items:center !important;

        gap:8px !important;

        min-height:58px;
    }


    .blaise-responsive-topnav
    .blaise-responsive-hide-tablet{

        display:none !important;
    }


    /* -------------------------------------------------------------------------
       Project/profile bar
       ------------------------------------------------------------------------- */

    .blaise-responsive-projectbar{

        display:grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;

        gap:9px !important;

        align-items:stretch !important;
    }


    .blaise-responsive-projectbar > *{

        width:100% !important;

        min-width:0 !important;

        max-width:100% !important;
    }


    .blaise-responsive-projectbar
    select,
    .blaise-responsive-projectbar
    input,
    .blaise-responsive-projectbar
    button{

        width:100% !important;

        min-width:0 !important;

        max-width:100% !important;
    }


    /* -------------------------------------------------------------------------
       Stages
       ------------------------------------------------------------------------- */

    .blaise-responsive-stagebar{

        display:flex !important;

        flex-wrap:nowrap !important;

        overflow-x:auto !important;

        scroll-snap-type:
            x proximity;

        gap:0 !important;
    }


    .blaise-responsive-stagebar > *{

        flex:
            0
            0
            180px !important;

        min-width:
            180px !important;

        scroll-snap-align:start;
    }


    /* -------------------------------------------------------------------------
       Main workspace / side status
       ------------------------------------------------------------------------- */

    .blaise-responsive-main-layout{

        display:grid !important;

        grid-template-columns:
            minmax(0,1fr) !important;

        gap:12px !important;
    }


    .blaise-responsive-status-panel{

        width:100% !important;

        max-width:100% !important;

        position:static !important;
    }


    /* -------------------------------------------------------------------------
       Project Definition / Templates
       ------------------------------------------------------------------------- */

    .architect-mode-row,
    .blaise-mode-row,
    [class*="mode-row"]{

        display:grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;

        gap:10px !important;
    }


    .architect-mode-button,
    .blaise-architect-mode-button{

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
    }


    /* -------------------------------------------------------------------------
       Action groups
       ------------------------------------------------------------------------- */

    .blaise-responsive-actions{

        display:flex !important;

        flex-wrap:wrap !important;

        gap:8px !important;
    }


    .blaise-responsive-actions > *{

        flex:
            1
            1
            180px;

        min-width:0 !important;
    }


    /* -------------------------------------------------------------------------
       Marketplace toolbar
       ------------------------------------------------------------------------- */

    .atb-toolbar,
    .at-toolbar,
    .dt-toolbar,
    .bct-toolbar,
    .template-toolbar,
    .marketplace-toolbar{

        display:grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;

        gap:9px !important;
    }


    /* -------------------------------------------------------------------------
       Marketplace cards
       ------------------------------------------------------------------------- */

    .atb-grid,
    .at-grid,
    .dt-grid,
    .bct-grid,
    .template-grid,
    .marketplace-grid,
    [class*="template-grid"],
    [class*="marketplace-grid"]{

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;

        gap:12px !important;
    }


    /* -------------------------------------------------------------------------
       Categories/chips
       ------------------------------------------------------------------------- */

    .atb-categories,
    .at-categories,
    .dt-categories,
    .bct-categories,
    [class*="categories"],
    [class*="chips"]{

        display:flex !important;

        flex-wrap:nowrap !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        -webkit-overflow-scrolling:touch;

        scrollbar-width:thin;
    }


    .atb-categories > *,
    .at-categories > *,
    .dt-categories > *,
    .bct-categories > *,
    [class*="categories"] > *,
    [class*="chips"] > *{

        flex:
            0
            0
            auto !important;
    }


    /* -------------------------------------------------------------------------
       Developer tabs / ABE
       ------------------------------------------------------------------------- */

    .blaise-responsive-tabs{

        display:flex !important;

        flex-wrap:nowrap !important;

        overflow-x:auto !important;

        -webkit-overflow-scrolling:touch;

        scrollbar-width:thin;
    }


    .blaise-responsive-tabs > *{

        flex:
            0
            0
            auto !important;

        min-width:
            145px !important;
    }


    /* -------------------------------------------------------------------------
       Architect canvas
       ------------------------------------------------------------------------- */

    .architecture-items.cols-4,
    .architecture-items.cols-3{

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;
    }


    .architect-canvas-head{

        flex-wrap:wrap !important;
    }


    /* -------------------------------------------------------------------------
       Modal
       ------------------------------------------------------------------------- */

    [role="dialog"],
    .modal,
    .dialog,
    .at-dialog,
    .dt-dialog,
    .bct-dialog,
    .template-dialog,
    [class*="modal"],
    [class*="dialog"]{

        width:calc(100vw - 24px) !important;

        max-width:calc(100vw - 24px) !important;

        max-height:calc(100dvh - 24px) !important;

        margin:12px !important;

        border-radius:12px !important;
    }


    /* -------------------------------------------------------------------------
       Tables
       ------------------------------------------------------------------------- */

    table{

        min-width:
            700px;
    }


    /* -------------------------------------------------------------------------
       Typography
       ------------------------------------------------------------------------- */

    h1{
        font-size:
            clamp(
                1.45rem,
                5vw,
                2rem
            ) !important;
    }


    h2{
        font-size:
            clamp(
                1.25rem,
                4.5vw,
                1.65rem
            ) !important;
    }
}


/* =============================================================================
   16. PHONE
   <=480px
   ============================================================================= */

@media(max-width:480px){

    /* -------------------------------------------------------------------------
       Global
       ------------------------------------------------------------------------- */

    body{
        font-size:15px;
    }


    /* -------------------------------------------------------------------------
       Project/profile controls become vertical
       ------------------------------------------------------------------------- */

    .blaise-responsive-projectbar{

        grid-template-columns:
            minmax(0,1fr) !important;
    }


    /* -------------------------------------------------------------------------
       Definition / Templates become stacked
       ------------------------------------------------------------------------- */

    .architect-mode-row,
    .blaise-mode-row,
    [class*="mode-row"]{

        grid-template-columns:
            minmax(0,1fr) !important;
    }


    .architect-mode-button,
    .blaise-architect-mode-button{

        min-height:
            54px !important;

        font-size:
            18px !important;
    }


    /* -------------------------------------------------------------------------
       Marketplace toolbar stacked
       ------------------------------------------------------------------------- */

    .atb-toolbar,
    .at-toolbar,
    .dt-toolbar,
    .bct-toolbar,
    .template-toolbar,
    .marketplace-toolbar{

        grid-template-columns:
            minmax(0,1fr) !important;
    }


    /* -------------------------------------------------------------------------
       Marketplace one card per row
       ------------------------------------------------------------------------- */

    .atb-grid,
    .at-grid,
    .dt-grid,
    .bct-grid,
    .template-grid,
    .marketplace-grid,
    [class*="template-grid"],
    [class*="marketplace-grid"]{

        grid-template-columns:
            minmax(0,1fr) !important;
    }


    /* -------------------------------------------------------------------------
       Architect canvas one cell per row
       ------------------------------------------------------------------------- */

    .architecture-items.cols-4,
    .architecture-items.cols-3{

        grid-template-columns:
            minmax(0,1fr) !important;
    }


    .architecture-group-title{

        text-align:left !important;
    }


    /* -------------------------------------------------------------------------
       Action buttons
       ------------------------------------------------------------------------- */

    .blaise-responsive-actions{

        display:grid !important;

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;
    }


    .blaise-responsive-actions > *{

        width:100% !important;
    }


    /* -------------------------------------------------------------------------
       Modals become mobile sheets
       ------------------------------------------------------------------------- */

    [role="dialog"],
    .modal,
    .dialog,
    .at-dialog,
    .dt-dialog,
    .bct-dialog,
    .template-dialog,
    [class*="modal"],
    [class*="dialog"]{

        position:fixed !important;

        left:0 !important;
        right:0 !important;
        bottom:0 !important;

        top:auto !important;

        width:100vw !important;
        max-width:100vw !important;

        max-height:92dvh !important;

        margin:0 !important;

        border-radius:
            16px
            16px
            0
            0 !important;

        overflow-y:auto !important;
    }


    /* -------------------------------------------------------------------------
       Template modal actions
       ------------------------------------------------------------------------- */

    [role="dialog"] footer,
    .modal footer,
    .dialog footer,
    [class*="dialog"] footer{

        position:sticky;

        bottom:0;

        background:inherit;

        z-index:2;
    }


    /* -------------------------------------------------------------------------
       Forms
       ------------------------------------------------------------------------- */

    textarea{

        min-height:160px !important;
    }


    /* -------------------------------------------------------------------------
       Very long labels
       ------------------------------------------------------------------------- */

    button,
    a,
    span,
    label{

        overflow-wrap:anywhere;
    }
}


/* =============================================================================
   17. VERY SMALL PHONE
   <=380px
   ============================================================================= */

@media(max-width:380px){

    .blaise-responsive-actions{

        grid-template-columns:
            minmax(0,1fr) !important;
    }


    .blaise-responsive-stagebar > *{

        flex-basis:
            160px !important;

        min-width:
            160px !important;
    }
}


/* =============================================================================
   18. REDUCED MOTION
   ============================================================================= */

@media(prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{

        scroll-behavior:auto !important;

        transition-duration:
            .001ms !important;

        animation-duration:
            .001ms !important;

        animation-iteration-count:
            1 !important;
    }
}


/* =============================================================================
   19. SAFE AREA FOR MOBILE DEVICES
   ============================================================================= */

@supports(
    padding:
        max(
            0px,
            env(safe-area-inset-left)
        )
){

    @media(max-width:768px){

        body{

            padding-left:
                env(safe-area-inset-left);

            padding-right:
                env(safe-area-inset-right);
        }


        .blaise-responsive-sidebar{

            padding-left:
                env(safe-area-inset-left);
        }
    }
}