/* Hide hamburger by default (desktop) */
.nav-toggle {
    display: none;
}

/* Mobile breakpoint */
@media (max-width: 920px) {

    /* Show hamburger, keep grid layout (dots | title | burger) */
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 32px;
        width: 36px;
        margin-left: 6px;
        border: 1px solid rgba(255, 255, 255, .10);
        border-radius: 10px;
        background: #2a2f45;
        cursor: pointer;
        transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
    }

    .nav-toggle:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
    }

    .nav-toggle svg rect {
        fill: #dfe7f5;
    }

    /* Ensure topbar uses the centered grid you already set */
    .topbar {
        display: grid !important;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 12px;
        padding: 12px 12px;
    }

    .topbar h1 {
        justify-self: center;
        text-align: center;
    }

    /* Convert .tabs into a floating panel */
    .tabs {
        position: fixed;
        top: calc(12px + 48px);
        /* under the bar */
        left: 12px;
        right: 12px;
        z-index: 60;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;

        padding: 12px;
        background: rgba(20, 22, 35, .9);
        border: 1px solid rgba(255, 255, 255, .10);
        border-radius: 14px;

        .tabs {
            -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
        }

        transform: translateY(-10px) scale(.98);
        opacity: 0;
        pointer-events: none;
        transition: transform .18s ease,
        opacity .18s ease;
    }

    /* When nav is open */
    .nav-open .tabs {
        transform: none;
        opacity: 1;
        pointer-events: auto;
    }

    /* Make chips full-width buttons */
    .tabs .chip {
        width: 100%;
        text-align: left;
        padding: 10px 12px;
        font-size: 13px;
    }

    /* Avoid page scroll when menu is open */
    .nav-open body {
        overflow: hidden;
    }
}

/* Slightly tighter tablet breakpoint if you like */
@media (min-width: 921px) and (max-width: 1100px) {
    .tabs {
        gap: 8px;
    }

    .chip {
        padding: 7px 10px;
    }
}



/* ===============================
   Mobile Nav (≤ 920px)
   =============================== */
@media (max-width: 920px) {

    /* keep 3-column grid, but tabs become a panel */
    .topbar {
        grid-template-columns: auto 1fr auto;
        row-gap: 10px;
        padding: 12px;
    }

    /* show burger on the right */
    .nav-toggle {
        display: inline-flex;
    }

    /* hide inline tabs; use a floating panel instead */
    .tabs {
        position: fixed;
        top: calc(12px + 56px);
        /* right under the bar */
        right: 12px;
        left: 12px;
        z-index: 60;

        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;

        padding: 12px;
        background: rgba(18, 22, 36, .94);
        border: 1px solid rgba(255, 255, 255, .10);
        border-radius: 14px;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);

        transform: translateY(-12px) scale(.98);
        opacity: 0;
        pointer-events: none;
        transition: transform .18s ease, opacity .18s ease;
    }

    /* when open */
    .nav-open .tabs {
        transform: none;
        opacity: 1;
        pointer-events: auto;
    }

    /* make chips full-width buttons */
    .tabs .chip {
        width: 100%;
        text-align: left;
        padding: 10px 12px;
        font-size: 13px;
    }

    /* keep title centered on mobile */
    .topbar h1 {
        justify-self: center;
    }

    /* avoid page scroll when menu is open */
    .nav-open body {
        overflow: hidden;
    }
}


/* =========================
   Fix: Center align topbar title + traffic dots + burger
   ========================= */
/* ===== Mobile: perfectly center title, pins dots/burger left/right ===== */
@media (max-width: 920px) {
    .topbar {
        position: relative !important;
        display: block !important;
        /* ignore any grid/flex from desktop */
        padding: 12px 56px 12px 48px;
        /* space for burger (right) & dots (left) */
        min-height: 56px;
        /* consistent height */
    }

    /* left dots */
    .topbar .traffic {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        gap: 8px;
        z-index: 2;
    }

    /* center title — mathematically centered regardless of others */
    .topbar h1 {
        position: absolute !important;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        text-align: center;
        font-size: 15px;
        line-height: 1;
        z-index: 1;
        width: 70%;
        /* prevents rare wrap causing shift */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* right hamburger */
    .nav-toggle {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 36px;
        width: 38px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, .10);
        background: #2a2f45;
        box-shadow: 0 8px 18px rgba(0, 0, 0, .35);
        z-index: 3;
    }

    .nav-toggle svg rect {
        fill: #e7ecf3;
    }

    /* slide-down menu panel (keeps your existing layout) */
    .tabs {
        position: fixed;
        top: calc(12px + 56px);
        left: 12px;
        right: 12px;
        z-index: 60;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px;
        background: rgba(18, 22, 36, .94);
        border: 1px solid rgba(255, 255, 255, .10);
        border-radius: 14px;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        transform: translateY(-12px) scale(.98);
        opacity: 0;
        pointer-events: none;
        transition: transform .18s ease, opacity .18s ease;
    }

    .nav-open .tabs {
        transform: none;
        opacity: 1;
        pointer-events: auto;
    }

    .tabs .chip {
        width: 100%;
        text-align: left;
        padding: 10px 12px;
        font-size: 13px;
    }

    /* lock scroll when open */
    .nav-open body {
        overflow: hidden;
    }
}


/* ============================
   Responsive Fix: Live Preview Fit
   ============================ */
@media (max-width: 920px) {

    /* Make the preview/card grid scale nicely */
    .card-grid {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 18px;
        padding: 16px;
        overflow-x: hidden;
    }

    .card {
        width: 100%;
        max-width: 340px;
        /* keeps readable scale on phones */
        height: auto;
        aspect-ratio: 3 / 4;
        /* keep proportions for images/front-back */
        overflow: hidden;
        transform: none !important;
    }

    .card-inner {
        width: 100%;
        height: 100%;
        transform: none !important;
    }

    .card img,
    .card video,
    .card iframe {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: inherit;
    }

    /* inside a preview pane (like playground) */
    .preview-col iframe {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 4;
        border: none;
        overflow: hidden;
    }
}




/* Base: 3-column grid (editors | gutter | preview) */
.playground {
    display: grid;
    grid-template-columns: var(--left, clamp(320px, 40vw, 560px)) 12px 1fr;
    gap: 0;
}

/* Panels */
.preview-col {
    min-height: 520px;
}

/* desktop/tablet */
#preview {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Tablet (<= 1200px): narrow left pane a bit by default */
@media (max-width: 1200px) {
    .playground {
        grid-template-columns: var(--left, clamp(280px, 46vw, 520px)) 12px 1fr;
    }
}

/* Mobile (<= 980px): stack, hide gutter, give preview a fixed viewport height */
@media (max-width: 980px) {
    .playground {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    .gutter {
        display: none;
    }

    .editor-col {
        order: 1;
    }

    .preview-col {
        order: 2;
    }

    #preview {
        height: min(62vh, 70svh);
        /* good tall preview on phones */
    }
}