/* css/imposition.css — Production → Imposition
 *
 * The queue reads as a worklist, not a report: the thing a person must decide is
 * the loudest element in each row, and everything else is context for that
 * decision. Colour is carried on the status chip and the bleed tag only, so a
 * screen full of rows still scans.
 *
 * Tokens only — no literal colours — so the tab follows the app's light/dark.
 */

.imp-wrap { padding: 20px 24px 48px; max-width: 1100px; }

.imp-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.imp-h { margin: 0; font-size: 22px; font-weight: 650; color: var(--text); letter-spacing: -0.01em; }
.imp-sub2 { margin-top: 4px; font-size: 13px; color: var(--text-secondary); }

/* Autopilot reads as a switch you are accountable for, not a preference. */
.imp-auto {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface); cursor: pointer; user-select: none;
  font-size: 13px; font-weight: 550; color: var(--text);
}
.imp-auto:hover { border-color: var(--accent); }
.imp-auto input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }

.imp-banner {
  margin-bottom: 16px; padding: 10px 14px; border-radius: 8px;
  background: var(--press-red-light); border: 1px solid var(--accent);
  color: var(--text); font-size: 13px; font-weight: 550;
}

.imp-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.imp-filter {
  padding: 6px 13px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-secondary);
  font-size: 12.5px; font-weight: 550; cursor: pointer;
}
.imp-filter:hover { border-color: var(--border-strong); color: var(--text); }
.imp-filter.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.imp-list { display: flex; flex-direction: column; gap: 10px; }

.imp-row {
  display: flex; gap: 16px; align-items: flex-start; justify-content: space-between;
  padding: 14px 16px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-xs);
}
.imp-row:hover { border-color: var(--border-strong); }
.imp-main { min-width: 0; flex: 1; }

.imp-title { font-size: 14.5px; font-weight: 620; color: var(--text); }
.imp-inv { margin-left: 7px; font-weight: 500; color: var(--text-secondary); }
.imp-desc {
  margin-top: 2px; font-size: 13px; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.imp-meta {
  margin-top: 7px; display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-secondary);
}
.imp-bleed { margin-top: 9px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.imp-sub { font-size: 12px; color: var(--text-secondary); }

.imp-tag {
  display: inline-block; padding: 2px 8px; border-radius: 5px;
  font-size: 11.5px; font-weight: 620; letter-spacing: 0.01em;
}
.imp-tag-ok    { background: rgb(22 163 74 / 12%);  color: var(--success); }
.imp-tag-synth { background: rgb(8 145 178 / 12%);  color: var(--cyan); }
.imp-tag-warn  { background: rgb(217 119 6 / 14%);  color: var(--warning); }
.imp-tag-none  { background: var(--surface-alt);    color: var(--text-secondary); }

.imp-err {
  margin-top: 8px; font-size: 12.5px; color: var(--danger);
  background: rgb(220 38 38 / 8%); padding: 7px 10px; border-radius: 6px;
}
.imp-note {
  margin-top: 8px; font-size: 12.5px; color: var(--text-secondary);
  background: var(--surface-alt); padding: 7px 10px; border-radius: 6px;
}

.imp-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }
.imp-status {
  padding: 3px 10px; border-radius: 999px; font-size: 11.5px;
  font-weight: 620; white-space: nowrap;
}
.imp-good { background: rgb(22 163 74 / 12%);  color: var(--success); }
.imp-warn { background: rgb(217 119 6 / 14%);  color: var(--warning); }
.imp-bad  { background: rgb(220 38 38 / 10%);  color: var(--danger); }
.imp-idle { background: var(--surface-alt);    color: var(--text-secondary); }

.imp-btn {
  padding: 6px 14px; border-radius: 6px; font-size: 12.5px; font-weight: 600;
  cursor: pointer; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); min-width: 84px;
}
.imp-btn:hover { border-color: var(--ink); }
.imp-approve { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.imp-approve:hover { background: var(--ink-light); }
.imp-reject:hover { border-color: var(--danger); color: var(--danger); }

.imp-empty { padding: 56px 20px; text-align: center; color: var(--text-secondary); font-size: 14px; }
.imp-empty-mark { font-size: 30px; color: var(--success); margin-bottom: 8px; }

@media (max-width: 720px) {
  .imp-wrap { padding: 16px 14px 40px; }
  .imp-row { flex-direction: column; gap: 12px; }
  .imp-side { flex-direction: row; align-items: center; width: 100%; }
  .imp-btn { flex: 1; }
  .imp-desc { white-space: normal; }
}

/* Reject panel — opens inline under the row, because the decision belongs to
   that sheet and a modal would hide the thing being judged. */
.imp-reject-panel {
  margin-top: 12px; padding: 12px; border-radius: 8px;
  background: var(--surface-alt); border: 1px solid var(--border-strong);
}
.imp-rj-h { font-size: 12.5px; font-weight: 620; color: var(--text); margin-bottom: 8px; }
.imp-rj-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.imp-rj-opt {
  padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text-secondary);
  font-size: 12px; font-weight: 550; cursor: pointer;
}
.imp-rj-opt:hover { border-color: var(--ink); color: var(--text); }
.imp-rj-opt.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.imp-rj-note {
  width: 100%; box-sizing: border-box; padding: 8px 10px; resize: vertical;
  border: 1px solid var(--border-strong); border-radius: 6px;
  background: var(--surface); color: var(--text);
  font: inherit; font-size: 12.5px;
}
.imp-rj-actions { display: flex; gap: 8px; margin-top: 9px; }
.imp-rj-send {
  padding: 6px 14px; border-radius: 6px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  background: var(--danger); border: 1px solid var(--danger); color: #fff;
}
.imp-rj-send:disabled { opacity: 0.45; cursor: not-allowed; }
.imp-rj-cancel {
  padding: 6px 14px; border-radius: 6px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text);
}

/* Actions — stacked on desktop under the status chip, so the eye reads
   state first and then what to do about it. View sheet is the primary action
   on any row that has one: every other decision depends on having looked. */
.imp-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; min-width: 120px; }
.imp-actions .imp-btn { min-width: 0; width: 100%; text-align: center; }
.imp-primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.imp-primary:hover { background: var(--ink-light); }
.imp-cancel:hover { border-color: var(--danger); color: var(--danger); }

@media (max-width: 720px) {
  .imp-actions { flex-direction: row; flex-wrap: wrap; width: 100%; }
  .imp-actions .imp-btn { width: auto; flex: 1 1 45%; }
}