/* The sudoku's own table, under table.css's bar and panel: the grid in the
   centre on paper, thick lines round each box, the digits under it; the
   gear's flyout opens from the right (panel.css). The givens are ink, the
   solver's digits blue, a clash red; the square you are in is lit, and its
   row, column and box and every square with its digit more faintly. */

:root {
  --paper: #f4f1e8; --paper-ink: #1b1b1b; --paper-rule: #b8b3a5; --box-rule: #10151a;
  --mine: #2f55c4; --clash: #c0262d;
  --cell: 52px;
  --here: #f2c14e; --near: #f3e9c8; --same: #f7d98a;
}
body[data-here="sky"] { --here: #8fbfff; --near: #e3edfb; --same: #bcd6ff; }
body[data-here="mint"] { --here: #7fd6aa; --near: #e1f4ea; --same: #b5e8cd; }
body[data-here="rose"] { --here: #ff9db8; --near: #fbe5eb; --same: #ffc6d5; }
.swatch { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; border: 1px solid rgb(0 0 0 / .4); }
.swatch.here-gold { background: #f2c14e; } .swatch.here-sky { background: #8fbfff; } .swatch.here-mint { background: #7fd6aa; } .swatch.here-rose { background: #ff9db8; }

/* The puzzles' own glyphs, from their own Assets/ (as css/crossword.css sets them). */
.ico-begin { -webkit-mask-image: url(../Assets/Icons/btn-begin.svg); mask-image: url(../Assets/Icons/btn-begin.svg); }
.ico-check { -webkit-mask-image: url(../Assets/Icons/btn-check.svg); mask-image: url(../Assets/Icons/btn-check.svg); }
.ico-reveal { -webkit-mask-image: url(../Assets/Icons/btn-reveal.svg); mask-image: url(../Assets/Icons/btn-reveal.svg); }
.ico-clear { -webkit-mask-image: url(../Assets/Icons/btn-clear.svg); mask-image: url(../Assets/Icons/btn-clear.svg); }
.ico-notes { -webkit-mask-image: url(../Assets/Icons/btn-grid.svg); mask-image: url(../Assets/Icons/btn-grid.svg); }
#notes-mode[aria-pressed="true"] { background: rgb(255 215 0 / .19); border-color: gold; }

.sd { flex: 1; min-height: 0; display: flex; justify-content: center; padding: 12px 14px 16px; }
.board { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }

/* The grid: nine boxes, each a 3 by 3 of squares; thin lines between the
   squares, thick between the boxes. */
.grid {
  display: grid; grid-template-columns: repeat(9, var(--cell)); grid-auto-rows: var(--cell);
  background: var(--paper-rule); gap: 1px; padding: 2px; border-radius: 4px;
  border: 2px solid var(--box-rule); box-shadow: 0 8px 22px rgb(0 0 0 / .35);
  user-select: none; -webkit-user-select: none; touch-action: manipulation; outline: none;
}
.cell { position: relative; background: var(--paper); color: var(--paper-ink); cursor: pointer; }
.cell.col-3, .cell.col-6 { margin-left: 2px; }
.cell.row-3, .cell.row-6 { margin-top: 2px; }
.cell .digit {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 500 calc(var(--cell) * .6) / 1 system-ui, "Segoe UI", sans-serif; pointer-events: none;
}
.cell.given .digit { font-weight: 700; color: var(--paper-ink); }
.cell.mine .digit { color: var(--mine); }
.cell.near { background: var(--near); }
.cell.same { background: var(--same); }
.cell.here { background: var(--here); }
.grid.focused .cell.here { box-shadow: inset 0 0 0 2px rgb(0 0 0 / .55); }
/* Two of a digit in a row, column or box: both red. */
.cell.clash .digit { color: var(--clash); }
.cell.clash::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 2px solid rgb(192 38 45 / .5); pointer-events: none; }
/* A digit a check found wrong: struck through, until it is changed. */
.cell.wrong .digit { color: var(--clash); }
.cell.wrong::after { content: ""; position: absolute; left: 14%; right: 14%; top: 50%; border-top: 2px solid var(--clash); transform: rotate(-35deg); pointer-events: none; }
/* A digit revealed: the answer, marked with a corner. */
.cell.revealed .digit { color: #3a5bd0; }
.cell.revealed .corner { position: absolute; right: 0; top: 0; border: calc(var(--cell) * .14) solid transparent; border-top-color: var(--clash); border-right-color: var(--clash); pointer-events: none; }
/* Notes: the digits a square might hold, small, each in its own place. */
.cell .notes { position: absolute; inset: 2px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); pointer-events: none; }
.cell .notes span { display: grid; place-items: center; font: 500 calc(var(--cell) * .22) / 1 system-ui, sans-serif; color: #5d5a52; }
.cell .notes span.lit { color: var(--paper-ink); font-weight: 700; }
.grid.watching .cell { cursor: default; }
.grid.solved { outline: 3px solid var(--accent); outline-offset: 3px; }

/* The digits under the grid, and how many of each are still to go in. */
.pad { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; width: calc(9 * var(--cell) + 18px); }
.pad button { position: relative; display: grid; place-items: center; padding: 0; height: calc(var(--cell) * .95); font-size: calc(var(--cell) * .42); font-weight: 600; }
.pad button .left { position: absolute; right: 4px; bottom: 2px; font-size: 10px; font-weight: 500; color: var(--ink-soft); }
.pad button.used-up { opacity: .45; }
.pad button[aria-pressed="true"] { background: rgb(255 215 0 / .19); border-color: gold; }
.pad .wide { font-size: 13px; }

.banner {
  padding: 8px 14px; border-radius: 10px; background: rgb(0 0 0 / .35); border: 1px solid var(--accent);
  color: var(--accent); font-weight: 600; text-align: center;
}
.banner[hidden] { display: none; }

/* --- The flyout's own tabs ----------------------------------------------- */

.solve-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.solve-row button { flex: 1 1 30%; justify-content: center; padding: 7px 8px; }
.panel .choice.swatches button { display: inline-flex; align-items: center; justify-content: center; }
.help-text { font-size: 14px; line-height: 1.5; }
.help-text h3 { color: var(--accent); }
.help-text kbd { display: inline-block; min-width: 1.6em; padding: 0 5px; border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 4px; background: var(--chrome-2); font: 12px/1.6 ui-monospace, Consolas, monospace; text-align: center; }
.help-text dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 10px; margin: 0 0 8px; }
.help-text dt { white-space: nowrap; }
.help-text dd { margin: 0; color: var(--ink); }

/* --- A phone: the pad in two rows ------------------------------------------ */

@media (max-width: 560px) {
  .sd { padding: 8px 6px 16px; }
  .pad { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}