:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-light: #eff6ff;
  --success: #16a34a;
  --success-light: #f0fdf4;
  --error: #dc2626;
  --bg: #f8fafc;
  --card: #ffffff;
  --border: #e2e8f0;
  --border-focus: #93c5fd;
  --text: #1e293b;
  --text-muted: #64748b;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
  --radius: 12px;
  --radius-sm: 8px;
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Layout ─────────────────────────────────────── */

.app {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px 80px;
}

/* ── Header ─────────────────────────────────────── */

header {
  padding: 52px 0 36px;
  text-align: center;
}

header h1 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text);
  margin-bottom: 8px;
}

header p {
  font-size: 15px;
  color: var(--text-muted);
}


/* ── Cards ───────────────────────────────────────── */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 40px;
  box-shadow: var(--shadow-sm);
}

.card h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -0.2px;
}

.card .subtitle {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 28px;
}

/* ── Option Grid (Step 1) ────────────────────────── */

.option-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.option-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 20px 24px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s, background 0.2s, transform 0.15s, box-shadow 0.2s;
  font-family: var(--font);
}

.option-card:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.option-card:active { transform: translateY(0); }

.option-icon {
  font-size: 38px;
  line-height: 1;
}

.option-card h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.option-card p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* Third "load" card spans both columns and uses a row layout */
.option-card-load {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  text-align: left;
  padding: 18px 22px;
  gap: 16px;
  border-style: dashed;
}

.option-card-load .option-icon { font-size: 26px; flex-shrink: 0; }
.option-card-load-text { flex: 1; min-width: 0; }
.option-card-load h3 { font-size: 14px; }
.option-card-load p  { font-size: 12.5px; margin-top: 3px; }

/* API key + Test connection button row */
.api-key-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.api-key-row input { flex: 1; min-width: 0; }
.api-key-row .btn  { flex-shrink: 0; white-space: nowrap; }

.conn-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.45;
  word-break: break-word;
}
.conn-status-pending { background: var(--bg);            color: var(--text-muted); border: 1px solid var(--border); }
.conn-status-ok      { background: var(--success-light); color: var(--success);    border: 1px solid #bbf7d0; }
.conn-status-err     { background: #fef2f2;              color: var(--error);      border: 1px solid #fecaca; }

/* "Most common" badge on the recommended landing-screen option */
.option-card-recommended {
  position: relative;
  border-color: var(--primary-light);
}
.option-card-recommended:hover { border-color: var(--primary); }

.option-recommended-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--primary);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 10px;
}

/* Vision-mode request-size warning (step 5) — amber banner shown when one
   or more papers would push the request body past the provider's per-request
   size cap.  Includes a one-click "switch to text extraction" action. */
.size-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 4px;
  padding: 11px 14px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 3px solid #f59e0b;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: #78350f;
  line-height: 1.55;
}
.size-warning-icon { flex-shrink: 0; font-size: 16px; margin-top: 1px; }
.size-warning-body { flex: 1; }
.size-warning-list {
  margin: 8px 0 4px;
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  font-size: 11.5px;
  color: #92400e;
}
.size-warning-actions {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.size-warning-note { font-size: 12px; color: #92400e; }

/* Pre-extraction cost estimate (step 5) */
.cost-estimate {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 6px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
}
.cost-est-icon {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  flex-shrink: 0;
}
.cost-est-note {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 400;
}

/* "You'll need" prerequisites strip — quick orientation for first-time users */
.prereq-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 9px 14px;
  margin: 14px 0 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  color: var(--text-muted);
}
.prereq-title  { font-weight: 600; color: var(--text); }
.prereq-item   { white-space: nowrap; }
.prereq-sep    { opacity: 0.5; }

/* Back row inside the JSON upload panel */
.panel-back-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.panel-back-row h2 { margin: 0; }

/* Step 6 header with "Edit API key" button */
.step6-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.edit-setup-btn {
  flex-shrink: 0;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.edit-setup-btn:hover { background: var(--bg); color: var(--text); border-color: var(--text-muted); }

/* Error panel shown in resultDisplay when a paper fails */
.paper-error-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  text-align: center;
}

.paper-error-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fee2e2;
  color: var(--error);
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.paper-error-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.paper-error-msg {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 400px;
  line-height: 1.55;
  margin: 0;
  word-break: break-word;
}

.error-response-details {
  width: 100%;
  max-width: 520px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.error-response-details summary {
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg);
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.error-response-details summary::-webkit-details-marker { display: none; }

.error-response-pre {
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "SF Mono", "Menlo", "Monaco", "Courier New", monospace;
  color: var(--text);
  background: #fff;
  margin: 0;
  max-height: 240px;
  overflow-y: auto;
  border-top: 1px solid var(--border);
}

/* ── Forms ───────────────────────────────────────── */

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 7px;
  letter-spacing: 0.1px;
}

.form-group .optional {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 12px;
  margin-left: 4px;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  background: #fff;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.form-group textarea {
  resize: vertical;
  min-height: 90px;
  line-height: 1.55;
}

.form-group select { cursor: pointer; }

.form-group small {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

.provider-warning {
  font-size: 13px;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 10px 13px;
  line-height: 1.55;
  margin: 0;
}

.provider-info {
  font-size: 13px;
  color: #0369a1;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 6px;
  padding: 10px 13px;
  line-height: 1.55;
  margin: 0;
}

/* ── Info box (step 1 how-it-works) ─────────────── */

.info-box {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  overflow: hidden;
}

.info-box summary {
  padding: 10px 15px;
  font-size: 13px;
  font-weight: 600;
  color: #0369a1;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.info-box summary::-webkit-details-marker { display: none; }
.info-box summary:hover { background: #e0f2fe; }

.info-box-body {
  padding: 4px 15px 14px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.info-box-body p { margin: 0; }

/* ── JSON load panel ─────────────────────────────── */

.json-format-info {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 15px 18px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
}
.json-format-info p { margin: 0; }
.json-format-info code {
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  font-size: 12px;
  background: var(--border);
  border-radius: 3px;
  padding: 1px 5px;
}
.json-format-evidence-note { margin-top: 10px !important; color: var(--text-muted); }

.json-format-example {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.json-format-example summary {
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--card);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.json-format-example summary::-webkit-details-marker { display: none; }
.json-format-example summary:hover { background: var(--bg); }

.json-format-pre {
  padding: 12px 14px;
  margin: 0;
  font-size: 11.5px;
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  line-height: 1.6;
  white-space: pre;
  overflow-x: auto;
  background: #f8fafc;
  color: var(--text);
  border-top: 1px solid var(--border);
}

.json-req-list {
  margin: 10px 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
}
.json-req-list li { line-height: 1.55; }

.json-upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 12px;
}

.json-upload-section {}
.json-upload-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.json-upload-required {
  color: var(--error);
  font-weight: 500;
  margin-left: 4px;
}
.json-upload-optional {
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 4px;
}

.json-drop-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-sm);
  justify-content: center;
  transition: border-color 0.2s, background 0.2s;
}
.json-drop-row.drag-over {
  border-color: var(--primary);
  background: var(--primary-light);
}
.json-drop-hint {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.json-ready-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--success-light);
  border: 1px solid #86efac;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-top: 4px;
}
.json-ready-text {
  font-size: 13px;
  color: var(--success);
  font-weight: 500;
}

/* ── Edit hint ───────────────────────────────────── */

.edit-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--primary-dark);
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--primary-light);
  border: 1px solid #bfdbfe;
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.edit-hint::before {
  content: "✎";
  font-size: 15px;
  color: var(--primary);
  flex-shrink: 0;
}

/* ── Evidence warning banner ─────────────────────── */

.evidence-warning {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: #92400e;
  line-height: 1.55;
}
.evidence-warning-icon { flex-shrink: 0; font-size: 15px; margin-top: 1px; }
.evidence-warning code {
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  font-size: 11.5px;
  background: #fef3c7;
  border-radius: 3px;
  padding: 1px 4px;
}

/* Softer info-style notice for the results panel — used when extraction
   succeeded but page-highlighting couldn't be wired up. The data still
   renders normally; this is just a quiet aside. */
.evidence-notice {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #94a3b8;
  border-radius: var(--radius-sm);
  padding: 8px 10px 8px 12px;
  margin-bottom: 12px;
  font-size: 12.5px;
  color: #475569;
  line-height: 1.5;
}
.evidence-notice-icon { flex-shrink: 0; font-size: 13px; margin-top: 1px; opacity: 0.75; }
.evidence-notice-body { flex: 1; }
.evidence-notice-body code {
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  font-size: 11px;
  background: #e2e8f0;
  border-radius: 3px;
  padding: 1px 4px;
}
.evidence-notice-body .btn { margin-top: 6px; }
.evidence-notice-close {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: #94a3b8;
  cursor: pointer;
  padding: 0 2px;
  margin: -2px -2px 0 4px;
}
.evidence-notice-close:hover { color: #475569; }

/* Shown above the page image when the current page has no text layer.
   Sits between the image and the page nav so the user immediately sees
   why the overlay is empty. */
.scanned-page-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #fef9c3;
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: #78350f;
}
.scanned-page-icon { flex-shrink: 0; font-size: 14px; margin-top: 1px; }

/* Per-file badge in the upload list — surfaced via the upfront /api/check-pdf
   probe so the user knows what to expect before extraction runs. */
.probe-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 500;
  white-space: nowrap;
  margin-left: 4px;
}
.probe-badge.probe-loading { background: #f1f5f9; border-color: #e2e8f0; color: #64748b; }
.probe-badge.probe-text    { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.probe-badge.probe-scanned { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.probe-badge.probe-mixed   { background: #fef3c7; border-color: #fde68a; color: #78350f; }
.probe-badge.probe-unknown { background: #f8fafc; border-color: #e2e8f0; color: #64748b; }

/* Banner shown above the file list when any selected PDF is image-only.
   Two intensities — soft (informational) and hard (text-only model picked
   but the file is a scan, so extraction itself will fail). */
.probe-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.5;
}
.probe-warning.warning-soft {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #78350f;
}
.probe-warning.warning-hard {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}
.probe-warning-icon { flex-shrink: 0; font-size: 14px; margin-top: 1px; opacity: 0.85; }

/* Panel shown when the model response can't be parsed into structured
   entries — gives the user a warning, the raw response, and a button to
   start filling in values manually. */
.extraction-failed-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: var(--radius-md);
}
.extraction-failed-warn {
  font-size: 13.5px;
  line-height: 1.55;
  color: #7c2d12;
}
.extraction-failed-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.extraction-raw-details {
  background: #fff;
  border: 1px solid #fde68a;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 12.5px;
}
.extraction-raw-details summary {
  cursor: pointer;
  color: #92400e;
  font-weight: 500;
  user-select: none;
}
/* "Re-running this paper…" notice shown in the result column while the
   new job is in flight.  The right-hand page panel is intentionally
   untouched, so the user keeps their PDF context. */
.rerun-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 13.5px;
}
.rerun-spinner {
  display: inline-block;
  font-size: 18px;
  color: var(--primary);
  animation: rerun-spin 1.2s linear infinite;
}
@keyframes rerun-spin { to { transform: rotate(360deg); } }

.extraction-raw-details .raw-text {
  margin-top: 8px;
  max-height: 360px;
  overflow: auto;
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 10px;
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  font-size: 11.5px;
  line-height: 1.5;
  color: #44403c;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Buttons ─────────────────────────────────────── */

.btn-row {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 28px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 22px;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s, transform 0.1s;
  text-decoration: none;
  white-space: nowrap;
}

.btn:active { transform: scale(0.98); }

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); box-shadow: 0 2px 8px rgba(37,99,235,0.3); }

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1.5px solid var(--border);
}
.btn-ghost:hover { background: var(--bg); color: var(--text); }

.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: #15803d; }

.btn-outline {
  background: transparent;
  color: var(--text-muted);
  border: 1.5px solid var(--border);
}
.btn-outline:hover { background: var(--bg); }

/* ── Loading (Step 4) ────────────────────────────── */

.card-center {
  text-align: center;
  padding: 60px 40px;
}

.spinner {
  width: 44px;
  height: 44px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  margin: 0 auto 24px;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Prompt Display (Step 5) ─────────────────────── */

.prompt-box {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: 20px 0 24px;
}

.prompt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.model-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: #fff;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  letter-spacing: 0.2px;
}

.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-muted);
  font-family: var(--font);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.copy-btn:hover { background: var(--bg); color: var(--text); }
.copy-btn.copied { background: var(--success); color: #fff; border-color: var(--success); }

.prompt-text {
  padding: 18px 20px;
  font-size: 12.5px;
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 380px;
  overflow-y: auto;
  font-family: "SF Mono", "Menlo", "Monaco", "Courier New", monospace;
  color: var(--text);
  background: #fff;
}

.confirm-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.confirm-row .btn { flex: 1; justify-content: center; }

/* ── Success (Step 6) ────────────────────────────── */

.success-mark {
  width: 60px;
  height: 60px;
  background: var(--success);
  color: #fff;
  font-size: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

/* ── Step panels ─────────────────────────────────── */

/* Step 8 (results) is the only remaining .panel — shown as a separate
   full-width view via inline display:none/'' from JS. */
.panel.active {
  animation: fadeUp 0.28s ease;
}

/* ── Accordion (one-pager configuration flow) ────── */

.onepager {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.acc-section {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: box-shadow 0.18s, border-color 0.18s;
}

.acc-section.acc-active {
  border-color: var(--primary-light);
  box-shadow: var(--shadow-md);
}

.acc-section.acc-pending {
  opacity: 0.78;
}

.acc-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.acc-header::-webkit-details-marker { display: none; }
.acc-header::marker { content: ''; }
.acc-header:hover { background: var(--bg); }

.acc-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  transition: background 0.18s, color 0.18s;
}
.acc-section.acc-active .acc-num { background: var(--primary); color: #fff; }
.acc-section.acc-done   .acc-num { background: var(--success); color: #fff; }

.acc-title {
  flex: 1 0 auto;
}

.acc-summary-text {
  font-weight: 400;
  font-size: 13px;
  color: var(--text-muted);
  flex: 0 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}

.acc-chevron {
  font-size: 13px;
  color: var(--text-muted);
  transition: transform 0.18s;
  flex-shrink: 0;
}
.acc-section[open] .acc-chevron { transform: rotate(180deg); }

/* Cards inside accordion bodies — drop their own shadow/border (the section
   already has one) so they don't double up */
.acc-section > .card {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  border: none;
  border-top: 1px solid var(--border);
  animation: fadeUp 0.22s ease;
}

.acc-inline-loading {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  border: none;
  border-top: 1px solid var(--border);
  padding: 48px 24px;
  text-align: center;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── In-loading email prompt ────────────────────── */

.email-prompt {
  margin-top: 26px;
  padding: 18px 22px;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  text-align: left;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  animation: fadeUp 0.3s ease;
}
.email-prompt-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.email-prompt-sub {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 12px;
}
.email-prompt-form {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.email-prompt-form input {
  flex: 1;
  padding: 8px 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  min-width: 0;
}
.email-prompt-form input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.email-prompt-status {
  margin-top: 10px;
  padding: 8px 10px;
  font-size: 12.5px;
  border-radius: var(--radius-sm);
}
.email-prompt-ok  { background: var(--success-light); color: var(--success); border: 1px solid #bbf7d0; }
.email-prompt-err { background: #fef2f2;              color: var(--error);   border: 1px solid #fecaca; }

/* ── Domain-workflow preset banner (MASEMiner etc.) ────────────────────── */

.preset-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto 24px;
  padding: 8px 14px;
  background: var(--primary-light);
  border: 1px solid var(--primary);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--primary-dark);
  width: fit-content;
  max-width: 100%;
}
.preset-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}
.preset-banner-mark {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 5px;
}
.preset-banner-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.preset-banner-clear {
  background: none;
  border: 1px solid var(--primary);
  color: var(--primary-dark);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}
.preset-banner-clear:hover {
  background: var(--primary);
  color: #fff;
}

/* ── "Pre-built workflows" link on landing screen ──────────────────────── */

.link-btn {
  background: none;
  border: none;
  color: var(--primary);
  font-size: inherit;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 0 0 0 6px;
  margin: 0;
}
.link-btn:hover { color: var(--primary-dark); }

/* ── /maseminer hero landing ───────────────────────────────────────────── */

.preset-landing {
  margin-top: 8px;
}

.preset-hero {
  border-top: 4px solid var(--primary);
}

.preset-hero-eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 8px;
  text-align: center;
}
.preset-hero-tagline {
  text-align: center;
}

/* Stacked brand logo: visual mark above the two-tone wordmark, treated
   as one unit (no separate text headline). */
.preset-hero-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 4px 0 18px;
}
.preset-hero-mark {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
}

/* Two-tone "MASE/Miner" wordmark — ``MASE`` in dark navy, ``Miner`` in
   teal, matching the SVG mark above. */
.masem-wordmark .brand-mase  { color: #1d4a8c; font-weight: 800; letter-spacing: 0.01em; }
.masem-wordmark .brand-miner { color: #5cb8c8; font-weight: 600; }
.preset-hero-logo .preset-hero-title { margin: 0; line-height: 1; }
.preset-hero-title {
  font-size: 32px;
  margin: 0;
  letter-spacing: -0.01em;
}

.preset-hero-tagline {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.preset-hero-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 24px;
}

.preset-hero-body > p {
  grid-column: 1 / -1;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

.preset-hero-section-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.preset-hero-checklist ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.preset-hero-checklist li {
  position: relative;
  padding: 4px 0 4px 22px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
}

.preset-hero-checklist li::before {
  content: "▸";
  position: absolute;
  left: 4px;
  top: 4px;
  color: #7c3aed;
}

.preset-hero-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.preset-hero-cta .btn-primary {
  background: #7c3aed;
  border-color: #7c3aed;
  font-size: 15px;
  padding: 10px 22px;
}
.preset-hero-cta .btn-primary:hover {
  background: #6d28d9;
  border-color: #6d28d9;
}

@media (max-width: 720px) {
  .preset-hero-body { grid-template-columns: 1fr; }
  .preset-hero-title { font-size: 26px; }
}

/* ── Inline pre-built workflows section on step 1 ──────────────────────── */

.prebuilt-workflows {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.prebuilt-workflows-header h3 {
  font-size: 16px;
  margin-bottom: 4px;
}

.prebuilt-workflows-header .subtitle {
  font-size: 13px;
  margin-bottom: 14px;
}

.prebuilt-workflows-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

/* Reuse option-card-load styles — these workflow cards have the same shape */
.workflow-card.option-card-load {
  text-align: left;
  font-family: inherit;
}

/* ── Workflows modal ────────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 110;
  padding: 20px;
}
.modal-overlay[style*="flex"] { display: flex; }

.modal {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-width: 540px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 24px 26px;
  animation: fadeUp 0.2s ease;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.modal-header h3 { font-size: 17px; }
.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
}
.modal-close:hover { background: var(--bg); color: var(--text); }
.modal-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 18px;
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}

.workflows-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.workflows-loading,
.workflows-empty {
  font-size: 13px;
  color: var(--text-muted);
  padding: 20px 0;
  text-align: center;
}
.workflow-card {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.workflow-card:hover {
  background: var(--primary-light);
  border-color: var(--primary);
}
.workflow-card-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.workflow-card-tagline {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
}
.workflow-card-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
  line-height: 1.55;
}

/* ── Footer ──────────────────────────────────────── */

.app-footer {
  margin-top: 56px;
  padding: 18px 0 6px;
  text-align: center;
  font-size: 11.5px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
}
.app-footer a {
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 2px;
}
.app-footer a:hover { color: var(--primary); text-decoration-color: var(--primary); }

/* On the wide results page, keep the footer span readable */
.wide-mode .app-footer { margin-top: 32px; }

/* ── Toast ───────────────────────────────────────── */

.toast {
  position: fixed;
  bottom: 28px;
  right: 28px;
  background: #1e293b;
  color: #fff;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  max-width: 480px;
  white-space: pre-line;        /* preserve newlines in provider messages */
  word-break: break-word;       /* don't overflow on long URLs / param names */
  line-height: 1.5;
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.22s, transform 0.22s;
  pointer-events: none;
}

.toast.error-toast   { background: var(--error); }
.toast.success-toast { background: var(--success); }

.toast.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── Upload Zone (Step 6) ────────────────────────── */

.prompt-summary {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  overflow: hidden;
}

.prompt-summary summary {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  background: var(--bg);
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.prompt-summary summary::-webkit-details-marker { display: none; }
.prompt-summary summary::before { content: '▶'; font-size: 10px; transition: transform 0.2s; }
.prompt-summary[open] summary::before { transform: rotate(90deg); }

.prompt-summary-model {
  font-weight: 400;
  font-size: 11px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 8px;
  margin-left: 4px;
}

.prompt-summary-text {
  padding: 14px 16px;
  font-size: 12px;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
  font-family: "SF Mono", "Menlo", "Monaco", "Courier New", monospace;
  color: var(--text);
  border-top: 1px solid var(--border);
  background: #fff;
  margin: 0;
}

.upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  background: var(--bg);
  transition: border-color 0.2s, background 0.2s;
  margin-bottom: 14px;
}

.upload-zone:hover,
.upload-zone.drag-over {
  border-color: var(--primary);
  background: var(--primary-light);
}

.upload-icon { font-size: 38px; margin-bottom: 12px; }

.upload-primary {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 5px;
}

.upload-secondary { font-size: 13px; color: var(--text-muted); }

/* ── File list (multi-upload) ────────────────────── */

.file-list {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 14px;
}

.file-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.file-list-add {
  background: none;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  padding: 3px 10px;
  font-family: var(--font);
  transition: background 0.15s;
}
.file-list-add:hover { background: var(--primary-light); }

.file-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: #fff;
}
.file-list-item:last-child { border-bottom: none; }

.file-icon { font-size: 18px; flex-shrink: 0; }

.file-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.file-size {
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.file-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 3px 7px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.file-remove:hover { background: #fee2e2; color: var(--error); }

.upload-note {
  font-size: 12px;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 9px 13px;
  margin-bottom: 4px;
  display: none;
  line-height: 1.5;
}

/* ── Results (Step 8) ────────────────────────────── */

.results-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.results-header h2 { margin-bottom: 4px; }
.results-header .subtitle { margin-bottom: 0; }

.results-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Raw-text fallback */
.raw-text {
  font-size: 12px;
  line-height: 1.7;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: "SF Mono", "Menlo", "Monaco", "Courier New", monospace;
  color: var(--text);
  margin: 0;
}

/* (input-tabs removed — step 3 now uses choice cards) */

/* ── Entry navigation bar ────────────────────────── */

.entry-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  padding: 9px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.entry-counter {
  flex: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.btn.btn-sm { padding: 8px 14px; font-size: 13px; }

/* ── Wide mode ───────────────────────────────────── */

/* On the results page the layout breaks out of the 760-px column so the
   entry view + page-image preview can use the available real estate. */
body.wide-mode .app {
  max-width: none;
  padding: 0 24px 80px;
}

.results-card { padding: 28px 32px; }

/* 3-column grid: papers sidebar | entry area */
.results-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  align-items: start;
}

/* entry area splits horizontally: result | page image.
   1.2fr / 1fr lets the result column grow generously on wide screens
   while keeping the page-image preview readable. */
.entry-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(420px, 1fr);
  gap: 20px;
  align-items: start;
}

/* ── Papers sidebar ──────────────────────────────── */

.papers-sidebar {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: #fff;
}

.paper-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-muted);
  transition: background 0.15s;
  min-width: 0;
}

.paper-item:last-child { border-bottom: none; }

.paper-item.status-done { cursor: pointer; color: var(--text); }
.paper-item.status-done:hover { background: var(--primary-light); }
.paper-item.active { background: var(--primary-light); color: var(--primary); font-weight: 600; }

.paper-status-icon {
  flex-shrink: 0;
  font-size: 13px;
  width: 16px;
  text-align: center;
}

.paper-item.status-done    .paper-status-icon { color: var(--success); }
.paper-item.status-error   .paper-status-icon { color: var(--error); }
.paper-item.status-processing .paper-status-icon {
  display: inline-block;
  animation: spin 1s linear infinite;
}

.paper-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Per-sample sidebar rows (one per sample for multi-sample papers).
   Slightly inset and tinted so adjacent samples for the same paper read
   as a related cluster, while still being clickable independently. */
.paper-item-sample {
  padding-left: 22px;
}
.paper-sample-suffix {
  color: var(--text-muted);
  font-weight: 500;
}
.paper-item.active .paper-sample-suffix {
  color: var(--primary);
}

/* ── Result column ───────────────────────────────── */

.result-col {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  padding: 20px 22px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
}

/* ── Split re-run group (text + vision) ──────────── */
.rerun-group {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

/* ── Extraction-confidence badge row ─────────────── */
/* Shown above the parsed sample data when the model emits an
   `extraction_confidence` block (high / medium / low per category). */
.confidence-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  align-items: center;
}
.confidence-row-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 4px;
}
.confidence-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid;
}
.confidence-badge-label {
  font-weight: 500;
  opacity: 0.85;
}
.confidence-badge-value {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.confidence-badge.confidence-high {
  background: #e7f7ec;
  border-color: #2f9e54;
  color: #1c6a37;
}
.confidence-badge.confidence-medium {
  background: #fdf5d3;
  border-color: #c79412;
  color: #7d5a02;
}
.confidence-badge.confidence-low {
  background: #fde7e7;
  border-color: #c93434;
  color: #8a1f1f;
}
.confidence-badge.confidence-unknown {
  background: #eef0f3;
  border-color: #b8bec8;
  color: #4a5260;
}

/* ── Page image column ───────────────────────────── */

.page-display-col .pages-panel {
  position: sticky;
  top: 20px;
}

.pages-panel {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.pages-panel-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px 7px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  min-height: 36px;
}

#pageDisplayLabel { flex: 1; min-width: 0; }

/* Evidence page nav (shown when multiple pages) */
.page-evidence-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.page-nav-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 11px;
  cursor: pointer;
  color: var(--text-muted);
  transition: background 0.15s, color 0.15s;
  line-height: 1.4;
}
.page-nav-btn:hover:not(:disabled) { background: var(--primary-light); color: var(--primary); }
.page-nav-btn:disabled { opacity: 0.35; cursor: default; }

.page-nav-counter {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 56px;
  text-align: center;
}

/* When the currently-displayed page carries any sub-view-matched
   highlights, tint the counter so the user can see at a glance which
   pages have evidence as they flip through. */
.page-evidence-nav.page-nav-on-evidence .page-nav-counter {
  color: var(--primary);
}

/* Zoom controls */
.zoom-controls {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.zoom-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  width: 24px;
  height: 24px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  font-family: var(--font);
}
.zoom-btn:hover { background: var(--primary-light); color: var(--primary); }

/* Zoom container — clips the transformed image */
.page-zoom-container {
  overflow: hidden;
  position: relative;
  cursor: grab;
  background: var(--bg);
  max-height: calc(100vh - 100px);
  display: flex;
  align-items: flex-start;
}
.page-zoom-container.dragging { cursor: grabbing; }

#pageDisplayImg {
  width: 100%;
  display: block;
  transform-origin: 0 0;
  transform: translate(0, 0) scale(1);
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
  transition: none;
}

/* SVG highlight overlay — sits on top of the page image, scales with zoom/pan
   via the same transform.  preserveAspectRatio="none" + matching viewBox keeps
   the rectangles aligned with the page contents at all zoom levels. */
.highlight-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  pointer-events: none;          /* clicks pass through to the image */
  transform-origin: 0 0;
  transform: translate(0, 0) scale(1);
  will-change: transform;
}
.highlight-overlay .highlight-rect {
  fill: rgba(250, 204, 21, 0.42);    /* yellow-400 with translucency */
  stroke: rgba(202, 138, 4, 0.65);
  stroke-width: 1;
  pointer-events: auto;              /* re-enable so the <title> tooltip works */
}

#pageDisplayNone {
  padding: 32px 16px;
  font-size: 13px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.6;
  margin: 0;
}

/* ── Formatted result renderer ───────────────────── */

.rv-root { padding: 0; }

.rv-obj {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  width: 100%;
}

.rv-row {
  display: contents;
}

.rv-row > .rv-key,
.rv-row > .rv-val {
  padding: 7px 10px 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.5;
}

/* Draw separator only between rows, not after last */
.rv-row:last-child > .rv-key,
.rv-row:last-child > .rv-val { border-bottom: none; }

.rv-key {
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  padding-right: 16px;
  vertical-align: top;
}

.rv-val { color: var(--text); }

.rv-null  { color: var(--text-muted); font-style: italic; font-size: 13px; }
.rv-num   { font-variant-numeric: tabular-nums; color: #1d4ed8; font-size: 13px; }
.rv-bool  { font-weight: 600; font-size: 13px; }
.rv-str   { font-size: 13px; }

/* Nested objects get a subtle indent */
.rv-val .rv-obj {
  margin-top: 4px;
  padding-left: 10px;
  border-left: 2px solid var(--border);
}

/* Array */
.rv-list { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }

.rv-list-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.rv-idx {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: var(--border);
  color: var(--text-muted);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.rv-list-body { flex: 1; min-width: 0; }

/* Compact numeric grid (factor loadings etc.) */
.rv-numgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 4px 6px;
  margin-top: 4px;
}

.rv-numgrid-cell {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 4px 7px;
}

.rv-numgrid-k {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 1px;
}

/* Evidence block */
.rv-evidence {
  border-left: 3px solid var(--primary);
  padding-left: 12px;
  margin-top: 2px;
}

.ev-snippet {
  font-size: 12.5px;
  font-style: italic;
  color: var(--text);
  line-height: 1.6;
  margin: 0 0 6px;
  quotes: "\201C" "\201D";
}
.ev-snippet::before { content: open-quote; }
.ev-snippet::after  { content: close-quote; }

.ev-tags { display: flex; gap: 6px; flex-wrap: wrap; }

.ev-tag {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
}

.ev-page   { background: #eff6ff; color: var(--primary); }
.ev-source { background: #f0fdf4; color: var(--success); }

/* ── Editable leaf values ────────────────────────── */

.rv-editable {
  cursor: text;
  border-radius: 3px;
  outline: none;
  transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
  min-width: 12px;
  display: inline-block;
  /* Persistent dotted underline so users always see what's editable */
  border-bottom: 1px dashed transparent;
}

/* Resting affordance: a subtle dashed underline on every editable value.
   Disabled inside table cells where the dense grid would feel too noisy
   (the row hover state below picks up the slack there). */
.rv-editable:not(.rv-edited) {
  border-bottom-color: rgba(37, 99, 235, 0.28);
}

.rv-table .rv-editable:not(.rv-edited) {
  border-bottom-color: transparent;
}
.rv-table tr:hover .rv-editable:not(.rv-edited) {
  border-bottom-color: rgba(37, 99, 235, 0.35);
}

.rv-editable:hover {
  background: var(--primary-light);
  border-bottom-color: var(--primary);
}

.rv-editable:focus {
  background: var(--primary-light);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
  border-bottom-color: var(--primary);
}

/* Visual marker for human-overridden fields */
.rv-edited {
  background: #fefce8 !important;
  border-bottom: 2px solid #eab308;
  border-radius: 2px 2px 0 0;
}

/* ── Results page — entry navigation, view toggle, multi-entry hint ────── */

.entry-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 0 14px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.entry-nav-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.entry-counter {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  padding: 0 4px;
}

/* Numbered entry tabs — visible only when there are >1 entries */
.entry-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-left: 6px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
}
.entry-tab {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.entry-tab:hover  { background: var(--bg); color: var(--text); }
.entry-tab.active { background: var(--primary); border-color: var(--primary); color: #fff; }
/* "+" / "−" controls next to the numbered tabs for adding / removing samples */
.entry-tab-add, .entry-tab-del {
  font-size: 14px;
  font-weight: 700;
  padding: 0 10px;
  color: var(--text-muted);
  border-style: dashed;
}
.entry-tab-add:hover { color: #16a34a; border-color: #86efac; background: #f0fdf4; }
.entry-tab-del:hover { color: #dc2626; border-color: #fca5a5; background: #fef2f2; }

/* Parsed / Raw toggle */
.view-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
}
.view-toggle-btn {
  padding: 6px 14px;
  border: none;
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
}
.view-toggle-btn.active { background: var(--card); color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.view-toggle-btn:hover:not(.active) { color: var(--text); }

/* Banner that prominently flags multi-entry papers */
.multi-entry-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 9px 14px;
  background: var(--primary-light);
  border: 1px solid #bfdbfe;
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--primary-dark);
}
.multi-entry-icon { font-size: 15px; flex-shrink: 0; }

/* Raw model response — fixed-width, scrollable, large enough to read */
.raw-response {
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  font-size: 12.5px;
  line-height: 1.55;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 75vh;
  overflow: auto;
  color: var(--text);
}

/* The smart evidence warning (action button below the message) */
.evidence-warning-body { flex: 1; line-height: 1.55; }
.evidence-warning-body code {
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  font-size: 11.5px;
  background: #fef3c7;
  border-radius: 3px;
  padding: 1px 4px;
}

/* When the page nav is in browse-all mode, give it a slightly different look
   so the user can tell it's not citing evidence. */
.page-evidence-nav.page-nav-browse {
  background: var(--bg);
  border-radius: 6px;
  padding: 2px 6px;
}

/* ── Sev-2 additions ────────────────────────────── */

/* Token summary inline in the results header (S2.8) */
.token-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--text-muted);
}
.token-summary .token-label  { font-weight: 600; color: var(--text); }
.token-summary .token-stat   { color: var(--text-muted); }
.token-summary .token-sep    { color: var(--border); }
.token-summary .token-total  { font-weight: 600; color: var(--text); }
.results-title h2            { margin-bottom: 0; }

/* Download dropdown (S2.7) */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  min-width: 180px;
  display: none;
  flex-direction: column;
  padding: 4px;
  z-index: 50;
}
.dropdown-menu.open { display: flex; }
.dropdown-menu hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 4px 0;
}
.dropdown-item {
  background: none;
  border: none;
  padding: 8px 12px;
  text-align: left;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  border-radius: 4px;
  font-family: inherit;
}
.dropdown-item:hover { background: var(--bg); }

/* Preset-driven sub-tabs (e.g. MASEM Loadings/Correlations/Descriptives)
   Sit directly below the active paper card in the sidebar. */
.paper-subtabs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px 10px 38px;     /* indent so they visibly nest under the paper */
  margin-bottom: 4px;
  border-left: 2px solid var(--primary-light);
  margin-left: 14px;
}
.paper-subtab {
  background: transparent;
  border: none;
  padding: 5px 8px;
  text-align: left;
  font-family: inherit;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.12s, color 0.12s;
}
.paper-subtab:hover {
  background: var(--bg);
  color: var(--text);
}
.paper-subtab.active {
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight: 600;
}

/* Per-paper phase label in the sidebar (S2.5) */
.paper-name-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.paper-phase {
  font-size: 10.5px;
  color: var(--text-muted);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Per-paper Stop button (S2.4) */
.paper-stop {
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 11px;
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}
.paper-stop:hover { background: #fef2f2; color: var(--error); border-color: #fecaca; }

/* Page-image skeleton (S2.9) */
.page-skeleton {
  width: 100%;
  height: 320px;
  position: relative;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
  background-size: 200% 200%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-skeleton-text {
  font-size: 12px;
  color: var(--text-muted);
  z-index: 1;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

/* Past extractions list (S2.2) */
.past-batches {
  margin-top: 26px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.past-batches-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.past-batches-header h3 { font-size: 14px; }
.past-batches-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.past-batch-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  gap: 2px 14px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.past-batch-row:hover {
  background: var(--primary-light);
  border-color: #bfdbfe;
}
.past-batch-name { font-size: 13.5px; font-weight: 600; color: var(--text); grid-column: 1; grid-row: 1; }
.past-batch-meta { font-size: 11.5px; color: var(--text-muted); grid-column: 1; grid-row: 2; }
.past-batch-counts {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 11px;
}
.batch-count {
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 600;
}
.batch-count-done { background: var(--success-light); color: var(--success); }
.batch-count-err  { background: #fef2f2;              color: var(--error); }
.batch-count-can  { background: var(--bg);            color: var(--text-muted); }
.batch-count-pen  { background: var(--primary-light); color: var(--primary); }

/* Keyboard shortcut cheat-sheet in the help drawer (S2.6) */
.kbd-table {
  width: 100%;
  margin-top: 10px;
  font-size: 12.5px;
  border-collapse: collapse;
}
.kbd-table td {
  padding: 4px 8px;
  vertical-align: top;
}
.kbd-table td:first-child { width: 110px; white-space: nowrap; }
.kbd-table strong { display: block; padding-top: 6px; color: var(--text); }
kbd {
  display: inline-block;
  padding: 1px 6px;
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  font-size: 11px;
  background: var(--card);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--text);
}

/* ── Responsive ──────────────────────────────────── */

@media (max-width: 1200px) {
  .entry-layout {
    grid-template-columns: 1fr 400px;
  }
}

@media (max-width: 1100px) {
  .entry-layout {
    grid-template-columns: 1fr 340px;
  }
}

@media (max-width: 900px) {
  .results-layout {
    grid-template-columns: 1fr;
  }
  .papers-sidebar {
    position: static;
    max-height: 180px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .paper-item {
    border-bottom: none;
    border-right: 1px solid var(--border);
    min-width: 140px;
    flex-shrink: 0;
  }
  .entry-layout {
    grid-template-columns: 1fr;
  }
  .page-display-col .pages-panel { position: static; }
  .page-zoom-container { max-height: 400px; }
}

@media (max-width: 560px) {
  .card { padding: 24px 20px; }
  .option-grid { grid-template-columns: 1fr; }
  .confirm-row { flex-direction: column; }
  .acc-summary-text { display: none; }
  .results-header { flex-direction: column; }
  .results-actions { width: 100%; }
  header { padding: 32px 0 24px; }
  header h1 { font-size: 22px; }
}

/* ── Parsing method toggle (step 6) ─────────────── */

/* ── MASEMiner guided builder (step 3 alt view) ────────────────────────── */

.masem-starter-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.masem-starter-card {
  appearance: none;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  transition: border-color 0.12s, background 0.12s;
}
.masem-starter-card:hover { border-color: var(--primary); }
.masem-starter-card.active {
  border-color: var(--primary);
  background: var(--primary-light);
}
.masem-starter-label {
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.masem-starter-tagline {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.4;
}

/* Compact scale-name / item-count / max-factor row.  Inner grid keeps
   label / input / hint on three named rows, so labels and inputs line
   up across all three columns no matter how the hint text wraps. */
.masem-scalar-row {
  display: grid;
  grid-template-columns: 1fr 140px 140px;
  gap: 4px 12px;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "labelA labelB labelC"
    "inputA inputB inputC"
    "hintA  hintB  hintC";
  align-items: start;
}
@media (max-width: 640px) {
  .masem-scalar-row {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }
}
.masem-scalar {
  display: contents;
}
.masem-scalar .masem-scalar-label  { grid-row: 1; }
.masem-scalar input                { grid-row: 2; }
.masem-scalar .masem-scalar-hint   { grid-row: 3; }
.masem-scalar:nth-child(1) > * { grid-column: 1; }
.masem-scalar:nth-child(2) > * { grid-column: 2; }
.masem-scalar:nth-child(3) > * { grid-column: 3; }
@media (max-width: 640px) {
  .masem-scalar { display: flex; flex-direction: column; gap: 4px; }
  .masem-scalar > * { grid-row: auto; grid-column: auto; }
}
.masem-scalar-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.masem-scalar input {
  width: 100%;
  padding: 8px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 13px;
  background: var(--card);
  color: var(--text);
  box-sizing: border-box;
}
.masem-scalar input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(29, 74, 140, 0.12);
}
.masem-scalar-hint {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}

/* A/B data-source cards.  Multi-select toggle buttons styled like
   selectable cards (matches the brand-mark feel in the screenshot). */
.masem-source-cards-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.masem-source-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  appearance: none;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.masem-source-card:hover { border-color: var(--primary); }
.masem-source-card.active {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 0 0 2px rgba(29, 74, 140, 0.08);
}
.masem-source-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light);
  border-radius: var(--radius-sm);
  color: var(--primary);
}
.masem-source-card.active .masem-source-icon {
  background: #fff;
}
.masem-source-body {
  flex: 1;
  min-width: 0;
}
.masem-source-title {
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}
.masem-source-card.active .masem-source-title { color: var(--primary); }
.masem-source-tagline {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.4;
}

/* Hint paragraph shown below each section header in the builder. */
.masem-hint {
  margin: -2px 0 8px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}
.masem-hint code {
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  font-size: 11.5px;
  background: var(--bg);
  border-radius: 3px;
  padding: 1px 4px;
}

#masemBuilder textarea {
  font-family: inherit;
  font-size: 13px;
}

/* "?"-icon tooltip used next to each data-source label.  The hover/focus
   tip is rendered via a CSS pseudo-element from the ``data-tip`` attribute
   so we don't need extra DOM. */
.masem-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  cursor: help;
  position: relative;
}
.masem-help:hover,
.masem-help:focus { color: var(--primary); border-color: var(--primary); outline: none; }
.masem-help::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  background: #1f2937;
  color: #fff;
  font-weight: 400;
  font-size: 11.5px;
  line-height: 1.45;
  padding: 7px 10px;
  border-radius: 5px;
  width: max-content;
  max-width: 260px;
  white-space: normal;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.masem-help::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #1f2937;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  z-index: 10;
}
.masem-help:hover::after,
.masem-help:focus::after,
.masem-help:hover::before,
.masem-help:focus::before { opacity: 1; }

.masem-preview {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  max-height: 360px;
  overflow: auto;
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

.parse-method-group {
  margin-top: 16px;
}

.parse-method-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.parse-method-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.parse-method-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.5;
}

.parse-method-opt input[type="radio"] {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--primary);
}

.parse-method-default {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
}

/* ── Token usage footer (step 8) ────────────────── */

.token-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-top: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text-muted);
}

.token-label {
  font-weight: 600;
  color: var(--text);
  margin-right: 4px;
}

.token-stat { color: var(--text-muted); }
.token-sep  { color: var(--border); }
.token-total { font-weight: 600; color: var(--text); }

/* ── Labeling result renderer ───────────────────── */

.label-result {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.label-badge-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.label-badge {
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  border: 1.5px solid #bfdbfe;
  border-radius: 8px;
  padding: 6px 16px;
  line-height: 1.4;
}

.label-badge:hover,
.label-badge:focus {
  background: #dbeafe;
  outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25);
}

.label-confidence {
  font-size: 13px;
  color: var(--text-muted);
}

.label-confidence span.rv-editable {
  font-weight: 600;
  color: var(--text);
}

.label-rationale {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
  background: #f8fafc;
  border-left: 3px solid var(--border);
  padding: 10px 14px;
  border-radius: 0 6px 6px 0;
}

.label-rationale:hover  { background: var(--primary-light); border-left-color: var(--primary); }
.label-rationale:focus  { background: var(--primary-light); border-left-color: var(--primary); outline: none; }

.label-extra-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px;
  align-items: start;
  font-size: 13.5px;
}

.label-evidence-section {
  margin-top: 4px;
}

.label-evidence-heading {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* ── Auto-detected tables (factor loadings, correlation matrix, etc.) ─ */

.rv-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #ffffff;
  margin: 4px 0;
}

.rv-table-caption {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.rv-table-caption-icon {
  color: var(--primary);
  font-size: 12px;
}

.rv-table-source {
  position: relative;
  margin-left: 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--success-light);
  color: var(--success);
  cursor: help;
}

.rv-table-source-auto {
  background: #fef3c7;
  color: #92400e;
}

/* Inline tooltip — replaces the unreliable native `title` attribute.
   Appears on hover, positioned above the pill, with a small arrow. */
.rv-table-source[data-tip]:hover::after,
.rv-table-source[data-tip]:focus::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #fff;
  padding: 8px 11px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.45;
  white-space: normal;
  width: max-content;
  max-width: 280px;
  box-shadow: var(--shadow-md);
  z-index: 20;
  pointer-events: none;
}
.rv-table-source[data-tip]:hover::before,
.rv-table-source[data-tip]:focus::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1e293b;
  z-index: 20;
}

.rv-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.rv-table th,
.rv-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.rv-table th {
  background: var(--bg);
  font-weight: 600;
  color: var(--text);
  border-bottom: 1.5px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
}

.rv-table tr:last-child td { border-bottom: none; }
.rv-table tr:hover td { background: #f8fafc; }

.rv-table .rv-tbl-rowlabel {
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg);
  white-space: nowrap;
}

/* Inline ✕ button on each column header / row label and the "+ col" / "+ row"
   add buttons.  Subtle by default; hover state in red (delete) or green (add).
   IMPORTANT: ``display: flex`` MUST live on inner div, NOT the ``<th>``/``<td>``
   itself — applying flex to a table cell drops it out of the table layout
   and collapses every header into a single column. */
.rv-tbl-coltitle,
.rv-tbl-rowlabel-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: space-between;
}
.rv-tbl-del {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: #cbd5e1;
  font-size: 11px;
  line-height: 1;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  cursor: pointer;
  margin-left: 4px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.rv-tbl-del:hover { color: #dc2626; background: #fef2f2; border-color: #fca5a5; }
.rv-tbl-addcol,
.rv-tbl-addrow .rv-tbl-rowlabel,
.rv-tbl-add-btn {
  text-align: center;
}
.rv-tbl-add-btn {
  appearance: none;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.rv-tbl-add-btn:hover { color: #16a34a; background: #f0fdf4; border-color: #86efac; }
.rv-tbl-addcol-cell { background: transparent; }
.rv-tbl-addrow td   { background: transparent; border-bottom: none; }

.rv-table td .rv-num,
.rv-table td .rv-str,
.rv-table td .rv-bool,
.rv-table td .rv-null {
  display: inline-block;
}

/* ── Help drawer ────────────────────────────────────── */

.help-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  border: none;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  z-index: 90;
  transition: transform 0.15s, background 0.15s;
}
.help-fab:hover { background: var(--primary-dark); transform: translateY(-2px); }

.help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 95;
}
.help-overlay.visible { opacity: 1; pointer-events: auto; }

.help-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(440px, 92vw);
  background: var(--card);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  z-index: 100;
}
.help-drawer.open { transform: translateX(0); }

.help-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.help-drawer-header h2 { font-size: 17px; }

.help-close {
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
}
.help-close:hover { background: var(--bg); color: var(--text); }

.help-drawer-body {
  overflow-y: auto;
  padding: 18px 22px 30px;
  flex: 1;
}

.help-section {
  border-bottom: 1px solid var(--border);
  padding: 12px 0;
}
.help-section:last-child { border-bottom: none; }

.help-section > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  padding: 4px 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.help-section > summary::-webkit-details-marker { display: none; }
.help-section > summary::before {
  content: "▶";
  font-size: 9px;
  color: var(--text-muted);
  transition: transform 0.15s;
}
.help-section[open] > summary::before { transform: rotate(90deg); }

.help-section p,
.help-section ul,
.help-section ol {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  margin-top: 8px;
}

.help-section ul,
.help-section ol { padding-left: 20px; }
.help-list li { margin-bottom: 4px; }

.help-section code {
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  font-size: 11.5px;
  background: var(--bg);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--primary-dark);
}

.help-pre {
  font-family: "SF Mono", "Menlo", "Monaco", monospace;
  font-size: 11.5px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  overflow-x: auto;
  margin-top: 8px;
  line-height: 1.5;
}