/* =================================================================
   Batch PDF tools — merge, split, compress, image export
   =================================================================
   Shares the editor's language deliberately: the same dashed drop
   zone, the same card edges, the same restrained blue. A visitor
   moving from the editor to Merge should recognise the same product,
   not a second one that happens to live under the same nav item.

   Only the design tokens from main.css are used, so the dark theme and
   any future palette change carry over without edits here.
   ================================================================= */

.pdft {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* An element that sets its own `display` outranks the browser's own
   [hidden] rule, so `hidden` has to be re-asserted for anything inside
   this component. Without this the busy panel sat on screen next to a
   finished status message, and the workspace and drop zone were both
   visible at once. */
.pdft [hidden] { display: none !important; }

/* -----------------------------------------------------------------
   Empty state
   ----------------------------------------------------------------- */

.pdft-drop {
    padding: clamp(1.5rem, 4vw, 3rem) 1.25rem;
    background:
        radial-gradient(120% 90% at 50% 0%, var(--brand-soft) 0%, transparent 62%),
        var(--surface);
}

.pdft-drop.is-dragover { background: var(--brand-soft); }

.pdft-drop__inner {
    display: grid;
    justify-items: center;
    gap: .55rem;
    max-width: 34rem;
    margin-inline: auto;
    padding: clamp(1.5rem, 4vw, 2.5rem) 1.25rem;
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    text-align: center;
}

.pdft-drop.is-dragover .pdft-drop__inner {
    border-color: var(--brand);
    background: var(--bg);
}

.pdft-drop__glyph {
    font-size: 2rem;
    line-height: 1;
    color: var(--brand);
}

.pdft-drop__title {
    margin: 0;
    font-size: clamp(1.05rem, 2.4vw, 1.25rem);
    font-weight: 700;
    color: var(--ink);
}

.pdft-drop__sub { margin: 0; font-size: .92rem; color: var(--ink-3); }

.pdft-drop__limit {
    margin: .35rem 0 0;
    max-width: 30rem;
    font-size: .82rem;
    line-height: 1.6;
    color: var(--ink-4);
}

.pdft-link {
    font: inherit;
    color: var(--brand-strong);
    background: none;
    border: 0;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.pdft-link:hover { color: var(--brand); }
.pdft-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 3px; }

/* -----------------------------------------------------------------
   Workspace
   ----------------------------------------------------------------- */

.pdft-work { padding: 1.1rem; display: grid; gap: .9rem; }

.pdft-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
}

.pdft-head__summary { margin: 0; font-size: .85rem; font-weight: 600; color: var(--ink-3); }
.pdft-head__actions { display: flex; flex-wrap: wrap; gap: .4rem; }

.pdft-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-size: .85rem;
    font-weight: 600;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .45rem .75rem;
    min-height: 40px;
    cursor: pointer;
    transition: background .14s ease, color .14s ease, border-color .14s ease;
}

.pdft-btn:hover:not(:disabled) {
    background: var(--brand-soft);
    border-color: var(--brand-border);
    color: var(--brand-strong);
}

.pdft-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pdft-btn:disabled { opacity: .45; cursor: not-allowed; }

/* -----------------------------------------------------------------
   The chosen files
   ----------------------------------------------------------------- */

.pdft-list {
    display: grid;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pdft-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto auto;
    align-items: center;
    gap: .5rem;
    padding: .5rem .6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-soft, var(--bg));
}

.pdft-item__name {
    min-width: 0;
    font-size: .88rem;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pdft-item__meta { font-size: .78rem; color: var(--ink-4); white-space: nowrap; }

.pdft-item__btn {
    font: inherit;
    font-size: .9rem;
    line-height: 1;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: var(--ink-3);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.pdft-item__btn:hover:not(:disabled) {
    background: var(--brand-soft);
    border-color: var(--brand-border);
    color: var(--brand-strong);
}

.pdft-item__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.pdft-item__btn:disabled { opacity: .35; cursor: not-allowed; }

.pdft-item__btn--remove:hover:not(:disabled) {
    background: var(--err-bg);
    border-color: color-mix(in srgb, var(--err) 30%, transparent);
    color: var(--err);
}

/* -----------------------------------------------------------------
   Options
   ----------------------------------------------------------------- */

.pdft-options { display: grid; gap: .8rem; }

.pdft-options--pair { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

.pdft-field { display: grid; gap: .3rem; font-size: .82rem; color: var(--ink-3); }
.pdft-field > span,
.pdft-field > label { font-weight: 600; color: var(--ink-2); }

.pdft-field input,
.pdft-field select {
    font: inherit;
    font-size: .88rem;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .5rem .6rem;
    min-height: 42px;
    width: 100%;
    max-width: 28rem;
}

.pdft-field input:focus-visible,
.pdft-field select:focus-visible {
    outline: none;
    border-color: var(--brand);
    box-shadow: var(--focus-ring);
}

.pdft-field__note {
    margin: 0;
    max-width: 34rem;
    font-size: .79rem;
    line-height: 1.6;
    color: var(--ink-4);
}

.pdft-field__note code {
    font-family: var(--mono);
    font-size: .95em;
    padding: .05rem .3rem;
    border-radius: 4px;
    background: var(--bg-muted, var(--bg-soft));
}

/* A trade the visitor should not be able to miss, so it is a bordered
   block rather than grey small print. */
.pdft-warn {
    padding: .75rem .9rem;
    border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
    border-radius: var(--radius-sm);
    background: var(--warn-bg);
    color: var(--ink-2);
    font-size: .83rem;
    line-height: 1.65;
}

.pdft-warn p { margin: 0; max-width: 46rem; }
.pdft-warn strong { color: var(--ink); }

.pdft-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* -----------------------------------------------------------------
   States
   ----------------------------------------------------------------- */

.pdft-status {
    margin: 0;
    padding: .6rem .75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font-size: .85rem;
    line-height: 1.6;
    overflow-wrap: break-word;
}

.pdft-status--ok { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 30%, transparent); color: var(--ink-2); }
.pdft-status--warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 35%, transparent); color: var(--ink-2); }
.pdft-status--error { background: var(--err-bg); border-color: color-mix(in srgb, var(--err) 30%, transparent); color: var(--ink-2); }

.pdft-busy {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .6rem .75rem;
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    color: var(--brand-strong);
    font-size: .85rem;
    font-weight: 600;
}

.pdft-busy__spinner {
    width: 15px;
    height: 15px;
    border: 2px solid color-mix(in srgb, var(--brand) 30%, transparent);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: pdft-spin .7s linear infinite;
}

@keyframes pdft-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .pdft-busy__spinner { animation-duration: 2.4s; }
}

/* -----------------------------------------------------------------
   Narrow screens
   ----------------------------------------------------------------- */

@media (max-width: 560px) {
    .pdft-work { padding: .85rem; }

    /* The filename takes its own row so it is never squeezed to an
       ellipsis by the buttons beside it. */
    .pdft-item {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: .4rem;
    }

    .pdft-item__name { grid-column: 1 / -1; }
    .pdft-head__actions { width: 100%; }
    .pdft-btn { flex: 1 1 auto; }
    .pdft-field input,
    .pdft-field select { max-width: none; }
}