/* Split-Pane — Original document + Mira extraction side by side */

.split-pane-overlay {
  display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: var(--cream); z-index: 200; flex-direction: column;
}
.split-pane-overlay.open { display: flex; }

.split-pane-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 16px; border-bottom: 1px solid var(--border);
  background: var(--white); flex-shrink: 0;
}
.split-pane-title {
  font-family: var(--serif); font-size: 1rem; color: var(--brown);
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.split-pane-nav { display: flex; gap: 6px; }
.split-pane-nav-btn, .split-pane-close-btn {
  padding: 4px 10px; border: 1px solid var(--border);
  border-radius: 4px; background: var(--white); color: var(--text);
  cursor: pointer; font-size: 0.8rem;
}
.split-pane-nav-btn:hover, .split-pane-close-btn:hover { background: var(--cream-dark); }
.split-pane-nav-btn:disabled { opacity: .4; cursor: default; }
/* Zoom cluster — reuses .split-pane-nav-btn aesthetic. */
.split-pane-zoom { display: inline-flex; align-items: center; gap: 6px; }
.split-pane-zoom[hidden] { display: none; }
.split-pane-zoom-level { min-width: 46px; text-align: center; color: var(--text-muted); }
.split-pane-counter { font-size: 0.8rem; color: var(--text-muted); }

.split-pane-content { display: flex; flex: 1; overflow: hidden; }
.split-pane-left, .split-pane-right { flex: 1; overflow-y: auto; }
.split-pane-left { padding: 0; border-right: 1px solid var(--border); background: var(--white); }
.split-pane-right { padding: 8px 12px; background: var(--cream); }
.split-pane-divider {
  width: 4px; background: var(--border); cursor: col-resize; flex-shrink: 0;
}
.split-pane-divider:hover { background: var(--accent); }

.split-pane-original { height: 100%; overflow: auto; }
.split-pane-original img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.split-pane-original iframe { width: 100%; height: 100%; border: none; }

/* ── Metadata form: compact 2-column grid ── */
.split-pane-meta-form {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px;
}
.split-pane-field { display: flex; flex-direction: column; gap: 1px; }
.split-pane-field label {
  font-size: 0.65rem; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.split-pane-field input, .split-pane-field textarea {
  padding: 3px 6px; border: 1px solid var(--border);
  border-radius: 3px; font-size: 0.82rem; font-family: var(--sans);
  color: var(--text); background: var(--white);
}
.split-pane-field textarea { resize: vertical; min-height: 28px; }
.split-pane-field input:focus, .split-pane-field textarea:focus {
  outline: none; border-color: var(--accent);
}
.split-pane-confidence {
  display: inline-block; padding: 0px 4px; border-radius: 6px;
  font-size: 0.55rem; font-weight: 600; margin-left: 3px;
  vertical-align: middle;
}
.split-pane-confidence.high { background: #E8F5E9; color: #2E7D32; }
.split-pane-confidence.medium { background: #FFF8E1; color: #F57F17; }
.split-pane-confidence.low { background: #FFEBEE; color: #C62828; }

/* ── Archival fields toggle ── */
.split-pane-arch-toggle {
  grid-column: 1 / -1;
  margin-top: 4px; padding: 3px 8px;
  border: 1px dashed var(--border); border-radius: 3px;
  background: transparent; color: var(--text-muted);
  cursor: pointer; font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  text-align: left;
}
.split-pane-arch-toggle:hover { background: var(--cream-dark); }

.split-pane-arch-fields {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px;
  padding-top: 4px;
}

/* ── Action buttons ── */
.split-pane-actions {
  grid-column: 1 / -1;
  display: flex; gap: 8px; margin-top: 6px;
}
.split-pane-approve-btn {
  padding: 6px 16px; border: none; border-radius: 4px;
  background: #4CAF50; color: white; font-weight: 600; cursor: pointer;
  font-size: 0.82rem;
}
.split-pane-approve-btn:hover { background: #43A047; }
.split-pane-skip-btn {
  padding: 6px 16px; border: 1px solid var(--border);
  border-radius: 4px; background: var(--white); color: var(--text);
  cursor: pointer; font-size: 0.82rem;
}
.split-pane-skip-btn:hover { background: var(--cream-dark); }

/* ── Per-file overrides ── */
.split-pane-field select {
  padding: 3px 6px; border: 1px solid var(--border);
  border-radius: 3px; font-size: 0.82rem; font-family: var(--sans);
  color: var(--text); background: var(--white); cursor: pointer;
}
.split-pane-field select:focus {
  outline: none; border-color: var(--accent);
}

.split-pane-overrides {
  grid-column: 1 / -1;
  margin-top: 4px; padding-top: 4px;
  border-top: 1px dashed var(--border);
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px 8px;
}
.split-pane-overrides-title {
  grid-column: 1 / -1;
  font-size: 0.65rem; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 1px;
}

/* ── Text preview ── */
.split-pane-text-preview {
  margin-top: 4px; padding: 6px 8px; background: var(--white);
  border: 1px solid var(--border); border-radius: 3px;
  font-family: var(--serif); font-size: 0.78rem;
  line-height: 1.4; color: var(--text); max-height: 120px; overflow-y: auto;
}

/* Preview loading placeholder (metadata review left pane). Shown while
   the document downloads + the viewer mounts, so the pane is never just
   blank. Added 2026-05-29. */
.sp-preview-loading{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; height:100%; min-height:220px;
  color:var(--text-muted); font-style:italic; font-size:.85rem;
}
.sp-preview-spinner{
  width:26px; height:26px; border-radius:50%;
  border:2.5px solid var(--border); border-top-color:var(--gold);
  animation:spPreviewSpin .8s linear infinite;
}
@keyframes spPreviewSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .sp-preview-spinner{ animation:none; } }

/* Metadata review: reason-for-review banner + missing-required-field
   emphasis (flash on a failed Approve, persistent red until filled).
   Added 2026-05-29. */
.split-pane-review-banner{
  margin:0 0 14px; padding:10px 12px; border-radius:5px;
  background:#fdecea; border:1px solid #e6a8a0; border-left:4px solid #c0392b;
}
.split-pane-review-banner-head{
  font-family:var(--sans,sans-serif); font-weight:700; font-size:.82rem;
  color:#c0392b; margin-bottom:3px; display:flex; align-items:center; gap:6px;
}
.split-pane-review-banner-head::before{ content:"\26A0"; font-size:.9rem; }
.split-pane-review-banner-body{
  font-family:var(--sans,sans-serif); font-size:.78rem; line-height:1.5; color:#7a2a22;
}

.split-pane-field.sp-field-missing input,
.split-pane-field.sp-field-missing textarea,
.split-pane-field.sp-field-missing select{
  border-color:#c0392b !important;
  box-shadow:0 0 0 2px rgba(192,57,43,.22);
}
.split-pane-field.sp-field-missing > label::after{
  content:" — required"; color:#c0392b; font-weight:600; font-style:italic;
  font-size:.7rem; margin-left:4px;
}
@keyframes spFieldFlash{
  0%,100%{ background:transparent; }
  25%,75%{ background:rgba(192,57,43,.16); }
}
.split-pane-field.sp-field-flash{ animation:spFieldFlash .5s ease-in-out 2; border-radius:5px; }
@media (prefers-reduced-motion:reduce){ .split-pane-field.sp-field-flash{ animation:none; } }