/* library.css — page-specific layout for the library-ingest tool.
   Inherits typography, surface, button, status-chip, progress-bar
   etc. from style.css. Only the multi-card action grid is new. */

section.card.pipeline {
    border-left: 3px solid var(--accent, #236282);
}

.field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0.75rem 0;
}
.field-row label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--ink-2, #555);
    font-size: 13px;
    flex: 1 1 160px;
}
.field-row label:has(input[type=checkbox]) {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    color: var(--ink, #222);
}
.field-row input,
.field-row select {
    font: inherit;
    font-size: 13px;
    padding: 6px 8px;
    border: 1px solid var(--border, #d8d6cf);
    border-radius: 4px;
    background: var(--bg, #fff);
    color: var(--ink, #222);
}

.counts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-top: 0.5rem;
}
.count-card {
    background: var(--surface-2, #f7f6f1);
    border: 1px solid var(--border-quiet, #ddd9d0);
    border-radius: 6px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.count-card .label {
    font-size: 11px;
    color: var(--ink-3, #888);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.count-card .value {
    font-family: var(--font-mono, monospace);
    font-size: 18px;
    font-weight: 500;
}

.runs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: 0.5rem;
}
.runs-table th, .runs-table td {
    text-align: left;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-quiet, #e8e5db);
}
.runs-table th {
    color: var(--ink-3, #888);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.runs-table td.empty {
    text-align: center;
    color: var(--ink-3, #888);
    padding: 14px;
}
.runs-table .stats {
    font-family: var(--font-mono, monospace);
    color: var(--ink-2, #555);
    font-size: 12px;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.runs-table button.stop {
    font: inherit;
    font-size: 12px;
    padding: 2px 8px;
    border: 1px solid var(--border, #d8d6cf);
    background: transparent;
    color: var(--ink-2, #555);
    border-radius: 3px;
    cursor: pointer;
}
.runs-table button.stop:hover { color: var(--error, #9e2424); border-color: var(--error, #9e2424); }

/* Per-step action grid */
.step-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin-top: 0.5rem;
}
.step-card {
    background: var(--surface-2, #f7f6f1);
    border: 1px solid var(--border-quiet, #e0ddd5);
    border-radius: 6px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.step-card h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}
.step-card label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--ink-2, #555);
}
.step-card label:has(input[type=checkbox]) {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    color: var(--ink, #222);
    font-size: 13px;
}
.step-card input, .step-card select {
    font: inherit;
    font-size: 13px;
    padding: 5px 7px;
    border: 1px solid var(--border, #d8d6cf);
    border-radius: 4px;
    background: var(--bg, #fff);
    color: var(--ink, #222);
}
.step-card button {
    align-self: flex-start;
    font: inherit;
    font-size: 13px;
    padding: 5px 12px;
    background: var(--accent, #236282);
    color: #fff;
    border: 1px solid var(--accent, #236282);
    border-radius: 4px;
    cursor: pointer;
}
.step-card button:hover { filter: brightness(1.08); }
.step-card button:disabled { opacity: 0.5; cursor: progress; }
.step-card .status {
    font-family: var(--font-mono, monospace);
    font-size: 12px;
    padding: 5px 8px;
    border: 1px solid var(--border-quiet, #ddd9d0);
    border-radius: 4px;
    background: var(--bg, #fff);
}
.step-card .status.ok    { color: var(--ok, #236a2e); border-color: #c4dcc4; }
.step-card .status.error { color: var(--error, #9e2424); border-color: #e4c4c4; }

.raw-output {
    margin: 0;
    padding: 8px 10px;
    background: var(--bg, #fff);
    border: 1px solid var(--border-quiet, #ddd9d0);
    border-radius: 4px;
    font-family: var(--font-mono, monospace);
    font-size: 11px;
    line-height: 1.45;
    max-height: 280px;
    overflow: auto;
    white-space: pre-wrap;
}

/* ── Ranking & sweep panel ─────────────────────────────────────── */
.rank-current { margin: 2px 0 8px; font-size: 14px; }
.rank-progress { margin: 8px 0 12px; }
.rank-bar {
    display: flex;
    height: 14px;
    width: 100%;
    border-radius: 7px;
    overflow: hidden;
    background: var(--surface-2, #e6e3dd);
}
.rank-bar .seg { height: 100%; }
.rank-bar .seg.done    { background: #3f9d58; }
.rank-bar .seg.failed  { background: #c2453d; }
.rank-bar .seg.running { background: #d8a23a; }
.rank-legend { margin-top: 6px; font-size: 12px; }
.rank-table { width: 100%; margin-top: 10px; font-size: 13px; }
.rank-table th, .rank-table td { padding: 3px 8px; text-align: left; }
.rank-table td:nth-child(2) { font-variant-numeric: tabular-nums; }
label.check {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: normal;
}

/* ── Sweep dashboard (unattended run) ─────────────────────────── */
.sweep-bars { display: flex; flex-wrap: wrap; gap: 6px; }
.sweep-pill {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 12px; background: #eee; color: #333; white-space: nowrap;
}
.sweep-pending     { background: #e8eef7; }
.sweep-running     { background: #fff4d6; }
.sweep-failed      { background: #fde2e0; }
.sweep-quarantined { background: #f6d6f0; }
.sweep-done        { background: #dcf2e0; }
.sweep-active { margin-top: 8px; font-size: 13px; }
.sweep-active-line { display: flex; align-items: center; gap: 12px; }
.sweep-live { font-weight: 600; font-size: 14px; }
.sweep-live::first-letter { color: #1f9d57; }   /* the ● status dot */
.sweep-idle { margin-top: 8px; font-size: 13px; }
.sweep-stop { font-size: 12px; padding: 2px 10px; cursor: pointer;
              border: 1px solid var(--rule, #ccc); border-radius: 4px;
              background: var(--surface, #fff); color: #9e2424; }
.sweep-stop:hover { border-color: #9e2424; background: #fbeaea; }
/* Conflicting controls locked while a sweep is live. */
.button-bar button:disabled, .button-bar button.locked {
    opacity: 0.45; cursor: not-allowed; }
.sweep-stale { color: #b00020; font-weight: 600; }
.sweep-err { font-family: monospace; font-size: 11px; color: #666; max-width: 360px;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sweep-requeue { font-size: 11px; padding: 1px 6px; cursor: pointer; }