/* Fullscreen uses the existing responsive workspace; safe insets protect controls in either orientation. */
.learner-name { display:block; font-size:12px; font-weight:800; color:var(--purple); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.greeting h1 { overflow-wrap:anywhere; }
.app-layout { min-height:100dvh; padding-top:env(safe-area-inset-top); padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
.sidebar { left:env(safe-area-inset-left); padding-bottom:max(20px,env(safe-area-inset-bottom)); }
.main-shell { padding-bottom:max(35px,env(safe-area-inset-bottom)); }
.top-actions>.fullscreen-button { display:grid; flex-shrink:0; }
.fullscreen-button { min-width:44px; min-height:44px; }
.fullscreen-button:disabled { opacity:.6; }
.lesson-header-right { min-width:0; }
.lesson-header-tools { display:contents; }
.lesson-workspace { padding-left:max(clamp(16px,3vw,48px),env(safe-area-inset-left)); padding-right:max(clamp(16px,3vw,48px),env(safe-area-inset-right)); }
.lesson-footer { padding-left:max(12px,env(safe-area-inset-left)); padding-right:max(12px,env(safe-area-inset-right)); padding-bottom:max(10px,env(safe-area-inset-bottom)); }
.finish-page { padding-top:max(28px,env(safe-area-inset-top)); padding-right:max(25px,env(safe-area-inset-right)); padding-bottom:max(28px,env(safe-area-inset-bottom)); padding-left:max(25px,env(safe-area-inset-left)); }
.modal-backdrop { --dialog-inset:20px; padding:max(var(--dialog-inset),env(safe-area-inset-top)) max(var(--dialog-inset),env(safe-area-inset-right)) max(var(--dialog-inset),env(safe-area-inset-bottom)) max(var(--dialog-inset),env(safe-area-inset-left)); }
.modal { max-height:min(100%,calc(100dvh - max(var(--dialog-inset),env(safe-area-inset-top)) - max(var(--dialog-inset),env(safe-area-inset-bottom)))); }
@media (max-width:1000px) {
  .lesson-workspace { padding-left:max(18px,env(safe-area-inset-left)); padding-right:max(18px,env(safe-area-inset-right)); }
}
@media (max-width:680px) {
  .app-layout { --navigation-inset:calc(78px + env(safe-area-inset-bottom)); padding-bottom:var(--navigation-inset); }
  .sidebar { left:0; padding:5px max(12px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
  .main-shell { padding-left:18px; padding-right:18px; }
  .lesson-header { grid-template-columns:44px minmax(0,1fr); }
  .lesson-header-tools { display:flex; grid-column:1/-1; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:6px; }
  .lesson-header-tools>.music-player { margin-right:auto; }
  .lesson-header-right { flex-wrap:nowrap; gap:6px; }
  .lesson-header-right .icon-button { width:44px; height:44px; }
  .lesson-workspace { padding-left:max(12px,env(safe-area-inset-left)); padding-right:max(12px,env(safe-area-inset-right)); }
  .finish-page { padding: max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left)); }
  .modal-backdrop { --dialog-inset:14px; }
}
@media print { .fullscreen-button { display:none!important; } }