:root{--navy:#17233a;--accent:#2f7f8f;--bg:#f5f7fa;--panel:#fff;--line:#dbe2ea;--text:#1d2733;--muted:#667085;--danger:#b42318} *{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;color:var(--text);background:var(--bg);overflow:hidden}button,input,select{font:inherit}button{touch-action:manipulation}#app{height:100%;display:flex;flex-direction:column} header{height:54px;background:var(--navy);color:#fff;display:flex;align-items:center;gap:9px;padding:0 12px;flex:none;z-index:20}.brand{font-weight:700;white-space:nowrap}.title{min-width:120px;max-width:320px;flex:1;background:#ffffff12;border:1px solid #ffffff26;color:#fff;border-radius:7px;padding:7px 9px;outline:none}.status{font-size:12px;color:#cbd5e1;white-space:nowrap}.topbtn{background:#ffffff12;color:#fff;border:1px solid #ffffff24;border-radius:7px;padding:7px 9px;cursor:pointer;white-space:nowrap}.topbtn:hover{background:#ffffff1d}.topbtn:disabled{opacity:.45;cursor:not-allowed} .workspace{flex:1;display:flex;min-height:0;position:relative}.toolbar{width:66px;background:var(--panel);border-right:1px solid var(--line);padding:8px 7px;display:flex;flex-direction:column;gap:5px;z-index:8;overflow:auto}.tool{min-height:45px;border:1px solid transparent;background:transparent;border-radius:9px;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;position:relative;color:#344054}.tool:hover{background:#f0f4f8}.tool.active{background:#e9f3f5;border-color:#b8d6dc;color:#145c68}.tool span{position:fixed;margin-left:130px;background:#111827;color:#fff;padding:5px 7px;border-radius:5px;font-size:12px;opacity:0;pointer-events:none;white-space:nowrap;z-index:30}.tool:hover span{opacity:1} .main{flex:1;min-width:0;position:relative;background:#eef2f6}.options{position:absolute;left:12px;top:12px;z-index:7;background:#fff;border:1px solid var(--line);box-shadow:0 8px 24px #00000014;border-radius:10px;padding:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;max-width:calc(100% - 150px)}.options:empty{display:none}.options label,.hint{font-size:12px;color:var(--muted)}.options input[type=color]{width:34px;height:30px;border:0;background:none;padding:0}.options input[type=range]{width:110px}.options button,.pagesToggle button,.zoom button,.pages button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 10px;cursor:pointer}.options button:hover,.pagesToggle button:hover,.zoom button:hover{background:#f8fafc}.options .danger{color:var(--danger)} .pagesToggle{position:absolute;right:14px;top:14px;z-index:7}.pagesToggle button{box-shadow:0 4px 14px #0000000d}.pages{position:absolute;right:12px;top:52px;bottom:62px;width:270px;z-index:9;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 28px #0000001c;padding:8px;display:none;overflow:auto}.pages.open{display:block}.pageHeader{display:flex;gap:6px;margin-bottom:8px;position:sticky;top:0;background:#fff;padding-bottom:4px;z-index:2}.pageHeader button{flex:1}.pageHeader select{max-width:115px;border:1px solid var(--line);border-radius:8px;padding:7px;background:#fff}.pageitem{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:5px;align-items:center;padding:6px;border-radius:8px;border:1px solid transparent;margin-bottom:6px;cursor:pointer}.pageitem.active{background:#edf6f7;border-color:#c3dfe4}.pageNum{width:26px;height:26px;border-radius:7px;background:#f2f4f7;display:grid;place-items:center;font-size:12px;color:#667085}.pageitem input{width:100%;min-width:0;border:0;background:transparent;outline:none;padding:5px}.pageActions{display:flex;gap:1px}.pageActions button{padding:5px 6px;border:0;background:transparent;color:#667085}.pageActions button:hover{background:#f2f4f7}.pageActions .delete:hover{color:var(--danger);background:#fef3f2} #canvasWrap{position:absolute;inset:0;touch-action:none;overscroll-behavior:none;user-select:none;-webkit-user-select:none;outline:none}canvas{position:absolute;inset:0;width:100%;height:100%;display:block;background:#fff;touch-action:none}#dropHint{position:absolute;inset:18px;border:2px dashed #2f7f8f80;background:#eaf6f888;border-radius:18px;display:none;place-items:center;text-align:center;padding:24px;font-weight:650;color:#145c68;pointer-events:none;z-index:12}#canvasWrap.dragging #dropHint{display:grid} .zoom{position:absolute;right:14px;bottom:14px;z-index:7;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 20px #00000014;padding:6px;display:flex;gap:6px;align-items:center}.zoom .pct{min-width:56px;text-align:center;font-size:13px}.footer{position:absolute;left:18px;bottom:16px;z-index:7;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 10px;font-size:12px;color:var(--muted);box-shadow:0 4px 14px #0000000d}.exitPresent{display:none;position:absolute;right:14px;top:14px;z-index:15;background:#17233a;color:#fff;border:0;border-radius:9px;padding:9px 12px;box-shadow:0 6px 20px #0003;cursor:pointer}#bootMsg{padding:18px;color:#667085} body.presenting header{display:none}body.presenting .workspace{height:100%}body.presenting .pagesToggle,body.presenting .pages,body.presenting .footer,body.presenting .teacherBtn{display:none!important}body.presenting .exitPresent{display:block}body.presenting .toolbar{width:58px;background:#ffffffed}body.presenting .options{left:8px;top:8px}body.presenting .zoom{bottom:10px} @media(max-width:980px){header .teacherBtn{display:none}.topbtn{font-size:12px}.brand{font-size:14px}.status{display:none}} @media(max-width:720px){header{height:50px;padding:0 8px}.brand{font-size:13px}.topbtn{display:none}.title{font-size:13px}.toolbar{position:absolute;left:0;right:0;bottom:0;top:auto;width:auto;height:64px;flex-direction:row;border-right:0;border-top:1px solid var(--line);padding:6px;overflow-x:auto}.tool{min-width:46px;height:46px}.tool span{display:none}.main{padding-bottom:64px}.options{left:8px;right:74px;top:8px;max-width:none;overflow:auto;flex-wrap:nowrap}.pagesToggle{right:8px;top:8px}.pages{right:8px;top:48px;bottom:78px;width:min(290px,calc(100% - 16px))}.zoom{right:8px;bottom:76px}.footer{left:8px;bottom:78px}.zoom button:nth-child(-n+2){display:none}body.presenting .toolbar{height:60px;width:auto;left:0;right:0;bottom:0;top:auto;flex-direction:row}body.presenting .zoom{bottom:68px}body.presenting .options{right:8px}} /* v0.3 — refined vector tool icons */ .tool svg{width:23px;height:23px;display:block;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.tool .toolFill{fill:currentColor;stroke:none}.tool.active svg{stroke-width:2}.tool[aria-pressed="true"]{box-shadow:inset 3px 0 0 var(--accent)} /* v0.3 — classroom controls */ .teacherPanel{position:absolute;top:10px;right:10px;bottom:10px;width:min(440px,calc(100% - 20px));z-index:18;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 60px #1018282b;display:none;flex-direction:column;overflow:hidden}.teacherPanel.open{display:flex}.teacherPanelHead{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 12px;border-bottom:1px solid var(--line)}.teacherPanelSub{font-size:12px;color:var(--muted);margin-top:2px}.iconBtn{width:34px;height:34px;border:1px solid var(--line);background:#fff;border-radius:8px;display:grid;place-items:center;cursor:pointer;font-size:20px}.teacherStartView{padding:20px}.teacherStartView p{color:var(--muted);line-height:1.5;margin:0 0 16px}.primaryAction{border:0;background:var(--accent);color:#fff;border-radius:9px;padding:10px 14px;font-weight:700;cursor:pointer}.primaryAction:disabled{opacity:.55;cursor:wait}.teacherLiveView{padding:12px;overflow:auto}.sessionCodeCard{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #b8d6dc;background:#edf7f8;border-radius:12px;padding:12px;margin-bottom:12px}.sessionCodeCard span{display:block;color:#52606d;font-size:11px;text-transform:uppercase;letter-spacing:.06em}.sessionCodeCard strong{font-size:26px;letter-spacing:.12em;color:#145c68}.sessionCodeCard button{border:1px solid #aacdd3;background:#fff;border-radius:8px;padding:8px 10px;cursor:pointer}.teacherControlGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.controlAction{min-height:76px;border:1px solid var(--line);background:#fff;border-radius:11px;padding:9px;text-align:left;display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;column-gap:6px;cursor:pointer}.controlAction:hover{background:#f8fafc;border-color:#c8d2dd}.controlIcon{grid-row:1/3;align-self:center;font-size:20px}.controlAction b{font-size:13px}.controlAction small{font-size:11px;color:var(--muted)}.dangerControl{color:var(--danger)}.studentSectionHead{display:flex;justify-content:space-between;align-items:center;margin:16px 2px 8px}.studentSectionHead span{font-size:12px;color:var(--muted)}.studentGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.studentCard{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;cursor:pointer}.studentCard:hover{border-color:#aebdca}.studentThumb{display:block;width:100%;height:92px;background:#f8fafc}.studentMeta{display:flex;justify-content:space-between;gap:6px;align-items:center;padding:7px 8px}.studentName{font-size:12px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studentStatus{font-size:10px;color:#667085;text-transform:capitalize}.studentStatus.submitted{color:#067647;font-weight:700}.studentStatus.offline{color:#b54708}.emptyStudents{grid-column:1/-1;color:var(--muted);font-size:13px;padding:18px;text-align:center;border:1px dashed var(--line);border-radius:10px}.joinOverlay,.previewOverlay{position:fixed;inset:0;z-index:50;background:#101828b8;display:grid;place-items:center;padding:18px}.joinCard{width:min(380px,100%);background:#fff;border-radius:16px;padding:24px;box-shadow:0 24px 80px #0005}.joinLogo{font-size:13px;font-weight:800;color:#145c68}.joinCard h2{margin:8px 0 4px}.joinCodeLine{font-size:13px;color:var(--muted);margin-bottom:18px}.joinCodeLine strong{color:var(--text);letter-spacing:.1em}.joinCard label{display:block;font-size:12px;font-weight:650;margin-bottom:6px}.joinCard input{width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 11px;margin-bottom:12px;outline:none}.joinCard input:focus{border-color:#6ca9b4;box-shadow:0 0 0 3px #2f7f8f1a}.joinCard .primaryAction{width:100%}.joinError{min-height:18px;color:var(--danger);font-size:12px;margin-top:8px}.previewCard{width:min(900px,96vw);height:min(680px,90vh);background:#fff;border-radius:14px;box-shadow:0 24px 80px #0006;display:flex;flex-direction:column;overflow:hidden}.previewHead{height:50px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}#previewCanvas{flex:1;min-height:0;width:100%;background:#fff}.classroomStudent header .teacherBtn,.classroomStudent header #clearAnnotationsBtn,.classroomStudent header #printBtn{display:none}.classroomStudent .brand:after{content:' · Student';font-weight:500;color:#cbd5e1}.classroomLocked #canvasWrap:not([data-tool="pan"]){cursor:not-allowed!important}.classroomLocked .options:before{content:'Teacher locked your board';font-size:12px;font-weight:700;color:#b54708;padding:2px 4px}.studentSubmitBtn{background:#0b7a53;border-color:#0b7a53}.studentSubmitBtn:hover{background:#096a48} @media(max-width:720px){.teacherPanel{top:6px;right:6px;bottom:70px;width:calc(100% - 12px)}.studentGrid{grid-template-columns:1fr}.classroomStudent .studentSubmitBtn{display:block!important}.joinCard{padding:20px}} /* v0.3.1 startup reliability */ [hidden]{display:none!important} #bootMsg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:40;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 18px;box-shadow:0 10px 32px #10182824;color:#475467;font-size:13px;max-width:min(520px,calc(100% - 28px));text-align:center} #bootMsg.bootError{border-color:#fecdca;background:#fff6f5;color:#912018;text-align:left;white-space:normal;line-height:1.45} /* v0.3.2 — clearer active tools, monitoring, and grading */ #canvasWrap[data-tool="select"]{cursor:default} #canvasWrap[data-tool="text"]{cursor:text} #canvasWrap[data-tool="rect"],#canvasWrap[data-tool="ellipse"],#canvasWrap[data-tool="line"],#canvasWrap[data-tool="arrow"]{cursor:crosshair} #canvasWrap[data-tool="pan"]{cursor:grab} .classroomLocked #canvasWrap:not([data-tool="pan"]){cursor:not-allowed!important} .tool.active{background:#dff1f3;border-color:#79b5bf;color:#0d5a67;box-shadow:inset 3px 0 0 var(--accent),0 0 0 1px #ffffff inset} .tool.active:after{content:'';position:absolute;right:5px;top:5px;width:7px;height:7px;border-radius:50%;background:#15788a;box-shadow:0 0 0 2px #fff} .teacherPanel.monitorMode{width:min(920px,calc(100% - 20px))} .teacherPanel.monitorMode .studentGrid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .teacherPanel.monitorMode .studentThumb{height:140px} .controlAction.activeControl{background:#edf7f8;border-color:#91c5ce;color:#145c68} .studentCard{transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease} .studentCard:hover{box-shadow:0 6px 20px #10182818;transform:translateY(-1px)} .studentThumb{height:112px} .studentMeta{align-items:flex-start} .studentMetaMain{min-width:0;flex:1}.studentMetaSide{text-align:right;flex:none} .studentGrade{font-size:10px;color:#98a2b3;margin-top:2px}.studentGrade.graded{color:#067647;font-weight:700} .previewHint{font-size:9px;color:#2f7f8f;font-weight:700;margin-top:3px;white-space:nowrap} .previewCard{width:min(1100px,97vw);height:min(760px,92vh)} .previewHead{height:58px;flex:none}.previewSub{font-size:11px;color:var(--muted);margin-top:2px;text-transform:capitalize} .previewBody{display:grid;grid-template-columns:minmax(0,1fr) 300px;flex:1;min-height:0} .previewCanvasPane{min-width:0;min-height:0;background:#f2f4f7;padding:10px;display:flex} #previewCanvas{display:block;width:100%;height:100%;min-height:0;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 2px 8px #10182812} .gradingPanel{border-left:1px solid var(--line);padding:16px;overflow:auto;background:#fff} .gradeTitle{font-size:14px;font-weight:750;margin-bottom:14px}.gradeRow{display:grid;grid-template-columns:1fr auto 1fr;gap:7px;align-items:end}.gradeRow label,.feedbackLabel{font-size:11px;font-weight:650;color:#475467;display:block}.gradeRow input{display:block;width:100%;margin-top:5px;border:1px solid var(--line);border-radius:8px;padding:9px 8px;font:inherit;color:var(--text);outline:none}.gradeRow input:focus,.feedbackLabel textarea:focus{border-color:#6ca9b4;box-shadow:0 0 0 3px #2f7f8f1a}.gradeSlash{padding-bottom:10px;color:#98a2b3;font-weight:700}.gradePercent{font-size:22px;font-weight:800;color:#145c68;margin:12px 0 16px}.feedbackLabel textarea{display:block;width:100%;resize:vertical;min-height:130px;margin-top:6px;border:1px solid var(--line);border-radius:8px;padding:9px;font:inherit;color:var(--text);outline:none;line-height:1.4}.gradeSave{width:100%;margin-top:12px}.gradeSaveStatus{min-height:18px;font-size:11px;color:#067647;font-weight:650;margin-top:7px}.gradeNote{font-size:10px;line-height:1.45;color:#98a2b3;border-top:1px solid var(--line);padding-top:10px;margin-top:10px} @media(max-width:820px){.previewBody{grid-template-columns:1fr}.previewCanvasPane{min-height:50vh}.gradingPanel{border-left:0;border-top:1px solid var(--line)}.previewCard{height:94vh;overflow:auto}.teacherPanel.monitorMode{width:calc(100% - 12px)}} /* Canvas elements outside the main whiteboard must not inherit the board's absolute positioning. */ .studentThumb,#previewCanvas{position:relative;inset:auto} /* v0.3.3 page deployment controls */ .activityCard{display:grid;grid-template-columns:1fr 1fr;gap:8px;border:1px solid #bfd9de;background:#f2f9fa;border-radius:12px;padding:10px 12px;margin-bottom:10px}.activityCard span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.055em;color:#667085;margin-bottom:3px}.activityCard strong{display:block;font-size:13px;color:#183b45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activityDeployState{text-align:right}.activityDeployState strong.open{color:#067647}.activityDeployState strong.locked{color:#b54708}.activityDeployState strong.collected{color:#175cd3}.pageControlGrid .deployControl{grid-column:1/-1;background:#f0f9fa;border-color:#9ccbd3}.pageControlGrid .deployControl:hover{background:#e4f5f7}.controlAction:disabled{opacity:.45;cursor:not-allowed;background:#f8fafc}.controlAction.activeLocked{border-color:#f0b66a;background:#fff8ed}.controlAction.activeOpen{border-color:#7cc9ad;background:#f0fdf8}.studentActivityBanner{position:fixed;top:58px;left:50%;transform:translateX(-50%);z-index:25;background:#17233ae8;color:#fff;border-radius:0 0 10px 10px;padding:7px 14px;font-size:12px;box-shadow:0 6px 20px #10182828;pointer-events:none}.studentActivityBanner.locked{background:#9a4b08}.studentActivityBanner.collected{background:#175cd3}@media(max-width:600px){.activityCard{grid-template-columns:1fr}.activityDeployState{text-align:left}.pageControlGrid{grid-template-columns:1fr}.pageControlGrid .deployControl{grid-column:auto}} /* ------------------------------------------------------------------ v0.4 Lesson pages + presentation + packet review ------------------------------------------------------------------ */ .lessonPageHeader{display:grid;grid-template-columns:auto minmax(120px,1fr) minmax(95px,.8fr);gap:6px;align-items:center} .lessonPageHeader #addPage{white-space:nowrap} .lessonPageHeader select{max-width:none!important;min-width:0} .lessonPageItem{grid-template-columns:30px minmax(0,1fr) auto!important;align-items:start!important} .pageIdentity{min-width:0;display:grid;gap:3px}.pageIdentity input{font-weight:650;padding-bottom:2px!important}.pageTypeSelect{width:100%;min-width:0;border:0;background:transparent;color:#667085;font-size:10px;padding:1px 4px;outline:none;cursor:pointer}.pageitem.active .pageTypeSelect{color:#2f7f8f} .presentationBar{display:none;position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:40;align-items:center;gap:7px;background:#17233af2;color:#fff;padding:7px 8px;border-radius:13px;box-shadow:0 12px 38px #10182845;max-width:calc(100vw - 28px)} body.presenting .presentationBar{display:flex}.presentNavBtn,.presentAction{border:1px solid #ffffff2b;background:#ffffff12;color:#fff;border-radius:8px;height:38px;padding:0 11px;cursor:pointer;font-weight:650}.presentNavBtn{width:40px;font-size:20px;padding:0}.presentNavBtn:disabled,.presentAction:disabled{opacity:.35;cursor:not-allowed}.presentAction:hover,.presentNavBtn:hover:not(:disabled){background:#ffffff20}.presentAction.deploy{background:#287d8c;border-color:#4a9dab}.presentPageInfo{display:grid;grid-template-columns:auto auto;column-gap:8px;min-width:150px;max-width:260px;padding:0 6px}.presentPageInfo strong{grid-column:1/-1;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.presentPageInfo span{font-size:9px;color:#cbd5e1;text-transform:uppercase;letter-spacing:.045em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.presentPageInfo small{text-align:right;color:#aab7c8;font-size:9px} body.presenting .exitPresent{top:10px;right:10px;bottom:auto} body.presenting .zoom{bottom:66px} .lessonCollect{border-color:#b8c7e8;background:#f5f7ff}.lessonCollect:hover{background:#edf1ff}.lessonProgress{margin:10px 2px 0;padding:8px 10px;border-radius:8px;background:#f8fafc;border:1px solid var(--line);font-size:11px;color:#667085} .studentPacketCount{font-size:9px;color:#667085;margin-top:2px}.studentGrade{font-size:10px;color:#667085;margin-top:2px}.studentGrade.graded{color:#067647;font-weight:700}.studentMetaMain{min-width:0}.studentMetaSide{text-align:right;flex:none} .packetNav{display:flex;align-items:center;gap:7px;margin-left:auto;margin-right:12px;min-width:260px;justify-content:center}.packetNav button{width:32px;height:32px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer}.packetNav button:disabled{opacity:.35;cursor:not-allowed}.packetNav>div{min-width:150px;max-width:250px;text-align:center;display:grid}.packetNav strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.packetNav span{font-size:9px;color:#667085;text-transform:uppercase;letter-spacing:.04em} .overallGradeBox{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}.overallGradeBox .gradeTitle{color:#183b45} @media(max-width:900px){.presentationBar{bottom:68px;gap:4px}.presentAction{font-size:10px;padding:0 7px}.presentPageInfo{min-width:110px;max-width:180px}.packetNav{min-width:180px;margin-right:4px}.packetNav>div{min-width:100px}.previewHead{gap:5px}} @media(max-width:650px){.lessonPageHeader{grid-template-columns:1fr 1fr}.lessonPageHeader #bgSel{grid-column:1/-1}.presentationBar{left:6px;right:6px;transform:none;max-width:none;overflow-x:auto;justify-content:flex-start}.presentPageInfo{min-width:130px}.presentAction{white-space:nowrap}.packetNav{order:3;position:absolute;left:8px;right:54px;top:57px;background:#fff;padding:5px;border:1px solid var(--line);border-radius:8px}.previewHead{padding-bottom:50px;height:104px!important;position:relative}.gradingPanel{padding-top:14px}} /* ------------------------------------------------------------------ v0.4.1 Clean workspace + direct text + resizable media ------------------------------------------------------------------ */ :root{--navy:#17233a;--accent:#2f7f8f;--accent-dark:#176373;--soft:#eef6f7;--shadow:0 12px 36px #10182818} header{height:60px;padding:0 12px 0 10px;gap:8px;box-shadow:0 1px 0 #ffffff12;z-index:30} .brandWrap{display:flex;align-items:center;gap:9px;min-width:180px;flex:none}.appMark{width:36px;height:36px;border-radius:9px;display:block;box-shadow:0 1px 0 #fff2}.brandText{display:grid;line-height:1.05}.brandText strong{font-size:14px;letter-spacing:-.01em}.brandText small{font-size:9px;color:#aeb9c8;margin-top:4px;letter-spacing:.03em;text-transform:uppercase}.title{max-width:360px;height:38px;background:#ffffff0d;border-color:#ffffff20;border-radius:9px;padding:0 11px}.title:focus{border-color:#6eb0bd;background:#ffffff16;box-shadow:0 0 0 3px #6eb0bd26}.status{font-size:11px;color:#9fb0c4;min-width:42px;text-align:center}.pageChip{height:28px;max-width:160px;border:1px solid #ffffff22;background:#ffffff0b;color:#cad4df;border-radius:999px;padding:0 9px;display:flex;align-items:center;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .topbtn{height:38px;padding:0 10px;display:flex;align-items:center;gap:7px;border-radius:9px;font-size:12px;font-weight:650}.topbtn svg,.moreMenu svg,.endSessionLink svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}.topbtn small{font-size:9px;color:#b9c5d2}.primaryTop{background:#287d8c;border-color:#4d96a4}.primaryTop:hover{background:#2f8999}.iconTop{width:38px;padding:0;justify-content:center}.moreWrap{position:relative;flex:none}.moreMenu{position:absolute;right:0;top:44px;width:218px;background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:0 14px 42px #10182826;padding:6px;z-index:50}.moreMenu button{width:100%;border:0;background:#fff;border-radius:8px;padding:9px 10px;display:flex;align-items:center;gap:9px;color:#344054;text-align:left;cursor:pointer;font-size:12px}.moreMenu button:hover{background:#f5f7fa}.moreMenu svg{width:17px;height:17px;color:#667085} .pages{top:12px;right:12px;bottom:62px;width:300px;border-radius:13px;box-shadow:var(--shadow)} .options{border-radius:12px;box-shadow:0 8px 24px #10182812;padding:7px 9px}.options .hint{max-width:370px;line-height:1.35} .toolbar{width:62px;padding:8px 6px;gap:4px}.tool{min-height:43px;border-radius:10px}.tool.active{background:#e5f3f5;border-color:#91c4cd;box-shadow:inset 3px 0 0 var(--accent)}.tool.active:after{display:none}.tool svg{width:22px;height:22px} .zoom{border-radius:12px;padding:5px;gap:4px}.zoom button{min-width:32px;height:32px;padding:0 7px}.footer{font-size:10px;padding:5px 9px;color:#7a8797} .textEditor{position:absolute;z-index:20;border:1.5px solid #287d8c;background:#ffffffed;color:#1d2733;border-radius:6px;padding:4px 6px;margin:0;outline:none;resize:none;overflow:hidden;line-height:1.28;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;font-weight:500;box-shadow:0 0 0 3px #2f7f8f18,0 4px 18px #10182814;transform-origin:top left;white-space:pre-wrap}.textEditor::placeholder{color:#98a2b3} .flowStrip{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;padding:9px 12px;border-bottom:1px solid var(--line);background:#fbfcfd}.flowStrip span{height:28px;border-radius:7px;display:grid;place-items:center;color:#98a2b3;font-size:9px;font-weight:700;white-space:nowrap}.flowStrip span.active{background:#e8f4f6;color:#145c68}.teacherPanel{width:min(460px,calc(100% - 20px));border-radius:16px;box-shadow:0 18px 58px #10182826}.teacherPanelHead{padding:13px 14px 11px}.teacherPanelHead strong{font-size:14px}.teacherLiveView{padding:12px 14px 16px}.sessionCodeCard{margin-bottom:10px}.activityCard{margin-bottom:13px}.controlSectionTitle{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:14px 2px 7px}.controlSectionTitle span{font-size:11px;font-weight:800;color:#344054;text-transform:uppercase;letter-spacing:.055em}.controlSectionTitle small{font-size:10px;color:#98a2b3}.teacherControlGrid{gap:7px}.controlAction{min-height:66px;grid-template-columns:28px 1fr;padding:8px 9px;border-radius:10px}.controlIcon{width:24px;height:24px;display:grid;place-items:center;color:#536577}.controlIcon svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}.controlAction b{font-size:12px}.controlAction small{font-size:10px;line-height:1.3}.pageControlGrid .deployControl{grid-column:1/-1;min-height:72px;background:#eef8f9;border-color:#a7d0d7}.reviewControlGrid .lessonCollect{grid-column:1/-1}.endSessionLink{margin:14px 0 0 auto;border:0;background:transparent;color:#9d3a31;padding:6px 4px;display:flex;align-items:center;gap:6px;font-size:11px;cursor:pointer}.endSessionLink:hover{color:#b42318;text-decoration:underline}.endSessionLink:disabled{opacity:.4;text-decoration:none;cursor:not-allowed}.lessonProgress{margin-top:8px;background:#fbfcfd} .presentationBar{border-radius:14px;padding:6px 7px;gap:5px}.presentAction{font-size:11px}.presentPageInfo{min-width:170px}.exitPresent{border-radius:10px} /* Selected images show their resize state in the option strip. */ .options #lockSel{color:#145c68}.options #deleteSel{margin-left:2px} @media(max-width:1120px){.brandWrap{min-width:auto}.brandText small{display:none}.pageChip{display:none}.title{max-width:270px}.topbtn span{display:none}.topbtn{width:38px;padding:0;justify-content:center}.topbtn small{display:none}.studentSubmitBtn{width:auto!important;padding:0 10px!important}.studentSubmitBtn{font-size:11px}.teacherBtn{display:flex!important}} @media(max-width:720px){header{height:54px;padding:0 7px;gap:5px}.appMark{width:34px;height:34px}.brandText{display:none}.brandWrap{min-width:34px}.title{min-width:80px;max-width:none;height:36px}.status{display:none}.topbtn{display:flex!important;width:36px;height:36px}.teacherBtn{display:flex!important}.moreMenu{position:fixed;right:8px;top:58px}.toolbar{height:62px}.pages{top:8px;right:8px;bottom:72px;width:min(310px,calc(100% - 16px))}.options{right:8px;max-width:calc(100% - 16px)}.footer{display:none}.flowStrip{padding:7px 9px}.flowStrip span{font-size:8px}.controlSectionTitle small{display:none}.teacherPanel{top:6px;right:6px;bottom:68px;width:calc(100% - 12px)}.presentationBar{bottom:65px}} @media(max-width:430px){.flowStrip{grid-template-columns:repeat(5,minmax(48px,1fr));overflow-x:auto}.flowStrip span{padding:0 4px}.teacherControlGrid{grid-template-columns:1fr}.pageControlGrid .deployControl,.reviewControlGrid .lessonCollect{grid-column:auto}} .joinLogo{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:#145c68}.joinLogo img{width:30px;height:30px;border-radius:8px} .pageActions button{width:28px;height:28px;padding:0;display:grid;place-items:center}.pageActions svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .classroomStudent header #presentBtn,.classroomStudent header #pagesBtn,.classroomStudent header .moreWrap,.classroomStudent header .pageChip{display:none!important} .zoom svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} /* v0.4.2 — presentation viewer, automatic student handoff, cleaner teacher controls */ .presentationViewer{position:fixed;left:14px;top:14px;bottom:70px;width:min(260px,calc(100vw - 28px));z-index:45;background:#fffffffa;border:1px solid #d8e0e8;border-radius:14px;box-shadow:0 18px 55px #10182838;display:none;flex-direction:column;overflow:hidden;color:#17233a} .presentationViewer.open{display:flex}.presentationViewerHead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-bottom:1px solid #e7ecf1}.presentationViewerHead>div{min-width:0}.presentationViewerHead strong{display:block;font-size:13px}.presentationViewerHead span{display:block;margin-top:2px;font-size:10px;color:#667085}.presentationViewerList{padding:9px;overflow:auto;display:grid;gap:8px}.viewerPage{width:100%;display:grid;grid-template-columns:96px 1fr;gap:9px;align-items:center;text-align:left;border:1px solid #e1e7ee;background:#fff;border-radius:10px;padding:7px;cursor:pointer;color:#17233a}.viewerPage:hover{background:#f8fbfc;border-color:#b9d5db}.viewerPage.active{border-color:#2f7f8f;box-shadow:0 0 0 2px #2f7f8f1c;background:#f1f9fa}.viewerPage canvas{width:96px;height:56px;border-radius:6px;background:#fff;border:1px solid #edf0f3}.viewerPage span{min-width:0}.viewerPage b{display:block;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.viewerPage small{display:block;margin-top:3px;font-size:9px;color:#667085;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.presentAction.viewer{background:#ffffff0d}.presentAction.viewer:hover{background:#ffffff22} body:not(.presenting) .presentationViewer{display:none!important} .classroomHero{margin-bottom:9px}.classroomHero>div{min-width:0}.classroomHero small{display:block;margin-top:4px;color:#52707a;font-size:10px;letter-spacing:0;text-transform:none}.classSummaryRow{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:0 0 10px}.classSummaryRow>div{border:1px solid var(--line);border-radius:10px;padding:8px 9px;background:#fafbfc}.classSummaryRow strong{display:block;font-size:17px;line-height:1;color:#183b45}.classSummaryRow span{display:block;margin-top:4px;font-size:9px;text-transform:uppercase;letter-spacing:.05em;color:#667085}.nowTeachingCard{border:1px solid #b9d8de;background:linear-gradient(180deg,#f4fbfc,#fff);border-radius:13px;padding:11px;margin-bottom:10px}.nowTeachingHead{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:9px}.nowTeachingHead span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.055em;color:#667085;margin-bottom:3px}.nowTeachingHead strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.studentViewState{text-align:right}.studentViewState strong.open{color:#067647}.studentViewState strong.locked{color:#b54708}.studentViewState strong.collected{color:#175cd3}.deployPrimary,.monitorPrimary,.lessonCollectClean{width:100%;border:0;border-radius:10px;display:grid;grid-template-columns:32px 1fr;gap:8px;align-items:center;text-align:left;cursor:pointer}.deployPrimary{background:#1f7280;color:#fff;padding:11px}.deployPrimary:hover{background:#195f6b}.deployPrimary:disabled{opacity:.45;cursor:not-allowed}.deployPrimary .controlIcon,.monitorPrimary .controlIcon,.lessonCollectClean .controlIcon{width:28px;height:28px;display:grid;place-items:center}.deployPrimary svg,.monitorPrimary svg,.lessonCollectClean svg,.activityQuickControls svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.deployPrimary b,.monitorPrimary b,.lessonCollectClean b{display:block;font-size:12px}.deployPrimary small,.monitorPrimary small,.lessonCollectClean small{display:block;font-size:9px;margin-top:2px;opacity:.8}.activityQuickControls{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}.activityQuickControls button{height:38px;border:1px solid #d6e0e5;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:5px;color:#27424a;font-size:10px;font-weight:700;cursor:pointer}.activityQuickControls button:hover{background:#f7fafb}.activityQuickControls button:disabled{opacity:.38;cursor:not-allowed}.activityQuickControls button.activeLocked{background:#fff7eb;border-color:#efb96d;color:#9a4b08}.activityQuickControls button.activeOpen{background:#effbf6;border-color:#89cdb4;color:#067647}.activityQuickControls svg{width:16px;height:16px}.teacherMainActions{display:grid;gap:7px;margin-bottom:10px}.monitorPrimary,.lessonCollectClean{border:1px solid var(--line);background:#fff;color:#17233a;padding:10px}.monitorPrimary:hover,.lessonCollectClean:hover{background:#f8fafc;border-color:#c5d2dc}.monitorPrimary{border-color:#b9d2d9}.lessonCollectClean{background:#fafbfc}.teacherPanel.monitorMode .nowTeachingCard,.teacherPanel.monitorMode .classSummaryRow,.teacherPanel.monitorMode .teacherMainActions .lessonCollectClean,.teacherPanel.monitorMode .sessionCodeCard{display:none}.teacherPanel.monitorMode .teacherMainActions{margin-bottom:8px}.teacherPanel.monitorMode .monitorPrimary{background:#17233a;color:#fff;border-color:#17233a} .studentNewActivity{position:fixed;left:50%;top:76px;transform:translate(-50%,-14px);z-index:70;background:#17233af2;color:#fff;border-radius:12px;padding:11px 15px;box-shadow:0 14px 40px #1018283d;opacity:0;pointer-events:none;transition:.2s ease;display:grid;gap:2px;text-align:center;min-width:220px}.studentNewActivity.show{opacity:1;transform:translate(-50%,0)}.studentNewActivity strong{font-size:12px}.studentNewActivity span{font-size:10px;color:#d8e3ea} @media(max-width:720px){.presentationViewer{left:6px;right:6px;top:6px;bottom:134px;width:auto}.viewerPage{grid-template-columns:82px 1fr}.viewerPage canvas{width:82px;height:48px}.classSummaryRow{gap:5px}.nowTeachingHead{grid-template-columns:1fr}.studentViewState{text-align:left}.activityQuickControls button span{display:none}.activityQuickControls button{height:42px}.studentNewActivity{top:58px;max-width:calc(100vw - 24px)}} /* v0.5 — guest/teacher access, compact footer, combined shapes, quick pages + database state */ [hidden]{display:none!important} .guestMode #presentBtn,.guestMode #teacherBtn,.guestMode .pageChip{display:none!important} .guestMode .pageTypeSelect,.guestMode #newPageType{display:none!important} .teacherMode #teacherSignInBtn{display:none!important} .classroomStudent #teacherSignInBtn,.classroomStudent #teacherAccountBtn{display:none!important} .signInBtn{border-color:#ffffff3a}.teacherAccountBtn{max-width:150px}.teacherAccountBtn span{overflow:hidden;text-overflow:ellipsis;max-width:90px} .boardFooter{position:absolute;left:10px;right:10px;bottom:8px;height:38px;z-index:8;display:grid;grid-template-columns:minmax(180px,1fr) auto minmax(180px,1fr);align-items:center;gap:10px;padding:5px 8px;background:#fffffff2;border:1px solid var(--line);border-radius:11px;box-shadow:0 5px 18px #10182814;backdrop-filter:blur(8px)} .footerStatus{display:flex;align-items:center;min-width:0;gap:7px;font-size:10px;color:#667085}.footerStatus #saveStatus{font-weight:750;color:#344054;white-space:nowrap}.footerStatus #localMsg{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.statusDot{width:7px;height:7px;border-radius:50%;background:#12b76a;flex:none}.quickPageNav{display:flex;align-items:center;gap:5px}.quickPageNav button{width:28px;height:28px;border:1px solid var(--line);border-radius:7px;background:#fff;color:#344054;font-size:18px;line-height:1;cursor:pointer}.quickPageNav button:disabled{opacity:.35;cursor:default}.quickPageNav select{height:28px;max-width:200px;border:1px solid var(--line);border-radius:7px;background:#fff;padding:0 8px;color:#344054;font-size:10px;font-weight:650}.footerBrand{justify-self:end;display:flex;align-items:center;gap:6px;white-space:nowrap;color:#344054}.footerBrand img{width:21px;height:21px;border-radius:5px}.footerBrand span{font-size:10px;font-weight:800}.footerBrand small{font-size:9px;color:#98a2b3}.zoom{bottom:54px}.pages{bottom:56px} body.presenting .boardFooter{display:none!important} .shapeMenu{position:fixed;z-index:80;width:212px;display:none;grid-template-columns:repeat(3,1fr);gap:5px;padding:7px;background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:0 12px 36px #1018282b}.shapeMenu.open{display:grid}.shapeMenu button{height:56px;border:1px solid transparent;border-radius:8px;background:#fff;color:#344054;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer}.shapeMenu button:hover{background:#f5f8fa}.shapeMenu button.active{background:#e9f3f5;border-color:#b8d6dc;color:#145c68}.shapeMenu svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.shapeMenu span{font-size:9px;font-weight:700} .authOverlay{position:fixed;inset:0;z-index:95;background:#101828b8;display:grid;place-items:center;padding:18px}.authCard{position:relative;width:min(410px,100%);background:#fff;border-radius:17px;padding:22px;box-shadow:0 24px 80px #1018284a}.authClose{position:absolute;right:12px;top:12px}.authBrand{display:flex;align-items:center;gap:10px;padding-right:40px}.authBrand img{width:42px;height:42px;border-radius:10px}.authBrand strong{display:block;font-size:15px;color:#17233a}.authBrand span{display:block;margin-top:2px;font-size:10px;color:#667085;text-transform:uppercase;letter-spacing:.07em}.authIntro{margin:15px 0;color:#667085;font-size:12px;line-height:1.5}.authForm{display:grid;gap:11px}.authForm label{display:grid;gap:5px;font-size:11px;font-weight:700;color:#344054}.authForm input{width:100%;height:40px;border:1px solid #d0d5dd;border-radius:8px;padding:0 10px;outline:none}.authForm input:focus{border-color:#2f7f8f;box-shadow:0 0 0 3px #2f7f8f18}#setupFields{display:grid;gap:11px}.authSignOut{margin-top:16px;border:1px solid #f3b5af;background:#fff;color:#b42318;border-radius:8px;padding:9px 12px;cursor:pointer} /* Notebook pages: soft blue ruled lines and a red margin are drawn by canvas. */ @media(max-width:900px){.boardFooter{grid-template-columns:1fr auto}.footerBrand{display:none}.quickPageNav select{max-width:150px}} @media(max-width:720px){.boardFooter{left:6px;right:6px;bottom:66px;height:36px;grid-template-columns:minmax(90px,1fr) auto;padding:4px 6px}.footerStatus #localMsg{display:none}.quickPageNav select{max-width:125px}.zoom{bottom:108px}.pages{bottom:108px}.teacherPanel{bottom:108px}.presentationBar{bottom:65px}.shapeMenu{bottom:68px!important;top:auto!important;left:8px!important;right:8px;width:auto;grid-template-columns:repeat(6,minmax(48px,1fr))}.shapeMenu button{height:52px}.shapeMenu span{display:none}.authCard{padding:18px}.teacherAccountBtn span,.signInBtn span{display:none!important}} @media(max-width:430px){.footerStatus #saveStatus{font-size:9px}.quickPageNav select{max-width:105px}.shapeMenu{grid-template-columns:repeat(3,1fr)}} .teacherPageQuick{margin-top:6px;width:100%;height:30px;border:1px solid #d7e2e7;border-radius:7px;background:#fff;padding:0 7px;color:#344054;font-size:10px;font-weight:650}.teacherPageQuick:focus{outline:2px solid #2f7f8f22;border-color:#2f7f8f} /* v0.5 database setup state */ .databaseSetupBox{display:grid;gap:12px;padding:16px;border:1px solid #d9e2ef;border-radius:12px;background:#f8fbff;margin-top:12px} .databaseSetupBox[hidden]{display:none} .databaseSetupBox strong{font-size:15px} .databaseSetupBox span{font-size:12px;line-height:1.5;color:#667085} .databaseSetupLink{display:block;text-align:center;text-decoration:none;box-sizing:border-box} .recentSessionsBlock{display:grid;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid #e3e8ef} .recentSessionsHead{display:flex;align-items:center;justify-content:space-between;gap:10px} .recentSessionsHead strong{font-size:12px} .miniLinkBtn{border:0;background:transparent;padding:2px 4px;color:#52657f;font-size:11px;cursor:pointer} .recentSessionRow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px} .recentSessionRow select{min-width:0;width:100%;border:1px solid #d5dde8;border-radius:8px;padding:8px;background:#fff;color:#17233a} .recentSessionRow button{border:1px solid #cfd8e5;border-radius:8px;background:#fff;padding:8px 12px;font-weight:700;cursor:pointer} .recentSessionRow button:disabled{opacity:.45;cursor:not-allowed} .recentSessionsBlock small{color:#758196;font-size:10px;line-height:1.4} /* v0.5.1 lesson-set library + persistent auth modal */ .authOverlay[hidden],.lessonLibraryOverlay[hidden]{display:none!important} .lessonLibraryOverlay{position:fixed;inset:0;z-index:94;background:#101828a8;display:grid;place-items:center;padding:18px} .lessonLibraryCard{width:min(700px,100%);max-height:min(720px,calc(100vh - 36px));background:#fff;border-radius:17px;box-shadow:0 24px 80px #1018284a;display:flex;flex-direction:column;overflow:hidden} .lessonLibraryHead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 18px 14px;border-bottom:1px solid var(--line)} .lessonLibraryHead strong{display:block;font-size:16px;color:#17233a}.lessonLibraryHead span{display:block;margin-top:3px;font-size:11px;color:#667085} .lessonLibraryNew{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:13px 18px;background:#f8fafc;border-bottom:1px solid var(--line)} .lessonLibraryNew input{height:40px;border:1px solid #d0d5dd;border-radius:9px;padding:0 11px;outline:none}.lessonLibraryNew input:focus{border-color:#2f7f8f;box-shadow:0 0 0 3px #2f7f8f18} .lessonLibraryList{padding:10px 12px;overflow:auto;display:grid;gap:7px;min-height:160px} .lessonSetRow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;border:1px solid #e1e7ee;border-radius:11px;padding:10px 11px;background:#fff}.lessonSetRow.active{border-color:#9bc6ce;background:#f2fafb}.lessonSetMeta{min-width:0}.lessonSetMeta strong{display:block;font-size:13px;color:#17233a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lessonSetMeta span{display:block;margin-top:3px;font-size:10px;color:#667085}.lessonSetActions{display:flex;gap:5px}.lessonSetActions button{border:1px solid #d5dde5;background:#fff;border-radius:7px;padding:6px 8px;font-size:10px;font-weight:700;color:#344054;cursor:pointer}.lessonSetActions button:hover:not(:disabled){background:#f5f7fa}.lessonSetActions button:disabled{opacity:.42;cursor:default}.lessonSetActions .delete{color:#b42318}.lessonLibraryFoot{padding:10px 18px;border-top:1px solid var(--line);font-size:10px;color:#667085;background:#fbfcfd}.lessonLibraryEmpty{padding:28px;text-align:center;color:#667085;font-size:12px} .lessonsBtn{min-width:82px}.lessonsBtn small{min-width:15px;height:15px;border-radius:999px;background:#ffffff18;display:inline-grid;place-items:center;padding:0 4px} @media(max-width:900px){.lessonsBtn span{display:none}.lessonsBtn{min-width:38px;width:38px;padding:0;justify-content:center}.lessonsBtn small{display:none}} @media(max-width:620px){.lessonLibraryNew{grid-template-columns:1fr}.lessonSetRow{grid-template-columns:1fr}.lessonSetActions{justify-content:flex-end}.lessonSetActions button{flex:1}.lessonLibraryCard{max-height:calc(100vh - 18px)}.lessonLibraryOverlay{padding:9px}} /* Notebook writing-line overlay toggle (per page) */ .notebookToggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;border:1px solid #d3dce7;background:#fff;color:#475467;border-radius:8px;padding:0 9px;font-size:10px;font-weight:750;white-space:nowrap;cursor:pointer} .notebookToggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.notebookToggle:hover{background:#f6f8fa}.notebookToggle.active{background:#eef8fa;border-color:#8bbac3;color:#1f6f7d}.notebookToggle.active svg{color:#247b89} @media(max-width:720px){.lessonPageHeader .notebookToggle span{display:none}.lessonPageHeader .notebookToggle{width:36px;padding:0}.lessonPageHeader{gap:5px}.lessonPageHeader select{min-width:0}} .lessonCloudNotice{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #b8dce3;background:#f0fafb;border-radius:11px;padding:10px 11px}.lessonCloudNotice span{min-width:0}.lessonCloudNotice b{display:block;font-size:11px;color:#174a54}.lessonCloudNotice small{display:block;margin-top:2px;font-size:9px;color:#667085}.lessonCloudNotice button{border:1px solid #8fc7d1;background:#fff;color:#175d69;border-radius:8px;padding:7px 9px;font-size:10px;font-weight:750;cursor:pointer;white-space:nowrap}.lessonCloudNotice button:disabled{opacity:.55;cursor:default} @media(max-width:620px){.lessonCloudNotice{align-items:stretch;flex-direction:column}.lessonCloudNotice button{width:100%}} /* Owner-only live classroom monitor; suite analytics and cleanup live in the central Apps Console. */ .linesTopBtn.active{background:#eaf7f8;border-color:#82bbc4;color:#e8ffff}.linesTopBtn.active svg{stroke:#bdf4fb}.consoleBtn{border-color:#84c4ce55;background:#1f6f7d55}.consoleBtn:hover{background:#2a829255}.boardConsoleOverlay{position:fixed;inset:0;z-index:120;background:#0f172acc;display:grid;place-items:center;padding:18px}.boardConsoleCard{width:min(920px,100%);max-height:min(760px,calc(100vh - 36px));overflow:auto;background:#f7f9fc;border:1px solid #d7dee8;border-radius:18px;box-shadow:0 28px 90px #0f172a66}.boardConsoleHead{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:20px 22px;border-bottom:1px solid #dce3eb;background:#ffffffed;backdrop-filter:blur(10px)}.boardConsoleHead>div{min-width:0}.consoleEyebrow{display:block;color:#247b89;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.1em}.boardConsoleHead strong{display:block;margin-top:3px;color:#17233a;font-size:22px}.boardConsoleHead small{display:block;margin-top:5px;color:#667085;font-size:11px}.boardConsoleToolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px}.consoleRefresh{border:1px solid #cfd8e3;background:#fff;color:#475467;border-radius:8px;padding:8px 11px;font-size:10px;font-weight:800;cursor:pointer}.consoleRefresh:hover{border-color:#8cb6bf}.consoleSectionHead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid #e4e9ef}.consoleSectionHead strong{display:block;color:#17233a;font-size:12px}.consoleSectionHead div span{display:block;margin-top:3px;color:#667085;font-size:9px}.consoleSectionHead>span{font-size:9px;font-weight:800;color:#247b89;background:#eef9fa;border-radius:999px;padding:5px 8px}.boardConsoleError{margin:0 22px 22px;border:1px solid #f0b9b4;background:#fff2f1;color:#b42318;border-radius:9px;padding:10px 12px;font-size:10px}.classroomStudent #linesToggleBtn,.guestMode #boardConsoleBtn{display:none!important}@media(max-width:820px){.linesTopBtn span,.consoleBtn span{display:none}.linesTopBtn,.consoleBtn{width:38px;min-width:38px;padding:0;justify-content:center}.boardConsoleToolbar{align-items:stretch;flex-direction:column}.consoleRefresh{align-self:flex-start}.boardConsoleCard{max-height:calc(100vh - 18px)}.boardConsoleOverlay{padding:9px}}@media(max-width:720px){header .linesTopBtn{display:inline-flex}.teacherMode header .consoleBtn:not([hidden]){display:inline-flex}} /* v0.6.5 — workspace polish, clearer header hierarchy, compact Pages panel */ .appHeader{height:60px;gap:10px;padding:0 10px;overflow:visible} .headerIdentity,.headerNav,.headerPrimary,.headerUtility{display:flex;align-items:center;gap:7px;min-width:0} .headerIdentity{flex:1 1 520px;min-width:280px}.headerNav,.headerPrimary,.headerUtility{flex:0 0 auto} .appHeader .brandWrap{min-width:170px}.appHeader .title{flex:1 1 250px;min-width:130px;max-width:420px} .appHeader .pageChip{display:none!important} .appHeader .topbtn{height:40px;border-radius:10px;padding:0 11px} .appHeader .primaryTop{box-shadow:0 0 0 1px #ffffff12 inset} .headerNav{padding-right:3px;border-right:1px solid #ffffff14}.headerPrimary{padding:0 3px}.headerUtility{padding-left:3px;border-left:1px solid #ffffff14} .linesTopBtn{background:#ffffff0a;border-color:#ffffff2a;color:#e8edf3}.linesTopBtn:hover{background:#ffffff18} .linesTopBtn.active{background:#dff3f6!important;border-color:#6faeb9!important;color:#0f5f6c!important}.linesTopBtn.active svg{stroke:currentColor!important} .signInBtn{border-color:#8bc1ca66}.consoleBtn{background:#ffffff0a;border-color:#84c4ce55} .teacherAccountBtn{max-width:142px}.teacherAccountBtn span{max-width:84px} /* Pages drawer: content-height, zero horizontal overflow, two-row control header. */ .pages{right:12px;top:12px;bottom:auto;width:336px;max-width:calc(100% - 24px);max-height:min(620px,calc(100vh - 138px));padding:0;overflow-x:hidden;overflow-y:auto;border-radius:13px} .pages.open{display:block}.lessonPageHeader{position:sticky;top:0;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:7px;padding:10px;margin:0 0 5px;background:#fffffff7;border-bottom:1px solid #edf1f5;backdrop-filter:blur(8px)} .lessonPageHeader .pageHeaderPrimary,.lessonPageHeader .pageHeaderSecondary{display:contents} .lessonPageHeader button,.lessonPageHeader select{height:38px;min-width:0;max-width:none;width:100%;padding:0 10px} .lessonPageHeader #addPage{font-weight:800;color:#17233a}.lessonPageHeader #newPageType{font-size:11px}.lessonPageHeader #bgSel{font-size:11px} .lessonPageHeader .notebookToggle{height:38px;padding:0 9px;font-size:10px} .lessonPageItem{margin:8px 9px;display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;row-gap:5px;padding:9px;border:1px solid #e7ecf1;border-radius:11px;background:#fff;overflow:hidden} .lessonPageItem.active{background:#edf7f8;border-color:#b8dce2;box-shadow:0 0 0 1px #d7eef2 inset} .lessonPageItem .pageNum{grid-column:1;grid-row:1/3;align-self:start;margin-top:1px} .lessonPageItem .pageIdentity{grid-column:2;grid-row:1;min-width:0;display:grid;gap:3px} .lessonPageItem .pageIdentity input{font-size:12px;font-weight:800;color:#17233a;padding:2px 0;height:24px} .lessonPageItem .pageTypeSelect{width:max-content;max-width:100%;height:24px;border:0;background:transparent;color:#247b89;padding:0;font-size:9px;font-weight:700;outline:none} .lessonPageItem .pageActions{grid-column:2;grid-row:2;justify-self:end;display:flex;gap:3px;min-width:0} .lessonPageItem .pageActions button{width:27px;height:27px;border:1px solid transparent;border-radius:7px}.lessonPageItem .pageActions button:hover{border-color:#dce4eb} .pages::-webkit-scrollbar{width:9px;height:0}.pages::-webkit-scrollbar-thumb{background:#c7d0db;border:2px solid #fff;border-radius:999px} /* Authentication now exposes normal teacher registration as well as sign-in. */ .authModeSwitch{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:13px 0 12px;border:1px solid #dce3eb;border-radius:10px;background:#f6f8fa} .authModeSwitch[hidden]{display:none!important}.authModeSwitch button{height:34px;border:0;border-radius:7px;background:transparent;color:#667085;font-size:11px;font-weight:800;cursor:pointer}.authModeSwitch button.active{background:#fff;color:#145c68;box-shadow:0 1px 4px #10182816}.authModeSwitch button:focus-visible{outline:2px solid #6ca9b4;outline-offset:1px} .authForm[hidden]{display:none!important} /* Save feedback is explicit. */ .footerStatus[data-state="saving"] .statusDot{background:#f79009;animation:sbSavePulse 1s infinite}.footerStatus[data-state="error"] .statusDot{background:#f04438}.footerStatus[data-state="saved"] .statusDot{background:#12b76a}@keyframes sbSavePulse{50%{opacity:.35}} /* Reliable in-page Print / Save PDF surface; no popup window required. */ .printRoot{display:none;background:#fff;color:#111}.printPage{width:100%;break-after:page;page-break-after:always;text-align:center}.printPage:last-child{break-after:auto;page-break-after:auto}.printPageTitle{font:600 10pt/1.2 system-ui,sans-serif;color:#667085;text-align:left;margin:0 0 4mm}.printPage img{display:block;width:auto;height:auto;max-width:100%;max-height:255mm;margin:0 auto;object-fit:contain} @media print{html,body{height:auto!important;overflow:visible!important;background:#fff!important}body.boardPrintMode #app{display:none!important}body.boardPrintMode .printRoot{display:block!important;padding:0!important}body.boardPrintMode .printPage{margin:0!important;padding:0!important}@page{size:auto;margin:10mm}} @media(max-width:1380px){.appHeader .brandWrap{min-width:auto}.appHeader .brandText small{display:none}.appHeader .title{max-width:300px}.headerNav .topbtn span,.headerUtility .linesTopBtn span,.headerUtility .consoleBtn span{display:none}.headerNav .topbtn,.headerUtility .linesTopBtn,.headerUtility .consoleBtn{width:40px;padding:0;justify-content:center}.lessonsBtn{min-width:40px}} @media(max-width:1120px){.appHeader{gap:5px}.headerIdentity{flex-basis:300px;min-width:180px}.appHeader .brandText{display:none}.appHeader .brandWrap{min-width:36px}.headerNav,.headerPrimary,.headerUtility{gap:4px}.appHeader .topbtn span{display:none}.appHeader .topbtn{width:38px;padding:0;justify-content:center}.teacherAccountBtn span{display:none!important}.teacherAccountBtn{width:38px}.headerNav,.headerUtility{border:0;padding:0}} @media(max-width:720px){.appHeader{height:54px;display:flex;gap:4px;padding:0 6px}.headerIdentity{flex:1 1 auto;min-width:0}.appHeader .appMark{width:34px;height:34px}.appHeader .title{min-width:70px;max-width:none;height:36px}.headerNav{flex:0 0 auto}.headerPrimary{flex:0 0 auto}.headerUtility{flex:0 0 auto}.appHeader .topbtn{display:flex!important;width:36px;height:36px}.headerNav #lessonsBtn{display:none!important}.headerUtility #boardConsoleBtn[hidden],.headerUtility #teacherAccountBtn[hidden],.headerPrimary #teacherBtn[hidden],.headerUtility #teacherSignInBtn[hidden]{display:none!important}.pages{right:6px;top:6px;width:min(336px,calc(100% - 12px));max-height:calc(100vh - 132px)}.lessonPageHeader{grid-template-columns:minmax(0,1fr) 112px;padding:8px;gap:6px}.lessonPageHeader .notebookToggle span{display:inline}.lessonPageItem{margin:7px}.authCard{max-height:calc(100vh - 24px);overflow:auto}} @media(max-width:430px){.headerPrimary #presentBtn{display:none!important}.lessonPageHeader{grid-template-columns:1fr 105px}.lessonPageHeader .notebookToggle span{display:none}.lessonPageHeader .notebookToggle{padding:0}.pages{width:calc(100% - 12px)}} /* v0.6.6 — lesson-scoped classroom, page/PPT import, and live owner monitoring */ .lessonPageHeader{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:7px!important;overflow:hidden} .lessonPageHeader #addPage{grid-column:1;grid-row:1} .lessonPageHeader #uploadPagesBtn{grid-column:2;grid-row:1} .lessonPageHeader #newPageType{grid-column:1;grid-row:2} .lessonPageHeader #bgSel{grid-column:2;grid-row:2} .lessonPageHeader #notebookLinesToggle{grid-column:1/-1;grid-row:3;width:100%!important} .uploadPagesBtn{border:1px solid #9bcbd3!important;background:#f1fafb!important;color:#155d68!important;font-weight:800!important} .uploadPagesBtn:hover{background:#e4f5f7!important;border-color:#78b8c4!important} .uploadPagesBtn:before{content:'↥';display:inline-block;margin-right:6px;font-size:14px;line-height:1} .startFreshSessionBtn{margin-top:9px;width:100%;justify-content:center;background:#176977;border-color:#176977;color:#fff} .startFreshSessionBtn:hover{background:#125966;border-color:#125966} .boardConsoleLive{margin:0 22px 16px;border:1px solid #dce4ec;border-radius:13px;background:#fff;overflow:hidden} .consoleActiveSessions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px} .consoleLiveEmpty{grid-column:1/-1;padding:20px 14px;text-align:center;color:#667085;font-size:10px;background:#fafbfc;border:1px dashed #dce4ec;border-radius:10px} .consoleSessionCard{min-width:0;padding:13px;border:1px solid #dce4ec;border-radius:11px;background:#fbfcfd;box-shadow:0 1px 2px #10182808} .consoleSessionTop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .consoleSessionTop>div{min-width:0}.consoleSessionTop strong{display:block;color:#17233a;font-size:12px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.consoleSessionTop small{display:block;margin-top:4px;color:#667085;font-size:9px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .liveDot{display:inline-block;width:7px;height:7px;margin:0 6px 1px 0;border-radius:50%;background:#12b76a;box-shadow:0 0 0 3px #12b76a18} .consoleCode{flex:none;border:1px solid #b9d9df;background:#edf8fa;color:#175d69;border-radius:7px;padding:5px 7px;font-size:11px;letter-spacing:.08em} .consoleSessionPage{margin-top:11px;padding:9px 10px;border:1px solid #e5eaf0;border-radius:9px;background:#fff}.consoleSessionPage span{display:block;color:#98a2b3;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.consoleSessionPage strong{display:block;margin-top:3px;color:#344054;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.consoleSessionPage small{display:block;margin-top:3px;color:#667085;font-size:9px} .consoleSessionStats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-top:9px}.consoleSessionStats span{display:block;padding:7px 3px;border-radius:7px;background:#f2f4f7;text-align:center;color:#667085;font-size:8px;line-height:1.25}.consoleSessionStats b{display:block;color:#17233a;font-size:12px} .consoleOpenMonitor{width:100%;margin-top:10px;height:34px;border:1px solid #247b89;border-radius:8px;background:#247b89;color:#fff;font-size:10px;font-weight:850;cursor:pointer}.consoleOpenMonitor:hover{background:#1b6874}.consoleReadOnly{display:block;margin-top:10px;padding:7px 8px;border-radius:7px;background:#f2f4f7;color:#667085;font-size:8px;text-align:center} @media(max-width:820px){ .consoleActiveSessions{grid-template-columns:1fr;padding:10px} .boardConsoleLive{margin-left:12px;margin-right:12px} } @media(max-width:520px){ .lessonPageHeader{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important} .lessonPageHeader #notebookLinesToggle span{display:inline!important} .consoleSessionStats{grid-template-columns:repeat(2,minmax(0,1fr))} } /* v0.6.7 — Pages panel polish + mobile layout audit */ .mobileMenuAction{display:none!important} /* Pages panel: deliberate groups instead of four compressed controls. */ .pages{width:356px;max-width:calc(100% - 24px);overscroll-behavior:contain} .lessonPageHeader{display:flex!important;flex-direction:column;gap:8px!important;padding:10px!important;overflow:visible!important} .pageCreateRow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px;min-width:0} .pageCreateRow>button{min-width:0;width:100%;height:40px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .uploadPagesBtn{display:flex!important;align-items:center;justify-content:center;gap:7px;padding:0 9px!important} .uploadPagesBtn:before{content:none!important} .uploadPagesBtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none} .uploadPagesBtn span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pageSetupRow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px;min-width:0} .pageSetupRow label{display:grid;gap:4px;min-width:0} .pageSetupRow label>span{padding-left:2px;color:#667085;font-size:9px;font-weight:800;letter-spacing:.035em;text-transform:uppercase} .pageSetupRow select{width:100%!important;height:38px!important;min-width:0!important;max-width:100%!important;padding:0 30px 0 9px!important;font-size:11px!important;text-overflow:ellipsis} .lessonPageHeader #notebookLinesToggle{width:100%!important;height:38px!important;display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap} .lessonPageHeader #notebookLinesToggle svg{width:16px;height:16px} .importHint{margin-top:-1px;color:#98a2b3;text-align:center;font-size:9px;line-height:1.25;letter-spacing:.015em} /* Page cards: title/type are the content; actions are a clean footer row. */ .lessonPageItem{grid-template-columns:28px minmax(0,1fr)!important;grid-template-rows:auto auto!important;padding:10px!important;row-gap:7px!important;column-gap:8px!important} .lessonPageItem .pageNum{grid-column:1!important;grid-row:1/3!important;width:25px;height:25px} .lessonPageItem .pageIdentity{grid-column:2!important;grid-row:1!important;min-width:0} .lessonPageItem .pageIdentity input{width:100%;min-width:0;font-size:12px!important;line-height:1.25} .lessonPageItem .pageTypeSelect{display:block;width:min(100%,190px)!important;max-width:100%!important;height:26px!important;font-size:9px!important;text-overflow:ellipsis} .lessonPageItem .pageActions{grid-column:2!important;grid-row:2!important;justify-self:stretch!important;display:flex!important;justify-content:flex-end;gap:4px!important;padding-top:2px;border-top:1px solid #edf1f4} .lessonPageItem .pageActions button{width:30px!important;height:30px!important;display:grid;place-items:center;padding:0!important} .lessonPageItem .pageActions button svg{width:15px;height:15px} /* Header: prevent wide-screen utility growth and eliminate phone overflow. */ .appHeader{max-width:100vw;overflow:hidden} .headerIdentity{overflow:hidden} .headerIdentity .title{min-width:0} .headerNav,.headerPrimary,.headerUtility{min-width:0} .moreMenu{max-height:calc(100dvh - 70px);overflow-y:auto;overscroll-behavior:contain} @media(max-width:720px){ html,body,#app{height:100dvh;min-height:100dvh} .appHeader{height:52px!important;padding:0 max(6px,env(safe-area-inset-left))!important;padding-right:max(6px,env(safe-area-inset-right))!important;gap:4px!important} .headerIdentity{flex:1 1 auto!important;min-width:72px!important;gap:4px!important} .appHeader .brandWrap{min-width:30px!important;width:30px!important} .appHeader .appMark{width:30px!important;height:30px!important;border-radius:7px} .appHeader .title{height:34px!important;min-width:42px!important;max-width:none!important;padding:0 8px!important;font-size:12px!important} .headerNav,.headerPrimary,.headerUtility{gap:3px!important} .appHeader .topbtn{width:34px!important;height:34px!important;border-radius:8px!important} .headerNav #lessonsBtn{display:none!important} /* Keep the core lesson controls visible; move owner/account/lines utilities into More on phones. */ .headerUtility #linesToggleBtn,.headerUtility #boardConsoleBtn,.headerUtility #teacherAccountBtn{display:none!important} .mobileMenuAction{display:flex!important} .mobileMenuAction[hidden]{display:none!important} .moreMenu{position:fixed!important;top:56px!important;right:max(7px,env(safe-area-inset-right))!important;width:min(250px,calc(100vw - 14px))!important} .pages{top:6px!important;right:6px!important;width:min(356px,calc(100% - 12px))!important;max-width:none!important;max-height:calc(100dvh - 170px)!important;border-radius:12px!important} .lessonPageHeader{padding:9px!important;gap:7px!important} .pageCreateRow,.pageSetupRow{gap:6px} .pageCreateRow>button{height:39px!important;font-size:11px} .pageSetupRow select{height:37px!important;font-size:10px!important} .lessonPageHeader #notebookLinesToggle{height:37px!important;font-size:10px!important} .lessonPageItem{margin:7px 8px!important} .toolbar{padding-bottom:max(6px,env(safe-area-inset-bottom))!important;height:calc(62px + env(safe-area-inset-bottom))!important} .boardFooter{bottom:calc(66px + env(safe-area-inset-bottom))!important} .zoom{bottom:calc(108px + env(safe-area-inset-bottom))!important} .teacherPanel{bottom:calc(108px + env(safe-area-inset-bottom))!important} .presentationBar{bottom:calc(65px + env(safe-area-inset-bottom))!important} } @media(max-width:520px){ .appHeader .brandWrap{display:none!important} .headerIdentity{min-width:60px!important} .headerPrimary #presentBtn{display:flex!important} /* Classroom stays available in the More menu if space becomes tight. */ .headerPrimary #teacherBtn{display:none!important} .pageCreateRow{grid-template-columns:1fr 1fr} .uploadPagesBtn span{font-size:10px} .importHint{font-size:8px} } @media(max-width:390px){ .appHeader{gap:3px!important} .appHeader .title{font-size:11px!important;padding:0 6px!important} .appHeader .topbtn{width:33px!important;height:33px!important} .pages{left:6px!important;right:6px!important;width:auto!important} .pageCreateRow>button{padding-left:7px!important;padding-right:7px!important} .uploadPagesBtn{gap:5px!important} .uploadPagesBtn span{font-size:9px} .pageSetupRow label>span{font-size:8px} .lessonPageItem .pageActions button{width:32px!important;height:32px!important} .boardFooter{grid-template-columns:minmax(70px,1fr) auto!important;gap:4px!important} .quickPageNav select{max-width:88px!important} } @media(max-width:340px){ .pageCreateRow{grid-template-columns:1fr} .pageSetupRow{grid-template-columns:1fr} .importHint{display:none} .pages{max-height:calc(100dvh - 166px)!important} } /* v0.6.8 — More-menu stacking repair. v0.6.7 constrained the header with overflow:hidden; that clipped the dropdown as soon as it extended over the whiteboard. Keep header children width-safe, but allow intentional popovers to paint outside the header. */ .appHeader{ position:relative; overflow:visible!important; } .headerIdentity,.headerNav,.headerPrimary,.headerUtility{ min-width:0; } .moreWrap{ position:relative; z-index:60; } .moreMenu{ z-index:90!important; isolation:isolate; } .moreMenu[hidden]{display:none!important} /* Canvas/workspace controls stay below header popovers. */ .workspace{z-index:0} .main,#canvasWrap,canvas{z-index:auto} @media(max-width:720px){ .appHeader{overflow:visible!important} .moreMenu{ z-index:90!important; box-shadow:0 18px 48px #10182842!important; } } /* v0.7.0 — Smart Ink, rotatable images, and optional support. */ .options select#smartInkMode{height:30px;max-width:150px;border:1px solid var(--line);border-radius:7px;background:#fff;color:#344054;font-size:11px;padding:0 8px} .options .smartInkHint{max-width:310px} .options button:disabled{opacity:.42;cursor:not-allowed} /* Donate dialog intentionally lives outside the teaching canvas. */ .donateDialog{border:0;padding:0;background:transparent;max-width:none;max-height:none} .donateDialog::backdrop{background:#1018288a;backdrop-filter:blur(2px)} .donateCard{position:relative;width:min(420px,calc(100vw - 28px));box-sizing:border-box;padding:28px 28px 24px;border:1px solid #d9e2eb;border-radius:18px;background:#fff;color:#17233a;box-shadow:0 28px 90px #1018284f;text-align:center;font:14px/1.55 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} .donateClose{position:absolute;right:12px;top:10px;width:34px;height:34px;border:0;border-radius:50%;background:#f4f6f8;color:#667085;font-size:22px;cursor:pointer}.donateClose:hover{background:#e9edf2;color:#17233a} .donateHeart{width:52px;height:52px;margin:0 auto 9px;border-radius:16px;display:grid;place-items:center;background:#fff0f2;color:#d6455d;font-size:26px}.donateCard>small{font-size:10px;font-weight:850;letter-spacing:.11em;color:#247b89}.donateCard h2{margin:5px 0 8px;font-size:23px}.donateCard p{margin:0 auto 18px;color:#667085;max-width:330px}.paypalDonate{display:inline-flex;align-items:center;justify-content:center;min-width:180px;height:42px;padding:0 18px;border-radius:10px;background:#17233a;color:#fff;text-decoration:none;font-weight:800}.paypalDonate:hover{background:#243652}.donateCard .donateFine{margin:15px auto 0;font-size:10px;color:#98a2b3} @media(max-width:720px){.donateCard{padding:24px 20px 21px}.moreMenu #mobileRotateImageBtn:not([hidden]){display:flex}} /* v0.7.1 — support methods, live-session-only owner surface, long-press selection */ .liveSessionsCard{width:min(980px,calc(100vw - 32px))} .liveSessionsToolbar{display:flex;align-items:center;justify-content:space-between;gap:16px} .liveSessionsToolbar>div{display:grid;gap:2px}.liveSessionsToolbar>div>strong{font-size:13px}.liveSessionsToolbar>div>span{font-size:11px;color:#667085} .donateHeading{display:flex;align-items:center;gap:12px;padding-right:34px;text-align:left}.donateHeading .donateHeart{margin:0;flex:none}.donateHeading small{display:block;color:#247b89;font-size:10px;font-weight:850;letter-spacing:.11em}.donateHeading h2{margin:3px 0 0;font-size:22px} .donateCopy{margin:14px 0 12px!important;text-align:left!important;max-width:none!important}.donateTabs{display:flex;gap:7px;margin:12px 0}.donateTabs button{flex:1;min-height:38px;border:1px solid #d9e2eb;border-radius:9px;background:#f7f9fc;color:#667085;font-weight:800;cursor:pointer}.donateTabs button.active{background:#eaf6f7;border-color:#8ec9d0;color:#176b77}.donatePayment{min-height:300px;display:grid;place-items:center;padding:14px;border:1px solid #d9e2eb;border-radius:14px;background:#f7f9fc}.donatePanel{width:100%;display:grid;justify-items:center;gap:9px;text-align:center}.donatePanel small{color:#667085}.donateQrFrame{padding:8px;border:1px solid #d9e2eb;border-radius:16px;background:#fff;box-shadow:0 8px 22px #0f172a14}.donateQrFrame img{display:block;width:min(244px,68vw);height:auto;border-radius:10px}.paypalMark{width:58px;height:58px;border-radius:17px;display:grid;place-items:center;background:#e8f3ff;color:#075ea8;font:bold 30px/1 system-ui}.paypalDonate{width:min(280px,100%)} @media(max-width:720px){.liveSessionsCard{width:min(100vw - 16px,980px)}.liveSessionsToolbar{align-items:flex-start}.donatePayment{min-height:270px;padding:10px}.donateHeading h2{font-size:20px}} /* v0.7.2 — reliable press-select-drag */ #canvasWrap{touch-action:none} #board{touch-action:none;-webkit-user-select:none;user-select:none} .options .smartInkHint{line-height:1.35} /* v0.7.5 — canvas-first desktop chrome without hiding the tools. The actual tool rail stays visible. Explanatory help text is collapsed until hover/focus, so instructions do not permanently occupy teaching space. */ @media (hover:hover) and (pointer:fine) and (min-width:721px){ .workspace{display:block} .main{position:absolute;inset:0;width:100%;height:100%} .toolbar{ position:absolute;left:8px;top:8px;bottom:8px;width:52px;height:auto;z-index:14; border:1px solid var(--line);border-radius:12px;padding:6px 5px;background:#fffffff2; box-shadow:0 8px 24px #10182818;overflow-y:auto;overflow-x:hidden; transform:none;opacity:1; } .tool{min-height:40px} .tool span{margin-left:116px} .options{left:68px;top:8px;max-width:calc(100% - 230px);z-index:13;transform:none;opacity:1} .options .hint{display:inline-block;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;vertical-align:middle;transition:max-width .16s ease,opacity .12s ease} .options:hover .hint,.options:focus-within .hint{max-width:360px;opacity:1} .options.hintOnly{width:32px;height:32px;min-width:32px;padding:0;border-radius:50%;overflow:visible;display:grid;place-items:center;cursor:help} .options.hintOnly:before{content:'?';font-size:14px;font-weight:850;color:#47606b} .options.hintOnly .hint{position:absolute;left:0;top:38px;max-width:0;width:max-content;padding:0;background:#17233a;color:#fff;border-radius:8px;box-shadow:0 10px 28px #1018282b;white-space:normal;line-height:1.35;pointer-events:none} .options.hintOnly:hover .hint,.options.hintOnly:focus-within .hint{max-width:min(360px,calc(100vw - 90px));padding:8px 10px;opacity:1} .zoom{right:12px;bottom:12px;opacity:.82}.zoom:hover,.zoom:focus-within{opacity:1} .boardFooter{left:68px;right:auto;bottom:12px;width:auto;max-width:calc(100% - 300px);opacity:.78}.boardFooter:hover,.boardFooter:focus-within{opacity:1} body.presenting .toolbar{display:none!important} body.presenting .options{left:10px;top:10px} } /* v0.7.5 object selection / compact actions */ .options button{white-space:nowrap} @media(max-width:720px){.options .hint{display:none}.options.hintOnly{display:none!important}} /* v0.7.5 — teaching tools */ #canvasWrap[data-tool="lasso"]{cursor:crosshair} #canvasWrap[data-tool="laser"],#canvasWrap[data-tool="spotlight"]{cursor:none} #canvasWrap[data-tool="ruler"],#canvasWrap[data-tool="protractor"]{cursor:move} @media(max-width:720px){.toolbar{scrollbar-width:thin}.tool{flex:0 0 46px}} /* v0.7.6 grading workflow */ .lessonGradesAction{width:100%;border:1px solid #cbd8e1;background:#f7fbfc;color:#17233a;border-radius:10px;display:grid;grid-template-columns:32px 1fr;gap:8px;align-items:center;text-align:left;cursor:pointer;padding:10px}.lessonGradesAction:hover{background:#eef7f8;border-color:#a9c7ce}.lessonGradesAction .controlIcon{width:28px;height:28px;display:grid;place-items:center}.lessonGradesAction svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.lessonGradesAction b{display:block;font-size:12px}.lessonGradesAction small{display:block;font-size:9px;margin-top:2px;opacity:.75}.teacherPanel.monitorMode .teacherMainActions .lessonGradesAction{display:block;grid-template-columns:32px 1fr}.previewCard{width:min(1080px,97vw)}.studentReviewNav{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;padding-bottom:12px;margin-bottom:14px;border-bottom:1px solid var(--line)}.studentReviewNav button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 9px;font-weight:700;font-size:11px;cursor:pointer}.studentReviewNav button:last-child{text-align:right}.studentReviewNav button:disabled{opacity:.4;cursor:not-allowed}.studentReviewNav strong{text-align:center;font-size:11px;color:#475467;white-space:nowrap}.primaryLessonGrade{margin:0;padding:0 0 14px;border-top:0}.primaryLessonGrade .gradeTitle{font-size:16px;color:#183b45}.gradeActionRow{display:grid;grid-template-columns:1fr 1fr;gap:8px}.secondaryGradeAction{background:#fff!important;color:#145c68!important;border:1px solid #8dbbc3!important}.secondaryGradeAction:hover{background:#f2f9fa!important}.pageGradeDetails{border-top:1px solid var(--line);padding-top:12px;margin-top:4px}.pageGradeDetails summary{cursor:pointer;font-size:11px;font-weight:750;color:#667085;user-select:none}.pageGradeDetails[open] summary{color:#183b45}.pageGradeInner{padding-top:14px}.lessonGradesCard{width:min(820px,96vw);max-height:88vh;background:#fff;border-radius:14px;box-shadow:0 24px 80px #0006;display:flex;flex-direction:column;overflow:hidden}.lessonGradesHead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}.lessonGradesHead>div{display:grid;gap:2px}.lessonGradesHead strong{font-size:16px}.lessonGradesHead span{font-size:11px;color:#667085}.lessonGradesToolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;background:#f8fafc;border-bottom:1px solid var(--line);font-size:12px;color:#475467}.lessonGradesToolbar>div:last-child{display:flex;gap:8px}.lessonGradesToolbar button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 10px;font-weight:700;cursor:pointer}.lessonGradesToolbar .primaryAction{background:var(--accent);color:#fff;border-color:var(--accent)}.lessonGradesTableWrap{overflow:auto;flex:1}.lessonGradesTable{width:100%;border-collapse:collapse;font-size:12px}.lessonGradesTable th,.lessonGradesTable td{padding:10px 12px;border-bottom:1px solid #edf0f4;text-align:left}.lessonGradesTable th{position:sticky;top:0;background:#fff;z-index:1;font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:#667085}.lessonGradesTable td:first-child{font-weight:700}.lessonGradeStatus{display:inline-block;border-radius:999px;padding:3px 7px;font-size:10px;font-weight:750}.lessonGradeStatus.done{background:#ecfdf3;color:#067647}.lessonGradeStatus.pending{background:#f2f4f7;color:#667085}.lessonGradesEmpty{text-align:center!important;color:#667085;padding:30px!important}.lessonGradesFoot{padding:10px 16px;font-size:10px;line-height:1.4;color:#7b8794;background:#fafbfc}.studentGrade{font-size:10px;color:#667085;margin-top:2px}.studentGrade.graded{color:#067647;font-weight:750} @media(max-width:650px){.gradeActionRow{grid-template-columns:1fr}.studentReviewNav{grid-template-columns:1fr 1fr}.studentReviewNav strong{grid-column:1/-1;grid-row:1}.lessonGradesToolbar{align-items:flex-start;flex-direction:column}.lessonGradesToolbar>div:last-child{width:100%}.lessonGradesToolbar button{flex:1}.lessonGradesTable{min-width:560px}} /* v0.7.8 Quick Gradebook */ .lessonGradesCard{width:min(1040px,97vw)} .lessonGradesToolbar>div:first-child{display:grid;gap:3px}.lessonGradesSaveStatus{font-size:10px;color:#667085;min-height:14px}.lessonGradesToolbar button:disabled{opacity:.5;cursor:not-allowed}.quickGradebookTable{min-width:790px}.quickGradebookTable th:nth-child(1){min-width:180px}.quickGradebookTable th:nth-child(2){min-width:100px}.quickGradebookTable th:nth-child(3),.quickGradebookTable th:nth-child(4){width:115px}.quickGradebookTable th:nth-child(5){width:90px}.quickGradebookTable th:nth-child(6){width:105px}.quickGradeInput{width:88px;max-width:100%;box-sizing:border-box;border:1px solid #cfd7e3;border-radius:8px;padding:8px 9px;font:inherit;color:var(--text);background:#fff;outline:none}.quickGradeInput:focus{border-color:#6ca9b4;box-shadow:0 0 0 3px #2f7f8f1a}.quickGradePercent{font-weight:800;color:#145c68;white-space:nowrap}.quickGradeDirty{background:#fffaf0}.quickGradeDirty .quickGradeInput{border-color:#e4b65e}.lessonGradeStatus.unsaved{background:#fff4e5;color:#9a6700}.lessonWorkStatus{display:inline-block;border-radius:999px;padding:3px 7px;font-size:10px;font-weight:750;white-space:nowrap}.lessonWorkStatus.submitted{background:#ecfdf3;color:#067647}.lessonWorkStatus.collected{background:#eef4ff;color:#3448a8}.lessonWorkStatus.working{background:#eff8ff;color:#175cd3}.lessonWorkStatus.missing{background:#f2f4f7;color:#667085}.quickGradeStudent{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media(max-width:650px){.lessonGradesCard{width:98vw}.lessonGradesToolbar>div:last-child{display:grid;grid-template-columns:1fr 1fr}.lessonGradesToolbar #saveAllLessonGradesBtn{grid-column:1/-1}.quickGradebookTable{min-width:760px}} /* v0.8.0 — return-work workflow, authoritative lock state, and structured student names */ .studentNameFields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.studentNameFields label{margin-bottom:0}.studentNameFields input{margin-top:6px}.returnWorkRow{display:grid;gap:6px;margin:-2px 0 14px;padding:10px;border:1px solid #dbe4ea;border-radius:10px;background:#f8fafc}.returnWorkRow button{min-height:38px;border-radius:8px;padding:8px 10px;font-weight:750;cursor:pointer}.returnWorkRow button:disabled{opacity:.45;cursor:not-allowed}.returnWorkRow span{font-size:10px;line-height:1.35;color:#667085}.studentStatus.returned{color:#175cd3;font-weight:700} @media(max-width:480px){.studentNameFields{grid-template-columns:1fr}} /* v0.8.1 admin/users + student feedback */ .boardConsoleUsers{margin:0 22px 16px;border:1px solid #dce4ec;border-radius:13px;background:#fff;overflow:hidden}.consoleUserTools{display:flex;gap:8px;padding:10px 14px;border-bottom:1px solid #e8edf2}.consoleUserTools input,.consoleUserTools select{border:1px solid #cfd8e3;border-radius:8px;padding:8px 10px;background:#fff;color:#344054;font:inherit}.consoleUserTools input{flex:1;min-width:150px}.consoleUsersTableWrap{overflow:auto;max-height:280px}.consoleUsersTable{width:100%;border-collapse:collapse;font-size:10px}.consoleUsersTable th{position:sticky;top:0;background:#f8fafc;color:#667085;text-align:left;padding:8px 10px;border-bottom:1px solid #e4e9ef;white-space:nowrap}.consoleUsersTable td{padding:9px 10px;border-bottom:1px solid #eef2f6;color:#475467;vertical-align:top;white-space:nowrap}.consoleUsersTable td:first-child{min-width:190px}.consoleUsersTable td strong,.consoleUsersTable td small{display:block}.consoleUsersTable td strong{color:#17233a;font-size:11px}.consoleUsersTable td small{margin-top:2px;color:#7b8794;font-size:9px}.consoleRole{display:inline-flex;border-radius:999px;padding:4px 7px;font-size:9px;font-weight:850;background:#eef2f6;color:#475467}.consoleRole.admin{background:#eaf7f8;color:#176b77}.consoleLiveUser{display:inline!important;margin-left:4px;color:#087443!important;font-weight:800}.studentFeedbackPanel{position:absolute;right:16px;bottom:70px;z-index:20;width:min(360px,calc(100% - 32px));background:#fff;border:1px solid #cfd8e3;border-radius:12px;box-shadow:0 14px 40px #0f172a26;padding:12px 14px}.studentFeedbackPanel>div{display:flex;justify-content:space-between;gap:10px;align-items:center}.studentFeedbackPanel strong{font-size:12px;color:#17233a}.studentFeedbackPanel span{font-size:9px;font-weight:800;color:#247b89}.studentFeedbackPanel p{margin:8px 0 0;color:#475467;font-size:11px;line-height:1.45;white-space:pre-wrap}.classroomLocked #textEditor{display:none!important}@media(max-width:820px){.boardConsoleUsers{margin-left:12px;margin-right:12px}.consoleUserTools{flex-direction:column}.studentFeedbackPanel{right:8px;bottom:66px;width:calc(100% - 16px)}} /* v0.8.2 classroom management + teaching tools */ .classTimerDisplay{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:120;display:flex;align-items:center;gap:9px;padding:8px 13px;border:1px solid #cfd8e3;border-radius:999px;background:#fff;box-shadow:0 8px 28px #0f172a20;color:#344054;pointer-events:none}.classTimerDisplay[hidden]{display:none}.classTimerDisplay span{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.classTimerDisplay strong{font-size:18px;font-variant-numeric:tabular-nums;color:#17233a}.classTimerDisplay small{font-size:9px;font-weight:800;color:#667085}.classTimerDisplay.timeUp{animation:timerPulse .8s ease-in-out 3;border-color:#d92d20}.classTimerDisplay.timeUp strong{color:#b42318}@keyframes timerPulse{50%{transform:translateX(-50%) scale(1.06)}} .classTimerCard{margin-top:10px;border:1px solid #dce4ec;border-radius:11px;background:#fff;padding:10px}.timerCardHead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}.timerCardHead>div{display:grid;gap:2px}.timerCardHead strong{font-size:12px}.timerCardHead span{font-size:9px;color:#667085}.timerCardHead>strong{font-size:18px;font-variant-numeric:tabular-nums;color:#145c68}.timerControls{display:grid;grid-template-columns:80px repeat(4,1fr);gap:6px;align-items:end}.timerControls label{font-size:9px;color:#667085;display:grid;gap:3px}.timerControls input{width:100%;box-sizing:border-box;border:1px solid #cfd8e3;border-radius:7px;padding:7px}.timerControls button{border:1px solid #cfd8e3;background:#fff;border-radius:7px;padding:7px 6px;font-size:9px;font-weight:800;cursor:pointer}.timerControls button:hover{background:#f8fafc} .rosterCard{width:min(900px,96vw);max-height:88vh;background:#fff;border-radius:14px;box-shadow:0 24px 80px #0006;display:flex;flex-direction:column;overflow:hidden}.rosterToolbar{display:flex;gap:10px;align-items:center;padding:11px 16px;background:#f8fafc;border-bottom:1px solid var(--line)}.rosterToolbar>input{flex:1;min-width:160px}.rosterToolbar input,.rosterToolbar select{border:1px solid #cfd8e3;border-radius:8px;padding:8px 10px;background:#fff}.mergeRoster{display:flex;align-items:center;gap:6px}.mergeRoster span{font-size:10px;color:#667085}.mergeRoster button,.rosterTable button{border:1px solid #cfd8e3;background:#fff;border-radius:8px;padding:7px 9px;font-weight:750;cursor:pointer}.rosterTable button+button{margin-left:5px}.rosterTable button.danger,.teacherMarkupBar .danger{color:#b42318;border-color:#f0b7b2}.rosterTableWrap{overflow:auto;flex:1}.rosterTable{width:100%;border-collapse:collapse;font-size:11px}.rosterTable th,.rosterTable td{padding:10px 12px;border-bottom:1px solid #edf0f4;text-align:left}.rosterTable th{position:sticky;top:0;background:#fff;color:#667085;text-transform:uppercase;font-size:9px;letter-spacing:.04em}.rosterTable td:first-child{font-weight:750;color:#17233a} .gradebookFilterBar{display:flex;gap:8px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);background:#fff}.gradebookFilterBar input,.gradebookFilterBar select{border:1px solid #cfd8e3;border-radius:8px;padding:8px 10px;background:#fff}.gradebookFilterBar input{flex:1}.gradebookBatchBar{display:flex;align-items:center;gap:6px;padding:8px 16px;background:#f8fafc;border-bottom:1px solid var(--line);overflow-x:auto}.gradebookBatchBar label{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:750;white-space:nowrap}.gradebookBatchBar span{font-size:10px;color:#667085;white-space:nowrap;margin-right:4px}.gradebookBatchBar button{border:1px solid #cfd8e3;background:#fff;border-radius:7px;padding:6px 8px;font-size:9px;font-weight:800;white-space:nowrap;cursor:pointer}.gradebookBatchBar button:hover{background:#eef7f8}.lessonWorkStatus.late{background:#fff4e5;color:#9a6700}.lessonWorkStatus.excused{background:#f4f3ff;color:#5925dc}.lessonWorkStatus.missing{background:#fef3f2;color:#b42318}.quickGradebookTable .gradebookRowCheck{width:16px;height:16px}.quickGradebookTable tr[hidden]{display:none}.quickGradebookTable .reviewGradebookStudent{border:1px solid #cfd8e3;background:#fff;border-radius:7px;padding:6px 8px;font-size:9px;font-weight:800;cursor:pointer} .teacherMarkupBar{position:absolute;left:18px;top:18px;z-index:4;display:flex;align-items:center;gap:5px;max-width:calc(100% - 36px);overflow-x:auto;padding:6px;border:1px solid #d0d9e3;border-radius:10px;background:#fffffff2;box-shadow:0 6px 18px #0f172a1c;backdrop-filter:blur(4px)}.previewCanvasPane{position:relative}.teacherMarkupLabel{font-size:9px;font-weight:850;color:#475467;white-space:nowrap;padding:0 4px}.teacherMarkupBar button{border:1px solid #cfd8e3;background:#fff;border-radius:7px;padding:6px 8px;min-width:34px;font-size:10px;font-weight:800;cursor:pointer;white-space:nowrap}.teacherMarkupBar button:hover,.teacherMarkupBar button.active{background:#eaf7f8;border-color:#8dbbc3;color:#145c68}.teacherMarkupBar .markupSaveStatus{font-size:9px;color:#667085;white-space:nowrap;padding:0 4px}.previewCanvasPane #previewCanvas{touch-action:none} .consoleAccountStatus{display:inline-flex;border-radius:999px;padding:4px 7px;font-size:9px;font-weight:850;background:#ecfdf3;color:#067647}.consoleAccountStatus.disabled{background:#fef3f2;color:#b42318}.consoleUserActions{display:flex;gap:4px}.consoleUserActions button{border:1px solid #cfd8e3;background:#fff;border-radius:6px;padding:5px 7px;font-size:8px;font-weight:800;cursor:pointer}.consoleUserActions button.danger{color:#b42318;border-color:#f0b7b2}.consoleUserActions button:hover{background:#f8fafc} @media(max-width:820px){.classTimerDisplay{top:8px}.timerControls{grid-template-columns:1fr 1fr 1fr}.timerControls label{grid-column:1/-1}.rosterToolbar{align-items:stretch;flex-direction:column}.mergeRoster{display:grid;grid-template-columns:1fr auto 1fr auto}.teacherMarkupBar{left:10px;top:10px;max-width:calc(100% - 20px)}.teacherMarkupLabel,.teacherMarkupBar .markupSaveStatus{display:none}.gradebookFilterBar{flex-direction:column;align-items:stretch}} /* v0.9.0 — protected assignment flow + visual polish */ :root{--board-radius:16px;--board-shadow:0 18px 48px rgba(15,23,42,.14);--board-line:rgba(148,163,184,.24)} button,.topbtn,select,input,textarea{transition:border-color .16s ease,box-shadow .16s ease,background .16s ease,transform .16s ease,opacity .16s ease} button:not(:disabled):active{transform:translateY(1px)} button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid rgba(37,99,235,.22);outline-offset:2px} .appHeader{box-shadow:0 1px 0 rgba(148,163,184,.16),0 8px 28px rgba(15,23,42,.06);backdrop-filter:saturate(1.08) blur(10px)} .teacherPanel,.lessonLibraryCard,.previewCard,.lessonGradesCard,.rosterCard,.workVersionsCard{box-shadow:var(--board-shadow);border-color:var(--board-line)} .nowTeachingCard,.classTimerCard,.sessionCodeCard,.overallGradeBox,.returnWorkRow{border-radius:var(--board-radius)} .deploySafetyNote{display:flex;gap:10px;align-items:center;margin:0 0 10px;padding:10px 12px;border:1px solid rgba(22,163,74,.2);background:rgba(240,253,244,.9);border-radius:14px;color:#14532d} .deploySafetyNote .safetyShield{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#dcfce7;font-weight:900;flex:0 0 auto} .deploySafetyNote strong,.deploySafetyNote small{display:block}.deploySafetyNote small{margin-top:2px;color:#3f6650;line-height:1.35} .deploySafetyNote.teacherOnly{border-color:rgba(180,83,9,.24);background:#fffbeb;color:#78350f}.deploySafetyNote.teacherOnly .safetyShield{background:#fef3c7}.deploySafetyNote.teacherOnly small{color:#8a5a1f} .deployPrimary.teacherOnlyBlocked{opacity:.72;cursor:not-allowed} .pageItem.teacherOnlyPage,.pageitem.teacherOnlyPage,.pageRow.teacherOnlyPage{border-color:rgba(180,83,9,.35)!important;background:linear-gradient(180deg,#fffdf5,#fffbeb)!important} .deployGuardOverlay{position:fixed;inset:0;z-index:1600;display:grid;place-items:center;padding:24px;background:rgba(15,23,42,.36);backdrop-filter:blur(8px);opacity:0;transition:opacity .14s ease} .deployGuardOverlay[hidden]{display:none}.deployGuardOverlay.open{opacity:1} .deployGuardCard{position:relative;width:min(520px,calc(100vw - 32px));padding:28px;border-radius:22px;background:#fff;border:1px solid rgba(148,163,184,.28);box-shadow:0 28px 80px rgba(15,23,42,.24);transform:translateY(8px) scale(.985);transition:transform .16s ease} .deployGuardOverlay.open .deployGuardCard{transform:translateY(0) scale(1)} .deployGuardClose{position:absolute;right:14px;top:14px}.deployGuardIcon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#ecfdf3;color:#15803d;font-size:24px;font-weight:900;margin-bottom:14px}.deployGuardEyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:800;color:#64748b}.deployGuardCard h2{margin:4px 36px 8px 0;font-size:22px}.deployGuardCard p{margin:0;color:#475569;line-height:1.55} .deployGuardFacts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0}.deployGuardFacts>div{padding:10px;border-radius:12px;background:#f8fafc;border:1px solid #e2e8f0}.deployGuardFacts span,.deployGuardFacts strong{display:block}.deployGuardFacts span{font-size:11px;color:#64748b}.deployGuardFacts strong{margin-top:3px;font-size:13px;color:#0f172a;overflow:hidden;text-overflow:ellipsis} .deployGuardActions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:20px}.deployGuardActions button{min-height:40px;padding:0 14px;border-radius:10px} .reviewActionRow{display:flex;gap:8px;flex-wrap:wrap}.reviewActionRow button{flex:1 1 160px} .workVersionsCard{width:min(650px,calc(100vw - 30px));max-height:min(720px,calc(100vh - 40px));overflow:hidden;background:#fff;border:1px solid var(--board-line);border-radius:20px;display:flex;flex-direction:column} .versionHistoryNotice{margin:14px 16px 0;padding:11px 12px;border-radius:12px;background:#f8fafc;border:1px solid #e2e8f0;color:#475569;font-size:13px;line-height:1.45}.workVersionsList{padding:14px 16px 18px;overflow:auto;display:grid;gap:8px}.workVersionRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 13px;border:1px solid #e2e8f0;border-radius:13px;background:#fff}.workVersionRow:hover{border-color:#cbd5e1;box-shadow:0 6px 18px rgba(15,23,42,.06)}.workVersionRow strong,.workVersionRow span{display:block}.workVersionRow span{margin-top:3px;font-size:12px;color:#64748b}.workVersionRow button{padding:8px 12px;border-radius:9px} @media(max-width:700px){.deployGuardFacts{grid-template-columns:1fr}.deployGuardCard{padding:22px 18px}.deployGuardActions>*{flex:1 1 100%}.deploySafetyNote{align-items:flex-start}.workVersionRow{align-items:flex-start}.workVersionRow button{flex:0 0 auto}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}} /* Teacher-only safety cues */ .pageitem.teacherOnlyPage{border-color:#f59e0b;background:linear-gradient(180deg,#fffbeb,#fff)} .pageitem.teacherOnlyPage .pageTypeSelect{font-weight:800;color:#92400e;background:#fffbeb;border-color:#fde68a} .teacherOnlyBlocked{cursor:not-allowed;opacity:.72} body.presenting .pageitem.teacherOnlyPage{display:none}