/* bl-choice.css - the answer option, one component for the tools' quizzes (assets/js/bl-choice.js; coordinator, 21 Oct
   2026: "the same buttons as the lesson player"). The lesson player's option (learn.css .lq-tile) in the tools: a 2 px
   border, a 16 px radius, the number badge (1 to 4, the keyboard hint, always shown), the label left-aligned beside it;
   states chosen, right, wrong (the raspberry --blc-miss), faded; the tick in a fixed slot on the far edge, so the label
   never moves. No pills, no 3D lip, no hairlines; 60 px tall (72 from 860 px), so every target is over 44 px.
     .blc-list         the grid of options (one per row on a phone, 2 x 2 from 561 px, one column beside a stage from 860 px: .blc-list.col)
     .blc              one option (a button); .blc .k the badge; .blc .c the label; .blc .blc-tk the tick
     .is-chosen .is-right .is-wrong .is-faded   the states (bl-choice.js mark()) */
.blc-list{--blc-right:#13804f;--blc-right-bg:#edfbf0;--blc-miss:#b03a5b;--blc-miss-bg:#fde7ee;display:grid;grid-template-columns:1fr;gap:10px}
/* one per row on a phone, as the lesson player (two side by side broke "Bulgaria" into "Bulg aria" at 390); two from 561 px; one
   column again beside a stage from 860 (.col) */
@media (min-width:561px){.blc-list{grid-template-columns:1fr 1fr}}
:root[data-theme="dark"] .blc-list{--blc-right:#3fd59a;--blc-right-bg:#10301f;--blc-miss:#ff8fab;--blc-miss-bg:#2a1630}
@media (min-width:860px){.blc-list.col{grid-template-columns:1fr;gap:12px}}
.blc{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:60px;padding:12px 52px 12px 14px;text-align:start;
  font:600 18px/1.3 var(--f-body);color:var(--ink);background:var(--surface);border:2px solid var(--rule-2);border-radius:16px;cursor:pointer;
  transition:border-color .12s cubic-bezier(.22,1,.36,1),background-color .12s cubic-bezier(.22,1,.36,1),transform .09s cubic-bezier(.34,1.56,.64,1)}
@media (min-width:860px){.blc{min-height:72px;font-size:20px}}
.blc .k{flex:none;width:30px;height:30px;border-radius:9px;border:2px solid var(--rule-2);display:grid;place-items:center;font:700 14px/1 var(--f-body);color:var(--ink-3)}
.blc .c{flex:1 1 auto;min-width:0;overflow-wrap:break-word;hyphens:manual}   /* a word breaks only when it cannot fit at all */
.blc:hover{border-color:color-mix(in srgb,var(--study) 55%,var(--rule-2))}
.blc:active{transform:scale(.98)}
.blc:focus-visible{outline:3px solid var(--study-ink);outline-offset:2px}
.blc.is-chosen{border-color:var(--study);background:var(--study-tint)}
.blc.is-chosen .k{border-color:var(--study);color:var(--study-ink)}
.blc.is-right{border-color:var(--blc-right);background:var(--blc-right-bg)}
.blc.is-right .k{border-color:var(--blc-right);color:var(--blc-right)}
.blc.is-wrong{border-color:var(--blc-miss);background:var(--blc-miss-bg)}
.blc.is-wrong .k{border-color:var(--blc-miss);color:var(--blc-miss)}
.blc.is-faded{opacity:.55}
.blc[aria-disabled="true"]{cursor:default}
.blc[aria-disabled="true"]:active{transform:none}
/* the far edge: the tick (or the cross on the one you picked) in its own slot, out of the flow */
.blc .blc-tk{position:absolute;inset-inline-end:14px;top:50%;width:28px;height:28px;margin-top:-14px;border-radius:50%;display:grid;place-items:center;color:var(--surface);animation:blcTk .32s cubic-bezier(.22,1,.36,1) both}
.blc.is-right .blc-tk{background:var(--blc-right)}
.blc.is-wrong .blc-tk{background:var(--blc-miss)}
.blc .blc-tk svg{display:block;width:18px;height:18px}
@keyframes blcTk{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@media (max-width:380px){.blc{padding:10px 44px 10px 10px;gap:10px;font-size:16px}.blc .blc-tk{inset-inline-end:10px}}
@media (prefers-reduced-motion:reduce){.blc{transition:none}.blc:active{transform:none}.blc .blc-tk{animation:none}}