/* inline-flex shrink-wraps to the grid's own content width (the widest child) rather than
   stretching to the page, so centering the translation over the grid means centering it
   within that shared width, not the whole page. */
#exercise-body { display: inline-flex; flex-direction: column; align-items: center; }
#translation { font-size: 1.3em; font-weight: bold; text-align: center; }
/* Reference worksheet's grid: a real HTML table, border-collapse. A native table is the one
   layout model every browser lays out identically -- adjacent cell borders merge into a
   single shared line automatically, with no gap and no possibility of one column's content
   height drifting its dividers out of line with its neighbors' the way independently-sized
   flex/grid columns could. thead th cells carry no border of their own (Tocharian's column
   label is sr-only, nothing to visually separate; Hittite's visible label sits above the
   table with its own no-border rule in that template) -- only tbody td gets the divider.
   overflow-x lets a long sentence scroll horizontally instead of wrapping, which would break
   the adjacency the whole layout is for. #767676 (not #ccc) on the dividers: they're the
   primary cue separating each cell, and #ccc on white falls short of the 3:1 non-text
   contrast WCAG 1.4.11 needs -- same color this codebase's own letters.html already uses for
   its tray border. */
#grid { border-collapse: collapse; margin: 1em 0; overflow-x: auto; max-width: 100%; }
#grid thead th { border: none; padding: 0; }
#grid tbody td { border: 1px solid #767676; padding: 0.4em; text-align: center; }
#grid tbody tr:first-child td { border-top: 1px solid #767676; }
/* inline-flex, not flex: sized to its own content by default, so the cell's own padding
   shows as visible background around the button instead of the button filling the cell
   edge-to-edge. text-align: center on the td centers it (inline-flex is an inline-level box,
   so it responds to the parent's text-align like any other inline content). Every option's
   width is then equalized to this table's own widest option by grid.js after render (a
   fixed em value either clipped long content or wasted space on short content -- this sizes
   to whatever's actually in THIS exercise's grid, not a guess). */
.option { position: relative; font-size: 1.05em; padding: 0.3em 1.6em 0.3em 0.8em;
          box-sizing: border-box;
          display: inline-flex; flex-direction: column; align-items: center; gap: 0.15em; }
.option-label { font-size: 0.75em; color: #333; }
/* Pre-grading, the blue outline marks the student's pick. Once graded, only the correct
   answer gets an outline -- otherwise a wrong pick's leftover blue selection outline
   out-competes it, and the correct box no longer reads as the one to look at. The wrong
   pick is still marked by its background tint and the ✗ icon, no border. */
.option[aria-pressed="true"]:not(.correct):not(.incorrect) { outline: 3px solid #005a9c; }
.option.correct { font-weight: bold; background: #eaf6ea; outline: 3px solid #0a7a2f; }
.option.incorrect { background: #fbeaea; }
.verdict-icon { position: absolute; top: 0.1em; right: 0.3em; font-size: 0.8em; }
.option.correct .verdict-icon { color: #0a7a2f; }
.option.incorrect .verdict-icon { color: #b00020; }
#submit { font-size: 1em; padding: 0.4em 1.2em; }