/*
 * AI Comic Studio / AI Manga Studio — tidy pass (owner, 6 Nov 2026: "a lot
 * going on, streamline").
 *
 * Loaded after manga-creator.css and comic-creator.css, and only on the two
 * studio pages, so the pass is one file to read and one line in tool.php to
 * roll back. The studio's own sheets carry !important in places (and
 * public-studio-pages.css more), which is why some rules here need it too.
 */

/* ── Status: one quiet line, not three boxed chips ────────────────────────
 * "Saved to this device", the AI allowance and the guest's comics-left count
 * each sat in its own bordered box, so the first row read as three warnings. */
.et-mgc .et-mgc-studio-bar__meta {
    gap: 0.15rem 0 !important;
    margin-top: 0 !important;
}

.et-mgc .et-mgc-studio-bar__meta .et-mgc-save-status,
.et-mgc .et-mgc-studio-bar__meta .et-mgc-quota-dash {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: var(--et-text-muted) !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    line-height: 1.4;
}

.et-mgc .et-mgc-studio-bar__meta .et-mgc-quota-dash:not([hidden])::before {
    content: "·";
    margin: 0 0.55rem;
    opacity: 0.6;
}

.et-mgc .et-mgc-studio-bar__meta .et-mgc-quota-dash.is-low {
    color: #e1b144 !important;
}

.et-mgc .et-mgc-studio-bar__meta .et-mgc-save-status.is-saving {
    color: var(--et-mgc-accent) !important;
}

/* What gives way when the bar is tight (9 Nov 2026): the free panel count and
   the plan chip never shrink; "Saved to this device" does, to an ellipsis (its
   hover keeps the whole line). At 1024px the count was cut to 29px of its 77. */
.et-mgc .et-mgc-studio-bar__meta { min-width: 0; flex-wrap: nowrap; }
.et-mgc .et-mgc-studio-bar__meta .et-mgc-quota-dash,
.et-mgc .et-mgc-studio-bar__meta .ps-plan-chip { flex: 0 0 auto !important; }
.et-mgc .et-mgc-studio-bar__meta .et-mgc-save-status {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* ── Page strip: one row ───────────────────────────────────────────────────
 * 97px tall for a chapter picker, one page number and three icons: the
 * add-chapter button wrapped under the picker and every control sat at
 * full form height. */
.et-mgc.et-mgc--canvas-first .et-mgc-page-strip {
    gap: 0.5rem 0.75rem;
    padding: 0.3rem 0.5rem !important;
}

.et-mgc .et-mgc-page-strip__chapter {
    flex-wrap: nowrap !important;
    min-width: 0;
}

.et-mgc .et-mgc-page-strip__chapter select {
    height: 2rem;
    min-height: 2rem;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 0.8125rem;
    max-width: 11rem;
}

.et-mgc .et-mgc-page-strip .btn-sm,
.et-mgc .et-mgc-page-strip .et-mgc-page-tab {
    min-height: 2rem;
    height: 2rem;
}

/* ── Landing: the page strip in view, not under the sticky bar ────────────
 * Dismissing the welcome dialog scrolls the strip to the top with a 5rem
 * margin, but the site header and the studio's sticky bar together are
 * ~10.5rem on a desktop, so the strip (chapter picker, page navigation, add
 * and delete page) landed behind them and showed as a thin double line under
 * Script · Art · Letter. */
@media (min-width: 992px) {
    .et-mgc--studio-mode #et-mgc-page-strip {
        scroll-margin-top: calc(4.6rem + var(--et-ps-studio-bar-h, 5.75rem));
    }
}

/* ── Side panel ─────────────────────────────────────────────────────────── */

/* Language over its picker: side by side, "Auto (match what I write)" was
   cut to "Auto (match what I wr". */
.et-mgc .et-mgc-field--lang {
    grid-template-columns: minmax(0, 1fr) !important;
}

.et-mgc .et-mgc-field--lang .et-mgc-lang-select {
    width: 100%;
}

/* ── Phones and small tablets ──────────────────────────────────────────── */
@media (max-width: 767px) {
    /* The bar is sticky so Export and Script · Art · Letter stay in reach on
       a desktop. On a phone it is status, three buttons, the steps and the
       step's own button: 318px at 390 wide, pinned over 40% of the screen
       while the author scrolls the page. */
    .et-public-site .et-mgc.et-mgc--studio-mode .et-mgc-studio-bar {
        position: static;
        box-shadow: none;
    }
}

@media (max-width: 575px) {
    /* Export, New project and ⋯ on one row: they stacked into three. */
    .et-mgc .et-mgc-studio-bar__actions,
    .et-mgc .et-mgc-studio-bar__actions-primary,
    .et-mgc .et-mgc-studio-bar__file-actions {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        gap: 0.4rem !important;
    }

    .et-mgc .et-mgc-studio-bar__actions {
        width: 100%;
    }

    /* Export put its icon over its label, twice the height of New project. */
    .et-mgc .et-mgc-studio-bar__file-actions > .btn {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center;
        white-space: nowrap;
    }

    .et-mgc .et-mgc-studio-bar__actions-secondary {
        margin-left: auto;
    }

    /* Wrapped status lines read as a bulleted list with the "·" leading
       each one; on a phone each item is its own short line instead. */
    .et-mgc .et-mgc-studio-bar__meta {
        gap: 0.1rem 0.9rem !important;
    }

    .et-mgc .et-mgc-studio-bar__meta .et-mgc-quota-dash:not([hidden])::before {
        content: none;
    }

    .et-mgc .et-mgc-page-strip {
        grid-template-columns: minmax(0, 1fr) auto !important;
    }

    /* One column on a phone (9 Nov 2026): in the two-column grid the ⋯ group
       (flex 1 1 100%) lay over New project in a 115px cell and took its taps. */
    html body .et-mgc .et-mgc-studio-bar {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas: "style" "steps" "meta" "actions" !important;
    }

    html body .et-mgc .et-mgc-studio-bar__actions-secondary {
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }
}

/* Every studio window above the backdrop (9 Nov 2026). The backdrop sits at
   10900 and the windows are lifted by id lists; the sign-up window was missing
   from them, so "New project" as a guest showed only a dimmed page whose
   buttons could not be pressed. Matching the id prefix covers any new window. */
body.modal-open .modal.show[id^="et-mgc-"] {
    display: block;
    position: fixed;
    z-index: 10910 !important;
    opacity: 1;
}

/* "6 of 6 panel images · 2 free projects left": the separator was dropped
   after the hidden span in front of it. */
@media (min-width: 576px) {
    #etMangaCreator .et-mgc-studio-bar__meta > #et-mgc-guest-dash:not([hidden])::before {
        content: "\00b7";
        margin: 0 0.55rem;
        opacity: 0.6;
    }
}