/* Separate Batch presentation. All data, commands and pixel rendering remain in app.js. */
body { --batch-inspector-width:var(--inspector-width); --batch-lock-accent:var(--color-lock-overlay); }
body:has(#batch-selection-remove[aria-pressed=true]) { --editor-tool-accent:var(--color-tool-subtract-bg); }
body[data-work-mode=lock]:has(#batch-selection-add[aria-pressed=true]) { --editor-tool-accent:var(--color-lock-bg); }
.batch-design-system[data-editing=true] .workspace-modes { opacity:.6; }
body:not(.is-upload-screen) .upload-site-header,.is-upload-screen .app-bar { display:none; }
body:not(.is-upload-screen) .intro,.workspace-heading { display:none; }
.shell { min-width:0; }
figure { margin:0; }
.is-upload-screen .workspace { display:contents; }
#image-input,#ase-input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; pointer-events:none; }
#batch-browse { width:100%; }
body:not(.is-upload-screen) .upload-notes { display:none; }
.upload-error:empty { display:none; }
.upload-error { margin-top:var(--space-3); color:var(--color-danger); }
.state-panel:not(.upload-drop-zone) { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:var(--space-5); min-height:calc(100dvh - var(--app-bar-height)); padding:var(--space-8); text-align:center; }
.state-panel h3 { font:var(--type-title-lg); }
.state-panel>p { max-width:48ch; }
.spinner { width:44px; height:44px; border:2px solid var(--color-border-subtle); border-top-color:var(--color-focus); border-radius:50%; animation:spin var(--duration-activity-cycle) linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.is-mask-screen #result-state { display:grid; grid-template-columns:minmax(0,1fr) var(--batch-inspector-width); height:calc(100dvh - var(--app-bar-height)); min-height:580px; }
.mask-review-layout { display:contents; }
.preview-frame { display:grid; place-items:center; position:relative; overflow:hidden; background:var(--color-bg-control); }
.checkerboard { background-color:var(--color-bg-control); background-image:linear-gradient(45deg,var(--color-border-subtle) 25%,transparent 25%),linear-gradient(-45deg,var(--color-border-subtle) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-border-subtle) 75%),linear-gradient(-45deg,transparent 75%,var(--color-border-subtle) 75%); background-size:16px 16px; background-position:0 0,0 8px,8px -8px,-8px 0; }
.preview-frame canvas { display:block; width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain; }
#mask-preview { max-width:90%; max-height:calc(100dvh - 156px); transform-origin:center; touch-action:none; }
.path-vector-overlay { position:absolute; z-index:3; pointer-events:none; overflow:visible; transform-origin:center; will-change:transform; }
.selection-brush-cursor { position:absolute; z-index:2; display:none; border:2px solid var(--color-ink); border-radius:50%; pointer-events:none; transform:translate(-50%,-50%); box-shadow:0 0 0 1px white; }
#mask-preview.selection-cursor,#mask-preview.path-cursor { cursor:crosshair; }
#mask-preview.brush-cursor-active { cursor:none; }
.mask-pan-active,.mask-pan-active #mask-preview { cursor:grab; }
.mask-pan-active.is-panning,.mask-pan-active.is-panning #mask-preview { cursor:grabbing; }
.mask-panel-label { font:var(--type-label); }
.tool-controls { display:grid; gap:var(--space-3); }
.path-help,.original-appearance-help { font:var(--type-help); color:var(--color-text-secondary); }
.brush-size { display:grid; gap:var(--space-2); font:var(--type-body); }
.brush-size input { width:100%; margin:0; }
.mask-tools-divider { height:1px; background:var(--color-border-subtle); }
.original-appearance-actions { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); margin-top:var(--space-3); }
.original-appearance-actions button { min-height:36px; }
body[data-work-mode=edit] .original-appearance-group { display:none; }
.colors-sidebar { display:flex; flex-direction:column; position:relative; }
.colors-sidebar:has(#palette-editor[hidden]) { display:none; }
.selected-color-preview { display:grid; grid-template-columns:28px minmax(0,1fr) 80px 32px; align-items:center; gap:var(--space-1); margin-top:var(--space-3); }
#selected-color-swatch { width:28px; height:28px; border:var(--border-subtle); border-radius:var(--radius-md); }
#color-format { width:80px; padding-left:8px; font:var(--type-help); }
.selected-color-add,.swatch-library-add,.swatch-library-close,.swatch-library-select-all { display:grid; place-items:center; width:32px; height:36px; padding:0; border:0; border-radius:var(--radius-pill); background:transparent; }
.selected-color-add:hover,.screen-eyedropper:hover,.swatch-library-add:hover,.swatch-library-close:hover,.swatch-library-select-all:hover { background:var(--color-hover); }
.palette-actions { margin-top:var(--space-2); }
.palette-source-row { display:flex; align-items:center; gap:var(--space-2); min-width:0; }
.palette-quick-actions { display:flex; flex:none; align-items:center; gap:var(--space-1); }
.palette-quick-actions .quick-color { width:28px; height:28px; }
.palette-quick-actions .studio-eyedropper { margin-left:0; }
.color-source-actions { display:block; flex:1; min-width:0; }
.color-source-actions .ase-upload-button { width:100%; }
.ase-upload-button { cursor:pointer; min-width:0; white-space:nowrap; font-size:13px; line-height:19px; }
.ase-upload-button:has(+*) { min-width:0; }
.ase-format-cue { font:var(--type-help); }
.palette-actions:has(#ase-input:focus-visible) .ase-upload-button { outline:2px solid var(--color-focus); outline-offset:3px; }
.palette-message { color:var(--color-danger); margin-top:var(--space-2); }
.palette-message:empty,#ase-message:empty { display:none; }
.palette-list { display:flex; flex-wrap:wrap; gap:var(--space-2); padding:0; }
.palette-row { position:relative; flex:none; width:32px; height:32px; }
.palette-batch-swatch { display:block; width:32px; height:32px; border:var(--border-control); border-radius:var(--radius-md); }
.palette-row .secondary-button { position:absolute; right:-7px; top:-7px; width:18px; height:18px; min-width:18px; min-height:18px; padding:0; border:var(--border-subtle); background:var(--color-bg-control); }
.palette-row .secondary-button svg { width:12px; height:12px; }
#mask-result-footer button { width:100%; }
#recolor-button { min-height:var(--control-height-prominent); justify-content:space-between; text-align:left; }
#recolor-button::after { content:""; display:block; width:18px; height:18px; flex:none; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat; }
.swatch-library { position:fixed; z-index:var(--z-tooltip); top:100px; right:12px; width:min(360px,calc(100% - 24px)); max-height:min(440px,70vh); padding:var(--space-4); border:var(--border-control); border-radius:var(--radius-lg); background:var(--color-bg-inspector); box-shadow:var(--shadow-popover); overflow:auto; }
.swatch-library-heading { display:grid; grid-template-columns:minmax(0,1fr) 32px 32px; gap:var(--space-1); align-items:center; cursor:move; touch-action:none; }
.swatch-library-file { display:flex; align-items:center; gap:var(--space-2); min-width:0; }
.swatch-library-folder { flex:none; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.swatch-library-heading h4 { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font:var(--type-body); }
.swatch-library-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(32px,1fr)); gap:var(--space-2); max-height:240px; overflow:auto; padding:var(--space-1); margin-top:var(--space-3); }
.swatch-library-item { border:0; padding:0; background:transparent; border-radius:var(--radius-md); }
.swatch-library-chip { display:block; width:100%; aspect-ratio:1; border:1px solid var(--color-border-subtle); border-radius:var(--radius-md); }
.swatch-library-item[aria-pressed=true] { border-radius:var(--radius-md); }
.swatch-library-item[aria-pressed=true] .swatch-library-chip { border-radius:var(--radius-md); }
.swatch-library-footer { display:flex; justify-content:flex-end; margin-top:var(--space-3); }
.is-results-screen .shell { padding:var(--space-8) var(--space-10); }
.results-eyebrow { margin-bottom:var(--space-2); }
.colorway-heading h3 { font:var(--type-title-lg); }
.download-guidance { margin:var(--space-2) 0 var(--space-6); }
.result-selection-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3); padding:var(--space-3) 0; margin-bottom:var(--space-5); border-top:var(--border-subtle); border-bottom:var(--border-subtle); }
.result-toolbar-left,.result-toolbar-right { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); }
.result-tool,.result-select-all,.result-retry-button { display:inline-flex; align-items:center; justify-content:center; min-width:36px; min-height:36px; padding:var(--space-1) var(--space-3); border:var(--border-subtle); border-radius:var(--radius-pill); background:var(--color-bg-control); font:var(--type-body); }
.result-tool:hover:not(:disabled),.result-select-all:hover,.result-retry-button:hover { background:var(--color-hover); }
.result-tool-icon,.result-select-all,.result-retry-button { width:36px; padding:0; }
.result-select-all[aria-pressed=true] { background:var(--color-accent); }
.result-delete:hover:not(:disabled) { color:var(--color-destructive); background:var(--color-danger-bg); }
.shadow-segmented { display:flex; border:var(--border-subtle); border-radius:var(--radius-pill); overflow:hidden; background:var(--color-bg-control); }
.shadow-segmented .result-tool { border:0; border-radius:0; }
.shadow-segmented .result-tool+.result-tool { border-left:var(--border-subtle); }
.result-background-controls { display:flex; align-items:center; gap:var(--space-2); margin:0; padding:0; border:0; }
.background-choice { display:grid; place-items:center; position:relative; width:32px; height:32px; border:var(--border-control); border-radius:var(--radius-md); overflow:hidden; cursor:pointer; }
.background-choice>input[type=radio] { position:absolute; opacity:0; width:100%; height:100%; margin:0; }
.background-choice>span:not(.sr-only),#result-background-color { width:100%; height:100%; border:0; padding:0; border-radius:var(--radius-sm); }
#result-background-picker-trigger { position:absolute; inset:0; z-index:1; width:100%; height:100%; padding:0; border:0; cursor:pointer; border-radius:var(--radius-sm); background:var(--batch-background-color,#ffffff); }
#result-background-color { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
#magic-wand-panel,#path-panel { display:none!important; }
.batch-selection-mode { margin-top:0; }
body[data-work-mode=lock] .batch-selection-mode .segment button { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-1); }
body[data-work-mode=lock] .batch-selection-mode .segment svg { width:var(--icon-compact); height:var(--icon-compact); }
body[data-work-mode=lock] .batch-selection-mode .segment button[data-selection=remove][aria-pressed=true] { color:var(--color-ink); border-color:var(--color-ink); }
body[data-work-mode=lock] .batch-selection-mode .segment button[data-selection=remove][aria-pressed=true] { background:transparent; }
body[data-work-mode=lock] #batch-selection-add[aria-pressed=true] { color:var(--color-lock); border-color:var(--color-lock); }
body[data-work-mode=lock] .batch-selection-mode .segment { --segment-border-color:var(--color-selection-border); }
body[data-work-mode=lock] .batch-selection-mode .segment:has(#batch-selection-add[aria-pressed=true]) { --segment-border-color:var(--color-lock); }
body[data-work-mode=lock] .batch-selection-mode .segment button[data-selection=remove][aria-pressed=true]:is(:hover,:active):not(:disabled) { background:transparent; }
#batch-tolerance-properties { border-bottom:1px solid var(--color-border-subtle); }
.batch-description[hidden] { display:none; }
.batch-description { margin:0; font:var(--type-body); color:var(--color-text-secondary); white-space:pre-line; }
.batch-help-paragraphs { margin:0; font:var(--type-help); color:var(--color-text-secondary); white-space:pre-line; }
.transparent-choice>span:not(.sr-only) { background:repeating-conic-gradient(var(--color-border-subtle) 0% 25%,white 0% 50%) 0/12px 12px; }
.original-choice>span:not(.sr-only) { background:linear-gradient(135deg,var(--color-bg-inspector) 50%,var(--color-border-control) 50%); }
#result-background-color { cursor:pointer; }
#result-background-color::-webkit-color-swatch-wrapper { padding:0; }
#result-background-color::-webkit-color-swatch { border:0; }
.colorway-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:var(--space-5) var(--space-4); }
#colorway-results { display:contents; }
.colorway-card { position:relative; min-width:0; padding:var(--space-1); border:2px solid transparent; border-radius:var(--radius-lg); cursor:pointer; }
.colorway-card:hover { background:var(--color-bg-structure); }
.colorway-card.is-selected { border-color:var(--color-selection-border); background:var(--color-hover); }
.colorway-card .preview-frame { aspect-ratio:var(--source-image-aspect,4/5); border:var(--border-subtle); border-radius:var(--radius-md); }
.source-card .preview-frame { border-color:var(--color-border-control); }
.colorway-card figcaption { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); min-height:32px; padding:var(--space-2) var(--space-1); }
.colorway-card figcaption small { font:var(--type-help); color:var(--color-text-secondary); overflow-wrap:anywhere; }
.source-card figcaption small { color:var(--color-ink); font-weight:600; }
.result-swatch { width:16px; height:16px; border:var(--border-subtle); border-radius:var(--radius-sm); flex:none; }
.enhancement-status { width:100%; font:var(--type-help); color:var(--color-success); }
.result-card-actions { display:flex; gap:var(--space-1); position:absolute; top:var(--space-3); right:var(--space-3); }
.result-card-icon { display:grid; place-items:center; width:32px; height:32px; padding:0; border:var(--border-subtle); border-radius:var(--radius-pill); background:var(--color-bg-control); box-shadow:var(--shadow-control); }
.result-card-icon svg { width:18px; height:18px; }
.result-card-icon:hover:not(:disabled) { background:var(--color-hover); }
.delete-result-button:hover:not(:disabled) { color:var(--color-destructive); }
.is-pending .preview-frame { min-height:100px; }
.is-results-screen #recolor-result-state>.result-footer { display:flex; justify-content:center; margin-top:var(--space-6); padding-top:var(--space-4); border-top:var(--border-subtle); }
.results-progress,.result-error-panel { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:var(--space-3) var(--space-4); border-radius:var(--radius-md); margin-bottom:var(--space-5); }
.results-progress { color:var(--color-info); background:var(--color-info-bg); border:1px solid var(--color-info); border-radius:var(--radius-pill); }
.results-progress h3 { font:var(--type-label); }
.results-cancel { color:var(--color-ink); border:var(--border-control); background:var(--color-bg-control); }
.result-error-panel { background:var(--color-danger-bg); border:1px solid var(--color-danger); }
.result-error-panel p { color:var(--color-danger); }
.empty-results { display:grid; justify-items:center; text-align:center; gap:var(--space-4); padding:var(--space-16) var(--space-5); }
.upload-drag-overlay { position:fixed; z-index:var(--z-drag-overlay); inset:0; display:none; place-items:center; padding:var(--space-6); background:var(--color-selection); pointer-events:none; }
.is-upload-dragging .upload-drag-overlay { display:grid; }
.upload-drag-message { display:grid; justify-items:center; gap:var(--space-4); text-align:center; }
.upload-drag-icon { width:40px; height:40px; }
.upload-drag-message strong { font:var(--type-title-lg); }
.upload-drag-message span { color:var(--color-text-secondary); }

/* Product-specific structure only. Shared component styles come directly from
   liteworkroom-components.css; do not redefine primary/secondary, inspector headings,
   tool rail, zoom controls, tooltip, segment, or dialog primitives here. */
.support-copy { font:var(--type-help); color:var(--color-text-secondary); }
.lede { white-space:nowrap; letter-spacing:-.1px; }
#mask-preview-frame { position:absolute; inset:0; border:var(--border-subtle); touch-action:none; }
.canvas-utilities .history-controls button { font-size:0; gap:0; }
.canvas-utilities .history-controls svg { flex:none; }
.canvas-utilities #redo-mask[data-tip]:after { left:auto; right:0; transform:none; }
#mask-tools .inspector-note { border-top:0; padding-top:0; font:var(--type-body); }
#mask-tools .inspector-note p { white-space:pre-line; }
.brush-size { font:var(--type-help); }
.original-appearance-group { display:flex; flex-direction:column; gap:var(--space-2); }
.original-appearance-label { font:var(--type-help); }
.original-appearance-help { font:var(--type-help); color:var(--color-text-secondary); margin:0; }
.mask-reset-row { display:contents; }
.mask-reset-row .reset-action { justify-self:start; margin-left:0; margin-right:auto; flex-direction:row; }
#reset-mask[hidden],#reset-lock[hidden] { display:none!important; }
.palette-editor { flex:1; min-height:0; overflow:auto; }
.batch-colors-heading.section-heading.small { margin:var(--space-3) 0 0; padding:0; }
.batch-colors-heading #clear-palette-colors { font-weight:400; }
#batch-colors-empty { margin:0; color:var(--color-text-secondary); font-size:var(--text-meta); line-height:1.7; }
.checkerboard { background-color:var(--color-bg-control); background-image:conic-gradient(var(--color-bg-canvas) 25%,transparent 0 50%,var(--color-bg-canvas) 0 75%,transparent 0); background-size:16px 16px; background-position:0 0; }
.color-picker-surface { background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),var(--picker-hue,hsl(187 100% 50%)); }
#color-picker-marker { position:absolute; width:12px; height:12px; border:2px solid white; border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 0 1px var(--color-ink); pointer-events:none; }
.selected-color-preview { grid-template-columns:32px minmax(0,1fr) 80px 32px; }
#selected-color-swatch { width:32px; height:32px; }
#color-format { height:var(--control-height-default); padding:0 var(--space-4) 0 var(--space-1); font:var(--type-meta); }
.color-format-fields:has(label:nth-child(2)[hidden]) { grid-template-columns:1fr; }
.color-format-fields input { width:100%; }
@media(max-width:1150px) {
  .selected-color-preview { grid-template-columns:32px minmax(0,1fr) 32px; }
  .selected-color-preview #color-format { grid-column:2; grid-row:2; justify-self:end; }
  .selected-color-preview .selected-color-add { grid-column:3; grid-row:1; }
}
.danger-button { min-height:var(--control-height-default); padding:var(--space-1) var(--space-4); border:var(--border-control); color:var(--color-destructive); }
.danger-button:hover:not(:disabled) { background:var(--color-danger-bg); }

#batch-dialog-body p { white-space:pre-line; }
#batch-dialog-body dl { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); }
#batch-dialog-body dd { margin:0; text-align:right; color:var(--color-text-secondary); }
#batch-dialog-body dt { margin:0; }
#batch-dialog-body p+p { margin-top:var(--space-2); }
.upload-drag-overlay { inset:10px; border:2px dashed var(--color-focus); border-radius:var(--radius-lg); }
.upload-drag-icon { fill:none; stroke:currentColor; stroke-width:var(--icon-stroke); stroke-linecap:round; stroke-linejoin:round; }
@media(max-width:930px) {
  .is-results-screen .shell { padding:var(--space-6); }
  .ase-format-cue { display:none; }
}
@media(max-width:800px) {
  .empty-copy .lede { font-size:clamp(12px,3.6vw,15px); white-space:normal; }
}
@media(max-width:360px) {
  .design-system .empty-workspace { padding-inline:16px; }
  .empty-copy .lede { font-size:12px; letter-spacing:-.3px; }
}
@media(max-width:720px) {
  /* Approved Batch exception: precision editing stays available on small screens. */
  .is-mask-screen #result-state { grid-template-columns:minmax(0,1fr); height:auto; min-height:0; }
  .canvas-column { height:460px; }
  #mask-preview { max-width:88%; max-height:368px; }
  .batch-design-system .inspector:not([hidden]) { display:block!important; border-left:0; border-top:var(--border-subtle); overflow:visible; }
  .batch-design-system .colors-sidebar:not(:has(#palette-editor[hidden])) { display:flex!important; }
  .batch-design-system .canvas-utilities { justify-content:space-between; }
  .batch-design-system .history-controls:not([hidden]) { display:flex!important; }
  .canvas-utilities button { min-width:24px; }
  .palette-editor { overflow:visible; }
  .is-results-screen .shell { padding:var(--space-6) var(--space-4); }
  .colorway-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3); }
  .result-toolbar-right { gap:var(--space-3); }
  .result-card-actions { gap:2px; top:8px; right:8px; }
  .result-card-icon { width:28px; height:28px; }
}