/* ─────────────────────────────────────────────────────────────────────
   Batch conversion (batch.html). Everything the single wizard already
   styles -- rail, drop zone, swatches, preview frame, payment card,
   download -- comes from styles.css and convert.css; this is only the
   tables that replace "one course" with "several".
   ───────────────────────────────────────────────────────────────────── */

.batch-head { margin-left: 0; }

/* Step 1: the chosen files, one per line, removable. */
.batch-files { list-style: none; margin: 18px 0 20px; padding: 0; display: grid; gap: 8px; }
.batch-files li {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel);
  padding: 10px 14px;
}
.batch-files .bf-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-weight: 560; }
.batch-files .bf-size { color: var(--muted); font-size: 13.5px; white-space: nowrap; }

/* The course tables (step 2, step 4). Scroll sideways on a phone rather
   than squeezing a course name into one letter per line. */
.batch-table-wrap { overflow-x: auto; margin: 18px 0 10px; }
.batch-table { width: 100%; min-width: 520px; border-collapse: collapse; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-lg); }
.batch-table th, .batch-table td { text-align: left; padding: 11px 14px; vertical-align: top;
  border-bottom: 1px solid var(--line); }
.batch-table thead th { font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.batch-table tbody tr:last-child td { border-bottom: 0; }
.batch-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.batch-table .bt-name { font-weight: 600; overflow-wrap: anywhere; }
.batch-table .bt-file { display: block; font-size: 13px; color: var(--muted); font-weight: 400; overflow-wrap: anywhere; }
.batch-table .bt-note { display: block; font-size: 13px; margin-top: 4px; }
.bt-warn { color: var(--warn); }
.bt-err { color: var(--err); }
.bt-ok { color: var(--ok); }
.batch-table details { margin-top: 6px; font-size: 14px; }
.batch-table details summary { cursor: pointer; color: var(--accent); }
.batch-table .pf-table { margin: 8px 0 4px; }
.batch-table tr.is-out td { opacity: .6; }
.batch-table tr.is-viewing td { background: var(--accent-soft); }
.batch-table .bt-action { text-align: right; white-space: nowrap; }

.batch-userdata {
  max-width: var(--measure); border: 1px solid var(--line); border-left: 4px solid var(--warn);
  border-radius: var(--r-lg); background: var(--panel); padding: 14px 18px; margin: 14px 0 4px;
}
.batch-userdata p { margin: 0 0 8px; color: var(--ink-soft); }
.batch-userdata p:last-child { margin-bottom: 0; }

/* Step 4: the batch's progress. Determinate, unlike the wizard's sliding
   bar: the width is the batch's share done, and it moves smoothly. */
.batch-bar { max-width: none; margin: 18px 0 0; height: 8px; }
.batch-bar .bar-fill { animation: none; margin-left: 0; width: 0; transition: width .5s ease; }

/* Step 4: the course being previewed, under the table. */
.batch-preview { margin-top: 26px; }
.batch-preview h2 { font-size: 20px; margin: 0 0 12px; overflow-wrap: anywhere; }

/* Step 5: what is being bought. */
.batch-pick { list-style: none; margin: 18px 0 10px; padding: 0; display: grid; gap: 6px; }
.batch-pick label { display: flex; gap: 10px; align-items: baseline; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); cursor: pointer; }
.batch-pick input { flex: none; }
.batch-pick .bp-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.batch-pick .bp-note { color: var(--muted); font-size: 13px; white-space: nowrap; }
.batch-pick li.is-off label { cursor: default; opacity: .65; }
.batch-total { font-size: 16px; margin: 6px 0 20px; }

/* Step 6: a download per course. */
.batch-dl { list-style: none; margin: 18px 0 14px; padding: 0; display: grid; gap: 8px; }
.batch-dl li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); padding: 10px 14px; }
.batch-dl .bd-name { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; font-weight: 560; }
.batch-dl .bd-meta { color: var(--muted); font-size: 13.5px; }
/* Two courses can share a title; the file name tells them apart. */
.batch-dl .bd-file { display: block; font-size: 13px; color: var(--muted); font-weight: 400; }
.batch-unbought { color: var(--ink-soft); }