.online-connection{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:14px;padding:14px;border:1px solid #d8e4ee;border-radius:14px;background:#f5f9fd;min-width:0}.online-heading{display:flex;align-items:center;gap:9px}.online-heading img{object-fit:contain;border-radius:5px}.online-connection p{flex-basis:100%;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px}.online-join{display:inline-flex;gap:7px;align-items:center;padding:10px 15px;border-radius:10px;background:#225bd4;color:#fff!important;font-weight:600;text-decoration:none}.online-copy{padding:8px 10px!important;background:transparent!important;border:1px solid #bacbe2!important;border-radius:9px;color:#204d91!important;font-size:13px;cursor:pointer}.online-join:focus-visible,.online-copy:focus-visible{outline:3px solid #225bd4;outline-offset:3px}.online-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.online-today{margin-bottom:20px;padding:18px;border:1px solid #bed4ef;border-radius:18px;background:#f8fbff}.online-today h2{margin:0 0 12px}.online-today[hidden]{display:none}.online-today .lesson-item{background:#fff}.online-fields{display:grid;gap:14px;margin-top:16px}.online-switch{display:flex!important;align-items:center;gap:10px;cursor:pointer}.online-switch input{position:absolute;opacity:0;width:1px!important;height:1px!important}.online-switch i{position:relative;flex:0 0 40px;width:40px;height:24px;background:#9aa9bc;border-radius:20px;transition:background .15s}.online-switch i:after{content:'';position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .15s}.online-switch input:checked+i{background:#2563eb}.online-switch input:checked+i:after{transform:translateX(16px)}.online-switch input:focus-visible+i{outline:3px solid #1d4ed8;outline-offset:3px}.online-switch input:disabled+i{opacity:.5}.online-fields[hidden]{display:none}.online-fields small{color:#536278}.online-origin{margin:12px 0 0;color:#536278;font-size:13px}.online-error{color:#b42318}.online-tools{display:flex;flex-wrap:wrap;gap:8px}.online-field{display:grid;gap:6px}.online-field input,.online-field textarea{box-sizing:border-box;max-width:100%;width:100%}@media(max-width:500px){.online-connection{padding:12px;gap:10px}.online-heading{flex-basis:100%}.online-today{padding:12px}.online-join,.online-copy{flex-grow:1;justify-content:center}}
.online-field[hidden]{display:none}
.wsl label.online-switch{display:flex;flex-direction:row;align-items:center;gap:10px;min-height:44px;position:relative}.wsl .online-switch i{flex:0 0 40px;width:40px;height:24px;min-height:24px;max-height:24px;border-radius:20px}.wsl .online-field input{width:100%;padding:11px 12px;border:1px solid #cdd7e5;border-radius:12px;background:#fbfcfe;color:#182230;font:inherit;font-weight:500}.wsl .online-field[hidden]{display:none}.wsl .online-fields small{font-weight:400}.wsl .online-tools button{font-size:13px}.wsl .online-connection{font-weight:400}.wsl .online-connection .online-heading{font-weight:600}@media(prefers-reduced-motion:reduce){.online-switch i,.online-switch i:after{transition:none}}
/* Compact lesson connection controls. */
.wsl [data-online-editor]{padding:12px 16px}.wsl [data-online-editor].online-editor-off{padding:6px 16px}.online-editor-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px}.online-editor-bar .online-switch{grid-column:1;grid-row:1;min-width:0;margin:0}.online-editor-bar .online-switch span{min-width:0;overflow-wrap:anywhere}.online-editor-bar [data-online-toggle]{grid-column:2;grid-row:1}.online-editor-bar [data-online-quick]{grid-column:1 / -1;grid-row:2}.online-editor-bar [data-online-quick]:empty{display:none}.wsl button.online-expand{display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;min-width:40px;margin-left:auto;padding:0;line-height:1;border:0;background:transparent}.wsl button.online-expand:hover{background:transparent;color:#2563eb}.online-expand svg{display:block;flex-shrink:0}.online-expand[aria-expanded="true"] svg{transform:rotate(180deg)}.online-editor-bar .online-join{padding:8px 12px;font-size:14px}.online-join img,.online-call-note img{width:22px;height:22px;object-fit:contain;border-radius:4px;flex-shrink:0}.online-join img{background:#fff}.online-call-note{display:inline-flex;align-items:center;gap:8px;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}.lesson-online-action{margin-top:10px}.lesson-online-action:empty{display:none}.online-lesson-status{color:#245d46!important;background:#e5f2ec!important}.wsl [data-online-details][hidden],.wsl [data-online-toggle][hidden]{display:none!important}.online-expand:focus-visible{outline:3px solid #2563eb;outline-offset:2px}

.online-connection-compact{gap:10px 14px;margin-top:0;padding:10px 12px}.online-connection-compact .online-heading{min-width:0;flex-shrink:1}.online-connection-compact .online-heading img{flex-shrink:0}.online-connection-compact .online-heading strong{overflow-wrap:anywhere}.online-editor-bar [data-online-quick]{min-width:0;max-width:100%}.online-editor-bar .online-connection-compact{padding:0;border:0;background:transparent}.online-connection-compact .online-join{flex-shrink:0}@media(max-width:500px){.online-connection-compact .online-heading{flex-basis:auto}.online-connection-compact .online-join{flex-grow:0}}

/* Use the editor's available width, including when the lesson has a sidebar. */
.wsl [data-online-editor]{container:online-editor / inline-size}
@container online-editor (min-width:640px){
  .online-editor-bar{grid-template-columns:minmax(220px,1fr) minmax(0,auto) 40px}
  .online-editor-bar [data-online-quick]{grid-column:2;grid-row:1}
  .online-editor-bar [data-online-toggle]{grid-column:3;grid-row:1}
}