[Page: Review] Apply Sage & Blush skin to /review page

Start with review.html and the /review structure from #337, then inspect the Sage & Blush tokens from #341 and components from #342. Apply the specified card, chip, transaction, reasoning, action-button, badge, and empty-state styles. Done means every acceptance criterion is met on the review page, including the Lucide check-circle empty state.

Part of Epic #340 — Sage & Blush UI Redesign

Depends on: #337 (review flow structural redesign), #341 (tokens), #342 (components)

Layer 4 — Review page skin pass. The review flow redesign comes from #337; this ticket applies Sage & Blush.

Current State

The /review page (after #337 lands) shows transactions needing manual classification. Currently uses old blue accent, system font, rounded cards.

Desired State

Clean, action-oriented review experience. Uncertain transactions flagged with amber chips, unrouted with blush chips. Quick-action buttons in Sage & Blush style. Each transaction card is compact and scannable.

Changes Required

Transaction review cards

Each pending transaction gets a card:

.review-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);  /* 4px */
  box-shadow: none;
  padding: var(--space-4);
  margin-bottom: var(--space-2);
}

/* Uncertain = amber left accent */
.review-card.uncertain { border-left: 3px solid var(--warning); }
/* Unrouted = blush left accent */
.review-card.unrouted  { border-left: 3px solid var(--danger); }

Status chips

/* From #342 component layer */
.chip-uncertain {
  background: var(--warning-bg);
  color: var(--warning-fg);
  border: 1px solid var(--warning-border);
  border-radius: 2px;
  font-size: var(--text-xs);  /* 9px */
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  font-weight: 600;
}

.chip-unrouted {
  background: var(--danger-bg);
  color: var(--danger-fg);
  border: 1px solid var(--danger-border);
  /* same other properties */
}

In review.html (from #337), apply these chips:

<!-- Uncertain transaction -->
<span class="chip-uncertain">Uncertain</span>

<!-- Unrouted transaction -->
<span class="chip-unrouted">Unrouted</span>

Merchant + amount display

.review-merchant {
  font-size: var(--text-sm);   /* 11px */
  font-weight: 600;
  color: var(--text-strong);
}
.review-amount {
  font-size: var(--text-xl);   /* 16px */
  font-variant-numeric: tabular-nums;
  color: var(--danger);        /* blush — most are expenses */
}
.review-amount.income { color: var(--income); }  /* sage for income */
.review-date {
  font-size: var(--text-xs);   /* 9px */
  color: var(--muted);
}

Classifier reasoning display

The reasoning block (from #337) should be styled as a subtle info callout:

.review-reasoning {
  font-size: var(--text-xs);   /* 9px */
  color: var(--muted);
  background: var(--bg-subtle);
  border-left: 2px solid var(--border);
  padding: var(--space-1) var(--space-2);
  margin: var(--space-1) 0;
  font-style: italic;
}

Action buttons

Route/classify buttons: rectangular (inherits from #342), use .btn-sm sizing.

• "Route" action → .btn-primary (cobalt)
• "Skip" → .btn-secondary

Empty state

When all transactions are reviewed:

.review-empty {
  text-align: center;
  padding: var(--space-10);
  color: var(--muted);
  font-size: var(--text-sm);
}

Add Lucide icon: <i data-lucide="check-circle" style="color: var(--income);"></i>

Acceptance Criteria

• Review cards: 4px radius, 1px border, no shadow
• Uncertain cards: amber (#C49A3C) left-border accent + amber chip
• Unrouted cards: blush (#B5624E) left-border accent + blush chip
• Status chips: 9px uppercase, 2px radius, semantic colours
• Merchant text: 11px, bold
• Amounts: 16px tabular-nums, blush for expenses, sage for income
• Date: 9px, muted
• Reasoning callout: 9px, italic, bg-subtle, left-border separator
• Action buttons: rectangular, cobalt primary
• Empty state: centered Lucide check-circle in sage colour
• Page count badge ("3 items to review"): uses .label-sm + amber chip if count > 0