/* explainer.css: the moving explainer panel and the Try one card (js/teach/explainer/ui.js). Calm: no red, no timer, no score. */
.exp-pic { position: relative; margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 0.75rem; }   /* the stage sits dead centre of the screen; the tally hangs in the right-hand third */
.exp-pic > .exp-tally { grid-column: 3; justify-self: start; }
.exp-host { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; margin: auto 0; }   /* centred in the console screen (#q-layer is a column; margin auto keeps it centred without clipping the top) */
.exp-stage { position: relative; height: 208px; width: calc((208px - 24px) * 4 / 3 + 24px); max-width: 100%; grid-column: 2; border-radius: 0.5rem; overflow: hidden; background: #14261c; box-shadow: 0 0 0 3px #14261c; }   /* ui.js paints the stage paper-coloured, so the 12px ring round the scene is paper and a sprite on the scene's first row never touches a visible edge */   /* 12px padding all round, so objects never touch the stage edge; the inner 4:3 stays 4:3 */
.exp-canvas, .exp-glow { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); image-rendering: pixelated; }
.exp-glow { pointer-events: none; }
.exp-tally { min-width: 3.5ch; font-size: 2.75rem; font-weight: 700; line-height: 1; color: #f3f7ee; background: #1f6f43; border-radius: 0.5rem; padding: 0.25rem 0.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.exp-tally:empty { visibility: hidden; }
.exp-line { margin: 0.25rem 0 0; font-size: 1.25rem; line-height: 1.3; text-align: center; min-height: 1.6em; }
.exp-reveal { margin: 0; font-size: 1.25rem; font-weight: 700; text-align: center; min-height: 1.4em; }
.exp-end { display: flex; justify-content: center; gap: 0.75rem; margin-top: 0.25rem; }
.exp-end[hidden] { display: none; }
.exp-btn { font: inherit; font-size: 1rem; padding: 0.375rem 0.875rem; border-radius: 0.5rem; border: 2px solid #1f6f43; background: #f3f7ee; color: #14261c; cursor: pointer; }
.exp-btn.is-go { background: #1f6f43; color: #fff; }
.exp-btn:focus-visible { outline: 3px solid #ffc400; outline-offset: 2px; }
.exp-try { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; }
.exp-try-q { margin: 0; font-size: 1.25rem; text-align: center; }
.exp-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.exp-choice { font: inherit; font-size: 1.25rem; min-width: 5rem; padding: 0.375rem 0.75rem; border-radius: 0.5rem; border: 2px solid #1f6f43; background: #f3f7ee; color: #14261c; cursor: pointer; }
.exp-choice.is-focus { background: #1f6f43; color: #fff; }
.exp-try-say { margin: 0; font-size: 1.125rem; text-align: center; min-height: 1.4em; }
@media (prefers-reduced-motion: reduce) { .exp-btn, .exp-choice { transition: none; } }
/* Full-screen teaching (owner 11/11/26: "you dont need the flowers displayed"). ui.js puts .exp-playing on <html> while an explainer is
   mounted and .exp-full on its host, in the game (#q-layer) and the demo alike: the HUD row with the flower strip and the scene banner step
   aside, the question stem shrinks to one line, and the picture takes the left of the console screen with the tally, the spoken line, the
   equation and the end card in a column on its right. Removed again on destroy, so the Try one card and play get their chrome back. */
.exp-playing .demo-top, .exp-playing .demo-garden, .exp-playing .demo-scene, .exp-playing .demo-stickers { display: none !important; }
.exp-playing .demo-asked { flex: 0 0 auto; margin: 0; padding: 0.125rem 0.5rem; font-size: 0.875rem; line-height: 1.3; white-space: normal; overflow-wrap: anywhere; }   /* the whole question stays readable while teaching: it wraps (2 lines or more), never "..." (scorer 11/11/26; scripts/test-explainer-screen.mjs) */
.exp-host.exp-full { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 14px; row-gap: 8px; align-items: start; width: 100%; flex: 1 1 auto; min-height: 0; margin: 0; }
.exp-full > .exp-pic { display: contents; }
.exp-full .exp-stage { grid-column: 1; grid-row: 1 / span 4; height: 280px; width: calc((280px - 24px) * 4 / 3 + 24px); }
.exp-full .exp-tally { grid-column: 2; grid-row: 1; justify-self: start; }
.exp-full .exp-line { grid-column: 2; grid-row: 2; margin: 0; text-align: left; }
.exp-full .exp-reveal { grid-column: 2; grid-row: 3; text-align: left; }
/* the bar model (a 'bars' op, P3 to P6): rows of bars over the stage, widths are the values, a change slides */
.exp-bars { position: absolute; inset: 12px; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 8px 10px; }
.exp-bars[hidden] { display: none; }
.exp-bar-row { display: flex; flex-direction: column; gap: 3px; transition: width 0.7s ease-in-out; }
.exp-bar-total { min-height: 1.3em; font-size: 1.125rem; font-weight: 700; text-align: center; color: #14261c; border-bottom: 3px solid transparent; }
.exp-bar-row.is-joined .exp-bar-total { border-bottom-color: #14261c; }
.exp-bar-segs { display: flex; gap: 6px; height: 42px; transition: gap 0.7s ease-in-out; }
.exp-bar-row.is-joined .exp-bar-segs { gap: 0; }
.exp-seg { flex: 0 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; font-size: 1rem; font-weight: 700; color: #fff; background: #1f6f43; border: 2px solid #14261c; border-radius: 4px; transition: flex-grow 0.7s ease-in-out, background-color 0.4s, opacity 0.6s; }
.exp-bar-row.is-joined .exp-seg { border-radius: 0; }   /* a joined part keeps its number: "5 times 18 is 90" shows the five 18s it joins, "We know 8 and 12" shows the 8 and the 12 (scorer 11/11/26) */
.exp-seg.is-new { background: #ffc400; color: #14261c; }
.exp-seg.is-lit { background: #ffc400; color: #14261c; }
.exp-seg.is-out { opacity: 0.35; background: repeating-linear-gradient(45deg, #8b8f8a 0 6px, #c9ccc6 6px 12px); color: #14261c; text-decoration: line-through; }
.exp-bar-row.is-joined .exp-seg.is-out, .exp-bar-row.is-joined .exp-seg.is-new, .exp-bar-row.is-joined .exp-seg.is-lit { color: #14261c; }   /* a lit part of a joined bar keeps its number (the 82 left after 8 is taken away) */
@media (prefers-reduced-motion: reduce) { .exp-bar-row, .exp-bar-segs, .exp-seg { transition: none; } }
.exp-full .exp-end { grid-column: 2; grid-row: 4; align-self: end; justify-content: flex-start; flex-wrap: wrap; }
/* the worked models (a 'clock' or 'coins' op, js/teach/explainer/steps/model.js): drawn over the stage paper, the hands turn and the coins drop in */
.exp-clock, .exp-coins { position: absolute; inset: 12px; display: flex; align-items: center; justify-content: center; background: inherit; }
.exp-clock[hidden], .exp-coins[hidden] { display: none; }
.exp-clock-face { height: 100%; max-width: 100%; }
.exp-clock-rim { fill: #fffdf4; stroke: #14261c; stroke-width: 6; }
.exp-clock-num { font-size: 22px; font-weight: 700; fill: #14261c; font-family: inherit; }
.exp-clock-tick { stroke: #14261c; stroke-width: 2; }
.exp-clock-pin { fill: #14261c; }
.exp-hand { stroke-linecap: round; transform-origin: 0 0; transform-box: view-box; transition: transform 1.6s ease-in-out; }
.exp-hand.is-hour { stroke: #1f6f43; stroke-width: 10; }
.exp-hand.is-min { stroke: #c27a00; stroke-width: 6; }
.exp-coins { flex-direction: column; gap: 18px; }
.exp-coins-goal { margin: 0; font-size: 1.5rem; font-weight: 700; color: #14261c; }
.exp-coins-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; min-height: 76px; }
.exp-coin { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 700; color: #14261c; background: radial-gradient(circle at 35% 35%, #fff3b0, #e0b100 70%); border: 3px solid #8a6a00; animation: exp-coin-in 0.6s ease-out; }
.exp-coin[data-c="5"], .exp-coin[data-c="10"] { width: 58px; height: 58px; font-size: 1.0625rem; margin-top: 7px; }
@keyframes exp-coin-in { from { transform: translateY(-60px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .exp-hand { transition: none; } .exp-coin { animation: none; } }