/*
 * Reading Trainer — in-canvas scale.
 * .learning-canvas is a size container. Reference composition is 560×560.
 * In-circle lengths: calc(100cqw * REF / 560). One scale, no per-element clamp grids.
 */

body.ls-trainer--reading .learning-canvas {
  container-type: size;
  container-name: rt-canvas;
  --letter-size: calc(100cqw * 104 / 560);
  --isolate-letter-size: calc(100cqw * 78 / 560);
  --action-size: calc(100cqw * 56 / 560);
  --action-icon-size: calc(100cqw * 23 / 560);
  --action-pair-gap: calc(100cqw * 20 / 560);
  --target-action-gap: calc(100cqw * 44 / 560);
  --isolate-gap: calc(100cqw * 32 / 560);
  --isolate-slot: calc(100cqw * 72 / 560);
  --blend-letter-size: calc(100cqw * 72 / 560);
  --blend-word-size: calc(100cqw * 82 / 560);
}

body.ls-trainer--reading .learning-canvas[data-exercise="ISOLATE"] {
  --letter-size: var(--isolate-letter-size);
  --target-action-gap: calc(100cqw * 40 / 560);
}

body.ls-trainer--reading .instruction-zone {
  width: 72cqw;
  max-width: 72cqw;
  gap: calc(100cqw * 6 / 560);
}

body.ls-trainer--reading .instruction-en {
  font-size: calc(100cqw * 28 / 560);
}

body.ls-trainer--reading .instruction-ru {
  font-size: calc(100cqw * 20 / 560);
}

body.ls-trainer--reading .feedback-zone {
  font-size: calc(100cqw * 14 / 560);
}

body.ls-trainer--reading .learning-canvas[data-exercise="SOUND"] .target-zone,
body.ls-trainer--reading .learning-canvas[data-exercise="LISTEN_AND_REPEAT"] .target-zone {
  top: calc(var(--target-y) - 100cqw * 5.35 / 560);
}

body.ls-trainer--reading .learning-canvas[data-exercise="ISOLATE"] .target-zone {
  top: calc(var(--target-y) - 100cqw * 13.3 / 560);
}

body.ls-trainer--reading .learning-canvas[data-exercise="BLEND"] {
  /* Two English lines + gap + one Russian line. The numbered title wraps. */
  --blend-instruction-extent: calc(100cqw * (28 * 1.25 * 2 + 6 + 20 * 1.3) / 560);
  --blend-action-top: calc(
    var(--target-y) + (var(--letter-size) * 0.46) + var(--target-action-gap) +
      100cqw * 16 / 560
  );
}

body.ls-trainer--reading .learning-canvas[data-exercise="BLEND"] .instruction-zone {
  height: var(--blend-instruction-extent);
  min-height: var(--blend-instruction-extent);
  overflow: visible;
}

body.ls-trainer--reading .learning-canvas[data-exercise="BLEND"] .instruction-en,
body.ls-trainer--reading .learning-canvas[data-exercise="BLEND"] .instruction-ru {
  flex: 0 0 auto;
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

body.ls-trainer--reading .learning-canvas[data-exercise="BLEND"] .target-zone {
  top: calc(var(--instruction-y) + var(--blend-instruction-extent));
  height: calc(
    var(--blend-action-top) - var(--instruction-y) - var(--blend-instruction-extent)
  );
  transform: translateX(-50%);
  justify-content: stretch;
}

body.ls-trainer--reading .learning-canvas[data-exercise="BLEND"] .action-zone {
  top: var(--blend-action-top);
}

body.ls-trainer--reading .learning-canvas[data-exercise="BLEND"] .blend-stack {
  height: 100%;
  min-height: 0;
  gap: 0;
  justify-content: space-evenly;
}

body.ls-trainer--reading .learning-canvas[data-exercise="BLEND"] .blend-row {
  flex-wrap: nowrap;
  white-space: nowrap;
  width: 100%;
  max-width: 100%;
  gap: calc(100cqw * 16 / 560);
}

body.ls-trainer--reading .learning-canvas[data-exercise="READ_NEW"],
body.ls-trainer--reading .learning-canvas[data-exercise="TRANSFER"],
body.ls-trainer--reading .learning-canvas[data-exercise="REVIEW_MIX"],
body.ls-trainer--reading .learning-canvas[data-exercise="CHECK"],
body.ls-trainer--reading .learning-canvas[data-exercise="READ"] {
  --read-instr-extent: calc(100cqw * (28 * 1.25 + 6 + 20 * 1.3) / 560);
  --read-action-top: calc(
    var(--target-y) + (var(--letter-size) * 0.46) + var(--target-action-gap)
  );
  --read-word-y: calc(
    (var(--instruction-y) + var(--read-instr-extent) + var(--read-action-top)) / 2
  );
}

body.ls-trainer--reading .learning-canvas[data-exercise="LISTEN_BUILD"] .target-zone,
body.ls-trainer--reading .learning-canvas[data-exercise="LISTEN_WRITE"] .target-zone {
  top: calc(var(--target-y) - 100cqw * 29.52 / 560);
}

body.ls-trainer--reading .learning-canvas[data-exercise="LISTEN_BUILD"] .action-zone,
body.ls-trainer--reading .learning-canvas[data-exercise="LISTEN_WRITE"] .action-zone {
  top: calc(
    var(--target-y) + (var(--letter-size) * 0.46) + var(--target-action-gap) -
      100cqw * 48.35 / 560
  );
}

body.ls-trainer--reading .learning-canvas[data-exercise="INTRO"] .intro-zone {
  width: 82cqw;
  max-width: calc(100cqw * 440 / 560);
}

body.ls-trainer--reading .learning-canvas[data-exercise="INFO"] .intro-zone,
body.ls-trainer--reading .learning-canvas[data-exercise="START"] .intro-zone {
  width: 82cqw;
  max-width: calc(100cqw * 440 / 560);
}

body.ls-trainer--reading .learning-canvas[data-exercise="RESULT"] .intro-zone {
  width: 78cqw;
  max-width: calc(100cqw * 400 / 560);
}

body.ls-trainer--reading .learning-canvas[data-exercise="SOUND_EXPLAIN"] .explain-zone {
  width: 82cqw;
  max-width: calc(100cqw * 420 / 560);
}

/*
  Phone landscape (~844×390). The shared shell reserves 370px of chrome, so the
  circle collapses to about 20px. Blend screens keep the circular card and the
  same 360px scale used in portrait, and the page scrolls to the Listen control.
*/
@media (max-width: 1024px) and (max-height: 520px) {
  body.ls-trainer--reading:has(.learning-canvas[data-exercise="BLEND"]) {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.ls-trainer--reading .learning-canvas[data-exercise="BLEND"] {
    --canvas-size: min(360px, calc(100vw - 48px));
  }
}