/* Look & Speak: single source of truth for shared trainer viewport layout. */
:root{
  --ls-left-rail:250px;
  --ls-right-rail:360px;
  --ls-shell-bg:#f7f3ed;
  --ls-mint:#e5f8f3;
  --ls-green:#12b981;
  /* Course Activity Layout Contract aliases (see COURSE_ACTIVITY_LAYOUT.md) */
  --course-nav-width:var(--ls-left-rail);
  --activity-tools-width:var(--ls-right-rail);
  /* Course-mode workspace chrome: TOP sits after this inset (Words/Grammar reference). */
  --ls-course-workspace-pad-top:28px;
}

/*
  Course activity page structure (desktop, when RIGHT present):
    LEFT   CourseNavigation  = --course-nav-width (250px)
    CENTER Activity          = minmax(0, 1fr)
    RIGHT  ActivityTools     = --activity-tools-width (360px, optional)

  When RIGHT is absent: do not reserve empty tools width - CENTER expands.
  Grammar Module Shell is a course index/router, not a 3-column activity host.
  Standalone != course mode. Vocabulary course mode is the approved visual pilot.

  COURSE MODE shared TOP placement:
  CourseActivityNavigation occupies course workspace chrome independently of the
  trainer's native standalone top padding. Hosts that put TOP as the first child of
  .page-content use --ls-course-workspace-pad-top so TOP Y matches Words/Grammar chrome.
  Do not inherit random native padding for shared TOP position.
  Standalone (no .is-course-mode) keeps native paddings unchanged.
*/
body.ls-trainer.is-course-mode .app-shell > .page-content{
  padding-top:var(--ls-course-workspace-pad-top);
}

/* On short desktop viewports the complete exercise stays inside 100vh.
   Approved shell, logo, avatar, circles and learning-image sizes stay intact. */
@media (min-width:1024px) and (max-height:1000px){
  body.ls-trainer{height:100vh;min-height:0;overflow:hidden}
  body:is(.ls-trainer--affirm,.ls-trainer--negative) .app-shell{height:100vh;min-height:0}
  body:is(.ls-trainer--affirm,.ls-trainer--negative) .page-content{height:100vh;padding:28px 62px 24px;overflow:hidden}
  body:is(.ls-trainer--affirm,.ls-trainer--negative) .page-header{height:62px}
  body:is(.ls-trainer--affirm,.ls-trainer--negative) .trainer-card{padding:22px 38px 16px}
  body:is(.ls-trainer--affirm,.ls-trainer--negative) .visual-row{min-height:0;padding:12px 0 8px}
  body:is(.ls-trainer--affirm,.ls-trainer--negative) .sentence-panel{margin-bottom:16px}
  body:is(.ls-trainer--affirm,.ls-trainer--negative) .navigation-row{padding-top:14px}

  body.ls-trainer--listening main{height:100vh;overflow:hidden}
  body.ls-trainer--listening .layout{min-height:0}
  body.ls-trainer--listening .trainer-card{min-height:0;height:calc(100vh - 158px)}
  body.ls-trainer--listening .settings{max-height:calc(100vh - 112px);overflow-y:auto}

  body.ls-trainer--vocabulary .cards{top:135px;gap:36px}
  body.ls-trainer--vocabulary .card{width:430px;height:430px}
  body.ls-trainer--vocabulary .card img{max-width:76%;max-height:calc(76% - 42px)}
  body.ls-trainer--vocabulary .nav{bottom:30px}
  body.ls-trainer--vocabulary :is(.find-mode,.hear-mode,.choose-mode,.russian-mode,.english-mode,.pictureaudio-mode,.speak-mode,.picture-speak-mode,.write-mode){padding:26px 60px 24px}
  body.ls-trainer--vocabulary :is(.find-progress,.hear-progress,.choose-progress,.russian-progress,.english-progress,.pictureaudio-progress,.speak-progress,.picture-speak-progress,.write-progress){margin-top:0;margin-bottom:10px}
  body.ls-trainer--vocabulary .find-word{font-size:48px;margin-bottom:12px}
  body.ls-trainer--vocabulary :is(.find-grid,.hear-grid,.pictureaudio-grid){grid-template-columns:repeat(2,280px);grid-template-rows:repeat(2,190px);gap:16px}
  body.ls-trainer--vocabulary :is(.hear-prompt,.pictureaudio-prompt,.speak-prompt,.write-prompt){height:82px;min-height:82px;margin-bottom:15px}
  body.ls-trainer--vocabulary .choose-picture{width:330px;height:250px;margin-bottom:14px}
  body.ls-trainer--vocabulary :is(.choose-grid,.russian-grid,.english-grid){grid-template-columns:repeat(2,280px);grid-template-rows:repeat(2,92px);gap:14px 16px}
  body.ls-trainer--vocabulary :is(.choose-option,.russian-option,.english-option){min-height:92px}
  body.ls-trainer--vocabulary :is(.russian-prompt,.english-prompt){height:82px;min-height:82px;margin-bottom:18px}
  body.ls-trainer--vocabulary .picture-speak-card{height:220px;margin-bottom:12px}
  body.ls-trainer--vocabulary :is(.picture-speak-instruction,.speak-instruction,.write-instruction){margin-bottom:12px}
  body.ls-trainer--vocabulary .write-picture{height:235px;margin-bottom:14px}

  body.ls-trainer--quizlet{height:100vh;overflow:hidden}
  body.ls-trainer--quizlet .app-shell{height:100vh;min-height:0}
  body.ls-trainer--quizlet .page-content{padding:28px 62px 24px;overflow:hidden}
  body.ls-trainer--quizlet .trainer-card{padding:22px 28px 18px}
  body.ls-trainer--quizlet .page-header{margin-bottom:10px}
  body.ls-trainer--quizlet .flash-card{width:min(520px,100%);height:340px}
  body.ls-trainer--quizlet .learn-card,
  body.ls-trainer--quizlet .learn-cards.is-open .learn-card.answer,
  body.ls-trainer--quizlet .learn-card.answer.open{width:430px;height:430px}
  body.ls-trainer--quizlet .learn-card.picture img{max-width:76%;max-height:calc(76% - 42px)}
  body.ls-trainer--quizlet .object-circle{width:200px;height:200px}
  body.ls-trainer--quizlet .choice-grid{gap:12px}
  body.ls-trainer--quizlet .help-sidebar{padding:28px 22px}
}