/* style.css — light-mode-only quiz site styling.
   Why: house rule = light UI only; flat, readable, fast (no web fonts).
   NEVER DELETE COMMENTS — explain every non-obvious line.
   Update comments with the code; do not strip them. */
:root { --ink:#1d1d1f; --mute:#6e6e73; --line:#e5e5ea; --accent:#0a7d4f; --ok:#d6f5e3; --bad:#fde2e1; }
* { box-sizing:border-box; }
body { margin:0; font:17px/1.55 -apple-system,system-ui,Segoe UI,Roboto,sans-serif; color:var(--ink); background:#fff; }
header, main, footer { max-width:820px; margin:0 auto; padding:16px 20px; }   /* single readable column */
header { border-bottom:1px solid var(--line); }
.brand { font-weight:700; color:var(--accent); text-decoration:none; font-size:20px; }
a { color:var(--accent); }
h1 { line-height:1.2; margin:.4em 0 .2em; }
.meta, .crumb, footer { color:var(--mute); font-size:15px; }
footer { border-top:1px solid var(--line); margin-top:40px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; }  /* tiles reflow on phones */
.card { display:flex; flex-direction:column; padding:12px 14px; border:1px solid var(--line); border-radius:10px; text-decoration:none; color:var(--ink); }
.card span { color:var(--mute); font-size:14px; }
.card:hover { border-color:var(--accent); }
.score { position:sticky; top:0; background:#fff; padding:8px 0; font-weight:600; border-bottom:1px solid var(--line); z-index:1; } /* stays visible while scrolling */
.q { padding:14px 0; border-bottom:1px solid var(--line); }
.ans { display:block; width:100%; text-align:left; margin:6px 0; padding:10px 12px; font:inherit; background:#fff; border:1px solid var(--line); border-radius:8px; cursor:pointer; }
.ans:hover { border-color:var(--accent); }
.ans.ok { background:var(--ok); border-color:#34c759; }    /* correct answer revealed */
.ans.bad { background:var(--bad); border-color:#ff3b30; }   /* user's wrong pick */
.ad { margin:18px 0; min-height:90px; }                       /* reserve space: avoids layout shift */