/* Reading Trainer shell — new Look & Speak circular canvas style */

.app-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: var(--ls-left-rail) minmax(0, 1fr);
}

.brand-rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--ls-left-rail);
  background: var(--rail);
  border-right: 1px solid rgba(15, 27, 45, 0.04);
  z-index: 2;
}

.brand-logo {
  position: absolute;
  top: 40px;
  left: 42px;
  width: 166px;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.brand-nav {
  position: absolute;
  top: 220px;
  left: 28px;
  right: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.brand-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 14px 10px 16px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.brand-nav-item svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-nav-item.is-active {
  background: var(--mint);
  color: var(--green-dark);
}

.brand-nav-item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--green);
}

.page-content {
  grid-column: 2;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--rt-pad-top, 36px) var(--rt-pad-x, 48px) var(--rt-pad-bottom, 40px);
  background: var(--bg);
  box-sizing: border-box;
}

.page-header {
  width: min(920px, 100%);
  height: var(--rt-header-h, 48px);
  margin: 0 0 var(--rt-header-mb, 18px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.lesson-menu-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid #d7e3de;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(15, 27, 45, 0.02);
  cursor: pointer;
  font: inherit;
  line-height: 1.15;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.lesson-menu-btn:hover {
  background: var(--soft);
  border-color: #c5d6cf;
}

.lesson-menu-btn:focus-visible {
  outline: 2px solid #7eb8a4;
  outline-offset: 2px;
}

.lesson-menu-btn[aria-expanded="true"] {
  background: var(--mint);
  border-color: #c5ddd3;
}

.lesson-menu-btn-ru {
  font-size: 13px;
  font-weight: 600;
}

.lesson-menu-btn-en {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}

/* —— Course lesson menu (QA / future sequential access) —— */
.lesson-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(15, 27, 45, 0.28);
}

.lesson-menu-drawer {
  position: fixed;
  z-index: 90;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(380px, 92vw);
  height: 100vh;
  height: 100dvh;
  background: #fff;
  box-shadow: -18px 0 48px rgba(15, 27, 45, 0.12);
  box-sizing: border-box;
}

.lesson-menu-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid #e7eeea;
}

.lesson-menu-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}

.lesson-menu-subtitle {
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.lesson-menu-close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: var(--soft);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.lesson-menu-close:hover {
  background: var(--mint);
}

.lesson-menu-close:focus-visible {
  outline: 2px solid #7eb8a4;
  outline-offset: 2px;
}

.lesson-menu-list {
  flex: 1;
  overflow: auto;
  padding: 10px 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  -webkit-overflow-scrolling: touch;
}

.lesson-menu-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #e1ebe6;
  border-radius: 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(15, 27, 45, 0.02);
}

.lesson-menu-card:hover:not(:disabled) {
  background: var(--soft);
  border-color: #d0ddd7;
}

.lesson-menu-card:focus-visible {
  outline: 2px solid #7eb8a4;
  outline-offset: 2px;
}

.lesson-menu-card.is-current {
  background: var(--mint);
  border-color: #c5ddd3;
  box-shadow: inset 3px 0 0 #7eb8a4;
}

.lesson-menu-card.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.lesson-menu-card-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

.lesson-menu-card-number {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lesson-menu-card-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}

.lesson-menu-card-secondary {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.lesson-menu-card-status {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

.lesson-menu-card.is-current .lesson-menu-card-status {
  color: #3d6b5c;
  font-weight: 600;
}

.lesson-menu-card.is-completed .lesson-menu-card-status {
  color: #4a7a66;
}

.lesson-menu-card[hidden],
.lesson-menu-overlay[hidden],
.lesson-menu-drawer[hidden] {
  display: none !important;
}

.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}

.breadcrumbs span:last-child {
  color: var(--ink);
  font-weight: 600;
}

.breadcrumbs b {
  color: #c2c8cd;
  font-size: 14px;
  font-weight: 500;
}

.sparkles {
  width: 40px;
  height: 40px;
  object-fit: contain;
  opacity: 0.92;
}

.progress-row {
  width: min(420px, 72%);
  display: flex;
  align-items: center;
  margin: 0 0 var(--rt-progress-mb, 28px);
}

.ls-progress {
  flex: 1;
  height: 22px;
  margin: 0;
  display: flex;
  align-items: center;
  overflow: visible;
  background: transparent;
}

.ls-progress-step {
  position: relative;
  display: block;
  flex: 1 1 0;
  height: 22px;
  border: 0;
  background: transparent;
  padding: 0;
}

.ls-progress-step::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 10px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: #e4e8e6;
}

.ls-progress-step:first-child::before {
  display: none;
}

.ls-progress-step::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 3px;
  left: 50%;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #e4e8e6;
}

.ls-progress-step.is-done::before,
.ls-progress-step.is-current::before {
  background: var(--green);
}

.ls-progress-step.is-done::after {
  background: var(--green);
}

.ls-progress-step.is-current::after {
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(18, 185, 129, 0.16);
}

.lesson-stage {
  width: min(1280px, 100%);
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--rt-stage-gap, 28px);
  min-height: 0;
}

.lesson-stage-main {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  width: 100%;
  min-width: 0;
}

/* Keeps the circle centered; help dock paints beside it without shifting canvas. */
.lesson-stage-canvas-slot {
  position: relative;
  flex: 0 0 auto;
  width: fit-content;
  max-width: 100%;
}

.learning-canvas {
  /*
   * ============================================================
   * APPROVED BASE LAYOUT — Screens 1–3 REFERENCE (do not retune)
   * SOUND / LISTEN_AND_REPEAT / ISOLATE are the visual source of truth.
   * New exercise screens must reuse these tokens/zones.
   * Do NOT shift these values to fit later screen content.
   * ============================================================
   * Zones:
   *   1. instruction-zone  → --instruction-y
   *   2. target-zone       → --target-y  (MAIN CONTENT ZONE)
   *   3. action-zone       → derived from target + letter + gap
   * ============================================================
   */
  /*
   * Circle size = min(desktop max, available width, available height).
   * No extra vmin limiter. --rt-canvas-chrome is fluid on short desktop height.
   */
  container-type: size;
  container-name: rt-canvas;
  --canvas-size: min(
    560px,
    calc(100vw - var(--ls-left-rail) - (2 * var(--rt-pad-x, 48px))),
    calc(var(--rt-viewport-h) - var(--rt-canvas-chrome))
  );
  --action-size: calc(100cqw * 56 / 560);
  --instruction-y: 22%;
  --target-y: 50%;
  --main-content-y: var(--target-y);
  --letter-size: calc(100cqw * 104 / 560);
  --isolate-letter-size: calc(100cqw * 78 / 560);
  --target-action-gap: calc(100cqw * 44 / 560);
  --action-icon-size: calc(100cqw * 23 / 560);
  --action-pair-gap: calc(100cqw * 20 / 560);
  --isolate-gap: calc(100cqw * 32 / 560);
  --isolate-slot: calc(100cqw * 72 / 560);
  position: relative;
  width: var(--canvas-size);
  height: var(--canvas-size);
  border-radius: 50%;
  background: var(--canvas);
  box-shadow: var(--shadow-soft);
  display: block;
  padding: 0;
  overflow: hidden;
}

/* ISOLATE reuses the same coordinates; only letter metric + gap adapt inside the system */
.learning-canvas[data-exercise="ISOLATE"] {
  --letter-size: var(--isolate-letter-size);
  --target-action-gap: calc(100cqw * 40 / 560);
}

.instruction-zone,
.target-zone,
.action-zone,
.feedback-zone {
  position: absolute;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.instruction-zone {
  top: var(--instruction-y);
  transform: translateX(-50%);
  width: 72cqw;
  max-width: 72cqw;
  gap: calc(100cqw * 6 / 560);
  text-align: center;
  overflow: hidden;
}

.target-zone {
  top: var(--target-y);
  transform: translate(-50%, -50%);
  width: 90%;
  justify-content: center;
}

.action-zone {
  top: calc(var(--target-y) + (var(--letter-size) * 0.46) + var(--target-action-gap));
  transform: translateX(-50%);
  width: 90%;
  justify-content: center;
  padding: 0;
  min-height: var(--action-size);
  z-index: 3;
}

.action-zone[hidden] {
  display: flex;
}

.feedback-zone {
  bottom: 10%;
  transform: translateX(-50%);
  width: 80%;
  justify-content: center;
  color: var(--muted);
  font-size: calc(100cqw * 14 / 560);
  font-weight: 500;
  text-align: center;
  pointer-events: none;
  z-index: 2;
}

/* Attempt feedback sits under action controls via --feedback-y (JS). */
.feedback-zone.has-attempt-feedback {
  top: var(--feedback-y, auto);
  bottom: auto;
  transform: translateX(-50%);
}

.feedback-zone * {
  pointer-events: none;
}

.navigation-zone {
  flex: 0 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.instruction-en {
  margin: 0;
  max-width: 100%;
  font-size: calc(100cqw * 28 / 560);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.015em;
  text-align: center;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.instruction-en:empty {
  display: none;
}

.instruction-ru {
  margin: 0;
  max-width: 100%;
  font-size: calc(100cqw * 20 / 560);
  font-weight: 400;
  line-height: 1.3;
  color: var(--muted);
  letter-spacing: -0.01em;
  text-align: center;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.stimulus {
  margin: 0;
  font-size: calc(100cqw * 72 / 560);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  text-align: center;
}

.nav-arrow {
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: #6b7380;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(15, 27, 45, 0.04);
  transition: border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.nav-arrow > span {
  display: block;
  font: 400 28px/1 Arial, sans-serif;
  color: inherit;
  transform: translateY(-1px);
}

.nav-arrow:hover:not(:disabled) {
  border-color: #cfd6d2;
  color: var(--ink);
}

.nav-arrow:disabled {
  opacity: 1;
  border-color: #eef1ef;
  color: #c9cfd4;
  box-shadow: none;
  cursor: not-allowed;
}

/* Check-completed: Next is the clear next action (brand mint/green). */
.nav-arrow.is-advance-ready:not(:disabled) {
  background: var(--mint);
  border-color: rgba(18, 185, 129, 0.55);
  color: var(--green-dark);
  box-shadow: 0 8px 18px rgba(18, 185, 129, 0.16);
}

.nav-arrow.is-advance-ready:not(:disabled):hover {
  background: #dff5eb;
  border-color: var(--green);
  color: var(--green-dark);
}