/* ═══════════════════════════════════════════════════════════════════
   review.css — the derived-field review/edit surface (Step 9) and the
   post-Phase-2 diff.

   Three zones, in this order:
     1 .review-zone[data-zone="confirmed"]  your words, read-only + jump links
     2 .review-zone[data-zone="written"]    we wrote this — edit anything
     3 .review-zone[data-zone="gaps"]       driven by meta.gaps
   ═══════════════════════════════════════════════════════════════════ */

.review-zone { margin-bottom: var(--sp-8); }

.review-zone-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
}
.review-zone-head h3 { font-size: var(--fs-lg); }
.review-zone-head .review-zone-note {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.review-zone-head .review-zone-step {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

/* ── Zone 1 — confirmed, read-only ───────────────────────────────── */
.review-confirmed {
  display: grid;
  gap: var(--sp-3);
}
.review-confirmed .review-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-3);
  align-items: start;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-light);
  font-size: var(--fs-md);
}
.review-confirmed .review-line .label {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.review-confirmed .review-line .value { word-break: break-word; }
.review-confirmed .review-line .answer-rows { margin-top: var(--sp-2); }
.review-confirmed .review-line .jump { font-size: var(--fs-xs); white-space: nowrap; }
/* A private answer is the user's to read back and nobody else's; the zone
   headline says "nothing here was written for you", not "this is public". */
.review-confirmed .review-line[data-private] { border-left: 2px solid var(--violet-light); padding-left: var(--sp-3); }

/* ── Zone 2 — AI-written, inline editable ────────────────────────── */
.review-field {
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--violet);
  border-radius: var(--r-md);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.review-field:focus-within {
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.review-field-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.review-field-head .review-label {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}
.review-field-head .review-path {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

/* "AI-written · edit me" — the invitation is the point. */
.review-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--violet);
  background: var(--violet-light);
  border: 1px solid var(--violet);
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.review-badge.edited {
  color: var(--green-text);
  background: var(--green-light);
  border-color: var(--green);
}
.review-badge.user {
  color: var(--text-secondary);
  background: var(--bg-sunken);
  border-color: var(--border);
}

/* The editable control itself — a textarea, or a contenteditable block.
   Reads as prose until touched, so the page does not look like a form. */
.review-input {
  width: 100%;
  padding: var(--sp-3);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--text);
  background: var(--bg-sunken);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  resize: vertical;
}
.review-input:hover { border-color: var(--border); }
.review-input:focus {
  background: var(--card);
  border-color: var(--accent);
  box-shadow: var(--ring);
}
.review-field[data-dirty] .review-input { background: var(--card); border-color: var(--green); }

.review-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.review-actions .review-status {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
/* Revert only means anything once a field is dirty. */
.review-revert[hidden] { display: none; }
.review-field:not([data-dirty]) .review-revert { opacity: 0.45; pointer-events: none; }

.review-field[data-busy] .review-input { opacity: 0.55; pointer-events: none; }

/* ── Zone 3 — gaps ───────────────────────────────────────────────── */
.gap-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
  background: var(--amber-light);
  border: 1px solid var(--amber-border);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.gap-item .gap-text { flex: 1 1 240px; min-width: 0; color: var(--amber-text); }
.gap-item .gap-text strong { display: block; color: var(--text); }
/* "That's fine, leave it out" is a valid terminal state, so it is not a
   destructive-looking button. */
.gap-item[data-accepted] {
  background: var(--bg-sunken);
  border-color: var(--border);
  opacity: 0.75;
}
.gap-item[data-accepted] .gap-text { color: var(--text-muted); }
/* Filled in place — the gap is closed, and it closed here. */
.gap-item[data-filled] {
  background: var(--green-light);
  border-color: var(--green);
}
.gap-item[data-filled] .gap-text { color: var(--green-text); }

/* "Add one" expands the card rather than leaving the results screen. */
.gap-form {
  flex: 1 1 100%;
  min-width: 0;
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--amber-border);
}
.gap-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.gap-status {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.gap-item[data-expanded] { align-items: flex-start; }

/* ── Post-Phase-2 diff — never a silent overwrite ────────────────────
   Single column on a phone; side by side only when it fits.           */
.diff {
  margin-bottom: var(--sp-5);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.diff-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.diff-head .review-path { margin-left: auto; }

.diff-panes {
  display: grid;
  grid-template-columns: 1fr;
}
.diff-pane {
  padding: var(--sp-4);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
}
.diff-pane .diff-pane-label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.diff-pane[data-side="old"] {
  background: var(--diff-old-bg);
  border-bottom: 1px solid var(--diff-old-border);
}
.diff-pane[data-side="old"] .diff-pane-label { color: var(--red-text); }
.diff-pane[data-side="new"] { background: var(--diff-new-bg); }
.diff-pane[data-side="new"] .diff-pane-label { color: var(--green-text); }

.diff-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
}
.diff[data-resolved="new"] .diff-pane[data-side="old"],
.diff[data-resolved="old"] .diff-pane[data-side="new"] { opacity: 0.45; }

@media (min-width: 640px) {
  .diff-panes { grid-template-columns: 1fr 1fr; }
  .diff-pane[data-side="old"] {
    border-bottom: none;
    border-right: 1px solid var(--diff-old-border);
  }
}