/* Tablet / phone shell + desktop fluid chrome. In-canvas type uses cqw (canvas-scale / exercises). */

@media (min-width: 1025px) {
  body.ls-trainer--reading {
    --ls-left-rail: 250px;
    --rt-pad-x: 48px;
    --rt-pad-top: clamp(14px, calc(36px - (1080px - 100dvh) * 22 / 360), 36px);
    --rt-pad-bottom: clamp(18px, calc(40px - (1080px - 100dvh) * 22 / 360), 40px);
    --rt-header-h: clamp(44px, calc(48px - (1080px - 100dvh) * 4 / 360), 48px);
    --rt-header-mb: clamp(6px, calc(18px - (1080px - 100dvh) * 12 / 360), 18px);
    --rt-progress-mb: clamp(8px, calc(28px - (1080px - 100dvh) * 20 / 360), 28px);
    --rt-stage-gap: clamp(10px, calc(28px - (1080px - 100dvh) * 18 / 360), 28px);
    --rt-canvas-chrome: clamp(
      188px,
      calc(292px - (1080px - 100dvh) * 98 / 360),
      292px
    );
  }
}

@media (min-width: 1025px) and (max-height: 900px) {
  body.ls-trainer--reading {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  body.ls-trainer--reading .page-content {
    min-height: 0;
    height: 100%;
  }

  body.ls-trainer--reading .speech-dev-panel {
    max-height: min(480px, calc(var(--rt-viewport-h) - 200px));
  }
}

@media (max-width: 1024px) {
  .app-shell {
    display: block;
    padding-top: 88px;
  }

  .brand-rail {
    position: fixed;
    inset: 0 0 auto 0;
    width: 100%;
    height: 88px;
    border-right: 0;
    border-bottom: 1px solid rgba(15, 27, 45, 0.05);
  }

  .brand-logo {
    top: 16px;
    left: 22px;
    width: 126px;
  }

  .brand-nav {
    display: none;
  }

  .page-content {
    padding: 24px 20px 32px;
    min-height: calc(100vh - 88px);
    min-height: calc(100dvh - 88px);
  }

  body.ls-trainer--reading {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  .learning-canvas {
    --canvas-size: min(
      460px,
      calc(100vw - 48px),
      calc(var(--rt-viewport-h) - 370px)
    );
  }
}

@media (max-width: 620px) {
  .breadcrumbs {
    font-size: 12px;
    gap: 6px;
  }

  .sparkles {
    width: 32px;
    height: 32px;
  }

  .page-content {
    padding: 16px 12px 28px;
  }

  .progress-row {
    width: min(280px, 84%);
    margin-bottom: 20px;
  }

  .learning-canvas {
    --canvas-size: min(
      360px,
      calc(100vw - 28px),
      calc(var(--rt-viewport-h) - 340px)
    );
  }

  .nav-arrow {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 1200px) {
  body.ls-trainer--reading .lesson-stage-main {
    flex-direction: column;
    align-items: center;
  }

  body.ls-trainer--reading .speech-dev-panel {
    width: min(380px, 100%);
    max-width: min(560px, 100%);
    flex-basis: auto;
  }

  body.ls-trainer--reading .write-help-dock {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    width: min(600px, 100%);
    max-width: min(600px, 100%);
    margin: 20px auto 0;
  }

  body.ls-trainer--reading .lesson-stage-canvas-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
}

@media (max-width: 768px) {
  body.ls-trainer--reading .write-help-dock {
    width: 100%;
    max-width: 100%;
    margin-top: 16px;
  }

  body.ls-trainer--reading .write-help-dock .write-help-label-en {
    font-size: 18px;
  }

  body.ls-trainer--reading .write-help-dock .write-hint-reveal {
    font-size: 30px;
  }
}

@media (max-width: 620px) {
  .page-header {
    height: auto;
    min-height: var(--rt-header-h, 48px);
    align-items: flex-start;
  }

  .lesson-menu-btn {
    min-height: 36px;
    padding: 5px 10px;
  }

  .lesson-menu-btn-ru {
    font-size: 12px;
  }

  .lesson-menu-btn-en {
    font-size: 10px;
  }

  .lesson-menu-drawer {
    width: min(100vw, 100%);
    max-width: 100vw;
  }

  .lesson-menu-header {
    padding: 14px 14px 10px;
  }

  .lesson-menu-list {
    padding: 8px 10px 16px;
    gap: 5px;
  }

  .lesson-menu-card {
    padding: 7px 10px;
  }

  .lesson-menu-card-title {
    font-size: 13px;
  }
}

/*
  Short landscape (844×390). The max-width:1024px rule sizes the circle as
  viewport height minus 370px, which is about 20px here. Keep a 360px card
  and scroll the lesson column below the fixed header. Blend keeps the
  approved rule in canvas-scale.css.
*/
@media (max-width: 1024px) and (max-height: 520px) {
  body.ls-trainer--reading:not(:has(.learning-canvas[data-exercise="BLEND"])) .page-content {
    height: calc(100dvh - 88px);
    max-height: calc(100dvh - 88px);
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

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