/* The crossword's own table, under table.css's bar and panel: the clues
   down the left, Across then Down, the grid in the centre on paper, the clue
   being solved over it; the gear's flyout opens from the right
   (panel.css). On a phone the grid comes first, the clue being solved over
   it, and the lists under it. */

:root {
  --paper: #f4f1e8; --paper-ink: #1b1b1b; --paper-rule: #6d6a60; --block: #10151a;
  --cell: 40px;
  /* The highlights: the word you are in, and the square (Settings). */
  --word: #f7e3a3; --here: #f2c14e;
}
body[data-word="sky"] { --word: #cfe3ff; }
body[data-word="mint"] { --word: #c9f0dc; }
body[data-word="rose"] { --word: #ffd3df; }
body[data-here="gold"] { --here: #f2c14e; }
body[data-here="sky"] { --here: #8fbfff; }
body[data-here="mint"] { --here: #7fd6aa; }
body[data-here="rose"] { --here: #ff9db8; }
.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.word-gold { background: #f7e3a3; } .swatch.word-sky { background: #cfe3ff; } .swatch.word-mint { background: #c9f0dc; } .swatch.word-rose { background: #ffd3df; }
.swatch.here-gold { background: #f2c14e; } .swatch.here-sky { background: #8fbfff; } .swatch.here-mint { background: #7fd6aa; } .swatch.here-rose { background: #ff9db8; }

/* The crossword's own glyphs, from its own Assets/: set here, not through
   --ico, which would be resolved against web/css/table.css. */
.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-timer { -webkit-mask-image: url(../Assets/Icons/btn-timer.svg); mask-image: url(../Assets/Icons/btn-timer.svg); }
.ico-grid { -webkit-mask-image: url(../Assets/Icons/btn-grid.svg); mask-image: url(../Assets/Icons/btn-grid.svg); }

/* --- The page: clues | grid --------------------------------------------- */

.xw {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: 16px;
  padding: 12px 14px 16px; align-items: start;
}

/* The clues: one column, Across then Down, scrolling on their own beside
   the grid. */
.clues {
  position: sticky; top: calc(var(--bar-height, 53px) + 8px);
  max-height: calc(100vh - var(--bar-height, 53px) - 96px); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px 4px 10px 0; border-radius: 10px; background: rgb(0 0 0 / .18);
}
.clue-list h2 {
  position: sticky; top: 0; z-index: 1; margin: 0; padding: 8px 12px 6px; font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); background: #143a28;
}
.clue-list ol { list-style: none; margin: 0 0 6px; padding: 0; }
.clue-list li {
  display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: 0 4px; padding: 5px 10px 5px 8px; margin: 1px 4px;
  border-radius: 6px; border-left: 3px solid transparent; cursor: pointer; line-height: 1.35; font-size: 14px;
}
.clue-list li:hover { background: rgb(255 255 255 / .07); }
.clue-list li .n { font-weight: 700; text-align: right; padding-right: 4px; font-variant-numeric: tabular-nums; }
.clue-list li .len { color: var(--ink-soft); white-space: nowrap; }
.clue-list li.current { background: var(--word); color: var(--paper-ink); }
.clue-list li.current .len { color: #4b4b44; }
.clue-list li.crossing { border-left-color: var(--word); background: rgb(255 255 255 / .05); }
/* A clue whose squares are all filled. */
.clue-list li.done:not(.current) { color: var(--ink-soft); }
.clue-list li.done:not(.current) .text { text-decoration: line-through; text-decoration-color: rgb(255 255 255 / .35); }

/* --- The board: the clue being solved, then the grid --------------------- */

.board { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.current {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px;
  width: min(100%, calc(var(--cols, 13) * var(--cell) + 4px)); padding: 6px 8px; border-radius: 10px; background: rgb(0 0 0 / .28);
}
.current p { margin: 0; min-height: 2.7em; display: flex; align-items: center; font-size: 15px; line-height: 1.35; }
.current p b { margin-right: 8px; color: var(--accent); white-space: nowrap; }
.current .step { padding: 6px 10px; font-size: 12px; }

.grid-wrap { position: relative; }
.grid {
  display: grid; grid-template-columns: repeat(var(--cols, 13), var(--cell)); grid-auto-rows: var(--cell);
  gap: 1px; padding: 1px; background: var(--paper-rule); border: 2px solid var(--block); border-radius: 3px;
  box-shadow: 0 8px 22px rgb(0 0 0 / .35); user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.cell { position: relative; background: var(--paper); color: var(--paper-ink); cursor: pointer; }
.cell.block { background: var(--block); cursor: default; }
.cell .num { position: absolute; top: 1px; left: 2px; font-size: max(9px, calc(var(--cell) * .27)); line-height: 1; font-weight: 600; color: #3b3a35; pointer-events: none; }
.cell .letter {
  position: absolute; inset: 0; display: grid; place-items: center; padding-top: calc(var(--cell) * .12);
  font: 600 calc(var(--cell) * .58) / 1 system-ui, "Segoe UI", sans-serif; text-transform: uppercase; pointer-events: none;
}
.cell.in-word { background: var(--word); }
.cell.here { background: var(--here); }
.grid.focused .cell.here { box-shadow: inset 0 0 0 2px rgb(0 0 0 / .55); }
/* A letter a check found wrong: red, struck through, until it is changed. */
.cell.wrong .letter { color: #c0262d; }
.cell.wrong::after { content: ""; position: absolute; left: 12%; right: 12%; top: 50%; border-top: 2px solid #c0262d; transform: rotate(-35deg); pointer-events: none; }
/* A letter revealed: the answer, marked with a corner. */
.cell.revealed::before { content: ""; position: absolute; right: 0; top: 0; border: calc(var(--cell) * .16) solid transparent; border-top-color: #c0262d; border-right-color: #c0262d; pointer-events: none; }
.cell.revealed .letter { color: #3a5bd0; }
.grid.watching .cell { cursor: default; }
.grid.solved { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Where typing goes: over the square you are in, unseen. */
.typing {
  position: absolute; width: var(--cell); height: var(--cell); padding: 0; margin: 0; border: 0;
  opacity: 0; background: transparent; color: transparent; caret-color: transparent; font-size: 16px; /* 16px: no zoom on a phone */
  pointer-events: none;
}

.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 grid first, the lists under it ------------------------- */

@media (max-width: 760px) {
  .xw { grid-template-columns: minmax(0, 1fr); padding: 8px 8px 16px; gap: 10px; }
  .board { order: 1; }
  .clues { order: 2; position: static; max-height: none; overflow: visible; }
  .current { position: sticky; top: calc(var(--bar-height, 53px) + 4px); z-index: 5; background: #0f3323; box-shadow: 0 4px 12px rgb(0 0 0 / .35); }
  .current p { font-size: 14px; }
}