/* MV_RecordsCheck — the gentle records review modal (#419). */

.records-check__intro {
  margin: 0 0 var(--space-md);
  color: var(--color-text-muted);
  line-height: 1.55;
}

.records-check__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.records-check__row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-elevated);
  padding: var(--space-xs) var(--space-sm);
  min-width: 0;
}

.records-check__row .mv-medallion {
  flex-shrink: 0;
}

.records-check__message {
  flex: 1;
  min-width: 0;
  color: var(--color-text);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.records-check__open {
  flex-shrink: 0;
  white-space: nowrap;
}

/* At phone widths the row stacks: medallion + sentence on the first line, the
   action underneath (a flexible message would otherwise shrink to a sliver
   beside the no-wrap button). Still a full-size touch target (MOBILE/TOUCH
   PARITY). */
@media (max-width: 480px) {
  .records-check__row {
    flex-wrap: wrap;
  }

  .records-check__message {
    flex: 1 1 calc(100% - 30px - var(--space-sm)); /* the full first line, past the medallion */
  }

  .records-check__open {
    margin-left: calc(30px + var(--space-sm)); /* align under the message, past the medallion */
  }
}

@media (hover: none) and (pointer: coarse) {
  .records-check__open {
    min-height: 44px;
  }
}

/* The all-clear — calm and warm, never a bare "no results". */
.records-check__empty {
  text-align: center;
  padding: var(--space-lg) var(--space-md);
}

.records-check__empty-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-size-lg);
  color: var(--color-text);
  margin: 0 0 var(--space-xs);
}

.records-check__empty-detail {
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
}