* {
  font-family: monospace;
  font-size: large;
}

body {
  max-width: 80ch;
  margin: auto;
  padding: 10px;
}

/* --- the grid --- */

#grid {
  border-collapse: collapse;
}

#grid td {
  width: 2ch;
  height: 2ch;
  text-align: center;
  padding: 6px 8px;
  cursor: pointer;
  /* Thin lines between cells, thickened below where a block ends. */
  border: 1px solid #bbb;
  background-color: #fff;
}

/* The number, or the cross on a cell you have called blank. A span of its
   own, always present, so a cell holding nothing is exactly as big as one
   holding a number and filling the grid in cannot shift the page. */
#grid td .face {
  display: inline-block;
  min-width: 1ch;
  font-weight: bold;
  color: #222;
}

/* Filled: a pale blue wash. Pale enough to keep the number black and the
   lines around the cell visible, strong enough to read as a filled cell from
   across the grid. */
#grid td.filled {
  background-color: #c3daf2;
}

/* Called blank: a pale grey, and crossed off where there is no number to
   show. The cross is lighter still than the number it stands in for: it is a
   note to yourself, not something to read. */
#grid td.blank {
  background-color: #ececec;
}

#grid td.blank .face {
  color: #444;
}

#grid td .face.cross {
  color: #b4b4b4;
}

/* A number that has as many filled cells around it as it asks for fades into
   the background: it is finished with, and there is nothing left to read in
   it. Fading rather than colouring keeps it legible on all three cell
   grounds, where a green would have had to fight the blue.
   It counts what you have marked and nothing else — fill the wrong ones and
   it still fades, so it is a tally of your working rather than a verdict. */
#grid td.clue.met .face {
  color: #8b95a1;
  font-weight: normal;
}

/* A cell caught in something already impossible: the wash goes red, and so
   does the number. */
#grid td.wrong .face,
#grid td.clue.wrong .face {
  color: red;
  /* Weight as well as colour, so a number that had faded comes back when its
     cell turns out to be impossible. */
  font-weight: bold;
}

#grid td.filled.wrong {
  background-color: #f6cdc8;
}

#grid td.blank.wrong {
  background-color: #ecc6c2;
}

#grid td:hover {
  outline: 2px solid #111;
  outline-offset: -2px;
}

/* Solved: dimmed, and nothing left to click. */
#grid.solved td {
  opacity: 0.45;
  cursor: default;
}

#grid.solved td:hover {
  outline: none;
}

/* Region edges, and the outside of the grid. */
#grid td.edgeTop { border-top: 3px solid black; }
#grid td.edgeBottom { border-bottom: 3px solid black; }
#grid td.edgeLeft { border-left: 3px solid black; }
#grid td.edgeRight { border-right: 3px solid black; }


/* --- everything else --- */

/* Fixed width digits, so the seconds ticking over cannot shift the page. */
#timer {
  margin: 0.3em 0 0.6em;
  font-variant-numeric: tabular-nums;
}

/* Clearing the grid belongs with the grid, not up with the puzzle controls. */
#clearRow {
  margin: 0.5em 0 0;
}

/* Holds its height with nothing to say, so finishing does not shove the page
   around. */
#message {
  color: green;
  font-weight: bold;
  min-height: 1.5em;
  margin: 0.4em 0 0;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  color: gray;
}

/* Today's puzzle is shown by its button greying out, not by the browser's
   focus highlight, so drop the ring for mouse clicks. */
button:focus:not(:focus-visible) {
  outline: none;
}