/* simple style for my banner pages - Michel */
body { font-family: Tahoma, Arial, sans-serif; max-width:650px; margin:auto; padding:12px; background:#fffdf5; color:#222; }
h1 { color:#00732f; border-bottom:4px solid #ef3340; padding-bottom:4px; }
h2 { background:#eee; padding:4px 8px; font-size:18px; border-left:6px solid #00732f; }
.ar { direction:rtl; text-align:right; font-size:21px; line-height:1.9; }
.line { padding:4px; border-bottom:1px dotted #ccc; }
button { font:inherit; padding:5px 10px; margin:3px; cursor:pointer; border:1px solid #666; background:white; }
button:hover { background:#e8f5e9; }
.card { width:180px; height:110px; display:inline-flex; align-items:center; justify-content:center; text-align:center; border:2px solid #000; margin:5px; cursor:pointer; background:#fff; font-size:20px; padding:5px; vertical-align:top; }
.card.back { background:#e3f2fd; font-size:15px; }
.mcol { display:inline-block; vertical-align:top; width:48%; }
.m { display:block; width:100%; text-align:center; }
.m.sel { background:#fff59d; } .m.done { background:#c8e6c9; color:#555; } .m.bad { background:#ffcdd2; }
.q { margin:8px 0; padding:6px; border:1px solid #ccc; background:white; }
.q label { display:block; }
.ok { color:green; font-weight:bold; } .no { color:#c00; font-weight:bold; }
#score { position:sticky; top:0; z-index:5; margin-bottom:14px; background:#00732f; color:white; padding:6px 10px; font-weight:bold; }
.bar { height:10px; background:#ccc; } .bar div { height:10px; background:#ffd600; width:0; }
.small { font-size:13px; color:#666; }
table { border-collapse:collapse; width:100%; } td,th { border:1px solid #aaa; padding:6px; }

/* QA fixes: keyboard focus */
a:focus-visible, button:focus-visible, input:focus-visible { outline:3px solid #ff9800; outline-offset:2px; }
.card { font-family:inherit; color:#222; }

/* poem box (banners 1-4) */
.poem { direction:rtl; text-align:right; background:white; border:1px solid #ccc; border-right:6px solid #ef3340; padding:8px 12px; margin:10px 0; }
.poem .src { font-size:15px; color:#555; margin:2px 0; }
.poem .bayt { font-size:21px; line-height:1.9; border-bottom:1px dotted #ccc; padding:4px 0; }
.poem .bayt span { display:block; }
.poem .bayt span + span { padding-right:40px; }
.why { direction:rtl; text-align:right; background:#fff8e1; border-right:4px solid #ffb300; padding:6px 10px; margin:10px 0; font-size:17px; }
.why b { color:#c62828; }