/* 406 SHARED·POSTLOG — the post-log review card. (bake-off CLOSED 2026-08-25, Andrew)
 *
 * 🔴 THE BAKE-OFF IS CLOSED BY ADOPTING WHAT SHIPPED. `views/capture.js` has rendered this card in
 * production the whole time `406` sat at `bakeoff` with no CSS and no renderer — the app held the
 * answer while the registry held the question, and a bake-off that outlives a shipped answer stops
 * being exploration and becomes a decoy (DECISIONS-INBOX 2026-08-25). Andrew's ruling: the shipped
 * card IS the master. So it moves out of `app.css`, becomes self-contained under its own root, and
 * the decoy dies.
 *
 * ⚠️ MIGRATED ON THE WAY, because a copy's tokens are what made it a copy:
 *   --paper-card → --surface-card   ·   --r-md → --radius-card   ·   --paper → --surface-well
 *   --ink → --text-primary          ·   --r-sm → --radius-8
 *   padding 14px 16px → var(--space-16)      (14 was off the 4px grid, D-511)
 *   margin-bottom 12px → var(--space-12)     ·   gaps 6/8/10px → --space-8 / --space-12
 *   border-left 3px → var(--dim-4)           (3 was off the grid; the box family's bar is 4)
 * The 3px accent bar is now the 4px `--dim-4` rule every other box wears. It is NOT given a kind
 * triple: this is a utility review row, not a box-family member, and inventing a kind for it would
 * be a design decision arriving through a migration.
 *
 * Self-contained under `.review-card` (D-470 corollary): every element it renders is styled here,
 * with no reliance on app.css or user-agent defaults. */

.review-card {
  background: var(--surface-card);
  border-radius: var(--radius-card);
  padding: var(--space-16);
  margin-bottom: var(--space-12);
  border-left: var(--dim-4) solid var(--accent);
}

.review-card .tag { margin-bottom: var(--space-8); }

.review-card .summary {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-500);
  margin-bottom: var(--space-8);
  color: var(--text-primary);
}

/* the raw payload, shown verbatim — the one place a mono voice is right, because it IS data */
.review-card .data {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  background: var(--surface-well);
  padding: var(--space-8);
  border-radius: var(--radius-8);
  color: var(--text-secondary);
  margin-bottom: var(--space-12);
  overflow-x: auto;
}

.review-card .review-actions { display: flex; gap: var(--space-8); }

.review-card .review-actions button {
  padding: var(--space-8) var(--space-12);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  border-radius: var(--radius-8);
  border: 1px solid var(--border-hairline);
  cursor: pointer;
  transition: background var(--duration-150) var(--ease-standard);
}

.review-card .review-actions .save { background: var(--accent); color: var(--text-on-accent); border: 0; }
.review-card .review-actions .save:active { opacity: 0.72; }
.review-card .review-actions .skip { background: transparent; color: var(--text-secondary); }
.review-card .review-actions .skip:active { opacity: 0.72; }

.review-card .review-actions button:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }