[hidden]{display:none!important}.whiteboard{height:auto!important;max-width:1400px;margin:auto}h1{margin-bottom:4px}h2{font-size:1.25rem}.panel{background:white;border:1px solid #cbd5da;border-radius:12px;padding:18px;margin-bottom:12px}summary{cursor:pointer;font-weight:700;padding:8px}form,label{display:grid;gap:8px}form{max-width:650px;gap:16px;margin:16px 0}input,button,select{font:inherit;min-height:44px;padding:10px;border:1px solid #8ca1af;border-radius:7px}button{background:#173747;color:white;cursor:pointer}label{margin-bottom:10px}fieldset{border:1px solid #cbd5da;border-radius:8px;min-width:0}.room-grid,.slot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.slot{border:1px solid #cbd5da;border-radius:8px;padding:12px;display:grid;gap:8px}.slot.on{border:2px solid #26805a;background:#eaf7ef}.slot p{margin:0;overflow-wrap:anywhere}.slot-choice{display:flex;align-items:center;gap:8px}.slot-choice input{min-height:24px;width:24px}.student-state{display:flex;align-items:center;gap:20px;flex-wrap:wrap}#sound-state{color:#925019}#sound-state.on{color:#17613e}#status{margin:0 0 10px;min-height:24px}#status.error{color:#a0202c}#metronome-controls{display:flex;gap:16px;flex-wrap:wrap}#metronome-controls label{max-width:180px}button:focus-visible,input:focus-visible{outline:3px solid #db8a16;outline-offset:3px}

/* Student actions stay together above the keyboard. */
.student-actions { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.student-metronome { position: relative; }
.student-metronome > summary {
  min-height: 44px; padding: 10px; border: 1px solid #8ca1af;
  border-radius: 7px; background: #173747; color: white; font-weight: 400;
}
.student-metronome[open] { z-index: 5; }
.student-metronome #metronome-controls {
  position: absolute; top: calc(100% + 8px); left: 0;
  width: min(320px, calc(100vw - 48px)); padding: 16px; margin: 0;
  background: white; box-shadow: 0 8px 24px #17262f26;
}
.student-metronome #metronome-controls label { max-width: none; width: 100%; }
@media (max-width: 600px) {
  .student-metronome #metronome-controls { left: auto; right: 0; }
}