/* Explicit lesson layout: selected content must never hide below a long path. */
.learn-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.learn-layout > * { min-width: 0; }
#lesson-picker { border: 3px solid #bae6fd; border-radius: 1.5rem; background: #f5fbff; overflow: hidden; }
#lesson-picker > summary { padding: 1rem; min-height: 52px; cursor: pointer; font-weight: 900; color: #075985; background: #e0f2fe; }
#lesson-picker > summary:focus-visible, .learn-back:focus-visible, #lesson-list button:focus-visible { outline: 3px solid #7c3aed; outline-offset: -3px; }
#lesson-picker .learn-path-info { padding: 1rem; }
#lesson-list { padding: 0 .75rem .75rem; max-height: min(52vh, 480px); overflow-y: auto; overscroll-behavior-y: contain; scroll-padding: 8px; }
#lesson-list button { min-height: 64px; overflow-wrap: anywhere; }
#lesson-panel { scroll-margin-top: 90px; min-width: 0; }
#lesson-panel h2 { overflow-wrap: anywhere; }
#lesson-panel h2:focus { outline: none; }
#lesson-panel h2:focus-visible { outline: 3px solid #7c3aed; outline-offset: 4px; border-radius: 8px; }
.learn-back { display: block; width: 100%; min-height: 48px; text-align: left; padding: .75rem 1.25rem; color: #075985; background: #f0f9ff; border-bottom: 2px solid #e0f2fe; font-weight: 900; }
@media (min-width: 1024px) { .learn-layout { grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); } }
@media (max-width: 1023px) { #lesson-picker .learn-path-info { display: none; } #lesson-list { overscroll-behavior-y: auto; } }
@media (max-width: 640px) { #lesson-panel { scroll-margin-top: 76px; } #lesson-panel .flash-card { height: auto; } }
@media (prefers-reduced-motion: reduce) { .learn-layout * { scroll-behavior: auto !important; } }

@media (max-width: 1023px) and (max-height: 450px) {
  #lesson-picker .learn-path-info { display: none; }
  #lesson-picker > summary { min-height: 44px; padding: .5rem .75rem; font-size: .9rem; }
  #lesson-list { max-height: 120px; max-height: calc(100svh - 190px); min-height: 96px; }
}

@media (max-width: 1023px) and (max-height: 450px) {
  #lesson-panel .flash-card { min-height: 160px; }
  #lesson-panel .flash-inner { height: 160px; }
  #lesson-panel .flash-face { padding: 12px; }
  #lesson-panel .flash-face > div:last-child { font-size: 1.15rem; line-height: 1.4; overflow-wrap: anywhere; }
}