Make verified repair acceptance prominent and simplify confirmation email

frontend/app/ui/ResolutionChoice.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+import './resolution-choice.css'
+
+export default function ResolutionChoice({ title, busy, onAnswer }: {
+  title: string; busy: boolean; onAnswer: (resolved: boolean) => void
+}) {
+  return <section className="resolution-choice" aria-labelledby="resolution-question" aria-busy={busy}>
+    <span className="section-kicker">Your answer is needed</span>
+    <h2 id="resolution-question">Is it fixed?</h2>
+    <p>{title}</p>
+    <p>Try the affected content in Grizzlyflix, then choose:</p>
+    <div className="resolution-choice-buttons">
+      <button id="yes" type="button" className="resolution-yes" disabled={busy} onClick={() => onAnswer(true)}><strong>YES</strong><span>It works — close this issue</span></button>
+      <button id="no" type="button" className="resolution-no" disabled={busy} onClick={() => onAnswer(false)}><strong>NO</strong><span>Still broken — keep it open</span></button>
+    </div>
+    {busy && <p role="status">Saving your answer…</p>}
+  </section>
+}

frontend/app/ui/resolution-choice.css

@@ -0,0 +1,13 @@
+.resolution-choice { padding: clamp(20px, 4vw, 36px); border: 1px solid var(--ops-border, #555); border-radius: 18px; background: var(--ops-surface, #202023); margin-bottom: 20px; }
+.resolution-choice h2 { margin: 10px 0; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.1; }
+.resolution-choice p { line-height: 1.5; overflow-wrap: anywhere; }
+.resolution-choice-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; }
+.resolution-choice-buttons button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 130px; padding: 20px; border-radius: 14px; border: 2px solid transparent; text-transform: none; }
+.resolution-choice-buttons button strong { font-size: 2.75rem; line-height: 1; color: inherit; }
+.resolution-choice-buttons button span { color: inherit; opacity: 1; font-size: .9rem; }
+/* Scoped overrides for the legacy global !important button palette. */
+.page .resolution-choice-buttons button.resolution-yes { background: #b4f4d2 !important; color: #10261b !important; border-color: #b4f4d2 !important; }
+.page .resolution-choice-buttons button.resolution-no { background: #ffc1c5 !important; color: #391318 !important; border-color: #ffc1c5 !important; }
+.resolution-choice-buttons button:focus-visible { outline: 3px solid var(--ops-accent, #c7baff); outline-offset: 4px; }
+.resolution-response-page { width: min(760px, 100%); margin: 20px auto; }
+@media (max-width: 520px) { .resolution-choice-buttons { grid-template-columns: 1fr; } .resolution-choice-buttons button { min-height: 104px; } }