/* Wirelink (domain Wirelink, refonte/briefs/jeux10/BRIEF-wirelink.md): the home cards, the example that plays alone,
   the board of tiles and the glow of the network linked to the source. Prefixed classes, colours from the tokens of
   neurostim.css only. */
.wl-day { font-size: var(--ns-size-lg); font-weight: 400; }
.wl-intro { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-4); }
.wl-intro .lead { flex: 1 1 16rem; margin: 0; }
.wl-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--ns-space-4); margin: 0 0 var(--ns-space-5); }
.wl-card { display: flex; flex-direction: column; gap: var(--ns-space-2); }
.wl-card h3 { margin: 0; }
.wl-card p, .wl-card form { margin: 0; }
.wl-time { font-size: var(--ns-size-2xl); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ns-text-strong, #2a2124); }
.wl-boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); gap: 0 var(--ns-space-5); }
.wl-rules { margin-top: var(--ns-space-6); }
.wl-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ns-space-2) var(--ns-space-5); margin: 0 0 var(--ns-space-2); font-size: var(--ns-size-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.wl-bar #wl-clock { font-size: var(--ns-size-xl); }
.wl-hint { margin: 0 0 var(--ns-space-3); text-align: center; color: var(--ns-muted, #5d6867); }
.wl:not(.wl-js) .wl-js-only { display: none; }

/* The board: a dark plate, one square per tile, the wires drawn from the centre; turned by --wl-r (quarter turns, the
   page's own count, so that a fourth turn goes on round). Never wider than the page: its gutters, its padding and its gaps counted (9 tiles of 34 px in 390 px). */
.wl-scroll { overflow-x: auto; max-width: 100%; width: max-content; margin: 0 auto var(--ns-space-4); }
.wl-board { --wl-cell: min(3.4rem, calc((100vw - 3.5rem - 10px - var(--wl-n) * 2px) / var(--wl-n))); display: grid; grid-template-columns: repeat(var(--wl-n), var(--wl-cell)); gap: 2px; padding: 4px; border-radius: var(--ns-radius, 10px); background: var(--ns-ink, #2a2124); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.wl-c { position: relative; width: var(--wl-cell); height: var(--wl-cell); border-radius: 4px; background: var(--ns-ink-2, #3b2c36); }
.wl-t { display: block; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 4px; background: transparent; cursor: pointer; touch-action: manipulation; color: inherit; }
.wl-t:hover { background: rgb(255 255 255 / 0.06); }
.wl-t:focus-visible { outline: 3px solid var(--ns-on-ink, #fff); outline-offset: -3px; }
.wl-s { display: block; width: 100%; height: 100%; overflow: visible; transform: rotate(calc(var(--wl-r, 0) * 90deg)); transition: transform 0.14s ease-out; }
.wl-w line { stroke: var(--ns-off, #8c9493); stroke-width: 15; }
.wl-l { fill: var(--ns-ink-2, #3b2c36); stroke: var(--ns-off, #8c9493); stroke-width: 7; }
.wl-k { fill: var(--ns-off, #8c9493); }
.wl-p { fill: var(--ns-accent, #ff3399); }
.wl-b { fill: var(--ns-on-accent, #fff); }
/* Lit: the wires in the accent with a glow, the lamps filled; a lit wire into the void in red. */
.wl-on .wl-w line, .wl-src .wl-w line { stroke: var(--ns-accent, #ff3399); }
.wl-on .wl-l { fill: var(--ns-accent-light, #ffe0ef); stroke: var(--ns-accent, #ff3399); }
.wl-on .wl-k { fill: var(--ns-accent, #ff3399); }
.wl-on .wl-s, .wl-src .wl-s { filter: drop-shadow(0 0 3px var(--ns-accent, #ff3399)); }
.wl-on { background: color-mix(in srgb, var(--ns-ink-2, #3b2c36) 82%, var(--ns-accent, #ff3399)); transition: background 0.2s; }
.wl-bad { box-shadow: inset 0 0 0 2px var(--ns-error-line, #ef9a9a); }
.wl-lock { box-shadow: inset 0 0 0 3px var(--ns-on-ink-muted, #d9cfd5); }
.wl-lock::after { content: ""; position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--ns-on-ink-muted, #d9cfd5); pointer-events: none; }
.wl-no { animation: wl-no 0.25s; }
@keyframes wl-no { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.wl-done { animation: wl-win 0.9s ease-out; }
.wl-done .wl-c { background: color-mix(in srgb, var(--ns-ink-2, #3b2c36) 60%, var(--ns-accent, #ff3399)); }
@keyframes wl-win { 0% { box-shadow: 0 0 0 0 var(--ns-accent, #ff3399); } 40% { box-shadow: 0 0 0 8px var(--ns-accent-light, #ffe0ef); } 100% { box-shadow: 0 0 0 0 transparent; } }
/* Without the script: the list of turns under each tile, the drawing turned by the choice. */
.wl-sel { width: 100%; font-size: var(--ns-size-xs); }
.wl-js .wl-sel { display: none; }
.wl:not(.wl-js) .wl-form .wl-c { height: auto; }
.wl:not(.wl-js) .wl-form .wl-board { --wl-cell: 4rem; }
.wl-c:has(option[value="1"]:checked) { --wl-r: 1; }
.wl-c:has(option[value="2"]:checked) { --wl-r: 2; }
.wl-c:has(option[value="3"]:checked) { --wl-r: 3; }
.wl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-3); justify-content: center; }

/* The example of the home page: a 3 × 3 network turning into place from the source, each tile lit as it joins. */
.wl-demo { --wl-cell: 2.6rem; display: grid; grid-template-columns: repeat(3, var(--wl-cell)); gap: 2px; padding: 4px; border-radius: var(--ns-radius, 10px); background: var(--ns-ink, #2a2124); flex: none; }
.wl-demo .wl-s { animation: wl-turn 7s calc(var(--d) * 0.45s) infinite both; }
.wl-demo .wl-w line, .wl-demo .wl-k, .wl-demo .wl-l { animation: wl-glow 7s calc(var(--d) * 0.45s) infinite both; }
@keyframes wl-turn { 0%, 6% { transform: rotate(calc(var(--k) * -90deg)); } 12%, 88% { transform: rotate(0); } 96%, 100% { transform: rotate(calc(var(--k) * -90deg)); } }
@keyframes wl-glow { 0%, 10% { stroke: var(--ns-off, #8c9493); fill: var(--ns-off, #8c9493); } 13%, 86% { stroke: var(--ns-accent, #ff3399); fill: var(--ns-accent, #ff3399); } 92%, 100% { stroke: var(--ns-off, #8c9493); fill: var(--ns-off, #8c9493); } }
@media (prefers-reduced-motion: reduce) {
    .wl-demo .wl-s, .wl-demo .wl-w line, .wl-demo .wl-k, .wl-demo .wl-l { animation: none; }
    .wl-demo .wl-w line { stroke: var(--ns-accent, #ff3399); }
    .wl-s { transition: none; }
}

/* The result: the network beside the time, the curve under them. */
.wl-result-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-4); }
.wl-small .wl-board { --wl-cell: min(2.6rem, calc((100vw - 7rem - 10px - var(--wl-n) * 2px) / var(--wl-n))); }
.wl-result-top .wl-scroll { margin: 0; }
.wl-result-top > div:last-child { flex: 1 1 6rem; min-width: 0; }
.wl-result-top p { margin: 0 0 var(--ns-space-2); }