/* Billedkryds (nonogram). Sizes derive from one cell width: the wrapper is a size
   container and --units is the board width in cells plus the row-clue column. */
.nonogram-wrap {
  --cell: calc(100cqw / var(--units));
  display: grid; width: min(100%, 480px); container-type: inline-size;
  user-select: none; -webkit-user-select: none;
}
.nonogram-wrap > * { min-width: 0; min-height: 0; }
.nonogram-cols { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(var(--n), 1fr); padding: 0 3px; }
.nonogram-rows { grid-column: 1; grid-row: 2; display: grid; grid-template-rows: repeat(var(--n), 1fr); padding: 3px 0; }
.nonogram-wrap .clue {
  display: flex; font-size: calc(var(--cell) * 0.5); font-weight: 600; line-height: 1.15;
  font-variant-numeric: tabular-nums; color: var(--ink); border-radius: 4px; transition: color 0.15s;
}
.nonogram-cols .clue { flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: calc(var(--cell) * 0.15); }
.nonogram-rows .clue { align-items: center; justify-content: flex-end; gap: 0.35em; padding-right: calc(var(--cell) * 0.22); }
.nonogram-cols .clue:nth-child(even), .nonogram-rows .clue:nth-child(even) { background: #0000000a; }
.nonogram-wrap .clue.active { background: #cfe3fb; }
.nonogram-wrap .clue.done { color: #b4b0a8; }
.nonogram-wrap .clue.bad { color: var(--bad); background: #d32f2f1f; }

.grid.nonogram { grid-column: 2; grid-row: 2; width: 100%; }
.nonogram .cell { border-color: #c8c4bc; cursor: pointer; transition: background-color 0.08s; }
.nonogram .cell.edge-r { border-right: 2px solid var(--line); }
.nonogram .cell.edge-b { border-bottom: 2px solid var(--line); }
.nonogram .cell.on { background: #2b2b2b; }
.nonogram .cell.x { font-size: calc(var(--cell) * 0.42); color: #0000006b; }
.nonogram:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.nonogram:focus-visible .cell.cursor { box-shadow: inset 0 0 0 3px var(--accent); }
.nonogram-wrap.solved .cell.x { color: transparent; }
.nonogram-wrap.solved .nonogram .cell { border-color: transparent; box-shadow: none; }

.nonogram-modes button { min-width: 7em; }
.nonogram-modes button[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: #fff; }