/* MV_ReviewFlow — the shared guided per-person review surface (#390).
   One look for both bundle import (#307) and contributor review (#184):
   person cards on warm linen, a soft sage summary bar, kind-medallion item
   rows, and a focused guided step with a destination-context preview.
   Palette + spacing come from variables.css — no literal colours here. */

.rf {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.rf__intro {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

/* Integrity / safety notes — candlelight-honey, never a cold red box. */
.rf__warning {
  margin: 0;
  padding: 10px 14px;
  background: var(--color-remembrance-soft);
  border: 1px solid var(--color-remembrance);
  border-radius: var(--radius-md);
  color: var(--color-remembrance-deep);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.rf__empty {
  margin: 0;
  padding: var(--space-lg);
  text-align: center;
  color: var(--color-text-muted);
  font-style: italic;
}

/* ---- sticky summary bar ---- */
.rf__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.rf__summary {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}
.rf__summary--ready {
  color: var(--color-accent);
}
.rf__bar-actions {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.rf__mini {
  padding: var(--space-xxs) var(--space-sm);
  font-size: var(--font-size-sm);
}

/* ---- person cards ---- */
.rf__groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.rf-group {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-elevated);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
/* Conflicts wear the gentle brass accent — "your call here", never alarm red. */
.rf-group--conflict {
  border-color: var(--color-highlight-soft);
  box-shadow: inset 3px 0 0 var(--color-highlight), var(--shadow-sm);
}
.rf-group--disabled .rf-group__items {
  opacity: 0.45;
  pointer-events: none;
}

.rf-group__head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
}
.rf-group__who {
  flex: 1 1 auto;
  min-width: 0;
}
.rf-group__name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: var(--line-height-tight);
}
.rf-group__meta {
  margin-top: 2px;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.rf-group__badge {
  flex: 0 0 auto;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border-radius: var(--radius-pill);
  padding: 2px var(--space-xs);
}
.rf-group__conflict {
  flex: 0 0 auto;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-highlight-hover);
  background: var(--color-highlight-soft);
  border-radius: var(--radius-pill);
  padding: 2px var(--space-xs);
}

.rf-group__control {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

/* ---- fast path / careful path ---- */
.rf-group__actions {
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;
  padding: var(--space-sm) var(--space-md);
}
.rf-group__action {
  flex: 1 1 auto;
  min-width: 110px;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.rf-group__action--keep {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.rf-group__action--keep:hover:not(:disabled) {
  background: var(--color-accent);
  color: var(--color-surface);
}
.rf-group__action--guided:hover:not(:disabled) {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-soft);
}
.rf-group__action--skip:hover:not(:disabled) {
  background: var(--color-surface-alt);
  color: var(--color-text);
}
.rf-group__action:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.rf-group__action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- item rows ---- */
.rf-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--color-border);
}
.rf-item--conflict {
  background: var(--color-highlight-soft);
}
.rf-item__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.rf-item__thumb {
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}
.rf-item__disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-bg-tint);
  color: var(--color-text-muted);
}
.rf-item__disc svg {
  width: 16px;
  height: 16px;
}
.rf-item__desc {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rf-item__top {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.rf-item__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.rf-item__title {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  word-break: break-word;
}
.rf-item__summary {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  word-break: break-word;
}

/* ---- Keep / Skip segmented control ---- */
.rf-decide {
  flex: 0 0 auto;
  display: inline-flex;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--color-surface);
}
.rf-decide__btn {
  border: none;
  background: transparent;
  padding: var(--space-xxs) var(--space-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.rf-decide__btn:hover {
  background: var(--color-surface-alt);
}
.rf-decide__btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}
.rf-decide__keep.is-active {
  background: var(--color-accent);
  color: #fff;
}
.rf-decide__skip.is-active {
  background: var(--color-surface-alt);
  color: var(--color-text);
  box-shadow: var(--shadow-inset-pressed);
}
.rf-decide__keep + .rf-decide__skip {
  border-left: 1px solid var(--color-border);
}

/* ---- guided mode ---- */
.rf-guided {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.rf-guided__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}
.rf-guided__exit {
  border: none;
  background: transparent;
  padding: var(--space-xxs) var(--space-xs);
  color: var(--color-accent);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.rf-guided__exit:hover {
  background: var(--color-accent-soft);
}
.rf-guided__exit:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.rf-guided__progress {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}
.rf-guided__track {
  height: 4px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-tint);
  overflow: hidden;
}
.rf-guided__track-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  transition: width var(--transition-base);
}
.rf-guided__name {
  margin: var(--space-xs) 0 0;
  font-family: var(--font-serif);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: var(--line-height-tight);
}
.rf-guided__name:focus {
  outline: none;
}
.rf-guided__what {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.rf-guided__title {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}
.rf-guided__preview {
  min-height: 120px;
}
.rf-guided__fallback {
  margin: 0;
  padding: var(--space-md);
  color: var(--color-text-muted);
  font-style: italic;
}
.rf-guided__decide {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  padding-top: var(--space-xs);
}
.rf-guided__skip,
.rf-guided__keep {
  flex: 0 1 180px;
  min-height: var(--touch-target-min);
}
.rf-guided__skip.is-active,
.rf-guided__keep.is-active {
  box-shadow: var(--shadow-glow);
}
.rf-guided__nav {
  display: flex;
  justify-content: space-between;
}
.rf-guided__step {
  border: none;
  background: transparent;
  padding: var(--space-xxs) var(--space-xs);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.rf-guided__step:hover:not(:disabled) {
  color: var(--color-accent);
  background: var(--color-accent-soft);
}
.rf-guided__step:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.rf-guided__step:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- destination-context previews ---- */
.rf-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.rf-preview__destination {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-faint);
}
.rf-preview__card {
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
/* Each kind carries its heritage tint on a soft top accent, echoing the
   chronicle's kind colour system — the preview looks like where it lands. */
.rf-preview__card--story {
  border-top: 3px solid var(--color-highlight);
}
.rf-preview__card--moment {
  border-top: 3px solid var(--color-moment);
}
.rf-preview__card--person {
  border-top: 3px solid var(--color-accent);
}
.rf-preview__card--field {
  border-top: 3px solid var(--color-border-strong);
}

.rf-preview__story-title {
  font-family: var(--font-serif);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}
.rf-preview__story-date {
  margin-top: 2px;
  font-size: var(--font-size-xs);
  color: var(--color-highlight-hover);
  font-weight: var(--font-weight-medium);
}
.rf-preview__story-text {
  margin: var(--space-xs) 0 0;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 260px;
  overflow-y: auto;
}

.rf-preview__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--space-xs);
  padding: var(--space-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.rf-preview__tile {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.rf-preview__tile--existing {
  opacity: 0.45;
}
.rf-preview__tile--incoming {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}
.rf-preview__tile--missing {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  text-align: center;
  padding: var(--space-xs);
}

.rf-preview__moment-date {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-moment);
}
.rf-preview__moment-caption {
  margin-top: 2px;
  font-family: var(--font-serif);
  font-size: var(--font-size-md);
  color: var(--color-text);
}
.rf-preview__moment-subjects {
  margin-top: 2px;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.rf-preview__field-name {
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}
.rf-preview__field-side {
  display: flex;
  gap: var(--space-xs);
  align-items: baseline;
  padding: var(--space-xxs) 0;
}
.rf-preview__field-label {
  flex: 0 0 5rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-faint);
}
.rf-preview__field-value {
  font-size: var(--font-size-sm);
  word-break: break-word;
}
.rf-preview__field-side--ours .rf-preview__field-value {
  color: var(--color-text-muted);
}
.rf-preview__field-side--theirs .rf-preview__field-value {
  color: var(--color-accent);
  font-weight: var(--font-weight-medium);
}
.rf-preview__hint {
  margin-top: var(--space-xs);
  font-size: var(--font-size-xs);
  color: var(--color-text-faint);
  font-style: italic;
}

.rf-preview__person-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.rf-preview__person-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-accent-soft);
}
.rf-preview__person-name {
  font-family: var(--font-serif);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}
.rf-preview__person-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.rf-preview__person-detail {
  margin-top: var(--space-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.rf-preview__photos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}
.rf-preview__photos-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}

/* ---- touch / small viewports (MOBILE/TOUCH PARITY RULE) ---- */
@media (max-width: 640px) {
  .rf-item {
    flex-wrap: wrap;
  }
  .rf-item__desc {
    flex: 1 1 60%;
  }
  .rf-decide {
    flex: 1 1 100%;
    justify-content: stretch;
  }
  .rf-decide__btn {
    flex: 1 1 0;
    text-align: center;
  }
  .rf-group__action {
    flex: 1 1 100%;
  }
  .rf-guided__decide {
    flex-wrap: wrap;
  }
  .rf-guided__skip,
  .rf-guided__keep {
    flex: 1 1 40%;
  }
}

@media (hover: none) and (pointer: coarse) {
  .rf-decide__btn,
  .rf__mini,
  .rf-group__action,
  .rf-guided__exit,
  .rf-guided__step {
    min-height: var(--touch-target-min);
  }
  .rf-decide__btn,
  .rf-group__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rf-group__action,
  .rf-decide__btn,
  .rf-guided__track-fill {
    transition: none;
  }
}