/**
 * The review grid (spec 4.3): one row per check. The upright crop, about 500 px wide, is
 * the payload and gets the left of every row; the fields sit in a compact column to its
 * right. Buttons are small and gray; done rows dim. Field states and the magnifier live in
 * review-fields.css, the settings panel in settings-panel.css (imported here because this
 * file is the one index.html links for the review page).
 */

@import url("./review-fields.css");
@import url("./settings-panel.css");

.review-step {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-unit) * 2);
  margin-top: calc(var(--spacing-unit) * 3);
}

/* A hand-drawn slate rule in the margin above the review step, absolutely placed so the
   step's own layout does not move. */
.review-step {
  position: relative;
}

.review-step::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--spacing-unit) * -2.5);
  height: 6px;
  background: var(--rule-hand-drawn) center / 100% 100% no-repeat;
  pointer-events: none;
}

.review-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing-unit) * 2);
}

.review-toolbar--bottom {
  justify-content: flex-start;
}

.email-date-label {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--spacing-unit);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.email-date-input {
  width: 9.5em;
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 5px 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-field);
  color: var(--color-text);
}

.email-date-input:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 0;
  border-color: var(--color-accent);
}

.review-heading {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
}

.review-rows {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-unit) * 2);
}

.review-row {
  display: grid;
  grid-template-columns: 500px minmax(0, 1fr) auto;
  gap: calc(var(--spacing-unit) * 3);
  align-items: start;
  padding: calc(var(--spacing-unit) * 2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  transition: opacity 150ms ease;
}

.review-row--done {
  opacity: 0.55;
}

.review-crop-column {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-unit);
}

.review-crop-frame {
  position: relative;
  width: 500px;
}

.review-crop-canvas {
  width: 500px;
  height: auto;
  display: block;
  border-radius: 4px;
  background: var(--color-sunken);
  cursor: zoom-in;
}

.review-crop-placeholder {
  width: 500px;
  aspect-ratio: 2.3;
  border-radius: 4px;
  background: var(--color-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.review-row-number {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-text);
}

.review-crop-actions {
  display: flex;
  align-items: baseline;
  gap: calc(var(--spacing-unit) * 1.5);
}

.small-link-button {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--color-border);
  text-underline-offset: 3px;
}

.small-link-button:hover {
  color: var(--color-accent);
}

/* Wide enough for "Copied", so the flash never shifts the row's fields. */
.review-row-side .quiet-button {
  min-width: 7.5em;
}

.review-row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(var(--spacing-unit) * 1.5);
}

.review-done-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  cursor: pointer;
}

.review-done-label input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-accent);
}

/* Waiting for its crop: a shimmering card the shape of a check, never an empty box. */
.review-crop-placeholder {
  background: linear-gradient(100deg, var(--color-sunken) 20%, var(--color-sunken-highlight) 40%, var(--color-sunken) 60%) 0 0 / 300% 100%;
  animation: field-shimmer 1.4s linear infinite;
}

.review-crop-placeholder-text {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
}

/* The crop fades in once it arrives. */
.review-crop-frame:not([hidden]) .review-crop-canvas {
  animation: field-arrive 450ms var(--ease-out);
}

/* "Click to enlarge", shown on hover so the crop reads as clickable. */
.review-crop-enlarge-hint {
  position: absolute;
  right: 8px;
  top: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(var(--shadow-color), 0.72);
  color: var(--color-surface);
  font-size: 0.75rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease;
}

.review-crop-frame:hover .review-crop-enlarge-hint {
  opacity: 1;
}

.review-reread-status {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--color-accent);
}

.review-reread-status::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: dot-pulse 0.8s ease-in-out infinite alternate;
}

.quiet-button.button--copied {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}

/* Done rows step back, but the fields stay readable (text never below AA). */
.review-row--done {
  opacity: 1;
  background: var(--color-done-row);
}

.review-row--done .review-crop-column,
.review-row--done .review-field-input {
  opacity: 0.6;
}

.review-row--done .review-row-number::after {
  content: " ✓ done";
  font-weight: 500;
  color: var(--color-accent);
}