/* Inkgrid (domain Inkgrid, refonte/DEV-rf-mini-d.md): the home cards, the grid and its clues, the picture found.
   Prefixed classes, colours from the tokens of neurostim.css only. */
.ig-day { font-size: var(--ns-size-lg); font-weight: 400; }
.ig-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--ns-space-4); margin: 0 0 var(--ns-space-5); }
.ig-card { display: flex; flex-direction: column; gap: var(--ns-space-2); }
.ig-card h3 { margin: 0; }
.ig-card p, .ig-card form { margin: 0; }
.ig-time { font-size: var(--ns-size-2xl); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ns-text-strong); }
.ig-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 0 var(--ns-space-5); }
.ig-rules { margin-top: var(--ns-space-6); }
.ig-clock { margin: 0 0 var(--ns-space-3); text-align: center; font-size: var(--ns-size-xl); font-weight: 700; font-variant-numeric: tabular-nums; }

/* The grid: one box per cell, the clues above and on the left; at least the touch target on a touch screen, the grid
   scrolls sideways in its frame when it is wider than the page. */
.ig-scroll { overflow-x: auto; margin: 0 auto var(--ns-space-4); max-width: 100%; width: max-content; }
.ig-grid { --ig-cell: 2rem; border-collapse: collapse; user-select: none; -webkit-user-select: none; }
.ig-grid.ig-n5 { --ig-cell: 3.25rem; }
.ig-grid.ig-n15 { --ig-cell: 1.75rem; }
@media (pointer: coarse) { .ig-grid, .ig-grid.ig-n15 { --ig-cell: var(--ns-target); } }
.ig-grid th { padding: 0 var(--ns-space-1); font-size: var(--ns-size-sm); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ns-text-strong); }
.ig-col { vertical-align: bottom; text-align: center; padding-bottom: var(--ns-space-1); }
.ig-col span { display: block; line-height: 1.25; }
.ig-row { text-align: right; white-space: nowrap; }
.ig-row span + span { margin-left: 0.4em; }
.ig-grid .ig-done { color: var(--ns-muted); font-weight: 400; }
.ig-cell { width: var(--ig-cell); height: var(--ig-cell); padding: 0; border: 1px solid var(--ns-border-strong); background: var(--ns-page); }
.ig-grid tr > .ig-cell:nth-child(5n + 1) { border-right: 2px solid var(--ns-ink); }
.ig-grid tbody tr:nth-child(5n) .ig-cell { border-bottom: 2px solid var(--ns-ink); }
.ig-grid tbody tr:first-child .ig-cell { border-top: 2px solid var(--ns-ink); }
.ig-grid tr > .ig-cell:nth-child(2) { border-left: 2px solid var(--ns-ink); }
.ig-cell input { display: block; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.ig-cell input:checked { background: var(--ns-ink); }
.ig-cell input:focus-visible { outline: 3px solid var(--ns-focus); outline-offset: -3px; }
.ig-cell.ig-x input:not(:checked) { background: linear-gradient(45deg, transparent 46%, var(--ns-muted) 46%, var(--ns-muted) 54%, transparent 54%), linear-gradient(-45deg, transparent 46%, var(--ns-muted) 46%, var(--ns-muted) 54%, transparent 54%); }
.ig-js .ig-cell { touch-action: none; }
.ig-actions { display: flex; flex-wrap: wrap; gap: var(--ns-space-3); justify-content: center; }
.ig-form .ig-on { color: var(--ns-on-accent); background: var(--ns-accent-dark); border-color: var(--ns-accent-dark); }

/* The picture found, on the result page. */
.ig-picture { display: grid; grid-template-columns: repeat(var(--ig-size), 1fr); width: min(100%, 12rem); aspect-ratio: 1; margin: var(--ns-space-3) 0; border: 2px solid var(--ns-ink); }
.ig-picture span { background: var(--ns-page); }
.ig-picture .ig-on { background: var(--ns-ink); }