/* ---------------------------------------------------------------- 👀 the learn steps (js/demos.js)
   One example fills the stage: the book's words on top (.dm-cap), the picture in the middle (.dm-main – a tap plays it
   again) and 🔁 · dots · ➜ below. The pictures come from models.js (css/models.css); here they get sizes that fit a
   1280×800 tablet and a 390×844 phone: SVG pictures fill a .dm-fit box and keep their shape, sums use --m-eq. */

.demo {
  --m-eq: min(6vmin, 46px);
  --m-col: min(8.4vmin, 64px);
  display: flex; flex-direction: column; gap: min(1.4vmin, 10px);
  min-height: 0; overflow: hidden; padding-bottom: 6px;
}

/* the book's words (or the four step banners) above the picture */
.dm-cap { flex: none; display: flex; align-items: center; justify-content: center; min-height: min(10vmin, 66px); padding: 2px 8px 0; }
.dm-say {
  max-width: 100%; padding: 2px 22px 5px; border-radius: 24px; text-align: center;
  font-size: min(4.6vmin, 32px); line-height: 1.55; color: var(--ink); background: #fff; box-shadow: var(--shadow);
}
.dm-chip {
  display: inline-block; margin-inline-start: .5em; padding: 0 .55em .08em; border-radius: .7em; white-space: nowrap;
  font-size: .92em; background: #dcfce7; color: #15803d;
}
.dm-chip.no { background: #ffe4e6; color: #be123c; }

/* the picture: a tap anywhere on it plays the example again (nothing inside reacts to taps) */
.dm-main { position: relative; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; cursor: pointer; }
.dm-main * { pointer-events: none !important; }
.dm-foot { flex: none; display: flex; align-items: center; justify-content: center; gap: 22px; }
.dm-foot .round-dots { margin-top: 0; }
.dm-again {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-size: 30px; background: #fff; box-shadow: var(--shadow); transition: transform .1s, opacity .3s;
}
.dm-again:active:not(:disabled) { transform: scale(.92); }
.dm-again:disabled { opacity: .3; filter: grayscale(1); }
.dm-wave { margin: auto; font-size: min(28vmin, 180px); line-height: 1; animation: wiggle 1.6s ease-in-out infinite; }

/* ---------------------------------------------------------------- the layout of one example */
.dm-col { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: min(1.8vmin, 14px); }
.dm-col > * { max-width: 100%; }
.dm-col > .dm-pv, .dm-col > .dm-cmp, .dm-col > .dm-pmat, .dm-col > .dm-ml { flex: 1 1 0; min-height: 0; }
/* an SVG picture that takes the free room and keeps its shape */
.dm-fit { position: relative; flex: 1 1 0; align-self: stretch; width: 100%; min-width: 0; min-height: 48px; }
.dm-fit.dm-big { flex-grow: 1.7; }
.dm-fit.dm-nlfit { min-height: 70px; }
.demo .dm-fit > svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; }
.demo .dm-fit > .m-frames { position: absolute; inset: 0; flex-wrap: nowrap; }
.demo .dm-fit > .m-frames > svg { width: auto; height: 100%; max-width: 48%; max-height: 100%; }
.demo .dm-nl { overflow: visible; }
.demo .m-vert { pointer-events: none; }

/* sums and words */
.demo .m-eq.dm-xl { --m-eq: min(8.4vmin, 62px); }
.demo .m-eq.dm-sm { --m-eq: min(4.6vmin, 34px); }
.dm-text { font-size: min(4.2vmin, 30px); line-height: 1.5; color: var(--ink); text-align: center; }
.dm-text.dm-small { font-size: min(3.4vmin, 23px); color: var(--ink2); }
.dm-num {
  padding: 0 28px; border-radius: 28px; font-size: min(12vmin, 92px); line-height: 1.2; font-weight: 700;
  color: var(--purple); background: #fff; box-shadow: var(--shadow);
}
.dm-num.dm-mid { padding: 0 20px; border-radius: 22px; font-size: min(8vmin, 60px); }
.dm-digits { display: flex; direction: ltr; }
.dm-digits .dm-glow { color: var(--pink); }
.dm-badge { font-size: min(6vmin, 44px); line-height: 1.2; font-weight: 700; color: var(--ink); }
.dm-arrow { font-size: min(6vmin, 44px); line-height: 1; color: var(--pink); }
.dm-tick { font-size: min(7vmin, 52px); line-height: 1; }
.dm-line { display: flex; align-items: center; justify-content: center; gap: min(2.4vmin, 18px); max-width: 100%; }
.dm-two { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px min(5vw, 48px); max-width: 100%; }

/* ---------------------------------------------------------------- effects */
.demo .dm-off { opacity: 0 !important; }
.dm-ghost {
  position: fixed; z-index: 60; margin: 0; padding: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center; white-space: nowrap; line-height: 1; transform-origin: 50% 50%;
}
.demo .dm-glow { border-radius: 14px; animation: dmGlow 1.1s ease-in-out infinite !important; }
.demo svg.dm-glow { animation: none !important; filter: drop-shadow(0 0 4px #facc15) drop-shadow(0 0 2px #f59e0b); }
.demo svg .dm-glow { animation: dmBlink 1s ease-in-out infinite !important; }
.demo svg .dm-glow :is(rect, polygon, circle), .demo svg :is(rect, circle).dm-glow { stroke: #f59e0b; stroke-width: 3px; }
.demo .dm-ring { outline: .09em dashed var(--pink); outline-offset: .14em; border-radius: 40%; }
.dm-lasso { position: absolute; z-index: 3; pointer-events: none; border: 4px dashed var(--pink); border-radius: 16px; background: rgba(255, 111, 174, .08); }
/* things that go away (a story) stay faint – emoji get a ✗ like the book's drawing */
.demo .dm-leave { transform: translateY(-8px) scale(.86); transition: opacity .5s, transform .5s, filter .5s; }
.demo .story-card.dm-leave { opacity: .35; filter: grayscale(1); }
.demo .m-it .m-e { transition: opacity .5s, filter .5s; }
.demo .m-it.dm-leave .m-e { opacity: .3; filter: grayscale(1); }
.demo .m-it.dm-leave::after { content: '✗'; position: absolute; inset: 0; display: grid; place-items: center; font-size: .8em; font-weight: 700; color: #16a34a; }
@keyframes dmGlow {
  0%, 100% { box-shadow: 0 0 0 3px #fde047, 0 0 12px 2px rgba(250, 204, 21, .5); }
  50% { box-shadow: 0 0 0 6px #fde047, 0 0 24px 8px rgba(250, 204, 21, .7); }
}
@keyframes dmBlink { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ---------------------------------------------------------------- the four steps of a problem (in the caption bar) */
.dm-steps { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; }
.dm-step {
  --sc: var(--purple);
  display: inline-flex; align-items: center; gap: 6px; padding: 1px 14px 4px; border-radius: 18px;
  font-size: min(3.5vmin, 24px); line-height: 1.5; color: var(--ink2); background: rgba(255, 255, 255, .55); opacity: .6;
  transition: transform .3s, opacity .3s, background .3s, color .3s;
}
.dm-step .dm-si { font-size: 1.05em; }
.dm-step.done { opacity: .95; color: var(--ink); background: #fff; }
.dm-step.on { opacity: 1; color: #fff; background: var(--sc); transform: scale(1.08); box-shadow: var(--shadow); }
.dm-s0 { --sc: #3b82f6; }
.dm-s1 { --sc: #eab308; }
.dm-s2 { --sc: #a855f7; }
.dm-s3 { --sc: #22c55e; }

/* ---------------------------------------------------------------- connecting cubes (cubes) */
.dm-train { --cu: min(5.6vmin, 44px, calc(84vw / (var(--n, 10) + 2))); display: flex; align-items: flex-end; justify-content: center; padding-top: calc(var(--cu) * .3); }
.dm-car { display: flex; }
.dm-car.dm-apart { margin-inline-start: calc(var(--cu) * 1.6); }
.dm-cube {
  position: relative; width: var(--cu); height: var(--cu); margin: 0 1px; border-radius: 18%; background: var(--cc);
  box-shadow: inset 0 calc(var(--cu) * -.12) 0 rgba(0, 0, 0, .2), inset 0 calc(var(--cu) * .09) 0 rgba(255, 255, 255, .35);
}
.dm-cube::before { content: ''; position: absolute; left: 32%; right: 32%; top: -15%; height: 17%; border-radius: 4px 4px 0 0; background: var(--cc); filter: brightness(1.1); }
.dm-blue { --cc: #3b82f6; }
.dm-red { --cc: #ef4444; }

/* ---------------------------------------------------------------- the two-part mat (missing) */
.dm-pmat { display: flex; align-items: stretch; gap: 10px; width: min(100%, 760px); padding: 10px; border: 5px solid #ef4444; border-radius: 22px; background: #fff; box-shadow: var(--shadow); }
.dm-half { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dm-half + .dm-half { padding-inline-start: 10px; border-inline-start: 4px solid #fecaca; }

/* ---------------------------------------------------------------- stories */
.dm-scene { display: flex; align-items: center; justify-content: center; max-width: 100%; }
.dm-cards { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: min(4vw, 36px); }
.dm-cards.dm-stack2 { flex-direction: column; gap: 12px; }

/* ---------------------------------------------------------------- numbers: place value, words, comparing */
.dm-pv { display: flex; align-items: center; justify-content: center; gap: 4vw; width: 100%; }
.dm-pv > .dm-fit { max-width: 62%; }
.dm-words {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; min-height: 1.5em; padding: 2px 26px 6px;
  font-size: min(7.4vmin, 56px); line-height: 1.45; color: var(--purple); background: #fff; border-radius: 26px; box-shadow: var(--shadow);
}
.dm-cmp { display: flex; align-items: stretch; justify-content: center; gap: 2.4vw; width: 100%; }
.dm-side { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.dm-cmpw {
  align-self: center; flex: none; padding: 2px 16px 6px; border-radius: 20px; white-space: nowrap;
  font-size: min(5vmin, 36px); line-height: 1.5; color: #fff; background: var(--pink); box-shadow: var(--shadow);
}
.dm-pics { display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
/* pictures that are compared share one scale (--bu: px per unit, set by demos.js from the biggest picture) */
.dm-same { --bu: var(--bu-wide); }
.demo .dm-same .m-blocks { width: calc(var(--vw) * var(--bu)); height: calc(var(--vh) * var(--bu)); max-width: 100%; max-height: none; margin: 0; }

/* ordinals: a queue behind the flag, the words above the animals */
.dm-queue {
  display: flex; align-items: center; justify-content: center; gap: min(1.4vw, 14px); max-width: 100%; padding: 10px 18px;
  background: rgba(255, 255, 255, .7); border-radius: 26px; box-shadow: inset 0 0 0 3px #fff;
}
.dm-flag { font-size: min(8vmin, 60px); line-height: 1; }
.dm-slot { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.dm-ani { font-size: min(7.4vmin, 56px, calc(76vw / (var(--n, 10) + 1))); line-height: 1.2; }
.dm-ord { visibility: hidden; min-height: 1.6em; font-size: min(3.3vmin, 24px); line-height: 1.6; white-space: nowrap; color: var(--purple); }
.dm-slot.dm-said .dm-up { visibility: visible; }

/* odd or even */
.dm-pill { padding: 0 32px 6px; border-radius: 30px; font-size: min(7vmin, 52px); line-height: 1.4; color: #fff; background: var(--green); box-shadow: var(--shadow); }
.dm-pill.dm-odd { background: var(--orange); }

/* look for a pattern: the groups and the two-row table */
.dm-sgroups { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: min(1.8vw, 16px); }
.dm-sg { display: flex; flex-direction: column; align-items: center; padding: 4px 10px 6px; background: #fff; border-radius: 20px; box-shadow: var(--shadow); }
.dm-sg-it { font-size: min(8vmin, 60px); line-height: 1.15; }
.dm-sg-parts { display: flex; gap: 2px; font-size: min(3.4vmin, 24px); line-height: 1.2; }
.demo .m-table.dm-table { font-size: min(5.4vmin, 40px); }
.dm-tem { font-size: 1.05em; line-height: 1.1; }
.dm-tarrow { font-family: 'Fredoka', system-ui, sans-serif; font-size: .8em; color: var(--pink); }

/* ---------------------------------------------------------------- base-ten blocks on the place-value mat */
.dm-mat {
  --u: min(2.3vmin, 10px); --uh: var(--u);
  position: relative; display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 4px;
  width: min(100%, 560px); padding: 6px; direction: ltr; background: #fff; border-radius: 20px; box-shadow: var(--shadow);
}
.dm-mat3 { --u: min(1.55vmin, 9px); --uh: calc(var(--u) * .7); width: min(100%, 640px); }
/* the orange heading and the place colours of the column sums (models.css .m-vhead, .m-band), so a column of the sum
   and its blocks on the mat match: ones blue, tens pink, hundreds yellow (--p-o / --p-t / --p-h when style.css has them) */
.dm-mh {
  padding: 0 6px; border-radius: 12px; text-align: center; white-space: nowrap; font-size: min(3.2vmin, 22px); line-height: 1.6;
  background: linear-gradient(180deg, #ffc65e, #ff9f1c); color: #5b2400;
}
.dm-cell {
  display: flex; flex-wrap: wrap; align-items: flex-end; align-content: flex-end; justify-content: center; gap: calc(var(--u) * .3);
  min-height: calc(var(--u) * 10.4 + 10px); padding: 5px 4px; border-radius: 12px;
}
.dm-cell.dm-p-o { background: var(--p-o, #e2f1fd); }
.dm-cell.dm-p-t { background: var(--p-t, #fde7f1); }
.dm-cell.dm-p-h { background: var(--p-h, #fdf2cf); }
/* the ones stand in columns of five from the bottom (two columns make a ten) */
.dm-c-o {
  box-sizing: border-box; align-self: end; flex-direction: column-reverse; flex-wrap: wrap; align-content: center; justify-content: flex-start;
  height: calc(var(--u) * 10.4 + 10px); padding-top: calc(var(--u) * 2.6 + 5px); gap: calc(var(--u) * .2) calc(var(--u) * .3);
}
/* one block = one little picture (models.js), sized in cubes: --pw × --ph */
.demo .dm-pc {
  display: block; flex: none; margin: 0; overflow: visible; max-width: none; max-height: none;
  width: calc(var(--u, 10px) * var(--pw, 1.4)); height: calc(var(--u, 10px) * var(--ph, 1.4));
}
.demo .dm-pc-h { width: calc(var(--uh, 10px) * var(--pw, 10.4)); height: calc(var(--uh, 10px) * var(--ph, 10.4)); }
/* 10 cubes standing as a rod, 10 rods lying as a flat (when they are exchanged) */
.dm-stack { display: flex; flex-direction: column-reverse; align-items: center; }
.dm-stack > .dm-pc + .dm-pc { margin-bottom: calc(var(--u) * -.4); }
.dm-raft { display: flex; align-items: flex-end; direction: ltr; }
.dm-raft > .dm-pc + .dm-pc { margin-left: calc(var(--u) * -.4); }
.dm-raft.dm-loose > .dm-pc + .dm-pc { margin-left: calc(var(--u) * .45); }

/* the column sum, its little sum on the side, the mat beside it */
.dm-colsum { display: flex; align-items: center; justify-content: center; gap: 4vw; width: 100%; }
.dm-colsum.dm-wblk { --m-col: min(6.6vmin, 50px); }
.dm-vside { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.dm-work {
  --m-eq: min(5.2vmin, 40px);
  display: flex; align-items: center; justify-content: center; min-height: min(9vmin, 64px); min-width: min(36vmin, 260px);
  padding: 4px 16px; border-radius: 20px; background: #fff7c2; box-shadow: inset 0 0 0 3px #fde68a;
}

/* facts help: cubes that become rods or flats */
.dm-pcs {
  --u: min(2.3vmin, 18px); --uh: calc(var(--u) * .62);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 12px 16px; max-width: 100%; min-height: calc(var(--u) * 10.4);
}
.dm-pcs-h { min-height: calc(var(--uh) * 10.4); }
.dm-grp { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: calc(var(--u) * .3); max-width: 100%; }
.dm-op { align-self: center; font-size: min(8vmin, 56px); font-weight: 700; color: var(--purple); font-family: 'Fredoka', system-ui, sans-serif; }

/* 10 rods make a hundred */
.dm-hund { --u: min(2.1vmin, 15px); --uh: var(--u); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 10px; max-width: 100%; }
.dm-hund.dm-many { --u: min(1.4vmin, 11px); }

/* mental addition: the thought cloud */
.dm-cloud { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 30px 14px; border-radius: 44px; background: #fff; box-shadow: var(--shadow), inset 0 0 0 4px #e0e7ff; }
/* the place colours of the column sums: tens pink, ones blue */
.dm-tens .m-n { color: #db2777; }
.dm-ones .m-n { color: #0284c7; }

/* two steps */
.dm-frame { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 16px 10px; border-radius: 22px; background: rgba(255, 255, 255, .85); box-shadow: inset 0 0 0 3px #e9e3ff; }

/* 100 less | number | 100 more (the .ml-head / .ml-body look comes from activities.css) */
.dm-ml { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100%, 980px); overflow: hidden; background: #fff; border-radius: 22px; box-shadow: var(--shadow); }
.dm-mlc { display: flex; flex-direction: column; align-items: stretch; min-width: 0; min-height: 0; border-inline-start: 3px solid #ede9fe; }
.dm-mlc:first-child { border-inline-start: 0; }
.dm-mlc > .dm-pics { flex: 1 1 auto; padding: 8px; }
.dm-mlc .ml-body { min-height: min(12vmin, 80px); }
.dm-mlv { font-size: min(7.4vmin, 54px); }

/* the number line: three number cards */
.dm-cardrow { display: flex; flex-wrap: wrap; justify-content: center; gap: min(3vw, 24px); }
.dm-ncard { padding: 0 18px; border-radius: 20px; font-size: min(7vmin, 52px); line-height: 1.3; font-weight: 700; color: var(--ink); background: #fff; box-shadow: var(--shadow); transition: opacity .4s; }
.dm-ncard.dm-used { opacity: .35; }

/* multiplication: the sum and the product, the × sign */
.dm-bubble { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 6px 18px 10px; border-radius: 24px; background: #fff; box-shadow: var(--shadow); }
.dm-xsign { display: flex; align-items: center; justify-content: center; gap: 12px; }
.dm-x { font-family: 'Fredoka', system-ui, sans-serif; font-size: min(11vmin, 84px); line-height: 1; font-weight: 700; color: #ef4444; }

/* ---------------------------------------------------------------- phones held upright */
@media (max-width: 600px) {
  .demo { --m-eq: min(6.4vw, 30px); --m-col: min(11vw, 6.2vh); gap: 6px; }
  .demo .m-eq.dm-xl { --m-eq: min(8.4vw, 36px); }
  .demo .m-eq.dm-sm { --m-eq: min(5vw, 22px); }
  .dm-cap { min-height: 52px; padding: 0 2px; }
  .dm-say { padding: 2px 12px 4px; border-radius: 18px; font-size: min(4.8vw, 19px); }
  .dm-foot { gap: 14px; }
  .dm-again { width: 54px; height: 54px; font-size: 25px; }
  .dm-text { font-size: min(4.6vw, 19px); }
  .dm-text.dm-small { font-size: min(3.9vw, 16px); }
  .dm-num { padding: 0 18px; border-radius: 22px; font-size: min(16vw, 66px); }
  .dm-num.dm-mid { padding: 0 14px; border-radius: 16px; font-size: min(10vw, 40px); }
  .dm-step { gap: 3px; padding: 1px 8px 3px; font-size: 13.5px; }
  .dm-pv { flex-direction: column; gap: 6px; }
  .dm-pv > .dm-fit { max-width: none; }
  .dm-words { padding: 2px 16px 5px; font-size: min(9vw, 36px); }
  .dm-cmp { flex-direction: column; align-items: stretch; gap: 6px; }
  .dm-side { flex-direction: row; gap: 12px; }
  .dm-cmpw { font-size: 19px; }
  .dm-same { --bu: var(--bu-narrow); }
  .dm-queue { gap: 2px; padding: 8px; }
  .dm-ord { font-size: 13px; }
  .dm-slot.dm-said.dm-b .dm-up { visibility: hidden; }
  .dm-slot.dm-said.dm-b .dm-down { visibility: visible; }
  .dm-colsum { flex-direction: column; gap: 8px; }
  /* with the blocks under it the column sum gets the height that is left: it is 5.5 × its font tall, the rest of the
     screen (bars, caption, ➜, the little sum, the mat's frame) takes about 444px and the blocks 32vmin
     (never smaller than before, never wider than 9vw) */
  .dm-colsum.dm-wblk { --m-col: clamp(min(6.6vmin, 50px), calc((100dvh - 444px - 32vmin) / 5.5), 9vw); }
  /* the place names, the carried 1 and the new digits of a borrow stay readable; a name still fits its column */
  .demo .m-vhead { padding: 0 .3em; font-size: .4em; }
  .demo .m-carry { font-size: max(.5em, 15px); }
  .demo .m-note { font-size: max(.48em, 15px); }
  .dm-mh { font-size: 15px; }
  .dm-mat3 { --uh: calc(var(--u) * .55); }
  .dm-work { --m-eq: min(6vw, 26px); min-width: 0; min-height: 44px; padding: 2px 10px; }
  .dm-pmat { padding: 6px; gap: 6px; border-width: 4px; }
  .dm-cloud { padding: 6px 16px 10px; border-radius: 30px; }
  .dm-frame { padding: 3px 10px 7px; }
  .dm-bubble { padding: 3px 10px 6px; }
  /* 100 less | number | 100 more: three rows (the heading on the reading side) */
  .dm-ml { grid-template-columns: minmax(0, 1fr); }
  .dm-mlc { flex-direction: row; align-items: center; border-inline-start: 0; border-top: 3px solid #ede9fe; }
  .dm-mlc:first-child { border-top: 0; }
  .dm-mlc .ml-head { flex: 0 0 24%; align-self: stretch; display: grid; place-items: center; font-size: 15px; }
  .dm-mlc > .dm-pics { flex: 1 1 0; padding: 4px; }
  .dm-mlc .ml-body { flex: 0 0 24%; min-height: 0; }
  .dm-mlv { font-size: min(7vw, 28px); }
}