/* Round 10, lane 005: Core 1,000 (#/practice/core, the sprint) and the items it shares with the level check
   (features/shared/core-items.js: .ci-*). Phone first: 56 px choices, one column. */

/* ---------- a choice item ---------- */
.ci-card { display: grid; gap: var(--s-3); }
.ci-ctx { margin-top: var(--s-2); }
.ci-ctx b { font-weight: 600; }
.ci-voice { min-height: var(--tap); display: flex; align-items: center; }
.ci-hear { min-height: var(--tap); gap: var(--s-2); }
.ci-novoice { margin: 0; }
.ci-choices { display: grid; gap: var(--s-2); }
.ci-choice { display: flex; align-items: center; gap: var(--s-3); min-height: 56px; width: 100%; padding: var(--s-2) var(--s-4); border: 0; border-radius: var(--r-ctl);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline-strong); color: var(--ink); font: 500 16px/1.3 var(--font-ui); text-align: start; cursor: pointer; }
.ci-choice:disabled { cursor: default; }
.ci-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ci-key { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); font: 500 12px/1 var(--font-mono); }
.ci-text { flex: 1; min-width: 0; }
.ci-choice.is-picked { box-shadow: inset 0 0 0 1.5px var(--ink); }
.ci-choice.is-right { box-shadow: inset 0 0 0 1.5px var(--ok); background: var(--ok-soft); }
.ci-choice.is-wrong { box-shadow: inset 0 0 0 1.5px var(--bad); background: var(--bad-soft); }
.ci-choice:disabled:not(.is-picked, .is-right, .is-wrong) { color: var(--ink-3); }
.ci-dkrow { display: flex; }
.ci-dk { min-height: var(--tap); }
.ci-dk.is-picked { box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ---------- a cloze ---------- */
.ci-cloze { display: grid; gap: var(--s-2); }
.ci-en { margin: 0; color: var(--ink-2); font-size: 15px; }
.ci-gapped { margin-top: 0; }
.ci-blank { display: inline-block; min-width: 3.5em; border-bottom: 2px solid var(--accent); }
.ci-fb { margin-top: var(--s-3); }

/* ---------- the page ---------- */
.core-head { margin-top: var(--s-4); display: grid; gap: var(--s-3); }
.core-figure { margin: 0; display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.core-figure .figure { font: 300 var(--fs-figure)/1 var(--font-display); letter-spacing: -0.025em; }
.core-of { color: var(--ink-2); }
.core-bar { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.core-band { position: relative; height: 4px; border-radius: 2px; background: var(--cell-empty); overflow: hidden; }
.core-band > i { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--ink); }
.core-due { margin-top: var(--s-4); }
.core-actions { margin-top: var(--s-5); display: flex; flex-wrap: wrap; gap: var(--s-3); }
.core-actions .btn-primary { min-height: 52px; }

/* ---------- the sprint ---------- */
.core-card { display: grid; gap: var(--s-3); }
.core-answer { margin-top: var(--s-2); }
.core-fb .answer-key { margin-top: var(--s-2); }