/* What a lesson's arrows show (call 28), shared by the app's pages (after style.css) and the front page's lesson
   (landing.html, showlesson.js): the tones' colours, each idea's medallion on its arrow, and the key under the
   words. The signs themselves are ideas.js. */
.tone-best { color: var(--arrow-best); }
.tone-played { color: var(--arrow-played); }
.tone-answer { color: var(--arrow-answer); }
.tone-mine { color: var(--arrow-mine); }
.tone-alt { color: var(--arrow-alt); }
.tone-warn { color: var(--arrow-warn); }
.tone-guard { color: var(--arrow-guard); }
/* An arrow's idea (Board.signSvg, call 28): a medallion in the arrow's tone with the idea's sign in white, lifted off
   the board like the arrow. A new one pops up once its arrow has grown, then makes its own little move once: the swords
   clash, the pin drops in, the shield glints, the fork wiggles, the crown and the bolt flash, the eye blinks, the
   padlock snaps shut, the cracked shield shakes, the promotion rises. How big that move is is the look's
   (--idea-motion: 1 for the lively looks, less for the calm ones). Nothing moves on a board that isn't lively. */
.arrows .idea-disc { fill: currentColor; stroke: rgba(255, 255, 255, 0.92); stroke-width: 0.024; }
.arrows .idea path { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.arrows .idea-in, .arrows .idea-move { transform-origin: 0 0; }
.arrows .idea.grow .idea-in { animation: idea-pop 460ms 330ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.arrows .idea.grow .idea-move { animation: 700ms 760ms ease-in-out both; }
.arrows .idea-attack.grow .idea-move { animation-name: idea-clash; }
.arrows .idea-pin.grow .idea-move { animation-name: idea-drop; animation-timing-function: cubic-bezier(0.3, 1.6, 0.5, 1); }
.arrows .idea-guard.grow .idea-move, .arrows .idea-block.grow .idea-move { animation-name: idea-glint; }
.arrows .idea-fork.grow .idea-move, .arrows .idea-skewer.grow .idea-move { animation-name: idea-wiggle; }
.arrows .idea-mate.grow .idea-move, .arrows .idea-check.grow .idea-move { animation-name: idea-flash; }
.arrows .idea-discovered.grow .idea-move { animation-name: idea-blink; }
.arrows .idea-trap.grow .idea-move { animation-name: idea-snap; }
.arrows .idea-remove.grow .idea-move { animation-name: idea-shake; }
.arrows .idea-promote.grow .idea-move { animation-name: idea-rise; }
@keyframes idea-pop { from { transform: scale(0) rotate(calc(-40deg * var(--idea-motion, 1))); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes idea-clash { 0%, 100% { transform: none; } 20% { transform: rotate(calc(-16deg * var(--idea-motion, 1))) scale(1.1); }
  45% { transform: rotate(calc(12deg * var(--idea-motion, 1))); } 70% { transform: rotate(calc(-6deg * var(--idea-motion, 1))); } }
@keyframes idea-drop { 0% { transform: translateY(calc(-0.14px * var(--idea-motion, 1))) scale(1.15); } 100% { transform: none; } }
@keyframes idea-glint { 0%, 100% { transform: none; filter: none; } 40% { transform: scale(calc(1 + 0.16 * var(--idea-motion, 1))); filter: brightness(1.5); } }
@keyframes idea-wiggle { 0%, 100% { transform: none; } 25% { transform: rotate(calc(-12deg * var(--idea-motion, 1))); }
  50% { transform: rotate(calc(10deg * var(--idea-motion, 1))); } 75% { transform: rotate(calc(-5deg * var(--idea-motion, 1))); } }
@keyframes idea-flash { 0%, 100% { transform: none; opacity: 1; } 30% { transform: scale(calc(1 + 0.22 * var(--idea-motion, 1))); opacity: 0.55; } 60% { opacity: 1; } }
@keyframes idea-blink { 0%, 100% { transform: none; } 35%, 45% { transform: scaleY(0.12); } }
@keyframes idea-snap { 0%, 100% { transform: none; } 30% { transform: translateY(calc(-0.05px * var(--idea-motion, 1))); } 55% { transform: translateY(calc(0.02px * var(--idea-motion, 1))) scale(1.08); } }
@keyframes idea-shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(calc(-0.03px * var(--idea-motion, 1))); } 40%, 80% { transform: translateX(calc(0.03px * var(--idea-motion, 1))); } }
@keyframes idea-rise { 0% { transform: translateY(calc(0.08px * var(--idea-motion, 1))); opacity: 0.3; } 100% { transform: none; opacity: 1; } }
/* the key under a lesson's words: each idea on the board, its sign and its name */
.idea-key { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; min-height: 0; }
.idea-key:empty { display: none; }
.idea-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 3px; border-radius: 999px; font-size: 0.8rem;
  font-weight: 600; background: color-mix(in srgb, currentColor 14%, transparent); border: 1px solid color-mix(in srgb, currentColor 40%, transparent); }
.idea-chip > span { color: var(--text); }  /* the tone is the sign's and the edge's: the name stays readable on any card */
.idea-chip svg { width: 18px; height: 18px; flex: none; }
.idea-chip circle { fill: currentColor; }
.idea-chip path { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }