/* "Download image" button + the page-wide "Creating image" overlay (see exportimage.js). The
   .export-* rules at the bottom only style the extra header/footer lines that exportimage.js
   adds to the picture it renders - they never show on the live page. */

.export-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 16px;
}

/* the page's own Filters button sat centred on its own line; inside the group it just flows. */
.export-actions .h2h-filters-btn,
.export-actions .mm-filters-btn,
.export-actions .mw-filters-btn,
.export-actions .os-filters-btn,
.export-actions .ps-filters-btn {
    display: inline-flex;
    margin: 0;
}

.tr-controls .export-actions,
.mm-sidebar .export-actions {
    margin: 0;
}

.export-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(8, 10, 15, 0.92);
    color: var(--text);
    font: 600 15px var(--font-body);
}

.export-overlay[hidden] {
    display: none;
}

/* ---- only present inside the rendered picture ---- */

.export-sub {
    margin: 4px 0 20px;
    text-align: center;
    font: 600 14px var(--font-body);
    color: var(--text-dim);
}

.export-foot {
    margin-top: 28px;
    text-align: center;
    font: 600 12px var(--font-body);
    letter-spacing: 0.04em;
    color: var(--text-muted);
}