/* Batch comparison workspace. Loaded after site.css and uses its tokens,
   buttons, hero, content sections and FAQ, so the page matches the rest
   of the site. Only the batch-specific parts live here. */

/* site.css scrolls smoothly; in this workspace the export queue must be
   reachable at once while a short batch is still running. */
html:has(body.batch-page){scroll-behavior:auto}

.batch-page .hero{padding-bottom:4px}
.hero-tag{display:inline-flex;align-items:center;gap:9px;margin:0 0 14px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-deep)}

.batch-shell{padding:18px 20px 30px}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:0;padding:0;overflow:hidden}
.editor{padding:22px;min-width:0;display:flex;flex-direction:column}
/* Before any photos arrive, let the dropzone fill the column beside the style panel. */
.editor:has(#pairs:empty) #dropzone{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}

/* section headings: 1 · 2 · 3 */
.section-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.section-bar h2,.export-panel h2{display:flex;align-items:center;gap:10px;margin:0;font-size:16px;font-weight:700;line-height:1.25}
.step-no{
  width:26px;height:26px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;font-size:13px;font-weight:700;
}
.batch-list-actions{display:flex;gap:14px;align-items:center;font-size:13px;color:var(--ink-3)}
.text-button{background:none;border:0;padding:0;color:var(--accent-deep);font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.text-button:hover{color:var(--ink)}
.text-button:disabled{opacity:.45;cursor:not-allowed}

/* dropzone: same look as the homepage editor */
#dropzone{
  border:2.5px dashed var(--line-strong);border-radius:var(--r-lg);
  background:radial-gradient(600px 200px at 50% -60px,rgba(232,137,12,.06),transparent),#fbf9f3;
  padding:38px 20px;text-align:center;
  transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease);
}
#dropzone:hover,#dropzone.dragover{border-color:var(--accent);background-color:var(--accent-soft)}
#dropzone[aria-disabled="true"]{opacity:.6}
#dropzone .dz-icon{margin-bottom:8px;line-height:0}
#dropzone h3{font-family:var(--font-display);font-size:26px;font-weight:700;margin:0 0 6px}
#dropzone p{margin:0 0 18px;color:var(--ink-2);font-size:14px;line-height:1.55}
#dropzone label.btn{cursor:pointer;align-self:center}
#pairs:empty{display:none}

.notice{display:flex;align-items:center;justify-content:center;gap:6px;margin:12px 0 16px;font-size:13px;color:var(--ink-3);text-align:center}
.notice.error{color:var(--danger);background:var(--danger-soft);border-radius:var(--r-sm);padding:9px 12px;justify-content:flex-start;text-align:left}

.empty-hint{padding:18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);text-align:center}
.empty-hint p{margin:0;font-size:13px;color:var(--ink-3)}
.empty-hint .eh-title{font-weight:700;color:var(--ink-2);margin-bottom:10px}
.eh-files{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-bottom:10px}
.eh-files code{font-family:var(--font-mono);font-size:12px;padding:4px 8px;border-radius:6px;background:var(--card);border:1px solid var(--line);color:var(--ink)}
.eh-files code:nth-child(odd){border-color:rgba(24,110,81,.3)}

/* pair cards (rendered by batch-app.js) */
.pair-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pair-card{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--card);box-shadow:0 1px 2px rgba(28,33,30,.04);transition:border-color var(--t-fast) var(--ease)}
.pair-card:hover{border-color:var(--line-strong)}
.pair-head{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;font-size:13px;border-bottom:1px solid var(--line)}
.pair-state{color:var(--ink-3);font-size:12px}
.pair-preview{display:block;width:100%;height:auto;background:repeating-conic-gradient(#ece8de 0 25%,#f8f6f0 0 50%) 50%/16px 16px}
.pair-source{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:9px 12px 4px}
.pair-source>div{min-width:0}
.source-name{display:block;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px;color:var(--ink-2)}
.source-button{border:0;background:none;padding:0;color:var(--accent-deep);font-size:12px;font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.pair-error{margin:4px 12px 6px;font-size:12px;color:var(--danger)}
.pair-actions{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px 12px}
.pair-actions .button{
  border:1.5px solid var(--line-strong);background:transparent;color:var(--ink-2);
  border-radius:8px;padding:6px 11px;font-size:12.5px;font-weight:700;min-height:32px;
  transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease);
}
.pair-actions .button:hover{border-color:var(--ink-2);color:var(--ink)}
.pair-actions [data-action="delete"]:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-soft)}
.pair-actions [data-action="export"]{margin-left:auto;border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep)}
.pair-actions [data-action="export"]:hover{background:var(--accent);color:#fff}
.pair-actions .button:disabled,.source-button:disabled{opacity:.45;cursor:not-allowed}

/* style panel */
.style-panel{background:#fbf9f3;border-left:1px solid var(--line);padding:22px}
.style-panel fieldset{border:0;border-top:1px solid var(--line);margin:0;padding:14px 0 4px}
.style-panel legend{padding:0 8px 0 0;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.style-panel label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:12px}
.style-panel input:not([type=checkbox]),.style-panel select{
  display:block;width:100%;height:40px;margin-top:5px;padding:8px 10px;
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-sm);
  font-size:14px;color:var(--ink);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.style-panel input:focus,.style-panel select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.style-panel input[type=color]{padding:4px;cursor:pointer}
.style-panel input[type=file]{height:auto;padding:7px;font-size:12px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.style-panel .check-field{display:flex;align-items:center;gap:8px;font-weight:500}
.check-field input{accent-color:var(--accent);width:16px;height:16px}
.muted{font-weight:400;color:var(--ink-3)}
.fine-print{font-size:12px;line-height:1.55;color:var(--ink-3);margin:6px 0 10px}
.fine-print a{color:var(--accent-deep);font-weight:600}
.preset-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:14px}
.preset-row .preset{border-radius:10px}
.preset.active{background:var(--accent);border-color:var(--accent);color:#fff}
.style-panel .text-button{margin:-6px 0 12px}

/* export */
.export-panel{
  margin-top:8px;padding:16px;border:1.5px solid var(--accent);border-radius:var(--r-md);
  background:linear-gradient(180deg,#f1f8f4,var(--card) 70%);
}
.export-panel h2{margin-bottom:10px}
.ep-lede{font-size:13.5px;color:var(--ink-2);margin:0 0 10px;line-height:1.5}
.ep-lede strong{color:var(--ink)}
.pass-status{font-size:12.5px;line-height:1.5;color:var(--accent-deep);font-weight:600;margin-bottom:10px}
.export-panel .btn{width:100%;margin-top:8px}
.btn-buy{background:var(--amber);color:#fff;box-shadow:0 6px 18px -8px rgba(232,137,12,.6)}
.btn-buy:hover{background:#c97406}

/* export queue */
.queue-panel{
  margin-top:18px;padding:20px 22px;display:flex;gap:24px;justify-content:space-between;align-items:center;
  background:var(--card);border:1.5px solid var(--accent);border-radius:var(--r-lg);box-shadow:var(--shadow-card);
}
.queue-panel>div:first-child{flex:1;min-width:0}
.queue-panel h2{font-family:var(--font-display);font-size:21px;margin:0 0 4px}
.queue-panel p{font-size:13.5px;color:var(--ink-2);margin:0 0 10px}
.queue-panel progress{width:100%;height:8px;accent-color:var(--accent)}
.queue-actions{display:flex;gap:8px;flex-wrap:wrap;max-width:380px}

.batch-ad-placement{border:1px solid var(--line);text-align:center}

/* examples */
.batch-examples{display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px;align-items:start}
.be-copy .lede{margin-bottom:0}
.be-fig{margin:0;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card)}
.be-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.be-pair div{position:relative;line-height:0}
.be-pair img{width:100%;height:170px;object-fit:cover;border-radius:6px}
.be-product .be-pair img{object-fit:contain;background:#fff}
.be-pair i{position:absolute;left:8px;top:8px;line-height:1;font-style:normal;font-size:11.5px;font-weight:700;padding:4px 8px;border-radius:5px;background:rgba(28,33,30,.74);color:#fff}
.be-fig figcaption{margin-top:10px;font-size:13px;color:var(--ink-3);text-align:center}

@media(max-width:980px){
  .workspace{grid-template-columns:minmax(0,1fr) 300px}
  .pair-grid{grid-template-columns:1fr}
  .batch-examples{grid-template-columns:1fr 1fr}
  .be-copy{grid-column:1/-1}
}
@media(max-width:760px){
  .batch-shell{padding:12px 14px 24px}
  .workspace{grid-template-columns:1fr}
  .editor,.style-panel{padding:16px}
  .style-panel{border-left:0;border-top:1px solid var(--line)}
  .pair-grid{grid-template-columns:1fr}
  .queue-panel{display:block}
  .queue-actions{margin-top:14px}
  .batch-examples{grid-template-columns:1fr}
  .be-pair img{height:150px}
}

.sandbox-notice{padding:12px 16px;border:1px solid #d6aa4e;border-radius:8px;background:#fff4d8;color:#654b14;font-size:14px;font-weight:600}

.style-status{font-size:12px;line-height:1.5;color:var(--danger);margin:0 0 12px}
.style-status:empty{display:none}
.current-logo{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:13px;min-width:0}
.current-logo img{object-fit:contain;flex:none;background:repeating-conic-gradient(#ece8de 0 25%,#f8f6f0 0 50%) 50%/12px 12px;border:1px solid var(--line);border-radius:6px}
.current-logo span{overflow-wrap:anywhere;min-width:0}
.mobile-batch-nav{display:none}
#mobileStyleDialog{padding:0;border:1px solid var(--line-strong);border-radius:var(--r-lg);background:var(--paper);color:var(--ink);max-width:100%;width:calc(100% - 20px);max-height:calc(100dvh - 24px);overscroll-behavior:contain}
#mobileStyleDialog::backdrop{background:rgba(28,33,30,.55)}
.mobile-style-header{position:sticky;top:0;z-index:1;padding:12px 16px;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 4px 12px rgba(28,33,30,.08)}
.mobile-style-bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mobile-style-bar h2{font-family:var(--font-display);font-size:21px;margin:0}
.mobile-style-bar button{min-width:44px;min-height:44px}
#mobilePreview{margin:0}
#mobilePreview figcaption{font-size:11px;color:var(--ink-3);margin:0 0 5px}
#mobilePreview canvas{display:block;max-width:100%;width:auto;max-height:150px;margin:auto;background:repeating-conic-gradient(#ece8de 0 25%,#f8f6f0 0 50%) 50%/12px 12px}
#mobileStyleDialog .export-panel{scroll-margin-top:230px}
@media(max-width:760px){
  .batch-page{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  .mobile-batch-nav{position:fixed;bottom:0;left:0;right:0;z-index:5;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line-strong);box-shadow:0 -4px 16px rgba(28,33,30,.08)}
  .mobile-batch-nav button{min-height:44px;border:1px solid var(--line-strong);border-radius:10px;background:var(--card);color:var(--accent-deep);font:600 14px var(--font-body)}
  #mobileExport{background:var(--accent);border-color:var(--accent);color:#fff}
  #mobileStyleDialog .style-panel{border-top:0}
  #pairs,#dropzone{scroll-margin-top:16px}
}

/* Once pairs exist the dropzone shrinks to a slim "add more" bar. */
.editor:has(.pair-card) #dropzone{display:flex;align-items:center;gap:14px;padding:12px 16px;text-align:left}
.editor:has(.pair-card) #dropzone .dz-icon svg{width:36px;height:36px}
.editor:has(.pair-card) #dropzone .dz-icon{margin:0}
.editor:has(.pair-card) #dropzone h3{font-family:var(--font-body);font-size:15px;margin:0;flex:1}
.editor:has(.pair-card) #dropzone p{display:none}
.editor:has(.pair-card) #dropzone .btn{padding:8px 14px;min-height:38px;font-size:13px}