/* ============================================================
   PHOTO METADATA REMOVER — page styles
   Layout, proof strip, upload zone, queue, meter and local log
   come from styles.css and merge-pdf.css. This file adds the
   photo card, the metadata table and the state chips.
   ============================================================ */

.pmr-item {
    grid-template-columns: 56px 1.6rem minmax(0, 1fr) auto;
    grid-template-areas: "thumb index body controls";
    align-items: start;
    padding-block: 0.75rem;
}
.pmr-thumb { grid-area: thumb; }
.pmr-thumb img {
    display: block;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    background: var(--color-bg-subtle);
}
.pmr-item .queue__index { grid-area: index; padding-top: 0.15rem; }
.pmr-item .queue__body { grid-area: body; }
.pmr-item .queue__controls { grid-area: controls; padding-top: 0.1rem; }

.pmr-item.is-unsupported .queue__name { color: var(--color-error); }
.pmr-item.is-cleaned .queue__name { color: var(--color-success); }

/* ── State chips ─────────────────────────────────────────── */
.pmr-tag {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.35rem;
    border: 1px solid currentColor;
    border-radius: var(--radius-xs);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    vertical-align: 1px;
}
.pmr-tag--gps { color: var(--color-warning); }
.pmr-tag--ok { color: var(--color-success); }
.pmr-tag--bad { color: var(--color-error); }

/* ── Expandable metadata table ───────────────────────────── */
.pmr-toggle {
    margin-top: 0.3rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-style: dotted;
    cursor: pointer;
}
.pmr-toggle:hover { color: var(--color-accent); }

.pmr-details {
    display: grid;
    grid-template-columns: minmax(84px, 150px) minmax(0, 1fr);
    gap: 0.25rem 0.85rem;
    margin: 0.55rem 0 0.1rem;
    padding: 0.6rem 0 0.2rem;
    border-top: 1px dashed var(--color-border);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.5;
}
.pmr-details[hidden] { display: none; }
.pmr-details dt { color: var(--color-text-muted); }
.pmr-details dd {
    margin: 0;
    color: var(--color-text-secondary);
    overflow-wrap: anywhere;
}
.pmr-details dd.is-loc { color: var(--color-warning); }
.pmr-details dd.is-none { color: var(--color-text-muted); }

/* ── Per-file actions ────────────────────────────────────── */
.pmr-item .queue__btn[data-act="clean"]:hover:not(:disabled) {
    color: var(--color-success);
    border-color: var(--color-success);
    background: var(--color-success-bg);
}

/* ── Notices ─────────────────────────────────────────────── */
.pmr-notice {
    margin: 0.9rem 0 0;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}
.pmr-notice code { color: var(--color-text-secondary); }
.pmr-notice--center { text-align: center; max-width: 62ch; margin-inline: auto; }

/* ── Stat tile warning value ─────────────────────────────── */
.stat-tile__value.is-warn { color: var(--color-warning); }

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 600px) {
    .pmr-item {
        grid-template-columns: 56px 1.6rem minmax(0, 1fr);
        grid-template-areas:
            "thumb index body"
            "controls controls controls";
        row-gap: 0.5rem;
    }
    .pmr-item .queue__controls { justify-self: start; padding-left: 0; }
    .pmr-details { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
    .pmr-details dt { margin-top: 0.35rem; }
}