/* What kind of thing a card is (2026-10-08): printable, worksheet maker, classroom tool, quiz or app.
   js/purple-kinds.js marks the cards and the panels that hold them as the page is read, from each
   card's address; everything here hangs off the classes it adds (kd-*), so a page without the script
   looks as it did. Blake chose every value in the mockup's tweaker (live/kind-options.html).

   - One colour a kind, used everywhere that kind appears (the --k-* variables).
   - Each panel's heading carries the kind's picture in a circle of its colour. The picture moves once,
     as the panel first comes into view, and never again.
   - Each card: a hairline edge in a faint tint of its kind, a very pale cream behind its picture, and
     the kind's picture in its lower right corner while the pointer is on it (nothing on a touch screen).
   - The "every ... here is free" bar on the two listings takes its page's kind (pale), centred, no tick.
   - The words in the left column's lists are plum; the picked one is violet. */
:root { --k-printable: #634bf5; --k-maker: #ff7800; --k-tool: #2563eb; --k-quiz: #2fa776; --k-app: #f0c330; }
/* .kd-k: the same colours and pictures on something that is neither (the suggest page's choices) */
.kd-card, .kd-panel, .kd-k { position: relative; --c: var(--k-printable); --on: #fff; --soft: color-mix(in srgb, var(--c) 14%, #fff); --ink: color-mix(in srgb, var(--c) 62%, #1b1038); }
.kd-maker { --c: var(--k-maker); } .kd-tool { --c: var(--k-tool); } .kd-quiz { --c: var(--k-quiz); }
.kd-app { --c: var(--k-app); --on: #8a5a12; }   /* gold, with a warm brown picture on it */

/* ---- the small pictures (drawn 24 wide, in lines). Each moves once while .kd-play is on, then rests as drawn ---- */
.kd-i { width: 22px; height: 22px; flex: none; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.kd-printable .kd-i, .kd-maker .kd-i { stroke-width: 1.75; }
.kd-i .fl { fill: var(--ibg, #fff); }            /* a part that hides what slides behind it */
.kd-i .so { fill: currentColor; stroke: none; }
.kd-i * { transform-box: fill-box; transform-origin: center; }
/* a printer: the page feeds out */
.kd-play .kd-i-print .pg { animation: kdFeed 1.6s cubic-bezier(.3,.7,.3,1) both; }
@keyframes kdFeed { 0%, 12% { transform: translateY(-7px); } 30%, 45% { transform: translateY(-4px); } 70% { transform: translateY(1px); } 100% { transform: none; } }
.kd-play .kd-i-print .bd { animation: kdShake 1.6s ease both; }
@keyframes kdShake { 12%, 36% { transform: translateY(.6px); } 24%, 48% { transform: translateY(-.6px); } 60%, 100% { transform: none; } }
/* sliders: the knobs slide and settle */
.kd-play .kd-i-make .k1 { animation: kdK1 1.6s ease both; } .kd-play .kd-i-make .k2 { animation: kdK2 1.6s ease both; } .kd-play .kd-i-make .k3 { animation: kdK3 1.6s ease both; }
@keyframes kdK1 { 25% { transform: translateX(7px); } 60% { transform: translateX(-2px); } 100% { transform: none; } }
@keyframes kdK2 { 30% { transform: translateX(-8px); } 65% { transform: translateX(3px); } 100% { transform: none; } }
@keyframes kdK3 { 35% { transform: translateX(8px); } 75% { transform: translateX(-1px); } 100% { transform: none; } }
/* a pointer drags a block */
.kd-play .kd-i-tool .cur { animation: kdCur 1.6s ease both; } .kd-play .kd-i-tool .blk { animation: kdBlk 1.6s ease both; }
@keyframes kdCur { 0% { transform: translate(7px, 7px); opacity: 0; } 25% { transform: none; opacity: 1; } 35% { transform: scale(.82); } 60% { transform: translate(-4px, -3px) scale(.82); } 85% { transform: translate(-4px, -3px); } 100% { transform: none; } }
@keyframes kdBlk { 0%, 35% { transform: none; } 60%, 85% { transform: translate(-4px, -3px); } 100% { transform: none; } }
/* a question that turns into a tick, then back */
.kd-i.kd-i-quiz .ck { opacity: 0; stroke-dasharray: 15; }
.kd-play .kd-i-quiz .qm { animation: kdQm 1.8s ease both; } .kd-play .kd-i-quiz .ck { animation: kdCk 1.8s ease both; }
@keyframes kdQm { 10% { transform: rotate(-14deg); } 22% { transform: rotate(12deg); } 34% { transform: none; opacity: 1; } 42%, 82% { opacity: 0; } 100% { opacity: 1; } }
@keyframes kdCk { 0%, 40% { opacity: 0; stroke-dashoffset: 15; } 44% { opacity: 1; stroke-dashoffset: 15; } 64%, 80% { opacity: 1; stroke-dashoffset: 0; } 96%, 100% { opacity: 0; stroke-dashoffset: 0; } }
/* an arrow drops into a tablet */
.kd-play .kd-i-app .ar { animation: kdDrop 1.3s ease both; }
@keyframes kdDrop { 0% { transform: translateY(-4px); opacity: 0; } 35% { transform: translateY(1px); opacity: 1; } 50% { transform: translateY(-1.5px); } 70%, 100% { transform: none; } }

/* ---- a panel's heading: the picture in a circle of the kind's colour (it replaces the small dot) ---- */
.kd-hic { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--c); color: var(--on); --ibg: var(--c); vertical-align: middle; position: relative; overflow: hidden; }
.kd-panel > .sec > .dot { display: none; }
.kd-panel > .pl-head.kd-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kd-play > * > .kd-hic { animation: kdPop .5s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes kdPop { from { transform: scale(0); } }
/* the apps' gold circle shines once its picture has settled: a band of light crossing it */
.kd-app.kd-play > * > .kd-hic::after { content: ''; position: absolute; inset: -30% -60%; background: linear-gradient(115deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 62%); transform: translateX(-100%); animation: kdShine .75s 1.1s ease-in-out both; pointer-events: none; }
@keyframes kdShine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---- a card ---- */
/* a hairline edge in a faint tint of the kind, drawn over the whole card so it is complete on every card */
.kd-card::after { content: ''; position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--c) 16%, #fff); border-radius: inherit; pointer-events: none; z-index: 6; }
/* the same very pale cream behind every kind's picture, with no line of its own round it */
.kd-card > :first-child:not(.kd-add) { background: #fefdfa !important; box-shadow: none !important; }
/* a maker's picture is drawn on a pale page shape (part of the picture file): a touch brighter turns that shape
   white, and "multiply" lets the cream show through it; with the shape gone the picture can be larger */
.kd-maker .thumb > .icon { background: transparent !important; box-shadow: none !important; }
.kd-maker > :first-child:not(.kd-add) img { filter: brightness(1.04); mix-blend-mode: multiply; }
a.pc.kd-maker .thumb > .icon img { transform: scale(1.18); }
a.sc.kd-maker > .pic img { transform: scale(1.22); }
/* the kind's picture in the lower right corner, no circle: hidden until the pointer is on the card, then it moves */
.kd-cor { display: block; position: absolute; right: 13px; bottom: 12px; z-index: 4; color: var(--c); --ibg: var(--pv-cream, #f8f2e9); pointer-events: none; opacity: 0; transform: translateY(5px); transition: opacity .15s ease, transform .2s cubic-bezier(.2,1.5,.4,1); }
.kd-cor .kd-i { width: 24px; height: 24px; }
a.sc .kd-cor { right: 11px; bottom: 9px; } a.sc .kd-cor .kd-i { width: 18px; height: 18px; }
a.kd-card:hover .kd-cor, a.kd-card:focus-visible .kd-cor { opacity: 1; transform: none; }
@media (hover: none) { .kd-cor { display: none; } }

/* ---- the "every ... here is free" bar on the two listings: its page's kind (pale), centred, no tick ---- */
.kd-on .pl-free { justify-content: center; }
.kd-on .pl-free > i { display: none !important; }
.kd-panel .pl-free { background: var(--soft); color: var(--ink); }

/* ---- the left column's lists: plum words, the picked one violet (the grades were all violet) ---- */
.kd-on .opts .opt { color: var(--pv-plum, #341e60) !important; }
.kd-on .opts .opt.on { color: var(--pv-violet, #634bf5) !important; }

@media (prefers-reduced-motion: reduce) { .kd-play, .kd-play * { animation: none !important; } .kd-cor { transition: none; } }