/* Solve-online crossword (/crosswords/<set>/, public/crossword.js). Uses the tokens in style.css. */
.cw { margin: var(--section) 0 0; }
.cw-play { display: grid; gap: var(--s5); align-items: start; }
@media (min-width: 900px) { .cw-play { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* Squares never go below 24px (WCAG 2.2 target size): a big grid on a narrow phone scrolls inside its own box. */
.cw-scroll { overflow-x: auto; max-width: 100%; }
.cw-board { display: none; container-type: inline-size; width: max(min(100%, calc(var(--cols) * 52px)), calc(var(--cols) * 24px)); }
.cw-ready .cw-board { display: grid; grid-template-columns: repeat(var(--cols), 1fr); }
.cw-nojs { color: var(--muted); }
.cw-ready .cw-nojs { display: none; }
.cw-x { aspect-ratio: 1; }
.cw-sq { position: relative; aspect-ratio: 1; background: #fff; outline: 2px solid var(--ink); outline-offset: -1px; display: block; }
.cw-sq input {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; margin: 0; padding: 12% 0 0; background: transparent;
  text-align: center; font: 800 calc(100cqi / var(--cols) * .5) / 1 var(--font); color: var(--ink); text-transform: uppercase;
  caret-color: transparent; border-radius: 0; -webkit-appearance: none; appearance: none;
}
.cw-sq input:focus { outline: 3px solid var(--focus); outline-offset: -3px; background: var(--sun); }
.cw-n { position: absolute; left: 6%; top: 2%; font-size: max(9px, calc(100cqi / var(--cols) * .26)); line-height: 1.1; font-weight: 700; pointer-events: none; }
.cw-hl { background: var(--sun-soft); }
.cw-bad { background: #ffe1db; }
.cw-bad input { color: #b3261e; text-decoration: line-through; }
.cw-now { min-height: 1.6em; font-weight: 700; margin: var(--s3) 0 0; }
.cw-btns { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0 0; }
.cw-status { min-height: 1.6em; margin: var(--s2) 0 0; }
.cw-clues h3 { margin: var(--s4) 0 var(--s2); font-size: var(--t-lg); }
.cw-clues ol { list-style: none; padding: 0; margin: 0; }
.cw-clues li { padding: 6px 10px; border-radius: 10px; margin: 2px 0; }
.cw-clues li b { display: inline-block; min-width: 2.2ch; }
/* The script turns each clue into a button that jumps to its answer; it reads as plain text. */
.cw-clues .cw-clue { all: unset; display: block; width: 100%; min-height: 24px; cursor: pointer; border-radius: 8px; }
.cw-clues .cw-clue:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.cw-clues li:hover { background: var(--blue-soft); }
.cw-clues li.cw-on { background: var(--sun-soft); }
.cw-pic { width: 56px; height: 56px; vertical-align: middle; }
@media print { .cw { display: none; } }