/* ============================================================
   ArticleSift — 07 app-layer additions (on top of 06 base.css)
   Components introduced by frontend implementation only.
   ============================================================ */

/* Convert state container (JS renders 05 §3.4 frozen states here) */
.convert-state[hidden] { display: none; }

/* Turnstile widget slot (rendered only when site key is configured) */
.turnstile-slot { margin-top: var(--sp-3); }

/* Pricing pack picker */
.pack-picker { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0 0 var(--sp-4); font-size: var(--fs-sm); color: var(--ink-soft); }
.pack-picker label { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
.pack-picker input { accent-color: var(--accent); }

/* Waitlist / sign-in inline forms */
.waitlist-form { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.waitlist-state .state, .signin-state .state, .checkout-state .state, .batch-state .state { margin-top: var(--sp-3); }
.checkout-state { max-width: 46rem; }

/* Dashboard */
.dash-me .state { max-width: 46rem; }
.batch-urls { width: 100%; resize: vertical; line-height: 1.6; }
.book-title-row { margin: 0 0 var(--sp-3); }
.book-title-row .url-input { width: 100%; }
.batch-form { display: block; }
.batch-form .btn { margin-top: var(--sp-3); }

/* Batch job list (queue UI — also the real capture source for /assets/batch-queue.png) */
.queue { list-style: none; margin: var(--sp-4) 0 0; padding: 0; max-width: 46rem; border: 1px solid var(--rule-strong); border-radius: var(--radius); background: var(--paper-raised); overflow: hidden; }
.queue li { display: flex; align-items: baseline; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-xs); border-bottom: 1px solid var(--rule); }
.queue li:last-child { border-bottom: 0; }
.queue .q-status { flex: none; width: 7.5rem; font-weight: 500; }
.queue .q-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.queue li.is-ok { background: var(--ok-wash); }
.queue li.is-ok .q-status { color: var(--ok); }
.queue li.is-running { background: var(--accent-wash); }
.queue li.is-running .q-status { color: var(--accent-ink); }
.queue li.is-failed { background: var(--err-wash); }
.queue li.is-failed .q-status { color: var(--err); }
.queue li.is-queued .q-status { color: var(--ink-faint); }
.queue .q-error { color: var(--err); }

/* History table */
.history-empty { max-width: 46rem; }

@media (max-width: 639px) {
  .queue .q-status { width: 5.5rem; }
}