/* the board itself: cell/half/candidate rendering shared by the walkthrough
   and the wiki's worked-example figures. Loaded by both shells so a cell
   looks exactly the same in the solver trace and in a wiki mini-board;
   page-specific sheets only override dimensions. */
.board{display:grid;grid-template-columns:repeat(var(--n),var(--cell));gap:3px;width:max-content;margin:0 auto}
.cell{width:var(--cell);height:var(--cell);border:1px solid var(--line2);display:flex;flex-direction:column;background:var(--panel);position:relative;border-radius:0}
/* font-size/line-height pinned small so the anonymous strut of any wrapper
   inside a half can't outgrow the 7-8px marks and push them off-center */
.half{flex:1;display:flex;align-items:center;align-content:center;justify-content:center;gap:2px;flex-wrap:wrap;overflow:hidden;padding:2px 3px;font-size:8px;line-height:1}
.half-letter{border-bottom:1px dashed var(--line)}
.cand{font-size:8px;line-height:1;color:var(--muted);opacity:.85;display:none}
.cell.reveal .cand{display:inline}
body.expanded .cand{display:inline}
.cell:hover .cand,.cell:focus-within .cand{display:inline}
.cand.elim{text-decoration:line-through;color:var(--elim);opacity:1}
.half-pairs{flex-direction:row;align-content:center;gap:3px;padding:3px}
.pair{font-size:9px;line-height:1.05;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums;display:none}
.cell.reveal .pair,body.expanded .pair,.cell:hover .pair,.cell:focus-within .pair{display:inline-block}
.board.d1 .pair{font-size:8px}
.board.d2 .pair{font-size:7px}
.board.d1 .cand{font-size:7px}
.board.d2 .cand{font-size:6px}
.board.d1 .half,.board.d1 .half-pairs{gap:1px;padding:1px 2px}
.board.d2 .half,.board.d2 .half-pairs{gap:0 2px;padding:1px}
.board.d2 .half-pairs{align-content:flex-start}
.pair.blocked,.pair.elim{text-decoration:line-through;opacity:1}
.pair.blocked{color:var(--focus)}
.pair.elim{color:var(--elim)}
/* a pair blocked by an earlier step (not this step's action) is still shown
   struck — that is the state, the pair cannot live here — but dimmed, so red
   stays reserved for what the current step is doing */
.pair.gone{text-decoration:line-through;color:var(--muted);opacity:.55}
.val{font-size:17px;font-weight:700;color:var(--ink);line-height:1.1}
.cell.given{background:var(--soft)}
/* givens read slightly heavier than filled-in values; relative to --ink
   (not a literal hex) so this still reads correctly under dark mode */
.cell.given .val{color:color-mix(in srgb,var(--ink) 85%,black)}
.cell.placed{box-shadow:inset 0 0 0 2px var(--place);background:color-mix(in srgb,var(--place) 12%,transparent)}
.cell.role-focus,.cell.role-pivot,.cell.role-pincer,.cell.role-wing,.cell.role-fish,.cell.role-subset{box-shadow:inset 0 0 0 2px var(--accent)}
.cell.role-peer,.cell.role-link{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.cell.role-eliminate{background:color-mix(in srgb,var(--elim) 11%,transparent)}
.cell.has-blocks{background:color-mix(in srgb,var(--focus) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--focus) 55%,transparent)}