From 5f4d96216866c03cb5454573ee06655bd09f5b53 Mon Sep 17 00:00:00 2001
From: amosblomqvist <amosblomqvist@gmail.com>
Date: Sun, 13 Sep 2026 01:33:23 +0300
Subject: [PATCH] Wave-5 refinement round 4 (owner): explanation flush-left
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The muted 'Why' box's px-3 double-inset with card p-4 — the W-label sat
deeper than the option-box edges. px removed (py-2 stays for vertical
air); the label now aligns with everything else on the left edge. The
rounded bg-muted box is bg-matched so its padding was invisible anyway.
---
 components/answered-card.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/components/answered-card.tsx b/components/answered-card.tsx
index eb6d836..33ba81a 100644
--- a/components/answered-card.tsx
+++ b/components/answered-card.tsx
@@ -106,8 +106,11 @@ export function AnsweredCard({ answer }: { answer: QuestionAnswerData }) {
 				</div>
 			)}
 
+			{/* px-3→removed: card p-4 + box px-3 double-inset sat the "Why" label deeper
+			    than the option box edges (owner, round 3). Sides flush with everything
+			    else; py-2 stays for vertical air. */}
 			{isQuiz && answer.explanation && (
-				<div className="mt-3 rounded-lg bg-muted px-3 py-2 text-sm text-muted-foreground">
+				<div className="mt-3 rounded-lg bg-muted py-2 text-sm text-muted-foreground">
 					<span className="font-medium text-foreground">Why: </span>
 					{/* The markdown wrapper must go truly inline — a block <p> after the
 								   "Why:" label created the oversized leading gap (owner's fix list). */}