.course-focus{position:fixed;inset:var(--course-focus-top,0px) 0 0 var(--course-focus-left,0px);z-index:90;display:flex;flex-direction:column;background:var(--surface);color:var(--ink);min-width:0}
.course-focus-header{position:relative;z-index:40;display:flex;align-items:center;gap:12px;min-height:60px;flex:none;padding:8px 68px 8px 16px;border-bottom:1px solid var(--line)}
.course-focus-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1rem}
.course-focus-summary{flex:none}
.course-focus-status{max-width:240px;margin:0;font-size:.75rem}
.course-focus-status:empty{display:none}
.course-focus-body{flex:1;min-height:0;overflow:auto;padding:0 16px 16px 0}
.course-focus-body:has(>.course-workspace){overscroll-behavior:contain}
@media(min-width:901px){
 /* The directory and the step are sibling scroll regions. A viewport-height
    directory must never add its own height to the outer body's bottom pad. */
 .course-focus-body:has(>.course-workspace){overflow:hidden;padding-bottom:0}
 .course-focus-body>.course-workspace{height:100%;min-height:0;grid-template-rows:minmax(0,1fr);--student-directory-height:100%}
 .course-focus .course-workspace.student-sidebar>.app-sidebar.course-outline-host{top:0}
 .course-focus .course-workspace-main{height:100%;min-height:0;overflow:auto;overscroll-behavior:contain;padding-bottom:16px}
}
.course-mode{position:absolute;top:max(8px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:2}
.course-mode-panel{width:min(224px,calc(100vw - 24px))}
.course-mode-panel>.ui-action{display:flex;width:100%;justify-content:flex-start}
.course-mode-panel>.ui-action[aria-current=true]{background:var(--context-selected-soft)}
.course-focus-body>.ll-toolbar{margin-block:8px}
.course-outline-header-trigger.ui-action{display:none}
@media(max-width:900px){
 .course-focus .course-workspace-body>h3{margin-inline:12px}
 .course-focus .course-workspace-body>.ll-toolbar{padding-inline:12px}
 .course-focus .course-workspace-steps{padding-inline:12px}
 .course-focus:has(.course-outline-header-trigger) .course-focus-header{padding-right:108px}
 .course-focus:has(.course-settings-trigger):has(.course-outline-header-trigger) .course-focus-header{padding-right:156px}
 .course-outline-header-trigger.ui-action{display:inline-flex;position:absolute;top:max(8px,env(safe-area-inset-top));right:max(60px,calc(env(safe-area-inset-right) + 48px));margin:0}
 .course-focus:has(.course-settings-trigger) .course-outline-header-trigger{right:max(108px,calc(env(safe-area-inset-right) + 96px))}
 .course-focus:not(:has(.course-mode)):has(.course-outline-header-trigger) .course-focus-header{padding-right:60px}
 .course-focus:not(:has(.course-mode)) .course-outline-header-trigger{right:max(12px,env(safe-area-inset-right))}
 /* Reserve the extra action in the title row only. Summary rows retain their
    established width and wrapping, rather than inheriting extra right padding. */
 .course-focus-extra-action .course-focus-title{margin-right:48px}
 .course-focus-extra-action .course-outline-header-trigger{right:max(108px,calc(env(safe-area-inset-right) + 96px))}
}
@media(max-width:700px){
 .course-focus-header{gap:8px;flex-wrap:wrap;padding:6px 60px 6px 8px;min-height:60px}
 .course-focus-title{font-size:.9rem}
 .course-focus-summary{flex-basis:100%;padding-left:4px}
 .course-focus-status{max-width:100%;flex-basis:100%}
 .course-focus-body{padding:0 8px 8px 0}
 .course-focus .course-workspace-main{padding-left:8px}
}