/* 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%; }
}

/* Detail view — art on the left, sheet on the right, facts beneath each.
   The two images share a row so the eye compares them; the facts are the
   inputs the imposition was decided from, printed where the decision is. */
.imp-open { cursor: pointer; }
.imp-open:hover .imp-title { color: var(--accent); }
.imp-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }

.imp-back {
  margin-bottom: 10px; padding: 5px 10px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font-size: 12.5px; font-weight: 550;
}
.imp-back:hover { border-color: var(--ink); }
.imp-h-detail { margin-top: 2px; }

.imp-compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px;
}
.imp-pane {
  display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.imp-pane-h {
  padding: 10px 14px; font-size: 12.5px; font-weight: 620; color: var(--text);
  border-bottom: 1px solid var(--border); background: var(--surface-alt);
}
.imp-pane-img {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 16px; min-height: 320px;
  /* neutral checker so a white page and white bleed both read against it */
  background:
    linear-gradient(45deg, var(--surface-alt) 25%, transparent 25%, transparent 75%, var(--surface-alt) 75%),
    linear-gradient(45deg, var(--surface-alt) 25%, transparent 25%, transparent 75%, var(--surface-alt) 75%);
  background-size: 20px 20px; background-position: 0 0, 10px 10px; background-color: var(--surface);
}
.imp-pane-img img {
  max-width: 100%; max-height: 60vh; height: auto; width: auto;
  box-shadow: var(--shadow-md); background: #fff;
}
.imp-pane-empty { color: var(--text-secondary); font-size: 13px; text-align: center; padding: 24px; }

.imp-pane-facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
  padding: 12px 14px; border-top: 1px solid var(--border);
}
.imp-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.imp-fact span { font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.imp-fact b { font-size: 15px; font-weight: 650; color: var(--text); }
.imp-fact-name { grid-column: 1 / -1; }
.imp-fact-name b { font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 900px) {
  .imp-compare { grid-template-columns: 1fr; }
}

/* Tabs — queue first, then the three rule tables in precedence order. */
.imp-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 14px; overflow-x: auto; }
.imp-tab {
  padding: 8px 14px; font-weight: 600; font-size: 13.5px; color: var(--text-secondary);
  border: 0; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.imp-tab.is-on { color: var(--text); border-bottom-color: var(--ink); }
.imp-tab:hover { color: var(--text); }
.imp-tab:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }
.imp-tab-n { font-size: 11px; color: var(--text-secondary); margin-left: 6px; }

.imp-held { margin-top: 7px; font-size: 12.5px; color: var(--text); }
.imp-held b { font-size: 11px; letter-spacing: .05em; color: var(--cyan); }

.imp-rule-note { font-size: 13.5px; color: var(--text-secondary); max-width: 80ch; margin: 0 0 12px; }
.imp-rt-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.imp-rt { width: 100%; border-collapse: collapse; font-size: 13px; }
.imp-rt th {
  text-align: left; font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-secondary); padding: 9px 10px; background: var(--surface-alt); border-bottom: 1px solid var(--border-strong); white-space: nowrap;
}
.imp-rt td { padding: 6px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.imp-rt tr:last-child td { border-bottom: 0; }
.imp-rt tr.is-off td { opacity: .45; }
.imp-rt-cat td { background: var(--surface-alt); font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--text-secondary); padding: 6px 10px; }
.imp-rt-name { font-weight: 600; color: var(--text); }
.imp-rt-dim { color: var(--text-secondary); font-size: 12.5px; }
.imp-rt-mono { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; white-space: nowrap; }
.imp-rsel, .imp-rnum {
  font: inherit; font-size: 12.5px; padding: 4px 6px; border: 1px solid var(--border-strong);
  border-radius: 5px; background: var(--surface); color: var(--text);
}
.imp-rnum { width: 64px; text-align: right; font-family: "JetBrains Mono", ui-monospace, monospace; }
.imp-rsel.r-human { border-color: var(--cyan); color: var(--cyan); font-weight: 600; }
.imp-rsel.r-auto { border-color: var(--success); color: var(--success); font-weight: 600; }
.imp-rsel.r-refuse { border-color: var(--warning); color: var(--warning); font-weight: 600; }
.imp-rsel.r-none { color: var(--text-secondary); }