/* Grid puzzle tool base (same look as the other grid pages). The board is paper: fixed colors in both themes. */
.gp { --gp-ink: #111; --gp-paper: #fff; --gp-line: #9a9a9a; --gp-thin: #cfcfcf; --gp-sel: #6d4aff; }
.gp-bar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin-bottom: 14px; }
.gp-bar .field { flex: 0 0 auto; }
.gp-bar select { width: auto; min-height: 40px; padding: 6px 34px 6px 12px; }
.gp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 4px; margin: 0 -4px; }
.gp-board { position: relative; margin: 0 auto; background: var(--gp-paper); color: var(--gp-ink); user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.gp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gp-more { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.gp-note { font-size: 14px; color: var(--muted); margin: 10px 0 0; }
.gp-io { margin-top: 12px; }
.gp-io textarea { font-family: var(--mono); font-size: 14px; }
.gp-side .btn { flex: 1 1 auto; }
/* Numberlink board */
.nl-grid { display: grid; grid-template-columns: repeat(var(--w), minmax(0, 1fr)); width: 100%; min-width: calc(var(--w) * 26px + 4px); max-width: calc(var(--w) * 52px); border: 2px solid var(--gp-ink); }
.nl-c { aspect-ratio: 1; border-right: 1px solid var(--gp-thin); border-bottom: 1px solid var(--gp-thin); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.nl-c.diff { background: #ffe08a; }
.nl-dot { width: 74%; height: 74%; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 600 calc(var(--cs, 30px) * .42) var(--mono); line-height: 1; position: relative; z-index: 3; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.nl-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.nl-pal .nl-chip { min-width: 40px; min-height: 40px; font-family: var(--mono); background: var(--c); color: var(--t); border-color: rgba(0,0,0,.2); padding: 4px 8px; }
.nl-pal .nl-chip[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--ink); border-color: var(--ink); }
.nl-pal .nl-chip.done { opacity: 1; text-decoration: line-through; text-decoration-thickness: 2px; box-shadow: inset 0 0 0 3px var(--canvas); }
.nl-pal .nl-erase { background: var(--canvas); color: var(--ink); }
.nl-run { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); margin-top: 12px; }

/* Color fix (chrome agent, 2 Oct 2026): black labels on mid-tone palette colors, where white text was below WCAG AA. */
.nl-dot[style*="background:#3cb44b"], .nl-dot[style*="background:#f032e6"], .nl-dot[style*="background:#469990"], .nl-dot[style*="background:#808000"], .nl-dot[style*="background:#2e8b57"], .nl-dot[style*="background:#d2691e"], .nl-dot[style*="background:#1e90ff"], .nl-dot[style*="background:#ff1493"] { color: #000 !important; }
.nl-chip[style*="--c:#3cb44b"], .nl-chip[style*="--c:#f032e6"], .nl-chip[style*="--c:#469990"], .nl-chip[style*="--c:#808000"], .nl-chip[style*="--c:#2e8b57"], .nl-chip[style*="--c:#d2691e"], .nl-chip[style*="--c:#1e90ff"], .nl-chip[style*="--c:#ff1493"] { --t: #000 !important; }