/* Learn & Grow UI Hotfix v1.6.1 */
.lg-root main,
.lg-mode-app main{
  max-width: min(980px, calc(100vw - 420px)) !important;
}

/* Lesson reader: give reading content priority */
.lg-root .lesson-reader,
.lg-root .session-reader,
.lg-root .lg-session-reader,
.lg-root .growth-reader,
.lg-root [class*="reader"]{
  max-width: 860px !important;
}

.lg-root .lesson-content,
.lg-root .session-content,
.lg-root .lg-lesson-content,
.lg-root .growth-content,
.lg-root [class*="lesson-content"],
.lg-root [class*="session-content"]{
  max-width: 760px !important;
  width: 100% !important;
  margin-inline: auto !important;
  padding: clamp(24px, 4vw, 44px) !important;
  line-height: 1.78 !important;
  font-size: 1.02rem !important;
}

/* Tidy the upper lesson/module strip */
.lg-root .session-strip,
.lg-root .module-strip,
.lg-root .lesson-strip,
.lg-root .lg-session-strip,
.lg-root .lg-module-strip,
.lg-root [class*="session-strip"],
.lg-root [class*="module-strip"],
.lg-root [class*="lesson-strip"]{
  display: flex !important;
  gap: 10px !important;
  overflow-x: auto !important;
  scroll-snap-type: x proximity !important;
  padding: 12px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.82) !important;
  box-shadow: 0 14px 40px rgba(15,23,42,.08) !important;
  backdrop-filter: blur(10px) !important;
}

.lg-root .session-strip > *,
.lg-root .module-strip > *,
.lg-root .lesson-strip > *,
.lg-root .lg-session-strip > *,
.lg-root .lg-module-strip > *,
.lg-root [class*="session-strip"] > *,
.lg-root [class*="module-strip"] > *,
.lg-root [class*="lesson-strip"] > *{
  flex: 0 0 auto !important;
  min-width: 210px !important;
  max-width: 260px !important;
  scroll-snap-align: start !important;
}

/* If the lesson reader is rendered as a grid, make the middle column breathe. */
.lg-root .lesson-layout,
.lg-root .session-layout,
.lg-root .reader-layout,
.lg-root [class*="lesson-layout"],
.lg-root [class*="session-layout"],
.lg-root [class*="reader-layout"]{
  grid-template-columns: minmax(180px, 240px) minmax(560px, 1fr) minmax(240px, 300px) !important;
  column-gap: 22px !important;
}

/* Right rail should not crush lesson text on medium screens */
@media (max-width: 1280px){
  .lg-root .rail-r{display:none !important;}
  .lg-root main,
  .lg-mode-app main{max-width: calc(100vw - 300px) !important;}
}
@media (max-width: 900px){
  .lg-root main,
  .lg-mode-app main{max-width: 100% !important;}
  .lg-root .lesson-content,
  .lg-root .session-content,
  .lg-root .lg-lesson-content,
  .lg-root .growth-content,
  .lg-root [class*="lesson-content"],
  .lg-root [class*="session-content"]{padding:22px !important;}
}

/* Make certificate empty state less massive. */
.lg-root .lg-empty{
  max-width: 520px !important;
}