/* Classroom v4: display, operations and room identity never share a control row.
   All panels remain in normal flow; short/narrow screens scroll, never overlap. */
.classroom{--rail-space:0;--edge-space:0;--line:#33485c;--muted:#aabdd0;background:#101b29;color:#edf3fa}
.classroom .clock-screen,.classroom .incident-call-screen{display:flex;flex-direction:column;justify-content:flex-start;
 margin:0;padding:24px 40px;gap:24px;min-height:100svh;height:auto;overflow:visible}
.classroom .classroom-heading{display:grid;grid-template-columns:minmax(220px,1fr) auto auto minmax(60px,1fr);
 align-items:center;gap:24px;min-height:72px}
.classroom-brand{min-width:0}.classroom-brand>strong{font-size:clamp(24px,2vw,38px);font-weight:700}
.classroom .classroom-heading .exam-title{font-size:clamp(14px,1.1vw,20px);text-align:left;line-height:1.5;margin:6px 0 0;max-width:100%;overflow-wrap:anywhere}
.classroom .grade-rail{position:static;inset:auto;width:auto;max-width:360px;padding:0;display:flex;flex-direction:row;
 flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:8px;background:transparent;border:0;z-index:auto}
.classroom .grade-key{min-height:46px;min-width:64px;border-radius:10px;padding:8px 14px;font-size:22px;background:#1c2c3d}
.classroom .grade-key[aria-pressed="true"]{background:#2d4b69;border-color:#80b3e0}
.classroom .phase{align-self:center;min-height:48px;padding:10px 18px;font-size:clamp(18px,1.6vw,28px);margin:0}
.classroom .phase::before{width:9px;height:9px;border-radius:50%;background:currentColor}
.classroom .phase::after{display:none}
.classroom-header-tools{display:flex;flex-wrap:nowrap;justify-content:flex-end;align-items:center;gap:10px;min-width:0}
.classroom .classroom-sound{position:static;inset:auto;width:48px;height:48px;margin:0;background:#1c2c3d;border:1px solid #33485c;z-index:auto}
.classroom .listening-badge{margin:0;max-width:300px;width:auto;min-width:0;grid-template-columns:1fr;padding:8px 12px;gap:4px}
.classroom .listening-badge>span:first-child{font-size:17px}.classroom .listening-badge>strong{font-size:18px}
.classroom .listening-badge>small,.classroom .listening-badge .badge-identity{display:none}
.classroom .listening-badge>strong{grid-column:1;grid-row:auto}
.classroom-board{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,24vw,450px);gap:26px;flex:1 0 auto;min-width:0}
.classroom-display{display:flex;flex-direction:column;min-width:0;padding:26px 30px 22px;border:1px solid #33485c;
 border-radius:18px;background:#182737}
.classroom-room-identity{display:flex;flex-wrap:wrap;align-items:center;gap:18px;font-size:clamp(18px,1.4vw,26px);color:#aabdd0}
.classroom-room-identity strong{color:#edf3fa;font-size:clamp(24px,2.1vw,40px);font-weight:700}
.classroom .clock-content{flex:1 0 auto;justify-content:center;min-height:340px;padding:16px 0;gap:0}
.classroom h1{font-size:clamp(34px,4.2vw,80px);margin:0 0 14px;font-weight:700}
.classroom .countdown-label{font-size:clamp(18px,1.6vw,30px);line-height:1.5;margin:0 0 14px}
.classroom .countdown{font-size:clamp(64px,min(12vw,21vh),252px);line-height:1.15;min-height:0;font-weight:650}
.classroom .announcement{font-size:clamp(18px,1.7vw,32px);line-height:1.5;min-height:0;margin:24px 0 0;color:#f0c16c}
.classroom .exam-details{grid-template-columns:1.35fr 1.25fr 1fr 1fr;gap:20px;padding:24px 0 0;border-top:1px solid #40576b}
.classroom .exam-details>div{padding:0 16px 0 0;border:0;border-right:1px solid #40576b;gap:8px}
.classroom .exam-details>div:last-child{border:0;padding:0}
.classroom .exam-details span{font-size:clamp(16px,1.2vw,23px)}
.classroom .exam-details strong,.classroom .invigilators-list{font-size:clamp(22px,1.7vw,34px);margin-top:0;line-height:1.4}
.classroom .invigilators-list{gap:6px 14px}.classroom .invigilators-list .invigilator-name,.classroom .invigilator-name>span{font-size:inherit}
.classroom-operations{display:flex;flex-direction:column;align-self:start;gap:24px;min-width:0}
.classroom-absence-card,.classroom .incident-call{box-sizing:border-box;position:static;display:flex;flex-direction:column;align-items:stretch;
 gap:14px;width:100%;max-width:none;min-width:0;margin:0;padding:24px;border:1px solid #33485c;border-radius:18px;background:#182737;color:#edf3fa}
.classroom-operations h2{font-size:clamp(23px,1.8vw,34px);line-height:1.3;margin:0;font-weight:650}
.classroom-operations h2::before{display:inline-block;width:8px;height:24px;margin-right:12px;vertical-align:-2px;background:#82b8e5;border-radius:4px;content:""}
.classroom-operations .operation-help,.classroom-operations .call-help{font-size:clamp(16px,1.2vw,23px);line-height:1.5;margin:0;color:#aabdd0}
.classroom-operations small{font-size:clamp(14px,1vw,19px);line-height:1.5;color:#aabdd0}
.classroom .absence-bar{display:flex;flex-direction:column;align-items:stretch;gap:14px;min-width:0;padding:0;border:0;background:transparent}
.classroom .absence-label{margin:0;font-size:17px;font-weight:400;color:#aabdd0}
.classroom .absence-label small{font-size:clamp(17px,1.3vw,24px);margin-top:6px;color:#ecc987}
.classroom .absence-bar button,.classroom .incident-call button,.classroom .absence-edit{width:100%;min-width:0;min-height:64px;
 padding:12px 16px;border-radius:10px;font-size:clamp(22px,1.7vw,32px);font-weight:650;white-space:normal;line-height:1.35;touch-action:manipulation}
.classroom .absence-none{background:#235248;border-color:#66b79d;color:#e5fff4}
.classroom .absence-some{background:#604c2d;border-color:#c9a257;color:#fff0cd}
.classroom .absence-bar button:disabled{opacity:.5;cursor:default}
.classroom .incident-call button{background:#2e5980;border-color:#75a5d3;color:#f0f7ff}
.classroom .incident-call p{display:block;max-width:none;min-width:0;font-size:clamp(18px,1.3vw,25px);line-height:1.5;margin:0;
 padding:12px 14px;background:#203748;border:1px solid #426476;border-radius:10px;color:#b9ccdc;overflow-wrap:anywhere}
.classroom .incident-call-received p{color:#b3e5ca;border-color:#548d77;background:#203e36;font-weight:600}
.classroom .incident-call-busy p{color:#ffe2ad;border-color:#b19058;background:#493c29}
.classroom .absence-edit{position:static;inset:auto;max-width:none;border:1px solid #80b49b;box-shadow:none;z-index:auto;background:#244d43}
.absence-summary{font-size:clamp(19px,1.5vw,28px);line-height:1.5;color:#b3e5ca}
.classroom .absence-reminder{order:3;flex-direction:column;align-items:stretch;gap:10px;margin:0;padding:12px;font-size:16px;border-width:1px}
.classroom .absence-reminder button{min-height:44px;font-size:17px;padding:6px 12px;white-space:normal}
.classroom .absence-label>#absenceBarTitle{display:none}
.classroom .absence-overdue .absence-label,.classroom .absence-overdue>.operation-hint{display:none}
.classroom .absence-overdue .absence-reminder{order:0;font-size:16px;padding:10px 12px;line-height:1.5}
.classroom #absenceReminderOpen{display:none}
.classroom .room-picker-strip{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:22px;margin:0;
 padding:20px 0 0;border-top:1px solid #33485c;order:0}
.classroom .room-picker-strip label{font-size:clamp(18px,1.5vw,28px)}
.classroom .room-buttons{gap:10px}
.classroom .room-button{flex:1 0 50px;min-width:50px;max-width:160px;min-height:60px;padding:10px 8px;font-size:clamp(22px,1.7vw,32px);line-height:1.2}
.classroom .room-button[aria-pressed="true"]{background:#2e5980;border-color:#86bce9;box-shadow:none}
.classroom-operations button:focus-visible,.classroom .room-button:focus-visible{outline:3px solid #f0c16c;outline-offset:3px}
@media(min-width:801px) and (max-height:1000px){
 .classroom .clock-screen{padding:16px 24px;gap:16px}.classroom .classroom-heading{min-height:54px;gap:14px}
 .classroom-brand>strong{font-size:25px}.classroom .classroom-heading .exam-title{font-size:14px}
 .classroom .phase{font-size:18px;min-height:42px;padding:8px 12px}
 .classroom-board{gap:18px;grid-template-columns:minmax(0,1fr) 300px}
 .classroom-display{padding:18px 22px}.classroom .clock-content{padding:16px 0;min-height:260px}
 .classroom h1{font-size:44px;margin-bottom:8px}.classroom .countdown-label{font-size:20px;margin-bottom:8px}
 .classroom .countdown{font-size:clamp(64px,min(12vw,18vh),170px)}.classroom .announcement{font-size:21px;margin-top:16px}
 .classroom .exam-details{padding-top:18px;gap:12px}.classroom .exam-details strong,.classroom .invigilators-list{font-size:24px}
 .classroom-operations{gap:16px}.classroom-absence-card,.classroom .incident-call{padding:16px;gap:8px}
 .classroom-operations h2{font-size:24px}.classroom-operations small{font-size:14px}
 .classroom .absence-bar{gap:10px}.classroom .absence-label,.classroom .absence-label small{font-size:16px}
 .classroom .absence-bar button,.classroom .incident-call button,.classroom .absence-edit{min-height:50px;padding:8px 12px;font-size:23px}
 .classroom .incident-call p{font-size:18px;padding:8px 12px}
 .classroom .room-picker-strip{padding-top:14px}.classroom .room-button{min-height:48px;font-size:24px}
}
@media(max-width:1150px){
 .classroom .clock-screen{padding:18px 22px;gap:18px}
 .classroom .classroom-heading{grid-template-columns:minmax(180px,1fr) auto auto;gap:12px}
 .classroom .grade-rail{grid-column:1/-1;grid-row:2;max-width:none}
 .classroom .classroom-header-tools{grid-column:3;grid-row:1}.classroom .phase{grid-column:2;grid-row:1}
 .classroom .listening-badge{max-width:220px}.classroom-board{grid-template-columns:minmax(0,1fr) 270px;gap:18px}
 .classroom-display{padding:18px}.classroom .exam-details{grid-template-columns:1fr 1fr;gap:16px}
 .classroom .exam-details>div:nth-child(3){border:0}.classroom .countdown{font-size:clamp(60px,10vw,150px)}
 .classroom .room-picker-strip{gap:14px}.classroom-absence-card,.classroom .incident-call{padding:18px}
}
@media(max-width:800px){
 .classroom .clock-screen{padding:16px;gap:16px}
 .classroom .classroom-heading{grid-template-columns:minmax(0,1fr) auto}
 .classroom-brand>strong{font-size:24px}.classroom .classroom-heading .exam-title{font-size:14px}
 .classroom .classroom-header-tools{grid-column:2}.classroom .phase{grid-column:1;grid-row:2;justify-self:start;font-size:17px}
 .classroom .grade-rail{grid-column:1/-1;grid-row:3}.classroom .grade-key{font-size:18px;min-height:44px}
 .classroom .listening-badge{max-width:200px}.classroom .listening-badge>span:first-child{font-size:14px}
 .classroom-board{grid-template-columns:minmax(0,1fr);gap:16px}
 .classroom-room-identity{font-size:17px;gap:10px}.classroom-room-identity strong{font-size:23px}
 .classroom .clock-content{min-height:230px;padding:24px 0}.classroom h1{font-size:36px}
 .classroom .countdown{font-size:clamp(46px,12vw,100px)}.classroom .announcement{font-size:18px;margin-top:18px}
 .classroom .exam-details{padding-top:18px}.classroom .exam-details span{font-size:15px}
 .classroom .exam-details strong,.classroom .invigilators-list{font-size:22px}
 .classroom-operations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
 .classroom-operations h2{font-size:22px}.classroom-operations small{font-size:14px}
 .classroom .absence-bar button,.classroom .incident-call button,.classroom .absence-edit{font-size:22px;min-height:52px}
 .classroom .room-picker-strip{grid-template-columns:1fr;gap:12px;padding-top:16px}
}
@media(max-width:520px){
 .classroom .clock-screen{padding:12px}.classroom .classroom-heading{gap:10px}
 .classroom-brand>strong{font-size:22px}.classroom .listening-badge{max-width:150px;padding:8px}
 .classroom .listening-badge>strong{font-size:15px}.classroom .listening-badge>small,.classroom .badge-identity{font-size:11px}
 .classroom-operations{display:flex;gap:14px}.classroom .classroom-sound{width:44px;height:44px}
 .classroom .exam-details strong,.classroom .invigilators-list{font-size:20px}
 .classroom .room-button{min-height:48px;font-size:22px}
}

/* v5 approved 16:9 layout. Bound the actual viewport, not the physical panel size.
   Exceptional long controls remain scroll-accessible inside their own region. */
.classroom .classroom-heading .exam-title{display:none}
.classroom .grade-key{width:auto;flex:0 0 auto}
.classroom .grade-rail{flex-wrap:nowrap;max-width:none;min-width:0;overflow-x:auto;scrollbar-width:thin}
.classroom .classroom-room-identity strong{overflow-wrap:anywhere;min-width:0}
.classroom .absence-summary{padding:12px 14px;background:#203c35;border:1px solid #427f69;border-radius:9px;font-size:20px}
.classroom .absence-edit{font-size:20px;min-height:50px}
.classroom .room-buttons{min-width:0}
.classroom .exam-details>div,.classroom .invigilators-list,.classroom .invigilator-name{min-width:0;max-width:100%}
.classroom .exam-details strong,.classroom .invigilator-name>span{overflow-wrap:anywhere}
.classroom .invigilator-name{display:inline;width:auto;flex-shrink:1;white-space:normal;overflow-wrap:anywhere}
.classroom .invigilator-name>span{display:inline}
@media(min-width:1000px) and (min-height:550px){
 .classroom .clock-screen,.classroom .incident-call-screen{
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:68px minmax(0,1fr) auto;height:100svh;min-height:0;
  padding:22px 32px;gap:20px;overflow:visible}
 .classroom .classroom-heading{display:flex;min-height:0;gap:20px}
 .classroom-brand{flex:0 0 auto;max-width:260px}.classroom-brand>strong{font-size:28px;white-space:nowrap}
 .classroom .grade-rail{margin-left:auto;flex:0 1 auto}
 .classroom .grade-key{font-size:21px;padding:9px 17px;min-height:44px;min-width:58px}
 .classroom .phase{flex:0 0 auto;font-size:19px;min-height:44px;padding:10px 14px}
 .classroom-header-tools{flex:0 1 auto;max-width:270px}
 .classroom .listening-badge{max-width:210px;padding:7px 10px}
 .classroom .listening-badge>span:first-child{font-size:14px}.classroom .listening-badge>strong{font-size:15px}
 .classroom .listening-badge>span:first-child,.classroom .listening-badge>strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .classroom-board{grid-template-columns:minmax(0,1fr) 330px;gap:22px;min-height:0;flex:none}
 .classroom-display{min-height:0;overflow:auto;padding:20px 26px;scrollbar-width:thin}
 .classroom-room-identity{flex:0 0 auto;font-size:19px;gap:14px}
 .classroom-room-identity strong{font-size:30px;line-height:1.3}
 .classroom .clock-content{flex:1 1 0;min-height:0;padding:10px 0;gap:0}
 .classroom h1{font-size:clamp(32px,3.7vw,70px);line-height:1.15;margin:0 0 10px;overflow-wrap:anywhere}
 .classroom .countdown-label{font-size:clamp(17px,1.5vw,27px);margin:0 0 7px;line-height:1.3}
 .classroom .countdown{font-size:clamp(70px,min(12vw,22svh),230px);line-height:1.15;white-space:nowrap;flex:0 0 auto}
 .classroom .announcement{font-size:clamp(16px,1.4vw,25px);margin:14px 0 0;line-height:1.4}
 .classroom .exam-details{flex:0 0 auto;grid-template-columns:1.25fr 1.3fr 1fr 1fr;gap:16px;padding:16px 0 0}
 .classroom .exam-details>div{gap:6px;padding-right:12px;min-width:0}
 .classroom .exam-details span{font-size:17px}
 .classroom .exam-details strong,.classroom .invigilators-list{font-size:clamp(19px,1.5vw,28px);line-height:1.4;overflow-wrap:anywhere}
 .classroom .invigilators-list{display:flex;flex-flow:row wrap;gap:5px 12px}
 .classroom-operations{align-self:stretch;overflow-y:auto;min-height:0;gap:18px;scrollbar-width:thin;padding:1px 2px 3px}
 .classroom-absence-card,.classroom .incident-call{flex:0 0 auto;padding:20px;gap:12px;border-radius:16px}
 .classroom-operations h2{font-size:24px}.classroom-operations h2::before{width:5px;height:22px;margin-right:10px}
 .classroom-operations .operation-help,.classroom-operations .call-help{font-size:15px;line-height:1.5}
 .classroom-operations small{font-size:14px;line-height:1.5}
 .classroom .absence-bar{gap:10px}.classroom .absence-label,.classroom .absence-label small{font-size:15px}
 .classroom .absence-bar button,.classroom .incident-call button,.classroom .absence-edit{
  font-size:22px;min-height:52px;padding:10px 12px;line-height:1.3}
 .classroom .absence-edit{font-size:19px;background:#21384a;border-color:#456179}
 .classroom .incident-call p{font-size:16px;padding:11px 12px;line-height:1.4}
 .classroom .room-picker-strip{grid-template-columns:auto minmax(0,1fr);min-height:60px;gap:18px;padding-top:14px;max-height:120px;overflow:auto;scrollbar-width:thin}
 .classroom .room-picker-strip label{font-size:19px;white-space:nowrap}
 .classroom .room-buttons{display:flex;flex-wrap:wrap;gap:9px;align-content:start;max-height:98px;overflow-y:auto;scrollbar-width:thin;padding:2px}
 .classroom .room-button{flex:1 0 44px;min-width:44px;max-width:160px;min-height:46px;font-size:23px;padding:7px 8px;line-height:1.2}
}
@media(min-width:1000px) and (max-height:850px) and (min-height:550px){
 .classroom .clock-screen,.classroom .incident-call-screen{grid-template-rows:54px minmax(0,1fr) auto;padding:14px 22px;gap:14px}
 .classroom .classroom-heading{gap:14px}.classroom-brand>strong{font-size:24px}
 .classroom .grade-key{font-size:18px;min-width:52px;padding:8px 12px;min-height:42px}
 .classroom .phase{font-size:16px;padding:9px 12px}
 .classroom-header-tools{max-width:240px;gap:8px}.classroom .classroom-sound{width:42px;height:42px}
 .classroom-board{grid-template-columns:minmax(0,1fr) 286px;gap:16px}
 .classroom-display{padding:15px 20px}.classroom-room-identity{font-size:16px;gap:12px}.classroom-room-identity strong{font-size:25px}
 .classroom h1{font-size:44px;margin-bottom:8px}.classroom .countdown-label{font-size:20px}
 .classroom .countdown{font-size:clamp(70px,min(12vw,21svh),170px)}.classroom .announcement{font-size:18px;margin-top:12px}
 .classroom .exam-details{padding-top:13px;gap:12px}.classroom .exam-details span{font-size:14px}
 .classroom .exam-details strong,.classroom .invigilators-list{font-size:21px}.classroom .invigilators-list{gap:4px 8px}
 .classroom-operations{gap:14px}.classroom-absence-card,.classroom .incident-call{padding:16px;gap:10px}
 .classroom-operations h2{font-size:21px}.classroom-operations small,.classroom-operations .call-help,.classroom-operations .operation-help{font-size:13px}
 .classroom .absence-summary{font-size:18px;padding:11px 12px}
 .classroom .absence-bar button,.classroom .incident-call button,.classroom .absence-edit{min-height:46px;font-size:20px;padding:8px 12px}
 .classroom .absence-edit{font-size:17px}.classroom .incident-call p{font-size:14px;padding:10px 12px}
 .classroom .room-picker-strip{min-height:52px;padding-top:10px;gap:15px;max-height:108px}
 .classroom .room-picker-strip label{font-size:16px}.classroom .room-buttons{gap:7px;max-height:90px}
 .classroom .room-button{min-height:42px;font-size:21px}
}
@media(min-width:1000px) and (max-height:680px) and (min-height:550px){
 .classroom h1{font-size:36px}.classroom .countdown-label{font-size:18px}
 .classroom .countdown{font-size:clamp(66px,18svh,130px)}.classroom .announcement{font-size:16px;margin-top:6px}
 .classroom .exam-details strong,.classroom .invigilators-list{font-size:19px}
 .classroom-absence-card,.classroom .incident-call{padding:13px 15px;gap:8px}
 .classroom-operations h2{font-size:19px}.classroom-operations .call-help,.classroom-operations small{font-size:12px}
}
@media(max-width:999px),(max-height:549px){
 .classroom .clock-screen,.classroom .incident-call-screen{height:auto;min-height:100svh;overflow:visible}
 .classroom .grade-rail{flex-wrap:wrap;overflow:visible}
}

/* Keep transient success feedback in the absence panel, not over room controls. */
.classroom .classroom-absence-card .absence-receipt{position:static;max-width:100%;margin:0;padding:8px 10px;font-size:15px;line-height:1.4;overflow-wrap:anywhere;box-shadow:none}
@media(min-width:1000px) and (min-height:550px){
 .classroom .grade-key,.classroom .phase,.classroom .classroom-sound,.classroom .room-button,
 .classroom .absence-bar button,.classroom .incident-call button,.classroom .absence-edit{min-height:48px}
 .classroom .classroom-sound{min-width:48px}
 .classroom .room-button{min-width:48px}
}
@media(min-width:1000px) and (max-height:680px) and (min-height:550px){
 .classroom-operations{gap:10px}
 .classroom-absence-card,.classroom .incident-call{padding:10px 14px;gap:6px}
}