/*
 * Styles for the "Process a folder" page (automation.html, templates/BatchPage.tsx) and its
 * instructions page (public/automation-guide.html). Plain CSS so every app can use it,
 * including apps without Tailwind. The defaults reproduce the apps' shared Tailwind look
 * (slate-950 page, slate-900/70 cards, slate-800 controls, sky accent: BasicFlow, StepStrip,
 * ModeToggle); an app with another palette overrides the --bp-* variables on :root.
 *
 * Template: the page imports this file from shared/; each guide links a byte-identical copy at
 * <app>/public/automation-page.css (check with cmp) plus its theme in an inline <style>.
 */
:root {
  --bp-font: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --bp-heading-font: var(--bp-font);
  --bp-bg: #020617;                                   /* slate-950 */
  --bp-header: linear-gradient(to right, #0f172a, #0f172a, rgb(30 41 59 / .6));
  --bp-panel: rgb(15 23 42 / .7);                     /* slate-900/70 */
  --bp-line: #1e293b;                                 /* slate-800 */
  --bp-control: #1e293b;                              /* slate-800 */
  --bp-control-hover: #334155;                        /* slate-700 */
  --bp-control-line: #334155;                         /* slate-700 */
  --bp-code: #020617;
  --bp-ink: #ffffff;
  --bp-text: #e2e8f0;                                 /* slate-200 */
  --bp-soft: #cbd5e1;                                 /* slate-300 */
  --bp-muted: #94a3b8;                                /* slate-400 */
  --bp-accent: #7dd3fc;                               /* sky-300 */
  --bp-accent-hover: #bae6fd;                         /* sky-200 */
  --bp-ring: #38bdf8;                                 /* sky-400 */
  --bp-drop-line: rgb(14 165 233 / .5);               /* sky-500/50 */
  --bp-drop-fill: rgb(14 165 233 / .05);
  --bp-drop-hover: rgb(14 165 233 / .1);
  --bp-icon-fill: rgb(14 165 233 / .2);
  --bp-button: #0284c7;                               /* sky-600 */
  --bp-button-hover: #0ea5e9;                         /* sky-500 */
  --bp-button-ink: #ffffff;
  --bp-error: #fca5a5;                                /* red-300 */
  --bp-max: 80rem;                                    /* max-w-7xl */
  --bp-radius: 12px;                                  /* rounded-xl */
  --bp-button-radius: 8px;
  --bp-kicker-size: 11px;
  --bp-kicker-weight: 600;
  --bp-kicker-spacing: .12em;
  --bp-title-weight: 700;
  --bp-header-stripe: none;
  --bp-ok: #6ee7b7;                                   /* emerald-300 */
}

.bp-page { box-sizing: border-box; min-height: 100vh; margin: 0; padding: 8px; background: var(--bp-bg); color: var(--bp-text); font-family: var(--bp-font); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.bp-page *, .bp-page *::before, .bp-page *::after { box-sizing: border-box; }
.bp-wrap { display: grid; gap: 12px; max-width: var(--bp-max); margin: 0 auto; }
.bp-card { min-width: 0; border: 1px solid var(--bp-line); border-radius: var(--bp-radius); background: var(--bp-panel); padding: 12px; }
.bp-header { position: relative; overflow: hidden; background: var(--bp-header); }
.bp-header::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--bp-header-stripe); }
.bp-cobrand { display: inline-flex; height: 36px; align-items: center; border-radius: 8px; background: #000; padding: 0 10px; }
.bp-cobrand img { height: 24px; width: auto; }
.bp-times { color: var(--bp-muted); font-size: 20px; font-weight: 300; }
.bp-head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.bp-brand { display: flex; min-width: 0; align-items: center; gap: 8px; }
.bp-brand img { height: 32px; width: auto; flex-shrink: 0; }
.bp-brand h1, .bp-brand .bp-app-name { margin: 0; color: var(--bp-ink); font: var(--bp-title-weight) 1.25rem/1.75rem var(--bp-heading-font); }
.bp-brand .bp-kicker { display: block; }
.bp-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.bp-pill { display: inline-flex; min-height: 40px; align-items: center; gap: 8px; border: 1px solid var(--bp-control-line); border-radius: 9999px; background: var(--bp-control); padding: 0 12px; color: var(--bp-soft); font-size: 12px; font-weight: 600; line-height: 1; text-decoration: none; transition: background-color .15s, color .15s; }
.bp-pill:hover { background: var(--bp-control-hover); color: var(--bp-ink); }
.bp-pill svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--bp-muted); }
.bp-lead { margin: 8px 0 0; color: var(--bp-muted); font-size: 12px; line-height: 1.6; }
.bp-kicker { margin: 0; color: var(--bp-accent); font-size: var(--bp-kicker-size); font-weight: var(--bp-kicker-weight); letter-spacing: var(--bp-kicker-spacing); text-transform: uppercase; }
.bp-title { margin: 4px 0 0; color: var(--bp-ink); font: 600 1.125rem/1.75rem var(--bp-heading-font); }
.bp-card p { margin: 8px 0 0; }
.bp-note { color: var(--bp-muted); font-size: 12px; line-height: 20px; }
.bp-page a { color: var(--bp-accent); text-underline-offset: 2px; }
.bp-page a:hover { color: var(--bp-accent-hover); }
.bp-page a.bp-pill { color: var(--bp-soft); }
.bp-page a.bp-pill:hover { color: var(--bp-ink); }
.bp-page code { color: var(--bp-text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; overflow-wrap: anywhere; }
.bp-page :focus-visible { outline: 2px solid var(--bp-ring); outline-offset: 2px; }

/* Folder chooser: the same dashed drop zone as Basic's "Choose a video". */
.bp-drop { position: relative; display: flex; width: 100%; flex-direction: column; align-items: center; gap: 8px; margin-top: 12px; border: 2px dashed var(--bp-drop-line); border-radius: 12px; background: var(--bp-drop-fill); padding: 40px 16px; color: inherit; font: inherit; text-align: center; cursor: pointer; transition: background-color .15s, border-color .15s; }
.bp-drop:hover:not(:disabled) { border-color: var(--bp-ring); background: var(--bp-drop-hover); }
.bp-drop:disabled { cursor: default; opacity: .55; }
.bp-drop-icon { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 9999px; background: var(--bp-icon-fill); color: var(--bp-accent); }
.bp-drop-icon svg { width: 24px; height: 24px; }
.bp-drop strong { color: var(--bp-ink); font-size: 16px; font-weight: 600; }
.bp-drop span { color: var(--bp-muted); font-size: 12px; }
.bp-chosen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; border: 1px solid var(--bp-line); border-radius: 12px; background: var(--bp-panel); padding: 8px 12px; color: var(--bp-soft); overflow-wrap: anywhere; }
.bp-chosen svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--bp-ok); }

/* Settings: the apps' labelled selects and inputs (slate-800 fields, slate-700 borders). */
.bp-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; min-width: 0; margin: 12px 0 0; border: 0; padding: 0; }
.bp-fields:disabled { opacity: .6; }
.bp-fields label { display: flex; min-width: 0; flex-direction: column; gap: 6px; color: var(--bp-soft); font-size: 12px; font-weight: 600; }
.bp-page select, .bp-page input:not([type=checkbox]):not([type=radio]):not([type=file]) { width: 100%; min-height: 40px; border: 1px solid var(--bp-control-line); border-radius: 6px; background: var(--bp-control); padding: 8px; color: var(--bp-ink); font: 400 14px/1.25 var(--bp-font); }
.bp-page input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--bp-button); }
.bp-page input[type=file] { max-width: 100%; color: var(--bp-soft); font: inherit; font-size: 12px; }
.bp-page select:disabled, .bp-page input:disabled { cursor: not-allowed; opacity: .6; }

/* Buttons: the solid accent action and the slate secondary control. */
.bp-button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: var(--bp-button-radius); background: var(--bp-button); padding: 0 16px; color: var(--bp-button-ink); font: 600 14px/1 var(--bp-font); text-decoration: none; cursor: pointer; transition: background-color .15s; }
.bp-button:hover:not(:disabled) { background: var(--bp-button-hover); }
.bp-page a.bp-button, .bp-page a.bp-button:hover { color: var(--bp-button-ink); }
.bp-button:disabled { cursor: default; opacity: .5; }
.bp-button.bp-secondary { border: 1px solid var(--bp-control-line); background: var(--bp-control); color: var(--bp-text); }
.bp-button.bp-secondary:hover:not(:disabled) { background: var(--bp-control-hover); }
.bp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* Queue table. */
.bp-table-wrap { overflow-x: auto; margin-top: 12px; border: 1px solid var(--bp-line); border-radius: 12px; }
.bp-page table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; }
.bp-page th { padding: 8px 12px; border-bottom: 1px solid var(--bp-line); color: var(--bp-muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.bp-page td { padding: 10px 12px; border-top: 1px solid var(--bp-line); vertical-align: top; }
.bp-page tbody tr:first-child td { border-top: 0; }
.bp-table-wrap td:first-child { min-width: 140px; color: var(--bp-ink); overflow-wrap: anywhere; }
.bp-table-wrap td input { min-width: 110px; }
.bp-table-wrap td select { min-width: 145px; }
.bp-state { color: var(--bp-ink); font-weight: 600; }
.bp-state-saved { color: var(--bp-ok); }
.bp-state-failed { color: var(--bp-error); }
.bp-page td small { display: block; max-width: 300px; margin-top: 4px; color: var(--bp-muted); font-size: 12px; }
.bp-status { margin: 12px 0 0; color: var(--bp-soft); }
.bp-error { color: var(--bp-error); }

/* Disclosure (agent access) and the instructions page's long-form text. */
.bp-page details > summary { cursor: pointer; color: var(--bp-ink); font-size: 14px; font-weight: 600; }
.bp-page details[open] > summary { margin-bottom: 8px; }
.bp-prose h1 { margin: 4px 0 0; color: var(--bp-ink); font: 700 1.25rem/1.75rem var(--bp-heading-font); }
.bp-prose h2 { margin: 0; color: var(--bp-ink); font: 600 1.125rem/1.75rem var(--bp-heading-font); }
.bp-prose p, .bp-prose li { max-width: 80ch; color: var(--bp-soft); line-height: 1.65; }
.bp-prose ol, .bp-prose ul { margin: 8px 0 0; padding-left: 22px; }
.bp-prose li + li { margin-top: 4px; }
.bp-prose strong { color: var(--bp-ink); }
.bp-prose pre { overflow: auto; margin: 12px 0 0; border: 1px solid var(--bp-line); border-radius: 8px; background: var(--bp-code); padding: 12px 14px; font-size: 13px; line-height: 1.55; }
.bp-prose pre code { overflow-wrap: normal; }
.bp-prose table { margin-top: 12px; }
.bp-prose details > summary { font-size: 15px; }
.bp-prose .note { color: var(--bp-muted); font-size: 12px; }
.bp-prose > :first-child { margin-top: 0; }

/* The hidden analysis engine (AutomationWorker) renders off screen. */
.automation-engine { position: fixed; left: -10000px; top: 0; width: 640px; pointer-events: none; }

@media (min-width: 640px) {
  .bp-page { padding: 16px; }
  .bp-wrap { gap: 20px; }
  .bp-card { padding: 20px; }
  .bp-header { padding: 16px; }
  .bp-brand { gap: 12px; }
  .bp-brand img { height: 36px; }
  .bp-brand h1, .bp-brand .bp-app-name { font-size: 1.5rem; line-height: 2rem; }
  .bp-lead { font-size: 14px; }
  .bp-drop { padding: 48px 16px; }
}
@media (min-width: 1024px) { .bp-page { padding: 24px; } }
@media (max-width: 639px) { .bp-fields { grid-template-columns: 1fr; } }