/*! © 2026 Nuvira Technologies, LLC. All rights reserved. WonderWise, its tutors, artwork, voices, lessons and software may not be copied, scraped or reused. See /terms. */
/* Explore pictures: number line, sort bins, order cards, tap words.
   Big tappable pieces, bright brand colours, and a small pop when a piece lands. */
.explore-piece{appearance:none;font:inherit;cursor:pointer;color:var(--ww-ink);-webkit-tap-highlight-color:transparent}
.explore-controls{margin-top:8px;gap:10px}
.explore-check{appearance:none;font:inherit;font-size:19px;font-weight:700;color:#fff;background:var(--action-primary);border:2px solid var(--action-primary);border-radius:var(--action-radius);min-height:48px;padding:8px 26px;box-shadow:none;cursor:pointer}
.explore-check:hover:not([aria-disabled=true]):not(:disabled){background:var(--action-primary-hover);border-color:var(--action-primary-hover)}
.explore-check:active:not([aria-disabled=true]):not(:disabled){background:var(--action-primary-pressed);border-color:var(--action-primary-pressed)}
.explore-check[aria-disabled=true]{opacity:.45;box-shadow:none}
.explore-reset{appearance:none;font:inherit;font-size:16px;font-weight:600;color:var(--ww-teal);background:#fff;border:0;border-radius:20px;min-height:40px;padding:6px 16px;box-shadow:0 2px 0 #C9DEDC,0 0 0 2px #C9DEDC inset;cursor:pointer}
.explore-reset[aria-disabled=true]{opacity:.45}
.illustration-number_line .visual-exploration-note,.illustration-sort_bins .visual-exploration-note,.illustration-order_cards .visual-exploration-note,.illustration-tap_words .visual-exploration-note{font-size:17px;margin:6px 0 0}

/* Keep all authored marks at a usable spacing; only the drawing scrolls on a
   narrow board. The same track coordinates position ticks, marker and hops. */
.illustration-number_line{width:100%;min-width:0}
.illustration-number_line .illustration-drawing{display:block;width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:auto}
.number-line{--line-edge:max(28px,calc(var(--tick-space,48px) / 2));position:relative;box-sizing:border-box;width:100%;min-width:calc(var(--ticks,10) * var(--tick-space,48px) + 2 * var(--line-edge));padding:48px var(--line-edge);--gap:calc(100% / var(--ticks,10))}
.number-line-track{position:relative;height:6px;border-radius:3px;background:var(--ww-ink)}
.number-line-tick{position:absolute;top:50%;left:calc(var(--at) * var(--gap));transform:translate(-50%,-50%);width:44px;height:76px;background:transparent;border:0;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;border-radius:10px}
.number-line-mark{display:block;width:3px;height:14px;border-radius:2px;background:var(--ww-ink)}
.number-line-tick-whole .number-line-mark{height:22px;width:4px}
.number-line-label{position:absolute;top:calc(50% + 12px);font-size:18px;line-height:1.2;font-weight:700;color:var(--ww-ink);white-space:nowrap}
.number-line-tick:hover{background:var(--action-selected)}
.number-line-tick[aria-pressed=true] .number-line-mark{background:var(--action-primary)}
.number-line-tick[aria-pressed=true] .number-line-label{color:var(--ink);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:3px}
.number-line-tick:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.number-line-marker{position:absolute;top:50%;left:calc(var(--at) * var(--gap));width:30px;height:30px;margin:-33px 0 0 -15px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--action-primary);box-shadow:0 2px 0 var(--action-primary-pressed);transition:left .35s cubic-bezier(.3,1.4,.5,1);pointer-events:auto;cursor:grab}
.number-line-marker.is-dragging{transition:none}
.number-line-hop{position:absolute;top:-38px;height:40px;left:calc(var(--from) * var(--gap));width:calc((var(--to) - var(--from)) * var(--gap));border:3px solid var(--ww-coral);border-bottom:0;border-radius:50% 50% 0 0/100% 100% 0 0;pointer-events:none}
.number-line-hop-left{border-color:var(--ww-sky)}
body[data-age-group=early] .number-line-label{font-size:22px}

/* Sort bins */
.sort-bins{display:flex;flex-direction:column;gap:12px;width:100%;max-width:760px}
.sort-supply{display:flex;flex-wrap:wrap;gap:10px;min-height:58px;padding:8px;border-radius:14px;background:#f6faf6;border:2px dashed #c9d9ce}
.sort-card{min-height:48px;padding:8px 16px;border:0;border-radius:16px;font-size:20px;font-weight:650;background:var(--ww-amber-soft);box-shadow:0 3px 0 #f1dca0}
.sort-card:nth-child(3n+2){background:var(--ww-mint);box-shadow:0 3px 0 #c5e4d1}
.sort-card:nth-child(3n){background:var(--ww-sky-soft);box-shadow:0 3px 0 #bcdcf3}
.sort-card[aria-pressed=true]{outline:4px solid var(--ww-teal);outline-offset:2px}
.sort-bin-row{display:grid;grid-template-columns:repeat(var(--bins,2),minmax(0,1fr));gap:12px}
.sort-bin{min-height:120px;padding:10px;border-radius:18px;border:3px solid #a9c8b8;background:#fff;cursor:pointer}
.sort-bin:focus-visible{outline:3px solid var(--ww-teal);outline-offset:3px}
.sort-bin.drop-ready{border-color:var(--ww-teal);background:var(--ww-mint)}
.explore-bin-label{display:block;font-size:20px;font-weight:800;color:var(--ww-teal);margin:0 0 8px;text-align:center}
.sort-bin-cards{display:flex;flex-wrap:wrap;gap:8px;min-height:50px}
.sort-bin .sort-card{font-size:18px;min-height:42px;padding:6px 12px}

/* Order cards */
.order-cards{display:flex;flex-wrap:wrap;gap:12px;width:100%;max-width:760px}
.order-card{display:flex;align-items:center;gap:12px;flex:1 1 160px;min-height:58px;padding:8px 14px;border:0;border-radius:16px;font-size:19px;font-weight:650;text-align:left;background:var(--ww-mint);box-shadow:0 3px 0 #c5e4d1}
.order-card-number{display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0;border-radius:50%;background:var(--ww-teal);color:#fff;font-size:17px;font-weight:800}
.order-card[aria-pressed=true]{outline:4px solid var(--ww-coral);outline-offset:2px}
.order-card.drop-ready{background:var(--ww-amber-soft);outline:3px dashed var(--ww-teal)}
.order-card-text{flex:1;overflow-wrap:anywhere}

/* Tap words */
.tap-words{display:flex;flex-direction:column;gap:6px;width:100%}
.tap-words-line{display:flex;flex-wrap:wrap;gap:6px 8px;margin:0;align-items:baseline}
.tap-word{min-height:48px;padding:6px 12px;border:0;border-radius:12px;font-size:clamp(22px,2.6vw,30px);font-weight:650;background:#f6faf6;box-shadow:0 2px 0 #d8e7df}
.tap-word:hover{background:var(--ww-mint)}
.tap-word[aria-pressed=true]{background:var(--ww-amber);box-shadow:0 3px 0 #c99a2b;color:var(--ww-ink)}
.tap-word:focus-visible{outline:3px solid var(--ww-teal);outline-offset:3px}
body[data-age-group=early] .tap-word{font-size:clamp(26px,3vw,34px)}

/* Fit steps trim spacing, while long lessons can scroll with readable text and 44px targets. */
#whiteboard.board-fit-1 .sort-card,#whiteboard.board-fit-1 .order-card{font-size:16px;min-height:44px;padding:4px 10px}
#whiteboard.board-fit-1 .sort-bin{min-height:84px;padding:6px}
#whiteboard.board-fit-1 .tap-word{font-size:20px;min-height:44px;padding:3px 9px}
#whiteboard.board-fit-1 .explore-check{min-height:44px;font-size:16px}
#whiteboard.board-fit-2 .sort-card,#whiteboard.board-fit-2 .order-card{font-size:16px;min-height:44px;padding:2px 8px}
#whiteboard.board-fit-2 .sort-bin{min-height:64px;padding:4px}
#whiteboard.board-fit-2 .explore-bin-label{font-size:16px;margin-bottom:4px}
#whiteboard.board-fit-2 .tap-word{font-size:18px;min-height:44px;padding:2px 7px}
#whiteboard.board-fit-3 .explore-controls,#whiteboard.board-fit-4 .explore-controls{margin-top:4px;gap:6px}
#whiteboard.board-fit-3 .explore-check,#whiteboard.board-fit-4 .explore-check{min-height:44px;font-size:16px;padding:4px 16px}
#whiteboard.board-fit-3 .explore-reset,#whiteboard.board-fit-4 .explore-reset{min-height:44px;font-size:16px;padding:2px 10px}
#whiteboard.board-fit-3 .visual-exploration-note,#whiteboard.board-fit-4 .visual-exploration-note{font-size:16px;margin:2px 0 0}
#whiteboard.board-fit-3 .sort-card,#whiteboard.board-fit-3 .order-card,#whiteboard.board-fit-4 .sort-card,#whiteboard.board-fit-4 .order-card{font-size:16px;min-height:44px;padding:1px 7px;border-radius:10px;box-shadow:none}
#whiteboard.board-fit-3 .sort-bins,#whiteboard.board-fit-4 .sort-bins{gap:6px}
#whiteboard.board-fit-3 .sort-supply,#whiteboard.board-fit-4 .sort-supply{gap:5px;padding:4px;min-height:36px}
#whiteboard.board-fit-3 .sort-bin-row,#whiteboard.board-fit-4 .sort-bin-row{gap:6px}
#whiteboard.board-fit-3 .sort-bin,#whiteboard.board-fit-4 .sort-bin{min-height:52px;padding:3px;border-width:2px;border-radius:12px}
#whiteboard.board-fit-3 .explore-bin-label,#whiteboard.board-fit-4 .explore-bin-label{font-size:16px;margin:0 0 2px}
#whiteboard.board-fit-3 .sort-bin-cards,#whiteboard.board-fit-4 .sort-bin-cards{gap:4px;min-height:28px}
#whiteboard.board-fit-3 .sort-bin .sort-card,#whiteboard.board-fit-4 .sort-bin .sort-card{font-size:16px;min-height:44px;padding:0 6px}
#whiteboard.board-fit-3 .order-cards,#whiteboard.board-fit-4 .order-cards{gap:6px}
#whiteboard.board-fit-3 .order-card,#whiteboard.board-fit-4 .order-card{gap:8px;line-height:1.4}
#whiteboard.board-fit-3 .order-card-number,#whiteboard.board-fit-4 .order-card-number{width:22px;height:22px;font-size:12px}
#whiteboard.board-fit-3 .tap-word,#whiteboard.board-fit-4 .tap-word{font-size:18px;min-height:44px;padding:1px 6px}
#whiteboard.board-fit-3 .tap-words-line,#whiteboard.board-fit-4 .tap-words-line{gap:4px 5px}
#whiteboard.board-fit-4 .explore-controls{margin-top:2px}
#whiteboard.board-fit-4 .sort-card,#whiteboard.board-fit-4 .order-card{min-height:44px;font-size:16px;padding:0 5px;line-height:1.4}
#whiteboard.board-fit-4 .sort-supply{gap:3px;padding:3px;min-height:28px}
#whiteboard.board-fit-4 .explore-bin-label{font-size:16px}
#whiteboard.board-fit-4 .sort-bin{min-height:36px}
#whiteboard.board-fit-4 .sort-bins{gap:4px}
#whiteboard.board-fit-4 .sort-bin-cards{min-height:22px}
/* The fifth fit step tightens gaps only; text and tap targets retain their readable sizes. */
@media(max-width:760px){
  #whiteboard.board-fit-5 .tap-words{gap:2px}
  #whiteboard.board-fit-5 .tap-words-line{gap:2px 4px}
  #whiteboard.board-fit-5 .tap-word{min-height:44px;padding:1px 5px}
  #whiteboard.board-fit-5 .sort-supply{gap:2px}
  #whiteboard.board-fit-5 .sort-bin-cards{min-height:16px}
  #whiteboard.board-fit-5 .explore-check{min-height:44px}
}
@media(max-width:760px){
  .sort-card,.order-card{font-size:17px;min-height:44px;padding:6px 12px}
  .sort-bin{min-height:90px}
}
@media(max-width:460px){.sort-bin-row{gap:8px}.sort-bin{padding:6px}.explore-bin-label{font-size:17px}}
@media(forced-colors:active){.explore-piece,.sort-bin{border:2px solid ButtonText;color:ButtonText;background:ButtonFace}.explore-piece[aria-pressed=true]{outline:3px solid Highlight}.number-line-marker,.number-line-mark{background:ButtonText}}
@media(prefers-reduced-motion:reduce){.number-line-marker{transition:none}}
body[data-lesson-motion=reduced] .number-line-marker{transition:none}

/* Drag cards: one color, blue, so they stand out from the board and from the bins. */
.sort-card,.sort-card:nth-child(n),.order-card:not(.drop-ready){background:var(--ww-sky-soft);box-shadow:0 3px 0 #bcdcf3}
#whiteboard.board-fit-3 .sort-card,#whiteboard.board-fit-3 .order-card,#whiteboard.board-fit-4 .sort-card,#whiteboard.board-fit-4 .order-card{box-shadow:none}