/**
 * Merge PDF.
 */

/* ── The list of files ─────────────────────────────────────────────────── */

.em-merge__head {
    display: flex;
    flex-wrap: wrap;
    gap: .8em;
    align-items: baseline;
    margin-bottom: .3em;
}

.em-merge__count {
    margin: 0;
    font-size: 1.15rem;
    color: var(--em-ink, inherit);
}

.em-merge__count:focus-visible { outline: 2px solid var(--em-brand, #2563eb); outline-offset: 3px; }

.em-merge__add {
    margin-left: auto;
    padding: .45em 1em;
    border: 1px solid var(--em-brand, #2563eb);
    border-radius: 8px;
    background: transparent;
    color: var(--em-brand, #2563eb);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.em-merge__howto {
    margin: 0 0 1em;
    font-size: .92rem;
    color: var(--em-soft, #6b7280);
}


.em-merge__grip {
    color: var(--em-soft, #6b7280);
    cursor: grab;
    user-select: none;
}

.em-merge__meta {
    flex: 1 1 auto;
    min-width: 0;
}

.em-merge__filename {
    display: block;
    color: var(--em-ink, inherit);
    /* A long filename must not push the arrows off the row. */
    overflow-wrap: anywhere;
}

.em-merge__sub {
    display: block;
    font-size: .88rem;
    color: var(--em-soft, #6b7280);
}

/* ── Row buttons ───────────────────────────────────────────────────────── */

.em-merge__acts {
    display: flex;
    flex: 0 0 auto;
    gap: .3em;
}


/* ── Doing it ──────────────────────────────────────────────────────────── */

.em-merge__go {
    display: flex;
    flex-wrap: wrap;
    gap: .8em;
    align-items: center;
    margin-top: 1.2em;
}

.em-merge__field {
    display: flex;
    align-items: center;
    gap: .6em;
    color: var(--em-ink, inherit);
}

.em-merge__name {
    width: 14em;
    padding: .5em .7em;
    border: 1px solid var(--em-line, #e5e7eb);
    border-radius: 8px;
    background: var(--em-surface, #fff);
    color: var(--em-ink, inherit);
    font: inherit;
}

.em-merge__button {
    padding: .6em 1.3em;
    border: 1px solid var(--em-brand, #2563eb);
    border-radius: 8px;
    background: var(--em-brand, #2563eb);
    color: var(--em-on-brand, #fff);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.em-merge__button:disabled { opacity: .5; cursor: default; }

.em-merge__reset {
    padding: .6em 1em;
    border: 1px solid var(--em-line, #e5e7eb);
    border-radius: 8px;
    background: transparent;
    color: var(--em-soft, #6b7280);
    font: inherit;
    cursor: pointer;
}

/* ── What it has to say ────────────────────────────────────────────────── */

.em-merge__status {
    margin: 1em 0 0;
    padding: .65em .9em;
    border-left: 3px solid var(--em-line, #e5e7eb);
    border-radius: 0 8px 8px 0;
    font-size: .92rem;
    line-height: 1.55;
    color: var(--em-ink, inherit);
}

.em-merge__status.is-good { border-left-color: #16a34a; background: rgba(22, 163, 74, .10); }
.em-merge__status.is-working { border-left-color: var(--em-brand, #2563eb); background: var(--em-tint, #f0f6ff); }

.em-merge__promise { margin-top: 1.4em; }

@media (max-width: 560px) {
    .em-merge__add { margin-left: 0; }
    .em-merge__grip { display: none; }
    .em-merge__go { flex-direction: column; align-items: stretch; }
    .em-merge__field { justify-content: space-between; }
    .em-merge__name { width: 9em; }
}

/* The refusal slot sits between the list and the privacy note, so a message
   about a file appears where the files are. */
.em-merge__problem:empty { display: none; }
.em-merge__problem { margin-top: 1em; }