/*
 * Approval card — an agent's proposed write, awaiting a human's sign-off. Amber
 * while pending (no choice yet), green once approved, red once rejected.
 */

@layer components {
  .approval {
    max-width: min(80%, 42rem);
    margin-block: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid;
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
  }

  .approval--pending  { background: var(--color-amber-100); border-color: var(--color-amber-300); }
  .approval--approved { background: oklch(from var(--color-green-400) l c h / 0.16); border-color: var(--color-green-400); }
  .approval--rejected { background: oklch(from var(--color-red-400) l c h / 0.12);  border-color: var(--color-red-400); }

  .approval__summary { margin: 0; font-weight: 500; color: var(--color-text-heading); }

  /* A simulation (sandbox) card: subtly muted, and its badge says approving does nothing. */
  .approval--simulation { border-style: dashed; }
  .approval__badge {
    margin-left: var(--space-2);
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-slate-200);
    color: var(--color-slate-700);
    font-size: var(--text-xs);
    font-weight: 600;
    vertical-align: middle;
  }
  .approval__details { margin-top: var(--space-2); }
  .approval__details ul { margin: var(--space-1) 0 0; padding-left: var(--space-4); }

  .approval__actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
  }
  .approval__actions form { margin: 0; }

  .approval__decision { margin: var(--space-2) 0 0; font-weight: 600; }
  .approval--approved .approval__decision { color: var(--color-green-700); }
  .approval--rejected .approval__decision { color: var(--color-red-700); }
  .approval__error { margin-top: var(--space-2); color: var(--color-red-600); }
  .approval__remove { color: var(--color-red-600); } /* deletes called out in red */
}