/* Edgeloop (domain Edgeloop, refonte/DEV-rf-mini-d.md): the home cards, the board of points, sides and clues.
   Prefixed classes, colours from the tokens of neurostim.css only. */
.el-day { font-size: var(--ns-size-lg); font-weight: 400; }
.el-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--ns-space-4); margin: 0 0 var(--ns-space-5); }
.el-card { display: flex; flex-direction: column; gap: var(--ns-space-2); }
.el-card h3 { margin: 0; }
.el-card p, .el-card form { margin: 0; }
.el-time { font-size: var(--ns-size-2xl); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ns-text-strong); }
.el-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 0 var(--ns-space-5); }
.el-rules { margin-top: var(--ns-space-6); }
.el-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 board: tracks for the sides between the cells, a dot where they meet; a cell of the touch target on a touch
   screen, the board scrolling sideways in its frame when wider than the page. */
.el-scroll { overflow-x: auto; max-width: 100%; width: max-content; margin: 0 auto var(--ns-space-4); }
.el-board { --el-cell: 2.5rem; --el-line: 0.6rem; display: grid; grid-template-columns: repeat(var(--el-c), var(--el-line) var(--el-cell)) var(--el-line); grid-template-rows: repeat(var(--el-r), var(--el-line) var(--el-cell)) var(--el-line); user-select: none; -webkit-user-select: none; }
/* On a touch screen, the touch target per cell, but never wider than the frame of the page: the whole board stays in
   sight (a press anywhere in a cell takes its nearest side, so a cell of 30 px still gives sides easy to hit). */
@media (pointer: coarse) { .el-board { --el-cell: min(var(--ns-target), calc((100vw - 62px - (var(--el-c) + 1) * var(--el-line)) / var(--el-c))); } }
.el-small .el-board { --el-cell: 1.5rem; --el-line: 0.4rem; }
.el-dot { background: var(--ns-ink); border-radius: 50%; transform: scale(0.8); }
.el-board input { display: block; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 2px; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.el-board input:hover:not(:disabled) { background: var(--ns-accent-soft); }
.el-board input:checked { background: var(--ns-accent-dark); }
.el-board input:focus-visible { outline: 3px solid var(--ns-focus); outline-offset: 1px; }
.el-board input.el-x:not(:checked) { background: var(--ns-border); }
.el-board input:disabled { cursor: default; opacity: 1; }
.el-c { display: flex; align-items: center; justify-content: center; font-size: calc(var(--el-cell) * 0.55); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ns-text-strong); }
.el-c.el-done { color: var(--ns-muted); font-weight: 400; }
.el-c.el-over { color: var(--ns-error); }
.el-js .el-board { touch-action: none; }
.el-actions { display: flex; flex-wrap: wrap; gap: var(--ns-space-3); justify-content: center; }
.el-form .el-on { color: var(--ns-on-accent); background: var(--ns-accent-dark); border-color: var(--ns-accent-dark); }