/* assets/css/pdf-job-builder.css — Composite PDF Job Builder（Phase 21D2）
 *
 * 只在 Composite PDF Job 页加载（Exact Image Job 页不引用它）。视觉语言与 21C2 Job 页同一套：
 * 颜色 / 圆角 / 阴影 / 按钮全部来自 tokens.css 与 workspace-ui.css；这里只写布局与这个 Builder 自己的几个原语：
 *   .jc-slots   任务语义：材料槽清单（编号 · 名称 · 必填 / 条件 · 已放入的文件 · 添加）
 *   .jc-pages   对象语义：按槽位分组的页缩略图（排序 / 旋转 / 删除 / 预览）
 *   .jc-complete / .jc-result  完成区：目标、状态、唯一的主按钮、结果
 */
.jc { display: flex; flex-direction: column; gap: 20px; }
.jc [hidden] { display: none !important; }
.jc-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.jc-grid { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: 24px; align-items: start; }
.jc-col-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-bottom: 12px; }
.jc-col-title { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--yq-text-3); }
.jc-local { flex: 1 1 100%; margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--yq-text-3); }
.jc-local-types { display: inline-block; margin-right: 4px; padding: 1px 8px; border-radius: 999px;
  background: var(--yq-bg-quiet); color: var(--yq-text-2); font-weight: 500; letter-spacing: .02em; }
.jc-page-count { font-size: 12.5px; color: var(--yq-text-3); font-variant-numeric: tabular-nums; }

/* ── 材料槽 ── */
.jc-slot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.jc-slot { padding: 12px 14px; background: var(--yq-bg-page); border: 1px solid var(--yq-border); border-radius: var(--yq-r-card);
  transition: border-color var(--yq-dur) var(--yq-ease), background-color var(--yq-dur) var(--yq-ease); }
.jc-slot.is-next { border-color: color-mix(in srgb, var(--yq-primary) 40%, var(--yq-border)); box-shadow: var(--yq-shadow-raise); }
.jc-slot.is-dragover { border-color: var(--yq-primary); background: var(--yq-primary-weak); }
.jc-slot[data-filled="true"] { background: color-mix(in srgb, var(--yq-success) 3%, var(--yq-bg-page)); }
.jc-slot-head { display: flex; gap: 10px; align-items: flex-start; }
.jc-slot-num { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: 1px;
  border-radius: 50%; background: var(--yq-bg-quiet); color: var(--yq-text-2); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.jc-slot[data-filled="true"] .jc-slot-num { background: var(--yq-success); color: var(--yq-bg-page); }
.jc-slot-titles { min-width: 0; flex: 1; }
.jc-slot-label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--yq-text-1); }
.jc-badge { padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .02em;
  background: var(--yq-primary-weak); color: var(--yq-primary); }
.jc-badge[data-kind="conditional"], .jc-badge[data-kind="optional"] { background: var(--yq-bg-quiet); color: var(--yq-text-2); }
.jc-slot-desc { margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: var(--yq-text-3); }
.jc-slot-cond { margin-top: 4px; padding: 3px 8px; border-left: 2px solid var(--yq-border-strong); font-size: 12.5px; line-height: 1.5; color: var(--yq-text-2); }
.jc-slot-files { list-style: none; margin: 8px 0 0 34px; padding: 0; display: grid; gap: 4px; }
.jc-file { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--yq-text-1); }
.jc-file-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jc-file-pages { flex: none; font-size: 12px; color: var(--yq-text-3); font-variant-numeric: tabular-nums; }
.jc-file-remove.yqw-btn { flex: none; width: 26px; height: 26px; min-height: 0; padding: 0; border: 0; background: transparent;
  color: var(--yq-text-3); font-size: 16px; line-height: 1; }
.jc-file-remove.yqw-btn:hover { color: var(--yq-danger); background: var(--yq-danger-weak); }
.jc-file-empty { font-size: 12.5px; color: var(--yq-text-3); }
.jc-slot-actions { margin: 10px 0 0 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.jc-slot-actions .yqw-btn { height: var(--yqw-h-mini, 30px); min-height: 0; padding: 0 14px; font-size: 13px; }
.jc-official { font-size: 12.5px; color: var(--yq-primary); text-underline-offset: 2px; }
.jc-group { margin-top: 4px; padding: 6px 10px; border-radius: var(--yq-r-sm); background: var(--yq-bg-sidebar);
  font-size: 12.5px; font-weight: 600; color: var(--yq-text-2); font-variant-numeric: tabular-nums; }
.jc-group[data-complete="true"] { color: var(--yq-success); background: color-mix(in srgb, var(--yq-success) 6%, var(--yq-bg-page)); }

/* ── 页网格 ── */
.jc-pages { position: sticky; top: 16px; min-width: 0; }
.jc-pages-body { min-height: 320px; max-height: min(72vh, 760px); overflow: auto; padding: 14px;
  background: radial-gradient(var(--yq-border-strong) 1px, transparent 1.2px) 0 0 / 18px 18px, var(--yq-bg-sidebar);
  border: 1px solid var(--yq-border); border-radius: var(--yq-r-card); }
.jc-pages-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 290px;
  text-align: center; font-size: 13.5px; color: var(--yq-text-3); }
.jc-pages-empty p { margin: 0; max-width: 32ch; line-height: 1.55; }
.jc-pages-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--yq-bg-page); color: var(--yq-primary); box-shadow: var(--yq-shadow-pop); }
.jc-pg-group + .jc-pg-group { margin-top: 16px; }
.jc-pg-group-title { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--yq-text-2); }
.jc-pg-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.jc-page { display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--yq-bg-page);
  border: 1px solid var(--yq-border); border-radius: var(--yq-r-sm); box-shadow: var(--yq-shadow-raise); }
.jc-thumb { display: flex; align-items: center; justify-content: center; height: 130px; padding: 0; border: 0; background: var(--yq-bg-sidebar);
  border-radius: 4px; cursor: zoom-in; }
.jc-thumb:focus-visible { outline: 2px solid var(--yq-primary); outline-offset: 2px; }
.jc-thumb-frame { display: block; height: 100%; max-width: 100%; background: var(--yq-bg-page); box-shadow: 0 0 0 1px var(--yq-border-strong); }
.jc-thumb-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.jc-page-bar { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.jc-page-pos { font-size: 12px; font-weight: 600; color: var(--yq-text-2); font-variant-numeric: tabular-nums; }
.jc-page-tools { display: inline-flex; gap: 2px; }
.jc-page-btn.yqw-btn { width: 24px; height: 24px; min-height: 0; padding: 0; border: 0; background: transparent; color: var(--yq-text-2);
  font-size: 14px; line-height: 1; }
.jc-page-btn.yqw-btn:hover:not(:disabled) { background: var(--yq-bg-quiet); color: var(--yq-text-1); }
.jc-page-btn.yqw-btn:disabled { opacity: .35; }

/* ── 完成区 ── */
.jc-complete { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px;
  background: var(--yq-bg-sidebar); border: 1px solid var(--yq-border); border-radius: var(--yq-r-card); }
.jc-complete-text { min-width: 0; }
.jc-target { margin: 0; font-size: 14px; font-weight: 600; color: var(--yq-text-1); }
.jc-status { margin: 3px 0 0; font-size: 13px; color: var(--yq-text-2); font-variant-numeric: tabular-nums; }
.jc-make.yqw-btn { flex: none; min-width: 180px; }
.jc-make.yqw-btn--primary { box-shadow: 0 1px 2px var(--yq-focus-ring), 0 4px 12px var(--yq-focus-ring); }
.jc[data-state="processing"] .jc-pages-body { opacity: .72; }

.jc-result { padding: 18px 20px; border: 1px solid var(--yq-border); border-radius: var(--yq-r-card); background: var(--yq-bg-page); }
.jc-result[data-verdict="pass"] { background: color-mix(in srgb, var(--yq-success) 5%, var(--yq-bg-page));
  border-color: color-mix(in srgb, var(--yq-success) 28%, var(--yq-border)); }
.jc-result[data-verdict="fail"] { background: var(--yq-danger-weak); border-color: color-mix(in srgb, var(--yq-danger) 25%, var(--yq-border)); }
.jc-result-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; }
.jc-result[data-verdict="pass"] .jc-result-title { color: var(--yq-success); }
.jc-result[data-verdict="fail"] .jc-result-title { color: var(--yq-danger); }
.jc-result[data-verdict] .jc-result-title::before { display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%; color: var(--yq-bg-page); font-size: 12px; line-height: 1; }
.jc-result[data-verdict="pass"] .jc-result-title::before { content: "✓"; background: var(--yq-success); }
.jc-result[data-verdict="fail"] .jc-result-title::before { content: "✕"; background: var(--yq-danger); }
.jc-facts { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.jc-facts li { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--yq-r-sm);
  background: var(--yq-bg-page); border: 1px solid color-mix(in srgb, var(--yq-success) 18%, var(--yq-border)); }
.jc-fact-k { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--yq-text-3); }
.jc-fact-v { font-size: 15px; font-weight: 600; color: var(--yq-text-1); font-variant-numeric: tabular-nums; }
.jc-mode { margin: 12px 0 0; font-size: 13px; color: var(--yq-text-2); }
.jc-download.yqw-btn { margin-top: 14px; min-width: 220px; }
.jc-checknote { margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--yq-text-3); max-width: 80ch; }
.jc-fail-text { margin: 8px 0 0; font-size: 14px; color: var(--yq-text-1); }
.jc-fail-hint { margin: 6px 0 0; font-size: 13px; color: var(--yq-text-2); }
.jc-msg:empty { display: none; }
.jc-msg { margin: 0; font-size: 13.5px; color: var(--yq-danger); }

@media (max-width: 900px) {
  .jc-grid { grid-template-columns: minmax(0, 1fr); }
  .jc-pages { position: static; }
  .jc-pages-body { max-height: none; min-height: 200px; }
  .jc-pages-empty { min-height: 170px; }
}
@media (max-width: 560px) {
  .jc-complete { flex-direction: column; align-items: stretch; }
  .jc-make.yqw-btn, .jc-download.yqw-btn { width: 100%; }
  .jc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jc-slot-files, .jc-slot-actions { margin-left: 0; }
  .jc-pg-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}
/* PASS 之后结果卡里已经有上限与唯一的下载按钮：完成条让位，不留一条只剩一行字的空条 */
.jc[data-state="pass"] .jc-complete, .jc[data-state="downloaded"] .jc-complete { display: none; }