/* Styles for the math facts pages: the big fact and its four answers, the set and table pickers, the fact map, and the
   summary. Loaded after theme.css and game.css. */
/* the fact, big, and four answers in a 2 × 2 grid, big enough for a finger */
.fact{font:800 clamp(44px,12vw,72px)/1 var(--display);margin:4px 0;text-align:center;letter-spacing:.01em}
.fchoices{grid-template-columns:1fr 1fr}
/* a stacked fraction in the fact, a choice, or the typed answer keeps the big size; the note under the fact */
.fact .fr,.fchoices .fr,.typed .fr{font-size:.62em;vertical-align:middle}
.factnote{text-align:center;margin-top:-8px}
.factnote:empty{display:none}
.fchoices .choice{font:800 clamp(28px,7vw,40px) var(--display);padding:18px 10px}
/* typing an answer: what's typed so far (yes or no once checked), and the number pad, 3 keys across, big for a finger */
.typed{font:800 clamp(36px,10vw,56px)/1 var(--display);text-align:center;padding:12px;border:2px solid rgba(170,205,255,.4);border-radius:14px;background:#0a2340;min-height:1.4em}
.typed.yes{border-color:var(--good);background:rgba(95,224,168,.15)}
.typed.no{border-color:var(--bad)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px;max-width:420px;margin-inline:auto}
.pad button{background:#0a2340;border:2px solid rgba(170,205,255,.4);border-radius:12px;padding:14px 0;font:800 26px var(--display)}
.pad button:hover:not(:disabled){border-color:var(--gold)}
.pad button.go{background:var(--gold);color:#1a1300;border-color:var(--gold)}
.pad button.go.wide{grid-column:1 / -1}
.pad button:disabled{opacity:.5}
/* a sprint's time left: a bar that empties over the minute, with the seconds beside it */
.sprintbar{position:relative;height:28px;border-radius:14px;background:rgba(170,205,255,.12);border:1.5px solid rgba(170,205,255,.35);margin-bottom:12px;overflow:hidden}
.sprintfill{position:absolute;inset:0 auto 0 0;background:var(--gold);transition:width .2s linear}
.sprintbar span{position:relative;display:block;text-align:center;font:700 14px/25px var(--mono);color:#fff;mix-blend-mode:difference}
/* the setup screen: space between its cards, section headings, notes, the row with Start, and the table toggles */
#setup .card + .card{margin-top:16px}
h2.fset{font:800 21px var(--display);margin:0}
h3.fsub{font:700 15px var(--mono);color:var(--dim);margin:4px 0 0}
.fnote{margin:0;color:var(--dim)}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.known{color:var(--dim);font:500 15px var(--mono);margin:0}
.seg.tables button{min-width:58px}
/* the fact map: fh the numbers along the top and side; fm a fact (new, missed, learning, known; out when it isn't in the facts
   picked; cur when tapped); fm-chip a color in the legend */
.fh rect{fill:rgba(169,196,228,.25);stroke:rgba(243,246,251,.35);stroke-width:1}
.fm{cursor:pointer}
.fm rect{stroke:rgba(10,35,64,.7);stroke-width:1}
.fm.new rect,.fm-chip.new{fill:rgba(170,205,255,.16);background:rgba(170,205,255,.16)}
.fm.missed rect,.fm-chip.missed{fill:var(--bad);background:var(--bad)}
.fm.learning rect,.fm-chip.learning{fill:var(--gold);background:var(--gold)}
.fm.known rect,.fm-chip.known{fill:var(--good);background:var(--good)}
.fm.missed text,.fm.learning text,.fm.known text{fill:#0a2340}
.lbl.xs{font-size:9px}
.fm.out{opacity:.3}
.fm.cur rect{stroke:#fff;stroke-width:3}
.fm:focus{outline:none}.fm:focus rect{stroke:#fff;stroke-width:3}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font:500 14px var(--mono);color:var(--dim)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.fm-chip{display:inline-block;width:16px;height:16px;border-radius:4px;border:1px solid rgba(10,35,64,.7)}
/* the summary's facts to work on */
.worklist{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0}
.worklist span{font:700 17px var(--mono);background:rgba(255,154,134,.12);border:1.5px solid var(--bad);border-radius:10px;padding:6px 12px}